@inchurch/matcha-theme 20.0.11 → 20.277.0

package/components/matcha-icon.scss

@@ -16,32 +16,16 @@ $icon-size-md: 24px;
 $icon-size-lg: 32px;
 $icon-size-xl: 48px;
 
-// ── Material Symbols Rounded — aplicação global da font ─────────────────
-// Usa as propriedades herdáveis (font-family, font-feature-settings) no host
-// para que o texto filho (ligature) renderize como glyph.
-matcha-icon[library="symbols"] {
-  font-family: 'Material Symbols Rounded', sans-serif !important;
-  font-weight: normal;
-  font-style: normal;
-  letter-spacing: normal;
-  text-transform: none;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-  font-feature-settings: 'liga' !important;
-  overflow: hidden;
-}
+// matcha-icon[library="symbols"] — renderiza SVG inline via figma-icons.ts.
+// Sem dependência de font externa. Apenas tamanho via [size="..."] tokens.
 
 [class^="i-matcha-"],
 [class*=" i-matcha-"],
 matcha-icon[library="symbols"] {
-  font-size: var(--matcha-icon-size-md, #{$icon-size-md});
-  width: var(--matcha-icon-size-md, #{$icon-size-md});
-  height: var(--matcha-icon-size-md, #{$icon-size-md});
-  line-height: var(--matcha-icon-size-md, #{$icon-size-md});
+  font-size: var(--matcha-icon-size-md);
+  width: var(--matcha-icon-size-md);
+  height: var(--matcha-icon-size-md);
+  line-height: var(--matcha-icon-size-md);
 
   &.i-size-xs,
   &[size="xs"] {
@@ -53,50 +37,58 @@ matcha-icon[library="symbols"] {
 
   &.i-size-sm,
   &[size="sm"] {
-    font-size: var(--matcha-icon-size-sm, #{$icon-size-sm});
-    width: var(--matcha-icon-size-sm, #{$icon-size-sm});
-    height: var(--matcha-icon-size-sm, #{$icon-size-sm});
-    line-height: var(--matcha-icon-size-sm, #{$icon-size-sm});
+    font-size: var(--matcha-icon-size-sm);
+    width: var(--matcha-icon-size-sm);
+    height: var(--matcha-icon-size-sm);
+    line-height: var(--matcha-icon-size-sm);
   }
 
   &.i-size-md,
   &[size="md"] {
-    font-size: var(--matcha-icon-size-md, #{$icon-size-md});
-    width: var(--matcha-icon-size-md, #{$icon-size-md});
-    height: var(--matcha-icon-size-md, #{$icon-size-md});
-    line-height: var(--matcha-icon-size-md, #{$icon-size-md});
+    font-size: var(--matcha-icon-size-md);
+    width: var(--matcha-icon-size-md);
+    height: var(--matcha-icon-size-md);
+    line-height: var(--matcha-icon-size-md);
   }
 
   &.i-size-lg,
   &[size="lg"] {
-    font-size: var(--matcha-icon-size-lg, #{$icon-size-lg});
-    width: var(--matcha-icon-size-lg, #{$icon-size-lg});
-    height: var(--matcha-icon-size-lg, #{$icon-size-lg});
-    line-height: var(--matcha-icon-size-lg, #{$icon-size-lg});
+    font-size: var(--matcha-icon-size-lg);
+    width: var(--matcha-icon-size-lg);
+    height: var(--matcha-icon-size-lg);
+    line-height: var(--matcha-icon-size-lg);
   }
 
   &.i-size-xl,
   &[size="xl"] {
-    font-size: var(--matcha-icon-size-xl, #{$icon-size-xl});
-    width: var(--matcha-icon-size-xl, #{$icon-size-xl});
-    height: var(--matcha-icon-size-xl, #{$icon-size-xl});
-    line-height: var(--matcha-icon-size-xl, #{$icon-size-xl});
+    font-size: var(--matcha-icon-size-xl);
+    width: var(--matcha-icon-size-xl);
+    height: var(--matcha-icon-size-xl);
+    line-height: var(--matcha-icon-size-xl);
   }
 }
 
 // ── Theme mixin (color inheritance) ─────────────────────────────────────────
+// Pattern CSS-var: `--matcha-icon-color` resolve a cor final.
+// Cascateia naturalmente — qualquer parent pode override sem specificity battle.
+//
+//   <!-- Override no consumer (sem [color] attr): -->
+//   .my-banner { --matcha-icon-color: var(--matcha-color-feedback-danger); }
+//
+//   <!-- Override no proprio matcha-icon: -->
+//   <matcha-icon color="danger" />  // attr seta --matcha-icon-color via SCSS abaixo
 @mixin matcha-icon-theme($theme) {
   matcha-icon,
   [class^="i-matcha-"],
   [class*=" i-matcha-"] {
-    color: var(--matcha-color-icon-default, #{getBlueGrey($theme)});
+    color: var(--matcha-icon-color, var(--matcha-color-icon-default));
 
-    &.color-fg,       &[color="fg"]       { color: var(--matcha-color-fg, #{getForeground($theme)}); }
-    &.color-accent,   &[color="accent"]   { color: var(--matcha-color-accent, #{getAccent($theme)}); }
-    &.color-primary,  &[color="primary"]  { color: var(--matcha-color-primary, #{getPrimary($theme)}); }
-    &.color-danger,   &[color="danger"]   { color: var(--matcha-color-danger, #{getDanger($theme)}); }
-    &.color-warn,     &[color="warn"]     { color: var(--matcha-color-warn, #{getWarn($theme)}); }
-    &.color-success,  &[color="success"]  { color: var(--matcha-color-success, #{getSuccess($theme)}); }
+    &.color-fg,       &[color="fg"]       { --matcha-icon-color: var(--matcha-color-fg); }
+    &.color-accent,   &[color="accent"]   { --matcha-icon-color: var(--matcha-color-accent); }
+    &.color-primary,  &[color="primary"]  { --matcha-icon-color: var(--matcha-color-primary); }
+    &.color-danger,   &[color="danger"]   { --matcha-icon-color: var(--matcha-color-danger); }
+    &.color-warn,     &[color="warn"]     { --matcha-icon-color: var(--matcha-color-warn); }
+    &.color-success,  &[color="success"]  { --matcha-icon-color: var(--matcha-color-success); }
 
     &[disabled],
     &.disabled {

package/components/matcha-image.scss

@@ -8,14 +8,13 @@
 // =============================================================================
 
 @mixin matcha-image-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
 
   .matcha-image {
-    background: var(--matcha-color-surface, #{getSurface($theme)});
+    background: var(--matcha-color-surface);
   }
 
   .matcha-image__placeholder-icon {
-    color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+    color: var(--matcha-color-text-placeholder);
   }
 }
 

package/components/matcha-list.scss

@@ -39,7 +39,6 @@
 // =============================================================================
 
 @mixin matcha-list-theme($theme) {
-    $is-dark: map.get($theme, is-dark);
 
     // ── List container ──
     matcha-list,
@@ -67,13 +66,13 @@
         border-radius: var(--matcha-radius-md, 4px);
         cursor: pointer;
         outline: none;
-        color: var(--matcha-color-fg, #{getForeground($theme)});
+        color: var(--matcha-list-item-text, var(--matcha-color-fg));
         text-decoration: none;
         transition: background-color 150ms;
 
         // Focus ring
         &:focus-visible {
-            outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+            outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
             outline-offset: var(--matcha-state-focus-ring-offset, 2px);
         }
 
@@ -87,15 +86,15 @@
 
         // Active/Selected
         &.matcha-list-item--active {
-            background-color: var(--matcha-color-accent-surface, #{getAccentAlpha($theme)});
+            background-color: var(--matcha-color-accent-surface, var(--matcha-color-accent-alpha));
 
             .matcha-list-item__label {
-                color: var(--matcha-color-accent, #{getAccent($theme)});
+                color: var(--matcha-color-accent);
                 font-weight: 600;
             }
 
             .matcha-list-item__leading {
-                color: var(--matcha-color-accent, #{getAccent($theme)});
+                color: var(--matcha-color-accent);
             }
         }
     }
@@ -115,7 +114,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        color: var(--matcha-color-hint, #{getGrey($theme)});
+        color: var(--matcha-color-hint, var(--matcha-color-text-muted));
     }
 
     // ── Text area (label + description) ──
@@ -131,7 +130,7 @@
         font-size: var(--matcha-text-body-md, 14px);
         font-weight: var(--matcha-weight-regular, 400);
         line-height: var(--matcha-leading-body-md, 20px);
-        color: var(--matcha-color-fg, #{getForeground($theme)});
+        color: var(--matcha-list-item-text, var(--matcha-color-fg));
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -141,7 +140,7 @@
         font-size: var(--matcha-text-body-sm, 12px);
         font-weight: var(--matcha-weight-regular, 400);
         line-height: var(--matcha-leading-body-sm, 16px);
-        color: var(--matcha-color-hint, #{getGrey($theme)});
+        color: var(--matcha-color-hint, var(--matcha-color-text-muted));
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -153,14 +152,14 @@
         display: flex;
         align-items: center;
         gap: var(--matcha-space-100, 8px);
-        color: var(--matcha-color-hint, #{getGrey($theme)});
+        color: var(--matcha-color-hint, var(--matcha-color-text-muted));
     }
 
     // ── Divider between items ──
     .matcha-list-divider {
         height: var(--matcha-border-hairline, 1px);
         margin: var(--matcha-space-050, 4px) var(--matcha-space-200, 16px);
-        background-color: var(--matcha-color-border, #{getGrey($theme)});
+        background-color: var(--matcha-color-border);
         opacity: var(--matcha-opacity-subtle, 0.10);
     }
 
@@ -169,12 +168,12 @@
         display: flex;
         align-items: center;
         padding: var(--matcha-space-200, 16px) var(--matcha-space-200, 16px) var(--matcha-space-075, 6px);
-        font-size: var(--matcha-text-caption, 11px);
+        font-size: var(--matcha-text-p-tiny, 11px);
         font-weight: var(--matcha-weight-medium, 500);
-        line-height: var(--matcha-leading-caption, 14px);
+        line-height: var(--matcha-leading-p-tiny, 14px);
         letter-spacing: var(--matcha-letter-spacing-wide, 0.5px);
         text-transform: uppercase;
-        color: var(--matcha-color-hint, #{getGrey($theme)});
+        color: var(--matcha-color-hint, var(--matcha-color-text-muted));
     }
 
     // ── 2-line variant (with description) ──
@@ -193,7 +192,7 @@
             padding: var(--matcha-space-050, 4px) var(--matcha-space-200, 16px);
 
             .matcha-list-item__label {
-                font-size: var(--matcha-text-button-sm, 13px);
+                font-size: var(--matcha-text-label-sm, 13px);
             }
         }
     }

package/components/matcha-menu.scss

@@ -2,6 +2,19 @@
 // matcha-menu.scss — Dropdown context menu (modernized)
 // =============================================================================
 
+// matcha-menu é overlay-only: o host nunca deve ocupar espaço no fluxo.
+// display:contents tira o host (e o matcha-panel interno) do layout sem
+// afetar a popover — o overlay interno usa position:fixed/absolute. Sem isso,
+// quando o menu é filho direto de um container flex/grid com `gap` (ex.:
+// page-layout `.center.gap-outside` com gap 24px), o host vazio de altura ~0
+// vira um flex item que consome `gap` dos DOIS lados → "phantom gap" duplo
+// entre o elemento anterior e o seguinte. O matcha-toolbar já fazia isso
+// scoped (`> matcha-menu`); aqui generaliza pra qualquer container.
+matcha-menu,
+matcha-menu > matcha-panel {
+  display: contents;
+}
+
 .matcha-menu-content {
   button,
   [matcha-button] {
@@ -47,7 +60,7 @@
       font-weight: var(--matcha-weight-medium, 500);
 
       &:focus-visible:not([disabled]) {
-        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
         outline-offset: var(--matcha-state-focus-ring-offset, 2px);
       }
 
@@ -69,7 +82,7 @@
         transform: translateY(-50%);
         width: 0;
         height: 0;
-        border-left: calc(var(--matcha-border-medium, 4px) + var(--matcha-border-hairline, 1px)) solid var(--matcha-color-hint, #{getGrey($theme)});
+        border-left: calc(var(--matcha-border-medium, 4px) + var(--matcha-border-hairline, 1px)) solid var(--matcha-color-hint, var(--matcha-color-text-muted));
         border-top: var(--matcha-border-medium, 4px) solid transparent;
         border-bottom: var(--matcha-border-medium, 4px) solid transparent;
         opacity: var(--matcha-opacity-secondary, 0.54);

package/components/matcha-modal.scss

@@ -69,26 +69,17 @@
     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.95) translateY(-8px);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1) translateY(0);
-    }
+    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.97) translateY(4px);
-    }
+    from { opacity: 1; transform: scale(1) translateY(0); }
+    to   { opacity: 0; transform: scale(0.96) translateY(-4px); }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -105,7 +96,6 @@
 // =============================================================================
 
 @mixin matcha-modal-theme($theme) {
-    $is-dark: map.get($theme, is-dark);
 
     // ── Host element ──
     matcha-modal {
@@ -118,10 +108,10 @@
 
         @include generate-matcha-modal-sizes-classes($helper-breakpoints);
 
-        // Exit animation class (added by service before destroy)
+        // Exit animation (added by service before destroy) — accelerated 180ms.
         &.matcha-modal--closing {
             .matcha-modal {
-                animation: matcha-modal-out 150ms cubic-bezier(0.4, 0, 1, 1) forwards;
+                animation: matcha-modal-out 180ms var(--matcha-easing-accelerated, cubic-bezier(0.4, 0, 1, 1)) forwards;
             }
         }
     }
@@ -142,93 +132,76 @@
         }
     }
 
-    // ── Modal card ──
+    // ── 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);
-        background-color: var(--matcha-color-surface, #{getSurface($theme)});
-        color: var(--matcha-color-fg, #{getForeground($theme)});
+        // 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-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1);
-
-        // Shadow level 3 (modals, drawers)
-        box-shadow: var(--matcha-shadow-3, #{if($is-dark, $shadow-3-dark, $shadow-3-light)});
+        animation: matcha-modal-in var(--matcha-duration-fast, 200ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
 
-        @if $is-dark {
-            border: var(--matcha-border-hairline, 1px) solid rgba(255, 255, 255, 0.06);
-        }
+        // 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);
     }
 
-    // ── Header ──
-    .matcha-modal-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--matcha-space-150, 12px);
-        padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
-        flex-shrink: 0;
-
-        // Figma matcha/modal title: 20/800/28 (title-xl ExtraBold)
-        .matcha-modal-header__title {
-            flex: 1;
-            font-size: var(--matcha-text-title-xl, 20px);
-            font-weight: var(--matcha-weight-extrabold, 800);
-            line-height: var(--matcha-leading-title-xl, 28px);
-            color: var(--matcha-color-fg, #{getForeground($theme)});
-        }
+    // ── 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);
     }
 
-    // ── Content ──
     .matcha-modal-content {
-        flex: 1;
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding: var(--matcha-space-300, 24px);
-        max-height: calc(100vh - 300px);
-        color: var(--matcha-color-fg, #{getForeground($theme)});
-
-        // Smooth content resize
-        transition: max-height var(--matcha-duration-normal, 200ms) ease;
+        color: var(--matcha-color-text-primary);
     }
 
-    // ── Footer ──
-    .matcha-modal-footer {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        gap: var(--matcha-space-150, 12px);
-        padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
-        flex-shrink: 0;
-
-        // Mobile: stack buttons vertically
-        @media (max-width: 575px) {
-            flex-direction: column-reverse;
-
-            .matcha-button {
-                width: 100%;
-            }
-        }
+    // ── 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);
     }
+}
 
-    // ── Dividers inside modal ──
-    matcha-modal-header matcha-divider,
-    matcha-modal-footer matcha-divider {
-        margin-inline: calc(-1 * var(--matcha-space-300, 24px));
+// ── 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;
+    }
+}
 
-    // ── Options (action icons in header) ──
-    .matcha-modal-options {
-        display: flex;
-        align-items: center;
-        gap: var(--matcha-space-100, 8px);
+// ── 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;
     }
+}
 
-    // ── Focus ring on modal ──
-    .matcha-modal:focus-visible {
-        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
-        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+// ── 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;
     }
 }