@inchurch/matcha-theme 21.1.0 → 21.3.0

package/abstracts/_colors.scss

@@ -1,3 +1,7 @@
+@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
@@ -9,7 +13,7 @@
     $-skip: ("common", "brand", "neutral");
 
     @each $family, $shades in $matcha-primitives {
-        @if not index($-skip, $family) {
+        @if not list.index($-skip, $family) {
             @each $shade, $hex in $shades {
                 .#{$family}-#{$shade} {
                     background-color: var(--matcha-prim-#{$family}-#{$shade}) !important;

package/abstracts/_elevation.scss

@@ -1,3 +1,9 @@
+@use "../tokens/elevation-tokens" as *;
+@use "functions" as *;
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+
 // -------------------------------------------------------------------------------------------------------------------
 // @ Elevations Mixins
 //
@@ -36,7 +42,7 @@
 // Applies the correct css rules to an element to give it the elevation specified by $zValue.
 // The $zValue must be between 0 and 24.
 @mixin elevation($zValue, $color: $elevation-color, $opacity: $elevation-opacity) {
-    @if type-of($zValue) !=number or not unitless($zValue) {
+    @if meta.type-of($zValue) !=number or not math.is-unitless($zValue) {
         @error '$zValue must be a unitless number';
     }
 
@@ -44,9 +50,9 @@
         @error '$zValue must be between 0 and 24';
     }
 
-    box-shadow: #{map-get(_get-umbra-map($color, $opacity), $zValue)},
-    #{map-get(_get-penumbra-map($color, $opacity), $zValue)},
-    #{map-get(_get-ambient-map($color, $opacity), $zValue)};
+    box-shadow: #{map.get(get-umbra-map($color, $opacity), $zValue)},
+    #{map.get(get-penumbra-map($color, $opacity), $zValue)},
+    #{map.get(get-ambient-map($color, $opacity), $zValue)};
 }
 
 @mixin _theme-elevation($zValue, $elevation-color, $opacity: $elevation-opacity) {
@@ -56,14 +62,14 @@
 // Applies the elevation to an element in a manner that allows
 // consumers to override it via the Material elevation classes.
 @mixin overridable-elevation($zValue, $color: $elevation-color, $opacity: $elevation-opacity) {
-    &:not([class*="#{$_elevation-prefix}"]) {
+    &:not([class*="#{$elevation-prefix}"]) {
         @include elevation($zValue, $color, $opacity);
     }
 }
 
 @mixin _theme-overridable-elevation($zValue, $theme, $opacity: $elevation-opacity) {
-    $foreground: map-get($theme, foreground);
-    $elevation-color: map-get($foreground, elevation);
+    $foreground: map.get($theme, foreground);
+    $elevation-color: map.get($foreground, elevation);
     $elevation-color-or-default: if($elevation-color ==null, $elevation-color, $elevation-color);
 
     @include overridable-elevation($zValue, $elevation-color-or-default, $opacity);
@@ -88,14 +94,14 @@
 }
 
 // Css class generator for shadows
-// $_elevation-prefix: "matcha-elevation-z";
+// $elevation-prefix: "matcha-elevation-z";
 @mixin elevation-theme($is-dark: false) {
     // API nova: recebe SÓ o modo. Cor da sombra preservada por modo
     // (light #1A2C1E / dark black — valores que vinham de foreground.elevation).
     $elevation-color: if($is-dark, black, #1A2C1E);
 
     @for $zValue from 0 through 24 {
-        .#{$_elevation-prefix}#{$zValue} {
+        .#{$elevation-prefix}#{$zValue} {
             @include _theme-elevation($zValue, $elevation-color);
         }
     }

package/abstracts/_functions.scss

@@ -1,5 +1,8 @@
 @use "sass:map";
+@use "sass:math";
 @use "sass:color";
+@use "sass:meta";
+@use "sass:string";
 
 // -------------------------------------------------------------------------------------------------------------------
 // @ Theme functions — REMOVIDAS no major (API velha)
@@ -157,7 +160,7 @@
     }
 
     // Guard against unquoting non-string values, because it's deprecated.
-    @return if(type-of($font-family)==string, unquote($font-family), $font-family);
+    @return if(meta.type-of($font-family)==string, string.unquote($font-family), $font-family);
 }
 
 // -------------------------------------------------------------------------------------------------------------------
@@ -165,8 +168,8 @@
 // --------------------------------------------------------------------------------------------------------------------
 // A collection of functions that can be used to apply elevation to a material
 
-@function _get-umbra-map($color, $opacity) {
-    $shadow-color: if(type-of($color)==color, rgba($color, $opacity * 0.033), $color);
+@function get-umbra-map($color, $opacity) {
+    $shadow-color: if(meta.type-of($color)==color, rgba($color, $opacity * 0.033), $color);
 
     @return (0: "0px 0px 0px 0px #{$shadow-color}",
         1: "0px 2px 2px 0px #{$shadow-color}",
@@ -196,8 +199,8 @@
     );
 }
 
-@function _get-penumbra-map($color, $opacity) {
-    $shadow-color: if(type-of($color)==color, rgba($color, $opacity * 0.033), $color);
+@function get-penumbra-map($color, $opacity) {
+    $shadow-color: if(meta.type-of($color)==color, rgba($color, $opacity * 0.033), $color);
 
     @return (0: "0px 0px 0px 0px #{$shadow-color}",
         1: "0px 2px 2px 0px #{$shadow-color}",
@@ -227,8 +230,8 @@
     );
 }
 
-@function _get-ambient-map($color, $opacity) {
-    $shadow-color: if(type-of($color)==color, rgba($color, $opacity * 0.033), $color);
+@function get-ambient-map($color, $opacity) {
+    $shadow-color: if(meta.type-of($color)==color, rgba($color, $opacity * 0.033), $color);
 
     @return (0: "0px 0px 0px 0px #{$shadow-color}",
         1: "0px 2px 2px 0px #{$shadow-color}",
@@ -282,4 +285,37 @@ $base-font-size: 16px;
     @else {
         @return $value-in-px;
     }
-}
+}
+
+// ── Color helpers (movidos de _theme-api p/ quebrar ciclo @use) ──────────────
+@function matcha-yiq($color) {
+  $r: color.channel($color, "red", $space: rgb);
+  $g: color.channel($color, "green", $space: rgb);
+  $b: color.channel($color, "blue", $space: rgb);
+  @return math.div(($r * 299) + ($g * 587) + ($b * 114), 1000);
+}
+
+@function matcha-text-on($color) {
+  @return if(matcha-yiq($color) >= 150, #1a1d21, #ffffff);
+}
+
+@function matcha-contrast-on($color) {
+  @return if(matcha-yiq($color) >= 150, rgba(0, 0, 0, .87), #ffffff);
+}
+
+@function matcha-contrast-alpha-on($color) {
+  @return if(matcha-yiq($color) >= 150, rgba(0, 0, 0, .1), rgba(255, 255, 255, .1));
+}
+
+@function matcha-role-tokens($role, $seed, $surface-bg, $is-dark) {
+  @return (
+    #{$role}: $seed,
+    #{$role}-hover: color.scale($seed, $lightness: if($is-dark, 18%, -12%)),
+    #{$role}-pressed: color.scale($seed, $lightness: if($is-dark, 32%, -20%)),
+    #{$role}-alpha: rgba($seed, .1),
+    #{$role}-contrast: matcha-contrast-on($seed),
+    #{$role}-contrast-alpha: matcha-contrast-alpha-on($seed),
+    #{$role}-surface-hover: color.mix($seed, $surface-bg, 10%),
+    #{$role}-surface-pressed: color.mix($seed, $surface-bg, 22%),
+  );
+}

package/abstracts/_media-breakpoint.scss

@@ -1,3 +1,6 @@
+@use "../tokens/breakpoints-tokens" as *;
+@use "sass:map";
+
 // -------------------------------------------------------------------------------------------------------------------
 // @ Theme mixins
 // --------------------------------------------------------------------------------------------------------------------
@@ -12,7 +15,7 @@
 
 */
 @mixin media-breakpoint($breakpointName) {
-    $mediaQuery: map-get($breakpoints, $breakpointName);
+    $mediaQuery: map.get($breakpoints, $breakpointName);
     @if ($mediaQuery == null) {
         @content;
     } @else {

package/abstracts/_theme-api.scss

@@ -1,3 +1,5 @@
+@use "functions" as *;
+@use "../tokens/color-tokens" as *;
 // =============================================================================
 // MATCHA THEME API — criação de temas por override de CSS custom properties
 // =============================================================================
@@ -54,43 +56,30 @@ $-matcha-required-seeds: (surface-bg, surface, text-primary, accent, primary, su
 
 // ── Helpers de contraste ────────────────────────────────────────────────────
 // Luminância perceptual aproximada (YIQ, 0–255).
-@function matcha-yiq($color) {
-  $r: color.channel($color, "red", $space: rgb);
-  $g: color.channel($color, "green", $space: rgb);
-  $b: color.channel($color, "blue", $space: rgb);
-  @return math.div(($r * 299) + ($g * 587) + ($b * 114), 1000);
-}
 
 // Foreground de texto opaco sobre $color (padrão dos tokens *-text-on).
-@function matcha-text-on($color) {
-  @return if(matcha-yiq($color) >= 150, #1a1d21, #ffffff);
-}
 
 // Foreground de contraste no padrão dos tokens *-contrast (preto .87 / branco).
-@function matcha-contrast-on($color) {
-  @return if(matcha-yiq($color) >= 150, rgba(0, 0, 0, .87), #ffffff);
-}
 
-@function matcha-contrast-alpha-on($color) {
-  @return if(matcha-yiq($color) >= 150, rgba(0, 0, 0, .1), rgba(255, 255, 255, .1));
+// ── 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).
-@function matcha-role-tokens($role, $seed, $surface-bg, $is-dark) {
-  @return (
-    #{$role}: $seed,
-    #{$role}-hover: color.scale($seed, $lightness: if($is-dark, 18%, -12%)),
-    #{$role}-pressed: color.scale($seed, $lightness: if($is-dark, 32%, -20%)),
-    #{$role}-alpha: rgba($seed, .1),
-    #{$role}-contrast: matcha-contrast-on($seed),
-    #{$role}-contrast-alpha: matcha-contrast-alpha-on($seed),
-    #{$role}-surface-hover: color.mix($seed, $surface-bg, 10%),
-    #{$role}-surface-pressed: color.mix($seed, $surface-bg, 22%),
-  );
-}
 
 // ── Construção do mapa completo de cores do tema ────────────────────────────
 // Parte dos defaults da base (light/dark), aplica as famílias derivadas dos

package/abstracts/_typography.scss

@@ -1,3 +1,4 @@
+@use "functions" as *;
 // -------------------------------------------------------------------------------------------------------------------
 // @ Typography mixins
 // -------------------------------------------------------------------------------------------------------------------

package/components/app-page-header.scss

@@ -1,3 +1,4 @@
+@use "../abstracts/media-breakpoint" as *;
 @use "sass:map";
 
 // =============================================================================

package/components/matcha-button-toggle.scss

@@ -1,3 +1,4 @@
+@use "matcha-buttons" as *;
 @mixin _colorize-inactive-type-solid-button-toggle-item($theme, $color-functions) {
 
     &:not([inactivetype]),
@@ -30,7 +31,7 @@
                 button[matcha-button],
                 a[matcha-button] {
                     &:not([active]) {
-                        @include _disabled-solid-button($theme);
+                        @include disabled-solid-button($theme);
                     }
                 }
             }
@@ -68,7 +69,7 @@
                 button[matcha-button],
                 a[matcha-button] {
                     &:not([active]) {
-                        @include _disabled-basic-button($theme);
+                        @include disabled-basic-button($theme);
                     }
                 }
             }
@@ -115,7 +116,7 @@
 
                     //botão não ativo
                     &:not([active]) {
-                        @include _disabled-outline-button($theme);
+                        @include disabled-outline-button($theme);
                     }
                 }
             }
@@ -155,7 +156,7 @@
 
                     //botão não ativo
                     &:not([active]) {
-                        @include _disabled-alpha-button($theme);
+                        @include disabled-alpha-button($theme);
                     }
                 }
             }
@@ -198,7 +199,7 @@
 
                     //botão não ativo
                     &:not([active]) {
-                        @include _disabled-link-button($theme);
+                        @include disabled-link-button($theme);
                     }
                 }
             }
@@ -245,28 +246,28 @@ matcha-button-toggle {
                     &[outline],
                     &[outline]:not([outline="false"]),
                     &[outline="true"] {
-                        @include _disabled-outline-button($theme);
+                        @include disabled-outline-button($theme);
                     }
 
                     &[basic],
                     &[basic]:not([basic="false"]),
                     &[basic="true"] {
-                        @include _disabled-basic-button($theme);
+                        @include disabled-basic-button($theme);
                     }
 
                     &[alpha],
                     &[alpha]:not([alpha="false"]),
                     &[alpha="true"] {
-                        @include _disabled-alpha-button($theme);
+                        @include disabled-alpha-button($theme);
                     }
 
                     &[link],
                     &[link]:not([link="false"]),
                     &[link="true"] {
-                        @include _disabled-link-button($theme);
+                        @include disabled-link-button($theme);
                     }
 
-                    @include _disabled-solid-button($theme);
+                    @include disabled-solid-button($theme);
                 }
             }
         }

package/components/matcha-buttons.scss

@@ -1,3 +1,6 @@
+@use "../abstracts/media-breakpoint" as *;
+@use "../abstracts/functions" as *;
+@use "../tokens/breakpoints-tokens" as *;
 // =============================================================================
 // matcha-buttons.scss — Button & Icon Button (modernized)
 // Aligned with Figma: matcha/button + matcha/icon-button
@@ -8,35 +11,35 @@
 
 // ── Disabled mixins ─────────────────────────────────────────────────────────
 
-@mixin _disabled-solid-button($theme) {
+@mixin disabled-solid-button($theme) {
     background: var(--matcha-color-disabled-bg);
     color: var(--matcha-color-disabled-fg);
     box-shadow: 0 0 0 0px inset;
     pointer-events: none;
 }
 
-@mixin _disabled-basic-button($theme) {
+@mixin disabled-basic-button($theme) {
     background: var(--matcha-color-surface);
     color: var(--matcha-color-disabled-bg);
     box-shadow: 0 0 0 0px inset;
     pointer-events: none;
 }
 
-@mixin _disabled-outline-button($theme) {
+@mixin disabled-outline-button($theme) {
     background: transparent;
     color: var(--matcha-color-disabled-bg);
     box-shadow: 0 0 0 var(--matcha-border-thin, 2px) inset;
     pointer-events: none;
 }
 
-@mixin _disabled-alpha-button($theme) {
+@mixin disabled-alpha-button($theme) {
     background: var(--matcha-color-disabled-bg-alpha, var(--matcha-color-interaction-disabled-bg-alpha));
     color: var(--matcha-color-disabled-bg);
     box-shadow: 0 0 0 0px inset;
     pointer-events: none;
 }
 
-@mixin _disabled-link-button($theme) {
+@mixin disabled-link-button($theme) {
     background: transparent;
     color: var(--matcha-color-disabled-bg);
     box-shadow: 0 0 0 0px inset;
@@ -141,6 +144,19 @@ a[matcha-link] {
     border: none;
     border-radius: var(--matcha-radius-lg, 8px);
 
+    // Figma matcha/button usa DOIS feedbacks combinados:
+    //   1. Cor do bg muda (accent-default → accent-hover → accent-pressed)
+    //   2. State-layer overlay por cima (matcha/color/state-layer/fg)
+    //      - Filled:  opacity 0.15 hover / 0.30 active
+    //      - Outline/Ghost: opacity 0.10 hover / 0.20 active
+    // ::before aplica o state-layer; :hover/:active ou .is-state-* ativam.
+    // NOTA: declarada ANTES das regras aninhadas (evita a deprecação mixed-decls);
+    // é onde o hoisting do Sass já a colocava — output byte-idêntico.
+    transition:
+        background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+        box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+        color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
     * { pointer-events: none; }
 
     // Figma spec: ícones dentro de button herdam a foreground color do botão
@@ -154,17 +170,6 @@ a[matcha-link] {
 
     @include generate-matcha-button-size-classes($helper-breakpoints);
 
-    // Figma matcha/button usa DOIS feedbacks combinados:
-    //   1. Cor do bg muda (accent-default → accent-hover → accent-pressed)
-    //   2. State-layer overlay por cima (matcha/color/state-layer/fg)
-    //      - Filled:  opacity 0.15 hover / 0.30 active
-    //      - Outline/Ghost: opacity 0.10 hover / 0.20 active
-    // ::before aplica o state-layer; :hover/:active ou .is-state-* ativam.
-    transition:
-        background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-        box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
-        color 150ms cubic-bezier(0.4, 0, 0.2, 1);
-
     &::before {
         content: '';
         position: absolute;

package/components/matcha-file-uploader.scss

@@ -1,3 +1,4 @@
+@use "../abstracts/media-breakpoint" as *;
 @use "sass:map";
 
 // =============================================================================

package/components/matcha-footer.scss

@@ -1,3 +1,4 @@
+@use "../abstracts/media-breakpoint" as *;
 @use "sass:map";
 
 // =============================================================================

package/components/matcha-form-field.scss

@@ -1,3 +1,5 @@
+@use "../abstracts/media-breakpoint" as *;
+@use "../tokens/breakpoints-tokens" as *;
 // =============================================================================
 // matcha-form-field.scss — Theme mixin (stacked pattern, Figma matcha/field/_base)
 // Border colors vêm do data-color (component SCSS). Theme mixin cuida de:

package/components/matcha-header.scss

@@ -1,3 +1,4 @@
+@use "../abstracts/media-breakpoint" as *;
 @use "sass:map";
 
 // =============================================================================

package/components/matcha-hint-text.scss

@@ -1,3 +1,6 @@
+@use "../abstracts/media-breakpoint" as *;
+@use "../abstracts/functions" as *;
+@use "../tokens/breakpoints-tokens" as *;
 // =============================================================================
 // matcha-hint-text.scss — Hint/error/warning/info/success text
 // Aligned with Figma matcha/hint-text: Tipo(4) × Tamanho(SM/MD) = 8 variants

package/components/matcha-modal.scss

@@ -1,3 +1,6 @@
+@use "../abstracts/media-breakpoint" as *;
+@use "../abstracts/functions" as *;
+@use "../tokens/breakpoints-tokens" as *;
 @use "sass:map";
 
 // =============================================================================

package/components/matcha-notification.scss

@@ -1,3 +1,4 @@
+@use "../abstracts/media-breakpoint" as *;
 @use "sass:map";
 
 // =============================================================================

package/components/matcha-paginator.scss

@@ -1,3 +1,4 @@
+@use "../abstracts/media-breakpoint" as *;
 @use "sass:map";
 
 // =============================================================================

package/components/matcha-section.scss

@@ -1,3 +1,4 @@
+@use "../abstracts/media-breakpoint" as *;
 @use "sass:map";
 
 // =============================================================================

package/components/matcha-select.scss

@@ -153,7 +153,10 @@
     line-height: 24px;
   }
 
-  // Tipografia do value por size (Figma): SM/MD body-md 14/20 · LG body-lg 16/24
+  // Tipografia do value por size: SM/tiny body-sm 12/16 · MD body-md 14/20 · LG body-lg 16/24.
+  // O tier SM usa a MESMA escala do input nativo (matcha-form-field.scss aplica
+  // --matcha-text-body-sm nesse tier). Antes o select herdava 14/20 junto do MD e ficava
+  // 2px maior que input/date dentro do MESMO matcha-field size="small".
   matcha-form-field[size="lg"] .matcha-select-value,
   matcha-form-field[size="lg"] .matcha-select-combobox-input,
   matcha-form-field[size="large"] .matcha-select-value,
@@ -165,12 +168,15 @@
   }
   matcha-form-field[size="sm"] .matcha-select-value,
   matcha-form-field[size="sm"] .matcha-select-combobox-input,
-  matcha-form-field[size="md"] .matcha-select-value,
-  matcha-form-field[size="md"] .matcha-select-combobox-input,
   matcha-form-field[size="tiny"] .matcha-select-value,
   matcha-form-field[size="tiny"] .matcha-select-combobox-input,
   matcha-form-field[size="small"] .matcha-select-value,
-  matcha-form-field[size="small"] .matcha-select-combobox-input,
+  matcha-form-field[size="small"] .matcha-select-combobox-input {
+    font-size: var(--matcha-text-body-sm, 12px);
+    line-height: var(--matcha-leading-body-sm, 16px);
+  }
+  matcha-form-field[size="md"] .matcha-select-value,
+  matcha-form-field[size="md"] .matcha-select-combobox-input,
   matcha-form-field[size="medium"] .matcha-select-value,
   matcha-form-field[size="medium"] .matcha-select-combobox-input {
     font-size: 14px;

package/components/matcha-snack-bar.scss

@@ -1,3 +1,4 @@
+@use "../abstracts/media-breakpoint" as *;
 @use "sass:map";
 
 // =============================================================================

package/components/matcha-spin.scss

@@ -1,3 +1,6 @@
+@use "../abstracts/media-breakpoint" as *;
+@use "../abstracts/functions" as *;
+@use "../tokens/breakpoints-tokens" as *;
 @use "sass:map";
 
 // =============================================================================

package/components/matcha-table.scss

@@ -360,6 +360,16 @@
       --matcha-table-cell-bg: var(--matcha-table-row-bg-hover-striped);
     }
 
+    // Variante de hover accent (input `rowHover="accent"` → classe host
+    // `matcha-table-hover-accent`). Rebinda a var de hover no PRÓPRIO `<table>`,
+    // com especificidade acima do default — dispensa o consumer de furar o
+    // encapsulamento com `::ng-deep`. Substitui o override manual repetido em
+    // members/visitors/history/datas-comemorativas.
+    &.matcha-table-hover-accent {
+      --matcha-table-row-bg-hover:         var(--matcha-color-accent-surface-hover);
+      --matcha-table-row-bg-hover-striped: var(--matcha-color-accent-surface-hover);
+    }
+
     tbody tr.is-selected td {
       --matcha-table-cell-bg: var(--matcha-table-row-bg-selected);
     }

package/components/matcha-tabs.scss

@@ -1,3 +1,4 @@
+@use "matcha-buttons" as *;
 @use "sass:map";
 
 @mixin _colorize-inactive-type-basic($theme, $color-functions) {
@@ -30,7 +31,7 @@
 
                     button[matcha-button],
                     a[matcha-button] {
-                        @include _disabled-basic-button($theme);
+                        @include disabled-basic-button($theme);
                     }
                 }
             }
@@ -77,7 +78,7 @@
 
                     //botão não ativo
                     &:not([active-item="true"]) {
-                        @include _disabled-outline-button($theme);
+                        @include disabled-outline-button($theme);
                     }
                 }
             }
@@ -117,7 +118,7 @@
 
                     //botão não ativo
                     &:not([active-item="true"]) {
-                        @include _disabled-alpha-button($theme);
+                        @include disabled-alpha-button($theme);
                     }
                 }
             }
@@ -160,7 +161,7 @@
 
                     //botão não ativo
                     &:not([active-item="true"]) {
-                        @include _disabled-link-button($theme);
+                        @include disabled-link-button($theme);
                     }
                 }
             }
@@ -207,25 +208,25 @@ matcha-tabs {
                     &[outline],
                     &[outline]:not([outline="false"]),
                     &[outline="true"] {
-                        @include _disabled-outline-button($theme);
+                        @include disabled-outline-button($theme);
                     }
 
                     &[basic],
                     &[basic]:not([basic="false"]),
                     &[basic="true"] {
-                        @include _disabled-basic-button($theme);
+                        @include disabled-basic-button($theme);
                     }
 
                     &[alpha],
                     &[alpha]:not([alpha="false"]),
                     &[alpha="true"] {
-                        @include _disabled-alpha-button($theme);
+                        @include disabled-alpha-button($theme);
                     }
 
                     &[link],
                     &[link]:not([link="false"]),
                     &[link="true"] {
-                        @include _disabled-link-button($theme);
+                        @include disabled-link-button($theme);
                     }
                 }
             }

package/layout/matcha-page-layout.scss

@@ -1,3 +1,5 @@
+@use "../abstracts/media-breakpoint" as *;
+@use "../abstracts/elevation" as *;
 // -----------------------------------------------------------------------------------------------------
 // @Page Layouts Theming
 // -----------------------------------------------------------------------------------------------------

package/main.scss

@@ -1,108 +1,198 @@
 // TOKENS
-@import "./tokens/animations-tokens";
-@import "./tokens/breakpoints-tokens";
-@import "./tokens/material-palette"; // paletas Material legadas ($mat-*, $blue-grey, …) — consumidas só pelo old API (palette/light-theme/dark-theme). A aposentar com o Track B.
-@import "./tokens/elevation-tokens";
-@import "./tokens/spacing-tokens";
-@import "./tokens/typography-tokens";
-@import "./tokens/color-tokens";          // cor — papéis por modo (synced do Figma via sync-tokens)
-@import "./tokens/static-tokens";         // não-cor (gerado de global.json) — mixin matcha-static-tokens()
-@import "./tokens/emit-tokens";           // emissão — mixin matcha-css-custom-properties() (consome color-tokens + static-tokens)
-@import "./tokens/primitives"; // matcha-primitives() — Camada 1: CSS vars de primitivas (--matcha-prim-*) em :root
-@import "./tokens/semantic-aliases"; // $matcha-prim-aliases-{light,dark} — Camada 2: token semântico → primitiva (rota clássica emite var)
+@forward "./tokens/animations-tokens";
+@use "./tokens/animations-tokens" as *;
+@forward "./tokens/breakpoints-tokens";
+@use "./tokens/breakpoints-tokens" as *;
+@forward "./tokens/material-palette";
+@use "./tokens/material-palette" as *; // paletas Material legadas ($mat-*, $blue-grey, …) — consumidas só pelo old API (palette/light-theme/dark-theme). A aposentar com o Track B.
+@forward "./tokens/elevation-tokens";
+@use "./tokens/elevation-tokens" as *;
+@forward "./tokens/spacing-tokens";
+@use "./tokens/spacing-tokens" as *;
+@forward "./tokens/typography-tokens";
+@use "./tokens/typography-tokens" as *;
+@forward "./tokens/color-tokens";
+@use "./tokens/color-tokens" as *; // cor — papéis por modo (synced do Figma via sync-tokens)
+@forward "./tokens/static-tokens";
+@use "./tokens/static-tokens" as *; // não-cor (gerado de global.json) — mixin matcha-static-tokens()
+@forward "./tokens/emit-tokens";
+@use "./tokens/emit-tokens" as *; // emissão — mixin matcha-css-custom-properties() (consome color-tokens + static-tokens)
+@forward "./tokens/primitives";
+@use "./tokens/primitives" as *; // matcha-primitives() — Camada 1: CSS vars de primitivas (--matcha-prim-*) em :root
+@forward "./tokens/semantic-aliases";
+@use "./tokens/semantic-aliases" as *; // $matcha-prim-aliases-{light,dark} — Camada 2: token semântico → primitiva (rota clássica emite var)
 
 // FUNCTIONS
-@import "./abstracts/functions"; // map-contrast() palette() map-color() light-theme() dark-theme() matcha-typography-level() matcha-typography-config() _matcha-get-type-value() matcha-font-size() matcha-line-height() matcha-font-weight() matcha-letter-spacing() matcha-font-family() _get-umbra-map() _get-penumbra-map() _get-ambient-map() elevation-transition-property-value()
+@forward "./abstracts/functions";
+@use "./abstracts/functions" as *; // map-contrast() palette() map-color() light-theme() dark-theme() matcha-typography-level() matcha-typography-config() _matcha-get-type-value() matcha-font-size() matcha-line-height() matcha-font-weight() matcha-letter-spacing() matcha-font-family() _get-umbra-map() _get-penumbra-map() _get-ambient-map() elevation-transition-property-value()
 
 // MIXINS
-@import "./abstracts/theme-api"; // matcha-define-theme() matcha-build-color-map() matcha-role-tokens() matcha-text-on() matcha-contrast-on()
-@import "./abstracts/colors"; // colors-classes-static() colors-classes-dynamic()
-@import "./abstracts/elevation"; // elevation() _matcha-theme-elevation() matcha-overridable-elevation() _matcha-theme-overridable-elevation() elevation-transition() elevation-theme()
-@import "./abstracts/media-breakpoint"; // media-breakpoint()
+@forward "./abstracts/theme-api";
+@use "./abstracts/theme-api" as *; // matcha-define-theme() matcha-build-color-map() matcha-role-tokens() matcha-text-on() matcha-contrast-on()
+@forward "./abstracts/colors";
+@use "./abstracts/colors" as *; // colors-classes-static() colors-classes-dynamic()
+@forward "./abstracts/elevation";
+@use "./abstracts/elevation" as *; // elevation() _matcha-theme-elevation() matcha-overridable-elevation() _matcha-theme-overridable-elevation() elevation-transition() elevation-theme()
+@forward "./abstracts/media-breakpoint";
+@use "./abstracts/media-breakpoint" as *; // media-breakpoint()
 
 // TYPOGRAPHY
-@import "./abstracts/typography"; // matcha-typography-font-shorthand() matcha-typography-level-to-styles() matcha-reset-typography()
+@forward "./abstracts/typography";
+@use "./abstracts/typography" as *; // matcha-typography-font-shorthand() matcha-typography-level-to-styles() matcha-reset-typography()
 
 // BASE
-@import "./base/reset"; // base-body-reset-theme()
+@forward "./base/reset";
+@use "./base/reset" as *; // base-body-reset-theme()
 
 // COMPONENTS
-@import "./components/matcha-audio-player.scss"; //matcha-audio-player-theme($theme)
-@import "./components/matcha-autocomplete.scss"; // matcha-autocomplete-theme($theme)
-@import "./components/matcha-option.scss"; // matcha-option-theme($theme)
-@import "./components/matcha-panel.scss"; // matcha-panel-theme($theme)
-@import "./components/matcha-select.scss"; // matcha-select-theme($theme)
-@import "./components/matcha-select-multiple.scss"; // matcha-select-multiple-theme($theme)
-@import "./components/matcha-buttons.scss"; // matcha-button-theme($theme)
-@import "./components/matcha-button-toggle.scss"; // matcha-button-toggle-theme($theme)
-@import "./components/matcha-cards.scss"; // matcha-cards-theme($theme)
-@import "./components/matcha-color-pick.scss"; // matcha-color-pick-theme($theme)
-@import "./components/matcha-draggable.scss"; // matcha-draggable-theme($theme)
-@import "./components/matcha-drop-list.scss"; // matcha-drop-list-theme($theme)
-@import "./components/matcha-header.scss"; // matcha-header-theme($theme) — lib component DSV3
-@import "./components/app-page-header.scss"; // app-page-header-theme($theme) — page-header LEGACY da app
-@import "./components/matcha-horizontal-tree.scss"; // matcha-horizontal-tree-theme($theme)
-@import "./components/matcha-menu.scss"; // matcha-menu-theme($theme)
-@import "./components/matcha-progress-bar.scss"; // matcha-progress-bar-theme($theme)
-@import "./components/matcha-scrollbar.scss"; // matcha-scrollbar-theme($theme)
-@import "./components/matcha-scrollbox-shadow.scss"; // matcha-scrollbox-shadow-theme($theme)
-@import "./components/matcha-skeleton.scss"; // matcha-skeleton-theme($theme)
-@import "./components/matcha-table.scss"; // matcha-table-modern (canon DSV3 1:1 Figma)
-@import "./components/matcha-table-cell.scss"; // matcha-table-cell-theme($theme)
-@import "./components/matcha-tooltip.scss"; // matcha-tooltip-theme($theme)
-@import "./components/matcha-form-field.scss";
-@import "./components/matcha-checkbox.scss";
-@import "./components/matcha-accordion.scss";
-@import "./components/matcha-ripple.scss"; // matcha-ripple-theme($theme)
-@import "./components/matcha-spin.scss"; // matcha-spin-theme($theme)
-@import "./components/matcha-spinner.scss"; // matcha-spinner-theme($theme)
-@import "./components/matcha-hint-text.scss"; // matcha-hint-theme($theme)
-@import "./components/matcha-slide-toggle.scss"; // matcha-slide-toggle($theme)
-@import "./components/matcha-radio.scss"; // matcha-radio($theme)
-@import "./components/matcha-avatar.scss"; // matcha-avatar($theme)
-@import "./components/matcha-paginator.scss"; // matcha-paginator($theme)
-@import "./components/matcha-slider.scss"; // matcha-slider($theme)
-@import "./components/matcha-divider.scss"; // matcha-divider($theme)
-@import "./components/matcha-highlight.scss"; // matcha-highlight($theme)
-@import "./components/matcha-tabs.scss"; // matcha-tabs($theme)
-@import "./components/matcha-modal.scss"; // matcha-modal($theme)
-@import "./components/matcha-drawer.scss"; // matcha-drawer-theme($theme)
-@import "./components/matcha-chip.scss"; // matcha-chip($theme)
-@import "./components/matcha-status-pill.scss"; // matcha-status-pill
-@import "./components/matcha-date.scss"; // matcha-date-theme($theme)
-@import "./components/matcha-calendar.scss"; // matcha-calendar-theme($theme)
-@import "./components/matcha-page-builder.scss"; // matcha-page-builder($theme)
-@import "./components/matcha-snack-bar.scss"; // matcha-snack-bar-theme($theme)
-@import "./components/matcha-timepicker.scss"; // matcha-timepicker-theme($theme)
-@import "./components/matcha-badge.scss"; // matcha-badge-theme($theme)
-@import "./components/matcha-empty-state.scss"; // matcha-empty-state-theme($theme)
-@import "./components/matcha-tree-view.scss"; // matcha-tree-view-theme($theme)
-@import "./components/matcha-nav.scss"; // matcha-nav-theme($theme)
-@import "./components/matcha-list.scss"; // matcha-list-theme($theme)
-@import "./components/matcha-icon.scss"; // matcha-icon-theme($theme)
-@import "./components/matcha-text-editor.scss"; // matcha-text-editor-theme($theme)
-@import "./components/matcha-chart-card.scss"; // matcha-chart-card-theme($theme)
-@import "./components/matcha-crop.scss"; // matcha-crop-theme($theme)
-@import "./components/matcha-footer.scss"; // matcha-footer-theme($theme)
-@import "./components/matcha-file-uploader.scss"; // matcha-file-uploader-theme($theme)
-@import "./components/matcha-drop-image.scss"; // matcha-drop-image-theme($theme)
-@import "./components/matcha-notification.scss"; // matcha-notification-theme($theme)
-@import "./components/matcha-section.scss"; // matcha-section-theme($theme)
-@import "./components/matcha-form-section.scss"; // matcha-form-section-theme($theme)
-@import "./components/matcha-breadcrumb.scss"; // matcha-breadcrumb-theme($theme)
-@import "./components/matcha-image.scss"; // matcha-image-theme($theme)
-@import "./components/matcha-stepper.scss"; // matcha-stepper-theme($theme)
-@import "./components/matcha-toolbar.scss"; // matcha-toolbar-modern (canon DSV3 1:1 Figma 15866:92)
-@import "./components/matcha-command-palette.scss"; // matcha-command-palette-theme($theme)
-@import "./components/matcha-profile-card.scss"; // matcha-profile-card-theme($theme)
-@import "./components/matcha-flag.scss"; // matcha-flag-theme($theme)
-@import "./components/matcha-emoji.scss"; // matcha-emoji-theme($theme)
+@forward "./components/matcha-audio-player";
+@use "./components/matcha-audio-player" as *; //matcha-audio-player-theme($theme)
+@forward "./components/matcha-autocomplete";
+@use "./components/matcha-autocomplete" as *; // matcha-autocomplete-theme($theme)
+@forward "./components/matcha-option";
+@use "./components/matcha-option" as *; // matcha-option-theme($theme)
+@forward "./components/matcha-panel";
+@use "./components/matcha-panel" as *; // matcha-panel-theme($theme)
+@forward "./components/matcha-select";
+@use "./components/matcha-select" as *; // matcha-select-theme($theme)
+@forward "./components/matcha-select-multiple";
+@use "./components/matcha-select-multiple" as *; // matcha-select-multiple-theme($theme)
+@forward "./components/matcha-buttons";
+@use "./components/matcha-buttons" as *; // matcha-button-theme($theme)
+@forward "./components/matcha-button-toggle";
+@use "./components/matcha-button-toggle" as *; // matcha-button-toggle-theme($theme)
+@forward "./components/matcha-cards";
+@use "./components/matcha-cards" as *; // matcha-cards-theme($theme)
+@forward "./components/matcha-color-pick";
+@use "./components/matcha-color-pick" as *; // matcha-color-pick-theme($theme)
+@forward "./components/matcha-draggable";
+@use "./components/matcha-draggable" as *; // matcha-draggable-theme($theme)
+@forward "./components/matcha-drop-list";
+@use "./components/matcha-drop-list" as *; // matcha-drop-list-theme($theme)
+@forward "./components/matcha-header";
+@use "./components/matcha-header" as *; // matcha-header-theme($theme) — lib component DSV3
+@forward "./components/app-page-header";
+@use "./components/app-page-header" as *; // app-page-header-theme($theme) — page-header LEGACY da app
+@forward "./components/matcha-horizontal-tree";
+@use "./components/matcha-horizontal-tree" as *; // matcha-horizontal-tree-theme($theme)
+@forward "./components/matcha-menu";
+@use "./components/matcha-menu" as *; // matcha-menu-theme($theme)
+@forward "./components/matcha-progress-bar";
+@use "./components/matcha-progress-bar" as *; // matcha-progress-bar-theme($theme)
+@forward "./components/matcha-scrollbar";
+@use "./components/matcha-scrollbar" as *; // matcha-scrollbar-theme($theme)
+@forward "./components/matcha-scrollbox-shadow";
+@use "./components/matcha-scrollbox-shadow" as *; // matcha-scrollbox-shadow-theme($theme)
+@forward "./components/matcha-skeleton";
+@use "./components/matcha-skeleton" as *; // matcha-skeleton-theme($theme)
+@forward "./components/matcha-table";
+@use "./components/matcha-table" as *; // matcha-table-modern (canon DSV3 1:1 Figma)
+@forward "./components/matcha-table-cell";
+@use "./components/matcha-table-cell" as *; // matcha-table-cell-theme($theme)
+@forward "./components/matcha-tooltip";
+@use "./components/matcha-tooltip" as *; // matcha-tooltip-theme($theme)
+@forward "./components/matcha-form-field";
+@use "./components/matcha-form-field" as *;
+@forward "./components/matcha-checkbox";
+@use "./components/matcha-checkbox" as *;
+@forward "./components/matcha-accordion";
+@use "./components/matcha-accordion" as *;
+@forward "./components/matcha-ripple";
+@use "./components/matcha-ripple" as *; // matcha-ripple-theme($theme)
+@forward "./components/matcha-spin";
+@use "./components/matcha-spin" as *; // matcha-spin-theme($theme)
+@forward "./components/matcha-spinner";
+@use "./components/matcha-spinner" as *; // matcha-spinner-theme($theme)
+@forward "./components/matcha-hint-text";
+@use "./components/matcha-hint-text" as *; // matcha-hint-theme($theme)
+@forward "./components/matcha-slide-toggle";
+@use "./components/matcha-slide-toggle" as *; // matcha-slide-toggle($theme)
+@forward "./components/matcha-radio";
+@use "./components/matcha-radio" as *; // matcha-radio($theme)
+@forward "./components/matcha-avatar";
+@use "./components/matcha-avatar" as *; // matcha-avatar($theme)
+@forward "./components/matcha-paginator";
+@use "./components/matcha-paginator" as *; // matcha-paginator($theme)
+@forward "./components/matcha-slider";
+@use "./components/matcha-slider" as *; // matcha-slider($theme)
+@forward "./components/matcha-divider";
+@use "./components/matcha-divider" as *; // matcha-divider($theme)
+@forward "./components/matcha-highlight";
+@use "./components/matcha-highlight" as *; // matcha-highlight($theme)
+@forward "./components/matcha-tabs";
+@use "./components/matcha-tabs" as *; // matcha-tabs($theme)
+@forward "./components/matcha-modal";
+@use "./components/matcha-modal" as *; // matcha-modal($theme)
+@forward "./components/matcha-drawer";
+@use "./components/matcha-drawer" as *; // matcha-drawer-theme($theme)
+@forward "./components/matcha-chip";
+@use "./components/matcha-chip" as *; // matcha-chip($theme)
+@forward "./components/matcha-status-pill";
+@use "./components/matcha-status-pill" as *; // matcha-status-pill
+@forward "./components/matcha-date";
+@use "./components/matcha-date" as *; // matcha-date-theme($theme)
+@forward "./components/matcha-calendar";
+@use "./components/matcha-calendar" as *; // matcha-calendar-theme($theme)
+@forward "./components/matcha-page-builder";
+@use "./components/matcha-page-builder" as *; // matcha-page-builder($theme)
+@forward "./components/matcha-snack-bar";
+@use "./components/matcha-snack-bar" as *; // matcha-snack-bar-theme($theme)
+@forward "./components/matcha-timepicker";
+@use "./components/matcha-timepicker" as *; // matcha-timepicker-theme($theme)
+@forward "./components/matcha-badge";
+@use "./components/matcha-badge" as *; // matcha-badge-theme($theme)
+@forward "./components/matcha-empty-state";
+@use "./components/matcha-empty-state" as *; // matcha-empty-state-theme($theme)
+@forward "./components/matcha-tree-view";
+@use "./components/matcha-tree-view" as *; // matcha-tree-view-theme($theme)
+@forward "./components/matcha-nav";
+@use "./components/matcha-nav" as *; // matcha-nav-theme($theme)
+@forward "./components/matcha-list";
+@use "./components/matcha-list" as *; // matcha-list-theme($theme)
+@forward "./components/matcha-icon";
+@use "./components/matcha-icon" as *; // matcha-icon-theme($theme)
+@forward "./components/matcha-text-editor";
+@use "./components/matcha-text-editor" as *; // matcha-text-editor-theme($theme)
+@forward "./components/matcha-chart-card";
+@use "./components/matcha-chart-card" as *; // matcha-chart-card-theme($theme)
+@forward "./components/matcha-crop";
+@use "./components/matcha-crop" as *; // matcha-crop-theme($theme)
+@forward "./components/matcha-footer";
+@use "./components/matcha-footer" as *; // matcha-footer-theme($theme)
+@forward "./components/matcha-file-uploader";
+@use "./components/matcha-file-uploader" as *; // matcha-file-uploader-theme($theme)
+@forward "./components/matcha-drop-image";
+@use "./components/matcha-drop-image" as *; // matcha-drop-image-theme($theme)
+@forward "./components/matcha-notification";
+@use "./components/matcha-notification" as *; // matcha-notification-theme($theme)
+@forward "./components/matcha-section";
+@use "./components/matcha-section" as *; // matcha-section-theme($theme)
+@forward "./components/matcha-form-section";
+@use "./components/matcha-form-section" as *; // matcha-form-section-theme($theme)
+@forward "./components/matcha-breadcrumb";
+@use "./components/matcha-breadcrumb" as *; // matcha-breadcrumb-theme($theme)
+@forward "./components/matcha-image";
+@use "./components/matcha-image" as *; // matcha-image-theme($theme)
+@forward "./components/matcha-stepper";
+@use "./components/matcha-stepper" as *; // matcha-stepper-theme($theme)
+@forward "./components/matcha-toolbar";
+@use "./components/matcha-toolbar" as *; // matcha-toolbar-modern (canon DSV3 1:1 Figma 15866:92)
+@forward "./components/matcha-command-palette";
+@use "./components/matcha-command-palette" as *; // matcha-command-palette-theme($theme)
+@forward "./components/matcha-profile-card";
+@use "./components/matcha-profile-card" as *; // matcha-profile-card-theme($theme)
+@forward "./components/matcha-flag";
+@use "./components/matcha-flag" as *; // matcha-flag-theme($theme)
+@forward "./components/matcha-emoji";
+@use "./components/matcha-emoji" as *; // matcha-emoji-theme($theme)
 
 // LAYOUT
-@import "./layout/matcha-page-layout.scss"; // matcha-page-layout-theme($theme)
+@forward "./layout/matcha-page-layout";
+@use "./layout/matcha-page-layout" as *; // matcha-page-layout-theme($theme)
 
 // VENDORS
-@import "./vendors/charts.scss";
+@forward "./vendors/charts";
+@use "./vendors/charts" as *;
 
 // ─── FONT LOADING — Manrope (SELF-HOSTED · zero dependência externa) ─────────
 // REGRA DE OURO: fontes self-hosted, nunca @import/<link> do Google Fonts.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inchurch/matcha-theme",
-  "version": "21.1.0",
+  "version": "21.3.0",
   "description": "Themes for matcha-design-system",
   "main": "main.scss",
   "scripts": {

package/tokens/_color-tokens.scss

@@ -1,3 +1,4 @@
+@use "../abstracts/functions" as *;
 // =============================================================================
 // MATCHA — TOKENS DE COR (papéis semânticos por modo) · SINCRONIZADO DO FIGMA
 // =============================================================================

package/tokens/_elevation-tokens.scss

@@ -30,4 +30,4 @@ $elevation-transition-duration: 280ms !default;
 $elevation-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
 $elevation-color: black !default;
 $elevation-opacity: 1 !default;
-$_elevation-prefix: "elevation-z-";
+$elevation-prefix: "elevation-z-";

package/tokens/_emit-tokens.scss

@@ -1,3 +1,9 @@
+@use "elevation-tokens" as *;
+@use "static-tokens" as *;
+@use "color-tokens" as *;
+@use "semantic-aliases" as *;
+@use "material-palette" as *;
+@use "../abstracts/theme-api" as *;
 // =============================================================================
 // MATCHA — EMISSÃO DOS TOKENS DO TEMA (CSS custom properties)
 // =============================================================================
@@ -13,24 +19,8 @@
 // =============================================================================
 @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};
-    }
-  }
-}
+// matcha-emit-color-properties() foi MOVIDO para abstracts/_theme-api.scss (quebra o
+// ciclo @use emit-tokens↔theme-api). Aqui fica disponível via `@use theme-api` (topo).
 
 // ═══════════════════════════════════════════════════════════════════════════
 // 4. MIXIN CANÔNICO — assinatura preservada (retrocompat).

package/vendors/charts.scss

@@ -1,3 +1,4 @@
+@use "../abstracts/elevation" as *;
 @mixin vendor-chart($theme) {
     // theme-agnóstico: cores via var(--matcha-color-*) (runtime). $theme mantido só
     // na assinatura por retrocompat dos call sites (removido na limpeza de params).