@inchurch/matcha-theme 20.278.0 → 21.1.0

package/abstracts/_colors.scss

@@ -1,323 +1,147 @@
-// Saturation Levels
-$saturationLevels: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
-
-// Hues Palette Colors
-$index: 0;
-
-// -------------------------------------------------------------------------------------------------------------------
-// @ Text color levels generator
-// -------------------------------------------------------------------------------------------------------------------
-@mixin _generate-text-color-levels($classes, $contrast) {
-    @if ($contrast =="dark") {
-        #{$classes} {
-
-            &.secondary-text,
-            .secondary-text {
-                color: rgba(0, 0, 0, 0.54) !important;
-            }
-
-            &.hint-text,
-            .hint-text,
-            &.disabled-text,
-            .disabled-text {
-                color: rgba(0, 0, 0, 0.38) !important;
-            }
-
-            &.divider,
-            .divider {
-                color: rgba(0, 0, 0, 0.12) !important;
-            }
-        }
-    }
-
-    @else {
-        #{$classes} {
-
-            &.secondary-text,
-            .secondary-text {
-                color: rgba(255, 255, 255, 0.7) !important;
-            }
-
-            &.hint-text,
-            .hint-text,
-            &.disabled-text,
-            .disabled-text {
-                color: rgba(255, 255, 255, 0.5) !important;
-            }
-
-            &.divider,
-            .divider {
-                color: rgba(255, 255, 255, 0.12) !important;
-            }
-        }
-    }
-}
-
-// -------------------------------------------------------------------------------------------------------------------
-// @ Static color classes generator
-// -------------------------------------------------------------------------------------------------------------------
-@mixin _generate-static-color-classes($colorName, $color, $contrastColor, $saturation) {
-    $colorSelector: unquote(".#{$colorName}#{$saturation}");
-
-    #{$colorSelector} {
-        background-color: $color !important;
-        color: $contrastColor !important;
-
-        &[disabled] {
-            background-color: rgba($color, 0.12) !important;
-            color: rgba($contrastColor, 0.26) !important;
-        }
-    }
-
-    #{$colorSelector}-bg {
-        background-color: $color !important;
-    }
-
-    #{$colorSelector}-fg {
-        color: $color !important;
-    }
-
-    @if ($saturation =="-500") {
-        $colorSelectorDefault: unquote(".#{$colorName}");
-
-        #{$colorSelectorDefault}-bg {
-            background-color: $color !important;
-        }
-
-        #{$colorSelectorDefault}-fg {
-            color: $color !important;
-        }
-    }
-}
-
-@mixin colors-classes-static($theme) {
-    $palettes: getAllPalettes($theme);
-    $light-contrasting-classes: (
-    );
-$dark-contrasting-classes: (
-);
-
-@each $paletteName, $palette in $palettes {
-    // $contrasts: map-get($red, "contrast");
-    // $contrasts =  all contrast colors of $red palette
-    $contrasts: map-get($palette, "contrast");
-
-    @each $saturation in $saturationLevels {
-        // $color: map-get($red, 500)
-        // $contrast: map-get($contrasts, 500);  500 contrast color of $red palette
-        $color: map-get($palette, $saturation);
-        $contrast: map-get($contrasts, $saturation);
-
-        @if ($color !=null and $contrast !=null) {
-            @include _generate-static-color-classes($paletteName, $color, $contrast, "-#{$saturation}");
-
-            // If the contrast color is dark
-            @if (rgba(black, 1)==rgba($contrast, 1)) {
-                $dark-contrasting-classes: append($dark-contrasting-classes,
-                        unquote(".#{$paletteName}-#{$saturation}"),
-                        "comma"
-                    );
-            }
-
-            // if the contrast color is light
-            @else {
-                $light-contrasting-classes: append($light-contrasting-classes,
-                        unquote(".#{$paletteName}-#{$saturation}"),
-                        "comma"
-                    );
+// Shade-classes SÓ das primitivas do Figma ($matcha-primitives — gerado de
+// tokens/matcha/primitives/colors.json pelo gen-primitives). Cada classe consome
+// var(--matcha-prim-{família}-{shade}); o contraste é computado em build a partir
+// do hex da primitiva (mode-independent — primitiva é valor fixo). Famílias não-paleta
+// (common/brand/neutral) ficam de fora. Substitui a antiga matriz Material 21×14
+// (getAllPalettes/$theme), que gerava "todas as cores" — agora só o que existe no Figma.
+@mixin colors-classes-static($theme: ()) {
+    // theme-agnóstico: classes consomem var(--matcha-prim-*). $theme vestigial (default ()).
+    $-skip: ("common", "brand", "neutral");
+
+    @each $family, $shades in $matcha-primitives {
+        @if not index($-skip, $family) {
+            @each $shade, $hex in $shades {
+                .#{$family}-#{$shade} {
+                    background-color: var(--matcha-prim-#{$family}-#{$shade}) !important;
+                    color: matcha-contrast-on($hex) !important;
+                }
+
+                .#{$family}-#{$shade}-bg {
+                    background-color: var(--matcha-prim-#{$family}-#{$shade}) !important;
+                }
+
+                .#{$family}-#{$shade}-fg {
+                    color: var(--matcha-prim-#{$family}-#{$shade}) !important;
+                }
             }
         }
     }
 }
 
-// Generate contrasting colors
-@include _generate-text-color-levels($dark-contrasting-classes, "dark");
-@include _generate-text-color-levels($light-contrasting-classes, "light");
-}
-
 // -------------------------------------------------------------------------------------------------------------------
 // @ Dynamic color classes generator
 // -------------------------------------------------------------------------------------------------------------------
-@mixin colors-classes-dynamic($theme) {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $danger: map-get($theme, danger);
-    $success: map-get($theme, success);
-    $warn: map-get($theme, warn);
-    $info: map-get($theme, info);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
-
-    $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,
-        danger: getDanger,
-        warn: getWarn,
-        success: getSuccess,
-        info: getInfo,
-        disabled: getDisabled,
-    );
+@mixin colors-classes-dynamic($theme: ()) {
+    // theme-agnóstico: classes consomem var(--matcha-color-*). $theme vestigial (default ()).
+    // Inclui colors-classes-static (linha abaixo) — app.theme chama SÓ este (sem dup).
+
+    // Nomes de cor que viram utility classes. TODOS (semânticas + paleta) consomem
+    // var(--matcha-color-*). As cores de paleta agora têm tokens emitidos no tema
+    // (ver _emit-tokens — base/alpha/contrast mode-flipped), então o caminho
+    // compile-time getRed($theme)/Material foi eliminado aqui. Value-preserving.
+    $color-names: "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", "danger", "warn", "success", "info", "disabled";
 
 @include colors-classes-static($theme);
 
-.color-unset {
-    color: map-get($foreground, foreground);
-
-    .ripple {
-        background: map-get($foreground, foreground);
-    }
-}
-
-@each $colorName, $colorFn in $color-functions {
-    // When a DS token exists for this semantic color (accent, primary, danger, etc.),
-    // utility classes consume var(--matcha-color-*) so Figma changes propagate at runtime.
-    // Palette colors (red, blue, green, etc.) keep their static values.
-    $is-semantic: index((primary, accent, danger, warn, success, info, disabled), $colorName) != null;
-
+@each $colorName in $color-names {
     .background-#{$colorName}-alpha {
-        @if $is-semantic {
-            background: var(--matcha-color-#{$colorName}-alpha, #{call(#{$colorFn}Alpha, $theme)});
-        } @else {
-            background: call(#{$colorFn}Alpha, $theme);
-        }
+        background: var(--matcha-color-#{$colorName}-alpha);
     }
 
     .#{$colorName} .ripple {
-        background: call(#{$colorFn}Alpha, $theme)
+        background: var(--matcha-color-#{$colorName}-alpha);
     }
 
     .background-#{$colorName} {
-        @if $is-semantic {
-            background: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
-        } @else {
-            background: call(#{$colorFn}, $theme);
-        }
+        background: var(--matcha-color-#{$colorName});
     }
 
     .border-color-#{$colorName} {
-        @if $is-semantic {
-            border-color: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
-        } @else {
-            border-color: call(#{$colorFn}, $theme);
-        }
+        border-color: var(--matcha-color-#{$colorName});
     }
 
     .color-#{$colorName} {
-        @if $is-semantic {
-            color: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)}) !important;
-        } @else {
-            color: call(#{$colorFn}, $theme) !important;
-        }
+        color: var(--matcha-color-#{$colorName}) !important;
     }
 
     .fill-#{$colorName} {
-        @if $is-semantic {
-            fill: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
-        } @else {
-            fill: call(#{$colorFn}, $theme);
-        }
+        fill: var(--matcha-color-#{$colorName});
     }
 
     .stroke-#{$colorName} {
-        @if $is-semantic {
-            stroke: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
-        } @else {
-            stroke: call(#{$colorFn}, $theme);
-        }
+        stroke: var(--matcha-color-#{$colorName});
     }
 
     .color-#{$colorName}-alpha {
-        color: call(#{$colorFn}Alpha, $theme) !important
+        color: var(--matcha-color-#{$colorName}-alpha) !important;
     }
 
     .#{$colorName}-alpha {
-        background: call(#{$colorFn}Alpha, $theme);
-        color: call(#{$colorFn}, $theme);
+        background: var(--matcha-color-#{$colorName}-alpha);
+        color: var(--matcha-color-#{$colorName});
     }
 
     .#{$colorName} {
-        @if $is-semantic {
-            background: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
-            color: var(--matcha-color-#{$colorName}-contrast, #{call(#{$colorFn}Contrast, $theme)});
-        } @else {
-            background: call(#{$colorFn}, $theme);
-            color: call(#{$colorFn}Contrast, $theme);
-        }
+        background: var(--matcha-color-#{$colorName});
+        color: var(--matcha-color-#{$colorName}-contrast);
     }
 }
 
 .background-basic-alpha {
-    background: var(--matcha-color-fg-alpha, #{getForegroundAlpha($theme)});
+    background: var(--matcha-color-fg-alpha);
 }
 
 .basic .ripple {
-    background: var(--matcha-color-fg-alpha, #{getForegroundAlpha($theme)});
+    background: var(--matcha-color-fg-alpha);
 }
 
 .background-basic {
-    background: var(--matcha-color-surface, #{getSurface($theme)});
+    background: var(--matcha-color-surface);
 }
 
 .border-color-basic {
-    border-color: var(--matcha-color-fg, #{getForeground($theme)});
+    border-color: var(--matcha-color-fg);
 }
 
 .color-basic {
-    color: var(--matcha-color-fg, #{getForeground($theme)}) !important;
+    color: var(--matcha-color-fg) !important;
 }
 
 .fill-basic {
-    fill: var(--matcha-color-surface, #{getSurface($theme)});
+    fill: var(--matcha-color-surface);
 }
 
 .stroke-basic {
-    stroke: var(--matcha-color-fg, #{getForeground($theme)});
+    stroke: var(--matcha-color-fg);
 }
 
 .color-basic-alpha {
-    color: var(--matcha-color-fg-alpha, #{getForegroundAlpha($theme)}) !important;
+    color: var(--matcha-color-fg-alpha) !important;
 }
 
 .basic-alpha {
-    background: var(--matcha-color-fg-alpha, #{getForegroundAlpha($theme)});
-    color: var(--matcha-color-fg, #{getForeground($theme)});
+    background: var(--matcha-color-fg-alpha);
+    color: var(--matcha-color-fg);
 }
 
 .basic {
-    background: var(--matcha-color-surface, #{getSurface($theme)});
-    color: var(--matcha-color-fg, #{getForeground($theme)});
+    background: var(--matcha-color-surface);
+    color: var(--matcha-color-fg);
 }
 
 // Semantic surface & foreground aliases (used throughout templates)
-.background-fg      { background: var(--matcha-color-fg, #{getForeground($theme)}); }
-.background-bg      { background: var(--matcha-color-surface-bg, #{getBackground($theme)}); }
-.background-bg-alpha { background: var(--matcha-color-surface-bg-alpha, #{getBackgroundAlpha($theme)}); }
-.background-surface { background: var(--matcha-color-surface, #{getSurface($theme)}); }
-.background-surface-alpha { background: var(--matcha-color-surface-card-alpha, #{getSurfaceAlpha($theme)}); }
-.background-hint    { background: var(--matcha-color-hint, #{getGrey($theme)}); }
-.color-fg           { color: var(--matcha-color-fg, #{getForeground($theme)}) !important; }
-.color-hint         { color: var(--matcha-color-hint, #{getGrey($theme)}) !important; }
-.color-label        { color: var(--matcha-color-text-label, #{getBlueGrey($theme)}) !important; }
-.color-placeholder  { color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)}) !important; }
+.background-fg      { background: var(--matcha-color-fg); }
+.background-bg      { background: var(--matcha-color-surface-bg); }
+.background-bg-alpha { background: var(--matcha-color-surface-bg-alpha); }
+.background-surface { background: var(--matcha-color-surface); }
+.background-surface-alpha { background: var(--matcha-color-surface-card-alpha); }
+.background-hint    { background: var(--matcha-color-hint); }
+.color-fg           { color: var(--matcha-color-fg) !important; }
+.color-hint         { color: var(--matcha-color-hint) !important; }
+.color-label        { color: var(--matcha-color-text-label) !important; }
+.color-placeholder  { color: var(--matcha-color-text-placeholder) !important; }
 
 .color-unset {
     color: unset;
@@ -338,68 +162,65 @@ $attributes: (
 @each $attribute in $attributes {
     @if ($attribute !="color") {
         .#{$attribute}-bg {
-            #{$attribute}: getBackground($theme) !important;
+            #{$attribute}: var(--matcha-color-surface-bg) !important;
         }
 
         .#{$attribute}-bg-alpha {
-            #{$attribute}: getBackgroundAlpha($theme) !important;
+            #{$attribute}: var(--matcha-color-surface-bg-alpha) !important;
         }
 
         .#{$attribute}-bg-inverse {
-            #{$attribute}: getBackgroundInverse($theme) !important;
+            #{$attribute}: var(--matcha-color-surface-bg-inverse) !important;
         }
 
         .#{$attribute}-bg-alpha-inverse {
-            #{$attribute}: getBackgroundAlphaInverse($theme) !important;
+            #{$attribute}: var(--matcha-color-surface-bg-inverse-alpha) !important;
         }
 
         .#{$attribute}-surface-inverse {
-            #{$attribute}: getSurfaceInverse($theme) !important;
-        }
-
-        .#{$attribute}-surface-alpha-inverse {
-            #{$attribute}: getSurfaceAlphaInverse($theme) !important;
+            #{$attribute}: var(--matcha-color-surface-card-inverse) !important;
         }
     }
 
     .#{$attribute}-fg,
     .#{$attribute}-base,
     .#{$attribute}-text {
-        #{$attribute}: getForeground($theme) !important;
+        #{$attribute}: var(--matcha-color-fg) !important;
     }
 
     .#{$attribute}-fg-inverse,
     .#{$attribute}-base-inverse,
     .#{$attribute}-text-inverse {
-        #{$attribute}: getForegroundInverse($theme) !important;
+        #{$attribute}: var(--matcha-color-fg-inverse) !important;
     }
 
     .#{$attribute}-surface {
-        #{$attribute}: getSurface($theme) !important;
+        #{$attribute}: var(--matcha-color-surface) !important;
     }
 
     .#{$attribute}-surface-alpha {
-        #{$attribute}: getSurfaceAlpha($theme) !important;
+        #{$attribute}: var(--matcha-color-surface-card-alpha) !important;
     }
 
     .#{$attribute}-placeholder {
-        #{$attribute}: getGrey($theme) !important;
+        #{$attribute}: var(--matcha-color-text-placeholder) !important;
 
         &-alpha {
-            background: rgba(getGrey($theme), 0.2) !important;
+            // placeholder-alpha (raro/legado) — usa o token grey-alpha runtime.
+            background: var(--matcha-color-grey-alpha) !important;
         }
     }
 
     .#{$attribute}-label {
-        #{$attribute}: getBlueGrey($theme) !important;
+        #{$attribute}: var(--matcha-color-text-label) !important;
     }
 
     .#{$attribute}-disabled {
-        #{$attribute}: getDisabled($theme) !important;
+        #{$attribute}: var(--matcha-color-disabled) !important;
     }
 
     .#{$attribute}-disabled-icon {
-        #{$attribute}: getDisabledContrast($theme) !important;
+        #{$attribute}: var(--matcha-color-interaction-disabled-fg) !important;
     }
 }
 }

package/abstracts/_elevation.scss

@@ -49,12 +49,8 @@
     #{map-get(_get-ambient-map($color, $opacity), $zValue)};
 }
 
-@mixin _theme-elevation($zValue, $theme, $opacity: $elevation-opacity) {
-    $foreground: map-get($theme, foreground);
-    $elevation-color: map-get($foreground, elevation);
-    $elevation-color-or-default: if($elevation-color ==null, $elevation-color, $elevation-color);
-
-    @include elevation($zValue, $elevation-color-or-default, $opacity);
+@mixin _theme-elevation($zValue, $elevation-color, $opacity: $elevation-opacity) {
+    @include elevation($zValue, $elevation-color, $opacity);
 }
 
 // Applies the elevation to an element in a manner that allows
@@ -93,10 +89,14 @@
 
 // Css class generator for shadows
 // $_elevation-prefix: "matcha-elevation-z";
-@mixin elevation-theme($theme) {
+@mixin elevation-theme($is-dark: false) {
+    // API nova: recebe SÓ o modo. Cor da sombra preservada por modo
+    // (light #1A2C1E / dark black — valores que vinham de foreground.elevation).
+    $elevation-color: if($is-dark, black, #1A2C1E);
+
     @for $zValue from 0 through 24 {
         .#{$_elevation-prefix}#{$zValue} {
-            @include _theme-elevation($zValue, $theme);
+            @include _theme-elevation($zValue, $elevation-color);
         }
     }
 }