@inchurch/matcha-theme 22.40.1 → 22.40.2

package/abstracts/_media-breakpoint.scss

@@ -1,26 +1,26 @@
-@use "../tokens/breakpoints-tokens" as *;
-@use "sass:map";
-
-// -------------------------------------------------------------------------------------------------------------------
-// @ Theme mixins
-// --------------------------------------------------------------------------------------------------------------------
-/*
-    Esse mixin foi criado para não precisar escrever o valor em pixels de cada breakpoint toda vez que for necessário
-    criar um media query. Se em algum momento for necessário alterar o valor de um breakpoint, basta alterar o valor nos
-    tokens e o mixin irá se encarregar de atualizar todos os media queries que utilizam aquele breakpoint.
-
-    Exemplo de uso:
-
-
-
-*/
-@mixin media-breakpoint($breakpointName) {
-    $mediaQuery: map.get($breakpoints, $breakpointName);
-    @if ($mediaQuery == null) {
-        @content;
-    } @else {
-        @media #{$mediaQuery} {
-            @content;
-        }
-    }
-}
+@use "../tokens/breakpoints-tokens" as *;
+@use "sass:map";
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Theme mixins
+// --------------------------------------------------------------------------------------------------------------------
+/*
+    Esse mixin foi criado para não precisar escrever o valor em pixels de cada breakpoint toda vez que for necessário
+    criar um media query. Se em algum momento for necessário alterar o valor de um breakpoint, basta alterar o valor nos
+    tokens e o mixin irá se encarregar de atualizar todos os media queries que utilizam aquele breakpoint.
+
+    Exemplo de uso:
+
+
+
+*/
+@mixin media-breakpoint($breakpointName) {
+    $mediaQuery: map.get($breakpoints, $breakpointName);
+    @if ($mediaQuery == null) {
+        @content;
+    } @else {
+        @media #{$mediaQuery} {
+            @content;
+        }
+    }
+}

package/abstracts/_theme-api.scss

