Default modal to light, add solid class instead

src/components/account-info.jsx

@@ -1352,7 +1352,6 @@ function RelatedActions({
       </div>
       {!!showTranslatedBio && (
         <Modal
-          class="light"
           onClose={() => {
             setShowTranslatedBio(false);
           }}
@@ -1366,7 +1365,6 @@ function RelatedActions({
       )}
       {!!showAddRemoveLists && (
         <Modal
-          class="light"
           onClose={() => {
             setShowAddRemoveLists(false);
           }}
@@ -1379,7 +1377,6 @@ function RelatedActions({
       )}
       {!!showPrivateNoteModal && (
         <Modal
-          class="light"
           onClose={() => {
             setShowPrivateNoteModal(false);
           }}
@@ -1571,7 +1568,6 @@ function AddRemoveListsSheet({ accountID, onClose }) {
       </main>
       {showListAddEditModal && (
         <Modal
-          class="light"
           onClick={(e) => {
             if (e.target === e.currentTarget) {
               setShowListAddEditModal(false);

src/components/compose.jsx

@@ -1254,7 +1254,6 @@ function Compose({
       </div>
       {showEmoji2Picker && (
         <Modal
-          class="light"
           onClick={(e) => {
             if (e.target === e.currentTarget) {
               setShowEmoji2Picker(false);
@@ -1768,7 +1767,6 @@ function MediaAttachment({
       </div>
       {showModal && (
         <Modal
-          class="light"
           onClick={(e) => {
             if (e.target === e.currentTarget) {
               setShowModal(false);

src/components/keyboard-shortcuts-help.jsx

@@ -32,7 +32,7 @@ export default memo(function KeyboardShortcutsHelp() {
 
   return (
     !!snapStates.showKeyboardShortcutsHelp && (
-      <Modal class="light" onClose={onClose}>
+      <Modal onClose={onClose}>
         <div id="keyboard-shortcuts-help-container" class="sheet" tabindex="-1">
           <button type="button" class="sheet-close" onClick={onClose}>
             <Icon icon="x" />

src/components/modal.css

@@ -10,11 +10,17 @@
   align-items: center;
   background-color: var(--backdrop-color);
   animation: appear 0.5s var(--timing-function) both;
-}
-#modal-container > div .sheet {
-  transition: transform 0.3s var(--timing-function);
-  transform-origin: center bottom;
-}
-#modal-container > div:has(~ div) .sheet {
-  transform: scale(0.975);
+
+  &.solid {
+    background-color: var(--backdrop-solid-color);
+  }
+
+  .sheet {
+    transition: transform 0.3s var(--timing-function);
+    transform-origin: center bottom;
+  }
+
+  &:has(~ div) .sheet {
+    transform: scale(0.975);
+  }
 }

src/components/modals.jsx

@@ -35,7 +35,7 @@ export default function Modals() {
   return (
     <>
       {!!snapStates.showCompose && (
-        <Modal>
+        <Modal class="solid">
           <Compose
             replyToStatus={
               typeof snapStates.showCompose !== 'boolean'
@@ -109,7 +109,6 @@ export default function Modals() {
       )}
       {!!snapStates.showAccount && (
         <Modal
-          class="light"
           onClose={() => {
             states.showAccount = false;
           }}
@@ -160,7 +159,6 @@ export default function Modals() {
       )}
       {!!snapStates.showShortcutsSettings && (
         <Modal
-          class="light"
           onClose={() => {
             states.showShortcutsSettings = false;
           }}
@@ -172,7 +170,6 @@ export default function Modals() {
       )}
       {!!snapStates.showGenericAccounts && (
         <Modal
-          class="light"
           onClose={() => {
             states.showGenericAccounts = false;
           }}
@@ -188,7 +185,6 @@ export default function Modals() {
       )}
       {!!snapStates.showMediaAlt && (
         <Modal
-          class="light"
           onClose={(e) => {
             states.showMediaAlt = false;
           }}
@@ -204,6 +200,7 @@ export default function Modals() {
       )}
       {!!snapStates.showEmbedModal && (
         <Modal
+          class="solid"
           onClose={() => {
             states.showEmbedModal = false;
           }}

src/components/notification-service.jsx

@@ -144,7 +144,6 @@ export default memo(function NotificationService() {
     const { id, account, notification, sameInstance } = showNotificationSheet;
     return (
       <Modal
-        class="light"
         onClick={(e) => {
           if (e.target === e.currentTarget) {
             onClose();

src/components/shortcuts-settings.jsx

@@ -457,7 +457,6 @@ function ShortcutsSettings({ onClose }) {
       </main>
       {showForm && (
         <Modal
-          class="light"
           onClick={(e) => {
             if (e.target === e.currentTarget) {
               setShowForm(false);
@@ -481,7 +480,6 @@ function ShortcutsSettings({ onClose }) {
       )}
       {showImportExport && (
         <Modal
-          class="light"
           onClick={(e) => {
             if (e.target === e.currentTarget) {
               setShowImportExport(false);

src/components/status.jsx

@@ -1985,7 +1985,6 @@ function Status({
         </div>
         {!!showEdited && (
           <Modal
-            class="light"
             onClick={(e) => {
               if (e.target === e.currentTarget) {
                 setShowEdited(false);
@@ -2008,7 +2007,6 @@ function Status({
         )}
         {!!showEmbed && (
           <Modal
-            class="light"
             onClick={(e) => {
               if (e.target === e.currentTarget) {
                 setShowEmbed(false);
@@ -2953,7 +2951,6 @@ function FilteredStatus({
       </article>
       {!!showPeek && (
         <Modal
-          class="light"
           onClick={(e) => {
             if (e.target === e.currentTarget) {
               setShowPeek(false);

src/index.css

@@ -69,7 +69,7 @@
   --outline-color: rgba(128, 128, 128, 0.2);
   --outline-hover-color: rgba(128, 128, 128, 0.7);
   --divider-color: rgba(0, 0, 0, 0.1);
-  --backdrop-color: rgba(0, 0, 0, 0.05);
+  --backdrop-color: rgba(0, 0, 0, 0.1);
   --backdrop-darker-color: rgba(0, 0, 0, 0.25);
   --backdrop-solid-color: #eee;
   --img-bg-color: rgba(128, 128, 128, 0.2);

src/pages/list.jsx

@@ -143,7 +143,6 @@ function List(props) {
       />
       {showListAddEditModal && (
         <Modal
-          class="light"
           onClick={(e) => {
             if (e.target === e.currentTarget) {
               setShowListAddEditModal(false);
@@ -167,7 +166,6 @@ function List(props) {
       )}
       {showManageMembersModal && (
         <Modal
-          class="light"
           onClick={(e) => {
             if (e.target === e.currentTarget) {
               setShowManageMembersModal(false);

src/pages/lists.jsx

@@ -108,7 +108,6 @@ function Lists() {
       </div>
       {showListAddEditModal && (
         <Modal
-          class="light"
           onClick={(e) => {
             if (e.target === e.currentTarget) {
               setShowListAddEditModal(false);