@inchurch/matcha-theme 20.0.11 → 20.276.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 (98) hide show
  1. package/abstracts/_colors.scss +404 -404
  2. package/abstracts/_elevation.scss +102 -102
  3. package/abstracts/_functions.scss +1212 -1212
  4. package/abstracts/_media-breakpoint.scss +23 -23
  5. package/abstracts/_typography.scss +127 -127
  6. package/base/_reset.scss +438 -438
  7. package/components/app-page-header.scss +260 -0
  8. package/components/matcha-accordion.scss +294 -157
  9. package/components/matcha-avatar.scss +171 -31
  10. package/components/matcha-badge.scss +4 -4
  11. package/components/matcha-breadcrumb.scss +232 -126
  12. package/components/matcha-button-toggle.scss +44 -0
  13. package/components/matcha-buttons.scss +908 -784
  14. package/components/matcha-calendar.scss +70 -2
  15. package/components/matcha-cards.scss +28 -2
  16. package/components/matcha-checkbox.scss +191 -490
  17. package/components/matcha-chip.scss +297 -212
  18. package/components/matcha-command-palette.scss +291 -63
  19. package/components/matcha-crop.scss +407 -172
  20. package/components/matcha-date.scss +81 -81
  21. package/components/matcha-divider.scss +86 -31
  22. package/components/matcha-drawer.scss +201 -50
  23. package/components/matcha-drop-image.scss +14 -0
  24. package/components/matcha-drop-list.scss +42 -1
  25. package/components/matcha-empty-state.scss +195 -83
  26. package/components/matcha-flag.scss +93 -52
  27. package/components/matcha-footer.scss +68 -164
  28. package/components/matcha-form-field.scss +52 -0
  29. package/components/matcha-form-section.scss +101 -101
  30. package/components/matcha-header.scss +135 -325
  31. package/components/matcha-highlight.scss +65 -197
  32. package/components/matcha-hint-text.scss +21 -0
  33. package/components/matcha-horizontal-tree.scss +317 -317
  34. package/components/matcha-icon.scss +17 -25
  35. package/components/matcha-list.scss +5 -5
  36. package/components/matcha-menu.scss +13 -0
  37. package/components/matcha-modal.scss +58 -84
  38. package/components/matcha-nav.scss +361 -230
  39. package/components/matcha-notification.scss +413 -197
  40. package/components/matcha-option.scss +79 -23
  41. package/components/matcha-paginator.scss +689 -235
  42. package/components/matcha-panel.scss +42 -26
  43. package/components/matcha-profile-card.scss +50 -50
  44. package/components/matcha-progress-bar.scss +257 -153
  45. package/components/matcha-radio.scss +244 -452
  46. package/components/matcha-scrollbox-shadow.scss +122 -122
  47. package/components/matcha-select.scss +3 -3
  48. package/components/matcha-skeleton.scss +18 -0
  49. package/components/matcha-slide-toggle.scss +47 -2
  50. package/components/matcha-slider.scss +172 -75
  51. package/components/matcha-snack-bar.scss +114 -121
  52. package/components/matcha-spinner.scss +76 -57
  53. package/components/matcha-status-pill.scss +82 -0
  54. package/components/matcha-stepper.scss +377 -177
  55. package/components/matcha-table.scss +569 -785
  56. package/components/matcha-tabs.scss +624 -469
  57. package/components/matcha-toolbar.scss +359 -206
  58. package/components/matcha-tooltip.scss +156 -62
  59. package/components/matcha-tree-view.scss +189 -0
  60. package/components/matcha-uploader.scss +240 -62
  61. package/fonts/manrope/manrope-latin-ext.woff2 +0 -0
  62. package/fonts/manrope/manrope-latin.woff2 +0 -0
  63. package/layout/matcha-page-layout.scss +4 -4
  64. package/main.scss +232 -265
  65. package/package.json +1 -1
  66. package/tokens/_animations-tokens.scss +37 -37
  67. package/tokens/_breakpoints-tokens.scss +35 -26
  68. package/tokens/_color-tokens.scss +1152 -1152
  69. package/tokens/_css-custom-properties.scss +650 -568
  70. package/tokens/_spacing-tokens.scss +94 -94
  71. package/vendors/angular-editor.scss +56 -56
  72. package/vendors/angular-material-fixes.scss +297 -297
  73. package/vendors/charts.scss +92 -92
  74. package/vendors/ng5-slider.scss +56 -56
  75. package/vendors/ngx-material-timepicker.scss +50 -50
  76. package/fonts/CircularStd-Black.eot +0 -0
  77. package/fonts/CircularStd-Black.svg +0 -3426
  78. package/fonts/CircularStd-Black.ttf +0 -0
  79. package/fonts/CircularStd-Black.woff +0 -0
  80. package/fonts/CircularStd-Black.woff2 +0 -0
  81. package/fonts/CircularStd-Bold.eot +0 -0
  82. package/fonts/CircularStd-Bold.otf +0 -0
  83. package/fonts/CircularStd-Bold.svg +0 -13532
  84. package/fonts/CircularStd-Bold.ttf +0 -0
  85. package/fonts/CircularStd-Bold.woff +0 -0
  86. package/fonts/CircularStd-Bold.woff2 +0 -0
  87. package/fonts/CircularStd-Medium.eot +0 -0
  88. package/fonts/CircularStd-Medium.otf +0 -0
  89. package/fonts/CircularStd-Medium.svg +0 -13511
  90. package/fonts/CircularStd-Medium.ttf +0 -0
  91. package/fonts/CircularStd-Medium.woff +0 -0
  92. package/fonts/CircularStd-Medium.woff2 +0 -0
  93. package/fonts/CircularStd-Regular.eot +0 -0
  94. package/fonts/CircularStd-Regular.otf +0 -0
  95. package/fonts/CircularStd-Regular.svg +0 -2378
  96. package/fonts/CircularStd-Regular.ttf +0 -0
  97. package/fonts/CircularStd-Regular.woff +0 -0
  98. package/fonts/CircularStd-Regular.woff2 +0 -0
