@inchurch/matcha-theme 20.276.0 → 20.277.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/abstracts/_functions.scss +0 -26
  2. package/abstracts/_theme-api.scss +230 -0
  3. package/components/app-page-header.scss +16 -17
  4. package/components/matcha-accordion.scss +5 -6
  5. package/components/matcha-audio-player.scss +1 -2
  6. package/components/matcha-autocomplete.scss +10 -11
  7. package/components/matcha-avatar.scss +3 -3
  8. package/components/matcha-badge.scss +11 -11
  9. package/components/matcha-breadcrumb.scss +6 -7
  10. package/components/matcha-button-toggle.scss +2 -2
  11. package/components/matcha-buttons.scss +34 -34
  12. package/components/matcha-calendar.scss +31 -35
  13. package/components/matcha-cards.scss +31 -32
  14. package/components/matcha-chart-card.scss +5 -12
  15. package/components/matcha-checkbox.scss +13 -13
  16. package/components/matcha-chip.scss +2 -2
  17. package/components/matcha-color-pick.scss +1 -2
  18. package/components/matcha-command-palette.scss +17 -18
  19. package/components/matcha-crop.scss +0 -1
  20. package/components/matcha-date.scss +3 -3
  21. package/components/matcha-draggable.scss +4 -5
  22. package/components/matcha-drawer.scss +18 -28
  23. package/components/matcha-drop-list.scss +51 -52
  24. package/components/matcha-emoji.scss +2 -2
  25. package/components/{matcha-uploader.scss → matcha-file-uploader.scss} +185 -116
  26. package/components/matcha-footer.scss +3 -4
  27. package/components/matcha-form-field.scss +3 -3
  28. package/components/matcha-form-section.scss +5 -6
  29. package/components/matcha-header.scss +3 -4
  30. package/components/matcha-hint-text.scss +4 -4
  31. package/components/matcha-horizontal-tree.scss +15 -16
  32. package/components/matcha-icon.scss +27 -27
  33. package/components/matcha-image.scss +2 -3
  34. package/components/matcha-list.scss +11 -12
  35. package/components/matcha-menu.scss +2 -2
  36. package/components/matcha-modal.scss +5 -6
  37. package/components/matcha-nav.scss +16 -16
  38. package/components/matcha-notification.scss +3 -4
  39. package/components/matcha-option.scss +19 -0
  40. package/components/matcha-page-builder.scss +16 -16
  41. package/components/matcha-paginator.scss +6 -7
  42. package/components/matcha-panel.scss +4 -5
  43. package/components/matcha-profile-card.scss +3 -3
  44. package/components/matcha-progress-bar.scss +1 -1
  45. package/components/matcha-radio.scss +6 -6
  46. package/components/matcha-scrollbar.scss +1 -2
  47. package/components/matcha-scrollbox-shadow.scss +35 -37
  48. package/components/matcha-section.scss +5 -9
  49. package/components/matcha-select-multiple.scss +56 -0
  50. package/components/matcha-select.scss +7 -7
  51. package/components/matcha-skeleton.scss +6 -7
  52. package/components/matcha-slide-toggle.scss +33 -299
  53. package/components/matcha-slider.scss +5 -5
  54. package/components/matcha-snack-bar.scss +17 -18
  55. package/components/matcha-spin.scss +12 -103
  56. package/components/matcha-spinner.scss +1 -1
  57. package/components/matcha-stepper.scss +15 -16
  58. package/components/matcha-table.scss +14 -15
  59. package/components/matcha-tabs.scss +22 -24
  60. package/components/matcha-text-editor.scss +78 -78
  61. package/components/matcha-time.scss +2 -2
  62. package/components/matcha-toolbar.scss +1 -1
  63. package/components/matcha-tooltip.scss +14 -12
  64. package/main.scss +7 -2
  65. package/package.json +1 -1
  66. package/tokens/_color-tokens.scss +0 -3
  67. package/tokens/_css-custom-properties.scss +233 -179
  68. package/tokens/_primitives.scss +82 -0
  69. package/tokens/_semantic-aliases.scss +120 -0
package/abstracts/_functions.scss CHANGED
@@ -34,32 +34,6 @@
34
34
  @return $result;
35
35
  }
36
36
 
