@inchurch/matcha-theme 20.276.0 → 20.277.0

package/tokens/_css-custom-properties.scss

@@ -2,12 +2,15 @@
 // MATCHA DESIGN SYSTEM — Token Source (CSS Custom Properties)
 // =============================================================================
 //
-// Emits :root variables for Light mode + [data-theme="dark"] overrides,
-// enabling runtime theming without Sass recompilation.
+// Emite as CSS custom properties (--matcha-*) de um tema. A classe de tema
+// (ex.: .theme-default-light) recebe as vars via matcha-components($theme) →
+// matcha-css-custom-properties($theme), habilitando override em runtime sem
+// recompilação Sass (base do whitelabel e de temas adicionais — ver
+// abstracts/_theme-api.scss e docs/theming-guide.md).
 //
 // 1:1 PARIDADE com Figma variables em DS-PAINEL (fileKey K673r19KQE8lm2S74nQ5ob):
 //   - matcha/primitives  (99 vars)  →  primitives section below
-//   - matcha/colors      (117 vars) →  semantic color sections below
+//   - matcha/colors      (117 vars) →  $matcha-color-tokens below
 //   - matcha/interaction (4 vars)   →  via matcha/color/interaction/* aliases
 //   - matcha/text/*      (30 styles) → text-* + leading-* + tracking-* props
 //   - matcha/elevation   (4 styles) →  shadow-1..4
@@ -17,86 +20,77 @@
 //   - Nome token Figma: `matcha/category/subcategory/variant` (slash)
 //   - Nome CSS var:     `--matcha-category-subcategory-variant` (hyphen)
 //     ex.: `matcha/color/surface/card` ↔ `--matcha-color-surface-card`
+//   - Chave do mapa $matcha-color-tokens = sufixo da var sem `--matcha-color-`
+//     ex.: `surface-card` ↔ `--matcha-color-surface-card`
 //
-// ORDEM DO ARQUIVO (escalável, do mais genérico → mais específico):
-//   1. Surface (camadas de fundo)
-//   2. Text (cores de texto semântico)
-//   3. Icon
-//   4. Interaction (disabled, focus)
-//   5. Neutral
-//   6. Elevation (surface layers + shadow)
-//   7. Brand — Accent primário + Accent-2 secundário
-//   8. Brand — Primary
-//   9. Feedback — Success, Danger, Warn, Info
-//  10. Data — Chart series + decorative palette
-//  11. Typography — font/size/weight/leading/tracking
-//  12. Spacing / Radius / Border
-//  13. Motion / Opacity / State layers
-//  14. Icon sizes / Touch targets / Avatar
-//  15. Layout — Z-index / Grid
-//  16. Naming-parity aliases (Figma→CSS onde os nomes divergem)
+// ESTRUTURA DESTE ARQUIVO:
+//   1. $matcha-color-tokens — fonte única dos valores de cor por modo
+//      (light/dark), na ordem de emissão. Todo token aqui é sobrescrevível
+//      por tema via matcha-emit-color-properties() (abstracts/_theme-api.scss).
+//   2. matcha-default-colors($mode) + $matcha-colors-light/dark — mapas flat
+//      derivados (token → valor), consumidos pelo emissor e pela theme API.
+//   3. matcha-emit-color-properties($colors) — emissor genérico.
+//   4. matcha-css-custom-properties($theme) — mixin canônico (assinatura
+//      preservada): cores via emissor + tokens estáticos (spacing, radius,
+//      tipografia, motion, grid, …) + aliases.
 //
 // =============================================================================
 @use "sass:map";
 
