@inchurch/matcha-theme 20.0.11 → 20.277.0

package/components/matcha-drawer.scss

@@ -16,6 +16,17 @@
     to   { opacity: 0; }
 }
 
+// Shake feedback — disparado quando ESC/backdrop click são bloqueados por
+// disableClose=true. Sinaliza visualmente que a ação foi capturada mas
+// bloqueada (em vez de silent fail).
+@keyframes matcha-drawer-shake {
+    0%, 100% { transform: translate3d(0, 0, 0); }
+    20%      { transform: translate3d(-8px, 0, 0); }
+    40%      { transform: translate3d(8px, 0, 0); }
+    60%      { transform: translate3d(-4px, 0, 0); }
+    80%      { transform: translate3d(4px, 0, 0); }
+}
+
 @media (prefers-reduced-motion: reduce) {
     matcha-drawer,
     .matcha-drawer-backdrop,
@@ -25,12 +36,52 @@
     }
 }
 
+// ── Forced colors (Windows High Contrast) ──
+// rgba/blur/shadow somem; usar Canvas/CanvasText/SelectedItem.
+@media (forced-colors: active) {
+    matcha-drawer {
+        border: 1px solid CanvasText !important;
+        background: Canvas !important;
+        box-shadow: none !important;
+    }
+
+    .matcha-drawer-backdrop {
+        background: rgba(0, 0, 0, 0.7) !important;
+        backdrop-filter: none !important;
+    }
+
+    matcha-drawer:focus-visible {
+        outline: 2px solid CanvasText !important;
+    }
+}
+
+// ── Reduced transparency ──
+// Backdrop blur 4px → solid 85% pra usuários com dificuldade de ler sobre blur.
+@media (prefers-reduced-transparency: reduce) {
+    .matcha-drawer-backdrop {
+        background: rgba(0, 0, 0, 0.85) !important;
+        backdrop-filter: none !important;
+    }
+}
+
+// ── Print ──
+// Drawer + chrome flutuante somem em impressão.
+@media print {
+    matcha-drawer,
+    .matcha-drawer-backdrop {
+        display: none !important;
+    }
+
+    matcha-drawer-content {
+        margin: 0 !important;
+    }
+}
+
 // =============================================================================
 // Theme mixin
 // =============================================================================
 
 @mixin matcha-drawer-theme($theme) {
-    $is-dark: map.get($theme, is-dark);
 
     // ── Container ──
     matcha-drawer-container {
@@ -40,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 ──
@@ -77,39 +128,51 @@
 
     // ── Drawer ──
     matcha-drawer {
-        display: block;
+        display: flex;
+        flex-direction: column;
         position: absolute;
         top: 0;
         bottom: 0;
+        // Default position=start ancora à esquerda. End/bottom override via .matcha-drawer-end/.matcha-drawer-bottom.
+        // Sem o explícito, layouts que usam o drawer dentro de containers flexíveis renderizam fora da posição esperada.
+        left: 0;
         z-index: 10;
         outline: 0;
         box-sizing: border-box;
-        overflow-y: auto;
-        overflow-x: hidden;
+        // Drawer raiz não scrolla — só o body slot scrolla (overflow-y:auto).
+        // Header/footer são flex-shrink:0 e ficam fixos.
+        overflow: hidden;
+        // Defensivo: drawer nunca extrapola viewport mesmo com [width] absurdo.
+        max-width: 100vw;
         transform: translate3d(-100%, 0, 0);
         visibility: hidden;
+        // Width inclusa pra animar resize dinâmico (responsive token, [width] bound).
         transition: transform var(--matcha-duration-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1),
-                    visibility var(--matcha-duration-normal, 200ms) ease;
-        background-color: var(--matcha-color-surface, #{getSurface($theme)});
-        color: var(--matcha-color-fg, #{getForeground($theme)});
+                    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);
+        color: var(--matcha-color-fg);
         pointer-events: auto;
 
-        // Shadow level 3 (modals, drawers)
-        box-shadow: var(--matcha-shadow-3, #{if($is-dark, $shadow-3-dark, $shadow-3-light)});
+        // Shadow inline (3 stacked) — Figma DSV3 spec exato pro drawer.
+        // Não usa --matcha-shadow-3 token porque o Figma drawer também usa inline
+        // (não bound a um effect style). Side/push modes removem via override.
+        box-shadow:
+            0 0 1px rgba(0, 0, 0, 0.08),
+            0 4px 16px rgba(0, 0, 0, 0.12),
+            0 16px 48px rgba(0, 0, 0, 0.16);
 
-        @if $is-dark {
-            border-right: var(--matcha-border-hairline, 1px) solid rgba(255, 255, 255, 0.06);
-        }
+        // Borda da edge só aparece no dark (var = 0/transparent no light, sem mudar layout).
+        border-right: var(--matcha-drawer-border);
 
-        // Position end (right)
+        // Position end (right) — overrides left:0 default
         &.matcha-drawer-end {
+            left: auto;
             right: 0;
             transform: translate3d(100%, 0, 0);
 
-            @if $is-dark {
-                border-right: none;
-                border-left: var(--matcha-border-hairline, 1px) solid rgba(255, 255, 255, 0.06);
-            }
+            border-right: 0 solid transparent;
+            border-left: var(--matcha-drawer-border);
         }
 
         // Position bottom (bottom sheet)
@@ -119,28 +182,61 @@
             right: 0;
             bottom: 0;
             width: 100%;
-            max-height: 90vh;
+            // 90% do container (relative ao matcha-drawer-container parent).
+            // Em produção (container = viewport via 100vh), == 90vh efetivo.
+            // Em playground/embed (container 360px), == 324px e respeita o frame.
+            // min() com fallback 90vh garante comportamento se parent for auto.
+            max-height: min(90vh, 90%);
             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 rgba(255, 255, 255, 0.06);
-            } @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.
+            .matcha-drawer__slot--footer {
+                padding-block-end: max(var(--drawer-pad-y), env(safe-area-inset-bottom, var(--drawer-pad-y)));
             }
+        }
+
+        // ── Drag handle (bottom sheet drag-to-dismiss) ──
+        // Real elemento (não pseudo) pra capturar pointer events. Renderiza só
+        // em position=bottom. 32×4 visual + 32×24 hit area via pad pra touch.
+        .matcha-drawer__handle {
+            display: none;
+            flex-shrink: 0;
+            width: 100%;
+            padding: var(--matcha-space-100, 8px) 0;
+            cursor: grab;
+            touch-action: none; // bloqueia scroll-pan vertical default no handle
+            user-select: none;
 
-            // Drag handle
             &::before {
                 content: '';
                 display: block;
                 width: 32px;
                 height: 4px;
-                margin: var(--matcha-space-100, 8px) auto;
+                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;
             }
+
+            &:active {
+                cursor: grabbing;
+
+                &::before { opacity: 0.5; }
+            }
+        }
+
+        &.matcha-drawer-bottom .matcha-drawer__handle {
+            display: block;
+        }
+
+        // Drag em andamento — desabilita transition pra seguir o dedo 1:1.
+        &.matcha-drawer--dragging {
+            transition: none !important;
         }
 
         // Opened state
@@ -154,68 +250,113 @@
             z-index: 15;
         }
 
-        // Mode: side — fixed, no shadow, border only
+        // 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-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-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
+        // Mode: push — pushes content, border only.
         &.matcha-drawer-push {
-            border-right: var(--matcha-border-hairline, 1px) solid 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-border, #{getGrey($theme)});
+                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border));
             }
         }
 
