@inchurch/matcha-theme 21.3.3 → 22.0.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 (93) hide show
  1. package/abstracts/_colors.scss +236 -229
  2. package/abstracts/_elevation.scss +108 -108
  3. package/abstracts/_functions.scss +321 -321
  4. package/abstracts/_media-breakpoint.scss +26 -26
  5. package/abstracts/_theme-api.scss +219 -219
  6. package/abstracts/_typography.scss +128 -128
  7. package/base/_reset.scss +445 -432
  8. package/components/app-page-header.scss +260 -260
  9. package/components/matcha-accordion.scss +293 -293
  10. package/components/matcha-audio-player.scss +31 -31
  11. package/components/matcha-autocomplete.scss +145 -145
  12. package/components/matcha-avatar.scss +440 -301
  13. package/components/matcha-badge.scss +120 -120
  14. package/components/matcha-breadcrumb.scss +231 -231
  15. package/components/matcha-button-toggle.scss +384 -384
  16. package/components/matcha-buttons.scss +913 -913
  17. package/components/matcha-calendar.scss +218 -218
  18. package/components/matcha-cards.scss +230 -230
  19. package/components/matcha-chart-card.scss +53 -53
  20. package/components/matcha-checkbox.scss +255 -255
  21. package/components/matcha-chip.scss +292 -292
  22. package/components/matcha-color-pick.scss +34 -34
  23. package/components/matcha-command-palette.scss +316 -316
  24. package/components/matcha-crop.scss +406 -406
  25. package/components/matcha-date.scss +81 -81
  26. package/components/matcha-divider.scss +100 -100
  27. package/components/matcha-draggable.scss +23 -23
  28. package/components/matcha-drawer.scss +376 -376
  29. package/components/matcha-drop-image.scss +14 -14
  30. package/components/matcha-drop-list.scss +430 -430
  31. package/components/matcha-emoji.scss +69 -69
  32. package/components/matcha-empty-state.scss +230 -230
  33. package/components/matcha-file-uploader.scss +471 -471
  34. package/components/matcha-flag.scss +103 -103
  35. package/components/matcha-footer.scss +91 -91
  36. package/components/matcha-form-field.scss +606 -606
  37. package/components/matcha-form-section.scss +100 -100
  38. package/components/matcha-header.scss +135 -135
  39. package/components/matcha-highlight.scss +164 -164
  40. package/components/matcha-hint-text.scss +90 -90
  41. package/components/matcha-horizontal-tree.scss +316 -316
  42. package/components/matcha-icon.scss +98 -98
  43. package/components/matcha-image.scss +61 -61
  44. package/components/matcha-list.scss +211 -211
  45. package/components/matcha-menu.scss +99 -99
  46. package/components/matcha-modal.scss +210 -210
  47. package/components/matcha-nav.scss +581 -581
  48. package/components/matcha-notification.scss +413 -413
  49. package/components/matcha-option.scss +170 -170
  50. package/components/matcha-page-builder.scss +4196 -4196
  51. package/components/matcha-paginator.scss +689 -689
  52. package/components/matcha-panel.scss +194 -194
  53. package/components/matcha-profile-card.scss +50 -50
  54. package/components/matcha-progress-bar.scss +313 -313
  55. package/components/matcha-radio.scss +320 -320
  56. package/components/matcha-ripple.scss +7 -7
  57. package/components/matcha-scrollbar.scss +33 -33
  58. package/components/matcha-scrollbox-shadow.scss +120 -120
  59. package/components/matcha-section.scss +102 -102
  60. package/components/matcha-select-multiple.scss +56 -56
  61. package/components/matcha-select.scss +667 -667
  62. package/components/matcha-skeleton.scss +155 -155
  63. package/components/matcha-slide-toggle.scss +369 -369
  64. package/components/matcha-slider.scss +285 -285
  65. package/components/matcha-snack-bar.scss +259 -259
  66. package/components/matcha-spin.scss +164 -164
  67. package/components/matcha-spinner.scss +97 -97
  68. package/components/matcha-status-pill.scss +38 -18
  69. package/components/matcha-stepper.scss +376 -376
  70. package/components/matcha-table-cell.scss +74 -41
  71. package/components/matcha-table.scss +579 -578
  72. package/components/matcha-tabs.scss +600 -600
  73. package/components/matcha-text-editor.scss +105 -105
  74. package/components/matcha-time.scss +33 -33
  75. package/components/matcha-timepicker.scss +13 -13
  76. package/components/matcha-toolbar.scss +359 -359
  77. package/components/matcha-tooltip.scss +224 -224
  78. package/components/matcha-tree-view.scss +257 -212
  79. package/layout/matcha-page-layout.scss +778 -778
  80. package/main.scss +329 -329
  81. package/package.json +1 -1
  82. package/tokens/_animations-tokens.scss +37 -37
  83. package/tokens/_breakpoints-tokens.scss +35 -35
  84. package/tokens/_color-tokens.scss +274 -261
  85. package/tokens/_elevation-tokens.scss +33 -33
  86. package/tokens/_emit-tokens.scss +324 -324
  87. package/tokens/_material-palette.scss +1149 -1149
  88. package/tokens/_primitives.scss +98 -98
  89. package/tokens/_semantic-aliases.scss +120 -120
  90. package/tokens/_spacing-tokens.scss +94 -94
  91. package/tokens/_static-tokens.scss +137 -137
  92. package/tokens/_typography-tokens.scss +65 -65
  93. package/vendors/charts.scss +90 -90
