@inchurch/matcha-theme 20.276.0 → 20.278.0

package/components/matcha-command-palette.scss

@@ -19,36 +19,35 @@
 
 // ── Theme (color tokens via mixin pra dark/light) ──────────────────────────
 @mixin matcha-command-palette-theme($theme) {
-    $is-dark: map.get($theme, is-dark);
 
     .matcha-command-palette {
-        background: var(--matcha-color-surface-card, #{getSurface($theme)});
-        border:     var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, #{getGrey($theme)});
+        background: var(--matcha-color-surface-card);
+        border:     var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
         box-shadow: var(--matcha-shadow-4);
-        color:      var(--matcha-color-text-primary, #{getForeground($theme)});
+        color:      var(--matcha-color-text-primary);
 
         &__search-icon {
-            color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+            color: var(--matcha-color-text-secondary);
         }
 
         &__input {
-            color: var(--matcha-color-text-primary, #{getForeground($theme)});
-            &::placeholder { color: var(--matcha-color-text-placeholder, #{getGrey($theme)}); }
+            color: var(--matcha-color-text-primary);
+            &::placeholder { color: var(--matcha-color-text-placeholder); }
         }
 
         // __divider: cor/bg gerenciados pelo matcha-divider canônico.
 
         &__section {
-            color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+            color: var(--matcha-color-text-secondary);
         }
 
         &__result {
-            color: var(--matcha-color-text-primary, #{getForeground($theme)});
+            color: var(--matcha-color-text-primary);
 
-            &-icon { color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)}); }
+            &-icon { color: var(--matcha-color-text-secondary); }
 
             &:hover:not(:disabled) {
-                background: var(--matcha-color-surface-hover, #{getBackgroundAlpha($theme)});
+                background: var(--matcha-color-surface-hover);
             }
 
             &--selected {
@@ -57,21 +56,21 @@
                 .matcha-command-palette__result-icon { color: var(--matcha-color-accent); }
             }
 
-            &:disabled { color: var(--matcha-color-text-disabled, #{getGrey($theme)}); }
+            &:disabled { color: var(--matcha-color-text-disabled, var(--matcha-color-text-muted)); }
         }
 
         &__shortcut,
         &__esc-hint,
         &__footer kbd {
-            background:    var(--matcha-color-surface-inner, #{getBackgroundAlpha($theme)});
-            border-color:  var(--matcha-color-surface-border, #{getGrey($theme)});
-            color:         var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+            background:    var(--matcha-color-surface-inner);
+            border-color:  var(--matcha-color-surface-border);
+            color:         var(--matcha-color-text-secondary);
         }
 
         &__footer {
-            background:    var(--matcha-color-surface-inner, #{getBackgroundAlpha($theme)});
-            color:         var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
-            border-top:    var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, #{getGrey($theme)});
+            background:    var(--matcha-color-surface-inner);
+            color:         var(--matcha-color-text-secondary);
+            border-top:    var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
         }
     }
 }

package/components/matcha-crop.scss

@@ -17,7 +17,6 @@
 // =============================================================================
 
 @mixin matcha-crop-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
 
   .matcha-crop {
     color: var(--matcha-color-text-primary);

package/components/matcha-date.scss

@@ -4,15 +4,15 @@
 
 @mixin matcha-date-theme($theme) {
   .matcha-date-input {
-    color: var(--matcha-color-fg, #{getForeground($theme)});
+    color: var(--matcha-color-fg);
 
     &::placeholder {
-      color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+      color: var(--matcha-color-text-placeholder);
     }
 
     &:disabled {
       opacity: var(--matcha-opacity-disabled, 0.38);
-      color: var(--matcha-color-disabled, #{getDisabled($theme)});
+      color: var(--matcha-color-disabled);
     }
   }
 }

package/components/matcha-draggable.scss

@@ -6,19 +6,18 @@
 // =============================================================================
 
 @mixin matcha-draggable-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
 
   .matcha-draggable {
     .check-with-label:checked + .label-for-check {
       box-shadow:
-        0 0 0 var(--matcha-border-thick, 8px) var(--matcha-color-surface, #{getSurface($theme)}),
-        0 0 0 10px var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+        0 0 0 var(--matcha-border-thick, 8px) var(--matcha-color-surface),
+        0 0 0 10px var(--matcha-color-text-placeholder);
     }
 
     .is-selected {
       box-shadow:
-        0 0 0 var(--matcha-border-thick, 8px) var(--matcha-color-surface, #{getSurface($theme)}),
-        0 0 0 10px var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+        0 0 0 var(--matcha-border-thick, 8px) var(--matcha-color-surface),
+        0 0 0 10px var(--matcha-color-text-placeholder);
     }
   }
 }

package/components/matcha-drawer.scss

@@ -82,7 +82,6 @@
 // =============================================================================
 
 @mixin matcha-drawer-theme($theme) {
-    $is-dark: map.get($theme, is-dark);
 
     // ── Container ──
     matcha-drawer-container {
@@ -92,8 +91,8 @@
         box-sizing: border-box;
         -webkit-overflow-scrolling: touch;
         overflow: hidden;
-        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);
     }
 
     // ── Backdrop ──
@@ -151,8 +150,8 @@
         transition: transform var(--matcha-duration-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1),
                     visibility var(--matcha-duration-normal, 200ms) ease,
                     width var(--matcha-duration-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1);
-        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);
         pointer-events: auto;
 
         // Shadow inline (3 stacked) — Figma DSV3 spec exato pro drawer.
@@ -163,11 +162,8 @@
             0 4px 16px rgba(0, 0, 0, 0.12),
             0 16px 48px rgba(0, 0, 0, 0.16);
 
-        @if $is-dark {
-            // surface-border é o token canônico DSV3 (rgba 255,255,255,0.12 dark).
-            // Era rgba(255,255,255,0.06) hardcoded — quase invisível e fora do token system.
-            border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
-        }
+        // Borda da edge só aparece no dark (var = 0/transparent no light, sem mudar layout).
+        border-right: var(--matcha-drawer-border);
 
         // Position end (right) — overrides left:0 default
         &.matcha-drawer-end {
@@ -175,10 +171,8 @@
             right: 0;
             transform: translate3d(100%, 0, 0);
 
-            @if $is-dark {
-                border-right: none;
-                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
-            }
+            border-right: 0 solid transparent;
+            border-left: var(--matcha-drawer-border);
         }
 
         // Position bottom (bottom sheet)
@@ -196,12 +190,8 @@
             border-radius: var(--matcha-radius-xl, 16px) var(--matcha-radius-xl, 16px) 0 0;
             transform: translate3d(0, 100%, 0);
 
-            @if $is-dark {
-                border-right: none;
-                border-top: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
-            } @else {
-                border-right: none;
-            }
+            border-right: 0 solid transparent;
+            border-top: var(--matcha-drawer-border);
 
             // safe-area-inset-bottom — iPhone X+ home indicator não cobre footer.
             // Aplicado no slot footer porque é onde botões/CTAs ficam.
@@ -229,7 +219,7 @@
                 height: 4px;
                 margin: 0 auto;
                 border-radius: var(--matcha-radius-sm, 2px);
-                background: var(--matcha-color-hint, #{getGrey($theme)});
+                background: var(--matcha-color-hint, var(--matcha-color-text-muted));
                 opacity: 0.3;
             }
 
@@ -263,23 +253,23 @@
         // Mode: side — fixed, no shadow, border via surface-border token (DSV3 canônico).
         &.matcha-drawer-side {
             z-index: 10;
-            border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border, #{getGrey($theme)}));
+            border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border));
             box-shadow: none;
 
             &.matcha-drawer-end {
                 border-right: none;
-                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border, #{getGrey($theme)}));
+                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border));
             }
         }
 
         // Mode: push — pushes content, border only.
         &.matcha-drawer-push {
-            border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border, #{getGrey($theme)}));
+            border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border));
             box-shadow: none;
 
             &.matcha-drawer-end {
                 border-right: none;
-                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border, #{getGrey($theme)}));
+                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border));
             }
         }
 
@@ -324,7 +314,7 @@
             flex: 0 0 auto;
             padding: var(--drawer-pad-y) var(--drawer-pad-x);
             border-bottom: var(--drawer-divider);
-            color: var(--matcha-color-fg, #{getForeground($theme)});
+            color: var(--matcha-color-fg);
 
             > * {
                 display: flex;
@@ -343,7 +333,7 @@
             overflow-y: auto;
             overflow-x: hidden;
             padding: var(--drawer-pad-y) var(--drawer-pad-x);
-            color: var(--matcha-color-fg, #{getForeground($theme)});
+            color: var(--matcha-color-fg);
             -webkit-overflow-scrolling: touch;
             gap: var(--matcha-space-150, 12px);
         }
@@ -380,7 +370,7 @@
 
     // ── Focus ring ──
     matcha-drawer: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-drop-list.scss

@@ -6,7 +6,6 @@
 
 // Mixin para cores e temas
 @mixin matcha-drop-list-theme($theme) {
-    $is-dark: map.get($theme, is-dark);
 
     // =============================================================================
     // COMPONENTE PRINCIPAL
@@ -33,8 +32,8 @@
         transition: background-color 0.2s ease, border-color 0.2s ease, padding 0.2s ease;
 
         &.matcha-drop-list-receiving {
-            background-color: getPrimaryAlpha($theme);
-            border-color: var(--matcha-color-accent, #{getAccent($theme)});
+            background-color: var(--matcha-color-primary-alpha);
+            border-color: var(--matcha-color-accent);
             border-width: 2px;
             border-style: dashed;
             border-radius: var(--matcha-radius-lg, 8px);
@@ -50,12 +49,12 @@
                 bottom: 0;
                 background: linear-gradient(45deg,
                         transparent 25%,
-                        getPrimaryAlpha($theme) 25%,
-                        getPrimaryAlpha($theme) 50%,
+                        var(--matcha-color-primary-alpha) 25%,
+                        var(--matcha-color-primary-alpha) 50%,
                         transparent 50%,
                         transparent 75%,
-                        getPrimaryAlpha($theme) 75%,
-                        getPrimaryAlpha($theme));
+                        var(--matcha-color-primary-alpha) 75%,
+                        var(--matcha-color-primary-alpha));
                 background-size: 16px 16px;
                 animation: drop-zone-animation 2s linear infinite;
                 border-radius: var(--matcha-radius-md, 4px);
@@ -65,19 +64,19 @@
 
         // Estados de aceitação de drop
         &.matcha-drop-list-can-accept {
-            background-color: getGreenAlpha($theme);
-            border-color: getGreen($theme);
+            background-color: var(--matcha-color-success-alpha);
+            border-color: var(--matcha-color-success);
             cursor: copy;
 
             &::before {
                 background: linear-gradient(45deg,
                         transparent 25%,
-                        getGreenAlpha($theme) 25%,
-                        getGreenAlpha($theme) 50%,
+                        var(--matcha-color-success-alpha) 25%,
+                        var(--matcha-color-success-alpha) 50%,
                         transparent 50%,
                         transparent 75%,
-                        getGreenAlpha($theme) 75%,
-                        getGreenAlpha($theme));
+                        var(--matcha-color-success-alpha) 75%,
+                        var(--matcha-color-success-alpha));
                 background-size: 16px 16px;
                 animation: drop-zone-animation 1.5s linear infinite;
                 opacity: 0.5;
@@ -87,20 +86,20 @@
 
 
         &.matcha-drop-list-cannot-accept {
-            background-color: getRedAlpha($theme);
-            border-color: getRed($theme);
+            background-color: var(--matcha-color-danger-alpha);
+            border-color: var(--matcha-color-danger);
             pointer-events: none;
             cursor: default;
 
             &::before {
                 background: linear-gradient(45deg,
                         transparent 25%,
-                        getRedAlpha($theme) 25%,
-                        getRedAlpha($theme) 50%,
+                        var(--matcha-color-danger-alpha) 25%,
+                        var(--matcha-color-danger-alpha) 50%,
                         transparent 50%,
                         transparent 75%,
-                        getRedAlpha($theme) 75%,
-                        getRedAlpha($theme));
+                        var(--matcha-color-danger-alpha) 75%,
+                        var(--matcha-color-danger-alpha));
                 background-size: 16px 16px;
                 animation: drop-zone-animation 0.8s linear infinite;
                 opacity: 0.6;
@@ -108,8 +107,8 @@
         }
 
         &.matcha-drop-list-disabled {
-            color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
-            background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+            color: var(--matcha-color-disabled-fg);
+            background-color: var(--matcha-color-disabled-bg);
             pointer-events: none;
             cursor: default;
         }
@@ -120,9 +119,9 @@
     // =============================================================================
 
     .matcha-drop-zone-cannot-accept {
-        border: 2px dashed getRed($theme) !important;
+        border: 2px dashed var(--matcha-color-danger) !important;
         border-radius: 8px;
-        background-color: getRedAlpha($theme);
+        background-color: var(--matcha-color-danger-alpha);
         cursor: not-allowed;
         transition: background-color 0.15s linear, border-color 0.15s linear;
     }
@@ -130,13 +129,13 @@
     // Fix C: quando o drop zone pai está rejeitado (vermelho), a lista filha
     // recebendo o drag também deve ficar vermelha — não verde.
     .matcha-drop-zone-cannot-accept .matcha-drop-list-container.matcha-drop-list-receiving {
-        background-color: getRedAlpha($theme);
-        border-color: getRed($theme);
+        background-color: var(--matcha-color-danger-alpha);
+        border-color: var(--matcha-color-danger);
 
         &::before {
             background: linear-gradient(45deg,
-                transparent 25%, getRedAlpha($theme) 25%, getRedAlpha($theme) 50%,
-                transparent 50%, transparent 75%, getRedAlpha($theme) 75%, getRedAlpha($theme));
+                transparent 25%, var(--matcha-color-danger-alpha) 25%, var(--matcha-color-danger-alpha) 50%,
+                transparent 50%, transparent 75%, var(--matcha-color-danger-alpha) 75%, var(--matcha-color-danger-alpha));
             background-size: 16px 16px;
             animation: drop-zone-animation 0.8s linear infinite;
             opacity: 0.6;
@@ -168,8 +167,8 @@
         overflow: hidden;
         transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
         user-select: none;
-        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);
 
         // State layer (Template A)
         &::before {
@@ -191,7 +190,7 @@
         &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
 
         &: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);
         }
 
@@ -203,8 +202,8 @@
             z-index: 1000;
             cursor: grabbing;
             position: relative;
-            box-shadow: 0 8px 25px getDisabledContrastAlpha($theme);
-            background-color: var(--matcha-color-surface, #{getSurface($theme)});
+            box-shadow: 0 8px 25px var(--matcha-color-text-muted);
+            background-color: var(--matcha-color-surface);
             transform: scale(1.02);
             opacity: 0.95;
 
@@ -216,7 +215,7 @@
                 border-radius: var(--matcha-radius-lg, 8px);
                 z-index: -1;
                 opacity: 0.1;
-                background: linear-gradient(45deg, getSurface($theme), getPrimary($theme));
+                background: linear-gradient(45deg, var(--matcha-color-surface), var(--matcha-color-primary));
                 animation: drag-glow 1s ease-in-out infinite alternate;
             }
         }
@@ -224,15 +223,15 @@
         &.matcha-drag-disabled {
             pointer-events: none;
             cursor: default;
-            color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
-            background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+            color: var(--matcha-color-disabled-fg);
+            background-color: var(--matcha-color-disabled-bg);
         }
 
         &.disabled-item {
             pointer-events: none;
             cursor: default;
-            color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
-            background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+            color: var(--matcha-color-disabled-fg);
+            background-color: var(--matcha-color-disabled-bg);
         }
     }
 
@@ -266,7 +265,7 @@
 
         .item-title {
             font-weight: 500;
-            color: var(--matcha-color-fg, #{getForeground($theme)});
+            color: var(--matcha-color-fg);
 
             &.completed {
                 text-decoration: line-through;
@@ -277,13 +276,13 @@
         .item-id {
             font-size: var(--matcha-text-body-sm, 12px);
             font-family: monospace;
-            color: getDisabledContrastAlpha($theme);
+            color: var(--matcha-color-text-muted);
         }
 
         small {
             font-size: var(--matcha-text-p-tiny, 11px);
             font-style: italic;
-            color: getForegroundAlpha($theme);
+            color: var(--matcha-color-fg-alpha);
         }
     }
 
@@ -317,7 +316,7 @@
         pointer-events: none;
         margin: 0;
         border-radius: var(--matcha-radius-sm, 2px);
-        background-color: var(--matcha-color-accent, #{getAccent($theme)});
+        background-color: var(--matcha-color-accent);
 
         &.active {
             opacity: 1;
@@ -346,19 +345,19 @@
             font-size: var(--matcha-text-body-md, 14px);
             border-radius: var(--matcha-radius-md, 4px);
             transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
-            color: getDisabledContrastAlpha($theme);
-            border-color: getForegroundAlpha($theme);
+            color: var(--matcha-color-text-muted);
+            border-color: var(--matcha-color-fg-alpha);
 
             &.can-accept {
-                color: getGreen($theme);
-                border-color: getGreen($theme);
-                background-color: getGreenAlpha($theme);
+                color: var(--matcha-color-success);
+                border-color: var(--matcha-color-success);
+                background-color: var(--matcha-color-success-alpha);
             }
 
             &.cannot-accept {
-                color: getRed($theme);
-                border-color: getRed($theme);
-                background-color: getRedAlpha($theme);
+                color: var(--matcha-color-danger);
+                border-color: var(--matcha-color-danger);
+                background-color: var(--matcha-color-danger-alpha);
                 animation: shake 0.5s ease-in-out;
             }
         }
@@ -370,12 +369,12 @@
 
     @media (prefers-contrast: high) {
         .matcha-drop-list-container.matcha-drop-list-receiving {
-            border-color: var(--matcha-color-fg, #{getForeground($theme)});
-            background-color: getForegroundAlpha($theme);
+            border-color: var(--matcha-color-fg);
+            background-color: var(--matcha-color-fg-alpha);
         }
 
         .matcha-drag-item.matcha-drag-dragging {
-            border: 2px solid var(--matcha-color-fg, #{getForeground($theme)});
+            border: 2px solid var(--matcha-color-fg);
         }
     }
 }

package/components/matcha-emoji.scss

@@ -59,11 +59,11 @@
 @mixin matcha-emoji-theme($theme) {
   .matcha-emoji--outline svg {
     fill: none;
-    stroke: var(--matcha-color-fg, #{getForeground($theme)});
+    stroke: var(--matcha-color-fg);
     stroke-width: 1.5;
   }
 
   .matcha-emoji--filled svg {
-    fill: var(--matcha-color-fg, #{getForeground($theme)});
+    fill: var(--matcha-color-fg);
   }
 }