-        // Inner container
-        .matcha-drawer-inner-container {
-            width: 100%;
-            height: 100%;
+        // Shake state — feedback visual quando ESC/backdrop bloqueados por disableClose.
+        // Animation roda 400ms, sobrepondo o transform: translate3d(0,0,0) do .matcha-drawer-opened.
+        // Após terminar, transform volta pro estado .matcha-drawer-opened normal.
+        &.matcha-drawer-shake {
+            animation: matcha-drawer-shake 400ms ease-in-out;
+        }
+
+        // ── Slot architecture (header / body / footer) ──
+        //
+        // CSS vars (consumer override sem !important):
+        //   --drawer-pad-x / --drawer-pad-y → padding uniforme de cada slot
+        //   --drawer-divider                → border entre slots (default mostra)
+        //
+        // Cada slot tem padding UNIFORME (não asymmetric). Header e footer
+        // ganham border-bottom/top respectivamente — separação visual clara
+        // sem depender de gaps assimétricos. Pattern canônico Material/Antd.
+        //
+        // Defaults simétricos 20/20 (calibração 2026-05-08): alinha com card md
+        // e segue padrão DS moderno (Material 16, shadcn 24, Notion 16 — 20 é o
+        // sweet spot). Antes era 24/20 assimétrico — quirky e sem motivo claro.
+        --drawer-pad-x: var(--matcha-space-250, 20px);
+        --drawer-pad-y: var(--matcha-space-250, 20px);
+        --drawer-divider: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
+
+        .matcha-drawer__slot {
             display: flex;
             flex-direction: column;
+            min-width: 0;
+
+            // Hide vazio (Chrome 105+/Safari 15.4+/FF 121+).
+            &:not(:has(*)) {
+                display: none;
+            }
+        }
+
+        // Header — fixo no topo (não scrolla com body). Border-bottom separa do body.
+        // Elemento projetado pelo consumer recebe flex row via `> *`.
+        .matcha-drawer__slot--header {
+            flex: 0 0 auto;
+            padding: var(--drawer-pad-y) var(--drawer-pad-x);
+            border-bottom: var(--drawer-divider);
+            color: var(--matcha-color-fg);
+
+            > * {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+                gap: var(--matcha-space-150, 12px);
+                width: 100%;
+                min-width: 0;
+            }
+        }
+
+        // Body — cresce e scrolla quando overflow.
+        .matcha-drawer__slot--body {
+            flex: 1 1 auto;
+            overflow-y: auto;
+            overflow-x: hidden;
+            padding: var(--drawer-pad-y) var(--drawer-pad-x);
+            color: var(--matcha-color-fg);
             -webkit-overflow-scrolling: touch;
+            gap: var(--matcha-space-150, 12px);
         }
-    }
 
