@inchurch/matcha-theme 20.277.0 → 21.0.0

package/tokens/_primitives.scss

@@ -4,6 +4,22 @@
 // Emite as cores cruas como CSS custom properties em :root; a Camada 2 (semânticas)
 // aponta para estas via var(--matcha-prim-*).
 
+$matcha-primitives: (
+  "red": ("200": #ef9a9a, "a700": #c81010),
+  "pink": ("600": #d81b60),
+  "purple": ("500": #9c27b0),
+  "blue": ("100": #bbdefb, "200": #90caf9, "300": #64b5f6, "350": #4090d8, "700": #1664c2, "a700": #0a2fc2),
+  "light-blue": ("500": #03a9f4, "700": #0288d1),
+  "teal": ("350": #4fb7ad, "500": #009688, "700": #00796b),
+  "green": ("900": #2e7d32, "a100": #b9f6ca, "a200": #69f0ae),
+  "light-green": ("200": #c5e1a5, "600": #43a047, "a400": #a8d94e),
+  "yellow": ("200": #ffb74d, "500": #e8c300, "600": #a64e00),
+  "orange": ("500": #f77814),
+  "common": ("white": #ffffff, "black": #000000),
+  "brand": ("accent": #54a71d, "accent-dark": #a8d94e),
+  "neutral": ("112": #f4f4f4, "143": #f1f4f1, "174": #f0f2f5, "205": #e8eaed, "236": #e4ebe5, "267": #e1e7e2, "298": #d8e1da, "329": #cfd6d1, "360": #c8d2ca, "391": #bdc1c6, "422": #a8b5a0, "453": #9aa0a6, "484": #8a9090, "516": #7a818a, "547": #6e7681, "578": #6e747a, "609": #5a6066, "640": #3d4248, "671": #333842, "702": #2e333c, "733": #2a2d33, "764": #282c34, "795": #262a32, "826": #1c1f26, "857": #1a1d21, "888": #151a22, "919": #111318, "950": #0d0f14, "050": #f7fcf7, "081": #f8faf8),
+);
+
 @mixin matcha-primitives() {
   :root {
     // red

package/tokens/_static-tokens.scss

@@ -0,0 +1,137 @@
+// =============================================================================
+// DOCUMENTO GERADO AUTOMATICAMENTE — NÃO EDITE À MÃO.
+//   Fonte:   tokens/matcha/primitives/global.json   (Figma · Tokens Studio)
+//   Gerador: scripts/matcha-tokens/gen-static.js    (gate: gen-static.js --check)
+//   Para mudar um valor: edite a fonte e rode o gerador (não edite este arquivo).
+// =============================================================================
+// Tokens NÃO-cor (mode-agnostic). matcha-static-tokens() emite declarações CRUAS
+// (sem seletor): o caller define o escopo (hoje dentro do tema via _emit-tokens.scss;
+// :root mode-agnostic no Track B). Curados sem fonte Figma (avatar, scrim, matcha/text/*
+// compostos, leading/tracking, aliases) ficam no _emit-tokens.scss — backlog matcha-theme-008.
+
+@mixin matcha-static-tokens() {
+  --matcha-font-family: Manrope, sans-serif;
+  --matcha-font-size-2xs: 10px;
+  --matcha-font-size-xs: 12px;
+  --matcha-font-size-sm: 14px;
+  --matcha-font-size-md: 16px;
+  --matcha-font-size-lg: 18px;
+  --matcha-font-size-xl: 20px;
+  --matcha-font-size-2xl: 24px;
+  --matcha-font-size-3xl: 32px;
+  --matcha-font-size-3xs: 8px;
+  --matcha-font-size-4xl: 36px;
+  --matcha-font-size-5xl: 48px;
+  --matcha-font-size-6xl: 60px;
+  --matcha-font-size-7xl: 72px;
+  --matcha-weight-normal: 400;
+  --matcha-weight-medium: 500;
+  --matcha-weight-semi-bold: 600;
+  --matcha-weight-bold: 700;
+  --matcha-weight-black: 900;
+  --matcha-weight-extrabold: 800;
+  --matcha-weight-extralight: 200;
+  --matcha-weight-light: 300;
+  --matcha-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
+  --matcha-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
+  --matcha-easing-decelerated: cubic-bezier(0.0, 0.0, 0.2, 1);
+  --matcha-easing-accelerated: cubic-bezier(0.4, 0.0, 1, 1);
+  --matcha-space-100: 8px;
+  --matcha-space-150: 12px;
+  --matcha-space-200: 16px;
+  --matcha-space-250: 20px;
+  --matcha-space-300: 24px;
+  --matcha-space-400: 32px;
+  --matcha-space-500: 40px;
+  --matcha-space-600: 48px;
+  --matcha-space-800: 64px;
+  --matcha-space-1000: 80px;
+  --matcha-space-1200: 96px;
+  --matcha-space-050: 4px;
+  --matcha-space-075: 6px;
+  --matcha-space-025: 2px;
+  --matcha-radius-none: 0;
+  --matcha-radius-sm: 2px;
+  --matcha-radius-md: 4px;
+  --matcha-radius-lg: 8px;
+  --matcha-radius-xl: 16px;
+  --matcha-radius-pill: 9999px;
+  --matcha-radius-2xl: 12px;
+  --matcha-radius-3xs: 6px;
+  --matcha-radius-3xl: 24px;
+  --matcha-border-hairline: 1px;
+  --matcha-border-thin: 2px;
+  --matcha-border-medium: 4px;
+  --matcha-border-thick: 8px;
+  --matcha-opacity-hover: 0.04;
+  --matcha-opacity-subtle: 0.1;
+  --matcha-opacity-medium: 0.2;
+  --matcha-opacity-strong: 0.3;
+  --matcha-opacity-disabled: 0.38;
+  --matcha-opacity-secondary: 0.54;
+  --matcha-opacity-high: 0.87;
+  --matcha-duration-instant: 80ms;
+  --matcha-duration-fast: 200ms;
+  --matcha-duration-normal: 400ms;
+  --matcha-duration-slow: 600ms;
+  --matcha-line-height-none: 1;
+  --matcha-line-height-tight: 1.2;
+  --matcha-line-height-normal: 1.5;
+  --matcha-line-height-relaxed: 1.75;
+  --matcha-letter-spacing-tight: -0.5px;
+  --matcha-letter-spacing-normal: 0px;
+  --matcha-letter-spacing-wide: 0.5px;
+  --matcha-letter-spacing-wider: 1px;
+  --matcha-z-base: 1;
+  --matcha-z-dropdown: 100;
+  --matcha-z-sticky: 200;
+  --matcha-z-popover: 300;
+  --matcha-z-tooltip: 400;
+  --matcha-z-modal-bg: 998;
+  --matcha-z-modal: 999;
+  --matcha-z-overlay: 1000;
+  --matcha-grid-frame-notebook: 1360px;
+  --matcha-grid-frame-wide: 1920px;
+  --matcha-grid-frame-mobile: 375px;
+  --matcha-grid-frame-tablet: 768px;
+  --matcha-grid-sidebar-rail: 72px;
+  --matcha-grid-sidebar-submenu: 216px;
+  --matcha-grid-sidebar-gap: 16px;
+  --matcha-grid-sidebar-total: 304px;
+  --matcha-grid-col-painel-full: 72px;
+  --matcha-grid-col-painel-rail: 88px;
+  --matcha-grid-col-painel-compact: 96px;
+  --matcha-grid-col-wide-full: 120px;
+  --matcha-grid-col-wide-rail: 112px;
+  --matcha-grid-col-public-mobile: 80px;
+  --matcha-grid-col-public-tablet: 64px;
+  --matcha-grid-col-public-desktop: 80px;
+  --matcha-grid-gutter-compact: 8px;
+  --matcha-grid-gutter-default: 16px;
+  --matcha-grid-gutter-wide: 16px;
+  --matcha-grid-content-painel-full: 1040px;
+  --matcha-grid-content-painel-rail: 1232px;
+  --matcha-grid-header-height: 56px;
+  --matcha-grid-offset-wide-full: 304px;
+  --matcha-grid-offset-wide-rail: 248px;
+  --matcha-grid-offset-painel-full: 304px;
+  --matcha-grid-offset-painel-rail: 96px;
+  --matcha-grid-offset-painel-compact: 24px;
+  --matcha-grid-max-content-width: 1600px;
+  --matcha-grid-content-wide-full: 1616px;
+  --matcha-grid-content-wide-rail: 1520px;
+  --matcha-icon-size-sm: 16px;
+  --matcha-icon-size-md: 24px;
+  --matcha-icon-size-lg: 32px;
+  --matcha-icon-size-xl: 48px;
+  --matcha-state-layer-hover: 0.08;
+  --matcha-state-layer-active: 0.16;
+  --matcha-state-layer-pressed: 0.12;
+  --matcha-state-layer-subtle: 0.04;
+  --matcha-bp-xs: 480px;
+  --matcha-bp-sm: 640px;
+  --matcha-bp-md: 768px;
+  --matcha-bp-lg: 1024px;
+  --matcha-bp-xl: 1280px;
+  --matcha-bp-2xl: 1536px;
+}

package/vendors/charts.scss

@@ -1,9 +1,6 @@
 @mixin vendor-chart($theme) {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
+    // theme-agnóstico: cores via var(--matcha-color-*) (runtime). $theme mantido só
+    // na assinatura por retrocompat dos call sites (removido na limpeza de params).
 
     // Fixer wrappers
     .matcha-card,
@@ -53,7 +50,7 @@
 
             .active {
                 .legend-label-text {
-                    color: map-get($foreground, label);
+                    color: var(--matcha-color-text-label);
                 }
             }
         }
@@ -66,7 +63,7 @@
             font-weight: normal;
             font-size: 16px !important;
             line-height: 20px;
-            color: map-get($foreground, foreground);
+            color: var(--matcha-color-fg);
         }
     }
 
@@ -76,14 +73,14 @@
             margin: 0 24px 0 0;
             border-radius: 8px;
             position: absolute;
-            background-color: map-get($background, background-alpha);
+            background-color: var(--matcha-color-surface-bg-alpha);
             @include elevation(1);
         }
     }
 
     .pie-chart {
         .pie-label {
-            fill: map-get($foreground, label);
+            fill: var(--matcha-color-text-label);
             font-size: 16px !important;
             line-height: 20px;
             padding: 8px;