package/main.scss CHANGED
@@ -1,266 +1,233 @@
1
- // TOKENS
2
- @import "./tokens/animations-tokens";
3
- @import "./tokens/breakpoints-tokens";
4
- @import "./tokens/color-tokens";
5
- @import "./tokens/elevation-tokens";
6
- @import "./tokens/spacing-tokens";
7
- @import "./tokens/typography-tokens";
8
- @import "./tokens/css-custom-properties";
9
-
10
- // FUNCTIONS
11
- @import "./abstracts/functions"; // map-contrast() palette() map-color() light-theme() dark-theme() matcha-typography-level() matcha-typography-config() _matcha-get-type-value() matcha-font-size() matcha-line-height() matcha-font-weight() matcha-letter-spacing() matcha-font-family() _get-umbra-map() _get-penumbra-map() _get-ambient-map() elevation-transition-property-value()
12
-
13
- // MIXINS
14
- @import "./abstracts/colors"; // colors-classes-static() colors-classes-dynamic()
15
- @import "./abstracts/elevation"; // elevation() _matcha-theme-elevation() matcha-overridable-elevation() _matcha-theme-overridable-elevation() elevation-transition() elevation-theme()
16
- @import "./abstracts/media-breakpoint"; // media-breakpoint()
17
-
18
- // TYPOGRAPHY
19
- @import "./abstracts/typography"; // matcha-typography-font-shorthand() matcha-typography-level-to-styles() matcha-reset-typography()
20
-
21
- // BASE
22
- @import "./base/reset"; // base-body-reset-theme()
23
-
24
- // COMPONENTS
25
- @import "./components/matcha-audio-player.scss"; //matcha-audio-player-theme($theme)
26
- @import "./components/matcha-autocomplete.scss"; // matcha-autocomplete-theme($theme)
27
- @import "./components/matcha-option.scss"; // matcha-option-theme($theme)
28
- @import "./components/matcha-panel.scss"; // matcha-panel-theme($theme)
29
- @import "./components/matcha-select.scss"; // matcha-select-theme($theme)
30
- @import "./components/matcha-buttons.scss"; // matcha-button-theme($theme)
31
- @import "./components/matcha-button-toggle.scss"; // matcha-button-toggle-theme($theme)
32
- @import "./components/matcha-cards.scss"; // matcha-cards-theme($theme)
33
- @import "./components/matcha-color-pick.scss"; // matcha-color-pick-theme($theme)
34
- @import "./components/matcha-draggable.scss"; // matcha-draggable-theme($theme)
35
- @import "./components/matcha-drop-list.scss"; // matcha-drop-list-theme($theme)
36
- @import "./components/matcha-header.scss"; // matcha-header-theme($theme)
37
- @import "./components/matcha-horizontal-tree.scss"; // matcha-horizontal-tree-theme($theme)
38
- @import "./components/matcha-menu.scss"; // matcha-menu-theme($theme)
39
- @import "./components/matcha-progress-bar.scss"; // matcha-progress-bar-theme($theme)
40
- @import "./components/matcha-scrollbar.scss"; // matcha-scrollbar-theme($theme)
41
- @import "./components/matcha-scrollbox-shadow.scss"; // matcha-scrollbox-shadow-theme($theme)
42
- @import "./components/matcha-skeleton.scss"; // matcha-skeleton-theme($theme)
43
- @import "./components/matcha-table.scss"; // matcha-table-theme($theme)
44
- @import "./components/matcha-table-cell.scss"; // matcha-table-cell-theme($theme)
45
- @import "./components/matcha-tooltip.scss"; // matcha-tooltip-theme($theme)
46
- @import "./components/matcha-form-field.scss";
47
- @import "./components/matcha-checkbox.scss";
48
- @import "./components/matcha-accordion.scss";
49
- @import "./components/matcha-ripple.scss"; // matcha-ripple-theme($theme)
50
- @import "./components/matcha-spin.scss"; // matcha-spin-theme($theme)
51
- @import "./components/matcha-spinner.scss"; // matcha-spinner-theme($theme)
52
- @import "./components/matcha-hint-text.scss"; // matcha-hint-theme($theme)
53
- @import "./components/matcha-slide-toggle.scss"; // matcha-slide-toggle($theme)
54
- @import "./components/matcha-radio.scss"; // matcha-radio($theme)
55
- @import "./components/matcha-avatar.scss"; // matcha-avatar($theme)
56
- @import "./components/matcha-paginator.scss"; // matcha-paginator($theme)
57
- @import "./components/matcha-slider.scss"; // matcha-slider($theme)
58
- @import "./components/matcha-divider.scss"; // matcha-divider($theme)
59
- @import "./components/matcha-highlight.scss"; // matcha-highlight($theme)
60
- @import "./components/matcha-tabs.scss"; // matcha-tabs($theme)
61
- @import "./components/matcha-modal.scss"; // matcha-modal($theme)
62
- @import "./components/matcha-drawer.scss"; // matcha-drawer-theme($theme)
63
- @import "./components/matcha-chip.scss"; // matcha-chip($theme)
64
- @import "./components/matcha-date.scss"; // matcha-date-theme($theme)
65
- @import "./components/matcha-calendar.scss"; // matcha-calendar-theme($theme)
66
- @import "./components/matcha-page-builder.scss"; // matcha-page-builder($theme)
67
- @import "./components/matcha-snack-bar.scss"; // matcha-snack-bar-theme($theme)
68
- @import "./components/matcha-timepicker.scss"; // matcha-timepicker-theme($theme)
69
- @import "./components/matcha-badge.scss"; // matcha-badge-theme($theme)
70
- @import "./components/matcha-empty-state.scss"; // matcha-empty-state-theme($theme)
71
- @import "./components/matcha-nav.scss"; // matcha-nav-theme($theme)
72
- @import "./components/matcha-list.scss"; // matcha-list-theme($theme)
73
- @import "./components/matcha-icon.scss"; // matcha-icon-theme($theme)
74
- @import "./components/matcha-text-editor.scss"; // matcha-text-editor-theme($theme)
75
- @import "./components/matcha-chart-card.scss"; // matcha-chart-card-theme($theme)
76
- @import "./components/matcha-crop.scss"; // matcha-crop-theme($theme)
77
- @import "./components/matcha-footer.scss"; // matcha-footer-theme($theme)
78
- @import "./components/matcha-uploader.scss"; // matcha-uploader-theme($theme)
79
- @import "./components/matcha-notification.scss"; // matcha-notification-theme($theme)
80
- @import "./components/matcha-section.scss"; // matcha-section-theme($theme)
81
- @import "./components/matcha-form-section.scss"; // matcha-form-section-theme($theme)
82
- @import "./components/matcha-breadcrumb.scss"; // matcha-breadcrumb-theme($theme)
83
- @import "./components/matcha-image.scss"; // matcha-image-theme($theme)
84
- @import "./components/matcha-stepper.scss"; // matcha-stepper-theme($theme)
85
- @import "./components/matcha-toolbar.scss"; // matcha-toolbar-theme($theme)
86
- @import "./components/matcha-command-palette.scss"; // matcha-command-palette-theme($theme)
87
- @import "./components/matcha-profile-card.scss"; // matcha-profile-card-theme($theme)
88
- @import "./components/matcha-flag.scss"; // matcha-flag-theme($theme)
89
- @import "./components/matcha-emoji.scss"; // matcha-emoji-theme($theme)
90
-
91
- // LAYOUT
92
- @import "./layout/matcha-page-layout.scss"; // matcha-page-layout-theme($theme)
93
-
94
- // VENDORS
95
- @import "./vendors/angular-editor.scss";
96
- @import "./vendors/angular-material-fixes.scss";
97
- @import "./vendors/calendar.scss";
98
- @import "./vendors/charts.scss";
99
- @import "./vendors/ng5-slider.scss";
100
- @import "./vendors/ngx-material-timepicker.scss";
101
-
102
- // ─── FONT LOADING ────────────────────────────────────────────────────────────
103
- // Manrope (Google Fonts, variable weight 200-800)
104
- //
105
- // RECOMMENDED (non-blocking): add these to your app's <head> BEFORE the CSS:
106
- // <link rel="preconnect" href="https://fonts.googleapis.com">
107
- // <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
108
- // <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap">
109
- //
110
- // PRODUCTION: self-host for best performance https://fonts.google.com/specimen/Manrope
111
- //
112
- // The @import below is a backwards-compatible fallback. It is render-blocking
113
- // and adds ~100-300ms to First Contentful Paint. Prefer <link> in your HTML.
114
- // ─────────────────────────────────────────────────────────────────────────────
115
- @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
116
-
117
- // Legacy fallback keep CircularStd for existing consumers until fully migrated
118
- @font-face {
119
- font-family: "CircularStd";
120
- src: url("fonts/CircularStd-Regular.eot");
121
- src:
122
- local("☺"),
123
- url("fonts/CircularStd-Regular.woff") format("woff"),
124
- url("fonts/CircularStd-Regular.ttf") format("truetype"),
125
- url("fonts/CircularStd-Regular.svg") format("svg");
126
- font-weight: 400;
127
- font-style: normal;
128
- font-display: swap;
129
- }
130
-
131
- @font-face {
132
- font-family: "CircularStd";
133
- src: url("fonts/CircularStd-Medium.eot");
134
- src:
135
- local("☺"),
136
- url("fonts/CircularStd-Medium.woff") format("woff"),
137
- url("fonts/CircularStd-Medium.ttf") format("truetype"),
138
- url("fonts/CircularStd-Medium.svg") format("svg");
139
- font-weight: 500;
140
- font-style: normal;
141
- font-display: swap;
142
- }
143
-
144
- @font-face {
145
- font-family: "CircularStd";
146
- src: url("fonts/CircularStd-Bold.eot");
147
- src:
148
- local("☺"),
149
- url("fonts/CircularStd-Bold.woff") format("woff"),
150
- url("fonts/CircularStd-Bold.ttf") format("truetype"),
151
- url("fonts/CircularStd-Bold.svg") format("svg");
152
- font-weight: 700;
153
- font-style: normal;
154
- font-display: swap;
155
- }
156
-
157
- @font-face {
158
- font-family: "CircularStd";
159
- src: url("fonts/CircularStd-Black.eot");
160
- src:
161
- local("☺"),
162
- url("fonts/CircularStd-Black.woff") format("woff"),
163
- url("fonts/CircularStd-Black.ttf") format("truetype"),
164
- url("fonts/CircularStd-Black.svg") format("svg");
165
- font-weight: 900;
166
- font-style: normal;
167
- font-display: swap;
168
- }
169
-
170
- // -------------------------------------------------------------------------------------------------------------------
171
- // @ CORE - Mixins and Includes
172
- // -------------------------------------------------------------------------------------------------------------------
173
- @mixin matcha-typography($config: null) {
174
- @if $config ==null {
175
- $config: matcha-typography-config();
176
- }
177
-
178
- @include matcha-reset-typography($config);
179
- }
180
-
181
- @mixin matcha-components($theme) {
182
- @include matcha-css-custom-properties($theme);
183
-
184
- @include colors-classes-dynamic($theme);
185
- @include colors-classes-static($theme);
186
-
187
- @include elevation-theme($theme);
188
-
189
- @include vendor-angular-editor($theme);
190
- @include vendor-angular-material-fixes($theme);
191
- @include vendor-calendar-theme($theme);
192
- @include vendor-chart($theme);
193
- @include vendor-ng-5-theme($theme);
194
- @include vendor-ngx-material-timepicker($theme);
195
-
196
- @include base-typography-theme($theme);
197
- @include base-body-reset-theme($theme);
198
-
199
- @include matcha-cards-theme($theme);
200
- @include matcha-horizontal-tree-theme($theme);
201
- @include matcha-audio-player-theme($theme);
202
- @include matcha-color-pick-theme($theme);
203
- @include matcha-draggable-theme($theme);
204
- @include matcha-scrollbox-shadow($theme);
205
- @include matcha-scrollbar-theme($theme);
206
-
207
- @include matcha-table-theme($theme);
208
- @include matcha-table-cell-theme($theme);
209
- @include matcha-button-toggle($theme);
210
- @include matcha-button-theme($theme);
211
- @include matcha-ripple-theme($theme);
212
- @include matcha-tooltip-theme($theme);
213
- @include matcha-header-theme($theme);
214
- @include matcha-menu-theme($theme);
215
- @include matcha-drop-list-theme($theme);
216
- @include matcha-form-field($theme);
217
- @include matcha-checkbox($theme);
218
- @include matcha-spin($theme);
219
- @include matcha-spinner-theme($theme);
220
- @include matcha-hint-text($theme);
221
- @include matcha-slide-toggle-theme($theme);
222
- @include matcha-tabs($theme);
223
- @include matcha-modal-theme($theme);
224
- @include matcha-skeleton-theme($theme);
225
- @include matcha-radio($theme);
226
- @include matcha-avatar-theme($theme);
227
- @include matcha-drawer-theme($theme);
228
- @include matcha-autocomplete-theme($theme);
229
- @include matcha-panel-theme($theme);
230
- @include matcha-option-theme($theme);
231
- @include matcha-select-theme($theme);
232
- @include matcha-paginator-theme($theme);
233
- @include matcha-slider-theme($theme);
234
- @include matcha-highlight-theme($theme);
235
- @include matcha-divider-theme($theme);
236
- @include matcha-progress-bar-theme($theme);
237
- @include matcha-page-builder-theme($theme);
238
- @include matcha-snack-bar-theme($theme);
239
- @include matcha-chip-theme($theme);
240
- @include matcha-date-theme($theme);
241
- @include matcha-calendar-theme($theme);
242
- @include matcha-timepicker-theme($theme);
243
- @include matcha-badge-theme($theme);
244
- @include matcha-empty-state-theme($theme);
245
- @include matcha-nav-theme($theme);
246
- @include matcha-list-theme($theme);
247
- @include matcha-icon-theme($theme);
248
- @include matcha-text-editor-theme($theme);
249
- @include matcha-chart-card-theme($theme);
250
- @include matcha-crop-theme($theme);
251
- @include matcha-footer-theme($theme);
252
- @include matcha-uploader-theme($theme);
253
- @include matcha-notification-theme($theme);
254
- @include matcha-section-theme($theme);
255
- @include matcha-form-section-theme($theme);
256
- @include matcha-accordion-theme($theme);
257
- @include matcha-breadcrumb-theme($theme);
258
- @include matcha-image-theme($theme);
259
- @include matcha-stepper-theme($theme);
260
- @include matcha-toolbar-theme($theme);
261
- @include matcha-command-palette-theme($theme);
262
- @include matcha-profile-card-theme($theme);
263
- @include matcha-flag-theme($theme);
264
- @include matcha-emoji-theme($theme);
265
- @include matcha-page-layout-theme($theme);
1
+ // TOKENS
2
+ @import "./tokens/animations-tokens";
3
+ @import "./tokens/breakpoints-tokens";
4
+ @import "./tokens/color-tokens";
5
+ @import "./tokens/elevation-tokens";
6
+ @import "./tokens/spacing-tokens";
7
+ @import "./tokens/typography-tokens";
8
+ @import "./tokens/css-custom-properties";
9
+
10
+ // FUNCTIONS
11
+ @import "./abstracts/functions"; // map-contrast() palette() map-color() light-theme() dark-theme() matcha-typography-level() matcha-typography-config() _matcha-get-type-value() matcha-font-size() matcha-line-height() matcha-font-weight() matcha-letter-spacing() matcha-font-family() _get-umbra-map() _get-penumbra-map() _get-ambient-map() elevation-transition-property-value()
12
+
13
+ // MIXINS
14
+ @import "./abstracts/colors"; // colors-classes-static() colors-classes-dynamic()
15
+ @import "./abstracts/elevation"; // elevation() _matcha-theme-elevation() matcha-overridable-elevation() _matcha-theme-overridable-elevation() elevation-transition() elevation-theme()
16
+ @import "./abstracts/media-breakpoint"; // media-breakpoint()
17
+
18
+ // TYPOGRAPHY
19
+ @import "./abstracts/typography"; // matcha-typography-font-shorthand() matcha-typography-level-to-styles() matcha-reset-typography()
20
+
21
+ // BASE
22
+ @import "./base/reset"; // base-body-reset-theme()
23
+
24
+ // COMPONENTS
25
+ @import "./components/matcha-audio-player.scss"; //matcha-audio-player-theme($theme)
26
+ @import "./components/matcha-autocomplete.scss"; // matcha-autocomplete-theme($theme)
27
+ @import "./components/matcha-option.scss"; // matcha-option-theme($theme)
28
+ @import "./components/matcha-panel.scss"; // matcha-panel-theme($theme)
29
+ @import "./components/matcha-select.scss"; // matcha-select-theme($theme)
30
+ @import "./components/matcha-buttons.scss"; // matcha-button-theme($theme)
31
+ @import "./components/matcha-button-toggle.scss"; // matcha-button-toggle-theme($theme)
32
+ @import "./components/matcha-cards.scss"; // matcha-cards-theme($theme)
33
+ @import "./components/matcha-color-pick.scss"; // matcha-color-pick-theme($theme)
34
+ @import "./components/matcha-draggable.scss"; // matcha-draggable-theme($theme)
35
+ @import "./components/matcha-drop-list.scss"; // matcha-drop-list-theme($theme)
36
+ @import "./components/matcha-header.scss"; // matcha-header-theme($theme) — lib component DSV3
37
+ @import "./components/app-page-header.scss"; // app-page-header-theme($theme) — page-header LEGACY da app
38
+ @import "./components/matcha-horizontal-tree.scss"; // matcha-horizontal-tree-theme($theme)
39
+ @import "./components/matcha-menu.scss"; // matcha-menu-theme($theme)
40
+ @import "./components/matcha-progress-bar.scss"; // matcha-progress-bar-theme($theme)
41
+ @import "./components/matcha-scrollbar.scss"; // matcha-scrollbar-theme($theme)
42
+ @import "./components/matcha-scrollbox-shadow.scss"; // matcha-scrollbox-shadow-theme($theme)
43
+ @import "./components/matcha-skeleton.scss"; // matcha-skeleton-theme($theme)
44
+ @import "./components/matcha-table.scss"; // matcha-table-modern (canon DSV3 1:1 Figma)
45
+ @import "./components/matcha-table-cell.scss"; // matcha-table-cell-theme($theme)
46
+ @import "./components/matcha-tooltip.scss"; // matcha-tooltip-theme($theme)
47
+ @import "./components/matcha-form-field.scss";
48
+ @import "./components/matcha-checkbox.scss";
49
+ @import "./components/matcha-accordion.scss";
50
+ @import "./components/matcha-ripple.scss"; // matcha-ripple-theme($theme)
51
+ @import "./components/matcha-spin.scss"; // matcha-spin-theme($theme)
52
+ @import "./components/matcha-spinner.scss"; // matcha-spinner-theme($theme)
53
+ @import "./components/matcha-hint-text.scss"; // matcha-hint-theme($theme)
54
+ @import "./components/matcha-slide-toggle.scss"; // matcha-slide-toggle($theme)
55
+ @import "./components/matcha-radio.scss"; // matcha-radio($theme)
56
+ @import "./components/matcha-avatar.scss"; // matcha-avatar($theme)
57
+ @import "./components/matcha-paginator.scss"; // matcha-paginator($theme)
58
+ @import "./components/matcha-slider.scss"; // matcha-slider($theme)
59
+ @import "./components/matcha-divider.scss"; // matcha-divider($theme)
60
+ @import "./components/matcha-highlight.scss"; // matcha-highlight($theme)
61
+ @import "./components/matcha-tabs.scss"; // matcha-tabs($theme)
62
+ @import "./components/matcha-modal.scss"; // matcha-modal($theme)
63
+ @import "./components/matcha-drawer.scss"; // matcha-drawer-theme($theme)
64
+ @import "./components/matcha-chip.scss"; // matcha-chip($theme)
65
+ @import "./components/matcha-status-pill.scss"; // matcha-status-pill
66
+ @import "./components/matcha-date.scss"; // matcha-date-theme($theme)
67
+ @import "./components/matcha-calendar.scss"; // matcha-calendar-theme($theme)
68
+ @import "./components/matcha-page-builder.scss"; // matcha-page-builder($theme)
69
+ @import "./components/matcha-snack-bar.scss"; // matcha-snack-bar-theme($theme)
70
+ @import "./components/matcha-timepicker.scss"; // matcha-timepicker-theme($theme)
71
+ @import "./components/matcha-badge.scss"; // matcha-badge-theme($theme)
72
+ @import "./components/matcha-empty-state.scss"; // matcha-empty-state-theme($theme)
73
+ @import "./components/matcha-tree-view.scss"; // matcha-tree-view-theme($theme)
74
+ @import "./components/matcha-nav.scss"; // matcha-nav-theme($theme)
75
+ @import "./components/matcha-list.scss"; // matcha-list-theme($theme)
76
+ @import "./components/matcha-icon.scss"; // matcha-icon-theme($theme)
77
+ @import "./components/matcha-text-editor.scss"; // matcha-text-editor-theme($theme)
78
+ @import "./components/matcha-chart-card.scss"; // matcha-chart-card-theme($theme)
79
+ @import "./components/matcha-crop.scss"; // matcha-crop-theme($theme)
80
+ @import "./components/matcha-footer.scss"; // matcha-footer-theme($theme)
81
+ @import "./components/matcha-uploader.scss"; // matcha-uploader-theme($theme)
82
+ @import "./components/matcha-drop-image.scss"; // matcha-drop-image-theme($theme)
83
+ @import "./components/matcha-notification.scss"; // matcha-notification-theme($theme)
84
+ @import "./components/matcha-section.scss"; // matcha-section-theme($theme)
85
+ @import "./components/matcha-form-section.scss"; // matcha-form-section-theme($theme)
86
+ @import "./components/matcha-breadcrumb.scss"; // matcha-breadcrumb-theme($theme)
87
+ @import "./components/matcha-image.scss"; // matcha-image-theme($theme)
88
+ @import "./components/matcha-stepper.scss"; // matcha-stepper-theme($theme)
89
+ @import "./components/matcha-toolbar.scss"; // matcha-toolbar-modern (canon DSV3 1:1 Figma 15866:92)
90
+ @import "./components/matcha-command-palette.scss"; // matcha-command-palette-theme($theme)
91
+ @import "./components/matcha-profile-card.scss"; // matcha-profile-card-theme($theme)
92
+ @import "./components/matcha-flag.scss"; // matcha-flag-theme($theme)
93
+ @import "./components/matcha-emoji.scss"; // matcha-emoji-theme($theme)
94
+
95
+ // LAYOUT
96
+ @import "./layout/matcha-page-layout.scss"; // matcha-page-layout-theme($theme)
97
+
98
+ // VENDORS
99
+ @import "./vendors/angular-editor.scss";
100
+ @import "./vendors/angular-material-fixes.scss";
101
+ @import "./vendors/calendar.scss";
102
+ @import "./vendors/charts.scss";
103
+ @import "./vendors/ng5-slider.scss";
104
+ @import "./vendors/ngx-material-timepicker.scss";
105
+
106
+ // ─── FONT LOADING — Manrope (SELF-HOSTED · zero dependência externa) ─────────
107
+ // REGRA DE OURO: fontes self-hosted, nunca @import/<link> do Google Fonts.
108
+ // Variable font (weight 400–800), woff2 local em fonts/manrope/.
109
+ // Atualizar: baixar de https://fonts.google.com/specimen/Manrope (licença OFL),
110
+ // pegar os woff2 latin + latin-ext e substituir os arquivos abaixo.
111
+ @font-face {
112
+ font-family: "Manrope";
113
+ font-style: normal;
114
+ font-weight: 400 800;
115
+ font-display: swap;
116
+ src: url("fonts/manrope/manrope-latin.woff2") format("woff2");
117
+ 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;
118
+ }
119
+ @font-face {
120
+ font-family: "Manrope";
121
+ font-style: normal;
122
+ font-weight: 400 800;
123
+ font-display: swap;
124
+ src: url("fonts/manrope/manrope-latin-ext.woff2") format("woff2");
125
+ 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;
126
+ }
127
+
128
+ // CircularStd removido (2026-06-03): fonte comercial licenciada + fora da regra de
129
+ // ouro. Fonte canônica do DS é a Manrope (self-hosted acima). O token
130
+ // --matcha-font-family já resolve para 'Manrope'.
131
+
132
+ // -------------------------------------------------------------------------------------------------------------------
133
+ // @ CORE - Mixins and Includes
134
+ // -------------------------------------------------------------------------------------------------------------------
135
+ @mixin matcha-typography($config: null) {
136
+ @if $config ==null {
137
+ $config: matcha-typography-config();
138
+ }
139
+
140
+ @include matcha-reset-typography($config);
141
+ }
142
+
143
+ @mixin matcha-components($theme) {
144
+ @include matcha-css-custom-properties($theme);
145
+
146
+ @include colors-classes-dynamic($theme);
147
+ @include colors-classes-static($theme);
148
+
149
+ @include elevation-theme($theme);
150
+
151
+ @include vendor-angular-editor($theme);
152
+ @include vendor-angular-material-fixes($theme);
153
+ @include vendor-calendar-theme($theme);
154
+ @include vendor-chart($theme);
155
+ @include vendor-ng-5-theme($theme);
156
+ @include vendor-ngx-material-timepicker($theme);
157
+
158
+ @include base-typography-theme($theme);
159
+ @include base-body-reset-theme($theme);
160
+
161
+ @include matcha-cards-theme($theme);
162
+ @include matcha-horizontal-tree-theme($theme);
163
+ @include matcha-audio-player-theme($theme);
164
+ @include matcha-color-pick-theme($theme);
165
+ @include matcha-draggable-theme($theme);
166
+ @include matcha-scrollbox-shadow($theme);
167
+ @include matcha-scrollbar-theme($theme);
168
+
169
+ @include matcha-table-cell-theme($theme);
170
+ @include matcha-table-modern($theme); // canon DSV3 1:1 Figma 15641:275
171
+ @include matcha-toolbar($theme); // canon DSV3 1:1 Figma 15866:92
172
+ @include matcha-button-toggle($theme);
173
+ @include matcha-button-theme($theme);
174
+ @include matcha-ripple-theme($theme);
175
+ @include matcha-tooltip-theme($theme);
176
+ @include matcha-header-theme($theme);
177
+ @include app-page-header-theme($theme);
178
+ @include matcha-menu-theme($theme);
179
+ @include matcha-drop-list-theme($theme);
180
+ @include matcha-form-field($theme);
181
+ @include matcha-checkbox($theme);
182
+ @include matcha-spin($theme);
183
+ @include matcha-spinner-theme($theme);
184
+ @include matcha-hint-text($theme);
185
+ @include matcha-slide-toggle-theme($theme);
186
+ @include matcha-tabs($theme);
187
+ @include matcha-tabs-modern($theme);
188
+ @include matcha-modal-theme($theme);
189
+ @include matcha-skeleton-theme($theme);
190
+ @include matcha-radio($theme);
191
+ @include matcha-avatar-theme($theme);
192
+ @include matcha-drawer-theme($theme);
193
+ @include matcha-autocomplete-theme($theme);
194
+ @include matcha-panel-theme($theme);
195
+ @include matcha-option-theme($theme);
196
+ @include matcha-select-theme($theme);
197
+ @include matcha-paginator-theme($theme);
198
+ @include matcha-slider-theme($theme);
199
+ @include matcha-highlight-theme($theme);
200
+ @include matcha-divider-theme($theme);
201
+ @include matcha-chip-theme($theme);
202
+ @include matcha-progress-bar-theme($theme);
203
+ @include matcha-page-builder-theme($theme);
204
+ @include matcha-snack-bar-theme($theme);
205
+ @include matcha-chip-theme($theme);
206
+ @include matcha-date-theme($theme);
207
+ @include matcha-calendar-theme($theme);
208
+ @include matcha-timepicker-theme($theme);
209
+ @include matcha-badge-theme($theme);
210
+ @include matcha-empty-state-theme($theme);
211
+ @include matcha-tree-view-theme($theme);
212
+ @include matcha-nav-theme($theme);
213
+ @include matcha-list-theme($theme);
214
+ @include matcha-icon-theme($theme);
215
+ @include matcha-text-editor-theme($theme);
216
+ @include matcha-chart-card-theme($theme);
217
+ @include matcha-crop-theme($theme);
218
+ @include matcha-footer-theme($theme);
219
+ @include matcha-uploader-theme($theme);
220
+ @include matcha-drop-image-theme($theme);
221
+ @include matcha-notification-theme($theme);
222
+ @include matcha-section-theme($theme);
223
+ @include matcha-form-section-theme($theme);
224
+ @include matcha-accordion-theme($theme);
225
+ @include matcha-breadcrumb-theme($theme);
226
+ @include matcha-image-theme($theme);
227
+ @include matcha-stepper-theme($theme);
228
+ @include matcha-command-palette-theme($theme);
229
+ @include matcha-profile-card-theme($theme);
230
+ @include matcha-flag($theme);
231
+ @include matcha-emoji-theme($theme);
232
+ @include matcha-page-layout-theme($theme);
266
233
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inchurch/matcha-theme",
3
- "version": "20.0.11",
3
+ "version": "20.276.0",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {
@@ -1,37 +1,37 @@
1
- // Easing Curves
2
- // TODO(jelbourn): all of these need to be revisited
3
-
4
- // The default animation curves used by material design.
5
- $time-transition-minimal: 80;
6
- $time-transition-short: 200;
7
- $time-transition-base: 400;
8
- $time-transition-long: 600;
9
- $time-transition-xl: 1000;
10
- $time-delay-short: 50;
11
- $time-delay-base: 100;
12
- $time-delay-long: 200;
13
- $time-duration-short: 2000;
14
- $time-duration-base: 4000;
15
- $time-duration-long: 6000;
16
-
17
- $matcha-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;
18
- $matcha-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
19
- $matcha-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;
20
-
21
- $ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
22
-
23
- $swift-ease-out-duration: #{$time-transition-base}ms !default;
24
- $swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
25
- $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
26
-
27
- $swift-ease-in-duration: #{$time-transition-short}ms !default;
28
- $swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
29
- $swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
30
-
31
- $swift-ease-in-out-duration: #{$time-transition-long}ms !default;
32
- $swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;
33
- $swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
34
-
35
- $swift-linear-duration: #{$time-transition-minimal}ms !default;
36
- $swift-linear-timing-function: linear !default;
37
- $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
1
+ // Easing Curves
2
+ // TODO(jelbourn): all of these need to be revisited
3
+
4
+ // The default animation curves used by material design.
5
+ $time-transition-minimal: 80;
6
+ $time-transition-short: 200;
7
+ $time-transition-base: 400;
8
+ $time-transition-long: 600;
9
+ $time-transition-xl: 1000;
10
+ $time-delay-short: 50;
11
+ $time-delay-base: 100;
12
+ $time-delay-long: 200;
13
+ $time-duration-short: 2000;
14
+ $time-duration-base: 4000;
15
+ $time-duration-long: 6000;
16
+
17
+ $matcha-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;
18
+ $matcha-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
19
+ $matcha-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;
20
+
21
+ $ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
22
+
23
+ $swift-ease-out-duration: #{$time-transition-base}ms !default;
24
+ $swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
25
+ $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
26
+
27
+ $swift-ease-in-duration: #{$time-transition-short}ms !default;
28
+ $swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
29
+ $swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
30
+
31
+ $swift-ease-in-out-duration: #{$time-transition-long}ms !default;
32
+ $swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;
33
+ $swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
34
+
35
+ $swift-linear-duration: #{$time-transition-minimal}ms !default;
36
+ $swift-linear-timing-function: linear !default;
37
+ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;