@inchurch/matcha-theme 22.38.2 → 22.38.3

package/abstracts/_colors.scss

@@ -1,292 +1,292 @@
-@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});
-    }
-
-    // O loop gerava `-alpha` para background e color, mas não para border-color — então
-    // `border-color-green-alpha` era classe morta, sem aviso nenhum. O token existe.
-    .border-color-#{$colorName}-alpha {
-        border-color: var(--matcha-color-#{$colorName}-alpha);
-    }
-
-    .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);
-}
-
-.border-color-surface-border {
-    border-color: var(--matcha-color-surface-border);
-}
-
-.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; }
-
-// -------------------------------------------------------------------------------------------------------------------
-// @ Namespaces documentados no Figma que NÃO tinham classe utilitária
-// -------------------------------------------------------------------------------------------------------------------
-// Estes tokens sempre foram emitidos por matcha-css-custom-properties, mas nenhuma classe os
-// alcançava: o consumidor só chegava neles por `var(--matcha-color-*)` dentro de SCSS de
-// componente — exatamente o que a regra do painel proíbe ("nenhum estilo mora só na aplicação").
-// Na prática isso empurrava o consumidor de volta pra paleta Material legada ou pra hex cravado.
-//
-// A lista é fechada de propósito, e cada nome existe em tokens/_color-tokens.scss. Ao acrescentar
-// um token novo por lá, acrescente aqui também — ou ele nasce inalcançável por classe.
-$-namespaced-tokens:
-    // Palette — cor de IDENTIDADE (categoria, marca, série). Não confundir com semântica de estado.
-    "palette-teal", "palette-teal-light", "palette-teal-alpha",
-    "palette-light-blue", "palette-light-blue-light", "palette-light-blue-alpha",
-    "palette-purple", "palette-purple-light", "palette-purple-alpha", "palette-purple-contrast",
-    "palette-pink", "palette-pink-light", "palette-pink-alpha",
-    "palette-orange", "palette-orange-light", "palette-orange-alpha",
-    "palette-yellow", "palette-yellow-light", "palette-yellow-alpha",
-    // Chart — séries de gráfico, com contrast e alpha
-    "chart-series-1", "chart-series-2", "chart-series-3", "chart-series-4", "chart-series-5",
-    "chart-series-1-contrast", "chart-series-2-contrast", "chart-series-3-contrast",
-    "chart-series-4-contrast", "chart-series-5-contrast",
-    "chart-series-1-alpha", "chart-series-2-alpha", "chart-series-3-alpha",
-    "chart-series-4-alpha", "chart-series-5-alpha",
-    // Icon
-    "icon-default", "icon-active",
-    // Interaction
-    "interaction-disabled-bg", "interaction-disabled-bg-alpha", "interaction-disabled-fg",
-    "interaction-disabled-border",
-    // Surface — as variantes que o bloco estático acima não cobria
-    "surface-bg-inverse", "surface-bg-inverse-alpha", "surface-card", "surface-card-strong",
-    "surface-inner", "surface-card-inverse", "surface-sidebar", "surface-sidebar-hover",
-    "surface-table-row-hover", "surface-border-strong", "surface-hover";
-
-// Os cinco atributos, uniformemente — mesma convenção do loop de $color-names acima. Gerar só o
-// "atributo que faz sentido" para cada token exigiria julgamento por nome, e a experiência do
-// painel mostra que a lacuna é pior que o excesso: classe faltando vira hex cravado.
-@each $-token in $-namespaced-tokens {
-    .background-#{$-token} { background: var(--matcha-color-#{$-token}); }
-    .border-color-#{$-token} { border-color: var(--matcha-color-#{$-token}); }
-    .color-#{$-token} { color: var(--matcha-color-#{$-token}) !important; }
-    .fill-#{$-token} { fill: var(--matcha-color-#{$-token}); }
-    .stroke-#{$-token} { stroke: var(--matcha-color-#{$-token}); }
-}
-
-.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});
+    }
+
+    // O loop gerava `-alpha` para background e color, mas não para border-color — então
+    // `border-color-green-alpha` era classe morta, sem aviso nenhum. O token existe.
+    .border-color-#{$colorName}-alpha {
+        border-color: var(--matcha-color-#{$colorName}-alpha);
+    }
+
+    .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);
+}
+
+.border-color-surface-border {
+    border-color: var(--matcha-color-surface-border);
+}
+
+.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; }
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Namespaces documentados no Figma que NÃO tinham classe utilitária
+// -------------------------------------------------------------------------------------------------------------------
+// Estes tokens sempre foram emitidos por matcha-css-custom-properties, mas nenhuma classe os
+// alcançava: o consumidor só chegava neles por `var(--matcha-color-*)` dentro de SCSS de
+// componente — exatamente o que a regra do painel proíbe ("nenhum estilo mora só na aplicação").
+// Na prática isso empurrava o consumidor de volta pra paleta Material legada ou pra hex cravado.
+//
+// A lista é fechada de propósito, e cada nome existe em tokens/_color-tokens.scss. Ao acrescentar
+// um token novo por lá, acrescente aqui também — ou ele nasce inalcançável por classe.
+$-namespaced-tokens:
+    // Palette — cor de IDENTIDADE (categoria, marca, série). Não confundir com semântica de estado.
+    "palette-teal", "palette-teal-light", "palette-teal-alpha",
+    "palette-light-blue", "palette-light-blue-light", "palette-light-blue-alpha",
+    "palette-purple", "palette-purple-light", "palette-purple-alpha", "palette-purple-contrast",
+    "palette-pink", "palette-pink-light", "palette-pink-alpha",
+    "palette-orange", "palette-orange-light", "palette-orange-alpha",
+    "palette-yellow", "palette-yellow-light", "palette-yellow-alpha",
+    // Chart — séries de gráfico, com contrast e alpha
+    "chart-series-1", "chart-series-2", "chart-series-3", "chart-series-4", "chart-series-5",
+    "chart-series-1-contrast", "chart-series-2-contrast", "chart-series-3-contrast",
+    "chart-series-4-contrast", "chart-series-5-contrast",
+    "chart-series-1-alpha", "chart-series-2-alpha", "chart-series-3-alpha",
+    "chart-series-4-alpha", "chart-series-5-alpha",
+    // Icon
+    "icon-default", "icon-active",
+    // Interaction
+    "interaction-disabled-bg", "interaction-disabled-bg-alpha", "interaction-disabled-fg",
+    "interaction-disabled-border",
+    // Surface — as variantes que o bloco estático acima não cobria
+    "surface-bg-inverse", "surface-bg-inverse-alpha", "surface-card", "surface-card-strong",
+    "surface-inner", "surface-card-inverse", "surface-sidebar", "surface-sidebar-hover",
+    "surface-table-row-hover", "surface-border-strong", "surface-hover";
+
+// Os cinco atributos, uniformemente — mesma convenção do loop de $color-names acima. Gerar só o
+// "atributo que faz sentido" para cada token exigiria julgamento por nome, e a experiência do
+// painel mostra que a lacuna é pior que o excesso: classe faltando vira hex cravado.
+@each $-token in $-namespaced-tokens {
+    .background-#{$-token} { background: var(--matcha-color-#{$-token}); }
+    .border-color-#{$-token} { border-color: var(--matcha-color-#{$-token}); }
+    .color-#{$-token} { color: var(--matcha-color-#{$-token}) !important; }
+    .fill-#{$-token} { fill: var(--matcha-color-#{$-token}); }
+    .stroke-#{$-token} { stroke: var(--matcha-color-#{$-token}); }
+}
+
+.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;
+    }
+}
 }