@inchurch/matcha-theme 21.4.0 → 22.1.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 (94) hide show
  1. package/abstracts/_colors.scss +236 -236
  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 +446 -445
  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 +383 -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-contact.scss +35 -0
  25. package/components/matcha-crop.scss +406 -406
  26. package/components/matcha-date.scss +81 -81
  27. package/components/matcha-divider.scss +100 -100
  28. package/components/matcha-draggable.scss +23 -23
  29. package/components/matcha-drawer.scss +376 -376
  30. package/components/matcha-drop-image.scss +14 -14
  31. package/components/matcha-drop-list.scss +430 -430
  32. package/components/matcha-emoji.scss +69 -69
  33. package/components/matcha-empty-state.scss +230 -230
  34. package/components/matcha-file-uploader.scss +471 -471
  35. package/components/matcha-flag.scss +103 -103
  36. package/components/matcha-footer.scss +91 -91
  37. package/components/matcha-form-field.scss +606 -606
  38. package/components/matcha-form-section.scss +100 -100
  39. package/components/matcha-header.scss +135 -135
  40. package/components/matcha-highlight.scss +164 -164
  41. package/components/matcha-hint-text.scss +90 -90
  42. package/components/matcha-horizontal-tree.scss +316 -316
  43. package/components/matcha-icon.scss +98 -98
  44. package/components/matcha-image.scss +61 -61
  45. package/components/matcha-list.scss +211 -211
  46. package/components/matcha-menu.scss +99 -99
  47. package/components/matcha-modal.scss +210 -210
  48. package/components/matcha-nav.scss +581 -581
  49. package/components/matcha-notification.scss +413 -413
  50. package/components/matcha-option.scss +170 -170
  51. package/components/matcha-page-builder.scss +4196 -4196
  52. package/components/matcha-paginator.scss +689 -689
  53. package/components/matcha-panel.scss +194 -194
  54. package/components/matcha-profile-card.scss +50 -50
  55. package/components/matcha-progress-bar.scss +313 -313
  56. package/components/matcha-radio.scss +320 -320
  57. package/components/matcha-ripple.scss +7 -7
  58. package/components/matcha-scrollbar.scss +33 -33
  59. package/components/matcha-scrollbox-shadow.scss +120 -120
  60. package/components/matcha-section.scss +102 -102
  61. package/components/matcha-select-multiple.scss +56 -56
  62. package/components/matcha-select.scss +667 -667
  63. package/components/matcha-skeleton.scss +155 -155
  64. package/components/matcha-slide-toggle.scss +369 -369
  65. package/components/matcha-slider.scss +285 -285
  66. package/components/matcha-snack-bar.scss +259 -259
  67. package/components/matcha-spin.scss +164 -164
  68. package/components/matcha-spinner.scss +97 -97
  69. package/components/matcha-status-pill.scss +38 -18
  70. package/components/matcha-stepper.scss +376 -376
  71. package/components/matcha-table-cell.scss +49 -41
  72. package/components/matcha-table.scss +579 -579
  73. package/components/matcha-tabs.scss +600 -600
  74. package/components/matcha-text-editor.scss +105 -105
  75. package/components/matcha-time.scss +33 -33
  76. package/components/matcha-timepicker.scss +13 -13
  77. package/components/matcha-toolbar.scss +359 -359
  78. package/components/matcha-tooltip.scss +224 -224
  79. package/components/matcha-tree-view.scss +257 -257
  80. package/layout/matcha-page-layout.scss +778 -778
  81. package/main.scss +331 -329
  82. package/package.json +1 -1
  83. package/tokens/_animations-tokens.scss +37 -37
  84. package/tokens/_breakpoints-tokens.scss +35 -35
  85. package/tokens/_color-tokens.scss +274 -274
  86. package/tokens/_elevation-tokens.scss +33 -33
  87. package/tokens/_emit-tokens.scss +324 -324
  88. package/tokens/_material-palette.scss +1149 -1149
  89. package/tokens/_primitives.scss +98 -98
  90. package/tokens/_semantic-aliases.scss +120 -120
  91. package/tokens/_spacing-tokens.scss +94 -94
  92. package/tokens/_static-tokens.scss +137 -137
  93. package/tokens/_typography-tokens.scss +65 -65
  94. 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
+ }