@inchurch/matcha-theme 20.276.0 → 20.277.0

package/components/matcha-buttons.scss

@@ -9,36 +9,36 @@
 // ── Disabled mixins ─────────────────────────────────────────────────────────
 
 @mixin _disabled-solid-button($theme) {
-    background: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
-    color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
+    background: var(--matcha-color-disabled-bg);
+    color: var(--matcha-color-disabled-fg);
     box-shadow: 0 0 0 0px inset;
     pointer-events: none;
 }
 
 @mixin _disabled-basic-button($theme) {
-    background: var(--matcha-color-surface, #{getSurface($theme)});
-    color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+    background: var(--matcha-color-surface);
+    color: var(--matcha-color-disabled-bg);
     box-shadow: 0 0 0 0px inset;
     pointer-events: none;
 }
 
 @mixin _disabled-outline-button($theme) {
     background: transparent;
-    color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+    color: var(--matcha-color-disabled-bg);
     box-shadow: 0 0 0 var(--matcha-border-thin, 2px) inset;
     pointer-events: none;
 }
 
 @mixin _disabled-alpha-button($theme) {
-    background: var(--matcha-color-disabled-bg-alpha, #{getDisabledAlpha($theme)});
-    color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+    background: var(--matcha-color-disabled-bg-alpha, var(--matcha-color-interaction-disabled-bg-alpha));
+    color: var(--matcha-color-disabled-bg);
     box-shadow: 0 0 0 0px inset;
     pointer-events: none;
 }
 
 @mixin _disabled-link-button($theme) {
     background: transparent;
-    color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+    color: var(--matcha-color-disabled-bg);
     box-shadow: 0 0 0 0px inset;
     pointer-events: none;
 }
@@ -525,7 +525,7 @@ a[matcha-link] {
         --matcha-button-color-pressed: var(--matcha-color-neutral-hover);
         --matcha-button-color-text-on: var(--matcha-color-neutral-contrast);
         --matcha-button-color-alpha: var(--matcha-color-neutral-alpha);
-        --matcha-button-color-edge: var(--matcha-color-fg, #{getForeground($theme)});
+        --matcha-button-color-edge: var(--matcha-color-fg);
 
         // Badge ring herda o bg do botão (filled) — outline/ghost override pra surface,
         // pois o bg deles é transparente e o ring deve casar com a página atrás.
@@ -538,55 +538,55 @@ a[matcha-link] {
             --matcha-button-color-pressed: var(--matcha-color-neutral-hover);
             --matcha-button-color-text-on: var(--matcha-color-neutral-contrast);
             --matcha-button-color-alpha: var(--matcha-color-neutral-alpha);
-            --matcha-button-color-edge: var(--matcha-color-fg, #{getForeground($theme)});
+            --matcha-button-color-edge: var(--matcha-color-fg);
         }
         &[color="primary"] {
-            --matcha-button-color: var(--matcha-color-primary, #{getPrimary($theme)});
+            --matcha-button-color: var(--matcha-color-primary);
             --matcha-button-color-hover: var(--matcha-color-primary-hover);
             --matcha-button-color-pressed: var(--matcha-color-primary-pressed);
-            --matcha-button-color-text-on: var(--matcha-color-primary-contrast, #{getPrimaryContrast($theme)});
-            --matcha-button-color-alpha: var(--matcha-color-primary-alpha, #{getPrimaryAlpha($theme)});
-            --matcha-button-color-edge: var(--matcha-color-primary, #{getPrimary($theme)});
+            --matcha-button-color-text-on: var(--matcha-color-primary-contrast);
+            --matcha-button-color-alpha: var(--matcha-color-primary-alpha);
+            --matcha-button-color-edge: var(--matcha-color-primary);
         }
         &[color="accent"] {
-            --matcha-button-color: var(--matcha-color-accent, #{getAccent($theme)});
+            --matcha-button-color: var(--matcha-color-accent);
             --matcha-button-color-hover: var(--matcha-color-accent-hover);
             --matcha-button-color-pressed: var(--matcha-color-accent-pressed);
             --matcha-button-color-text-on: var(--matcha-color-accent-text-on);
-            --matcha-button-color-alpha: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
-            --matcha-button-color-edge: var(--matcha-color-accent, #{getAccent($theme)});
+            --matcha-button-color-alpha: var(--matcha-color-accent-alpha);
+            --matcha-button-color-edge: var(--matcha-color-accent);
         }
         &[color="success"] {
-            --matcha-button-color: var(--matcha-color-success, #{getSuccess($theme)});
+            --matcha-button-color: var(--matcha-color-success);
             --matcha-button-color-hover: var(--matcha-color-success-hover);
             --matcha-button-color-pressed: var(--matcha-color-success-pressed);
-            --matcha-button-color-text-on: var(--matcha-color-success-contrast, #{getSuccessContrast($theme)});
-            --matcha-button-color-alpha: var(--matcha-color-success-alpha, #{getSuccessAlpha($theme)});
-            --matcha-button-color-edge: var(--matcha-color-success, #{getSuccess($theme)});
+            --matcha-button-color-text-on: var(--matcha-color-success-contrast);
+            --matcha-button-color-alpha: var(--matcha-color-success-alpha);
+            --matcha-button-color-edge: var(--matcha-color-success);
         }
         &[color="warn"] {
-            --matcha-button-color: var(--matcha-color-warn, #{getWarn($theme)});
+            --matcha-button-color: var(--matcha-color-warn);
             --matcha-button-color-hover: var(--matcha-color-warn-hover);
             --matcha-button-color-pressed: var(--matcha-color-warn-pressed);
-            --matcha-button-color-text-on: var(--matcha-color-warn-contrast, #{getWarnContrast($theme)});
-            --matcha-button-color-alpha: var(--matcha-color-warn-alpha, #{getWarnAlpha($theme)});
-            --matcha-button-color-edge: var(--matcha-color-warn, #{getWarn($theme)});
+            --matcha-button-color-text-on: var(--matcha-color-warn-contrast);
+            --matcha-button-color-alpha: var(--matcha-color-warn-alpha);
+            --matcha-button-color-edge: var(--matcha-color-warn);
         }
         &[color="danger"] {
-            --matcha-button-color: var(--matcha-color-danger, #{getDanger($theme)});
+            --matcha-button-color: var(--matcha-color-danger);
             --matcha-button-color-hover: var(--matcha-color-danger-hover);
             --matcha-button-color-pressed: var(--matcha-color-danger-pressed);
-            --matcha-button-color-text-on: var(--matcha-color-danger-contrast, #{getDangerContrast($theme)});
-            --matcha-button-color-alpha: var(--matcha-color-danger-alpha, #{getDangerAlpha($theme)});
-            --matcha-button-color-edge: var(--matcha-color-danger, #{getDanger($theme)});
+            --matcha-button-color-text-on: var(--matcha-color-danger-contrast);
+            --matcha-button-color-alpha: var(--matcha-color-danger-alpha);
+            --matcha-button-color-edge: var(--matcha-color-danger);
         }
         &[color="info"] {
-            --matcha-button-color: var(--matcha-color-info, #{getInfo($theme)});
+            --matcha-button-color: var(--matcha-color-info);
             --matcha-button-color-hover: var(--matcha-color-info-hover);
             --matcha-button-color-pressed: var(--matcha-color-info-pressed);
-            --matcha-button-color-text-on: var(--matcha-color-info-contrast, #{getInfoContrast($theme)});
-            --matcha-button-color-alpha: var(--matcha-color-info-alpha, #{getInfoAlpha($theme)});
-            --matcha-button-color-edge: var(--matcha-color-info, #{getInfo($theme)});
+            --matcha-button-color-text-on: var(--matcha-color-info-contrast);
+            --matcha-button-color-alpha: var(--matcha-color-info-alpha);
+            --matcha-button-color-edge: var(--matcha-color-info);
         }
 
         // ── Filled (default variant) ──────────────────────────────────────────────────────
@@ -797,7 +797,7 @@ a[matcha-link] {
 
         // ── Badge indicator (always accent, pattern fixo) ────────────────
         &[badge]:not([badge="false"])::after {
-            background: var(--matcha-color-accent, #{getAccent($theme)});
+            background: var(--matcha-color-accent);
         }
 
         // ── Ripple overlay ───────────────────────────────────────────────

package/components/matcha-calendar.scss

@@ -7,47 +7,43 @@
 // =========================================================
 
 @mixin matcha-calendar-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
-
   .matcha-calendar {
-    background: var(--matcha-color-surface-card, var(--matcha-color-surface, #{getSurface($theme)}));
-    color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
-    box-shadow: var(--matcha-shadow-2, #{if($is-dark, $shadow-2-dark, $shadow-2-light)});
-
-    @if $is-dark {
-      border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
-    }
+    background: var(--matcha-color-surface-card, var(--matcha-color-surface));
+    color: var(--matcha-color-text-primary, var(--matcha-color-fg));
+    box-shadow: var(--matcha-shadow-2);
+    // Borda só-no-dark vira valor por modo (light = 0/transparent).
+    border: var(--matcha-calendar-border);
   }
 
   // ── Header ──────────────────────────────────────────────
   .matcha-calendar-header-label {
-    color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
+    color: var(--matcha-color-text-primary, var(--matcha-color-fg));
 
     &:hover {
       background-color: var(--matcha-color-surface-hover, rgba(255, 255, 255, 0.08));
     }
 
     &: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);
     }
   }
 
   .matcha-calendar-nav-btn {
-    color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
+    color: var(--matcha-color-text-primary, var(--matcha-color-fg));
 
     &:hover:not(:disabled):not(.is-disabled) {
       background-color: var(--matcha-color-surface-hover, rgba(255, 255, 255, 0.08));
     }
 
     &: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);
     }
 
     &[disabled],
     &.is-disabled {
-      color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+      color: var(--matcha-color-interaction-disabled-fg);
     }
   }
 
@@ -57,54 +53,54 @@
   }
 
   .matcha-calendar-divider {
-    background: var(--matcha-color-surface-border, var(--matcha-color-border, #{getGrey($theme)}));
+    background: var(--matcha-color-surface-border, var(--matcha-color-border));
   }
 
   // ── Day cells (Month view) ──────────────────────────────
   .matcha-calendar-cell {
-    color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
+    color: var(--matcha-color-text-primary, var(--matcha-color-fg));
 
     &:hover:not(.is-disabled):not(.is-selected):not(.is-range-start):not(.is-range-end) {
       background-color: var(--matcha-color-surface-hover, rgba(255, 255, 255, 0.08));
     }
 
     &: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: -2px;
     }
 
     // Today: ring accent (sem fill)
     &.is-today:not(.is-selected):not(.is-range-start):not(.is-range-end) {
-      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent, #{getAccent($theme)});
+      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent);
     }
 
     // In-range (exclusive): pill individual com accent-alpha
     &.is-in-range:not(.is-selected):not(.is-range-start):not(.is-range-end) {
-      background-color: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+      background-color: var(--matcha-color-accent-alpha);
     }
 
     // Selected single (Figma: outlined accent, NÃO filled — preserva text-primary)
     &.is-selected:not(.is-range-start):not(.is-range-end) {
       background-color: transparent;
-      color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
-      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent, #{getAccent($theme)});
+      color: var(--matcha-color-text-primary, var(--matcha-color-fg));
+      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent);
     }
 
     // Range anchors (start/end): filled accent — destaque visual dos pontos do range
     &.is-range-start,
     &.is-range-end {
-      background-color: var(--matcha-color-accent, #{getAccent($theme)});
-      color: var(--matcha-color-accent-contrast, getAccentContrast($theme));
+      background-color: var(--matcha-color-accent);
+      color: var(--matcha-color-accent-contrast);
       font-weight: var(--matcha-weight-semibold, 600);
       box-shadow: none;
     }
 
     &.is-other-month {
-      color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+      color: var(--matcha-color-interaction-disabled-fg);
     }
 
     &.is-disabled {
-      color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+      color: var(--matcha-color-interaction-disabled-fg);
       background-color: transparent;
       box-shadow: none;
     }
@@ -112,49 +108,49 @@
 
   // ── Grid views (Year / Decade) ──────────────────────────
   .matcha-calendar-grid-cell {
-    color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
+    color: var(--matcha-color-text-primary, var(--matcha-color-fg));
 
     &:hover:not(.is-disabled):not(.is-selected) {
       background-color: var(--matcha-color-surface-hover, rgba(255, 255, 255, 0.08));
     }
 
     &: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: -2px;
     }
 
     &.is-today:not(.is-selected) {
-      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent, #{getAccent($theme)});
+      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent);
     }
 
     &.is-selected {
-      background-color: var(--matcha-color-accent, #{getAccent($theme)});
-      color: var(--matcha-color-accent-contrast, getAccentContrast($theme));
+      background-color: var(--matcha-color-accent);
+      color: var(--matcha-color-accent-contrast);
       font-weight: var(--matcha-weight-semibold, 600);
       box-shadow: none;
     }
 
     &.is-disabled {
-      color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+      color: var(--matcha-color-interaction-disabled-fg);
     }
   }
 
   // ── Footer (botão Hoje) ─────────────────────────────────
   .matcha-calendar-today-btn {
-    color: var(--matcha-color-accent, #{getAccent($theme)});
+    color: var(--matcha-color-accent);
 
     &:hover:not(:disabled):not(.is-disabled) {
-      background-color: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+      background-color: var(--matcha-color-accent-alpha);
     }
 
     &: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: 2px;
     }
 
     &[disabled],
     &.is-disabled {
-      color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+      color: var(--matcha-color-interaction-disabled-fg);
     }
   }
 }

package/components/matcha-cards.scss

@@ -6,7 +6,6 @@
 // =============================================================================
 
 @mixin matcha-cards-theme($theme) {
-    $is-dark: map.get($theme, is-dark);
 
     matcha-card,
     .matcha-card,
@@ -14,58 +13,58 @@
 
         // ── Default: surface ──
         &:not([color]) {
-            background-color: var(--matcha-color-surface, #{getSurface($theme)});
-            color: var(--matcha-color-fg, #{getForeground($theme)});
+            background-color: var(--matcha-color-surface);
+            color: var(--matcha-color-fg);
         }
 
         // ── Semantic colors ──
         &[color="surface"] {
-            background-color: var(--matcha-color-surface, #{getSurface($theme)});
-            color: var(--matcha-color-fg, #{getForeground($theme)});
+            background-color: var(--matcha-color-surface);
+            color: var(--matcha-color-fg);
         }
 
         &[color="bg"] {
-            background-color: var(--matcha-color-bg, #{getBackground($theme)});
-            color: var(--matcha-color-fg, #{getForeground($theme)});
+            background-color: var(--matcha-color-bg);
+            color: var(--matcha-color-fg);
         }
 
         &[color="accent"] {
-            background-color: var(--matcha-color-accent, #{getAccent($theme)});
-            color: var(--matcha-color-accent-contrast, #{getAccentContrast($theme)});
+            background-color: var(--matcha-color-accent);
+            color: var(--matcha-color-accent-contrast);
         }
 
         &[color="primary"] {
-            background-color: var(--matcha-color-primary, #{getPrimary($theme)});
-            color: var(--matcha-color-primary-contrast, #{getPrimaryContrast($theme)});
+            background-color: var(--matcha-color-primary);
+            color: var(--matcha-color-primary-contrast);
         }
 
         &[color="danger"] {
-            background-color: var(--matcha-color-danger, #{getDanger($theme)});
-            color: var(--matcha-color-danger-contrast, #{getDangerContrast($theme)});
+            background-color: var(--matcha-color-danger);
+            color: var(--matcha-color-danger-contrast);
         }
 
         // ── Alpha modifier ──
         &[alpha]:not([alpha="false"]) {
             &[color="accent"] {
-                background-color: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
-                color: var(--matcha-color-fg, #{getForeground($theme)});
+                background-color: var(--matcha-color-accent-alpha);
+                color: var(--matcha-color-fg);
             }
             &[color="primary"] {
-                background-color: var(--matcha-color-primary-alpha, #{getPrimaryAlpha($theme)});
-                color: var(--matcha-color-fg, #{getForeground($theme)});
+                background-color: var(--matcha-color-primary-alpha);
+                color: var(--matcha-color-fg);
             }
             &[color="danger"] {
-                background-color: var(--matcha-color-danger-alpha, #{getDangerAlpha($theme)});
-                color: var(--matcha-color-fg, #{getForeground($theme)});
+                background-color: var(--matcha-color-danger-alpha);
+                color: var(--matcha-color-fg);
             }
             // Figma DSV3: alpha + color=surface usa surface-bg (#111318), não surface-alpha.
             &[color="surface"] {
-                background-color: var(--matcha-color-surface-bg, #{getBackground($theme)});
-                color: var(--matcha-color-fg, #{getForeground($theme)});
+                background-color: var(--matcha-color-surface-bg);
+                color: var(--matcha-color-fg);
             }
             &[color="bg"] {
-                background-color: #{getBackgroundAlpha($theme)};
-                color: var(--matcha-color-fg, #{getForeground($theme)});
+                background-color: var(--matcha-color-surface-bg-alpha);
+                color: var(--matcha-color-fg);
             }
         }
 
@@ -78,33 +77,33 @@
             box-shadow: none;
 
             &:not([color]) {
-                color: var(--matcha-color-fg, #{getForeground($theme)});
+                color: var(--matcha-color-fg);
             }
         }
 
         // ── Tint modifier ──
         &[tint]:not([tint="false"]) {
             &[color="accent"] {
-                background-color: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
-                color: var(--matcha-color-accent, #{getAccent($theme)});
+                background-color: var(--matcha-color-accent-alpha);
+                color: var(--matcha-color-accent);
             }
             &[color="primary"] {
-                background-color: var(--matcha-color-primary-alpha, #{getPrimaryAlpha($theme)});
-                color: var(--matcha-color-primary, #{getPrimary($theme)});
+                background-color: var(--matcha-color-primary-alpha);
+                color: var(--matcha-color-primary);
             }
             &[color="danger"] {
-                background-color: var(--matcha-color-danger-alpha, #{getDangerAlpha($theme)});
-                color: var(--matcha-color-danger, #{getDanger($theme)});
+                background-color: var(--matcha-color-danger-alpha);
+                color: var(--matcha-color-danger);
             }
         }
 
         // ── Basic modifier ──
         &[basic]:not([basic="false"]) {
             box-shadow: none;
-            background-color: var(--matcha-color-surface, #{getSurface($theme)});
+            background-color: var(--matcha-color-surface);
 
             &:not([color]) {
-                color: var(--matcha-color-fg, #{getForeground($theme)});
+                color: var(--matcha-color-fg);
             }
         }
 

package/components/matcha-chart-card.scss

@@ -8,22 +8,15 @@
 // =============================================================================
 
 @mixin matcha-chart-card-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
-
   .matcha-chart-card {
-    background: var(--matcha-color-surface, #{getSurface($theme)});
-    box-shadow: var(--matcha-shadow-1,
-      0 2px 12px rgba(0, 0, 0, if($is-dark, 0.3, 0.06)),
-      0 0 4px rgba(0, 0, 0, if($is-dark, 0.2, 0.04))
-    );
-
-    @if $is-dark {
-      border: var(--matcha-border-hairline, 1px) solid rgba(#212121, 0.06); // ok: structural
-    }
+    background: var(--matcha-color-surface);
+    box-shadow: var(--matcha-shadow-1);
+    // Borda só-no-dark vira valor por modo (light = 0/transparent, sem mudar layout).
+    border: var(--matcha-chart-card-border);
   }
 
   .matcha-chart-card__accent {
-    background: var(--matcha-color-accent, #{getAccent($theme)});
+    background: var(--matcha-color-accent);
   }
 }
 

package/components/matcha-checkbox.scss

@@ -9,7 +9,7 @@
         // ── Off state — glyph cinza (icon-default) ─────────────────────────
         // Default applies to all colors (vector unchecked é sempre cinza).
         .matcha-checkbox-icon--outline {
-            color: var(--matcha-color-icon-default, #{getBlueGrey($theme)});
+            color: var(--matcha-color-icon-default);
         }
 
         // ── Hover (off) — bg sutil surface alpha (Figma matcha/state-layer) ─
@@ -28,7 +28,7 @@
 
         // ── Focus visible — border 2px info (Figma) ────────────────────────
         .matcha-checkbox-container:has(input:focus-visible) {
-            box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-info, #{getInfo($theme)});
+            box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-info);
         }
 
         // ── Cores per-color: checked + indeterminate fill = a cor escolhida
@@ -36,36 +36,36 @@
 
         // Sem [color]: accent
         &:not([color]) .matcha-checkbox-icon--checked,
-        &:not([color]) .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-accent, #{getAccent($theme)}); }
+        &:not([color]) .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-accent); }
 
         // Semântica
         &[color="accent"]  .matcha-checkbox-icon--checked,
-        &[color="accent"]  .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-accent, #{getAccent($theme)}); }
+        &[color="accent"]  .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-accent); }
         &[color="primary"] .matcha-checkbox-icon--checked,
-        &[color="primary"] .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-primary, #{getPrimary($theme)}); }
+        &[color="primary"] .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-primary); }
         &[color="success"] .matcha-checkbox-icon--checked,
-        &[color="success"] .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-success, #{getSuccess($theme)}); }
+        &[color="success"] .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-success); }
         &[color="warn"]    .matcha-checkbox-icon--checked,
-        &[color="warn"]    .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-warn, #{getWarn($theme)}); }
+        &[color="warn"]    .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-warn); }
         &[color="danger"]  .matcha-checkbox-icon--checked,
-        &[color="danger"]  .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-danger, #{getDanger($theme)}); }
+        &[color="danger"]  .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-danger); }
         &[color="info"]    .matcha-checkbox-icon--checked,
-        &[color="info"]    .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-info, #{getInfo($theme)}); }
+        &[color="info"]    .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-info); }
 
         // ── Error state — glyph fica danger (override em outline, checked, indeterminate)
         &.matcha-checkbox-error,
         &[error] {
-            .matcha-checkbox-icon { color: var(--matcha-color-danger, #{getDanger($theme)}); }
+            .matcha-checkbox-icon { color: var(--matcha-color-danger); }
         }
 
         // ── Disabled — opacity reduzida (host) ─────────────────────────────
-        &[disabled] .matcha-checkbox-icon { color: var(--matcha-color-icon-default, #{getBlueGrey($theme)}); }
+        &[disabled] .matcha-checkbox-icon { color: var(--matcha-color-icon-default); }
 
         // Label colors
-        .matcha-checkbox-label { color: var(--matcha-checkbox-label-color, var(--matcha-color-text-primary, #{getForeground($theme)})); }
+        .matcha-checkbox-label { color: var(--matcha-checkbox-label-color, var(--matcha-color-text-primary)); }
 
         &[disabled] .matcha-checkbox-label {
-            color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
+            color: var(--matcha-color-disabled-fg);
         }
     }
 }

package/components/matcha-chip.scss

@@ -262,8 +262,8 @@ matcha-chip .matcha-chip-remove [class*=" i-matcha-"] {
         pointer-events: none;
         matcha-chip {
             opacity:      0.4;
-            border-color: var(--matcha-color-interaction-disabled-bg, #{getDisabled($theme)});
-            color:        var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+            border-color: var(--matcha-color-interaction-disabled-bg);
+            color:        var(--matcha-color-interaction-disabled-fg);
         }
     }
 }

package/components/matcha-color-pick.scss

@@ -7,11 +7,10 @@
 // =============================================================================
 
 @mixin matcha-color-pick-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
 
   .matcha-color-pick {
     .is-selected {
-      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-surface, #{getSurface($theme)});
+      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-surface);
     }
   }
 }