@@ -1,224 +1,224 @@
-@use "functions" as *;
-@use "../tokens/color-tokens" as *;
-// =============================================================================
-// MATCHA THEME API — criação de temas por override de CSS custom properties
-// =============================================================================
-//
-// Um tema Matcha adicional é uma SKIN: uma classe que sobrescreve as CSS vars
-// de cor (--matcha-color-*) emitidas pelos temas default. Os component mixins
-// consomem cor exclusivamente via var(--matcha-*), então a skin re-tematiza a
-// lib inteira sem recompilar matcha-components() (~20k linhas de CSS por tema).
-//
-// CONTRATO DE RUNTIME (duas classes no <body>):
-//   <body class="theme-default-dark theme-nerd">
-//   1. `theme-default-light` OU `theme-default-dark` — a BASE, escolhida pelo
-//      `base` do config. Fornece tudo que ainda é decidido em compile-time
-//      pelos component mixins (blocos `@if $is-dark` estruturais, shadows
-//      default, classes utilitárias) — ver backlog `matcha-theme-003`.
-//   2. `theme-<nome>` — a skin gerada por `matcha-define-theme()`. Deve ser
-//      emitida DEPOIS dos temas default no CSS (ordem de fonte vence, mesma
-//      especificidade).
-//
-// USO:
-//   @use "@inchurch/matcha-theme/main.scss" as matcha;
-//   @include matcha.matcha-define-theme(meu-tema, (
-//     base: dark,
-//     colors: (
-//       // 9 seeds obrigatórios:
-//       surface-bg: #000, surface: #0a120a, text-primary: #33ff33,
-//       accent: #33ff33, primary: #00cc66, success: #33ff33,
-//       danger: #ff3333, warn: #ffcc00, info: #00ccff,
-//       // + qualquer token de $matcha-color-tokens como override fino:
-//       text-muted: #1faa1f,
-//     ),
-//     // opcionais:
-//     shadows: (1: 0 0 4px rgba(51, 255, 51, .4)),  // --matcha-shadow-<n>
-//     font-family: ("Fira Code", monospace),         // --matcha-font-family
-//     radius: (md: 0, lg: 0, pill: 0),               // --matcha-radius-<k>
-//   ));
-//
-// O QUE A SKIN NÃO COBRE (limitações conhecidas — docs/theme-stress-test.md):
-//   - blocos `@if $is-dark` estruturais (calendar, section, drawer, chart-card,
-//     skeleton, reset) seguem a base light/dark escolhida;
-//   - cores hardcoded em componentes (ex.: matcha-page-builder — backlog
-//     `matcha-page-builder-001`);
-//   - cores passadas por @Input/JS (charts) não leem CSS var automaticamente.
-//
-// =============================================================================
-@use "sass:color";
-@use "sass:list";
-@use "sass:map";
-@use "sass:math";
-@use "sass:meta";
-
-$-matcha-theme-bases: (light, dark);
-$-matcha-required-seeds: (surface-bg, surface, text-primary, accent, primary, success, danger, warn, info);
-
-// ── Helpers de contraste ────────────────────────────────────────────────────
-// Luminância perceptual aproximada (YIQ, 0–255).
-
-// Foreground de texto opaco sobre $color (padrão dos tokens *-text-on).
-
-// Foreground de contraste no padrão dos tokens *-contrast (preto .87 / branco).
-
-// ── Emissor genérico de --matcha-color-* ─────────────────────────────────────
-// Movido de _emit-tokens para quebrar o ciclo @use (emit-tokens → color-tokens →
-// theme-api → emit-tokens). Self-contained (só sass:map). Usado por
-// matcha-define-theme (abaixo) e por matcha-css-custom-properties (emit-tokens, via @use).
-@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};
-    }
-  }
-}
-
-// ── Derivação de família de papel (primary/accent/feedback) ────────────────
-// Gera <role>, <role>-hover/-pressed/-alpha/-contrast/-contrast-alpha/
-// -surface-hover/-surface-pressed a partir do seed. Direção do hover segue a
-// base: temas light escurecem no hover, temas dark clareiam (padrão DSV3).
-
-// ── Construção do mapa completo de cores do tema ────────────────────────────
-// Parte dos defaults da base (light/dark), aplica as famílias derivadas dos
-// seeds e, por último, os overrides explícitos de `colors` — ou seja, QUALQUER
-// chave de $matcha-color-tokens pode ser cravada no config e vence a derivação.
-@function matcha-build-color-map($config) {
-  $base: map.get($config, base);
-  @if not list.index($-matcha-theme-bases, $base) {
-    @error "matcha-build-color-map: `base` deve ser `light` ou `dark` (recebido: #{meta.inspect($base)}).";
-  }
-
-  $seeds: map.get($config, colors);
-  @each $required in $-matcha-required-seeds {
-    @if not map.has-key($seeds or (), $required) {
-      @error "matcha-build-color-map: seed obrigatório ausente em `colors`: #{$required}. Obrigatórios: #{meta.inspect($-matcha-required-seeds)}.";
-    }
-  }
-
-  $is-dark: $base == dark;
-  $defaults: if($is-dark, $matcha-colors-dark, $matcha-colors-light);
-
-  $surface-bg: map.get($seeds, surface-bg);
-  $surface: map.get($seeds, surface);
-  $text: map.get($seeds, text-primary);
-  $accent: map.get($seeds, accent);
-
-  // Superfícies e estrutura
-  $derived: (
-    surface-bg: $surface-bg,
-    surface-bg-alpha: rgba($surface-bg, .5),
-    surface: $surface,
-    surface-card: $surface,
-    surface-card-strong: color.scale($surface, $lightness: if($is-dark, 8%, 50%)),
-    surface-inner: if($is-dark, color.scale($surface, $lightness: 8%), $surface-bg),
-    surface-card-alpha: rgba($surface, if($is-dark, .5, .85)),
-    surface-sidebar: color.scale($surface-bg, $lightness: if($is-dark, -25%, -4%)),
-    surface-sidebar-hover: color.scale($surface-bg, $lightness: if($is-dark, -12%, -9%)),
-    surface-table-row-hover: color.mix($text, $surface, 4%),
-    surface-border: color.mix($text, $surface-bg, 10%),
-    surface-border-strong: color.mix($text, $surface-bg, 22%),
-    surface-hover: rgba(color.scale($surface-bg, $lightness: if($is-dark, -25%, -4%)), .5),
-    bg: $surface-bg,
-
-    // Texto e ícones
-    fg: $text,
-    fg-alpha: rgba($text, .5),
-    text-primary: $text,
-    text-secondary: color.mix($text, $surface-bg, 78%),
-    text-muted: color.mix($text, $surface-bg, 62%),
-    text-label: color.mix($text, $surface-bg, 55%),
-    text-placeholder: color.mix($text, $surface-bg, 55%),
-    text-hint: color.mix($text, $surface-bg, 55%),
-    icon-default: color.mix($text, $surface-bg, 65%),
-    icon-active: color.mix($text, $surface-bg, 88%),
-
-    // Neutral + interaction
-    neutral: color.mix($text, $surface-bg, if($is-dark, 12%, 8%)),
-    neutral-contrast: matcha-text-on(color.mix($text, $surface-bg, if($is-dark, 12%, 8%))),
-    neutral-alpha: rgba($text, .08),
-    neutral-hover: color.mix($text, $surface-bg, if($is-dark, 18%, 14%)),
-    interaction-disabled-bg: color.mix($text, $surface-bg, 14%),
-    interaction-disabled-bg-alpha: rgba(color.mix($text, $surface-bg, 14%), .5),
-    interaction-disabled-fg: color.mix($text, $surface-bg, 45%),
-    interaction-disabled-border: color.mix($text, $surface-bg, 18%),
-    disabled: color.mix($text, $surface-bg, 14%),
-    disabled-bg: color.mix($text, $surface-bg, 14%),
-    disabled-fg: color.mix($text, $surface-bg, 45%),
-    disabled-border: color.mix($text, $surface-bg, 18%),
-    focus-ring: $accent,
-
-    // Elevação (cores; shadows são tokens --matcha-shadow-* à parte)
-    elevation-surface-1: $surface,
-    elevation-surface-2: color.scale($surface, $lightness: if($is-dark, 8%, 50%)),
-    elevation-surface-3: color.scale($surface, $lightness: if($is-dark, 14%, 50%)),
-    state-layer-fg: if($is-dark, #ffffff, #000000),
-  );
-
-  // Papéis semânticos derivados dos seeds
-  @each $role in (accent, primary, success, danger, warn, info) {
-    $derived: map.merge($derived, matcha-role-tokens($role, map.get($seeds, $role), $surface-bg, $is-dark));
-  }
-
-  // Extras por papel (tokens que só algumas famílias têm)
-  $primary: map.get($seeds, primary);
-  $derived: map.merge($derived, (
-    accent-text-on: matcha-text-on($accent),
-    accent-light: color.scale($accent, $lightness: 45%),
-    accent-dark: color.scale($accent, $lightness: -30%),
-    primary-light: color.scale($primary, $lightness: 45%),
-    primary-dark: color.scale($primary, $lightness: -35%),
-    success-fill: map.get($seeds, success),
-    danger-fill: map.get($seeds, danger),
-    warn-fill: map.get($seeds, warn),
-  ));
-
-  // accent-2 só deriva se o seed opcional vier (senão herda da base)
-  @if map.has-key($seeds, accent-2) {
-    $accent-2: map.get($seeds, accent-2);
-    $derived: map.merge($derived, (
-      accent-2: $accent-2,
-      accent-2-contrast: matcha-text-on($accent-2),
-      // Espelha accent-text-on (linha ~168): mesmo cálculo do contrast, mas com
-      // nome dedicado a foreground de TEXTO — na rota de tokens estáticos os dois
-      // divergem (o -contrast lá é branco fixo, 1:1 Figma), então quem quer texto
-      // legível deve mirar text-on nas duas rotas.
-      accent-2-text-on: matcha-text-on($accent-2),
-      accent-2-alpha: rgba($accent-2, .1),
-      accent-2-surface: color.mix($accent-2, $surface-bg, 14%),
-    ));
-  }
-
-  // defaults da base < derivados < overrides explícitos do config
-  @return map.merge(map.merge($defaults, $derived), $seeds);
-}
-
-// ── API pública ─────────────────────────────────────────────────────────────
-// Emite a classe `.theme-<nome>` com o override completo das CSS vars de cor
-// (+ shadows/font-family/radius opcionais). Ver contrato de runtime no topo.
-@mixin matcha-define-theme($name, $config) {
-  .theme-#{$name} {
-    @include matcha-emit-color-properties(matcha-build-color-map($config));
-
-    $shadows: map.get($config, shadows);
-    @if $shadows {
-      @each $level, $value in $shadows {
-        --matcha-shadow-#{$level}: #{$value};
-      }
-    }
-
-    $font-family: map.get($config, font-family);
-    @if $font-family {
-      --matcha-font-family: #{$font-family};
-    }
-
-    $radius: map.get($config, radius);
-    @if $radius {
-      @each $key, $value in $radius {
-        --matcha-radius-#{$key}: #{$value};
-      }
-    }
-  }
-}
+@use "functions" as *;
+@use "../tokens/color-tokens" as *;
+// =============================================================================
+// MATCHA THEME API — criação de temas por override de CSS custom properties
+// =============================================================================
+//
+// Um tema Matcha adicional é uma SKIN: uma classe que sobrescreve as CSS vars
+// de cor (--matcha-color-*) emitidas pelos temas default. Os component mixins
+// consomem cor exclusivamente via var(--matcha-*), então a skin re-tematiza a
+// lib inteira sem recompilar matcha-components() (~20k linhas de CSS por tema).
+//
+// CONTRATO DE RUNTIME (duas classes no <body>):
+//   <body class="theme-default-dark theme-nerd">
+//   1. `theme-default-light` OU `theme-default-dark` — a BASE, escolhida pelo
+//      `base` do config. Fornece tudo que ainda é decidido em compile-time
+//      pelos component mixins (blocos `@if $is-dark` estruturais, shadows
+//      default, classes utilitárias) — ver backlog `matcha-theme-003`.
+//   2. `theme-<nome>` — a skin gerada por `matcha-define-theme()`. Deve ser
+//      emitida DEPOIS dos temas default no CSS (ordem de fonte vence, mesma
+//      especificidade).
+//
+// USO:
+//   @use "@inchurch/matcha-theme/main.scss" as matcha;
+//   @include matcha.matcha-define-theme(meu-tema, (
+//     base: dark,
+//     colors: (
+//       // 9 seeds obrigatórios:
+//       surface-bg: #000, surface: #0a120a, text-primary: #33ff33,
+//       accent: #33ff33, primary: #00cc66, success: #33ff33,
+//       danger: #ff3333, warn: #ffcc00, info: #00ccff,
+//       // + qualquer token de $matcha-color-tokens como override fino:
+//       text-muted: #1faa1f,
+//     ),
+//     // opcionais:
+//     shadows: (1: 0 0 4px rgba(51, 255, 51, .4)),  // --matcha-shadow-<n>
+//     font-family: ("Fira Code", monospace),         // --matcha-font-family
+//     radius: (md: 0, lg: 0, pill: 0),               // --matcha-radius-<k>
+//   ));
+//
+// O QUE A SKIN NÃO COBRE (limitações conhecidas — docs/theme-stress-test.md):
+//   - blocos `@if $is-dark` estruturais (calendar, section, drawer, chart-card,
+//     skeleton, reset) seguem a base light/dark escolhida;
+//   - cores hardcoded em componentes (ex.: matcha-page-builder — backlog
+//     `matcha-page-builder-001`);
+//   - cores passadas por @Input/JS (charts) não leem CSS var automaticamente.
+//
+// =============================================================================
+@use "sass:color";
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+
+$-matcha-theme-bases: (light, dark);
+$-matcha-required-seeds: (surface-bg, surface, text-primary, accent, primary, success, danger, warn, info);
+
+// ── Helpers de contraste ────────────────────────────────────────────────────
+// Luminância perceptual aproximada (YIQ, 0–255).
+
+// Foreground de texto opaco sobre $color (padrão dos tokens *-text-on).
+
+// Foreground de contraste no padrão dos tokens *-contrast (preto .87 / branco).
+
+// ── Emissor genérico de --matcha-color-* ─────────────────────────────────────
+// Movido de _emit-tokens para quebrar o ciclo @use (emit-tokens → color-tokens →
+// theme-api → emit-tokens). Self-contained (só sass:map). Usado por
+// matcha-define-theme (abaixo) e por matcha-css-custom-properties (emit-tokens, via @use).
+@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};
+    }
+  }
+}
+
+// ── Derivação de família de papel (primary/accent/feedback) ────────────────
+// Gera <role>, <role>-hover/-pressed/-alpha/-contrast/-contrast-alpha/
+// -surface-hover/-surface-pressed a partir do seed. Direção do hover segue a
+// base: temas light escurecem no hover, temas dark clareiam (padrão DSV3).
+
+// ── Construção do mapa completo de cores do tema ────────────────────────────
+// Parte dos defaults da base (light/dark), aplica as famílias derivadas dos
+// seeds e, por último, os overrides explícitos de `colors` — ou seja, QUALQUER
+// chave de $matcha-color-tokens pode ser cravada no config e vence a derivação.
+@function matcha-build-color-map($config) {
+  $base: map.get($config, base);
+  @if not list.index($-matcha-theme-bases, $base) {
+    @error "matcha-build-color-map: `base` deve ser `light` ou `dark` (recebido: #{meta.inspect($base)}).";
+  }
+
+  $seeds: map.get($config, colors);
+  @each $required in $-matcha-required-seeds {
+    @if not map.has-key($seeds or (), $required) {
+      @error "matcha-build-color-map: seed obrigatório ausente em `colors`: #{$required}. Obrigatórios: #{meta.inspect($-matcha-required-seeds)}.";
+    }
+  }
+
+  $is-dark: $base == dark;
+  $defaults: if($is-dark, $matcha-colors-dark, $matcha-colors-light);
+
+  $surface-bg: map.get($seeds, surface-bg);
+  $surface: map.get($seeds, surface);
+  $text: map.get($seeds, text-primary);
+  $accent: map.get($seeds, accent);
+
+  // Superfícies e estrutura
+  $derived: (
+    surface-bg: $surface-bg,
+    surface-bg-alpha: rgba($surface-bg, .5),
+    surface: $surface,
+    surface-card: $surface,
+    surface-card-strong: color.scale($surface, $lightness: if($is-dark, 8%, 50%)),
+    surface-inner: if($is-dark, color.scale($surface, $lightness: 8%), $surface-bg),
+    surface-card-alpha: rgba($surface, if($is-dark, .5, .85)),
+    surface-sidebar: color.scale($surface-bg, $lightness: if($is-dark, -25%, -4%)),
+    surface-sidebar-hover: color.scale($surface-bg, $lightness: if($is-dark, -12%, -9%)),
+    surface-table-row-hover: color.mix($text, $surface, 4%),
+    surface-border: color.mix($text, $surface-bg, 10%),
+    surface-border-strong: color.mix($text, $surface-bg, 22%),
+    surface-hover: rgba(color.scale($surface-bg, $lightness: if($is-dark, -25%, -4%)), .5),
+    bg: $surface-bg,
+
+    // Texto e ícones
+    fg: $text,
+    fg-alpha: rgba($text, .5),
+    text-primary: $text,
+    text-secondary: color.mix($text, $surface-bg, 78%),
+    text-muted: color.mix($text, $surface-bg, 62%),
+    text-label: color.mix($text, $surface-bg, 55%),
+    text-placeholder: color.mix($text, $surface-bg, 55%),
+    text-hint: color.mix($text, $surface-bg, 55%),
+    icon-default: color.mix($text, $surface-bg, 65%),
+    icon-active: color.mix($text, $surface-bg, 88%),
+
+    // Neutral + interaction
+    neutral: color.mix($text, $surface-bg, if($is-dark, 12%, 8%)),
+    neutral-contrast: matcha-text-on(color.mix($text, $surface-bg, if($is-dark, 12%, 8%))),
+    neutral-alpha: rgba($text, .08),
+    neutral-hover: color.mix($text, $surface-bg, if($is-dark, 18%, 14%)),
+    interaction-disabled-bg: color.mix($text, $surface-bg, 14%),
+    interaction-disabled-bg-alpha: rgba(color.mix($text, $surface-bg, 14%), .5),
+    interaction-disabled-fg: color.mix($text, $surface-bg, 45%),
+    interaction-disabled-border: color.mix($text, $surface-bg, 18%),
+    disabled: color.mix($text, $surface-bg, 14%),
+    disabled-bg: color.mix($text, $surface-bg, 14%),
+    disabled-fg: color.mix($text, $surface-bg, 45%),
+    disabled-border: color.mix($text, $surface-bg, 18%),
+    focus-ring: $accent,
+
+    // Elevação (cores; shadows são tokens --matcha-shadow-* à parte)
+    elevation-surface-1: $surface,
+    elevation-surface-2: color.scale($surface, $lightness: if($is-dark, 8%, 50%)),
+    elevation-surface-3: color.scale($surface, $lightness: if($is-dark, 14%, 50%)),
+    state-layer-fg: if($is-dark, #ffffff, #000000),
+  );
+
+  // Papéis semânticos derivados dos seeds
+  @each $role in (accent, primary, success, danger, warn, info) {
+    $derived: map.merge($derived, matcha-role-tokens($role, map.get($seeds, $role), $surface-bg, $is-dark));
+  }
+
+  // Extras por papel (tokens que só algumas famílias têm)
+  $primary: map.get($seeds, primary);
+  $derived: map.merge($derived, (
+    accent-text-on: matcha-text-on($accent),
+    accent-light: color.scale($accent, $lightness: 45%),
+    accent-dark: color.scale($accent, $lightness: -30%),
+    primary-light: color.scale($primary, $lightness: 45%),
+    primary-dark: color.scale($primary, $lightness: -35%),
+    success-fill: map.get($seeds, success),
+    danger-fill: map.get($seeds, danger),
+    warn-fill: map.get($seeds, warn),
+  ));
+
+  // accent-2 só deriva se o seed opcional vier (senão herda da base)
+  @if map.has-key($seeds, accent-2) {
+    $accent-2: map.get($seeds, accent-2);
+    $derived: map.merge($derived, (
+      accent-2: $accent-2,
+      accent-2-contrast: matcha-text-on($accent-2),
+      // Espelha accent-text-on (linha ~168): mesmo cálculo do contrast, mas com
+      // nome dedicado a foreground de TEXTO — na rota de tokens estáticos os dois
+      // divergem (o -contrast lá é branco fixo, 1:1 Figma), então quem quer texto
+      // legível deve mirar text-on nas duas rotas.
+      accent-2-text-on: matcha-text-on($accent-2),
+      accent-2-alpha: rgba($accent-2, .1),
+      accent-2-surface: color.mix($accent-2, $surface-bg, 14%),
+    ));
+  }
+
+  // defaults da base < derivados < overrides explícitos do config
+  @return map.merge(map.merge($defaults, $derived), $seeds);
+}
+
+// ── API pública ─────────────────────────────────────────────────────────────
+// Emite a classe `.theme-<nome>` com o override completo das CSS vars de cor
+// (+ shadows/font-family/radius opcionais). Ver contrato de runtime no topo.
+@mixin matcha-define-theme($name, $config) {
+  .theme-#{$name} {
+    @include matcha-emit-color-properties(matcha-build-color-map($config));
+
+    $shadows: map.get($config, shadows);
+    @if $shadows {
+      @each $level, $value in $shadows {
+        --matcha-shadow-#{$level}: #{$value};
+      }
+    }
+
+    $font-family: map.get($config, font-family);
+    @if $font-family {
+      --matcha-font-family: #{$font-family};
+    }
+
+    $radius: map.get($config, radius);
+    @if $radius {
+      @each $key, $value in $radius {
+        --matcha-radius-#{$key}: #{$value};
+      }
+    }
+  }
+}