@inchurch/matcha-theme 20.277.0 → 21.0.0

package/base/_reset.scss

@@ -1,13 +1,12 @@
-@mixin base-body-reset-theme($theme) {
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
-
+@mixin base-body-reset-theme($theme: ()) {
+    // theme-agnóstico em valor (var); fica per-classe de tema pelo & (pinta o
+    // elemento que carrega a classe). $theme vestigial (default ()).
     & {
         *, *:before, *:after {
             box-sizing: border-box;
         }
-        color: getForeground($theme);
-        background: map-get($background, background);
+        color: var(--matcha-color-fg);
+        background: var(--matcha-color-surface-bg);
     }
 }
 
@@ -20,60 +19,55 @@ How to use
 // Typography [Theme]
 // -----------------------------------------------------------------------------------------------------
 @mixin base-typography-theme($theme) {
-    $is-dark: map-get($theme, is-dark);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
-    $primary: map-get($theme, primary);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
+    // theme-agnóstico: tudo via var(--matcha-color-*) (runtime). $theme mantido só
+    // na assinatura por retrocompat dos call sites.
 
     a {
-        color: map-get($accent, default);
+        color: var(--matcha-color-accent);
     }
 
     pre > code{
-        color: getBlue($theme);
+        color: var(--matcha-color-info);
     }
     code {
         &:not(.highlight) {
-            background-color: map-get($background, card);
+            // Token em runtime (não getter compile-time): resolve no escopo de tema
+            // MAIS PRÓXIMO, então temas aninhados (ex.: preview light dentro de body
+            // dark) não colidem mais — antes geravam tarja escura sobre card claro.
+            // Dark é value-preserving (#1c1f26); light adota o surface-card do DSV3.
+            background-color: var(--matcha-color-surface-card);
         }
     }
 
     .changelog {
         .entry {
-            background-color: map-get($background, card);
+            background-color: var(--matcha-color-surface-card);
         }
     }
 
     .text-boxed {
-        @if ($is-dark) {
-            background-color: rgba(255, 255, 255, 0.12);
-            color: rgba(255, 255, 255, 0.54);
-        } @else {
-            background-color: rgba(0, 0, 0, 0.12);
-            color: rgba(0, 0, 0, 0.54);
-        }
+        background-color: var(--matcha-color-text-boxed-bg);
+        color: var(--matcha-color-text-boxed-fg);
     }
 
     .text-primary {
-        color: map-get($primary, default) !important;
+        color: var(--matcha-color-primary) !important;
     }
 
     .text-warn {
-        color: map-get($warn, default) !important;
+        color: var(--matcha-color-warn) !important;
     }
 
     .text-label {
-        color: map-get($foreground, label) !important;
+        color: var(--matcha-color-text-label) !important;
     }
 
     .text-placeholder {
-        color: map-get($foreground, placeholder) !important;
+        color: var(--matcha-color-text-placeholder) !important;
     }
 
     .text-basic {
-        color: map-get($foreground, foreground) !important;
+        color: var(--matcha-color-fg) !important;
     }
 
     // Changelog
@@ -82,25 +76,25 @@ How to use
             .groups {
                 .breaking-changes {
                     .title {
-                        background: map-get($background, red);
+                        background: var(--matcha-color-danger);
                     }
                 }
 
                 .new {
                     .title {
-                        background: map-get($background, green);
+                        background: var(--matcha-color-success);
                     }
                 }
 
                 .improved {
                     .title {
-                        background: map-get($background, purple);
+                        background: var(--matcha-prim-purple-500);
                     }
                 }
 
                 .fixed {
                     .title {
-                        background: map-get($background, blue);
+                        background: var(--matcha-color-info);
                     }
                 }
             }
@@ -110,22 +104,22 @@ How to use
     // Code
     code {
         &:not(.highlight) {
-            color: map-get($background, blue);
+            color: var(--matcha-color-info);
         }
     }
 
     // Mark
     mark {
-        background: map-get($background, yellow);
+        background: var(--matcha-color-warn);
     }
 
     // Message boxes
     .matcha-message-box,
     .matcha-msg-box,
     .message-box {
-        background-color: getPrimaryAlpha($theme);
-        border-left-color: map-get($primary, default);
-        color: map-get($foreground, foreground);
+        background-color: var(--matcha-color-primary-alpha);
+        border-left-color: var(--matcha-color-primary);
+        color: var(--matcha-color-fg);
 
         &.error,
         &.warning,
@@ -135,31 +129,31 @@ How to use
         &--warning,
         &--success,
         &--info {
-            color: map-get($foreground, foreground);
+            color: var(--matcha-color-fg);
         }
 
         &--error,
         &.error {
-            background-color: map-get($background, red-alpha);
-            border-left-color: map-get($background, red);
+            background-color: var(--matcha-color-danger-alpha);
+            border-left-color: var(--matcha-color-danger);
         }
 
         &--warning,
         &.warning {
-            background-color: map-get($background, yellow-alpha);
-            border-left-color: map-get($background, yellow);
+            background-color: var(--matcha-color-warn-alpha);
+            border-left-color: var(--matcha-color-warn);
         }
 
         &--success,
         &.success {
-            background-color: map-get($background, green-alpha);
-            border-left-color: map-get($background, green);
+            background-color: var(--matcha-color-success-alpha);
+            border-left-color: var(--matcha-color-success);
         }
 
         &--info,
         &.info {
-            background-color: map-get($background, blue-alpha);
-            border-left-color: map-get($background, blue);
+            background-color: var(--matcha-color-info-alpha);
+            border-left-color: var(--matcha-color-info);
         }
     }
 }

package/components/matcha-button-toggle.scss

@@ -2,19 +2,19 @@
 
     &:not([inactivetype]),
     &[inactivetype="solid"] {
-        @each $colorName, $colorFn in $color-functions {
+        @each $colorName in $color-functions {
             &[inactivecolor="#{'' + $colorName}"] {
                 .button-group {
 
                     button[matcha-button],
                     a[matcha-button] {
                         &:not([active]) {
-                            background: call(#{$colorFn}, $theme);
-                            color: call(#{$colorFn}Contrast, $theme);
+                            background: var(--matcha-color-#{$colorName});
+                            color: var(--matcha-color-#{$colorName}-contrast);
                             box-shadow: 0 0 0 0px inset;
 
                             .ripple {
-                                background: call(#{$colorFn}ContrastAlpha, $theme); // ok: legacy ripple color token
+                                background: var(--matcha-color-#{$colorName}-contrast-alpha); // ok: legacy ripple color token
                             }
                         }
                     }
@@ -40,7 +40,7 @@
 
 @mixin _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions) {
     &[inactivetype="basic"] {
-        @each $colorName, $colorFn in $color-functions {
+        @each $colorName in $color-functions {
             &[inactivecolor="#{'' + $colorName}"] {
                 .button-group {
 
@@ -48,11 +48,11 @@
                     a[matcha-button] {
                         &:not([active]) {
                             background: var(--matcha-color-surface);
-                            color: call(#{$colorFn}, $theme);
+                            color: var(--matcha-color-#{$colorName});
                             box-shadow: 0 0 0 0px inset;
 
                             .ripple {
-                                background: call(#{$colorFn}Alpha, $theme); // ok: legacy ripple color token
+                                background: var(--matcha-color-#{$colorName}-alpha); // ok: legacy ripple color token
                             }
                         }
                     }
@@ -81,7 +81,7 @@
 
         //disabled false
         &:not([disabled="true"]) {
-            @each $colorName, $colorFn in $color-functions {
+            @each $colorName in $color-functions {
                 &[inactivecolor="#{'' + $colorName}"] {
                     .button-group {
 
@@ -90,12 +90,12 @@
 
                             //botão não ativo
                             &:not([active]) {
-                                color: call(#{$colorFn}, $theme);
+                                color: var(--matcha-color-#{$colorName});
                                 background: transparent;
-                                box-shadow: 0 0 0 2px call(#{$colorFn}, $theme) inset;
+                                box-shadow: 0 0 0 2px var(--matcha-color-#{$colorName}) inset;
 
                                 .ripple {
-                                    background: call(#{$colorFn}Alpha, $theme); // ok: legacy ripple color token
+                                    background: var(--matcha-color-#{$colorName}-alpha); // ok: legacy ripple color token
                                 }
                             }
                         }
@@ -125,19 +125,19 @@
 
 @mixin _colorize-inactive-type-alpha-button-toggle-item($theme, $color-functions) {
     &[inactivetype="alpha"] {
-        @each $colorName, $colorFn in $color-functions {
+        @each $colorName in $color-functions {
             &[inactivecolor="#{'' + $colorName}"] {
                 .button-group {
 
                     button[matcha-button],
                     a[matcha-button] {
                         &:not([active]) {
-                            color: call(#{$colorFn}, $theme);
-                            background: call(#{$colorFn}Alpha, $theme);
+                            color: var(--matcha-color-#{$colorName});
+                            background: var(--matcha-color-#{$colorName}-alpha);
                             box-shadow: 0 0 0 0px;
 
                             .ripple {
-                                background: call(#{$colorFn}ContrastAlpha, $theme) // ok: legacy ripple color token
+                                background: var(--matcha-color-#{$colorName}-contrast-alpha) // ok: legacy ripple color token
                             }
                         }
                     }
@@ -166,7 +166,7 @@
 @mixin _colorize-inactive-type-link-button-toggle-item($theme, $color-functions) {
 
     &[inactivetype="link"] {
-        @each $colorName, $colorFn in $color-functions {
+        @each $colorName in $color-functions {
             &[inactivecolor="#{'' + $colorName}"] {
                 .button-group {
 
@@ -175,11 +175,11 @@
                         &:not([active]) {
 
                             background: transparent;
-                            color: call(#{$colorFn}, $theme);
+                            color: var(--matcha-color-#{$colorName});
                             box-shadow: 0 0 0 0px;
 
                             .ripple {
-                                background: call(#{$colorFn}Alpha, $theme); // ok: legacy ripple color token
+                                background: var(--matcha-color-#{$colorName}-alpha); // ok: legacy ripple color token
                             }
 
                         }
@@ -210,34 +210,10 @@
 
 
 @mixin matcha-button-toggle($theme) {
-    $color-functions: (
-        red: getRed,
-        pink: getPink,
-        purple: getPurple,
-        deep-purple: getDeepPurple,
-        indigo: getIndigo,
-        blue: getBlue,
-        light-blue: getLightBlue,
-        cyan: getCyan,
-        teal: getTeal,
-        green: getGreen,
-        light-green: getLightGreen,
-        lime: getLime,
-        yellow: getYellow,
-        amber: getAmber,
-        orange: getOrange,
-        deep-orange: getDeepOrange,
-        brown: getBrown,
-        grey: getGrey,
-        blue-grey: getBlueGrey,
-        primary: getPrimary,
-        accent: getAccent,
-        success: getSuccess,
-        warn: getWarn,
-        danger: getDanger,
-        info: getInfo,
-        disabled: getDisabled,
-    );
+    // Nomes de cor (semânticas + paleta). Cores vêm de var(--matcha-color-*) — sem getRed/$theme.
+    $color-functions: "red", "pink", "purple", "deep-purple", "indigo", "blue", "light-blue", "cyan", "teal",
+        "green", "light-green", "lime", "yellow", "amber", "orange", "deep-orange", "brown", "grey", "blue-grey",
+        "primary", "accent", "success", "warn", "danger", "info", "disabled";
 
 matcha-button-toggle {
     display: flex;

package/components/matcha-chip.scss

@@ -59,11 +59,14 @@ matcha-chip {
         }
     }
 
-    // ── Selected (On) — bg + border accent, texto preto ──
+    // ── Selected (On) — bg + border accent, texto contrastante ──
+    // accent-text-on é theme-aware (branco no light onde accent=#009400 escuro;
+    // preto no dark onde accent=#A8D94E claro) — mesmo token de button/stepper/tabs.
+    // accent-contrast (legado, sempre preto) fica só de fallback.
     &[selected] {
         background:   var(--matcha-color-accent, #A8D94E);
         border-color: var(--matcha-color-accent, #A8D94E);
-        color:        var(--matcha-color-accent-contrast, rgba(0, 0, 0, 0.87));
+        color:        var(--matcha-color-accent-text-on, var(--matcha-color-accent-contrast, rgba(0, 0, 0, 0.87)));
 
         // On interactive — Hover (overlay rgba(0,0,0,0.2) sobre accent) ──
         &[interactive]:not([disabled]):not(.matcha-chip-disabled):hover {
@@ -113,7 +116,7 @@ matcha-chip {
 }
 
 matcha-chip[selected] .matcha-chip-leading {
-    color: var(--matcha-color-accent-contrast, rgba(0, 0, 0, 0.87));
+    color: var(--matcha-color-accent-text-on, var(--matcha-color-accent-contrast, rgba(0, 0, 0, 0.87)));
 }
 
 matcha-chip[disabled] .matcha-chip-leading,
@@ -205,38 +208,30 @@ matcha-chip .matcha-chip-remove [class*=" i-matcha-"] {
 // ============================================================================
 
 @mixin matcha-chip-theme($theme) {
-    $chip-colors: (
-        primary: (getPrimary, getPrimaryContrast),
-        success: (getSuccess, getSuccessContrast),
-        warn:    (getWarn,    getWarnContrast),
-        danger:  (getDanger,  getDangerContrast),
-        info:    (getInfo,    getInfoContrast),
-    );
+    // Cores semânticas além de accent — var(--matcha-color-*), sem getters/$theme.
+    $chip-colors: primary, success, warn, danger, info;
 
     matcha-chip {
-        @each $name, $fns in $chip-colors {
-            $fn:         nth($fns, 1);
-            $fnContrast: nth($fns, 2);
-
+        @each $name in $chip-colors {
             &[color="#{$name}"] {
                 // Off na cor: outline + texto na cor (visualmente quente)
-                border-color: call(get-function(#{$fn}), $theme);
-                color:        call(get-function(#{$fn}), $theme);
+                border-color: var(--matcha-color-#{$name});
+                color:        var(--matcha-color-#{$name});
 
                 .matcha-chip-leading {
-                    color: call(get-function(#{$fn}), $theme);
+                    color: var(--matcha-color-#{$name});
                 }
 
                 // Selected na cor: filled
                 &[selected],
                 // Explicit variant=filled — sem precisar [selected] (status estático)
                 &[variant="filled"] {
-                    background-color: call(get-function(#{$fn}), $theme);
-                    border-color:     call(get-function(#{$fn}), $theme);
-                    color:            call(get-function(#{$fnContrast}), $theme);
+                    background-color: var(--matcha-color-#{$name});
+                    border-color:     var(--matcha-color-#{$name});
+                    color:            var(--matcha-color-#{$name}-contrast);
 
                     .matcha-chip-leading {
-                        color: call(get-function(#{$fnContrast}), $theme);
+                        color: var(--matcha-color-#{$name}-contrast);
                     }
                 }
 
@@ -246,10 +241,10 @@ matcha-chip .matcha-chip-remove [class*=" i-matcha-"] {
                 &[variant="filled-alpha"] {
                     background-color: var(--matcha-color-feedback-#{$name}-alpha, var(--matcha-color-#{$name}-alpha));
                     border-color:     transparent;
-                    color:            call(get-function(#{$fn}), $theme);
+                    color:            var(--matcha-color-#{$name});
 
                     .matcha-chip-leading {
-                        color: call(get-function(#{$fn}), $theme);
+                        color: var(--matcha-color-#{$name});
                     }
                 }
             }

package/components/matcha-file-uploader.scss

@@ -133,14 +133,6 @@
   width: 100%;
 }
 
-// Ação secundária (Gabarito, Tirar foto, etc.) — centrada abaixo do box
-.matcha-file-uploader-secondary {
-  display: flex;
-  justify-content: center;
-
-  &:empty { display: none; } // sem slot projetado → não ocupa espaço
-}
-
 // ── Dropzone box (Estado=Dropzone — Figma 16152:209) — a zona INTEIRA é o alvo
 .matcha-file-uploader-dropzone {
   display: flex;
@@ -161,6 +153,15 @@
   }
 }
 
+// layout="card": dropzone vazio compartilha a proporção do card preenchido
+// (aspect-ratio aplicado inline via previewRatio) pra empty e filled terem a
+// MESMA altura lado a lado. Sem isso, vazio é dimensionado por padding/conteúdo
+// e preenchido por aspect-ratio → alturas divergentes.
+.matcha-file-uploader-dropzone--card {
+  width: 100%;
+  overflow: hidden;
+}
+
 // Icon pill (bg interaction/disabled-bg + padding 40h/16v · icon 24×24)
 .matcha-file-uploader-dropzone__icon-pill {
   display: inline-flex;
@@ -370,7 +371,8 @@
 .matcha-file-uploader-card {
   position: relative;
   width: 100%;
-  margin-top: var(--matcha-space-100, 8px);
+  // SEM margin-top: o card preenchido tem que alinhar o topo com o dropzone
+  // vazio quando lado a lado (layout card). margin-top desalinhava em 8px.
   border: var(--matcha-border-hairline, 1px) solid transparent;
   border-radius: var(--matcha-radius-lg, 8px);
   overflow: hidden;
@@ -390,13 +392,19 @@
   right: var(--matcha-space-100, 8px);
   display: flex;
   gap: var(--matcha-space-100, 8px);
-  opacity: 0;
+  opacity: 1; // persistente — descobrível e operável em touch (canon 20252:2253)
   transition: opacity var(--matcha-duration-instant, 80ms) linear;
 }
 
-.matcha-file-uploader-card:hover .matcha-file-uploader-card__actions,
-.matcha-file-uploader-card:focus-within .matcha-file-uploader-card__actions {
-  opacity: 1;
+// Em dispositivos com hover, atenua no resting e destaca no hover/foco — mantém
+// a tela limpa sem esconder a affordance onde não há hover (touch/totem).
+@media (hover: hover) {
+  .matcha-file-uploader-card__actions { opacity: 0.72; }
+
+  .matcha-file-uploader-card:hover .matcha-file-uploader-card__actions,
+  .matcha-file-uploader-card:focus-within .matcha-file-uploader-card__actions {
+    opacity: 1;
+  }
 }
 
 .matcha-file-uploader-card__action {

package/components/matcha-page-builder.scss

@@ -1,6 +1,17 @@
 // =============================================================================
 // matcha-page-builder — Estilos globais para o editor GrapesJS
 // Extraído do index-cdn.html e adaptado como mixin de tema.
+// -----------------------------------------------------------------------------
+// ⚠️ CSS VENDORIZADO (GrapeJS + color-picker Spectrum). A TEMATIZAÇÃO é feita
+//    pelo BRIDGE de vars --gjs-* → var(--matcha-color-*) logo abaixo: o GrapeJS
+//    re-colore sua chrome por essas vars. Os hex HARDCODED restantes são
+//    FUNCIONAIS do vendor e NÃO devem virar token:
+//      • Spectrum color-picker (.sp-*, ~L3113-3769): swatches + barra de matiz
+//        (linear-gradient #ff0000→#ffff00→… É o arco-íris do seletor de cor);
+//      • syntax-highlight / cores utilitárias do editor (#090/#d44/#292/…);
+//      • gradientes e alphas de overlay.
+//    Converter esses para tokens QUEBRA o editor. Corrige a leitura ingênua de
+//    matcha-page-builder-001 ("220 hex p/ migrar") — a integração de tema é o bridge.
 // =============================================================================
 
 @mixin matcha-page-builder-theme($theme) {
@@ -30,8 +41,8 @@
     --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;
+    --gjs-color-highlight: var(--matcha-color-primary); // era #71b7f1 — realce/seleção do editor → papel primary
+    --gjs-color-warn: var(--matcha-color-warn);         // era #ffca6f — aviso do editor → papel warn
     --gjs-handle-margin: -5px;
     --gjs-light-border: rgba(255, 255, 255, 0.05);
     --gjs-arrow-color: rgba(255, 255, 255, 0.7);

package/components/matcha-progress-bar.scss

@@ -28,7 +28,7 @@
         // Bind por color attr → CSS var (mesma estratégia do slider/spinner)
         @each $name, $fn in $semantic-colors {
             &[color="#{$name}"] {
-                --matcha-progress-fill: var(--matcha-color-#{$name}, #{call($fn, $theme)});
+                --matcha-progress-fill: var(--matcha-color-#{$name});
             }
         }
     }
@@ -37,7 +37,7 @@
     matcha-progress-bar[type="multi-level"] {
         @each $name, $fn in $semantic-colors {
             .progress-segment-color[data-segment-color="#{$name}"] {
-                background-color: var(--matcha-color-#{$name}, #{call($fn, $theme)});
+                background-color: var(--matcha-color-#{$name});
             }
         }
     }

package/components/matcha-select-multiple.scss

@@ -1,5 +1,5 @@
 @mixin matcha-select-multiple-theme($theme) {
-    $foreground: map-get($theme, foreground);
+    // theme-agnóstico: cor via var(--matcha-color-*). $theme mantido só na assinatura.
 
     // O matcha-select-multiple reusa as classes .matcha-select-* do matcha-select
     // (.matcha-select-container, .matcha-select-trigger, .matcha-select-value, etc.),
@@ -29,7 +29,7 @@
             border: 0;
             outline: none;
             background: transparent;
-            color: map-get($foreground, text);
+            color: var(--matcha-color-text-primary);
             font-size: 14px;
             line-height: 20px;
 

package/components/matcha-slide-toggle.scss

@@ -199,7 +199,7 @@ matcha-slide-toggle label {
         content:        '';
         position:       absolute;
         inset:          0;
-        background:     currentColor; // usa color: getXxx($theme) definido no mixin por variante
+        background:     currentColor; // herda o color (var(--matcha-color-*)) definido por variante
         opacity:        0;
         pointer-events: none;
         transition:     opacity var(--matcha-duration-instant, 80ms) linear;

package/components/matcha-slider.scss

@@ -30,7 +30,7 @@
     // Bind por data-color → CSS var pra cores serem trocáveis sem repetir regras
     @each $name, $fn in $semantic-colors {
       &[data-color="#{$name}"] {
-        --matcha-slider-fill: var(--matcha-color-#{$name}, #{call($fn, $theme)});
+        --matcha-slider-fill: var(--matcha-color-#{$name});
       }
     }
 

package/components/matcha-spinner.scss

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

package/components/matcha-table.scss

@@ -66,8 +66,8 @@
     // em dark e fica imperceptível). Calibrado pra delta visível mesmo sobre stripe.
     // CSS custom property values são TEXTO LITERAL pro Sass — fn calls Sass
     // dentro NÃO são avaliadas. Precisa interpolação `#{}` pra forçar Sass a
-    // evaluar `getForeground($theme)` ANTES do output. Sem isso, o valor sai
-    // literal no bundle (ex: `rgba(getForeground($theme), 0.12)`) e o browser
+    // evaluar `var(--matcha-color-fg)` ANTES do output. Sem isso, o valor sai
+    // literal no bundle (ex: `rgba(var(--matcha-color-fg), 0.12)`) e o browser
     // descarta como invalid CSS (= chevron invisível, hover sem cor, etc).
     --matcha-table-row-bg-hover:             rgba(var(--matcha-color-fg), 0.12);
     --matcha-table-row-bg-hover-striped:     rgba(var(--matcha-color-fg), 0.18);