@inchurch/matcha-theme 20.277.0 → 21.0.0

package/tokens/_emit-tokens.scss

@@ -0,0 +1,334 @@
+// =============================================================================
+// MATCHA — EMISSÃO DOS TOKENS DO TEMA (CSS custom properties)
+// =============================================================================
+// Lógica de emissão À MÃO (NÃO é gerado). Monta as --matcha-* de um tema.
+// Os DADOS vêm de arquivos próprios, Figma-sourced:
+//   - cor:        _color-tokens.scss      ($matcha-color-tokens — synced via sync-tokens)
+//   - primitivas: _primitives.scss        (gerado · --matcha-prim-*)
+//   - aliases:    _semantic-aliases.scss  (gerado · papel → primitiva)
+//   - não-cor:    migrarão p/ _static-tokens.scss (gerado de global.json — A2)
+// O mixin matcha-css-custom-properties($theme) (API PÚBLICA — nome preservado) emite
+// cor (via matcha-emit-color-properties) + estáticos + mode-dependent + aliases.
+// IMPORT ORDER: main.scss importa _color-tokens ANTES deste arquivo.
+// =============================================================================
+@use "sass:map";
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 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($is-dark: false) {
+  // API nova: recebe SÓ o modo (is-dark). As cores vêm das synced tokens do Figma
+  // ($matcha-colors-light/dark), não de um mapa $theme construído por light-theme().
+
+  // ── 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)
+  );
+
+  // ── Cores de PALETA como tokens (base mode-flipped) ───────────────────────
+  // Alimentam as utility classes .color-red/.background-grey/.{name} etc. via var(),
+  // substituindo o caminho compile-time getRed($theme)/Material. Value-preserving:
+  // mesmo valor que getRed/getRedAlpha/getRedContrast (shade 500 light / 100 dark).
+  // Mantém as classes funcionando (painel intacto) e theme-agnósticas no ponto de uso.
+  $-palette-shade: if($is-dark, 100, 500);
+  @each $-name, $-pal in (
+    "red": $red, "pink": $pink, "purple": $purple, "deep-purple": $deep-purple, "indigo": $indigo,
+    "blue": $blue, "light-blue": $light-blue, "cyan": $cyan, "teal": $teal, "green": $green,
+    "light-green": $light-green, "lime": $lime, "yellow": $yellow, "amber": $amber, "orange": $orange,
+    "deep-orange": $deep-orange, "brown": $brown, "grey": $grey, "blue-grey": $blue-grey
+  ) {
+    $-c: map.get($-pal, $-palette-shade);
+    $-cc: map.get(map.get($-pal, 'contrast'), $-palette-shade);
+    --matcha-color-#{$-name}: #{$-c};
+    --matcha-color-#{$-name}-alpha: #{rgba($-c, 0.1)};
+    --matcha-color-#{$-name}-contrast: #{$-cc};
+    --matcha-color-#{$-name}-contrast-alpha: #{rgba($-cc, 0.1)};
+  }
+
+  // ── 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-success: var(--matcha-color-success);
+  --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-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);
+
+  // 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-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);
+
+  // ── Spacing (14 tokens — matches matcha/space/* exato) ────────────────────
+  // ── Tokens não-cor (gerados do Figma) — ver _static-tokens.scss (A2) ──
+  @include matcha-static-tokens();
+
+
+  // ── Border radius (8 tokens — matches matcha/radius/* exato) ─────────────
+  // Alias legado pra usos em páginas de doc (refatorar depois pra usar radius-2xl)
+  --matcha-radius-card: var(--matcha-radius-2xl);
+
+  // ── Border width (4 tokens — matches matcha/border/* exato) ──────────────
+
+  // ── Font family (1 token) ────────────────────────────────────────────────
+
+  // ── Font size (13 tokens — matches matcha/font/size/* from Figma) ─────────
+
+  // ── Font weight (8 tokens — matches matcha/font/weight/* exato) ──────────
+  // Canônico Figma: extralight (200), light (300), normal (400), medium (500),
+  // semi-bold (600), bold (700), extrabold (800), black (900)
+  // Código mantém regular/semibold por retrocompat + aliases Figma-exatos
+  --matcha-weight-regular: 400;
+  --matcha-weight-semibold: 600;
+
+  // ── Typography — 15 canonical text styles (1:1 com matcha/text/* Figma) ──
+  // 13 styles publicados + `display` e `p-tiny` (recriados no Figma 2026-06-03).
+  --matcha-text-display-hero: 36px; // matcha/text/Stat Card    (EB 36/40/-1.2)
+  --matcha-text-display: 32px;      // matcha/text/display      (Bold 32/40/-0.3)
+  --matcha-text-headline: 24px;     // matcha/text/headline     (Bold 24/32/-0.3)
+  --matcha-text-title-lg: 20px;     // matcha/text/title-large  (SemiBold 20/28)
+  --matcha-text-title-md: 18px;     // matcha/text/title-medium (SemiBold 18/24)
+  --matcha-text-title-sm: 16px;     // matcha/text/title-small  (SemiBold 16/22)
+  --matcha-text-title-xs: 14px;     // matcha/text/title-tiny   (ExtraBold 14/20)
+  --matcha-text-body-lg: 16px;      // matcha/text/p-large      (Regular 16/24)
+  --matcha-text-body-md: 14px;      // matcha/text/p-medium     (Regular 14/20)
+  --matcha-text-body-sm: 12px;      // matcha/text/p-small      (Regular 12/16)
+  --matcha-text-p-tiny: 11px;       // matcha/text/p-tiny       (Regular 11/14/0.3)
+  --matcha-text-label-lg: 16px;     // matcha/text/label-large  (Medium 16/22)
+  --matcha-text-label-md: 14px;     // matcha/text/label-medium (Medium 14/20)
+  --matcha-text-label-sm: 12px;     // matcha/text/label-small  (Medium 12/16)
+  --matcha-text-overline: 10px;     // matcha/text/Uppercase    (SemiBold 10/14/1)
+
+  // Shorthand aliases (usados massivamente em components/*.scss)
+  --matcha-text-xs: var(--matcha-text-p-tiny);    // 11px  — legendas, metadados
+  --matcha-text-sm: var(--matcha-text-body-sm);   // 12px  — texto auxiliar
+  --matcha-text-md: var(--matcha-text-body-md);   // 14px  — corpo padrão
+  --matcha-text-lg: var(--matcha-text-body-lg);   // 16px  — texto de destaque
+  --matcha-text-xl: var(--matcha-text-title-md);  // 18px  — títulos de grupo
+
+  // ── Line heights — canônico (matches Figma text styles) ──────────────────
+  --matcha-leading-display-hero: 40px; // Stat Card
+  --matcha-leading-display: 40px;
+  --matcha-leading-headline: 32px;
+  --matcha-leading-title-lg: 28px;
+  --matcha-leading-title-md: 24px;
+  --matcha-leading-title-sm: 22px;
+  --matcha-leading-title-xs: 20px;     // title-tiny
+  --matcha-leading-body-lg: 24px;
+  --matcha-leading-body-md: 20px;
+  --matcha-leading-body-sm: 16px;
+  --matcha-leading-p-tiny: 14px;
+  --matcha-leading-label-lg: 22px;
+  --matcha-leading-label-md: 20px;
+  --matcha-leading-label-sm: 16px;
+  --matcha-leading-overline: 14px;     // Uppercase
+
+  // ── Tracking (letter-spacing) — só styles com valor não-zero ─────────────
+  --matcha-tracking-display-hero: -1.2px; // Stat Card
+  --matcha-tracking-display: -0.3px;
+  --matcha-tracking-headline: -0.3px;
+  --matcha-tracking-overline: 1px;        // Uppercase
+  --matcha-tracking-p-tiny: 0.3px;
+
+  // Shorthand aliases para line-heights (acompanham --matcha-text-*)
+  --matcha-leading-xs: var(--matcha-leading-p-tiny);    // 14px
+  --matcha-leading-sm: var(--matcha-leading-body-sm);   // 16px
+  --matcha-leading-md: var(--matcha-leading-body-md);   // 20px
+  --matcha-leading-lg: var(--matcha-leading-body-lg);   // 24px
+  --matcha-leading-xl: var(--matcha-leading-title-md);  // 24px
+
+  // ── Line height primitives (4 tokens — matches matcha/line-height/*) ─────
+
+  // ── Letter spacing (primitives + semantic aliases) ───────────────────────
+  // Semantic aliases alinhados com Figma text styles
+  --matcha-letter-spacing-button: 0.2px;   // matcha/text/button-*
+  --matcha-letter-spacing-caption: 0.3px;  // matcha/text/caption + link-sm
+
+  // ── Elevation (4 shadow tokens) ──────────────────────────────────────────
+  --matcha-shadow-1: #{if($is-dark, $shadow-1-dark, $shadow-1-light)};
+  --matcha-shadow-2: #{if($is-dark, $shadow-2-dark, $shadow-2-light)};
+  --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)};
+  // .text-boxed (tarja de texto) — alpha sobre branco no dark / sobre preto no light.
+  --matcha-color-text-boxed-bg: #{if($is-dark, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.12))};
+  --matcha-color-text-boxed-fg: #{if($is-dark, rgba(255, 255, 255, 0.54), rgba(0, 0, 0, 0.54))};
+
+  // ── Animation (4 tokens — matches matcha/duration/* from Figma) ──────────
+
+  // ── Easing (4 tokens — matches matcha/easing/* from Figma) ───────────────
+
+  // ── Opacity (7 tokens — matches matcha/opacity/* from Figma) ─────────────
+  --matcha-opacity-overlay-soft: 0.40;
+  // Específico do matcha/option (Figma DSV3 14237:113) — diferente do disabled global (0.38)
+  --matcha-opacity-option-disabled: 0.5;
+
+  // ── State layers (matches matcha/state-layer/* from Figma) ────────────────
+  // Aliases legados (usados nos componentes atuais)
+  --matcha-state-hover: var(--matcha-state-layer-hover);
+  --matcha-state-active: var(--matcha-state-layer-pressed);
+  --matcha-state-focus-ring-width: 2px;
+  --matcha-state-focus-ring-offset: 2px;
+
+  // ── Scrim / Overlay (Figma matcha/overlay Type=Modal / Type=Drawer) ──────
+  --matcha-scrim-modal: rgba(0, 0, 0, 0.5);
+  --matcha-scrim-modal-blur: 6px;
+  --matcha-scrim-drawer: rgba(0, 0, 0, 0.3);
+  --matcha-scrim-drawer-blur: 4px;
+
+  // ── Icon sizes (4 tokens — matches matcha/icon/size/* exato) ─────────────
+
+  // ── Avatar sizes (1:1 com Figma matcha/avatar — Type=Photo, Size variants)
+  --matcha-avatar-xs:  24px;
+  --matcha-avatar-sm:  32px;
+  --matcha-avatar-md:  40px;
+  --matcha-avatar-lg:  56px;
+  --matcha-avatar-xl:  80px;
+  --matcha-avatar-2xl: 96px;
+  // Status indicator — 1:1 com Figma (Status ellipse em cada Size variant)
+  --matcha-avatar-status-xs:  6px;
+  --matcha-avatar-status-sm:  8px;
+  --matcha-avatar-status-md:  10px;
+  --matcha-avatar-status-lg:  12px;
+  --matcha-avatar-status-xl:  14px;
+  --matcha-avatar-status-2xl: 16px;
+
+  // ── Z-index (8 tokens — matches matcha/z-index/* from Figma) ─────────────
+  // Panel flutuante (matcha-panel) — acima de modal pra suportar select/menu
+  // dentro de modal. Renderizado via portal-to-body fora de stacking contexts.
+  --matcha-z-popover-floating: 10001;
+
+  // ── Grid (22 tokens — 1:1 com matcha/grid/* do Figma) ────────────────────
+  // Frames (breakpoints)
+  // Chrome
+  --matcha-grid-header-height-mobile: 48px;
+  // Gutters (espaço entre colunas)
+  // Column widths (largura INDIVIDUAL de coluna) — Figma verdadeiro
+  // Content widths (área útil total) — Figma verdadeiro
+
+  // Public-facing column widths (site institucional/landing — breakpoint-aware)
+
+  // Horizontal offsets (distância da borda do frame ao primeiro col da grid)
+
+  // ── Breakpoints (6 tokens — Tailwind-aligned, expostos como CSS vars) ────
+  // Pra container queries, JS-side responsive logic (`matchMedia`) e media
+  // queries inline (`@media (min-width: var(...))` em CSS moderno). Valores
+  // alinhados ao padrão Tailwind/Chakra — familiares e cobrem todos os tiers
+  // (mobile pequeno até desktop wide). 1:1 com Figma `matcha/bp/*`.
+  //
+  // NOTA: SCSS `@mixin breakpoint(...)` em `_breakpoints-tokens.scss` usa
+  // valores Angular Material legacy (600/1024/1440/1920) — DESALINHADO destes.
+  // Em refactors novos, prefira CSS custom prop `var(--matcha-bp-md)` em vez
+  // do mixin SCSS.
+
+  // ═════════════════════════════════════════════════════════════════════════
+  // 16. NAMING-PARITY ALIASES
+  // Aliases que espelham o nome exato das variables do Figma, garantindo que
+  // dev possa referenciar o token pelo nome que vê no Figma.
+  // ═════════════════════════════════════════════════════════════════════════
+
+  // Figma: matcha/color/surface/background → ↔ --matcha-color-surface-bg
+  --matcha-color-surface-background: var(--matcha-color-surface-bg);
+  --matcha-color-surface-background-alpha: var(--matcha-color-surface-bg-alpha);
+  --matcha-color-surface-background-inverse: var(--matcha-color-surface-bg-inverse);
+
+  // Figma: matcha/color/neutral/default → ↔ --matcha-color-neutral
+  --matcha-color-neutral-default: var(--matcha-color-neutral);
+
+  // Figma: matcha/color/interaction/focus-ring → ↔ --matcha-color-focus-ring
+  --matcha-color-interaction-focus-ring: var(--matcha-color-focus-ring);
+
+  // Figma: matcha/z-index/{base,dropdown,…} → ↔ --matcha-z-{base,dropdown,…}
+  --matcha-z-index-base: var(--matcha-z-base);
+  --matcha-z-index-dropdown: var(--matcha-z-dropdown);
+  --matcha-z-index-sticky: var(--matcha-z-sticky);
+  --matcha-z-index-popover: var(--matcha-z-popover);
+  --matcha-z-index-tooltip: var(--matcha-z-tooltip);
+  --matcha-z-index-modal-bg: var(--matcha-z-modal-bg);
+  --matcha-z-index-modal: var(--matcha-z-modal);
+  --matcha-z-index-overlay: var(--matcha-z-overlay);
+  --matcha-z-index-popover-floating: var(--matcha-z-popover-floating);
+
+  // Figma: matcha/font/weight/semi-bold → ↔ --matcha-weight-semibold
+  --matcha-font-weight-extralight: var(--matcha-weight-extralight);
+  --matcha-font-weight-light: var(--matcha-weight-light);
+  --matcha-font-weight-semi-bold: var(--matcha-weight-semibold);
+  --matcha-font-weight-regular: var(--matcha-weight-regular);
+  --matcha-font-weight-medium: var(--matcha-weight-medium);
+  --matcha-font-weight-bold: var(--matcha-weight-bold);
+  --matcha-font-weight-extrabold: var(--matcha-weight-extrabold);
+  --matcha-font-weight-black: var(--matcha-weight-black);
+
+  // ═════════════════════════════════════════════════════════════════════════
+  // 17. GRADIENTS
+  // Gradients tonais semânticos. Compostos por 2 stops (alpha → surface-card)
+  // pra dar fade lateral em banners. Mantém compat com Figma — lá cada stop
+  // é uma variable separada (gradients não são tipo nativo de variable).
+  // Centralizar aqui evita repetir o linear-gradient em cada componente.
+  // ═════════════════════════════════════════════════════════════════════════
+
+  // Figma DSV3 (matcha/banner 19080:308): tone="info" mapeia pra primary-alpha
+  // (#64b5f6 azul), não info-alpha (cyan/turquesa) — alinhamento visual com border + eyebrow.
+  --matcha-gradient-banner-info: linear-gradient(
+    90deg,
+    var(--matcha-color-primary-alpha) 0%,
+    var(--matcha-color-surface-card) 100%
+  );
+  --matcha-gradient-banner-success: linear-gradient(
+    90deg,
+    var(--matcha-color-success-alpha) 0%,
+    var(--matcha-color-surface-card) 100%
+  );
+  --matcha-gradient-banner-warning: linear-gradient(
+    90deg,
+    var(--matcha-color-warn-alpha) 0%,
+    var(--matcha-color-surface-card) 100%
+  );
+  --matcha-gradient-banner-accent: linear-gradient(
+    90deg,
+    var(--matcha-color-accent-alpha) 0%,
+    var(--matcha-color-surface-card) 100%
+  );
+  --matcha-gradient-banner-danger: linear-gradient(
+    90deg,
+    var(--matcha-color-danger-alpha) 0%,
+    var(--matcha-color-surface-card) 100%
+  );
+}