chore(dialogs): remove excessive duplicate markup for fallback modal hack

src/assets/scripts/index.js

@@ -1,14 +1,14 @@
 window.addEventListener("load", () => {
   // dialog controls
   (() => {
-    if (document.querySelectorAll(".modal-open").length) {
-      document.querySelectorAll(".modal-open").forEach((button) => {
-        const modalId = button.getAttribute("data-modal-trigger");
-        const dialog = document.getElementById(`dialog-${modalId}`);
+    if (document.querySelectorAll(".dialog-open").length) {
+      document.querySelectorAll(".dialog-open").forEach((button) => {
+        const dialogId = button.getAttribute("data-dialog-trigger");
+        const dialog = document.getElementById(`dialog-${dialogId}`);
 
         if (!dialog) return;
 
-        const closeButton = dialog.querySelector(".modal-close");
+        const closeButton = dialog.querySelector(".dialog-close");
 
         button.addEventListener("click", () => {
           dialog.showModal();

src/assets/styles/base/vars.css

@@ -178,8 +178,8 @@
   /* shadows */
   --box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color);
 
-  /* modals */
-  --modal-overlay-background: light-dark(#ffffffbf, #000000bf);
+  /* dialogs */
+  --dialog-overlay-background: light-dark(#ffffffbf, #000000bf);
 
   /* input accent color */
   accent-color: var(--accent-color);

src/assets/styles/components/buttons.css

@@ -1,6 +1,6 @@
 @import url("./text-toggle.css");
 
-button:not([data-modal-button]),
+button:not([data-dialog-button]),
 .button {
   appearance: none;
   border: 2px solid var(--section-color, var(--accent-color));

src/assets/styles/components/dialog.css

@@ -8,38 +8,13 @@
   to { opacity: 0; transform: scale(0.95); }
 }
 
-.modal-wrapper {
-  background: var(--modal-overlay-background);
-  z-index: 5;
-}
-
-.modal-wrapper,
-.modal-body {
-  inset: 0;
-  position: fixed;
-}
-
-.modal-wrapper,
-.modal-body,
 dialog {
   width: var(--sizing-full);
   height: var(--sizing-full);
 }
 
-.modal-input {
-  display: none;
-
-  &:checked ~ .modal-wrapper {
-    display: block;
-  }
-
-  &:not(:checked) ~ .modal-wrapper {
-    display: none;
-  }
-}
-
-.modal-open,
-.modal-close {
+.dialog-open,
+.dialog-close {
   display: inline-flex;
   vertical-align: middle;
   color: var(--section-color, var(--accent-color));
@@ -61,8 +36,7 @@ dialog {
   }
 }
 
-dialog,
-.modal-body {
+dialog {
   background: var(--background-color);
   padding: var(--spacing-lg) var(--spacing-base);
   overflow-y: auto;
@@ -96,7 +70,7 @@ dialog,
     border: var(--border-gray);
   }
 
-  .modal-close {
+  .dialog-close {
     position: sticky;
     z-index: 6;
     top: 0;
@@ -111,5 +85,5 @@ dialog {
 }
 
 dialog::backdrop {
-  background: var(--modal-overlay-background);
+  background: var(--dialog-overlay-background);
 }

src/assets/styles/index.css

@@ -30,7 +30,7 @@
 @import url("./components/header.css") layer(components);
 @import url("./components/media-grid.css") layer(components);
 @import url("./components/nav.css") layer(components);
-@import url("./components/modal.css") layer(components);
+@import url("./components/dialog.css") layer(components);
 @import url("./components/music-chart.css") layer(components);
 @import url("./components/paginator.css") layer(components);
 @import url("./components/progress-bar.css") layer(components);