@inchurch/matcha-theme 20.276.0 → 20.277.0

package/components/matcha-horizontal-tree.scss

@@ -6,54 +6,53 @@
 // =============================================================================
 
 @mixin matcha-horizontal-tree-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
 
   .svg-line line {
-    stroke: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+    stroke: var(--matcha-color-text-placeholder);
   }
 
   .child {
     .the-line-connect-first {
-      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent, #{getAccent($theme)});
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent);
     }
 
     .the-line-connect {
-      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent, #{getAccent($theme)});
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent);
     }
 
     .the-line-connect-last {
-      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent, #{getAccent($theme)});
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent);
     }
 
     .the-line-connect-first-modal {
-      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha);
     }
 
     .the-line-connect-second-modal {
-      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha);
     }
 
     .the-line-connect-last-modal {
-      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha);
     }
 
     .the-line-connect-start-modal {
-      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha);
     }
 
     .the-line-connect-middle {
-      box-shadow: inset 2px -2px 0 2px var(--matcha-color-border, #{getGrey($theme)});
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-border);
     }
   }
 
   .tree-node {
     &-content {
       &-btn-add-node {
-        background: var(--matcha-color-surface, #{getSurface($theme)});
-        box-shadow: inset 0 0 0 3px var(--matcha-color-accent, #{getAccent($theme)});
+        background: var(--matcha-color-surface);
+        box-shadow: inset 0 0 0 3px var(--matcha-color-accent);
 
         &-i {
-          color: var(--matcha-color-accent, #{getAccent($theme)});
+          color: var(--matcha-color-accent);
         }
       }
     }
@@ -62,11 +61,11 @@
   .tree-first-node {
     &-begin {
       &-btn-add-node {
-        background: var(--matcha-color-surface, #{getSurface($theme)});
-        box-shadow: inset 0 0 0 3px var(--matcha-color-accent, #{getAccent($theme)});
+        background: var(--matcha-color-surface);
+        box-shadow: inset 0 0 0 3px var(--matcha-color-accent);
 
         &-i {
-          color: var(--matcha-color-accent, #{getAccent($theme)});
+          color: var(--matcha-color-accent);
         }
       }
     }

package/components/matcha-icon.scss

@@ -22,10 +22,10 @@ $icon-size-xl: 48px;
 [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"] {
@@ -37,34 +37,34 @@ 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);
   }
 }
 
@@ -81,14 +81,14 @@ matcha-icon[library="symbols"] {
   matcha-icon,
   [class^="i-matcha-"],
   [class*=" i-matcha-"] {
-    color: var(--matcha-icon-color, var(--matcha-color-icon-default, #{getBlueGrey($theme)}));
+    color: var(--matcha-icon-color, var(--matcha-color-icon-default));
 
-    &.color-fg,       &[color="fg"]       { --matcha-icon-color: var(--matcha-color-fg, #{getForeground($theme)}); }
-    &.color-accent,   &[color="accent"]   { --matcha-icon-color: var(--matcha-color-accent, #{getAccent($theme)}); }
-    &.color-primary,  &[color="primary"]  { --matcha-icon-color: var(--matcha-color-primary, #{getPrimary($theme)}); }
-    &.color-danger,   &[color="danger"]   { --matcha-icon-color: var(--matcha-color-danger, #{getDanger($theme)}); }
-    &.color-warn,     &[color="warn"]     { --matcha-icon-color: var(--matcha-color-warn, #{getWarn($theme)}); }
-    &.color-success,  &[color="success"]  { --matcha-icon-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-list-item-text, 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-list-item-text, 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);
     }
 
@@ -174,7 +173,7 @@
         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) ──

package/components/matcha-menu.scss

@@ -60,7 +60,7 @@ matcha-menu > matcha-panel {
       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);
       }
 
@@ -82,7 +82,7 @@ matcha-menu > matcha-panel {
         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

@@ -96,7 +96,6 @@
 // =============================================================================
 
 @mixin matcha-modal-theme($theme) {
-    $is-dark: map.get($theme, is-dark);
 
     // ── Host element ──
     matcha-modal {
@@ -146,8 +145,8 @@
         // 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, #{getSurface($theme)}));
-        color: var(--matcha-color-fg, #{getForeground($theme)});
+        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));
 
@@ -161,16 +160,16 @@
     // 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, #{getForeground($theme)});
+        color: var(--matcha-color-text-primary);
     }
 
     .matcha-modal-content {
-        color: var(--matcha-color-text-primary, #{getForeground($theme)});
+        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, #{getAccent($theme)});
+        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
         outline-offset: var(--matcha-state-focus-ring-offset, 2px);
     }
 }

package/components/matcha-nav.scss

@@ -454,15 +454,15 @@
   // Bg/border/etc aplicados no .matcha-nav-item__row (não no host) — assim
   // os filhos aninhados não herdam o bg do pai expandido/ativo.
   .matcha-nav-item {
-    color: var(--matcha-color-text-primary, #{getForeground($theme)});
+    color: var(--matcha-color-text-primary);
 
     .matcha-nav-item__label {
-      color: var(--matcha-color-text-primary, #{getForeground($theme)});
+      color: var(--matcha-color-text-primary);
     }
 
     .matcha-nav-item__icon,
     .matcha-nav-item__chevron {
-      color: var(--matcha-color-text-secondary, #{getGrey($theme)});
+      color: var(--matcha-color-text-secondary);
     }
 
     // Hover — bg accent/surface-hover direto (Figma usa este token, não state-layer).
@@ -493,7 +493,7 @@
 
     // Badge — Figma DSV3 feedback/danger bg + danger-contrast fg (Padrão).
     .matcha-nav-item__badge {
-      background: var(--matcha-color-feedback-danger, #{getDanger($theme)});
+      background: var(--matcha-color-feedback-danger);
       color: var(--matcha-color-feedback-danger-contrast, rgba(0, 0, 0, 0.87));
     }
 
@@ -519,8 +519,8 @@
   .matcha-nav-rail {
     background-color: color-mix(
       in srgb,
-      var(--matcha-color-surface-bg, #{getBackground($theme)}) 96%,
-      var(--matcha-color-fg, #{getForeground($theme)}) 4%
+      var(--matcha-color-surface-bg) 96%,
+      var(--matcha-color-fg) 4%
     );
   }
 
@@ -529,10 +529,10 @@
     // Inactive: text-secondary no button + override no matcha-icon filho
     // (matcha-icon tem regra global no theme com mesma especificidade,
     // então precisa target explícito pra vencer no cascade).
-    color: var(--matcha-color-text-secondary, #{getGrey($theme)});
+    color: var(--matcha-color-text-secondary);
 
     matcha-icon {
-      color: var(--matcha-color-text-secondary, #{getGrey($theme)});
+      color: var(--matcha-color-text-secondary);
     }
 
     // Hover (inactive): bg accent/surface-hover (state-layer canon Figma).
@@ -546,35 +546,35 @@
     &.matcha-nav-rail__module--active,
     &[aria-current] {
       background-color: var(--matcha-color-accent-surface-hover);
-      color: var(--matcha-color-accent, #{getAccent($theme)});
+      color: var(--matcha-color-accent);
 
       matcha-icon {
-        color: var(--matcha-color-accent, #{getAccent($theme)});
+        color: var(--matcha-color-accent);
       }
     }
   }
 
   .matcha-nav-rail__divider {
-    background-color: var(--matcha-color-surface-border, #{getGrey($theme)});
+    background-color: var(--matcha-color-surface-border);
   }
 
   // ── Nav Panel (Figma DSV3 1:1) ──
   // bg surface/card (1 step acima do rail). Sem shadow — só tonal hierarchy.
   .matcha-nav-panel {
-    background-color: var(--matcha-color-surface-card, #{getSurface($theme)});
-    border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, #{getGrey($theme)});
+    background-color: var(--matcha-color-surface-card);
+    border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
   }
 
   .matcha-nav-panel__divider {
-    background-color: var(--matcha-color-surface-border, #{getGrey($theme)});
+    background-color: var(--matcha-color-surface-border);
   }
 
   .matcha-nav-panel__title {
-    color: var(--matcha-color-text-primary, #{getForeground($theme)});
+    color: var(--matcha-color-text-primary);
   }
 
   .matcha-nav-panel__title-icon {
-    color: var(--matcha-color-text-secondary, #{getGrey($theme)});
+    color: var(--matcha-color-text-secondary);
   }
 
   // ── Command Palette theme em matcha-command-palette.scss (canônico) ──

package/components/matcha-notification.scss

@@ -9,17 +9,16 @@
 // =============================================================================
 
 @mixin matcha-notification-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
 
   // Title sempre text-primary, description sempre text-secondary (Figma DSV3).
   // Texto fica legível porque bg é alpha 10% — usuário lê o texto sobre o
   // surface real, não sobre a tinta.
   .matcha-notification__title {
-    color: var(--matcha-color-text-primary, #{getForeground($theme)});
+    color: var(--matcha-color-text-primary);
   }
 
   .matcha-notification__description {
-    color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+    color: var(--matcha-color-text-secondary);
   }
 
   // Close icon — color icon/default (token DSV3 #5f656b light / #9aa0a6 dark).
@@ -27,7 +26,7 @@
     color: var(--matcha-color-icon-default, var(--matcha-color-text-secondary));
 
     &: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);
     }
   }

package/components/matcha-option.scss

@@ -110,6 +110,25 @@
         background: var(--matcha-color-accent-surface-hover);
       }
     }
+
+    // ── Modo múltiplo (matcha-select-multiple) — checkbox à esquerda ──
+    // O realce do item marcado é o próprio checkbox; por isso o fundo
+    // accent/alpha do single-select é neutralizado quando não há hover/cursor.
+    &.matcha-option-multiple {
+      gap: var(--matcha-space-100, 8px);
+
+      &[aria-selected="true"]:not(:hover):not(.matcha-option-highlighted) {
+        background: transparent;
+      }
+
+      .matcha-option-checkbox {
+        display: inline-flex;
+        align-items: center;
+        // Checkbox é puramente visual: o clique cai no host matcha-option,
+        // que faz o toggle (tanto na opção quanto sobre o checkbox).
+        pointer-events: none;
+      }
+    }
   }
 }
 

package/components/matcha-page-builder.scss

@@ -10,25 +10,25 @@
     min-height: 800px;
     width: 100%;
 
-    --gjs-main-color: #{getSurface($theme)};
-    --gjs-primary-color: #{getBackground($theme)};
-    --gjs-secondary-color: #{getBlueGrey($theme)};
-    --gjs-tertiary-color: #{getSurface($theme)};
-    --gjs-quaternary-color: #{getAccent($theme)};
-
-    --gjs-main-dark-color: #{getSurfaceAlpha($theme)};
-    --gjs-secondary-dark-color: #{getSurface($theme)};
-    --gjs-quaternary-dark-color: #{getAccentAlpha($theme)};
-
-    --gjs-font-color: #{getForeground($theme)};
-    --gjs-font-color-active: #{getForegroundAlpha($theme)};
+    --gjs-main-color: var(--matcha-color-surface);
+    --gjs-primary-color: var(--matcha-color-bg);
+    --gjs-secondary-color: var(--matcha-color-text-hint);
+    --gjs-tertiary-color: var(--matcha-color-surface);
+    --gjs-quaternary-color: var(--matcha-color-accent);
+
+    --gjs-main-dark-color: var(--matcha-color-surface-card-alpha);
+    --gjs-secondary-dark-color: var(--matcha-color-surface);
+    --gjs-quaternary-dark-color: var(--matcha-color-accent-alpha);
+
+    --gjs-font-color: var(--matcha-color-fg);
+    --gjs-font-color-active: var(--matcha-color-fg-alpha);
     --gjs-main-light-color: rgba(255, 255, 255, 0.1);
     --gjs-secondary-light-color: rgba(255, 255, 255, 0.7);
     --gjs-soft-light-color: rgba(255, 255, 255, 0.015);
-    --gjs-color-blue: #{getBlue($theme)};
-    --gjs-color-red: #{getRed($theme)};
-    --gjs-color-yellow: #{getYellow($theme)};
-    --gjs-color-green: #{getGreen($theme)};
+    --gjs-color-blue: var(--matcha-prim-blue-700);
+    --gjs-color-red: var(--matcha-color-danger);
+    --gjs-color-yellow: var(--matcha-prim-yellow-500);
+    --gjs-color-green: var(--matcha-color-success);
     --gjs-left-width: 15%;
     --gjs-color-highlight: #71b7f1;
     --gjs-color-warn: #ffca6f;

package/components/matcha-paginator.scss

@@ -26,31 +26,30 @@
 // =============================================================================
 
 @mixin matcha-paginator-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
 
   .matcha-paginator {
     // ── Active page — accent only (consistência, não over-engineering) ──
     .page-button.active {
-      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);
     }
 
     // ── Total info ──
     .paginator-total-info {
       .total-range {
-        color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+        color: var(--matcha-color-text-label);
       }
       .total-filtered {
-        color: var(--matcha-color-text-secondary, #{getForegroundAlpha($theme)});
+        color: var(--matcha-color-text-secondary);
       }
     }
 
     // ── Page buttons (inactive) ──
     .page-button:not(.active) {
-      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+      color: var(--matcha-color-text-label);
 
       &:hover {
-        background-color: var(--matcha-color-surface-hover, #{getBackgroundAlpha($theme)});
+        background-color: var(--matcha-color-surface-hover);
       }
     }
   }

package/components/matcha-panel.scss

@@ -138,20 +138,19 @@
 }
 
 @mixin matcha-panel-theme($theme) {
-    $is-dark: map.get($theme, is-dark);
 
     .matcha-panel {
         // Floating overlay (dropdown/popover) — surface-card-strong (pure white
         // light, lifted dark). Inline cards usam soft default; panel flutua.
-        background: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card, var(--matcha-color-surface, #{getSurface($theme)})));
-        color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
+        background: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card, var(--matcha-color-surface)));
+        color: var(--matcha-color-text-primary, var(--matcha-color-fg));
 
         // Shadow level 3 (floating panels — Figma DSV3 elevation/level-3)
-        box-shadow: var(--matcha-shadow-3, #{if($is-dark, $shadow-3-dark, $shadow-3-light)});
+        box-shadow: var(--matcha-shadow-3);
         border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
 
         &:focus-within {
-            box-shadow: var(--matcha-shadow-4, #{if($is-dark, $shadow-4-dark, $shadow-4-light)});
+            box-shadow: var(--matcha-shadow-4);
         }
     }
 

package/components/matcha-profile-card.scss

@@ -10,15 +10,15 @@
 
 @mixin matcha-profile-card-theme($theme) {
   .matcha-profile-card {
-    color: var(--matcha-color-fg, #{getForeground($theme)});
+    color: var(--matcha-color-fg);
   }
 
   .matcha-profile-card__name {
-    color: var(--matcha-color-fg, #{getForeground($theme)});
+    color: var(--matcha-color-fg);
   }
 
   .matcha-profile-card__role {
-    color: var(--matcha-color-text-hint, #{getBlueGrey($theme)});
+    color: var(--matcha-color-text-hint);
   }
 }
 

package/components/matcha-progress-bar.scss

@@ -23,7 +23,7 @@
 
     matcha-progress-bar {
         // Default fill = accent
-        --matcha-progress-fill: var(--matcha-color-accent, #{getAccent($theme)});
+        --matcha-progress-fill: var(--matcha-color-accent);
 
         // Bind por color attr → CSS var (mesma estratégia do slider/spinner)
         @each $name, $fn in $semantic-colors {