-@mixin matcha-css-custom-properties($theme) {
-  $is-dark: map.get($theme, is-dark);
-  $bg: map.get($theme, background);
-  $fg: map.get($theme, foreground);
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // LIGHT = Figma oficial (matcha/color/* JSON export hierárquico)
-  // DARK  = tokens confirmados pelo usuário (flat JSON)
-  // ═════════════════════════════════════════════════════════════════════════
-
+// ═══════════════════════════════════════════════════════════════════════════
+// 1. COLOR TOKENS — fonte única (light/dark) na ordem de emissão
+//    LIGHT = Figma oficial (matcha/color/* JSON export hierárquico)
+//    DARK  = tokens confirmados pelo usuário (flat JSON)
+// ═══════════════════════════════════════════════════════════════════════════
+$matcha-color-tokens: (
   // ── Surface (9) — matcha/color/surface/* ─────────────────────────────────
   // 1:1 Figma DSV3 (Light + Dark JSON export 2026-05-29).
   // Light mode: sage-tinted neutrals (2–4% green hue da marca) + hierarquia perceptível.
-  --matcha-color-surface-bg: #{if($is-dark, #111318, #f1f4f1)};
+  surface-bg: (light: #f1f4f1, dark: #111318),
   // bg-alpha light usa cor BASE distinta (#f0f2f5) — não é #f1f4f1 com alpha.
   // Decisão Figma intencional pra sutil shift de tint no estado transparente.
-  --matcha-color-surface-bg-alpha: #{if($is-dark, rgba(#111318, .5), rgba(#f0f2f5, .5))};
-  --matcha-color-surface-bg-inverse: #{if($is-dark, #f0f2f5, #111318)};
-  --matcha-color-surface-bg-inverse-alpha: #{if($is-dark, rgba(#f0f2f5, .5), rgba(#111318, .5))};
+  surface-bg-alpha: (light: rgba(#f0f2f5, .5), dark: rgba(#111318, .5)),
+  surface-bg-inverse: (light: #111318, dark: #f0f2f5),
+  surface-bg-inverse-alpha: (light: rgba(#111318, .5), dark: rgba(#f0f2f5, .5)),
 
   // Card soft default — light #f7fcf7 (off-white com tint sage muito sutil).
   // Reduz glare contra surface-bg #f1f4f1 (Δ ~5 luminance). Pure white só pra
   // floating overlays via surface-card-strong (modal, command-palette).
   // Pattern Linear / Vercel / Notion: soft cards default + bright float.
-  --matcha-color-surface: #{if($is-dark, #1c1f26, #f7fcf7)};
-  --matcha-color-surface-card: #{if($is-dark, #1c1f26, #f7fcf7)};
+  surface: (light: #f7fcf7, dark: #1c1f26),
+  surface-card: (light: #f7fcf7, dark: #1c1f26),
   // Card strong — pure white (light) / lifted dark, pra floating overlays
   // que precisam máximo destaque sobre scrim. Modal, popover, dropdown,
   // command-palette. NÃO usar pra cards inline — vira agressivo.
-  --matcha-color-surface-card-strong: #{if($is-dark, #262a32, #ffffff)};
+  surface-card-strong: (light: #ffffff, dark: #262a32),
   // Canvas aninhada dentro de card (preview stage, code body, inset panels)
   // Light: sage (= bg da page, cria recorte sutil sobre card off-white)
   // Dark: mais clara que card (inverte lógica, dá profundidade em vez de buraco)
-  --matcha-color-surface-inner: #{if($is-dark, #262a32, #f1f4f1)};
+  surface-inner: (light: #f1f4f1, dark: #262a32),
   // card-alpha light usa #ffffff base (não #f7fcf7) — overlay/zebra com white puro
-  --matcha-color-surface-card-alpha: #{if($is-dark, rgba(#1c1f26, .5), rgba(#ffffff, .85))};
-  --matcha-color-surface-card-inverse: #{if($is-dark, #ffffff, #1c1f26)};
+  surface-card-alpha: (light: rgba(#ffffff, .85), dark: rgba(#1c1f26, .5)),
+  surface-card-inverse: (light: #1c1f26, dark: #ffffff),
 
-  --matcha-color-surface-sidebar: #{if($is-dark, #0d0f14, #e4ebe5)};
-  --matcha-color-surface-sidebar-hover: #{if($is-dark, #161920, #d8e1da)};
+  surface-sidebar: (light: #e4ebe5, dark: #0d0f14),
+  surface-sidebar-hover: (light: #d8e1da, dark: #161920),
   // table-row-hover light: neutral #f4f4f4 (Figma — não tinted sage)
-  --matcha-color-surface-table-row-hover: #{if($is-dark, #151a22, #f4f4f4)};
+  surface-table-row-hover: (light: #f4f4f4, dark: #151a22),
 
   // Border sólido e visível (era rgba(0,0,0,.08) = invisível sobre sage bg)
-  --matcha-color-surface-border: #{if($is-dark, rgba(255,255,255,.12), #e1e7e2)};
+  surface-border: (light: #e1e7e2, dark: rgba(255, 255, 255, .12)),
   // Border mais forte pra cards elevados (hero, playground — com shadow)
-  --matcha-color-surface-border-strong: #{if($is-dark, rgba(255,255,255,.24), #c8d2ca)};
-  --matcha-color-surface-hover: #{if($is-dark, rgba(#111318, .5), rgba(#e4ebe5, .5))};
+  surface-border-strong: (light: #c8d2ca, dark: rgba(255, 255, 255, .24)),
+  surface-hover: (light: rgba(#e4ebe5, .5), dark: rgba(#111318, .5)),
 
   // Aliases (flat) — usados massivamente
   // Light mode softening 2026-05-18: fg de #1a1d21 (17:1, "tinta preta") → #2a2d33 (12:1 AAA, "tinta carvão").
   // Inspiração: tom entre Linear (#1a1d21, mais pesado) e GitHub (#1f2328) — reduz fatiga em sessions longas.
-  --matcha-color-bg: #{if($is-dark, #111318, #f1f4f1)};
-  --matcha-color-fg: #{if($is-dark, #e8eaed, #2a2d33)};
-  --matcha-color-fg-alpha: #{if($is-dark, rgba(#e8eaed, .5), rgba(#2a2d33, .5))};
-  --matcha-color-fg-inverse: #{if($is-dark, #2a2d33, #e8eaed)};
-  --matcha-color-fg-inverse-alpha: #{if($is-dark, rgba(#2a2d33, .5), rgba(#e8eaed, .5))};
-  --matcha-color-border: #{if($is-dark, rgba(255,255,255,.12), #e1e7e2)};
+  bg: (light: #f1f4f1, dark: #111318),
+  fg: (light: #2a2d33, dark: #e8eaed),
+  fg-alpha: (light: rgba(#2a2d33, .5), dark: rgba(#e8eaed, .5)),
+  fg-inverse: (light: #e8eaed, dark: #2a2d33),
+  fg-inverse-alpha: (light: rgba(#e8eaed, .5), dark: rgba(#2a2d33, .5)),
+  border: (light: #e1e7e2, dark: rgba(255, 255, 255, .12)),
 
   // ── Text (9) — matcha/color/text/* ───────────────────────────────────────
   // Light mode softening 2026-05-18 — todos os tons recuados ~1 step pra reduzir
@@ -105,56 +99,56 @@
   //   secondary #5a6066 → 6.8:1   (AAA Large + AA Normal, antes #4a5056 8.5:1)
   //   muted     #6e7681 → 5.2:1   (AA, antes #5a6a5e 7.4:1)
   //   label     #7a818a → 4.6:1   (AA, antes #6b7177 5.9:1)
-  --matcha-color-text-primary: #{if($is-dark, #e8eaed, #2a2d33)};
-  --matcha-color-text-inverse: #{if($is-dark, #2a2d33, #e8eaed)};
-  --matcha-color-text-secondary: #{if($is-dark, rgba(255,255,255,.7), #5a6066)};
+  text-primary: (light: #2a2d33, dark: #e8eaed),
+  text-inverse: (light: #e8eaed, dark: #2a2d33),
+  text-secondary: (light: #5a6066, dark: rgba(255, 255, 255, .7)),
   // Muted: GitHub-ish neutral (antes era sage-tinted #5a6a5e — verde demais em form helper text)
-  --matcha-color-text-muted: #{if($is-dark, #a8b5a0, #6e7681)};
-  --matcha-color-text-label: #{if($is-dark, #bdc1c6, #7a818a)};
+  text-muted: (light: #6e7681, dark: #a8b5a0),
+  text-label: (light: #7a818a, dark: #bdc1c6),
   // Placeholder: #7a818a (4.5:1 sobre card — passa AA mantendo low-emphasis)
-  --matcha-color-text-placeholder: #{if($is-dark, #6e747a, #7a818a)};
-  --matcha-color-text-hint: #{if($is-dark, #9aa0a6, #7a818a)};
-  --matcha-color-text-static-light: #ffffff;
-  --matcha-color-text-static-dark: #1a1d21;
+  text-placeholder: (light: #7a818a, dark: #6e747a),
+  text-hint: (light: #7a818a, dark: #9aa0a6),
+  text-static-light: (light: #ffffff, dark: #ffffff),
+  text-static-dark: (light: #1a1d21, dark: #1a1d21),
 
   // ── Icon (2) — matcha/color/icon/* ───────────────────────────────────────
   // Light mode softening 2026-05-18:
   //   default #5f656b → #75767a — recua ícones decorativos (sort, leading) pra não competir com texto
   //   active  #1a1d21 → #3d4248 — ainda firme mas menos "tinta china" em toggles/sortable headers
-  --matcha-color-icon-default: #{if($is-dark, #9aa0a6, #75767a)};
-  --matcha-color-icon-active: #{if($is-dark, #e8eaed, #3d4248)};
+  icon-default: (light: #9aa0a6, dark: #9aa0a6),
+  icon-active: (light: #3d4248, dark: #e8eaed),
 
   // ── Interaction (4) — matcha/color/interaction/* ─────────────────────────
   // Light mode: disabled sólido com sage tint (antes alpha sobre bg = inconsistente)
-  --matcha-color-interaction-disabled-bg: #{if($is-dark, #282c34, #cfd6d1)};
-  --matcha-color-interaction-disabled-bg-alpha: #{if($is-dark, rgba(#282c34, .5), rgba(#cfd6d1, .5))};
-  --matcha-color-interaction-disabled-fg: #{if($is-dark, rgba(#e8eaed, .38), #8a9090)};
-  --matcha-color-interaction-disabled-border: #{if($is-dark, rgba(#e8eaed, .38), #c8d2ca)};
-  --matcha-color-focus-ring: #{if($is-dark, #a8d94e, #43a047)};
+  interaction-disabled-bg: (light: #cfd6d1, dark: #282c34),
+  interaction-disabled-bg-alpha: (light: rgba(#cfd6d1, .5), dark: rgba(#282c34, .5)),
+  interaction-disabled-fg: (light: #8a9090, dark: rgba(#e8eaed, .38)),
+  interaction-disabled-border: (light: #c8d2ca, dark: rgba(#e8eaed, .38)),
+  focus-ring: (light: #43a047, dark: #a8d94e),
   // Aliases legados
-  --matcha-color-disabled: #{if($is-dark, #282c34, #cfd6d1)};
-  --matcha-color-disabled-fg: #{if($is-dark, rgba(#e8eaed, .38), #8a9090)};
-  --matcha-color-disabled-border: #{if($is-dark, rgba(#e8eaed, .38), #c8d2ca)};
-  --matcha-color-disabled-bg: #{if($is-dark, #282c34, #cfd6d1)};
+  disabled: (light: #cfd6d1, dark: #282c34),
+  disabled-fg: (light: #8a9090, dark: rgba(#e8eaed, .38)),
+  disabled-border: (light: #c8d2ca, dark: rgba(#e8eaed, .38)),
+  disabled-bg: (light: #cfd6d1, dark: #282c34),
 
   // ── Neutral (4 tokens Figma matcha/color/neutral/*) ───────────────────────
   // Cor base pra botões e controles sem ênfase semântica (basic, ghost default).
   // Light: sage-tinted grey | Dark: grey neutro escuro.
-  --matcha-color-neutral: #{if($is-dark, #282c34, #e4ebe5)};
-  --matcha-color-neutral-contrast: #{if($is-dark, #e8eaed, #1a1d21)};
-  --matcha-color-neutral-alpha: #{if($is-dark, rgba(#e8eaed, .1), rgba(#1a1d21, .08))};
-  --matcha-color-neutral-hover: #{if($is-dark, #333842, #d8e1da)};
+  neutral: (light: #e4ebe5, dark: #282c34),
+  neutral-contrast: (light: #1a1d21, dark: #e8eaed),
+  neutral-alpha: (light: rgba(#1a1d21, .08), dark: rgba(#e8eaed, .1)),
+  neutral-hover: (light: #d8e1da, dark: #333842),
 
   // ── Elevation (6) — matcha/color/elevation/* ─────────────────────────────
-  --matcha-color-elevation-surface-1: #{if($is-dark, #1c1f26, #f8faf8)};   // cards, dropdowns (sage)
-  --matcha-color-elevation-surface-2: #{if($is-dark, #262a32, #ffffff)};   // menus, floating
-  --matcha-color-elevation-surface-3: #{if($is-dark, #2e333c, #ffffff)};   // modals, drawers
+  elevation-surface-1: (light: #f8faf8, dark: #1c1f26),   // cards, dropdowns (sage)
+  elevation-surface-2: (light: #ffffff, dark: #262a32),   // menus, floating
+  elevation-surface-3: (light: #ffffff, dark: #2e333c),   // modals, drawers
   // Shadow base: Figma light usa tinta accent #1A2C1E (não preto puro), dark usa #000000
-  --matcha-color-elevation-shadow: #{if($is-dark, #000000, #1a2c1e)};
-  --matcha-color-elevation-shadow-tint: #{if($is-dark, #000000, #1a2c1e)};  // tint da marca pra shadows light
-  --matcha-color-elevation-scrim: #000000;
+  elevation-shadow: (light: #1a2c1e, dark: #000000),
+  elevation-shadow-tint: (light: #1a2c1e, dark: #000000),  // tint da marca pra shadows light
+  elevation-scrim: (light: #000000, dark: #000000),
   // Figma matcha/color/state-layer/fg (camada sobre interações)
-  --matcha-color-state-layer-fg: #{if($is-dark, #ffffff, #000000)};
+  state-layer-fg: (light: #000000, dark: #ffffff),
 
   // ── Accent (10) — matcha/color/accent/* ──────────────────────────────────
   // Brand inChurch: lime/chartreuse #86BD00 (hue 78°, "matcha tea").
@@ -166,134 +160,183 @@
   // accent-contrast 1:1 Figma DSV3: rgba(0,0,0,.87) em AMBOS os modos (Light + Dark).
   // É label-on-accent ripple/text token, semantica é "preto sobre amarelo-lima". Pra label
   // branco em Filled buttons use accent/text-on (branco no Light / quase-preto no Dark).
-  --matcha-color-accent: #{if($is-dark, #a8d94e, #54a71d)};
-  --matcha-color-accent-contrast: rgba(0,0,0,.87);
-  --matcha-color-accent-contrast-alpha: rgba(0,0,0,.1);
+  accent: (light: #54a71d, dark: #a8d94e),
+  accent-contrast: (light: rgba(0, 0, 0, .87), dark: rgba(0, 0, 0, .87)),
+  accent-contrast-alpha: (light: rgba(0, 0, 0, .1), dark: rgba(0, 0, 0, .1)),
   // Figma matcha/color/accent/text-on — branco puro Light / quase preto Dark.
   // Dedicado pra foreground sobre accent/default em Filled buttons, icon buttons.
   // Garante contraste ≥ 3:1 em ambos modos (supera accent/contrast que é preto fixo).
-  --matcha-color-accent-text-on: #{if($is-dark, #1a1d21, #ffffff)};
-  --matcha-color-accent-alpha: #{if($is-dark, rgba(#a8d94e, .1), rgba(#54a71d, .1))};
+  accent-text-on: (light: #ffffff, dark: #1a1d21),
+  accent-alpha: (light: rgba(#54a71d, .1), dark: rgba(#a8d94e, .1)),
   // Light/dark auxiliares: spring green tint (hue 143° matching accent base)
-  --matcha-color-accent-light: #{if($is-dark, #b9f6ca, #b9e3a3)};
-  --matcha-color-accent-dark: #{if($is-dark, #c5e1a5, #3a7515)};
+  accent-light: (light: #b9e3a3, dark: #b9f6ca),
+  accent-dark: (light: #3a7515, dark: #c5e1a5),
   // Hover/pressed: step ~10% darker mesma hue (3.0:1 → 3.75:1 → 4.7:1)
-  --matcha-color-accent-hover: #{if($is-dark, #bee57a, #4b9519)};
-  --matcha-color-accent-pressed: #{if($is-dark, #d4eea0, #428316)};
+  accent-hover: (light: #4b9519, dark: #bee57a),
+  accent-pressed: (light: #428316, dark: #d4eea0),
   // Surface tints — light spring green
-  --matcha-color-accent-surface-hover: #{if($is-dark, #161e12, #e8f3dc)};
-  --matcha-color-accent-surface-pressed: #{if($is-dark, #1f2d18, #cbe4ab)};
+  accent-surface-hover: (light: #e8f3dc, dark: #161e12),
+  accent-surface-pressed: (light: #cbe4ab, dark: #1f2d18),
 
   // ── Accent Secondary (teal — 4 tokens Figma matcha/color/accent-2/*) ─────
   // Light #00796b (teal-700) | Dark #4fb7ad (teal-light)
-  --matcha-color-accent-2: #{if($is-dark, #4fb7ad, #00796b)};
-  --matcha-color-accent-2-contrast: #ffffff;
-  --matcha-color-accent-2-alpha: #{if($is-dark, rgba(#4fb7ad, .12), rgba(#00796b, .10))};
-  --matcha-color-accent-2-surface: #{if($is-dark, #1d332e, #e0f0ee)};
+  accent-2: (light: #00796b, dark: #4fb7ad),
+  accent-2-contrast: (light: #ffffff, dark: #ffffff),
+  accent-2-alpha: (light: rgba(#00796b, .10), dark: rgba(#4fb7ad, .12)),
+  accent-2-surface: (light: #e0f0ee, dark: #1d332e),
 
   // ── Primary (10) — matcha/color/primary/* ────────────────────────────────
   // Light #1664c2 (blue-700) | Dark #64b5f6 (blue-300)
-  --matcha-color-primary: #{if($is-dark, #64b5f6, #1664c2)};
-  --matcha-color-primary-contrast: #{if($is-dark, rgba(0,0,0,.87), #ffffff)};
-  --matcha-color-primary-contrast-alpha: #{if($is-dark, rgba(0,0,0,.1), rgba(255,255,255,.1))};
-  --matcha-color-primary-alpha: #{if($is-dark, rgba(#64b5f6, .1), rgba(#1664c2, .1))};
-  --matcha-color-primary-light: #{if($is-dark, #bbdefb, #b3d7fd)};
-  --matcha-color-primary-dark: #{if($is-dark, #90caf9, #0d3c8c)};
-  --matcha-color-primary-hover: #{if($is-dark, #90caf9, #2576d2)};
-  --matcha-color-primary-pressed: #{if($is-dark, #bbdefb, #378ce1)};
-  --matcha-color-primary-surface-hover: #{if($is-dark, #141922, #e4eefa)};
-  --matcha-color-primary-surface-pressed: #{if($is-dark, #1a2436, #cddef5)};
+  primary: (light: #1664c2, dark: #64b5f6),
+  primary-contrast: (light: #ffffff, dark: rgba(0, 0, 0, .87)),
+  primary-contrast-alpha: (light: rgba(255, 255, 255, .1), dark: rgba(0, 0, 0, .1)),
+  primary-alpha: (light: rgba(#1664c2, .1), dark: rgba(#64b5f6, .1)),
+  primary-light: (light: #b3d7fd, dark: #bbdefb),
+  primary-dark: (light: #0d3c8c, dark: #90caf9),
+  primary-hover: (light: #2576d2, dark: #90caf9),
+  primary-pressed: (light: #378ce1, dark: #bbdefb),
+  primary-surface-hover: (light: #e4eefa, dark: #141922),
+  primary-surface-pressed: (light: #cddef5, dark: #1a2436),
 
   // ── Feedback — Success (9) ───────────────────────────────────────────────
-  --matcha-color-success: #{if($is-dark, #69f0ae, #2e7d32)};
-  --matcha-color-success-contrast: #{if($is-dark, rgba(0,0,0,.87), #ffffff)};
-  --matcha-color-success-contrast-alpha: #{if($is-dark, rgba(0,0,0,.1), rgba(255,255,255,.1))};
-  --matcha-color-success-alpha: #{if($is-dark, rgba(#69f0ae, .1), rgba(#2e7d32, .1))};
-  --matcha-color-success-hover: #{if($is-dark, #4cd992, #388e3c)};
-  --matcha-color-success-pressed: #{if($is-dark, #33c078, #43a047)};
-  --matcha-color-success-fill: #{if($is-dark, #43a047, #2e7d32)};
-  --matcha-color-success-surface-hover: #{if($is-dark, #121d17, #e8f5e9)};
-  --matcha-color-success-surface-pressed: #{if($is-dark, #192f24, #c8e6c9)};
+  success: (light: #2e7d32, dark: #69f0ae),
+  success-contrast: (light: #ffffff, dark: rgba(0, 0, 0, .87)),
+  success-contrast-alpha: (light: rgba(255, 255, 255, .1), dark: rgba(0, 0, 0, .1)),
+  success-alpha: (light: rgba(#2e7d32, .1), dark: rgba(#69f0ae, .1)),
+  success-hover: (light: #388e3c, dark: #4cd992),
+  success-pressed: (light: #43a047, dark: #33c078),
+  success-fill: (light: #2e7d32, dark: #43a047),
+  success-surface-hover: (light: #e8f5e9, dark: #121d17),
+  success-surface-pressed: (light: #c8e6c9, dark: #192f24),
 
   // ── Feedback — Danger (9) ────────────────────────────────────────────────
-  --matcha-color-danger: #{if($is-dark, #ef9a9a, #c81010)};
-  --matcha-color-danger-contrast: #{if($is-dark, rgba(0,0,0,.87), #ffffff)};
-  --matcha-color-danger-contrast-alpha: #{if($is-dark, rgba(0,0,0,.1), rgba(255,255,255,.1))};
-  --matcha-color-danger-alpha: #{if($is-dark, rgba(#ef9a9a, .1), rgba(#c81010, .1))};
-  --matcha-color-danger-hover: #{if($is-dark, #f4b8b8, #da2c2c)};
-  --matcha-color-danger-pressed: #{if($is-dark, #f7d0d0, #e64848)};
-  --matcha-color-danger-fill: #{if($is-dark, #e53935, #c81010)};
-  --matcha-color-danger-surface-hover: #{if($is-dark, #1d1616, #fae8e8)};
-  --matcha-color-danger-surface-pressed: #{if($is-dark, #2f2121, #f5d2d2)};
+  danger: (light: #c81010, dark: #ef9a9a),
+  danger-contrast: (light: #ffffff, dark: rgba(0, 0, 0, .87)),
+  danger-contrast-alpha: (light: rgba(255, 255, 255, .1), dark: rgba(0, 0, 0, .1)),
+  danger-alpha: (light: rgba(#c81010, .1), dark: rgba(#ef9a9a, .1)),
+  danger-hover: (light: #da2c2c, dark: #f4b8b8),
+  danger-pressed: (light: #e64848, dark: #f7d0d0),
+  danger-fill: (light: #c81010, dark: #e53935),
+  danger-surface-hover: (light: #fae8e8, dark: #1d1616),
+  danger-surface-pressed: (light: #f5d2d2, dark: #2f2121),
 
   // ── Feedback — Warn (9) ──────────────────────────────────────────────────
   // Light #a64e00 (âmbar escuro) | Dark #ffb74d (orange-300)
-  --matcha-color-warn: #{if($is-dark, #ffb74d, #a64e00)};
-  --matcha-color-warn-contrast: #{if($is-dark, rgba(0,0,0,.87), #ffffff)};
-  --matcha-color-warn-contrast-alpha: #{if($is-dark, rgba(0,0,0,.1), rgba(255,255,255,.1))};
-  --matcha-color-warn-alpha: #{if($is-dark, rgba(#ffb74d, .1), rgba(#a64e00, .1))};
-  --matcha-color-warn-hover: #{if($is-dark, #e69f33, #924200)};
-  --matcha-color-warn-pressed: #{if($is-dark, #cc881a, #7e3600)};
-  --matcha-color-warn-fill: #{if($is-dark, #fb8c00, #a64e00)};
-  --matcha-color-warn-surface-hover: #{if($is-dark, #1e1910, #fcf0e1)};
-  --matcha-color-warn-surface-pressed: #{if($is-dark, #2f2616, #f8e1c3)};
+  warn: (light: #a64e00, dark: #ffb74d),
+  warn-contrast: (light: #ffffff, dark: rgba(0, 0, 0, .87)),
+  warn-contrast-alpha: (light: rgba(255, 255, 255, .1), dark: rgba(0, 0, 0, .1)),
+  warn-alpha: (light: rgba(#a64e00, .1), dark: rgba(#ffb74d, .1)),
+  warn-hover: (light: #924200, dark: #e69f33),
+  warn-pressed: (light: #7e3600, dark: #cc881a),
+  warn-fill: (light: #a64e00, dark: #fb8c00),
+  warn-surface-hover: (light: #fcf0e1, dark: #1e1910),
+  warn-surface-pressed: (light: #f8e1c3, dark: #2f2616),
 
   // ── Feedback — Info (8) ──────────────────────────────────────────────────
-  --matcha-color-info: #{if($is-dark, #4090d8, #0a2fc2)};
-  --matcha-color-info-contrast: #ffffff;
-  --matcha-color-info-contrast-alpha: rgba(255,255,255,.1);
-  --matcha-color-info-alpha: #{if($is-dark, rgba(#4090d8, .1), rgba(#0a2fc2, .1))};
-  --matcha-color-info-hover: #{if($is-dark, #5aa0e0, #294cd4)};
-  --matcha-color-info-pressed: #{if($is-dark, #74b0e8, #4265e0)};
-  --matcha-color-info-surface-hover: #{if($is-dark, #0f141e, #ebeefa)};
-  --matcha-color-info-surface-pressed: #{if($is-dark, #131f31, #d8def5)};
+  info: (light: #0a2fc2, dark: #4090d8),
+  info-contrast: (light: #ffffff, dark: #ffffff),
+  info-contrast-alpha: (light: rgba(255, 255, 255, .1), dark: rgba(255, 255, 255, .1)),
+  info-alpha: (light: rgba(#0a2fc2, .1), dark: rgba(#4090d8, .1)),
+  info-hover: (light: #294cd4, dark: #5aa0e0),
+  info-pressed: (light: #4265e0, dark: #74b0e8),
+  info-surface-hover: (light: #ebeefa, dark: #0f141e),
+  info-surface-pressed: (light: #d8def5, dark: #131f31),
+
+  // ── Palette (18) — matcha/color/palette/* ────────────────────────────────
+  palette-teal: (light: #00796b, dark: #4fb7ad),
+  palette-teal-light: (light: #4fb7ad, dark: #009688),
+  palette-teal-alpha: (light: rgba(#00796b, .1), dark: rgba(#4fb7ad, .1)),
+  palette-light-blue: (light: #0288d1, dark: #54c5f7),
+  palette-light-blue-light: (light: #54c5f7, dark: #03a9f4),
+  palette-light-blue-alpha: (light: rgba(#0288d1, .1), dark: rgba(#54c5f7, .1)),
+  palette-purple: (light: #9c27b0, dark: #bb6ac8),
+  palette-purple-light: (light: #bb6ac8, dark: #9c27b0),
+  palette-purple-alpha: (light: rgba(#9c27b0, .1), dark: rgba(#bb6ac8, .1)),
+  palette-pink: (light: #d81b60, dark: #e46291),
+  palette-pink-light: (light: #e46291, dark: #d81b60),
+  palette-pink-alpha: (light: rgba(#d81b60, .1), dark: rgba(#e46291, .1)),
+  palette-orange: (light: #e65100, dark: #f9a25d),
+  palette-orange-light: (light: #f9a25d, dark: #f77814),
+  palette-orange-alpha: (light: rgba(#e65100, .1), dark: rgba(#f9a25d, .1)),
+  palette-yellow: (light: #ffa000, dark: #efd64f),
+  palette-yellow-light: (light: #efd64f, dark: #e8c300),
+  palette-yellow-alpha: (light: rgba(#ffa000, .1), dark: rgba(#efd64f, .1)),
+
+  // ── Chart (5) — matcha/color/chart/* ─────────────────────────────────────
+  chart-series-1: (light: #615ce5, dark: #8782f2),
+  chart-series-2: (light: #42a147, dark: #66ba6b),
+  chart-series-3: (light: #ed6645, dark: #f5876b),
+  chart-series-4: (light: #c28700, dark: #ffc93d),
+  chart-series-5: (light: #008094, dark: #26c2d9),
+);
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 2. MAPAS FLAT POR MODO — token → valor (derivados de $matcha-color-tokens).
+//    Consumidos pelo emissor abaixo e pela theme API
+//    (matcha-build-color-map() em abstracts/_theme-api.scss).
+// ═══════════════════════════════════════════════════════════════════════════
+@function matcha-default-colors($mode) {
+  $out: ();
+  @each $token, $modes in $matcha-color-tokens {
+    $out: map.set($out, $token, map.get($modes, $mode));
+  }
+  @return $out;
+}
+
+$matcha-colors-light: matcha-default-colors(light);
+$matcha-colors-dark: matcha-default-colors(dark);
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 3. EMISSOR GENÉRICO — mapa flat (token → valor) vira --matcha-color-<token>.
+//    Usado pelo mixin canônico abaixo e por matcha-define-theme() (theme API).
+// ═══════════════════════════════════════════════════════════════════════════
+// $aliases (opcional): token → "--matcha-prim-*". Quando presente p/ um token, emite
+// `var(--matcha-prim-*)` (Camada 2 referencia a primitiva) em vez do hex literal.
+// A rota clássica (matcha-css-custom-properties) passa $matcha-prim-aliases-{light,dark};
+// matcha-define-theme() não passa (mantém hex computado dos seeds — whitelabel intacto).
+@mixin matcha-emit-color-properties($colors, $aliases: ()) {
+  @each $token, $value in $colors {
+    $alias: map.get($aliases, $token);
+    @if $alias {
+      --matcha-color-#{$token}: var(#{$alias});
+    } @else {
+      --matcha-color-#{$token}: #{$value};
+    }
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 4. MIXIN CANÔNICO — assinatura preservada (retrocompat).
+// ═══════════════════════════════════════════════════════════════════════════
+@mixin matcha-css-custom-properties($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  // ── Cores semânticas (ver $matcha-color-tokens acima) ────────────────────
+  // Aliases sólidos → var(--matcha-prim-*); derivados/alphas/cross-semantic → hex literal.
+  @include matcha-emit-color-properties(
+    if($is-dark, $matcha-colors-dark, $matcha-colors-light),
+    if($is-dark, $matcha-prim-aliases-dark, $matcha-prim-aliases-light)
+  );
 
   // ── Feedback namespace (matcha/color/feedback/* canon DSV3) ───────────────
   // Aliases semânticos pros tokens base — namespace dedicado pra status/banners/
   // table row variants. Naming match Figma DSV3 (flat: feedback/info, sem suffix).
-  --matcha-color-feedback-info:    var(--matcha-color-info);
+  --matcha-color-feedback-info: var(--matcha-color-info);
   --matcha-color-feedback-success: var(--matcha-color-success);
-  --matcha-color-feedback-warn:    var(--matcha-color-warn);
-  --matcha-color-feedback-danger:  var(--matcha-color-danger);
+  --matcha-color-feedback-warn: var(--matcha-color-warn);
+  --matcha-color-feedback-danger: var(--matcha-color-danger);
 
   // Variantes alpha pra row backgrounds, badges filled-alpha, etc.
-  --matcha-color-feedback-info-alpha:    var(--matcha-color-info-alpha);
+  --matcha-color-feedback-info-alpha: var(--matcha-color-info-alpha);
   --matcha-color-feedback-success-alpha: var(--matcha-color-success-alpha);
-  --matcha-color-feedback-warn-alpha:    var(--matcha-color-warn-alpha);
-  --matcha-color-feedback-danger-alpha:  var(--matcha-color-danger-alpha);
+  --matcha-color-feedback-warn-alpha: var(--matcha-color-warn-alpha);
+  --matcha-color-feedback-danger-alpha: var(--matcha-color-danger-alpha);
 
   // Surface hover (bg tinted pra hover em row de table)
-  --matcha-color-feedback-info-surface-hover:    var(--matcha-color-info-surface-hover);
+  --matcha-color-feedback-info-surface-hover: var(--matcha-color-info-surface-hover);
   --matcha-color-feedback-success-surface-hover: var(--matcha-color-success-surface-hover);
-  --matcha-color-feedback-warn-surface-hover:    var(--matcha-color-warn-surface-hover);
-  --matcha-color-feedback-danger-surface-hover:  var(--matcha-color-danger-surface-hover);
-
-  // ── Palette (18) — matcha/color/palette/* ────────────────────────────────
-  --matcha-color-palette-teal: #{if($is-dark, #4fb7ad, #00796b)};
-  --matcha-color-palette-teal-light: #{if($is-dark, #009688, #4fb7ad)};
-  --matcha-color-palette-teal-alpha: #{if($is-dark, rgba(#4fb7ad, .1), rgba(#00796b, .1))};
-  --matcha-color-palette-light-blue: #{if($is-dark, #54c5f7, #0288d1)};
-  --matcha-color-palette-light-blue-light: #{if($is-dark, #03a9f4, #54c5f7)};
-  --matcha-color-palette-light-blue-alpha: #{if($is-dark, rgba(#54c5f7, .1), rgba(#0288d1, .1))};
-  --matcha-color-palette-purple: #{if($is-dark, #bb6ac8, #9c27b0)};
-  --matcha-color-palette-purple-light: #{if($is-dark, #9c27b0, #bb6ac8)};
-  --matcha-color-palette-purple-alpha: #{if($is-dark, rgba(#bb6ac8, .1), rgba(#9c27b0, .1))};
-  --matcha-color-palette-pink: #{if($is-dark, #e46291, #d81b60)};
-  --matcha-color-palette-pink-light: #{if($is-dark, #d81b60, #e46291)};
-  --matcha-color-palette-pink-alpha: #{if($is-dark, rgba(#e46291, .1), rgba(#d81b60, .1))};
-  --matcha-color-palette-orange: #{if($is-dark, #f9a25d, #e65100)};
-  --matcha-color-palette-orange-light: #{if($is-dark, #f77814, #f9a25d)};
-  --matcha-color-palette-orange-alpha: #{if($is-dark, rgba(#f9a25d, .1), rgba(#e65100, .1))};
-  --matcha-color-palette-yellow: #{if($is-dark, #efd64f, #ffa000)};
-  --matcha-color-palette-yellow-light: #{if($is-dark, #e8c300, #efd64f)};
-  --matcha-color-palette-yellow-alpha: #{if($is-dark, rgba(#efd64f, .1), rgba(#ffa000, .1))};
-
-  // ── Chart (5) — matcha/color/chart/* ─────────────────────────────────────
-  --matcha-color-chart-series-1: #{if($is-dark, #8782f2, #615ce5)};
-  --matcha-color-chart-series-2: #{if($is-dark, #66ba6b, #42a147)};
-  --matcha-color-chart-series-3: #{if($is-dark, #f5876b, #ed6645)};
-  --matcha-color-chart-series-4: #{if($is-dark, #ffc93d, #c28700)};
-  --matcha-color-chart-series-5: #{if($is-dark, #26c2d9, #008094)};
+  --matcha-color-feedback-warn-surface-hover: var(--matcha-color-warn-surface-hover);
+  --matcha-color-feedback-danger-surface-hover: var(--matcha-color-danger-surface-hover);
 
   // ── Spacing (14 tokens — matches matcha/space/* exato) ────────────────────
   --matcha-space-025: 2px;
@@ -440,6 +483,17 @@
   --matcha-shadow-3: #{if($is-dark, $shadow-3-dark, $shadow-3-light)};
   --matcha-shadow-4: #{if($is-dark, $shadow-4-dark, $shadow-4-light)};
 
+  // ── Vars estruturais de componente (mode-dependentes, ex-@if $is-dark) ───
+  // Bordas que só existiam no dark + shimmer do skeleton. No light viram no-op
+  // (0/transparent) pra não alterar layout. O $is-dark aqui é o seletor de modo
+  // legítimo da emissão (mesmo papel dos shadows acima) — não é o $is-dark
+  // espalhado nos componentes, que foi eliminado na migração runtime-theming.
+  --matcha-skeleton-shimmer: #{if($is-dark, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.5))};
+  --matcha-chart-card-border: #{if($is-dark, 1px solid rgba(#212121, 0.06), 0 solid transparent)};
+  --matcha-section-border: #{if($is-dark, 1px solid rgba(#212121, 0.06), 0 solid transparent)};
+  --matcha-calendar-border: #{if($is-dark, 1px solid var(--matcha-color-surface-border), 0 solid transparent)};
+  --matcha-drawer-border: #{if($is-dark, 1px solid var(--matcha-color-surface-border), 0 solid transparent)};
+
   // ── Animation (4 tokens — matches matcha/duration/* from Figma) ──────────
   --matcha-duration-instant: 80ms;
   --matcha-duration-fast: 200ms;