@inchurch/matcha-theme 21.3.3 → 22.0.0

package/abstracts/_colors.scss

@@ -1,230 +1,237 @@
-@use "functions" as *;
-@use "../tokens/primitives" as *;
-@use "sass:list";
-
-// 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 list.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;
-                }
-            }
-        }
-    }
-}
-
-// -------------------------------------------------------------------------------------------------------------------
-// @ Dynamic color classes generator
-// -------------------------------------------------------------------------------------------------------------------
-@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);
-
-@each $colorName in $color-names {
-    .background-#{$colorName}-alpha {
-        background: var(--matcha-color-#{$colorName}-alpha);
-    }
-
-    .#{$colorName} .ripple {
-        background: var(--matcha-color-#{$colorName}-alpha);
-    }
-
-    .background-#{$colorName} {
-        background: var(--matcha-color-#{$colorName});
-    }
-
-    .border-color-#{$colorName} {
-        border-color: var(--matcha-color-#{$colorName});
-    }
-
-    .color-#{$colorName} {
-        color: var(--matcha-color-#{$colorName}) !important;
-    }
-
-    .fill-#{$colorName} {
-        fill: var(--matcha-color-#{$colorName});
-    }
-
-    .stroke-#{$colorName} {
-        stroke: var(--matcha-color-#{$colorName});
-    }
-
-    .color-#{$colorName}-alpha {
-        color: var(--matcha-color-#{$colorName}-alpha) !important;
-    }
-
-    .#{$colorName}-alpha {
-        background: var(--matcha-color-#{$colorName}-alpha);
-        color: var(--matcha-color-#{$colorName});
-    }
-
-    .#{$colorName} {
-        background: var(--matcha-color-#{$colorName});
-        color: var(--matcha-color-#{$colorName}-contrast);
-    }
-}
-
-.background-basic-alpha {
-    background: var(--matcha-color-fg-alpha);
-}
-
-.basic .ripple {
-    background: var(--matcha-color-fg-alpha);
-}
-
-.background-basic {
-    background: var(--matcha-color-surface);
-}
-
-.border-color-basic {
-    border-color: var(--matcha-color-fg);
-}
-
-.color-basic {
-    color: var(--matcha-color-fg) !important;
-}
-
-.fill-basic {
-    fill: var(--matcha-color-surface);
-}
-
-.stroke-basic {
-    stroke: var(--matcha-color-fg);
-}
-
-.color-basic-alpha {
-    color: var(--matcha-color-fg-alpha) !important;
-}
-
-.basic-alpha {
-    background: var(--matcha-color-fg-alpha);
-    color: var(--matcha-color-fg);
-}
-
-.basic {
-    background: var(--matcha-color-surface);
-    color: var(--matcha-color-fg);
-}
-
-// Semantic surface & foreground aliases (used throughout templates)
-.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;
-}
-
-.background-transparent {
-    background: transparent;
-}
-
-$attributes: (
-    color,
-    border-color,
-    background,
-    fill,
-    stroke
-);
-
-@each $attribute in $attributes {
-    @if ($attribute !="color") {
-        .#{$attribute}-bg {
-            #{$attribute}: var(--matcha-color-surface-bg) !important;
-        }
-
-        .#{$attribute}-bg-alpha {
-            #{$attribute}: var(--matcha-color-surface-bg-alpha) !important;
-        }
-
-        .#{$attribute}-bg-inverse {
-            #{$attribute}: var(--matcha-color-surface-bg-inverse) !important;
-        }
-
-        .#{$attribute}-bg-alpha-inverse {
-            #{$attribute}: var(--matcha-color-surface-bg-inverse-alpha) !important;
-        }
-
-        .#{$attribute}-surface-inverse {
-            #{$attribute}: var(--matcha-color-surface-card-inverse) !important;
-        }
-    }
-
-    .#{$attribute}-fg,
-    .#{$attribute}-base,
-    .#{$attribute}-text {
-        #{$attribute}: var(--matcha-color-fg) !important;
-    }
-
-    .#{$attribute}-fg-inverse,
-    .#{$attribute}-base-inverse,
-    .#{$attribute}-text-inverse {
-        #{$attribute}: var(--matcha-color-fg-inverse) !important;
-    }
-
-    .#{$attribute}-surface {
-        #{$attribute}: var(--matcha-color-surface) !important;
-    }
-
-    .#{$attribute}-surface-alpha {
-        #{$attribute}: var(--matcha-color-surface-card-alpha) !important;
-    }
-
-    .#{$attribute}-placeholder {
-        #{$attribute}: var(--matcha-color-text-placeholder) !important;
-
-        &-alpha {
-            // placeholder-alpha (raro/legado) — usa o token grey-alpha runtime.
-            background: var(--matcha-color-grey-alpha) !important;
-        }
-    }
-
-    .#{$attribute}-label {
-        #{$attribute}: var(--matcha-color-text-label) !important;
-    }
-
-    .#{$attribute}-disabled {
-        #{$attribute}: var(--matcha-color-disabled) !important;
-    }
-
-    .#{$attribute}-disabled-icon {
-        #{$attribute}: var(--matcha-color-interaction-disabled-fg) !important;
-    }
-}
+@use "functions" as *;
+@use "../tokens/primitives" as *;
+@use "sass:list";
+
+// 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 list.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;
+                }
+            }
+        }
+    }
+}
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Dynamic color classes generator
+// -------------------------------------------------------------------------------------------------------------------
+@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);
+
+@each $colorName in $color-names {
+    .background-#{$colorName}-alpha {
+        background: var(--matcha-color-#{$colorName}-alpha);
+    }
+
+    .#{$colorName} .ripple {
+        background: var(--matcha-color-#{$colorName}-alpha);
+    }
+
+    .background-#{$colorName} {
+        background: var(--matcha-color-#{$colorName});
+    }
+
+    .border-color-#{$colorName} {
+        border-color: var(--matcha-color-#{$colorName});
+    }
+
+    .color-#{$colorName} {
+        color: var(--matcha-color-#{$colorName}) !important;
+    }
+
+    .fill-#{$colorName} {
+        fill: var(--matcha-color-#{$colorName});
+    }
+
+    .stroke-#{$colorName} {
+        stroke: var(--matcha-color-#{$colorName});
+    }
+
+    .color-#{$colorName}-alpha {
+        color: var(--matcha-color-#{$colorName}-alpha) !important;
+    }
+
+    .#{$colorName}-alpha {
+        background: var(--matcha-color-#{$colorName}-alpha);
+        color: var(--matcha-color-#{$colorName});
+    }
+
+    .#{$colorName} {
+        background: var(--matcha-color-#{$colorName});
+        color: var(--matcha-color-#{$colorName}-contrast);
+    }
+}
+
+.background-basic-alpha {
+    background: var(--matcha-color-fg-alpha);
+}
+
+.basic .ripple {
+    background: var(--matcha-color-fg-alpha);
+}
+
+.background-basic {
+    background: var(--matcha-color-surface);
+}
+
+.border-color-basic {
+    border-color: var(--matcha-color-fg);
+}
+
+.color-basic {
+    color: var(--matcha-color-fg) !important;
+}
+
+.fill-basic {
+    fill: var(--matcha-color-surface);
+}
+
+.stroke-basic {
+    stroke: var(--matcha-color-fg);
+}
+
+.color-basic-alpha {
+    color: var(--matcha-color-fg-alpha) !important;
+}
+
+.basic-alpha {
+    background: var(--matcha-color-fg-alpha);
+    color: var(--matcha-color-fg);
+}
+
+.basic {
+    background: var(--matcha-color-surface);
+    color: var(--matcha-color-fg);
+}
+
+// Semantic surface & foreground aliases (used throughout templates)
+.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; }
+
+// Papéis de TEXTO semânticos (o gerador acima cobre fg/hint/label/placeholder,
+// mas NÃO os text-*). Consumidos amplamente nos templates do painel.
+.color-text-primary   { color: var(--matcha-color-text-primary) !important; }
+.color-text-secondary { color: var(--matcha-color-text-secondary) !important; }
+.color-text-muted     { color: var(--matcha-color-text-muted) !important; }
+.color-text-hint      { color: var(--matcha-color-text-hint) !important; }
+
+.color-unset {
+    color: unset;
+}
+
+.background-transparent {
+    background: transparent;
+}
+
+$attributes: (
+    color,
+    border-color,
+    background,
+    fill,
+    stroke
+);
+
+@each $attribute in $attributes {
+    @if ($attribute !="color") {
+        .#{$attribute}-bg {
+            #{$attribute}: var(--matcha-color-surface-bg) !important;
+        }
+
+        .#{$attribute}-bg-alpha {
+            #{$attribute}: var(--matcha-color-surface-bg-alpha) !important;
+        }
+
+        .#{$attribute}-bg-inverse {
+            #{$attribute}: var(--matcha-color-surface-bg-inverse) !important;
+        }
+
+        .#{$attribute}-bg-alpha-inverse {
+            #{$attribute}: var(--matcha-color-surface-bg-inverse-alpha) !important;
+        }
+
+        .#{$attribute}-surface-inverse {
+            #{$attribute}: var(--matcha-color-surface-card-inverse) !important;
+        }
+    }
+
+    .#{$attribute}-fg,
+    .#{$attribute}-base,
+    .#{$attribute}-text {
+        #{$attribute}: var(--matcha-color-fg) !important;
+    }
+
+    .#{$attribute}-fg-inverse,
+    .#{$attribute}-base-inverse,
+    .#{$attribute}-text-inverse {
+        #{$attribute}: var(--matcha-color-fg-inverse) !important;
+    }
+
+    .#{$attribute}-surface {
+        #{$attribute}: var(--matcha-color-surface) !important;
+    }
+
+    .#{$attribute}-surface-alpha {
+        #{$attribute}: var(--matcha-color-surface-card-alpha) !important;
+    }
+
+    .#{$attribute}-placeholder {
+        #{$attribute}: var(--matcha-color-text-placeholder) !important;
+
+        &-alpha {
+            // placeholder-alpha (raro/legado) — usa o token grey-alpha runtime.
+            background: var(--matcha-color-grey-alpha) !important;
+        }
+    }
+
+    .#{$attribute}-label {
+        #{$attribute}: var(--matcha-color-text-label) !important;
+    }
+
+    .#{$attribute}-disabled {
+        #{$attribute}: var(--matcha-color-disabled) !important;
+    }
+
+    .#{$attribute}-disabled-icon {
+        #{$attribute}: var(--matcha-color-interaction-disabled-fg) !important;
+    }
+}
 }