37
- @function getBaseColorsPalettes() {
38
- // base colors
39
- $palettes: (
40
- red: $red,
41
- pink: $pink,
42
- purple: $purple,
43
- deep-purple: $deep-purple,
44
- indigo: $indigo,
45
- blue: $blue,
46
- light-blue: $light-blue,
47
- cyan: $cyan,
48
- teal: $teal,
49
- green: $green,
50
- light-green: $light-green,
51
- lime: $lime,
52
- yellow: $yellow,
53
- amber: $amber,
54
- orange: $orange,
55
- deep-orange: $deep-orange,
56
- brown: $brown,
57
- grey: $grey,
58
- blue-grey: $blue-grey
59
- );
60
- @return $palettes;
61
- }
62
-
63
37
  @function getAllPalettes($theme) {
64
38
  $primary: map.get($theme, primary);
65
39
  $accent: map.get($theme, accent);
package/abstracts/_theme-api.scss ADDED
@@ -0,0 +1,230 @@
1
+ // =============================================================================
2
+ // MATCHA THEME API — criação de temas por override de CSS custom properties
3
+ // =============================================================================
4
+ //
5
+ // Um tema Matcha adicional é uma SKIN: uma classe que sobrescreve as CSS vars
6
+ // de cor (--matcha-color-*) emitidas pelos temas default. Os component mixins
7
+ // consomem cor exclusivamente via var(--matcha-*), então a skin re-tematiza a
8
+ // lib inteira sem recompilar matcha-components() (~20k linhas de CSS por tema).
9
+ //
10
+ // CONTRATO DE RUNTIME (duas classes no <body>):
11
+ // <body class="theme-default-dark theme-nerd">
12
+ // 1. `theme-default-light` OU `theme-default-dark` — a BASE, escolhida pelo
13
+ // `base` do config. Fornece tudo que ainda é decidido em compile-time
14
+ // pelos component mixins (blocos `@if $is-dark` estruturais, shadows
15
+ // default, classes utilitárias) — ver backlog `matcha-theme-003`.
16
+ // 2. `theme-<nome>` — a skin gerada por `matcha-define-theme()`. Deve ser
17
+ // emitida DEPOIS dos temas default no CSS (ordem de fonte vence, mesma
18
+ // especificidade).
19
+ //
20
+ // USO:
21
+ // @use "@inchurch/matcha-theme/main.scss" as matcha;
22
+ // @include matcha.matcha-define-theme(meu-tema, (
23
+ // base: dark,
24
+ // colors: (
25
+ // // 9 seeds obrigatórios:
26
+ // surface-bg: #000, surface: #0a120a, text-primary: #33ff33,
27
+ // accent: #33ff33, primary: #00cc66, success: #33ff33,
28
+ // danger: #ff3333, warn: #ffcc00, info: #00ccff,
29
+ // // + qualquer token de $matcha-color-tokens como override fino:
30
+ // text-muted: #1faa1f,
31
+ // ),
32
+ // // opcionais:
33
+ // shadows: (1: 0 0 4px rgba(51, 255, 51, .4)), // --matcha-shadow-<n>
34
+ // font-family: ("Fira Code", monospace), // --matcha-font-family
35
+ // radius: (md: 0, lg: 0, pill: 0), // --matcha-radius-<k>
36
+ // ));
37
+ //
38
+ // O QUE A SKIN NÃO COBRE (limitações conhecidas — docs/theme-stress-test.md):
39
+ // - blocos `@if $is-dark` estruturais (calendar, section, drawer, chart-card,
40
+ // skeleton, reset) seguem a base light/dark escolhida;
41
+ // - cores hardcoded em componentes (ex.: matcha-page-builder — backlog
42
+ // `matcha-page-builder-001`);
43
+ // - cores passadas por @Input/JS (charts) não leem CSS var automaticamente.
44
+ //
45
+ // =============================================================================
46
+ @use "sass:color";
47
+ @use "sass:list";
48
+ @use "sass:map";
49
+ @use "sass:math";
50
+ @use "sass:meta";
51
+
52
+ $-matcha-theme-bases: (light, dark);
53
+ $-matcha-required-seeds: (surface-bg, surface, text-primary, accent, primary, success, danger, warn, info);
54
+
55
+ // ── Helpers de contraste ────────────────────────────────────────────────────
56
+ // Luminância perceptual aproximada (YIQ, 0–255).
57
+ @function matcha-yiq($color) {
58
+ $r: color.channel($color, "red", $space: rgb);
59
+ $g: color.channel($color, "green", $space: rgb);
60
+ $b: color.channel($color, "blue", $space: rgb);
61
+ @return math.div(($r * 299) + ($g * 587) + ($b * 114), 1000);
62
+ }
63
+
64
+ // Foreground de texto opaco sobre $color (padrão dos tokens *-text-on).
65
+ @function matcha-text-on($color) {
66
+ @return if(matcha-yiq($color) >= 150, #1a1d21, #ffffff);
67
+ }
68
+
69
+ // Foreground de contraste no padrão dos tokens *-contrast (preto .87 / branco).
70
+ @function matcha-contrast-on($color) {
71
+ @return if(matcha-yiq($color) >= 150, rgba(0, 0, 0, .87), #ffffff);
72
+ }
73
+
74
+ @function matcha-contrast-alpha-on($color) {
75
+ @return if(matcha-yiq($color) >= 150, rgba(0, 0, 0, .1), rgba(255, 255, 255, .1));
76
+ }
77
+
78
+ // ── Derivação de família de papel (primary/accent/feedback) ────────────────
79
+ // Gera <role>, <role>-hover/-pressed/-alpha/-contrast/-contrast-alpha/
80
+ // -surface-hover/-surface-pressed a partir do seed. Direção do hover segue a
81
+ // base: temas light escurecem no hover, temas dark clareiam (padrão DSV3).
82
+ @function matcha-role-tokens($role, $seed, $surface-bg, $is-dark) {
83
+ @return (
84
+ #{$role}: $seed,
85
+ #{$role}-hover: color.scale($seed, $lightness: if($is-dark, 18%, -12%)),
86
+ #{$role}-pressed: color.scale($seed, $lightness: if($is-dark, 32%, -20%)),
87
+ #{$role}-alpha: rgba($seed, .1),
88
+ #{$role}-contrast: matcha-contrast-on($seed),
89
+ #{$role}-contrast-alpha: matcha-contrast-alpha-on($seed),
90
+ #{$role}-surface-hover: color.mix($seed, $surface-bg, 10%),
91
+ #{$role}-surface-pressed: color.mix($seed, $surface-bg, 22%),
92
+ );
93
+ }
94
+
95
+ // ── Construção do mapa completo de cores do tema ────────────────────────────
96
+ // Parte dos defaults da base (light/dark), aplica as famílias derivadas dos
97
+ // seeds e, por último, os overrides explícitos de `colors` — ou seja, QUALQUER
98
+ // chave de $matcha-color-tokens pode ser cravada no config e vence a derivação.
99
+ @function matcha-build-color-map($config) {
100
+ $base: map.get($config, base);
101
+ @if not list.index($-matcha-theme-bases, $base) {
102
+ @error "matcha-build-color-map: `base` deve ser `light` ou `dark` (recebido: #{meta.inspect($base)}).";
103
+ }
104
+
105
+ $seeds: map.get($config, colors);
106
+ @each $required in $-matcha-required-seeds {
107
+ @if not map.has-key($seeds or (), $required) {
108
+ @error "matcha-build-color-map: seed obrigatório ausente em `colors`: #{$required}. Obrigatórios: #{meta.inspect($-matcha-required-seeds)}.";
109
+ }
110
+ }
111
+
112
+ $is-dark: $base == dark;
113
+ $defaults: if($is-dark, $matcha-colors-dark, $matcha-colors-light);
114
+
115
+ $surface-bg: map.get($seeds, surface-bg);
116
+ $surface: map.get($seeds, surface);
117
+ $text: map.get($seeds, text-primary);
118
+ $accent: map.get($seeds, accent);
119
+
120
+ // Superfícies e estrutura
121
+ $derived: (
122
+ surface-bg: $surface-bg,
123
+ surface-bg-alpha: rgba($surface-bg, .5),
124
+ surface: $surface,
125
+ surface-card: $surface,
126
+ surface-card-strong: color.scale($surface, $lightness: if($is-dark, 8%, 50%)),
127
+ surface-inner: if($is-dark, color.scale($surface, $lightness: 8%), $surface-bg),
128
+ surface-card-alpha: rgba($surface, if($is-dark, .5, .85)),
129
+ surface-sidebar: color.scale($surface-bg, $lightness: if($is-dark, -25%, -4%)),
130
+ surface-sidebar-hover: color.scale($surface-bg, $lightness: if($is-dark, -12%, -9%)),
131
+ surface-table-row-hover: color.mix($text, $surface, 4%),
132
+ surface-border: color.mix($text, $surface-bg, 10%),
133
+ surface-border-strong: color.mix($text, $surface-bg, 22%),
134
+ surface-hover: rgba(color.scale($surface-bg, $lightness: if($is-dark, -25%, -4%)), .5),
135
+ bg: $surface-bg,
136
+
137
+ // Texto e ícones
138
+ fg: $text,
139
+ fg-alpha: rgba($text, .5),
140
+ text-primary: $text,
141
+ text-secondary: color.mix($text, $surface-bg, 78%),
142
+ text-muted: color.mix($text, $surface-bg, 62%),
143
+ text-label: color.mix($text, $surface-bg, 55%),
144
+ text-placeholder: color.mix($text, $surface-bg, 55%),
145
+ text-hint: color.mix($text, $surface-bg, 55%),
146
+ icon-default: color.mix($text, $surface-bg, 65%),
147
+ icon-active: color.mix($text, $surface-bg, 88%),
148
+
149
+ // Neutral + interaction
150
+ neutral: color.mix($text, $surface-bg, if($is-dark, 12%, 8%)),
151
+ neutral-contrast: matcha-text-on(color.mix($text, $surface-bg, if($is-dark, 12%, 8%))),
152
+ neutral-alpha: rgba($text, .08),
153
+ neutral-hover: color.mix($text, $surface-bg, if($is-dark, 18%, 14%)),
154
+ interaction-disabled-bg: color.mix($text, $surface-bg, 14%),
155
+ interaction-disabled-bg-alpha: rgba(color.mix($text, $surface-bg, 14%), .5),
156
+ interaction-disabled-fg: color.mix($text, $surface-bg, 45%),
157
+ interaction-disabled-border: color.mix($text, $surface-bg, 18%),
158
+ disabled: color.mix($text, $surface-bg, 14%),
159
+ disabled-bg: color.mix($text, $surface-bg, 14%),
160
+ disabled-fg: color.mix($text, $surface-bg, 45%),
161
+ disabled-border: color.mix($text, $surface-bg, 18%),
162
+ focus-ring: $accent,
163
+
164
+ // Elevação (cores; shadows são tokens --matcha-shadow-* à parte)
165
+ elevation-surface-1: $surface,
166
+ elevation-surface-2: color.scale($surface, $lightness: if($is-dark, 8%, 50%)),
167
+ elevation-surface-3: color.scale($surface, $lightness: if($is-dark, 14%, 50%)),
168
+ state-layer-fg: if($is-dark, #ffffff, #000000),
169
+ );
170
+
171
+ // Papéis semânticos derivados dos seeds
172
+ @each $role in (accent, primary, success, danger, warn, info) {
173
+ $derived: map.merge($derived, matcha-role-tokens($role, map.get($seeds, $role), $surface-bg, $is-dark));
174
+ }
175
+
176
+ // Extras por papel (tokens que só algumas famílias têm)
177
+ $primary: map.get($seeds, primary);
178
+ $derived: map.merge($derived, (
179
+ accent-text-on: matcha-text-on($accent),
180
+ accent-light: color.scale($accent, $lightness: 45%),
181
+ accent-dark: color.scale($accent, $lightness: -30%),
182
+ primary-light: color.scale($primary, $lightness: 45%),
183
+ primary-dark: color.scale($primary, $lightness: -35%),
184
+ success-fill: map.get($seeds, success),
185
+ danger-fill: map.get($seeds, danger),
186
+ warn-fill: map.get($seeds, warn),
187
+ ));
188
+
189
+ // accent-2 só deriva se o seed opcional vier (senão herda da base)
190
+ @if map.has-key($seeds, accent-2) {
191
+ $accent-2: map.get($seeds, accent-2);
192
+ $derived: map.merge($derived, (
193
+ accent-2: $accent-2,
194
+ accent-2-contrast: matcha-text-on($accent-2),
195
+ accent-2-alpha: rgba($accent-2, .1),
196
+ accent-2-surface: color.mix($accent-2, $surface-bg, 14%),
197
+ ));
198
+ }
199
+
200
+ // defaults da base < derivados < overrides explícitos do config
201
+ @return map.merge(map.merge($defaults, $derived), $seeds);
202
+ }
203
+
204
+ // ── API pública ─────────────────────────────────────────────────────────────
205
+ // Emite a classe `.theme-<nome>` com o override completo das CSS vars de cor
206
+ // (+ shadows/font-family/radius opcionais). Ver contrato de runtime no topo.
207
+ @mixin matcha-define-theme($name, $config) {
208
+ .theme-#{$name} {
209
+ @include matcha-emit-color-properties(matcha-build-color-map($config));
210
+
211
+ $shadows: map.get($config, shadows);
212
+ @if $shadows {
213
+ @each $level, $value in $shadows {
214
+ --matcha-shadow-#{$level}: #{$value};
215
+ }
216
+ }
217
+
218
+ $font-family: map.get($config, font-family);
219
+ @if $font-family {
220
+ --matcha-font-family: #{$font-family};
221
+ }
222
+
223
+ $radius: map.get($config, radius);
224
+ @if $radius {
225
+ @each $key, $value in $radius {
226
+ --matcha-radius-#{$key}: #{$value};
227
+ }
228
+ }
229
+ }
230
+ }
package/components/app-page-header.scss CHANGED
@@ -16,48 +16,47 @@
16
16
  // =============================================================================
17
17
 
18
18
  @mixin app-page-header-theme($theme) {
19
- $is-dark: map.get($theme, is-dark);
20
19
 
21
20
  .matcha-header {
22
21
  &__content {
23
- background: var(--matcha-color-surface, #{getSurface($theme)});
22
+ background: var(--matcha-color-surface);
24
23
 
25
24
  &__title__icon {
26
- color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
25
+ color: var(--matcha-color-text-label);
27
26
  }
28
27
 
29
28
  &__options {
30
- background: var(--matcha-color-surface, #{getSurface($theme)});
29
+ background: var(--matcha-color-surface);
31
30
  }
32
31
  }
33
32
 
34
33
  .matcha-header-church-id {
35
- color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
34
+ color: var(--matcha-color-text-placeholder);
36
35
  }
37
36
 
38
37
  .matcha-header-user-name {
39
- color: var(--matcha-color-fg, #{getForeground($theme)});
38
+ color: var(--matcha-color-fg);
40
39
  }
41
40
 
42
41
  @include media-breakpoint('gt-sm') {
43
42
  &__content {
44
- background: var(--matcha-color-surface, #{getSurface($theme)});
43
+ background: var(--matcha-color-surface);
45
44
  &__options { background: transparent; }
46
45
  }
47
46
  }
48
47
  }
49
48
 
50
49
  .matcha-header-profile {
51
- background: var(--matcha-color-surface, #{getSurface($theme)});
52
- .profile-back { color: var(--matcha-color-fg, #{getForeground($theme)}); &:hover { opacity: 0.8; } &:focus-visible { outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)}); outline-offset: var(--matcha-state-focus-ring-offset, 2px); border-radius: var(--matcha-radius-md, 4px); } }
53
- .profile-dates { color: var(--matcha-color-text-label, #{getBlueGrey($theme)}); }
54
- .profile-name { color: var(--matcha-color-fg, #{getForeground($theme)}); }
55
- .profile-meta { color: var(--matcha-color-text-label, #{getBlueGrey($theme)}); }
56
- .profile-church { color: var(--matcha-color-fg, #{getForeground($theme)}); }
57
- .profile-function-label { color: var(--matcha-color-accent, #{getAccent($theme)}); }
58
- .profile-function-value { color: var(--matcha-color-text-label, #{getBlueGrey($theme)}); }
59
- .profile-enrollment { color: var(--matcha-color-fg, #{getForeground($theme)}); }
60
- .profile-edit { color: var(--matcha-color-text-label, #{getBlueGrey($theme)}); cursor: pointer; &:hover { color: var(--matcha-color-fg, #{getForeground($theme)}); } &:focus-visible { outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)}); outline-offset: var(--matcha-state-focus-ring-offset, 2px); } }
50
+ background: var(--matcha-color-surface);
51
+ .profile-back { color: var(--matcha-color-fg); &:hover { opacity: 0.8; } &:focus-visible { outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent); outline-offset: var(--matcha-state-focus-ring-offset, 2px); border-radius: var(--matcha-radius-md, 4px); } }
52
+ .profile-dates { color: var(--matcha-color-text-label); }
53
+ .profile-name { color: var(--matcha-color-fg); }
54
+ .profile-meta { color: var(--matcha-color-text-label); }
55
+ .profile-church { color: var(--matcha-color-fg); }
56
+ .profile-function-label { color: var(--matcha-color-accent); }
57
+ .profile-function-value { color: var(--matcha-color-text-label); }
58
+ .profile-enrollment { color: var(--matcha-color-fg); }
59
+ .profile-edit { color: var(--matcha-color-text-label); cursor: pointer; &:hover { color: var(--matcha-color-fg); } &:focus-visible { outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent); outline-offset: var(--matcha-state-focus-ring-offset, 2px); } }
61
60
  }
62
61
  }
63
62
 
package/components/matcha-accordion.scss CHANGED
@@ -8,19 +8,18 @@
8
8
  // =============================================================================
9
9
 
10
10
  @mixin matcha-accordion-theme($theme) {
11
- $is-dark: map.get($theme, is-dark);
12
11
 
13
12
  matcha-accordion-item {
14
13
  .accordion-item {
15
14
  // Figma DSV3 (15808:51): bg = matcha/color/surface/card (canônico)
16
- background: var(--matcha-color-surface-card, #{getSurface($theme)});
15
+ background: var(--matcha-color-surface-card);
17
16
  border-radius: var(--matcha-radius-lg, 8px);
18
17
  }
19
18
 
20
19
  // ── Native button reset + state layer ──
21
20
  // Slot --matcha-accordion-header-color pra consumer override.
22
21
  .accordion-header-button {
23
- color: var(--matcha-accordion-header-color, var(--matcha-color-fg, #{getForeground($theme)}));
22
+ color: var(--matcha-accordion-header-color, var(--matcha-color-fg));
24
23
 
25
24
  // Hover/active/focus só aplicam ao <button>; modificador --static (div, modo
26
25
  // clickableHeader=false) não tem state-layer e não recebe focus-ring direto.
@@ -38,7 +37,7 @@
38
37
  }
39
38
 
40
39
  &:focus-visible {
41
- outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
40
+ outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
42
41
  outline-offset: var(--matcha-state-focus-ring-offset, 2px);
43
42
  border-radius: var(--matcha-radius-lg, 8px);
44
43
  }
@@ -47,12 +46,12 @@
47
46
 
48
47
  // ── Content text ──
49
48
  .accordion-content {
50
- color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
49
+ color: var(--matcha-color-text-label);
51
50
  }
52
51
 
53
52
  // ── Chevron ──
54
53
  .accordion-chevron {
55
- color: var(--matcha-color-icon-default, #{getBlueGrey($theme)});
54
+ color: var(--matcha-color-icon-default);
56
55
  }
57
56
 
58
57
  // ── Disabled ──
package/components/matcha-audio-player.scss CHANGED
@@ -7,11 +7,10 @@
7
7
  // =============================================================================
8
8
 
9
9
  @mixin matcha-audio-player-theme($theme) {
10
- $is-dark: map.get($theme, is-dark);
11
10
 
12
11
  .matcha-audio-player {
13
12
  .is-selected {
14
- box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent, #{getAccent($theme)});
13
+ box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent);
15
14
  }
16
15
  }
17
16
  }
package/components/matcha-autocomplete.scss CHANGED
@@ -9,7 +9,6 @@
9
9
  // =============================================================================
10
10
 
11
11
  @mixin matcha-autocomplete-theme($theme) {
12
- $is-dark: map.get($theme, is-dark);
13
12
 
14
13
  matcha-autocomplete {
15
14
  .matcha-autocomplete-container {
@@ -20,10 +19,10 @@
20
19
 
21
20
  // ── Panel override for autocomplete context ──
22
21
  .matcha-autocomplete-panel {
23
- background: var(--matcha-color-surface, #{getSurface($theme)});
24
- border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
22
+ background: var(--matcha-color-surface);
23
+ border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border);
25
24
  border-radius: var(--matcha-radius-lg, 8px);
26
- box-shadow: var(--matcha-shadow-2, #{if($is-dark, $shadow-2-dark, $shadow-2-light)});
25
+ box-shadow: var(--matcha-shadow-2);
27
26
  overflow: hidden;
28
27
  }
29
28
 
@@ -34,7 +33,7 @@
34
33
  gap: var(--matcha-space-100, 8px);
35
34
  padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
36
35
  cursor: pointer;
37
- color: var(--matcha-color-fg, #{getForeground($theme)});
36
+ color: var(--matcha-color-fg);
38
37
  font-family: var(--matcha-font-family);
39
38
  font-size: var(--matcha-text-body-md, 14px);
40
39
  line-height: var(--matcha-leading-body-md, 20px);
@@ -56,14 +55,14 @@
56
55
  &:active:not([aria-disabled="true"]):not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
57
56
 
58
57
  &:focus-visible {
59
- outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
58
+ outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
60
59
  outline-offset: var(--matcha-state-focus-ring-offset, -2px);
61
60
  }
62
61
 
63
62
  // Selected state
64
63
  &[aria-selected="true"],
65
64
  &.matcha-option-selected {
66
- background: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
65
+ background: var(--matcha-color-accent-alpha);
67
66
  font-weight: var(--matcha-weight-medium, 500);
68
67
  }
69
68
 
@@ -80,7 +79,7 @@
80
79
  .matcha-autocomplete-empty {
81
80
  padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
82
81
  text-align: center;
83
- color: var(--matcha-color-text-placeholder, #{getGrey($theme)});
82
+ color: var(--matcha-color-text-placeholder);
84
83
  font-family: var(--matcha-font-family);
85
84
  font-size: var(--matcha-text-body-md, 14px);
86
85
  line-height: var(--matcha-leading-body-md, 20px);
@@ -89,15 +88,15 @@
89
88
 
90
89
  // ── Clear button ──
91
90
  .matcha-autocomplete-clear-button {
92
- color: var(--matcha-color-text-hint, #{getBlueGrey($theme)});
91
+ color: var(--matcha-color-text-hint);
93
92
  cursor: pointer;
94
93
 
95
94
  &:hover {
96
- color: var(--matcha-color-fg, #{getForeground($theme)});
95
+ color: var(--matcha-color-fg);
97
96
  }
98
97
 
99
98
  &:focus-visible {
100
- outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
99
+ outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
101
100
  outline-offset: var(--matcha-state-focus-ring-offset, 2px);
102
101
  border-radius: var(--matcha-radius-sm, 2px);
103
102
  }
package/components/matcha-avatar.scss CHANGED
@@ -245,14 +245,14 @@ matcha-avatar[ring]:not([ring="neutral"]) .matcha-avatar {
245
245
 
246
246
  &.matcha-avatar--disabled,
247
247
  &.color-disabled {
248
- background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
249
- color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
248
+ background-color: var(--matcha-color-disabled-bg);
249
+ color: var(--matcha-color-disabled-fg);
250
250
  }
251
251
  }
252
252
 
253
253
  // Status border-color por tema (estrutural já resolve cores de fundo via tokens).
254
254
  .matcha-avatar-status {
255
- border-color: var(--matcha-color-surface-card, #{getSurface($theme)});
255
+ border-color: var(--matcha-color-surface-card);
256
256
  }
257
257
  }
258
258
 
package/components/matcha-badge.scss CHANGED
@@ -89,32 +89,32 @@
89
89
 
90
90
  @mixin matcha-badge-theme($theme) {
91
91
  .matcha-badge--accent {
92
- background-color: var(--matcha-color-badge-bg, #{getAccent($theme)});
93
- color: var(--matcha-color-badge-fg, #{getAccentContrast($theme)});
92
+ background-color: var(--matcha-color-badge-bg, var(--matcha-color-accent));
93
+ color: var(--matcha-color-badge-fg, var(--matcha-color-accent-contrast));
94
94
  }
95
95
 
96
96
  .matcha-badge--danger {
97
- background-color: var(--matcha-color-badge-danger-bg, #{getDanger($theme)});
98
- color: var(--matcha-color-badge-danger-fg, #{getDangerContrast($theme)});
97
+ background-color: var(--matcha-color-badge-danger-bg, var(--matcha-color-danger));
98
+ color: var(--matcha-color-badge-danger-fg, var(--matcha-color-danger-contrast));
99
99
  }
100
100
 
101
101
  .matcha-badge--warn {
102
- background-color: var(--matcha-color-badge-warn-bg, #{getWarn($theme)});
103
- color: var(--matcha-color-badge-warn-fg, #{getWarnContrast($theme)});
102
+ background-color: var(--matcha-color-badge-warn-bg, var(--matcha-color-warn));
103
+ color: var(--matcha-color-badge-warn-fg, var(--matcha-color-warn-contrast));
104
104
  }
105
105
 
106
106
  .matcha-badge--success {
107
- background-color: var(--matcha-color-badge-success-bg, #{getSuccess($theme)});
108
- color: var(--matcha-color-badge-success-fg, #{getSuccessContrast($theme)});
107
+ background-color: var(--matcha-color-badge-success-bg, var(--matcha-color-success));
108
+ color: var(--matcha-color-badge-success-fg, var(--matcha-color-success-contrast));
109
109
  }
110
110
 
111
111
  .matcha-badge--info {
112
- background-color: var(--matcha-color-badge-info-bg, #{getInfo($theme)});
113
- color: var(--matcha-color-badge-info-fg, #{getInfoContrast($theme)});
112
+ background-color: var(--matcha-color-badge-info-bg, var(--matcha-color-info));
113
+ color: var(--matcha-color-badge-info-fg, var(--matcha-color-info-contrast));
114
114
  }
115
115
 
116
116
  .matcha-badge--dot,
117
117
  .matcha-badge--count {
118
- border-color: var(--matcha-color-badge-border, #{getSurface($theme)});
118
+ border-color: var(--matcha-color-badge-border);
119
119
  }
120
120
  }
package/components/matcha-breadcrumb.scss CHANGED
@@ -10,14 +10,13 @@
10
10
  // =============================================================================
11
11
 
12
12
  @mixin matcha-breadcrumb-theme($theme) {
13
- $is-dark: map.get($theme, is-dark);
14
13
 
15
14
  matcha-breadcrumb {
16
15
  // ── Link items (clicáveis) ──
17
16
  .breadcrumb-item-link {
18
17
  // Figma DSV3: bg = matcha/color/elevation/surface-2 (canônico)
19
- background: var(--matcha-color-elevation-surface-2, #{getSurfaceAlpha($theme)});
20
- color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
18
+ background: var(--matcha-color-elevation-surface-2);
19
+ color: var(--matcha-color-text-secondary);
21
20
 
22
21
  &:hover:not([disabled]):not(.disabled) {
23
22
  .breadcrumb-state {
@@ -32,19 +31,19 @@
32
31
  }
33
32
 
34
33
  &:focus-visible {
35
- outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
34
+ outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
36
35
  outline-offset: var(--matcha-state-focus-ring-offset, 2px);
37
36
  }
38
37
  }
39
38
 
40
39
  // ── Página atual ──
41
40
  .breadcrumb-item-current {
42
- color: var(--matcha-color-text-primary, #{getForeground($theme)});
41
+ color: var(--matcha-color-text-primary);
43
42
  }
44
43
 
45
44
  // ── Separator (chevron) ──
46
45
  .breadcrumb-separator {
47
- color: var(--matcha-color-icon-default, #{getBlueGrey($theme)});
46
+ color: var(--matcha-color-icon-default);
48
47
  }
49
48
 
50
49
  // ── Disabled (real disabled — não confundir com ellipsis) ──
@@ -58,7 +57,7 @@
58
57
  // Quando estático (--static), só muda cursor pra default.
59
58
  .breadcrumb-ellipsis {
60
59
  // Mantém color/bg do Link. Sem opacity reduzida.
61
- color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
60
+ color: var(--matcha-color-text-secondary);
62
61
 
63
62
  &--static {
64
63
  cursor: default;
package/components/matcha-button-toggle.scss CHANGED
@@ -47,7 +47,7 @@
47
47
  button[matcha-button],
48
48
  a[matcha-button] {
49
49
  &:not([active]) {
50
- background: var(--matcha-color-surface, #{getSurface($theme)});
50
+ background: var(--matcha-color-surface);
51
51
  color: call(#{$colorFn}, $theme);
52
52
  box-shadow: 0 0 0 0px inset;
53
53
 
@@ -251,7 +251,7 @@ matcha-button-toggle {
251
251
  button[matcha-button],
252
252
  a[matcha-button] {
253
253
  &:focus-visible:not([disabled]):not([disabled="true"]) {
254
- outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
254
+ outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
255
255
  outline-offset: var(--matcha-state-focus-ring-offset, 2px);
256
256
  }
257
257
  }