package/abstracts/_media-breakpoint.scss CHANGED
@@ -1,26 +1,26 @@
1
- @use "../tokens/breakpoints-tokens" as *;
2
- @use "sass:map";
3
-
4
- // -------------------------------------------------------------------------------------------------------------------
5
- // @ Theme mixins
6
- // --------------------------------------------------------------------------------------------------------------------
7
- /*
8
- Esse mixin foi criado para não precisar escrever o valor em pixels de cada breakpoint toda vez que for necessário
9
- criar um media query. Se em algum momento for necessário alterar o valor de um breakpoint, basta alterar o valor nos
10
- tokens e o mixin irá se encarregar de atualizar todos os media queries que utilizam aquele breakpoint.
11
-
12
- Exemplo de uso:
13
-
14
-
15
-
16
- */
17
- @mixin media-breakpoint($breakpointName) {
18
- $mediaQuery: map.get($breakpoints, $breakpointName);
19
- @if ($mediaQuery == null) {
20
- @content;
21
- } @else {
22
- @media #{$mediaQuery} {
23
- @content;
24
- }
25
- }
26
- }
1
+ @use "../tokens/breakpoints-tokens" as *;
2
+ @use "sass:map";
3
+
4
+ // -------------------------------------------------------------------------------------------------------------------
5
+ // @ Theme mixins
6
+ // --------------------------------------------------------------------------------------------------------------------
7
+ /*
8
+ Esse mixin foi criado para não precisar escrever o valor em pixels de cada breakpoint toda vez que for necessário
9
+ criar um media query. Se em algum momento for necessário alterar o valor de um breakpoint, basta alterar o valor nos
10
+ tokens e o mixin irá se encarregar de atualizar todos os media queries que utilizam aquele breakpoint.
11
+
12
+ Exemplo de uso:
13
+
14
+
15
+
16
+ */
17
+ @mixin media-breakpoint($breakpointName) {
18
+ $mediaQuery: map.get($breakpoints, $breakpointName);
19
+ @if ($mediaQuery == null) {
20
+ @content;
21
+ } @else {
22
+ @media #{$mediaQuery} {
23
+ @content;
24
+ }
25
+ }
26
+ }
package/abstracts/_theme-api.scss CHANGED
@@ -1,219 +1,219 @@
1
- @use "functions" as *;
2
- @use "../tokens/color-tokens" as *;
3
- // =============================================================================
4
- // MATCHA THEME API — criação de temas por override de CSS custom properties
5
- // =============================================================================
6
- //
7
- // Um tema Matcha adicional é uma SKIN: uma classe que sobrescreve as CSS vars
8
- // de cor (--matcha-color-*) emitidas pelos temas default. Os component mixins
9
- // consomem cor exclusivamente via var(--matcha-*), então a skin re-tematiza a
10
- // lib inteira sem recompilar matcha-components() (~20k linhas de CSS por tema).
11
- //
12
- // CONTRATO DE RUNTIME (duas classes no <body>):
13
- // <body class="theme-default-dark theme-nerd">
14
- // 1. `theme-default-light` OU `theme-default-dark` — a BASE, escolhida pelo
15
- // `base` do config. Fornece tudo que ainda é decidido em compile-time
16
- // pelos component mixins (blocos `@if $is-dark` estruturais, shadows
17
- // default, classes utilitárias) — ver backlog `matcha-theme-003`.
18
- // 2. `theme-<nome>` — a skin gerada por `matcha-define-theme()`. Deve ser
19
- // emitida DEPOIS dos temas default no CSS (ordem de fonte vence, mesma
20
- // especificidade).
21
- //
22
- // USO:
23
- // @use "@inchurch/matcha-theme/main.scss" as matcha;
24
- // @include matcha.matcha-define-theme(meu-tema, (
25
- // base: dark,
26
- // colors: (
27
- // // 9 seeds obrigatórios:
28
- // surface-bg: #000, surface: #0a120a, text-primary: #33ff33,
29
- // accent: #33ff33, primary: #00cc66, success: #33ff33,
30
- // danger: #ff3333, warn: #ffcc00, info: #00ccff,
31
- // // + qualquer token de $matcha-color-tokens como override fino:
32
- // text-muted: #1faa1f,
33
- // ),
34
- // // opcionais:
35
- // shadows: (1: 0 0 4px rgba(51, 255, 51, .4)), // --matcha-shadow-<n>
36
- // font-family: ("Fira Code", monospace), // --matcha-font-family
37
- // radius: (md: 0, lg: 0, pill: 0), // --matcha-radius-<k>
38
- // ));
39
- //
40
- // O QUE A SKIN NÃO COBRE (limitações conhecidas — docs/theme-stress-test.md):
41
- // - blocos `@if $is-dark` estruturais (calendar, section, drawer, chart-card,
42
- // skeleton, reset) seguem a base light/dark escolhida;
43
- // - cores hardcoded em componentes (ex.: matcha-page-builder — backlog
44
- // `matcha-page-builder-001`);
45
- // - cores passadas por @Input/JS (charts) não leem CSS var automaticamente.
46
- //
47
- // =============================================================================
48
- @use "sass:color";
49
- @use "sass:list";
50
- @use "sass:map";
51
- @use "sass:math";
52
- @use "sass:meta";
53
-
54
- $-matcha-theme-bases: (light, dark);
55
- $-matcha-required-seeds: (surface-bg, surface, text-primary, accent, primary, success, danger, warn, info);
56
-
57
- // ── Helpers de contraste ────────────────────────────────────────────────────
58
- // Luminância perceptual aproximada (YIQ, 0–255).
59
-
60
- // Foreground de texto opaco sobre $color (padrão dos tokens *-text-on).
61
-
62
- // Foreground de contraste no padrão dos tokens *-contrast (preto .87 / branco).
63
-
64
- // ── Emissor genérico de --matcha-color-* ─────────────────────────────────────
65
- // Movido de _emit-tokens para quebrar o ciclo @use (emit-tokens → color-tokens →
66
- // theme-api → emit-tokens). Self-contained (só sass:map). Usado por
67
- // matcha-define-theme (abaixo) e por matcha-css-custom-properties (emit-tokens, via @use).
68
- @mixin matcha-emit-color-properties($colors, $aliases: ()) {
69
- @each $token, $value in $colors {
70
- $alias: map.get($aliases, $token);
71
- @if $alias {
72
- --matcha-color-#{$token}: var(#{$alias});
73
- } @else {
74
- --matcha-color-#{$token}: #{$value};
75
- }
76
- }
77
- }
78
-
79
- // ── Derivação de família de papel (primary/accent/feedback) ────────────────
80
- // Gera <role>, <role>-hover/-pressed/-alpha/-contrast/-contrast-alpha/
81
- // -surface-hover/-surface-pressed a partir do seed. Direção do hover segue a
82
- // base: temas light escurecem no hover, temas dark clareiam (padrão DSV3).
83
-
84
- // ── Construção do mapa completo de cores do tema ────────────────────────────
85
- // Parte dos defaults da base (light/dark), aplica as famílias derivadas dos
86
- // seeds e, por último, os overrides explícitos de `colors` — ou seja, QUALQUER
87
- // chave de $matcha-color-tokens pode ser cravada no config e vence a derivação.
88
- @function matcha-build-color-map($config) {
89
- $base: map.get($config, base);
90
- @if not list.index($-matcha-theme-bases, $base) {
91
- @error "matcha-build-color-map: `base` deve ser `light` ou `dark` (recebido: #{meta.inspect($base)}).";
92
- }
93
-
94
- $seeds: map.get($config, colors);
95
- @each $required in $-matcha-required-seeds {
96
- @if not map.has-key($seeds or (), $required) {
97
- @error "matcha-build-color-map: seed obrigatório ausente em `colors`: #{$required}. Obrigatórios: #{meta.inspect($-matcha-required-seeds)}.";
98
- }
99
- }
100
-
101
- $is-dark: $base == dark;
102
- $defaults: if($is-dark, $matcha-colors-dark, $matcha-colors-light);
103
-
104
- $surface-bg: map.get($seeds, surface-bg);
105
- $surface: map.get($seeds, surface);
106
- $text: map.get($seeds, text-primary);
107
- $accent: map.get($seeds, accent);
108
-
109
- // Superfícies e estrutura
110
- $derived: (
111
- surface-bg: $surface-bg,
112
- surface-bg-alpha: rgba($surface-bg, .5),
113
- surface: $surface,
114
- surface-card: $surface,
115
- surface-card-strong: color.scale($surface, $lightness: if($is-dark, 8%, 50%)),
116
- surface-inner: if($is-dark, color.scale($surface, $lightness: 8%), $surface-bg),
117
- surface-card-alpha: rgba($surface, if($is-dark, .5, .85)),
118
- surface-sidebar: color.scale($surface-bg, $lightness: if($is-dark, -25%, -4%)),
119
- surface-sidebar-hover: color.scale($surface-bg, $lightness: if($is-dark, -12%, -9%)),
120
- surface-table-row-hover: color.mix($text, $surface, 4%),
121
- surface-border: color.mix($text, $surface-bg, 10%),
122
- surface-border-strong: color.mix($text, $surface-bg, 22%),
123
- surface-hover: rgba(color.scale($surface-bg, $lightness: if($is-dark, -25%, -4%)), .5),
124
- bg: $surface-bg,
125
-
126
- // Texto e ícones
127
- fg: $text,
128
- fg-alpha: rgba($text, .5),
129
- text-primary: $text,
130
- text-secondary: color.mix($text, $surface-bg, 78%),
131
- text-muted: color.mix($text, $surface-bg, 62%),
132
- text-label: color.mix($text, $surface-bg, 55%),
133
- text-placeholder: color.mix($text, $surface-bg, 55%),
134
- text-hint: color.mix($text, $surface-bg, 55%),
135
- icon-default: color.mix($text, $surface-bg, 65%),
136
- icon-active: color.mix($text, $surface-bg, 88%),
137
-
138
- // Neutral + interaction
139
- neutral: color.mix($text, $surface-bg, if($is-dark, 12%, 8%)),
140
- neutral-contrast: matcha-text-on(color.mix($text, $surface-bg, if($is-dark, 12%, 8%))),
141
- neutral-alpha: rgba($text, .08),
142
- neutral-hover: color.mix($text, $surface-bg, if($is-dark, 18%, 14%)),
143
- interaction-disabled-bg: color.mix($text, $surface-bg, 14%),
144
- interaction-disabled-bg-alpha: rgba(color.mix($text, $surface-bg, 14%), .5),
145
- interaction-disabled-fg: color.mix($text, $surface-bg, 45%),
146
- interaction-disabled-border: color.mix($text, $surface-bg, 18%),
147
- disabled: color.mix($text, $surface-bg, 14%),
148
- disabled-bg: color.mix($text, $surface-bg, 14%),
149
- disabled-fg: color.mix($text, $surface-bg, 45%),
150
- disabled-border: color.mix($text, $surface-bg, 18%),
151
- focus-ring: $accent,
152
-
153
- // Elevação (cores; shadows são tokens --matcha-shadow-* à parte)
154
- elevation-surface-1: $surface,
155
- elevation-surface-2: color.scale($surface, $lightness: if($is-dark, 8%, 50%)),
156
- elevation-surface-3: color.scale($surface, $lightness: if($is-dark, 14%, 50%)),
157
- state-layer-fg: if($is-dark, #ffffff, #000000),
158
- );
159
-
160
- // Papéis semânticos derivados dos seeds
161
- @each $role in (accent, primary, success, danger, warn, info) {
162
- $derived: map.merge($derived, matcha-role-tokens($role, map.get($seeds, $role), $surface-bg, $is-dark));
163
- }
164
-
165
- // Extras por papel (tokens que só algumas famílias têm)
166
- $primary: map.get($seeds, primary);
167
- $derived: map.merge($derived, (
168
- accent-text-on: matcha-text-on($accent),
169
- accent-light: color.scale($accent, $lightness: 45%),
170
- accent-dark: color.scale($accent, $lightness: -30%),
171
- primary-light: color.scale($primary, $lightness: 45%),
172
- primary-dark: color.scale($primary, $lightness: -35%),
173
- success-fill: map.get($seeds, success),
174
- danger-fill: map.get($seeds, danger),
175
- warn-fill: map.get($seeds, warn),
176
- ));
177
-
178
- // accent-2 só deriva se o seed opcional vier (senão herda da base)
179
- @if map.has-key($seeds, accent-2) {
180
- $accent-2: map.get($seeds, accent-2);
181
- $derived: map.merge($derived, (
182
- accent-2: $accent-2,
183
- accent-2-contrast: matcha-text-on($accent-2),
184
- accent-2-alpha: rgba($accent-2, .1),
185
- accent-2-surface: color.mix($accent-2, $surface-bg, 14%),
186
- ));
187
- }
188
-
189
- // defaults da base < derivados < overrides explícitos do config
190
- @return map.merge(map.merge($defaults, $derived), $seeds);
191
- }
192
-
193
- // ── API pública ─────────────────────────────────────────────────────────────
194
- // Emite a classe `.theme-<nome>` com o override completo das CSS vars de cor
195
- // (+ shadows/font-family/radius opcionais). Ver contrato de runtime no topo.
196
- @mixin matcha-define-theme($name, $config) {
197
- .theme-#{$name} {
198
- @include matcha-emit-color-properties(matcha-build-color-map($config));
199
-
200
- $shadows: map.get($config, shadows);
201
- @if $shadows {
202
- @each $level, $value in $shadows {
203
- --matcha-shadow-#{$level}: #{$value};
204
- }
205
- }
206
-
207
- $font-family: map.get($config, font-family);
208
- @if $font-family {
209
- --matcha-font-family: #{$font-family};
210
- }
211
-
212
- $radius: map.get($config, radius);
213
- @if $radius {
214
- @each $key, $value in $radius {
215
- --matcha-radius-#{$key}: #{$value};
216
- }
217
- }
218
- }
219
- }
1
+ @use "functions" as *;
2
+ @use "../tokens/color-tokens" as *;
3
+ // =============================================================================
4
+ // MATCHA THEME API — criação de temas por override de CSS custom properties
5
+ // =============================================================================
6
+ //
7
+ // Um tema Matcha adicional é uma SKIN: uma classe que sobrescreve as CSS vars
8
+ // de cor (--matcha-color-*) emitidas pelos temas default. Os component mixins
9
+ // consomem cor exclusivamente via var(--matcha-*), então a skin re-tematiza a
10
+ // lib inteira sem recompilar matcha-components() (~20k linhas de CSS por tema).
11
+ //
12
+ // CONTRATO DE RUNTIME (duas classes no <body>):
13
+ // <body class="theme-default-dark theme-nerd">
14
+ // 1. `theme-default-light` OU `theme-default-dark` — a BASE, escolhida pelo
15
+ // `base` do config. Fornece tudo que ainda é decidido em compile-time
16
+ // pelos component mixins (blocos `@if $is-dark` estruturais, shadows
17
+ // default, classes utilitárias) — ver backlog `matcha-theme-003`.
18
+ // 2. `theme-<nome>` — a skin gerada por `matcha-define-theme()`. Deve ser
19
+ // emitida DEPOIS dos temas default no CSS (ordem de fonte vence, mesma
20
+ // especificidade).
21
+ //
22
+ // USO:
23
+ // @use "@inchurch/matcha-theme/main.scss" as matcha;
24
+ // @include matcha.matcha-define-theme(meu-tema, (
25
+ // base: dark,
26
+ // colors: (
27
+ // // 9 seeds obrigatórios:
28
+ // surface-bg: #000, surface: #0a120a, text-primary: #33ff33,
29
+ // accent: #33ff33, primary: #00cc66, success: #33ff33,
30
+ // danger: #ff3333, warn: #ffcc00, info: #00ccff,
31
+ // // + qualquer token de $matcha-color-tokens como override fino:
32
+ // text-muted: #1faa1f,
33
+ // ),
34
+ // // opcionais:
35
+ // shadows: (1: 0 0 4px rgba(51, 255, 51, .4)), // --matcha-shadow-<n>
36
+ // font-family: ("Fira Code", monospace), // --matcha-font-family
37
+ // radius: (md: 0, lg: 0, pill: 0), // --matcha-radius-<k>
38
+ // ));
39
+ //
40
+ // O QUE A SKIN NÃO COBRE (limitações conhecidas — docs/theme-stress-test.md):
41
+ // - blocos `@if $is-dark` estruturais (calendar, section, drawer, chart-card,
42
+ // skeleton, reset) seguem a base light/dark escolhida;
43
+ // - cores hardcoded em componentes (ex.: matcha-page-builder — backlog
44
+ // `matcha-page-builder-001`);
45
+ // - cores passadas por @Input/JS (charts) não leem CSS var automaticamente.
46
+ //
47
+ // =============================================================================
48
+ @use "sass:color";
49
+ @use "sass:list";
50
+ @use "sass:map";
51
+ @use "sass:math";
52
+ @use "sass:meta";
53
+
54
+ $-matcha-theme-bases: (light, dark);
55
+ $-matcha-required-seeds: (surface-bg, surface, text-primary, accent, primary, success, danger, warn, info);
56
+
57
+ // ── Helpers de contraste ────────────────────────────────────────────────────
58
+ // Luminância perceptual aproximada (YIQ, 0–255).
59
+
60
+ // Foreground de texto opaco sobre $color (padrão dos tokens *-text-on).
61
+
62
+ // Foreground de contraste no padrão dos tokens *-contrast (preto .87 / branco).
63
+
64
+ // ── Emissor genérico de --matcha-color-* ─────────────────────────────────────
65
+ // Movido de _emit-tokens para quebrar o ciclo @use (emit-tokens → color-tokens →
66
+ // theme-api → emit-tokens). Self-contained (só sass:map). Usado por
67
+ // matcha-define-theme (abaixo) e por matcha-css-custom-properties (emit-tokens, via @use).
68
+ @mixin matcha-emit-color-properties($colors, $aliases: ()) {
69
+ @each $token, $value in $colors {
70
+ $alias: map.get($aliases, $token);
71
+ @if $alias {
72
+ --matcha-color-#{$token}: var(#{$alias});
73
+ } @else {
74
+ --matcha-color-#{$token}: #{$value};
75
+ }
76
+ }
77
+ }
78
+
79
+ // ── Derivação de família de papel (primary/accent/feedback) ────────────────
80
+ // Gera <role>, <role>-hover/-pressed/-alpha/-contrast/-contrast-alpha/
81
+ // -surface-hover/-surface-pressed a partir do seed. Direção do hover segue a
82
+ // base: temas light escurecem no hover, temas dark clareiam (padrão DSV3).
83
+
84
+ // ── Construção do mapa completo de cores do tema ────────────────────────────
85
+ // Parte dos defaults da base (light/dark), aplica as famílias derivadas dos
86
+ // seeds e, por último, os overrides explícitos de `colors` — ou seja, QUALQUER
87
+ // chave de $matcha-color-tokens pode ser cravada no config e vence a derivação.
88
+ @function matcha-build-color-map($config) {
89
+ $base: map.get($config, base);
90
+ @if not list.index($-matcha-theme-bases, $base) {
91
+ @error "matcha-build-color-map: `base` deve ser `light` ou `dark` (recebido: #{meta.inspect($base)}).";
92
+ }
93
+
94
+ $seeds: map.get($config, colors);
95
+ @each $required in $-matcha-required-seeds {
96
+ @if not map.has-key($seeds or (), $required) {
97
+ @error "matcha-build-color-map: seed obrigatório ausente em `colors`: #{$required}. Obrigatórios: #{meta.inspect($-matcha-required-seeds)}.";
98
+ }
99
+ }
100
+
101
+ $is-dark: $base == dark;
102
+ $defaults: if($is-dark, $matcha-colors-dark, $matcha-colors-light);
103
+
104
+ $surface-bg: map.get($seeds, surface-bg);
105
+ $surface: map.get($seeds, surface);
106
+ $text: map.get($seeds, text-primary);
107
+ $accent: map.get($seeds, accent);
108
+
109
+ // Superfícies e estrutura
110
+ $derived: (
111
+ surface-bg: $surface-bg,
112
+ surface-bg-alpha: rgba($surface-bg, .5),
113
+ surface: $surface,
114
+ surface-card: $surface,
115
+ surface-card-strong: color.scale($surface, $lightness: if($is-dark, 8%, 50%)),
116
+ surface-inner: if($is-dark, color.scale($surface, $lightness: 8%), $surface-bg),
117
+ surface-card-alpha: rgba($surface, if($is-dark, .5, .85)),
118
+ surface-sidebar: color.scale($surface-bg, $lightness: if($is-dark, -25%, -4%)),
119
+ surface-sidebar-hover: color.scale($surface-bg, $lightness: if($is-dark, -12%, -9%)),
120
+ surface-table-row-hover: color.mix($text, $surface, 4%),
121
+ surface-border: color.mix($text, $surface-bg, 10%),
122
+ surface-border-strong: color.mix($text, $surface-bg, 22%),
123
+ surface-hover: rgba(color.scale($surface-bg, $lightness: if($is-dark, -25%, -4%)), .5),
124
+ bg: $surface-bg,
125
+
126
+ // Texto e ícones
127
+ fg: $text,
128
+ fg-alpha: rgba($text, .5),
129
+ text-primary: $text,
130
+ text-secondary: color.mix($text, $surface-bg, 78%),
131
+ text-muted: color.mix($text, $surface-bg, 62%),
132
+ text-label: color.mix($text, $surface-bg, 55%),
133
+ text-placeholder: color.mix($text, $surface-bg, 55%),
134
+ text-hint: color.mix($text, $surface-bg, 55%),
135
+ icon-default: color.mix($text, $surface-bg, 65%),
136
+ icon-active: color.mix($text, $surface-bg, 88%),
137
+
138
+ // Neutral + interaction
139
+ neutral: color.mix($text, $surface-bg, if($is-dark, 12%, 8%)),
140
+ neutral-contrast: matcha-text-on(color.mix($text, $surface-bg, if($is-dark, 12%, 8%))),
141
+ neutral-alpha: rgba($text, .08),
142
+ neutral-hover: color.mix($text, $surface-bg, if($is-dark, 18%, 14%)),
143
+ interaction-disabled-bg: color.mix($text, $surface-bg, 14%),
144
+ interaction-disabled-bg-alpha: rgba(color.mix($text, $surface-bg, 14%), .5),
145
+ interaction-disabled-fg: color.mix($text, $surface-bg, 45%),
146
+ interaction-disabled-border: color.mix($text, $surface-bg, 18%),
147
+ disabled: color.mix($text, $surface-bg, 14%),
148
+ disabled-bg: color.mix($text, $surface-bg, 14%),
149
+ disabled-fg: color.mix($text, $surface-bg, 45%),
150
+ disabled-border: color.mix($text, $surface-bg, 18%),
151
+ focus-ring: $accent,
152
+
153
+ // Elevação (cores; shadows são tokens --matcha-shadow-* à parte)
154
+ elevation-surface-1: $surface,
155
+ elevation-surface-2: color.scale($surface, $lightness: if($is-dark, 8%, 50%)),
156
+ elevation-surface-3: color.scale($surface, $lightness: if($is-dark, 14%, 50%)),
157
+ state-layer-fg: if($is-dark, #ffffff, #000000),
158
+ );
159
+
160
+ // Papéis semânticos derivados dos seeds
161
+ @each $role in (accent, primary, success, danger, warn, info) {
162
+ $derived: map.merge($derived, matcha-role-tokens($role, map.get($seeds, $role), $surface-bg, $is-dark));
163
+ }
164
+
165
+ // Extras por papel (tokens que só algumas famílias têm)
166
+ $primary: map.get($seeds, primary);
167
+ $derived: map.merge($derived, (
168
+ accent-text-on: matcha-text-on($accent),
169
+ accent-light: color.scale($accent, $lightness: 45%),
170
+ accent-dark: color.scale($accent, $lightness: -30%),
171
+ primary-light: color.scale($primary, $lightness: 45%),
172
+ primary-dark: color.scale($primary, $lightness: -35%),
173
+ success-fill: map.get($seeds, success),
174
+ danger-fill: map.get($seeds, danger),
175
+ warn-fill: map.get($seeds, warn),
176
+ ));
177
+
178
+ // accent-2 só deriva se o seed opcional vier (senão herda da base)
179
+ @if map.has-key($seeds, accent-2) {
180
+ $accent-2: map.get($seeds, accent-2);
181
+ $derived: map.merge($derived, (
182
+ accent-2: $accent-2,
183
+ accent-2-contrast: matcha-text-on($accent-2),
184
+ accent-2-alpha: rgba($accent-2, .1),
185
+ accent-2-surface: color.mix($accent-2, $surface-bg, 14%),
186
+ ));
187
+ }
188
+
189
+ // defaults da base < derivados < overrides explícitos do config
190
+ @return map.merge(map.merge($defaults, $derived), $seeds);
191
+ }
192
+
193
+ // ── API pública ─────────────────────────────────────────────────────────────
194
+ // Emite a classe `.theme-<nome>` com o override completo das CSS vars de cor
195
+ // (+ shadows/font-family/radius opcionais). Ver contrato de runtime no topo.
196
+ @mixin matcha-define-theme($name, $config) {
197
+ .theme-#{$name} {
198
+ @include matcha-emit-color-properties(matcha-build-color-map($config));
199
+
200
+ $shadows: map.get($config, shadows);
201
+ @if $shadows {
202
+ @each $level, $value in $shadows {
203
+ --matcha-shadow-#{$level}: #{$value};
204
+ }
205
+ }
206
+
207
+ $font-family: map.get($config, font-family);
208
+ @if $font-family {
209
+ --matcha-font-family: #{$font-family};
210
+ }
211
+
212
+ $radius: map.get($config, radius);
213
+ @if $radius {
214
+ @each $key, $value in $radius {
215
+ --matcha-radius-#{$key}: #{$value};
216
+ }
217
+ }
218
+ }
219
+ }