@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/main.scss CHANGED
@@ -1,330 +1,330 @@
1
- // TOKENS
2
- @forward "./tokens/animations-tokens";
3
- @use "./tokens/animations-tokens" as *;
4
- @forward "./tokens/breakpoints-tokens";
5
- @use "./tokens/breakpoints-tokens" as *;
6
- @forward "./tokens/material-palette";
7
- @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.
8
- @forward "./tokens/elevation-tokens";
9
- @use "./tokens/elevation-tokens" as *;
10
- @forward "./tokens/spacing-tokens";
11
- @use "./tokens/spacing-tokens" as *;
12
- @forward "./tokens/typography-tokens";
13
- @use "./tokens/typography-tokens" as *;
14
- @forward "./tokens/color-tokens";
15
- @use "./tokens/color-tokens" as *; // cor — papéis por modo (synced do Figma via sync-tokens)
16
- @forward "./tokens/static-tokens";
17
- @use "./tokens/static-tokens" as *; // não-cor (gerado de global.json) — mixin matcha-static-tokens()
18
- @forward "./tokens/emit-tokens";
19
- @use "./tokens/emit-tokens" as *; // emissão — mixin matcha-css-custom-properties() (consome color-tokens + static-tokens)
20
- @forward "./tokens/primitives";
21
- @use "./tokens/primitives" as *; // matcha-primitives() — Camada 1: CSS vars de primitivas (--matcha-prim-*) em :root
22
- @forward "./tokens/semantic-aliases";
23
- @use "./tokens/semantic-aliases" as *; // $matcha-prim-aliases-{light,dark} — Camada 2: token semântico → primitiva (rota clássica emite var)
24
-
25
- // FUNCTIONS
26
- @forward "./abstracts/functions";
27
- @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()
28
-
29
- // MIXINS
30
- @forward "./abstracts/theme-api";
31
- @use "./abstracts/theme-api" as *; // matcha-define-theme() matcha-build-color-map() matcha-role-tokens() matcha-text-on() matcha-contrast-on()
32
- @forward "./abstracts/colors";
33
- @use "./abstracts/colors" as *; // colors-classes-static() colors-classes-dynamic()
34
- @forward "./abstracts/elevation";
35
- @use "./abstracts/elevation" as *; // elevation() _matcha-theme-elevation() matcha-overridable-elevation() _matcha-theme-overridable-elevation() elevation-transition() elevation-theme()
36
- @forward "./abstracts/media-breakpoint";
37
- @use "./abstracts/media-breakpoint" as *; // media-breakpoint()
38
-
39
- // TYPOGRAPHY
40
- @forward "./abstracts/typography";
41
- @use "./abstracts/typography" as *; // matcha-typography-font-shorthand() matcha-typography-level-to-styles() matcha-reset-typography()
42
-
43
- // BASE
44
- @forward "./base/reset";
45
- @use "./base/reset" as *; // base-body-reset-theme()
46
-
47
- // COMPONENTS
48
- @forward "./components/matcha-audio-player";
49
- @use "./components/matcha-audio-player" as *; //matcha-audio-player-theme($theme)
50
- @forward "./components/matcha-autocomplete";
51
- @use "./components/matcha-autocomplete" as *; // matcha-autocomplete-theme($theme)
52
- @forward "./components/matcha-option";
53
- @use "./components/matcha-option" as *; // matcha-option-theme($theme)
54
- @forward "./components/matcha-panel";
55
- @use "./components/matcha-panel" as *; // matcha-panel-theme($theme)
56
- @forward "./components/matcha-select";
57
- @use "./components/matcha-select" as *; // matcha-select-theme($theme)
58
- @forward "./components/matcha-select-multiple";
59
- @use "./components/matcha-select-multiple" as *; // matcha-select-multiple-theme($theme)
60
- @forward "./components/matcha-buttons";
61
- @use "./components/matcha-buttons" as *; // matcha-button-theme($theme)
62
- @forward "./components/matcha-button-toggle";
63
- @use "./components/matcha-button-toggle" as *; // matcha-button-toggle-theme($theme)
64
- @forward "./components/matcha-cards";
65
- @use "./components/matcha-cards" as *; // matcha-cards-theme($theme)
66
- @forward "./components/matcha-color-pick";
67
- @use "./components/matcha-color-pick" as *; // matcha-color-pick-theme($theme)
68
- @forward "./components/matcha-draggable";
69
- @use "./components/matcha-draggable" as *; // matcha-draggable-theme($theme)
70
- @forward "./components/matcha-drop-list";
71
- @use "./components/matcha-drop-list" as *; // matcha-drop-list-theme($theme)
72
- @forward "./components/matcha-header";
73
- @use "./components/matcha-header" as *; // matcha-header-theme($theme) — lib component DSV3
74
- @forward "./components/app-page-header";
75
- @use "./components/app-page-header" as *; // app-page-header-theme($theme) — page-header LEGACY da app
76
- @forward "./components/matcha-horizontal-tree";
77
- @use "./components/matcha-horizontal-tree" as *; // matcha-horizontal-tree-theme($theme)
78
- @forward "./components/matcha-menu";
79
- @use "./components/matcha-menu" as *; // matcha-menu-theme($theme)
80
- @forward "./components/matcha-progress-bar";
81
- @use "./components/matcha-progress-bar" as *; // matcha-progress-bar-theme($theme)
82
- @forward "./components/matcha-scrollbar";
83
- @use "./components/matcha-scrollbar" as *; // matcha-scrollbar-theme($theme)
84
- @forward "./components/matcha-scrollbox-shadow";
85
- @use "./components/matcha-scrollbox-shadow" as *; // matcha-scrollbox-shadow-theme($theme)
86
- @forward "./components/matcha-skeleton";
87
- @use "./components/matcha-skeleton" as *; // matcha-skeleton-theme($theme)
88
- @forward "./components/matcha-table";
89
- @use "./components/matcha-table" as *; // matcha-table-modern (canon DSV3 1:1 Figma)
90
- @forward "./components/matcha-table-cell";
91
- @use "./components/matcha-table-cell" as *; // matcha-table-cell-theme($theme)
92
- @forward "./components/matcha-tooltip";
93
- @use "./components/matcha-tooltip" as *; // matcha-tooltip-theme($theme)
94
- @forward "./components/matcha-form-field";
95
- @use "./components/matcha-form-field" as *;
96
- @forward "./components/matcha-checkbox";
97
- @use "./components/matcha-checkbox" as *;
98
- @forward "./components/matcha-accordion";
99
- @use "./components/matcha-accordion" as *;
100
- @forward "./components/matcha-ripple";
101
- @use "./components/matcha-ripple" as *; // matcha-ripple-theme($theme)
102
- @forward "./components/matcha-spin";
103
- @use "./components/matcha-spin" as *; // matcha-spin-theme($theme)
104
- @forward "./components/matcha-spinner";
105
- @use "./components/matcha-spinner" as *; // matcha-spinner-theme($theme)
106
- @forward "./components/matcha-hint-text";
107
- @use "./components/matcha-hint-text" as *; // matcha-hint-theme($theme)
108
- @forward "./components/matcha-slide-toggle";
109
- @use "./components/matcha-slide-toggle" as *; // matcha-slide-toggle($theme)
110
- @forward "./components/matcha-radio";
111
- @use "./components/matcha-radio" as *; // matcha-radio($theme)
112
- @forward "./components/matcha-avatar";
113
- @use "./components/matcha-avatar" as *; // matcha-avatar($theme)
114
- @forward "./components/matcha-paginator";
115
- @use "./components/matcha-paginator" as *; // matcha-paginator($theme)
116
- @forward "./components/matcha-slider";
117
- @use "./components/matcha-slider" as *; // matcha-slider($theme)
118
- @forward "./components/matcha-divider";
119
- @use "./components/matcha-divider" as *; // matcha-divider($theme)
120
- @forward "./components/matcha-highlight";
121
- @use "./components/matcha-highlight" as *; // matcha-highlight($theme)
122
- @forward "./components/matcha-tabs";
123
- @use "./components/matcha-tabs" as *; // matcha-tabs($theme)
124
- @forward "./components/matcha-modal";
125
- @use "./components/matcha-modal" as *; // matcha-modal($theme)
126
- @forward "./components/matcha-drawer";
127
- @use "./components/matcha-drawer" as *; // matcha-drawer-theme($theme)
128
- @forward "./components/matcha-chip";
129
- @use "./components/matcha-chip" as *; // matcha-chip($theme)
130
- @forward "./components/matcha-status-pill";
131
- @use "./components/matcha-status-pill" as *; // matcha-status-pill
132
- @forward "./components/matcha-date";
133
- @use "./components/matcha-date" as *; // matcha-date-theme($theme)
134
- @forward "./components/matcha-calendar";
135
- @use "./components/matcha-calendar" as *; // matcha-calendar-theme($theme)
136
- @forward "./components/matcha-page-builder";
137
- @use "./components/matcha-page-builder" as *; // matcha-page-builder($theme)
138
- @forward "./components/matcha-snack-bar";
139
- @use "./components/matcha-snack-bar" as *; // matcha-snack-bar-theme($theme)
140
- @forward "./components/matcha-timepicker";
141
- @use "./components/matcha-timepicker" as *; // matcha-timepicker-theme($theme)
142
- @forward "./components/matcha-badge";
143
- @use "./components/matcha-badge" as *; // matcha-badge-theme($theme)
144
- @forward "./components/matcha-empty-state";
145
- @use "./components/matcha-empty-state" as *; // matcha-empty-state-theme($theme)
146
- @forward "./components/matcha-tree-view";
147
- @use "./components/matcha-tree-view" as *; // matcha-tree-view-theme($theme)
148
- @forward "./components/matcha-nav";
149
- @use "./components/matcha-nav" as *; // matcha-nav-theme($theme)
150
- @forward "./components/matcha-list";
151
- @use "./components/matcha-list" as *; // matcha-list-theme($theme)
152
- @forward "./components/matcha-icon";
153
- @use "./components/matcha-icon" as *; // matcha-icon-theme($theme)
154
- @forward "./components/matcha-text-editor";
155
- @use "./components/matcha-text-editor" as *; // matcha-text-editor-theme($theme)
156
- @forward "./components/matcha-chart-card";
157
- @use "./components/matcha-chart-card" as *; // matcha-chart-card-theme($theme)
158
- @forward "./components/matcha-crop";
159
- @use "./components/matcha-crop" as *; // matcha-crop-theme($theme)
160
- @forward "./components/matcha-footer";
161
- @use "./components/matcha-footer" as *; // matcha-footer-theme($theme)
162
- @forward "./components/matcha-file-uploader";
163
- @use "./components/matcha-file-uploader" as *; // matcha-file-uploader-theme($theme)
164
- @forward "./components/matcha-drop-image";
165
- @use "./components/matcha-drop-image" as *; // matcha-drop-image-theme($theme)
166
- @forward "./components/matcha-notification";
167
- @use "./components/matcha-notification" as *; // matcha-notification-theme($theme)
168
- @forward "./components/matcha-section";
169
- @use "./components/matcha-section" as *; // matcha-section-theme($theme)
170
- @forward "./components/matcha-form-section";
171
- @use "./components/matcha-form-section" as *; // matcha-form-section-theme($theme)
172
- @forward "./components/matcha-breadcrumb";
173
- @use "./components/matcha-breadcrumb" as *; // matcha-breadcrumb-theme($theme)
174
- @forward "./components/matcha-image";
175
- @use "./components/matcha-image" as *; // matcha-image-theme($theme)
176
- @forward "./components/matcha-stepper";
177
- @use "./components/matcha-stepper" as *; // matcha-stepper-theme($theme)
178
- @forward "./components/matcha-toolbar";
179
- @use "./components/matcha-toolbar" as *; // matcha-toolbar-modern (canon DSV3 1:1 Figma 15866:92)
180
- @forward "./components/matcha-command-palette";
181
- @use "./components/matcha-command-palette" as *; // matcha-command-palette-theme($theme)
182
- @forward "./components/matcha-profile-card";
183
- @use "./components/matcha-profile-card" as *; // matcha-profile-card-theme($theme)
184
- @forward "./components/matcha-flag";
185
- @use "./components/matcha-flag" as *; // matcha-flag-theme($theme)
186
- @forward "./components/matcha-emoji";
187
- @use "./components/matcha-emoji" as *; // matcha-emoji-theme($theme)
188
-
189
- // LAYOUT
190
- @forward "./layout/matcha-page-layout";
191
- @use "./layout/matcha-page-layout" as *; // matcha-page-layout-theme($theme)
192
-
193
- // VENDORS
194
- @forward "./vendors/charts";
195
- @use "./vendors/charts" as *;
196
-
197
- // ─── FONT LOADING — Manrope (SELF-HOSTED · zero dependência externa) ─────────
198
- // REGRA DE OURO: fontes self-hosted, nunca @import/<link> do Google Fonts.
199
- // Variable font (weight 400–800), woff2 local em fonts/manrope/.
200
- // Atualizar: baixar de https://fonts.google.com/specimen/Manrope (licença OFL),
201
- // pegar os woff2 latin + latin-ext e substituir os arquivos abaixo.
202
- @font-face {
203
- font-family: "Manrope";
204
- font-style: normal;
205
- font-weight: 400 800;
206
- font-display: swap;
207
- src: url("fonts/manrope/manrope-latin.woff2") format("woff2");
208
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
209
- }
210
- @font-face {
211
- font-family: "Manrope";
212
- font-style: normal;
213
- font-weight: 400 800;
214
- font-display: swap;
215
- src: url("fonts/manrope/manrope-latin-ext.woff2") format("woff2");
216
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
217
- }
218
-
219
- // CircularStd removido (2026-06-03): fonte comercial licenciada + fora da regra de
220
- // ouro. Fonte canônica do DS é a Manrope (self-hosted acima). O token
221
- // --matcha-font-family já resolve para 'Manrope'.
222
-
223
- // -------------------------------------------------------------------------------------------------------------------
224
- // @ CORE - Mixins and Includes
225
- // -------------------------------------------------------------------------------------------------------------------
226
- @mixin matcha-typography($config: null) {
227
- @if $config ==null {
228
- $config: matcha-typography-config();
229
- }
230
-
231
- @include matcha-reset-typography($config);
232
- }
233
-
234
- // matcha-base — CSS estrutural/componentes, theme-AGNÓSTICO (consome var(--matcha-color-*)
235
- // e tokens; nenhuma cor compile-time após o Track B). Deve ser emitido UMA VEZ, GLOBAL
236
- // (fora de classe de tema) — ver src/app/app.theme.scss. A cor vem da classe de tema
237
- // (.theme-default-* / skin) via as CSS vars. Track B3.
238
- // matcha-base — estrutural theme-AGNÓSTICO (componentes + vendor-chart + base-typography).
239
- // 100% var(--matcha-*) — emitir 1× GLOBAL (ver app.theme.scss). NÃO inclui base-body-reset
240
- // (usa & p/ pintar bg/fg do elemento de tema → emitido por classe de tema).
241
- @mixin matcha-base($theme: ()) {
242
- // API nova: chamável sem arg — matcha-base(). $theme é plumbing vestigial repassado
243
- // aos component-mixins (todos var-based após a virada); default () permite call limpo.
244
- @include vendor-chart($theme);
245
- @include base-typography-theme($theme);
246
-
247
- @include matcha-cards-theme($theme);
248
- @include matcha-horizontal-tree-theme($theme);
249
- @include matcha-audio-player-theme($theme);
250
- @include matcha-color-pick-theme($theme);
251
- @include matcha-draggable-theme($theme);
252
- @include matcha-scrollbox-shadow($theme);
253
- @include matcha-scrollbar-theme($theme);
254
-
255
- @include matcha-table-cell-theme($theme);
256
- @include matcha-table-modern($theme); // canon DSV3 1:1 Figma 15641:275
257
- @include matcha-toolbar($theme); // canon DSV3 1:1 Figma 15866:92
258
- @include matcha-button-toggle($theme);
259
- @include matcha-button-theme($theme);
260
- @include matcha-ripple-theme($theme);
261
- @include matcha-tooltip-theme($theme);
262
- @include matcha-header-theme($theme); // DSV3 lib component (não app)
263
- @include app-page-header-theme($theme); // LEGACY da app (page-header)
264
- @include matcha-menu-theme($theme);
265
- @include matcha-drop-list-theme($theme);
266
- @include matcha-form-field($theme);
267
- @include matcha-checkbox($theme);
268
- @include matcha-spin($theme);
269
- @include matcha-spinner-theme($theme);
270
- @include matcha-hint-text($theme);
271
- @include matcha-slide-toggle-theme($theme);
272
- @include matcha-tabs($theme);
273
- @include matcha-tabs-modern($theme);
274
- @include matcha-modal-theme($theme);
275
- @include matcha-skeleton-theme($theme);
276
- @include matcha-radio($theme);
277
- @include matcha-avatar-theme($theme);
278
- @include matcha-drawer-theme($theme);
279
- @include matcha-autocomplete-theme($theme);
280
- @include matcha-panel-theme($theme);
281
- @include matcha-option-theme($theme);
282
- @include matcha-select-theme($theme);
283
- @include matcha-select-multiple-theme($theme);
284
- @include matcha-paginator-theme($theme);
285
- @include matcha-slider-theme($theme);
286
- @include matcha-highlight-theme($theme);
287
- @include matcha-divider-theme($theme);
288
- @include matcha-chip-theme($theme);
289
- @include matcha-progress-bar-theme($theme);
290
- @include matcha-page-builder-theme($theme);
291
- @include matcha-snack-bar-theme($theme);
292
- @include matcha-chip-theme($theme);
293
- @include matcha-date-theme($theme);
294
- @include matcha-calendar-theme($theme);
295
- @include matcha-timepicker-theme($theme);
296
- @include matcha-badge-theme($theme);
297
- @include matcha-empty-state-theme($theme);
298
- @include matcha-tree-view-theme($theme);
299
- @include matcha-nav-theme($theme);
300
- @include matcha-list-theme($theme);
301
- @include matcha-icon-theme($theme);
302
- @include matcha-text-editor-theme($theme);
303
- @include matcha-chart-card-theme($theme);
304
- @include matcha-crop-theme($theme);
305
- @include matcha-footer-theme($theme);
306
- @include matcha-file-uploader-theme($theme);
307
- @include matcha-drop-image-theme($theme);
308
- @include matcha-notification-theme($theme);
309
- @include matcha-section-theme($theme);
310
- @include matcha-form-section-theme($theme);
311
- @include matcha-accordion-theme($theme);
312
- @include matcha-breadcrumb-theme($theme);
313
- @include matcha-image-theme($theme);
314
- @include matcha-stepper-theme($theme);
315
- @include matcha-command-palette-theme($theme);
316
- @include matcha-profile-card-theme($theme);
317
- @include matcha-flag($theme);
318
- @include matcha-emoji-theme($theme);
319
- @include matcha-page-layout-theme($theme);
320
- }
321
-
322
- // matcha-components() — REMOVIDO no major (era o shim retrocompat @deprecated).
323
- // API nova (ver src/app/app.theme.scss):
324
- // @include matcha-primitives(); // :root primitivas
325
- // @include matcha-base(); // estrutural 1× global (agnóstico)
326
- // @include colors-classes-dynamic(); // classes utilitárias (inclui -static)
327
- // .theme-X { @include matcha-css-custom-properties($is-dark); // --matcha-color-*
328
- // @include elevation-theme($is-dark);
329
- // @include base-body-reset-theme();
1
+ // TOKENS
2
+ @forward "./tokens/animations-tokens";
3
+ @use "./tokens/animations-tokens" as *;
4
+ @forward "./tokens/breakpoints-tokens";
5
+ @use "./tokens/breakpoints-tokens" as *;
6
+ @forward "./tokens/material-palette";
7
+ @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.
8
+ @forward "./tokens/elevation-tokens";
9
+ @use "./tokens/elevation-tokens" as *;
10
+ @forward "./tokens/spacing-tokens";
11
+ @use "./tokens/spacing-tokens" as *;
12
+ @forward "./tokens/typography-tokens";
13
+ @use "./tokens/typography-tokens" as *;
14
+ @forward "./tokens/color-tokens";
15
+ @use "./tokens/color-tokens" as *; // cor — papéis por modo (synced do Figma via sync-tokens)
16
+ @forward "./tokens/static-tokens";
17
+ @use "./tokens/static-tokens" as *; // não-cor (gerado de global.json) — mixin matcha-static-tokens()
18
+ @forward "./tokens/emit-tokens";
19
+ @use "./tokens/emit-tokens" as *; // emissão — mixin matcha-css-custom-properties() (consome color-tokens + static-tokens)
20
+ @forward "./tokens/primitives";
21
+ @use "./tokens/primitives" as *; // matcha-primitives() — Camada 1: CSS vars de primitivas (--matcha-prim-*) em :root
22
+ @forward "./tokens/semantic-aliases";
23
+ @use "./tokens/semantic-aliases" as *; // $matcha-prim-aliases-{light,dark} — Camada 2: token semântico → primitiva (rota clássica emite var)
24
+
25
+ // FUNCTIONS
26
+ @forward "./abstracts/functions";
27
+ @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()
28
+
29
+ // MIXINS
30
+ @forward "./abstracts/theme-api";
31
+ @use "./abstracts/theme-api" as *; // matcha-define-theme() matcha-build-color-map() matcha-role-tokens() matcha-text-on() matcha-contrast-on()
32
+ @forward "./abstracts/colors";
33
+ @use "./abstracts/colors" as *; // colors-classes-static() colors-classes-dynamic()
34
+ @forward "./abstracts/elevation";
35
+ @use "./abstracts/elevation" as *; // elevation() _matcha-theme-elevation() matcha-overridable-elevation() _matcha-theme-overridable-elevation() elevation-transition() elevation-theme()
36
+ @forward "./abstracts/media-breakpoint";
37
+ @use "./abstracts/media-breakpoint" as *; // media-breakpoint()
38
+
39
+ // TYPOGRAPHY
40
+ @forward "./abstracts/typography";
41
+ @use "./abstracts/typography" as *; // matcha-typography-font-shorthand() matcha-typography-level-to-styles() matcha-reset-typography()
42
+
43
+ // BASE
44
+ @forward "./base/reset";
45
+ @use "./base/reset" as *; // base-body-reset-theme()
46
+
47
+ // COMPONENTS
48
+ @forward "./components/matcha-audio-player";
49
+ @use "./components/matcha-audio-player" as *; //matcha-audio-player-theme($theme)
50
+ @forward "./components/matcha-autocomplete";
51
+ @use "./components/matcha-autocomplete" as *; // matcha-autocomplete-theme($theme)
52
+ @forward "./components/matcha-option";
53
+ @use "./components/matcha-option" as *; // matcha-option-theme($theme)
54
+ @forward "./components/matcha-panel";
55
+ @use "./components/matcha-panel" as *; // matcha-panel-theme($theme)
56
+ @forward "./components/matcha-select";
57
+ @use "./components/matcha-select" as *; // matcha-select-theme($theme)
58
+ @forward "./components/matcha-select-multiple";
59
+ @use "./components/matcha-select-multiple" as *; // matcha-select-multiple-theme($theme)
60
+ @forward "./components/matcha-buttons";
61
+ @use "./components/matcha-buttons" as *; // matcha-button-theme($theme)
62
+ @forward "./components/matcha-button-toggle";
63
+ @use "./components/matcha-button-toggle" as *; // matcha-button-toggle-theme($theme)
64
+ @forward "./components/matcha-cards";
65
+ @use "./components/matcha-cards" as *; // matcha-cards-theme($theme)
66
+ @forward "./components/matcha-color-pick";
67
+ @use "./components/matcha-color-pick" as *; // matcha-color-pick-theme($theme)
68
+ @forward "./components/matcha-draggable";
69
+ @use "./components/matcha-draggable" as *; // matcha-draggable-theme($theme)
70
+ @forward "./components/matcha-drop-list";
71
+ @use "./components/matcha-drop-list" as *; // matcha-drop-list-theme($theme)
72
+ @forward "./components/matcha-header";
73
+ @use "./components/matcha-header" as *; // matcha-header-theme($theme) — lib component DSV3
74
+ @forward "./components/app-page-header";
75
+ @use "./components/app-page-header" as *; // app-page-header-theme($theme) — page-header LEGACY da app
76
+ @forward "./components/matcha-horizontal-tree";
77
+ @use "./components/matcha-horizontal-tree" as *; // matcha-horizontal-tree-theme($theme)
78
+ @forward "./components/matcha-menu";
79
+ @use "./components/matcha-menu" as *; // matcha-menu-theme($theme)
80
+ @forward "./components/matcha-progress-bar";
81
+ @use "./components/matcha-progress-bar" as *; // matcha-progress-bar-theme($theme)
82
+ @forward "./components/matcha-scrollbar";
83
+ @use "./components/matcha-scrollbar" as *; // matcha-scrollbar-theme($theme)
84
+ @forward "./components/matcha-scrollbox-shadow";
85
+ @use "./components/matcha-scrollbox-shadow" as *; // matcha-scrollbox-shadow-theme($theme)
86
+ @forward "./components/matcha-skeleton";
87
+ @use "./components/matcha-skeleton" as *; // matcha-skeleton-theme($theme)
88
+ @forward "./components/matcha-table";
89
+ @use "./components/matcha-table" as *; // matcha-table-modern (canon DSV3 1:1 Figma)
90
+ @forward "./components/matcha-table-cell";
91
+ @use "./components/matcha-table-cell" as *; // matcha-table-cell-theme($theme)
92
+ @forward "./components/matcha-tooltip";
93
+ @use "./components/matcha-tooltip" as *; // matcha-tooltip-theme($theme)
94
+ @forward "./components/matcha-form-field";
95
+ @use "./components/matcha-form-field" as *;
96
+ @forward "./components/matcha-checkbox";
97
+ @use "./components/matcha-checkbox" as *;
98
+ @forward "./components/matcha-accordion";
99
+ @use "./components/matcha-accordion" as *;
100
+ @forward "./components/matcha-ripple";
101
+ @use "./components/matcha-ripple" as *; // matcha-ripple-theme($theme)
102
+ @forward "./components/matcha-spin";
103
+ @use "./components/matcha-spin" as *; // matcha-spin-theme($theme)
104
+ @forward "./components/matcha-spinner";
105
+ @use "./components/matcha-spinner" as *; // matcha-spinner-theme($theme)
106
+ @forward "./components/matcha-hint-text";
107
+ @use "./components/matcha-hint-text" as *; // matcha-hint-theme($theme)
108
+ @forward "./components/matcha-slide-toggle";
109
+ @use "./components/matcha-slide-toggle" as *; // matcha-slide-toggle($theme)
110
+ @forward "./components/matcha-radio";
111
+ @use "./components/matcha-radio" as *; // matcha-radio($theme)
112
+ @forward "./components/matcha-avatar";
113
+ @use "./components/matcha-avatar" as *; // matcha-avatar($theme)
114
+ @forward "./components/matcha-paginator";
115
+ @use "./components/matcha-paginator" as *; // matcha-paginator($theme)
116
+ @forward "./components/matcha-slider";
117
+ @use "./components/matcha-slider" as *; // matcha-slider($theme)
118
+ @forward "./components/matcha-divider";
119
+ @use "./components/matcha-divider" as *; // matcha-divider($theme)
120
+ @forward "./components/matcha-highlight";
121
+ @use "./components/matcha-highlight" as *; // matcha-highlight($theme)
122
+ @forward "./components/matcha-tabs";
123
+ @use "./components/matcha-tabs" as *; // matcha-tabs($theme)
124
+ @forward "./components/matcha-modal";
125
+ @use "./components/matcha-modal" as *; // matcha-modal($theme)
126
+ @forward "./components/matcha-drawer";
127
+ @use "./components/matcha-drawer" as *; // matcha-drawer-theme($theme)
128
+ @forward "./components/matcha-chip";
129
+ @use "./components/matcha-chip" as *; // matcha-chip($theme)
130
+ @forward "./components/matcha-status-pill";
131
+ @use "./components/matcha-status-pill" as *; // matcha-status-pill
132
+ @forward "./components/matcha-date";
133
+ @use "./components/matcha-date" as *; // matcha-date-theme($theme)
134
+ @forward "./components/matcha-calendar";
135
+ @use "./components/matcha-calendar" as *; // matcha-calendar-theme($theme)
136
+ @forward "./components/matcha-page-builder";
137
+ @use "./components/matcha-page-builder" as *; // matcha-page-builder($theme)
138
+ @forward "./components/matcha-snack-bar";
139
+ @use "./components/matcha-snack-bar" as *; // matcha-snack-bar-theme($theme)
140
+ @forward "./components/matcha-timepicker";
141
+ @use "./components/matcha-timepicker" as *; // matcha-timepicker-theme($theme)
142
+ @forward "./components/matcha-badge";
143
+ @use "./components/matcha-badge" as *; // matcha-badge-theme($theme)
144
+ @forward "./components/matcha-empty-state";
145
+ @use "./components/matcha-empty-state" as *; // matcha-empty-state-theme($theme)
146
+ @forward "./components/matcha-tree-view";
147
+ @use "./components/matcha-tree-view" as *; // matcha-tree-view-theme($theme)
148
+ @forward "./components/matcha-nav";
149
+ @use "./components/matcha-nav" as *; // matcha-nav-theme($theme)
150
+ @forward "./components/matcha-list";
151
+ @use "./components/matcha-list" as *; // matcha-list-theme($theme)
152
+ @forward "./components/matcha-icon";
153
+ @use "./components/matcha-icon" as *; // matcha-icon-theme($theme)
154
+ @forward "./components/matcha-text-editor";
155
+ @use "./components/matcha-text-editor" as *; // matcha-text-editor-theme($theme)
156
+ @forward "./components/matcha-chart-card";
157
+ @use "./components/matcha-chart-card" as *; // matcha-chart-card-theme($theme)
158
+ @forward "./components/matcha-crop";
159
+ @use "./components/matcha-crop" as *; // matcha-crop-theme($theme)
160
+ @forward "./components/matcha-footer";
161
+ @use "./components/matcha-footer" as *; // matcha-footer-theme($theme)
162
+ @forward "./components/matcha-file-uploader";
163
+ @use "./components/matcha-file-uploader" as *; // matcha-file-uploader-theme($theme)
164
+ @forward "./components/matcha-drop-image";
165
+ @use "./components/matcha-drop-image" as *; // matcha-drop-image-theme($theme)
166
+ @forward "./components/matcha-notification";
167
+ @use "./components/matcha-notification" as *; // matcha-notification-theme($theme)
168
+ @forward "./components/matcha-section";
169
+ @use "./components/matcha-section" as *; // matcha-section-theme($theme)
170
+ @forward "./components/matcha-form-section";
171
+ @use "./components/matcha-form-section" as *; // matcha-form-section-theme($theme)
172
+ @forward "./components/matcha-breadcrumb";
173
+ @use "./components/matcha-breadcrumb" as *; // matcha-breadcrumb-theme($theme)
174
+ @forward "./components/matcha-image";
175
+ @use "./components/matcha-image" as *; // matcha-image-theme($theme)
176
+ @forward "./components/matcha-stepper";
177
+ @use "./components/matcha-stepper" as *; // matcha-stepper-theme($theme)
178
+ @forward "./components/matcha-toolbar";
179
+ @use "./components/matcha-toolbar" as *; // matcha-toolbar-modern (canon DSV3 1:1 Figma 15866:92)
180
+ @forward "./components/matcha-command-palette";
181
+ @use "./components/matcha-command-palette" as *; // matcha-command-palette-theme($theme)
182
+ @forward "./components/matcha-profile-card";
183
+ @use "./components/matcha-profile-card" as *; // matcha-profile-card-theme($theme)
184
+ @forward "./components/matcha-flag";
185
+ @use "./components/matcha-flag" as *; // matcha-flag-theme($theme)
186
+ @forward "./components/matcha-emoji";
187
+ @use "./components/matcha-emoji" as *; // matcha-emoji-theme($theme)
188
+
189
+ // LAYOUT
190
+ @forward "./layout/matcha-page-layout";
191
+ @use "./layout/matcha-page-layout" as *; // matcha-page-layout-theme($theme)
192
+
193
+ // VENDORS
194
+ @forward "./vendors/charts";
195
+ @use "./vendors/charts" as *;
196
+
197
+ // ─── FONT LOADING — Manrope (SELF-HOSTED · zero dependência externa) ─────────
198
+ // REGRA DE OURO: fontes self-hosted, nunca @import/<link> do Google Fonts.
199
+ // Variable font (weight 400–800), woff2 local em fonts/manrope/.
200
+ // Atualizar: baixar de https://fonts.google.com/specimen/Manrope (licença OFL),
201
+ // pegar os woff2 latin + latin-ext e substituir os arquivos abaixo.
202
+ @font-face {
203
+ font-family: "Manrope";
204
+ font-style: normal;
205
+ font-weight: 400 800;
206
+ font-display: swap;
207
+ src: url("fonts/manrope/manrope-latin.woff2") format("woff2");
208
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
209
+ }
210
+ @font-face {
211
+ font-family: "Manrope";
212
+ font-style: normal;
213
+ font-weight: 400 800;
214
+ font-display: swap;
215
+ src: url("fonts/manrope/manrope-latin-ext.woff2") format("woff2");
216
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
217
+ }
218
+
219
+ // CircularStd removido (2026-06-03): fonte comercial licenciada + fora da regra de
220
+ // ouro. Fonte canônica do DS é a Manrope (self-hosted acima). O token
221
+ // --matcha-font-family já resolve para 'Manrope'.
222
+
223
+ // -------------------------------------------------------------------------------------------------------------------
224
+ // @ CORE - Mixins and Includes
225
+ // -------------------------------------------------------------------------------------------------------------------
226
+ @mixin matcha-typography($config: null) {
227
+ @if $config ==null {
228
+ $config: matcha-typography-config();
229
+ }
230
+
231
+ @include matcha-reset-typography($config);
232
+ }
233
+
234
+ // matcha-base — CSS estrutural/componentes, theme-AGNÓSTICO (consome var(--matcha-color-*)
235
+ // e tokens; nenhuma cor compile-time após o Track B). Deve ser emitido UMA VEZ, GLOBAL
236
+ // (fora de classe de tema) — ver src/app/app.theme.scss. A cor vem da classe de tema
237
+ // (.theme-default-* / skin) via as CSS vars. Track B3.
238
+ // matcha-base — estrutural theme-AGNÓSTICO (componentes + vendor-chart + base-typography).
239
+ // 100% var(--matcha-*) — emitir 1× GLOBAL (ver app.theme.scss). NÃO inclui base-body-reset
240
+ // (usa & p/ pintar bg/fg do elemento de tema → emitido por classe de tema).
241
+ @mixin matcha-base($theme: ()) {
242
+ // API nova: chamável sem arg — matcha-base(). $theme é plumbing vestigial repassado
243
+ // aos component-mixins (todos var-based após a virada); default () permite call limpo.
244
+ @include vendor-chart($theme);
245
+ @include base-typography-theme($theme);
246
+
247
+ @include matcha-cards-theme($theme);
248
+ @include matcha-horizontal-tree-theme($theme);
249
+ @include matcha-audio-player-theme($theme);
250
+ @include matcha-color-pick-theme($theme);
251
+ @include matcha-draggable-theme($theme);
252
+ @include matcha-scrollbox-shadow($theme);
253
+ @include matcha-scrollbar-theme($theme);
254
+
255
+ @include matcha-table-cell-theme($theme);
256
+ @include matcha-table-modern($theme); // canon DSV3 1:1 Figma 15641:275
257
+ @include matcha-toolbar($theme); // canon DSV3 1:1 Figma 15866:92
258
+ @include matcha-button-toggle($theme);
259
+ @include matcha-button-theme($theme);
260
+ @include matcha-ripple-theme($theme);
261
+ @include matcha-tooltip-theme($theme);
262
+ @include matcha-header-theme($theme); // DSV3 lib component (não app)
263
+ @include app-page-header-theme($theme); // LEGACY da app (page-header)
264
+ @include matcha-menu-theme($theme);
265
+ @include matcha-drop-list-theme($theme);
266
+ @include matcha-form-field($theme);
267
+ @include matcha-checkbox($theme);
268
+ @include matcha-spin($theme);
269
+ @include matcha-spinner-theme($theme);
270
+ @include matcha-hint-text($theme);
271
+ @include matcha-slide-toggle-theme($theme);
272
+ @include matcha-tabs($theme);
273
+ @include matcha-tabs-modern($theme);
274
+ @include matcha-modal-theme($theme);
275
+ @include matcha-skeleton-theme($theme);
276
+ @include matcha-radio($theme);
277
+ @include matcha-avatar-theme($theme);
278
+ @include matcha-drawer-theme($theme);
279
+ @include matcha-autocomplete-theme($theme);
280
+ @include matcha-panel-theme($theme);
281
+ @include matcha-option-theme($theme);
282
+ @include matcha-select-theme($theme);
283
+ @include matcha-select-multiple-theme($theme);
284
+ @include matcha-paginator-theme($theme);
285
+ @include matcha-slider-theme($theme);
286
+ @include matcha-highlight-theme($theme);
287
+ @include matcha-divider-theme($theme);
288
+ @include matcha-chip-theme($theme);
289
+ @include matcha-progress-bar-theme($theme);
290
+ @include matcha-page-builder-theme($theme);
291
+ @include matcha-snack-bar-theme($theme);
292
+ @include matcha-chip-theme($theme);
293
+ @include matcha-date-theme($theme);
294
+ @include matcha-calendar-theme($theme);
295
+ @include matcha-timepicker-theme($theme);
296
+ @include matcha-badge-theme($theme);
297
+ @include matcha-empty-state-theme($theme);
298
+ @include matcha-tree-view-theme($theme);
299
+ @include matcha-nav-theme($theme);
300
+ @include matcha-list-theme($theme);
301
+ @include matcha-icon-theme($theme);
302
+ @include matcha-text-editor-theme($theme);
303
+ @include matcha-chart-card-theme($theme);
304
+ @include matcha-crop-theme($theme);
305
+ @include matcha-footer-theme($theme);
306
+ @include matcha-file-uploader-theme($theme);
307
+ @include matcha-drop-image-theme($theme);
308
+ @include matcha-notification-theme($theme);
309
+ @include matcha-section-theme($theme);
310
+ @include matcha-form-section-theme($theme);
311
+ @include matcha-accordion-theme($theme);
312
+ @include matcha-breadcrumb-theme($theme);
313
+ @include matcha-image-theme($theme);
314
+ @include matcha-stepper-theme($theme);
315
+ @include matcha-command-palette-theme($theme);
316
+ @include matcha-profile-card-theme($theme);
317
+ @include matcha-flag($theme);
318
+ @include matcha-emoji-theme($theme);
319
+ @include matcha-page-layout-theme($theme);
320
+ }
321
+
322
+ // matcha-components() — REMOVIDO no major (era o shim retrocompat @deprecated).
323
+ // API nova (ver src/app/app.theme.scss):
324
+ // @include matcha-primitives(); // :root primitivas
325
+ // @include matcha-base(); // estrutural 1× global (agnóstico)
326
+ // @include colors-classes-dynamic(); // classes utilitárias (inclui -static)
327
+ // .theme-X { @include matcha-css-custom-properties($is-dark); // --matcha-color-*
328
+ // @include elevation-theme($is-dark);
329
+ // @include base-body-reset-theme();
330
330
  // @include matcha-typography($config); }