-    // ── Drawer header ──
-    .matcha-drawer-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--matcha-space-150, 12px);
-        padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
-        flex-shrink: 0;
-        color: var(--matcha-color-fg, #{getForeground($theme)});
-    }
+        // Footer — fixo no bottom. Border-top separa do body.
+        .matcha-drawer__slot--footer {
+            flex: 0 0 auto;
+            padding: var(--drawer-pad-y) var(--drawer-pad-x);
+            border-top: var(--drawer-divider);
 
-    // ── Drawer content ──
-    .matcha-drawer-content-area {
-        flex: 1;
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding: var(--matcha-space-300, 24px);
-        color: var(--matcha-color-fg, #{getForeground($theme)});
+            > * {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: flex-end;
+                gap: var(--matcha-space-150, 12px);
+                width: 100%;
+                min-width: 0;
+                flex-wrap: wrap;
+            }
+        }
     }
 
-    // ── Drawer footer ──
-    .matcha-drawer-footer {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        gap: var(--matcha-space-150, 12px);
-        padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
-        flex-shrink: 0;
-    }
 
     // ── Drawer content (main page) ──
     matcha-drawer-content {
@@ -229,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-image.scss

@@ -0,0 +1,14 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-drop-image — Estilos completos vivem no próprio componente
+// (drop-image.component.scss com ViewEncapsulation.None).
+//
+// Esse arquivo mantém apenas o mixin no-op pra preservar a chamada @include
+// no main.scss sem quebrar. Quando o componente DSV3 amadurecer e precisar de
+// theme-specific styling (light/dark sass-side), retornar aqui.
+// =============================================================================
+
+@mixin matcha-drop-image-theme($theme) {
+  // No-op — estilos no componente.
+}

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,13 +107,54 @@
         }
 
         &.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;
         }
     }
 
+    // =============================================================================
+    // DROP ZONE (matchaDropZone directive — reparenting target)
+    // =============================================================================
+
+    .matcha-drop-zone-cannot-accept {
+        border: 2px dashed var(--matcha-color-danger) !important;
+        border-radius: 8px;
+        background-color: var(--matcha-color-danger-alpha);
+        cursor: not-allowed;
+        transition: background-color 0.15s linear, border-color 0.15s linear;
+    }
+
+    // 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: var(--matcha-color-danger-alpha);
+        border-color: var(--matcha-color-danger);
+
+        &::before {
+            background: linear-gradient(45deg,
+                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;
+        }
+    }
+
+    // =============================================================================
+    // GHOST CLONE (criado dinamicamente no body durante o drag)
+    // =============================================================================
+
+    .matcha-drag-ghost {
+        pointer-events: none;
+        opacity: 0.85;
+        z-index: 9999;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+        border-radius: var(--matcha-radius-md, 4px);
+        will-change: transform;
+    }
+
     // =============================================================================
     // ITENS ARRASTÁVEIS — Template A
     // =============================================================================
@@ -127,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 {
@@ -150,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);
         }
 
@@ -162,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;
 
@@ -175,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;
             }
         }
@@ -183,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);
         }
     }
 
@@ -225,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;
@@ -236,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-caption, 11px);
+            font-size: var(--matcha-text-p-tiny, 11px);
             font-style: italic;
-            color: getForegroundAlpha($theme);
+            color: var(--matcha-color-fg-alpha);
         }
     }
 
@@ -276,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;
@@ -305,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;
             }
         }
@@ -329,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);
         }
     }
 }