@fluid-theme/core 0.4.3

package/src/components/modal.css

@@ -0,0 +1,364 @@
+/**
+ * Fluid Framework - Modal/Dialog Component
+ * @layer components
+ *
+ * Modal dialogs for focused interactions.
+ * Built on the native <dialog> element for accessibility.
+ * CSS-only backdrop and transitions; JS needed only for open/close.
+ *
+ * Usage:
+ *   <dialog class="modal">
+ *     <div class="modal__content">
+ *       <header class="modal__header">
+ *         <h2 class="modal__title">Title</h2>
+ *         <button class="modal__close" aria-label="Close">&times;</button>
+ *       </header>
+ *       <div class="modal__body">Content here</div>
+ *       <footer class="modal__footer">
+ *         <button data-variant="ghost">Cancel</button>
+ *         <button>Confirm</button>
+ *       </footer>
+ *     </div>
+ *   </dialog>
+ *
+ * Sizes: data-size="sm|lg|full"
+ * Variants: data-variant="centered|drawer-right|drawer-left"
+ *
+ * JS API:
+ *   dialog.showModal()  — open with backdrop
+ *   dialog.close()      — close
+ */
+
+@layer components {
+  /* ========================================
+     BASE MODAL (native <dialog>)
+     ======================================== */
+
+  .modal {
+    /* Reset dialog defaults */
+    border: none;
+    padding: 0;
+    max-inline-size: none;
+    max-block-size: none;
+    background: transparent;
+    color: var(--color-text);
+    overflow: visible;
+
+    /* Full viewport overlay */
+    position: fixed;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    z-index: var(--z-modal);
+
+    /* Center the content by default */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-5);
+
+    /* Closed state */
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+
+    /* Transition */
+    transition:
+      opacity var(--duration-normal) var(--ease-fluid),
+      visibility var(--duration-normal) var(--ease-fluid);
+  }
+
+  /* Open state */
+  .modal[open] {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  /* Native backdrop */
+  .modal::backdrop {
+    background: oklch(0% 0 0 / 0.5);
+    backdrop-filter: blur(4px);
+  }
+
+
+  /* ========================================
+     MODAL CONTENT PANEL
+     ======================================== */
+
+  .modal__content {
+    --_modal-width: min(90vw, 32rem);
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    inline-size: var(--_modal-width);
+    max-block-size: min(90vh, 40rem);
+
+    background: var(--color-surface-raised);
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-2xl);
+    box-shadow: var(--shadow-xl);
+    overflow: hidden;
+
+    /* Entry animation */
+    transform: translateY(var(--space-5)) scale(0.97);
+    transition:
+      transform var(--duration-normal) var(--ease-settle);
+  }
+
+  .modal[open] .modal__content {
+    transform: translateY(0) scale(1);
+  }
+
+
+  /* ========================================
+     MODAL SECTIONS
+     ======================================== */
+
+  .modal__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    padding: var(--space-5) var(--space-6);
+    border-block-end: var(--border-width) solid var(--color-border-subtle);
+    flex-shrink: 0;
+  }
+
+  .modal__title {
+    font-size: var(--font-size-lg);
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-tight);
+    margin: 0;
+  }
+
+  .modal__close {
+    --_btn-bg: transparent;
+    --_btn-shadow: none;
+
+    position: relative;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+    padding: 0;
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-xl);
+    line-height: 1;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition: color var(--duration-fast) var(--ease-fluid),
+                background-color var(--duration-fast) var(--ease-fluid);
+  }
+
+  .modal__close:hover {
+    color: var(--color-text);
+    background-color: var(--color-surface);
+  }
+
+  .modal__body {
+    flex: 1;
+    padding: var(--space-6);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  .modal__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-6);
+    border-block-start: var(--border-width) solid var(--color-border-subtle);
+    flex-shrink: 0;
+  }
+
+
+  /* ========================================
+     SIZE VARIANTS
+     ======================================== */
+
+  /* Small - alerts, confirmations */
+  .modal[data-size="sm"] .modal__content {
+    --_modal-width: min(90vw, 24rem);
+  }
+
+  /* Large - forms, complex content */
+  .modal[data-size="lg"] .modal__content {
+    --_modal-width: min(90vw, 48rem);
+    max-block-size: min(90vh, 50rem);
+  }
+
+  /* Full - immersive experiences */
+  .modal[data-size="full"] .modal__content {
+    --_modal-width: min(95vw, 72rem);
+    max-block-size: 95vh;
+  }
+
+
+  /* ========================================
+     DRAWER VARIANTS
+     Slide in from edges
+     ======================================== */
+
+  /* Right drawer */
+  .modal[data-variant="drawer-right"] {
+    justify-content: flex-end;
+    padding: 0;
+  }
+
+  .modal[data-variant="drawer-right"] .modal__content {
+    --_modal-width: min(90vw, 28rem);
+    max-block-size: 100vh;
+    block-size: 100vh;
+    border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
+    transform: translateX(100%);
+  }
+
+  .modal[data-variant="drawer-right"][open] .modal__content {
+    transform: translateX(0);
+  }
+
+  /* Left drawer */
+  .modal[data-variant="drawer-left"] {
+    justify-content: flex-start;
+    padding: 0;
+  }
+
+  .modal[data-variant="drawer-left"] .modal__content {
+    --_modal-width: min(90vw, 28rem);
+    max-block-size: 100vh;
+    block-size: 100vh;
+    border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0;
+    transform: translateX(-100%);
+  }
+
+  .modal[data-variant="drawer-left"][open] .modal__content {
+    transform: translateX(0);
+  }
+
+
+  /* ========================================
+     DESTRUCTIVE CONFIRMATION MODIFIER
+     Wider gap in footer, mobile stacking
+     ======================================== */
+
+  .modal[data-destructive] .modal__footer {
+    gap: var(--space-5);
+  }
+
+  @media (max-width: 40rem) {
+    .modal[data-destructive] .modal__footer {
+      flex-direction: column-reverse;
+    }
+
+    .modal[data-destructive] .modal__footer > button {
+      inline-size: 100%;
+    }
+  }
+
+
+  /* ========================================
+     THEME-SPECIFIC MODAL STYLES
+     ======================================== */
+
+  /* Still: sharp, no animation */
+  [data-motion="still"] .modal__content {
+    border-radius: var(--radius-md);
+    transform: none;
+    transition: none;
+  }
+
+  [data-motion="still"] .modal {
+    transition: none;
+  }
+
+  /* Serene: gentle, pillowy */
+  [data-motion="serene"] .modal__content {
+    border-radius: var(--radius-2xl);
+    box-shadow: var(--shadow-lg);
+  }
+
+  /* Cascade: bouncy entry */
+  [data-motion="cascade"] .modal__content {
+    border-radius: var(--radius-2xl);
+  }
+
+  /* Rapids: hard offset shadow */
+  [data-motion="rapids"] .modal__content {
+    box-shadow: var(--shadow-offset-hover);
+  }
+
+  /* Tsunami: dramatic, asymmetric corners */
+  [data-motion="tsunami"] .modal__content {
+    border-radius: var(--radius-asymmetric-lg, 0 48px 0 0);
+    box-shadow: var(--shadow-xl);
+  }
+
+
+  /* ========================================
+     RESPONSIVE
+     ======================================== */
+
+  @media (max-width: 40rem) {
+    .modal {
+      padding: var(--space-3);
+      align-items: flex-end;
+    }
+
+    .modal__content {
+      --_modal-width: 100%;
+      max-block-size: 85vh;
+      border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+      transform: translateY(100%);
+    }
+
+    .modal[open] .modal__content {
+      transform: translateY(0);
+    }
+
+    /* Drawers become bottom sheet on mobile */
+    .modal[data-variant="drawer-right"],
+    .modal[data-variant="drawer-left"] {
+      justify-content: center;
+      align-items: flex-end;
+      padding: 0;
+    }
+
+    .modal[data-variant="drawer-right"] .modal__content,
+    .modal[data-variant="drawer-left"] .modal__content {
+      block-size: auto;
+      max-block-size: 85vh;
+      border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+      transform: translateY(100%);
+    }
+
+    .modal[data-variant="drawer-right"][open] .modal__content,
+    .modal[data-variant="drawer-left"][open] .modal__content {
+      transform: translateY(0);
+    }
+  }
+
+
+  /* ========================================
+     REDUCED MOTION
+     ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    .modal {
+      transition: none;
+    }
+
+    .modal__content {
+      transform: none;
+      transition: none;
+    }
+
+    .modal[open] .modal__content {
+      transform: none;
+    }
+  }
+}