@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-modal.scss

@@ -1,210 +1,210 @@
-@use "../abstracts/media-breakpoint" as *;
-@use "../abstracts/functions" as *;
-@use "../tokens/breakpoints-tokens" as *;
-@use "sass:map";
-
-// =============================================================================
-// matcha-modal.scss — Modal dialog system (overlay, backdrop, sizes)
-// =============================================================================
-
-// ── Size generator ──────────────────────────────────────────────────────────
-
-@mixin generate-matcha-modal-sizes-classes($helper-breakpoints) {
-    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
-        @include media-breakpoint($materialBreakpoint) {
-            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
-
-            &[size#{$infix}="tiny"] .matcha-modal {
-                width: 100%;
-                max-width: px-to-rem(320px);
-            }
-
-            &[size#{$infix}="small"] .matcha-modal {
-                width: 100%;
-                max-width: px-to-rem(400px);
-            }
-
-            &[size#{$infix}="medium"] .matcha-modal {
-                width: 100%;
-                max-width: px-to-rem(480px);
-            }
-
-            &[size#{$infix}="large"] .matcha-modal {
-                width: 100%;
-                max-width: px-to-rem(560px);
-            }
-
-            &[size#{$infix}="huge"] .matcha-modal {
-                width: 100%;
-                max-width: px-to-rem(640px);
-            }
-        }
-    }
-}
-
-// ── Overlay container ───────────────────────────────────────────────────────
-
-.matcha-overlay-container {
-    position: fixed;
-    inset: 0;
-    z-index: 1000;
-    pointer-events: none;
-
-    & > * {
-        pointer-events: auto;
-    }
-
-    // Dim previous modals when stacking
-    & > *:not(:last-child) {
-        opacity: 0.1;
-    }
-}
-
-// ── Animations ──────────────────────────────────────────────────────────────
-
-@keyframes matcha-modal-backdrop-in {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-@keyframes matcha-modal-backdrop-out {
-    from { opacity: 1; }
-    to   { opacity: 0; }
-}
-
-// Enter: scale 0.96 + translate -4 + fade (Material 3 emphasized motion).
-// Mais sutil que 0.95/-8 — menos jumpy, mais "presença suave".
-@keyframes matcha-modal-in {
-    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
-    to   { opacity: 1; transform: scale(1) translateY(0); }
-}
-
-// Exit: assimétrico — sai mais rápido que entra (180ms vs 200ms).
-@keyframes matcha-modal-out {
-    from { opacity: 1; transform: scale(1) translateY(0); }
-    to   { opacity: 0; transform: scale(0.96) translateY(-4px); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .matcha-modal-backdrop,
-    .matcha-modal,
-    matcha-modal {
-        animation: none !important;
-        transition: none !important;
-    }
-}
-
-// =============================================================================
-// Theme mixin
-// =============================================================================
-
-@mixin matcha-modal-theme($theme) {
-
-    // ── Host element ──
-    matcha-modal {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: fixed;
-        inset: 0;
-        z-index: 999;
-
-        @include generate-matcha-modal-sizes-classes($helper-breakpoints);
-
-        // Exit animation (added by service before destroy) — accelerated 180ms.
-        &.matcha-modal--closing {
-            .matcha-modal {
-                animation: matcha-modal-out 180ms var(--matcha-easing-accelerated, cubic-bezier(0.4, 0, 1, 1)) forwards;
-            }
-        }
-    }
-
-    // ── Backdrop ──
-    .matcha-modal-backdrop {
-        position: fixed;
-        inset: 0;
-        z-index: 998;
-        cursor: pointer;
-        // Figma matcha/overlay Type=Modal: scrim 50% + blur 6px
-        background: var(--matcha-scrim-modal, rgba(0, 0, 0, 0.5));
-        backdrop-filter: blur(var(--matcha-scrim-modal-blur, 6px));
-        animation: matcha-modal-backdrop-in var(--matcha-duration-normal, 200ms) ease-out;
-
-        &.matcha-modal-backdrop--closing {
-            animation: matcha-modal-backdrop-out 150ms ease-in forwards;
-        }
-    }
-
-    // ── Modal card (Figma DSV3 1:1) ──
-    // bg surface/card · radius 16 · shadow 8r@4y + 32r@12y · sem border.
-    .matcha-modal {
-        position: relative;
-        z-index: 999;
-        display: flex;
-        flex-direction: column;
-        // Perf: contain layout/paint pra browser não recalcular reflow da page atrás.
-        contain: layout paint;
-        border-radius: var(--matcha-radius-xl, 16px);
-        // Floating overlay sobre scrim — usa surface-card-strong (pure white
-        // no light, lifted dark) pra máximo destaque. Cards inline usam o card
-        // soft default (#f8faf8) mas modal precisa pop.
-        background-color: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card));
-        color: var(--matcha-color-fg);
-        overflow: hidden;
-        animation: matcha-modal-in var(--matcha-duration-fast, 200ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
-
-        // Figma DSV3 1:1: 0 4px 8px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.12)
-        box-shadow:
-            0 4px 8px rgba(0, 0, 0, 0.06),
-            0 12px 32px rgba(0, 0, 0, 0.12);
-    }
-
-    // ── Section coloring (layout vive nos component SCSS — single source of truth) ──
-    // Theme só pinta: bg dos slots herda surface-card-strong do parent .matcha-modal,
-    // texto pega text-primary, dividers usam surface-border.
-    .matcha-modal-header__title {
-        color: var(--matcha-color-text-primary);
-    }
-
-    .matcha-modal-content {
-        color: var(--matcha-color-text-primary);
-    }
-
-    // ── Focus ring on modal ──
-    .matcha-modal:focus-visible {
-        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
-        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-    }
-}
-
-// ── Forced colors (Windows High Contrast) ──
-// rgba/border hairline pode sumir; CanvasText/Canvas são system tokens visíveis.
-@media (forced-colors: active) {
-    .matcha-modal {
-        border: 1px solid CanvasText;
-        background-color: Canvas !important;
-    }
-    .matcha-modal-backdrop {
-        background: rgba(0, 0, 0, 0.7) !important;
-        backdrop-filter: none !important;
-    }
-}
-
-// ── Reduced transparency (acessibilidade visual) ──
-// Usuários com dificuldade de ler texto sobre blur preferem solid bg.
-@media (prefers-reduced-transparency: reduce) {
-    .matcha-modal-backdrop {
-        background: rgba(0, 0, 0, 0.85) !important;
-        backdrop-filter: none !important;
-    }
-}
-
-// ── Print ──
-// Convenção DSV3: chrome flutuante (modal/drawer/tooltip) some em impressão.
-@media print {
-    .matcha-overlay-container,
-    .matcha-modal-backdrop,
-    matcha-modal {
-        display: none !important;
-    }
-}
+@use "../abstracts/media-breakpoint" as *;
+@use "../abstracts/functions" as *;
+@use "../tokens/breakpoints-tokens" as *;
+@use "sass:map";
+
+// =============================================================================
+// matcha-modal.scss — Modal dialog system (overlay, backdrop, sizes)
+// =============================================================================
+
+// ── Size generator ──────────────────────────────────────────────────────────
+
+@mixin generate-matcha-modal-sizes-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            &[size#{$infix}="tiny"] .matcha-modal {
+                width: 100%;
+                max-width: px-to-rem(320px);
+            }
+
+            &[size#{$infix}="small"] .matcha-modal {
+                width: 100%;
+                max-width: px-to-rem(400px);
+            }
+
+            &[size#{$infix}="medium"] .matcha-modal {
+                width: 100%;
+                max-width: px-to-rem(480px);
+            }
+
+            &[size#{$infix}="large"] .matcha-modal {
+                width: 100%;
+                max-width: px-to-rem(560px);
+            }
+
+            &[size#{$infix}="huge"] .matcha-modal {
+                width: 100%;
+                max-width: px-to-rem(640px);
+            }
+        }
+    }
+}
+
+// ── Overlay container ───────────────────────────────────────────────────────
+
+.matcha-overlay-container {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    pointer-events: none;
+
+    & > * {
+        pointer-events: auto;
+    }
+
+    // Dim previous modals when stacking
+    & > *:not(:last-child) {
+        opacity: 0.1;
+    }
+}
+
+// ── Animations ──────────────────────────────────────────────────────────────
+
+@keyframes matcha-modal-backdrop-in {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+@keyframes matcha-modal-backdrop-out {
+    from { opacity: 1; }
+    to   { opacity: 0; }
+}
+
+// Enter: scale 0.96 + translate -4 + fade (Material 3 emphasized motion).
+// Mais sutil que 0.95/-8 — menos jumpy, mais "presença suave".
+@keyframes matcha-modal-in {
+    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
+    to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+// Exit: assimétrico — sai mais rápido que entra (180ms vs 200ms).
+@keyframes matcha-modal-out {
+    from { opacity: 1; transform: scale(1) translateY(0); }
+    to   { opacity: 0; transform: scale(0.96) translateY(-4px); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .matcha-modal-backdrop,
+    .matcha-modal,
+    matcha-modal {
+        animation: none !important;
+        transition: none !important;
+    }
+}
+
+// =============================================================================
+// Theme mixin
+// =============================================================================
+
+@mixin matcha-modal-theme($theme) {
+
+    // ── Host element ──
+    matcha-modal {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        inset: 0;
+        z-index: 999;
+
+        @include generate-matcha-modal-sizes-classes($helper-breakpoints);
+
+        // Exit animation (added by service before destroy) — accelerated 180ms.
+        &.matcha-modal--closing {
+            .matcha-modal {
+                animation: matcha-modal-out 180ms var(--matcha-easing-accelerated, cubic-bezier(0.4, 0, 1, 1)) forwards;
+            }
+        }
+    }
+
+    // ── Backdrop ──
+    .matcha-modal-backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: 998;
+        cursor: pointer;
+        // Figma matcha/overlay Type=Modal: scrim 50% + blur 6px
+        background: var(--matcha-scrim-modal, rgba(0, 0, 0, 0.5));
+        backdrop-filter: blur(var(--matcha-scrim-modal-blur, 6px));
+        animation: matcha-modal-backdrop-in var(--matcha-duration-normal, 200ms) ease-out;
+
+        &.matcha-modal-backdrop--closing {
+            animation: matcha-modal-backdrop-out 150ms ease-in forwards;
+        }
+    }
+
+    // ── Modal card (Figma DSV3 1:1) ──
+    // bg surface/card · radius 16 · shadow 8r@4y + 32r@12y · sem border.
+    .matcha-modal {
+        position: relative;
+        z-index: 999;
+        display: flex;
+        flex-direction: column;
+        // Perf: contain layout/paint pra browser não recalcular reflow da page atrás.
+        contain: layout paint;
+        border-radius: var(--matcha-radius-xl, 16px);
+        // Floating overlay sobre scrim — usa surface-card-strong (pure white
+        // no light, lifted dark) pra máximo destaque. Cards inline usam o card
+        // soft default (#f8faf8) mas modal precisa pop.
+        background-color: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card));
+        color: var(--matcha-color-fg);
+        overflow: hidden;
+        animation: matcha-modal-in var(--matcha-duration-fast, 200ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+
+        // Figma DSV3 1:1: 0 4px 8px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.12)
+        box-shadow:
+            0 4px 8px rgba(0, 0, 0, 0.06),
+            0 12px 32px rgba(0, 0, 0, 0.12);
+    }
+
+    // ── Section coloring (layout vive nos component SCSS — single source of truth) ──
+    // Theme só pinta: bg dos slots herda surface-card-strong do parent .matcha-modal,
+    // texto pega text-primary, dividers usam surface-border.
+    .matcha-modal-header__title {
+        color: var(--matcha-color-text-primary);
+    }
+
+    .matcha-modal-content {
+        color: var(--matcha-color-text-primary);
+    }
+
+    // ── Focus ring on modal ──
+    .matcha-modal:focus-visible {
+        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+    }
+}
+
+// ── Forced colors (Windows High Contrast) ──
+// rgba/border hairline pode sumir; CanvasText/Canvas são system tokens visíveis.
+@media (forced-colors: active) {
+    .matcha-modal {
+        border: 1px solid CanvasText;
+        background-color: Canvas !important;
+    }
+    .matcha-modal-backdrop {
+        background: rgba(0, 0, 0, 0.7) !important;
+        backdrop-filter: none !important;
+    }
+}
+
+// ── Reduced transparency (acessibilidade visual) ──
+// Usuários com dificuldade de ler texto sobre blur preferem solid bg.
+@media (prefers-reduced-transparency: reduce) {
+    .matcha-modal-backdrop {
+        background: rgba(0, 0, 0, 0.85) !important;
+        backdrop-filter: none !important;
+    }
+}
+
+// ── Print ──
+// Convenção DSV3: chrome flutuante (modal/drawer/tooltip) some em impressão.
+@media print {
+    .matcha-overlay-container,
+    .matcha-modal-backdrop,
+    matcha-modal {
+        display: none !important;
+    }
+}