@inchurch/matcha-theme 20.276.0 → 20.277.0

package/components/matcha-spin.scss

@@ -39,141 +39,50 @@
 }
 
 @mixin matcha-spin($theme) {
-    $is-dark: map.get($theme, is-dark);
 
     matcha-spin:not([color]) .spin-progress {
-        stroke: var(--matcha-color-accent, #{getAccent($theme)});
+        stroke: var(--matcha-color-accent);
     }
 
     matcha-spin {
 
-        // Red
-        &[color="red"] .spin-progress {
-            stroke: getRed($theme);
-        }
-
-        // Pink
-        &[color="pink"] .spin-progress {
-            stroke: getPink($theme);
-        }
-
-        // Purple
-        &[color="purple"] .spin-progress {
-            stroke: getPurple($theme);
-        }
-
-        // Deep Purple
-        &[color="deep-purple"] .spin-progress {
-            stroke: getDeepPurple($theme);
-        }
-
-        // Indigo
-        &[color="indigo"] .spin-progress {
-            stroke: getIndigo($theme);
-        }
-
-        // Blue
-        &[color="blue"] .spin-progress {
-            stroke: getBlue($theme);
-        }
-
-        // Light Blue
-        &[color="light-blue"] .spin-progress {
-            stroke: getLightBlue($theme);
-        }
-
-        // Cyan
-        &[color="cyan"] .spin-progress {
-            stroke: getCyan($theme);
-        }
-
-        // Teal
-        &[color="teal"] .spin-progress {
-            stroke: getTeal($theme);
-        }
-
-        // Green
-        &[color="green"] .spin-progress {
-            stroke: getGreen($theme);
-        }
-
-        // Light Green
-        &[color="light-green"] .spin-progress {
-            stroke: getLightGreen($theme);
-        }
-
-        // Lime
-        &[color="lime"] .spin-progress {
-            stroke: getLime($theme);
-        }
-
-        // Yellow
-        &[color="yellow"] .spin-progress {
-            stroke: getYellow($theme);
-        }
-
-        // Amber
-        &[color="amber"] .spin-progress {
-            stroke: getAmber($theme);
-        }
-
-        // Orange
-        &[color="orange"] .spin-progress {
-            stroke: getOrange($theme);
-        }
-
-        // Deep Orange
-        &[color="deep-orange"] .spin-progress {
-            stroke: getDeepOrange($theme);
-        }
-
-        // Brown
-        &[color="brown"] .spin-progress {
-            stroke: getBrown($theme);
-        }
-
-        // Grey
-        &[color="grey"] .spin-progress {
-            stroke: getGrey($theme);
-        }
-
-        // Blue Grey
-        &[color="blue-grey"] .spin-progress {
-            stroke: getBlueGrey($theme);
-        }
+        // Cores nomeadas de paleta (red/pink/blue/… 19 famílias) DEPRECADAS na migração
+        // runtime-theming (2026-06-19): sem uso real (só doc auto-gerada). Use as semânticas
+        // abaixo (primary/accent/feedback). Remove a dependência dos getters de paleta
+        // (getRed…getBlueGrey, shade mode-dependente da paleta Material legada).
 
         // Accent
         &[color="accent"] .spin-progress {
-            stroke: var(--matcha-color-accent, #{getAccent($theme)});
+            stroke: var(--matcha-color-accent);
         }
 
         // Primary
         &[color="primary"] .spin-progress {
-            stroke: var(--matcha-color-primary, #{getPrimary($theme)});
+            stroke: var(--matcha-color-primary);
         }
 
         // Success
         &[color="success"] .spin-progress {
-            stroke: var(--matcha-color-success, #{getSuccess($theme)});
+            stroke: var(--matcha-color-success);
         }
 
         // Warn
         &[color="warn"] .spin-progress {
-            stroke: var(--matcha-color-warn, #{getWarn($theme)});
+            stroke: var(--matcha-color-warn);
         }
 
         // Danger
         &[color="danger"] .spin-progress {
-            stroke: var(--matcha-color-danger, #{getDanger($theme)});
+            stroke: var(--matcha-color-danger);
         }
 
         // Info
         &[color="info"] .spin-progress {
-            stroke: var(--matcha-color-info, #{getInfo($theme)});
+            stroke: var(--matcha-color-info);
         }
 
         .spin-placeholder {
-            stroke: var(--matcha-color-disabled, #{getDisabled($theme)});
+            stroke: var(--matcha-color-disabled);
         }
 
         &:not([size]) {

package/components/matcha-spinner.scss

@@ -22,7 +22,7 @@
     );
 
     matcha-spinner {
-        --matcha-spinner-fill: var(--matcha-color-accent, #{getAccent($theme)});
+        --matcha-spinner-fill: var(--matcha-color-accent);
 
         @each $name, $fn in $semantic-colors {
             &[color="#{$name}"] {

package/components/matcha-stepper.scss

@@ -8,7 +8,6 @@
 // =============================================================================
 
 @mixin matcha-stepper-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
 
   matcha-stepper {
     // ── Step indicators ──
@@ -16,58 +15,58 @@
     // (canon Figma DSV3: bola accent atrás, ícone outlined dentro).
     // matcha-icon NÃO herda `color` do parent — usa `--matcha-icon-color`.
     .step-indicator-completo {
-      background: var(--matcha-color-accent, #{getAccent($theme)});
-      color: var(--matcha-color-accent-text-on, var(--matcha-color-accent-contrast, #{getAccentContrast($theme)}));
-      --matcha-icon-color: var(--matcha-color-accent-text-on, var(--matcha-color-accent-contrast, #{getAccentContrast($theme)}));
+      background: var(--matcha-color-accent);
+      color: var(--matcha-color-accent-text-on, var(--matcha-color-accent-contrast));
+      --matcha-icon-color: var(--matcha-color-accent-text-on, var(--matcha-color-accent-contrast));
     }
 
     .step-indicator-ativo {
-      background: var(--matcha-color-fg, #{getForeground($theme)});
-      color: var(--matcha-color-bg, #{getBackground($theme)});
+      background: var(--matcha-color-fg);
+      color: var(--matcha-color-bg);
     }
 
     .step-indicator-pendente,
     .step-indicator-disabled {
-      background: var(--matcha-color-disabled, #{getDisabled($theme)});
-      color: var(--matcha-color-bg, #{getBackground($theme)});
+      background: var(--matcha-color-disabled);
+      color: var(--matcha-color-bg);
     }
 
     // ── Labels ──
     .step-label-completo {
-      color: var(--matcha-color-accent, #{getAccent($theme)});
+      color: var(--matcha-color-accent);
     }
 
     .step-label-ativo {
-      color: var(--matcha-color-fg, #{getForeground($theme)});
+      color: var(--matcha-color-fg);
     }
 
     .step-label-pendente,
     .step-label-disabled {
-      color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+      color: var(--matcha-color-text-placeholder);
     }
 
     // ── Connector lines (track + fill animation) ──
     .step-connector {
-      background: var(--matcha-color-disabled, #{getDisabled($theme)});
+      background: var(--matcha-color-disabled);
 
       // Pseudo "fill" que cresce da esquerda → direita quando step completa.
       &::before {
-        background: var(--matcha-color-accent, #{getAccent($theme)});
+        background: var(--matcha-color-accent);
       }
     }
 
     // ── Focus ring polido (offset 4px + halo) ──
     .step-item:focus-visible {
       outline: var(--matcha-state-focus-ring-width, 2px) solid
-        var(--matcha-color-accent, #{getAccent($theme)});
+        var(--matcha-color-accent);
       outline-offset: var(--matcha-state-focus-ring-offset, 4px);
       border-radius: var(--matcha-radius-md, 8px);
-      box-shadow: 0 0 0 4px rgba(getAccent($theme), 0.16);
+      box-shadow: 0 0 0 4px color-mix(in srgb, var(--matcha-color-accent) 16%, transparent);
     }
 
     // ── Spinner color (loading state) — herda accent ──
     .step-spinner {
-      color: var(--matcha-color-accent, #{getAccent($theme)});
+      color: var(--matcha-color-accent);
     }
   }
 }

package/components/matcha-table.scss

@@ -24,7 +24,6 @@
 // =============================================================================
 
 @mixin matcha-table-modern($theme) {
-  $is-dark: map.get($theme, is-dark);
 
   // ═══════════════════════════════════════════════════════════════════════
   // CSS vars do componente — única fonte de verdade. ZERO literal hardcoded
@@ -60,9 +59,9 @@
     // ── Surface colors ────────────────────────────────────────────────────
     --matcha-table-cell-bg:                  var(--matcha-color-surface-card);
     --matcha-table-row-bg-selected:          var(--matcha-color-accent-alpha-12,
-                                              rgba(#{getAccent($theme)}, 0.12));
+                                              rgba(var(--matcha-color-accent), 0.12));
     --matcha-table-row-bg-striped:           var(--matcha-color-surface-card-alt,
-                                              rgba(#{getForeground($theme)}, 0.02));
+                                              rgba(var(--matcha-color-fg), 0.02));
     // Hover NÃO usa surface-table-row-hover token (tá próximo demais de surface-card
     // em dark e fica imperceptível). Calibrado pra delta visível mesmo sobre stripe.
     // CSS custom property values são TEXTO LITERAL pro Sass — fn calls Sass
@@ -70,26 +69,26 @@
     // evaluar `getForeground($theme)` ANTES do output. Sem isso, o valor sai
     // literal no bundle (ex: `rgba(getForeground($theme), 0.12)`) e o browser
     // descarta como invalid CSS (= chevron invisível, hover sem cor, etc).
-    --matcha-table-row-bg-hover:             rgba(#{getForeground($theme)}, 0.12);
-    --matcha-table-row-bg-hover-striped:     rgba(#{getForeground($theme)}, 0.18);
-    --matcha-table-header-bg-hover:          rgba(#{getForeground($theme)}, 0.10);
+    --matcha-table-row-bg-hover:             rgba(var(--matcha-color-fg), 0.12);
+    --matcha-table-row-bg-hover-striped:     rgba(var(--matcha-color-fg), 0.18);
+    --matcha-table-header-bg-hover:          rgba(var(--matcha-color-fg), 0.10);
 
     // ── Sort indicator colors ─────────────────────────────────────────────
     // Inactive usa alpha 0.45 no foreground — claramente VISÍVEL como "ali tem
     // sort", sem competir com texto do header. Hover/ativo passa pra accent full.
-    --matcha-table-sort-icon-color:          rgba(#{getForeground($theme)}, 0.45);
-    --matcha-table-sort-icon-color-active:   var(--matcha-color-accent, #{getAccent($theme)});
+    --matcha-table-sort-icon-color:          rgba(var(--matcha-color-fg), 0.45);
+    --matcha-table-sort-icon-color-active:   var(--matcha-color-accent);
     --matcha-table-sort-icon-size:           var(--matcha-space-250, 20px);
 
     // ── Empty cell placeholder ────────────────────────────────────────────
     --matcha-table-empty-cell-text:          var(--matcha-color-text-muted,
-                                              rgba(#{getForeground($theme)}, 0.5));
+                                              rgba(var(--matcha-color-fg), 0.5));
 
     // ── Variant accent (semantic row) ─────────────────────────────────────
     --matcha-table-variant-accent-width:     var(--matcha-space-050, 4px);
     --matcha-table-row-accent-child-opacity: 0.5;
     --matcha-table-selected-accent-width:    var(--matcha-border-thin, 2px);
-    --matcha-table-selected-accent-color:    var(--matcha-color-accent, #{getAccent($theme)});
+    --matcha-table-selected-accent-color:    var(--matcha-color-accent);
 
     // ── Column width hints (utility classes col-*) ────────────────────────
     --matcha-table-col-checkbox-width:       var(--matcha-space-600, 48px);
@@ -103,7 +102,7 @@
     --matcha-table-loading-pulse-opacity-min: 0.5;
     --matcha-table-transition-duration:      var(--matcha-duration-instant, 80ms);
     --matcha-table-focus-ring-width:         var(--matcha-state-focus-ring-width, 2px);
-    --matcha-table-focus-ring-color:         var(--matcha-color-accent, #{getAccent($theme)});
+    --matcha-table-focus-ring-color:         var(--matcha-color-accent);
 
     // ── Empty state row (matcha-table-empty directive) ────────────────────
     --matcha-table-empty-padding-y:          var(--matcha-space-500, 40px);
@@ -133,7 +132,7 @@
     line-height: var(--matcha-table-font-line-height);
     font-weight: var(--matcha-weight-regular, 400);
     color: var(--matcha-color-text-secondary,
-      rgba(getForeground($theme), 0.7));
+      color-mix(in srgb, var(--matcha-color-fg) 70%, transparent));
 
     // ── Header cells (text/primary, border-bottom 2px, height 64) ────────
     thead th {
@@ -146,7 +145,7 @@
                var(--matcha-table-cell-padding-x-left);
       background: var(--matcha-table-cell-bg);
       color: var(--matcha-color-text-primary,
-        var(--matcha-color-fg, #{getForeground($theme)}));
+        var(--matcha-color-fg));
       // Header menor que body — hierarquia "metadado" vs "conteúdo".
       font-size: var(--matcha-table-header-font-size);
       line-height: var(--matcha-table-header-font-line-height);
@@ -198,7 +197,7 @@
         // muted antes via alpha 0.45). Reforça que tá interativo.
         &:hover::after {
           background: var(--matcha-color-text-primary,
-            var(--matcha-color-fg, #{getForeground($theme)}));
+            var(--matcha-color-fg));
         }
 
         // Padding-right SEMPRE reserva espaço pro chevron. Antes ajustava
@@ -250,7 +249,7 @@
                var(--matcha-table-cell-padding-x-left);
       background: var(--matcha-table-cell-bg);
       color: var(--matcha-color-text-secondary,
-        rgba(getForeground($theme), 0.7));
+        color-mix(in srgb, var(--matcha-color-fg) 70%, transparent));
       vertical-align: middle;
       border-bottom: var(--matcha-table-border-row) solid
         var(--matcha-table-border-color);

package/components/matcha-tabs.scss

@@ -9,7 +9,7 @@
                     button[matcha-button],
                     a[matcha-button] {
                         &:not([active-item="true"]) {
-                            background: var(--matcha-color-surface, #{getSurface($theme)});
+                            background: var(--matcha-color-surface);
                             color: call(#{$colorFn}, $theme);
                             box-shadow: 0 0 0 0px inset;
 
@@ -212,7 +212,7 @@ matcha-tabs {
         button[matcha-button],
         a[matcha-button] {
             &:focus-visible:not([disabled]):not([disabled="true"]) {
-                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);
             }
         }
@@ -287,7 +287,6 @@ matcha-tabs {
 // =============================================================================
 
 @mixin matcha-tabs-modern($theme) {
-  $is-dark: map.get($theme, is-dark);
 
   // ── Component-level tokens (overridable pelo consumer via CSS vars) ───
   matcha-tabs {
@@ -344,7 +343,7 @@ matcha-tabs {
       left: var(--matcha-tab-indicator-left, 0);
       width: var(--matcha-tab-indicator-width, 0);
       height: var(--matcha-border-thin, 2px);
-      background: var(--matcha-color-accent, #{getAccent($theme)});
+      background: var(--matcha-color-accent);
       border-radius: 0;
       transition:
         left  var(--matcha-duration-fast, 200ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),
@@ -362,8 +361,8 @@ matcha-tabs {
       border: none;
       // Border bottom 2px — per item (track surface-border, slider sobrepõe accent)
       border-bottom: var(--matcha-border-thin, 2px) solid
-        var(--matcha-color-surface-border, #{getDisabled($theme)});
-      background: var(--matcha-color-surface-card, #{getSurface($theme)});
+        var(--matcha-color-surface-border);
+      background: var(--matcha-color-surface-card);
       cursor: pointer;
       position: relative;
       overflow: hidden;
@@ -372,7 +371,7 @@ matcha-tabs {
       font-weight: var(--matcha-weight-regular, 400);
       line-height: var(--matcha-leading-body-lg, 24px);
       color: var(--matcha-color-text-secondary,
-        rgba(getForeground($theme), 0.7));
+        color-mix(in srgb, var(--matcha-color-fg) 70%, transparent));
       white-space: nowrap;
       flex-shrink: 0;
       min-width: var(--matcha-tab-min-width-underline);
@@ -398,10 +397,10 @@ matcha-tabs {
       // — cobre 100% mesmo com subpixel mismatch do indicator) ──
       &.active,
       &[aria-selected="true"] {
-        color: var(--matcha-color-accent, #{getAccent($theme)});
+        color: var(--matcha-color-accent);
         font-weight: var(--matcha-weight-semibold, 600);
         line-height: var(--matcha-leading-title-sm, 22px);
-        border-bottom-color: var(--matcha-color-accent, #{getAccent($theme)});
+        border-bottom-color: var(--matcha-color-accent);
       }
 
       // ── Disabled ──
@@ -415,11 +414,11 @@ matcha-tabs {
       // ── Focus ring polido (offset 4px + halo 16% alpha) ──
       &:focus-visible {
         outline: var(--matcha-state-focus-ring-width, 2px) solid
-          var(--matcha-color-accent, #{getAccent($theme)});
+          var(--matcha-color-accent);
         outline-offset: var(--matcha-state-focus-ring-offset, 4px);
         border-radius: var(--matcha-radius-sm, 4px);
         box-shadow: 0 0 0 var(--matcha-tab-focus-halo)
-          rgba(getAccent($theme), var(--matcha-tab-focus-halo-alpha));
+          color-mix(in srgb, var(--matcha-color-accent) calc(var(--matcha-tab-focus-halo-alpha) * 100%), transparent);
       }
     }
   }
@@ -469,8 +468,7 @@ matcha-tabs {
       // canon: atom interativo / container. Antes era md (4px), o que dava
       // disparidade 1:4 e quebrava a leitura conjunta tabs + cards.
       border-radius: var(--matcha-radius-lg, 8px);
-      background: var(--matcha-color-surface-card,
-        #{getSurface($theme)});
+      background: var(--matcha-color-surface-card);
       cursor: pointer;
       position: relative;
       overflow: hidden;
@@ -479,7 +477,7 @@ matcha-tabs {
       font-weight: var(--matcha-weight-regular, 400);
       line-height: var(--matcha-leading-body-md, 20px);
       color: var(--matcha-color-text-secondary,
-        rgba(getForeground($theme), 0.7));
+        color-mix(in srgb, var(--matcha-color-fg) 70%, transparent));
       flex-shrink: 0;
       min-width: var(--matcha-tab-min-width-card-horizontal);
       transition:
@@ -507,8 +505,8 @@ matcha-tabs {
       // ── Selecionado (Figma: border accent · texto text-primary NÃO accent) ──
       &.active,
       &[aria-selected="true"] {
-        border-color: var(--matcha-color-accent, #{getAccent($theme)});
-        color: var(--matcha-color-fg, #{getForeground($theme)});
+        border-color: var(--matcha-color-accent);
+        color: var(--matcha-color-fg);
         font-weight: var(--matcha-weight-medium, 500);
       }
 
@@ -523,10 +521,10 @@ matcha-tabs {
       // ── Focus ring polido ──
       &:focus-visible {
         outline: var(--matcha-state-focus-ring-width, 2px) solid
-          var(--matcha-color-accent, #{getAccent($theme)});
+          var(--matcha-color-accent);
         outline-offset: var(--matcha-border-thin, 2px);
         box-shadow: 0 0 0 var(--matcha-tab-focus-halo)
-          rgba(getAccent($theme), var(--matcha-tab-focus-halo-alpha));
+          color-mix(in srgb, var(--matcha-color-accent) calc(var(--matcha-tab-focus-halo-alpha) * 100%), transparent);
       }
     }
   }
@@ -545,9 +543,9 @@ matcha-tabs {
     min-width: var(--matcha-space-250, 20px);
     height: var(--matcha-space-250, 20px);
     padding: 0 var(--matcha-space-075, 6px);
-    background: var(--matcha-color-accent, #{getAccent($theme)});
+    background: var(--matcha-color-accent);
     color: var(--matcha-color-accent-text-on,
-      var(--matcha-color-accent-contrast, #{getAccentContrast($theme)}));
+      var(--matcha-color-accent-contrast));
     border-radius: var(--matcha-radius-pill, 9999px);
     font-size: var(--matcha-text-body-xs, 11px);
     font-weight: var(--matcha-weight-semibold, 600);
@@ -564,7 +562,7 @@ matcha-tabs {
     height: var(--matcha-space-300, 24px);
     border-radius: 50%;
     color: var(--matcha-color-text-secondary,
-      rgba(getForeground($theme), 0.7));
+      color-mix(in srgb, var(--matcha-color-fg) 70%, transparent));
     transition:
       background-color var(--matcha-duration-instant, 80ms) ease,
       color            var(--matcha-duration-instant, 80ms) ease;
@@ -574,13 +572,13 @@ matcha-tabs {
 
     &:hover {
       background: var(--matcha-color-surface-hover,
-        rgba(getForeground($theme), 0.08));
-      color: var(--matcha-color-fg, #{getForeground($theme)});
+        color-mix(in srgb, var(--matcha-color-fg) 8%, transparent));
+      color: var(--matcha-color-fg);
     }
 
     &:focus-visible {
       outline: var(--matcha-state-focus-ring-width, 2px) solid
-        var(--matcha-color-accent, #{getAccent($theme)});
+        var(--matcha-color-accent);
       outline-offset: var(--matcha-border-thin, 2px);
     }