matcha-theme 20.188.0 → 20.190.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 (28) hide show
  1. package/abstracts/_colors.scss +197 -122
  2. package/abstracts/_functions.scss +278 -114
  3. package/components/matcha-audio-player.scss +1 -5
  4. package/components/matcha-avatar.scss +2 -5
  5. package/components/matcha-button-toggle.scss +121 -90
  6. package/components/matcha-buttons.scss +3 -0
  7. package/components/matcha-cards.scss +147 -126
  8. package/components/matcha-checkbox.scss +432 -94
  9. package/components/matcha-form-field.scss +0 -1
  10. package/components/matcha-hint-text.scss +7 -8
  11. package/components/matcha-horizontal-tree.scss +0 -1
  12. package/components/matcha-menu.scss +0 -1
  13. package/components/matcha-option.scss +0 -1
  14. package/components/matcha-panel.scss +0 -1
  15. package/components/matcha-progress-bar.scss +169 -76
  16. package/components/matcha-radio.scss +426 -95
  17. package/components/matcha-scrollbar.scss +1 -2
  18. package/components/matcha-scrollbox-shadow.scss +1 -2
  19. package/components/matcha-select.scss +0 -1
  20. package/components/matcha-skeleton.scss +6 -8
  21. package/components/matcha-slide-toggle.scss +104 -31
  22. package/components/matcha-slider.scss +66 -52
  23. package/components/matcha-spin.scss +47 -4
  24. package/components/matcha-spinner.scss +65 -22
  25. package/components/matcha-tabs.scss +104 -79
  26. package/main.scss +2 -0
  27. package/package.json +1 -1
  28. package/tokens/_color-tokens.scss +95 -136
package/components/matcha-scrollbar.scss CHANGED
@@ -2,7 +2,6 @@
2
2
  $is-dark: map-get($theme, is-dark);
3
3
  $primary: map-get($theme, primary);
4
4
  $accent: map-get($theme, accent);
5
- $warn: map-get($theme, warn);
6
5
  $background: map-get($theme, background);
7
6
  $foreground: map-get($theme, foreground);
8
7
 
@@ -33,4 +32,4 @@
33
32
  }
34
33
  }
35
34
 
36
- }
35
+ }
package/components/matcha-scrollbox-shadow.scss CHANGED
@@ -2,7 +2,6 @@
2
2
  $is-dark: map-get($theme, is-dark);
3
3
  $primary: map-get($theme, primary);
4
4
  $accent: map-get($theme, accent);
5
- $warn: map-get($theme, warn);
6
5
  $background: map-get($theme, background);
7
6
  $foreground: map-get($theme, foreground);
8
7
 
@@ -124,4 +123,4 @@
124
123
  /* Opera doesn't support this in the shorthand */
125
124
  background-attachment: local, local, scroll, scroll;
126
125
  }
127
- }
126
+ }
package/components/matcha-select.scss CHANGED
@@ -1,6 +1,5 @@
1
1
  @mixin matcha-select-theme($theme) {
2
2
  $accent: map-get($theme, accent);
3
- $warn: map-get($theme, warn);
4
3
  $primary: map-get($theme, primary);
5
4
  $background: map-get($theme, background);
6
5
  $foreground: map-get($theme, foreground);
package/components/matcha-skeleton.scss CHANGED
@@ -2,18 +2,15 @@
2
2
  $is-dark: map-get($theme, is-dark);
3
3
  $primary: map-get($theme, primary);
4
4
  $accent: map-get($theme, accent);
5
- $warn: map-get($theme, warn);
6
5
  $background: map-get($theme, background);
7
6
  $foreground: map-get($theme, foreground);
8
7
 
9
8
 
10
9
  .skeleton-animated-background {
11
- background: linear-gradient(
12
- to right,
13
- map-get($background, disabled),
14
- #ffffff11,
15
- map-get($background, disabled)
16
- );
10
+ background: linear-gradient(to right,
11
+ map-get($background, disabled),
12
+ #ffffff11,
13
+ map-get($background, disabled));
17
14
  background-size: 200% 100%;
18
15
  animation: gradientAnimation 1s linear infinite;
19
16
  }
@@ -22,8 +19,9 @@
22
19
  0% {
23
20
  background-position: 100% 0;
24
21
  }
22
+
25
23
  100% {
26
24
  background-position: -100% 0;
27
25
  }
28
26
  }
29
- }
27
+ }
package/components/matcha-slide-toggle.scss CHANGED
@@ -3,21 +3,24 @@
3
3
  input[type="checkbox"] {
4
4
  &::before {
5
5
  background-color: getSurface($theme);
6
- border-color:getPrimary($theme);
6
+ border-color: getPrimary($theme);
7
7
  }
8
+
8
9
  &::after {
9
10
  box-shadow: getDisabled($theme);
10
11
  background-color: getPrimary($theme);
11
12
  }
12
13
  }
14
+
13
15
  &:not([color]),
14
16
  &[color="accent"] {
15
17
  input[type="checkbox"] {
16
18
  &:checked {
17
19
  &::before {
18
20
  background-color: getAccent($theme);
19
- border-color:getAccent($theme);
21
+ border-color: getAccent($theme);
20
22
  }
23
+
21
24
  &::after {
22
25
  background-color: getAccentContrast($theme);
23
26
  }
@@ -31,8 +34,9 @@
31
34
  &:checked {
32
35
  &::before {
33
36
  background-color: getRed($theme);
34
- border-color:getRed($theme);
37
+ border-color: getRed($theme);
35
38
  }
39
+
36
40
  &::after {
37
41
  background-color: getRedContrast($theme);
38
42
  }
@@ -46,8 +50,9 @@
46
50
  &:checked {
47
51
  &::before {
48
52
  background-color: getPink($theme);
49
- border-color:getPink($theme);
53
+ border-color: getPink($theme);
50
54
  }
55
+
51
56
  &::after {
52
57
  background-color: getPinkContrast($theme);
53
58
  }
@@ -59,10 +64,11 @@
59
64
  &[color="purple"] {
60
65
  input[type="checkbox"] {
61
66
  &:checked {
62
- &::before {
67
+ &::before {
63
68
  background-color: getPurple($theme);
64
- border-color:getPurple($theme);
69
+ border-color: getPurple($theme);
65
70
  }
71
+
66
72
  &::after {
67
73
  background-color: getPurpleContrast($theme);
68
74
  }
@@ -76,8 +82,9 @@
76
82
  &:checked {
77
83
  &::before {
78
84
  background-color: getDeepPurple($theme);
79
- border-color:getDeepPurple($theme);
85
+ border-color: getDeepPurple($theme);
80
86
  }
87
+
81
88
  &::after {
82
89
  background-color: getDeepPurpleContrast($theme);
83
90
  }
@@ -91,8 +98,9 @@
91
98
  &:checked {
92
99
  &::before {
93
100
  background-color: getIndigo($theme);
94
- border-color:getIndigo($theme);
101
+ border-color: getIndigo($theme);
95
102
  }
103
+
96
104
  &::after {
97
105
  background-color: getIndigoContrast($theme);
98
106
  }
@@ -101,13 +109,14 @@
101
109
  }
102
110
 
103
111
  //blue
104
- &[color="blue"] {
112
+ &[color="blue"] {
105
113
  input[type="checkbox"] {
106
114
  &:checked {
107
115
  &::before {
108
116
  background-color: getBlue($theme);
109
- border-color:getBlue($theme);
117
+ border-color: getBlue($theme);
110
118
  }
119
+
111
120
  &::after {
112
121
  background-color: getBlueContrast($theme);
113
122
  }
@@ -116,13 +125,14 @@
116
125
  }
117
126
 
118
127
  //light-blue
119
- &[color="light-blue"] {
128
+ &[color="light-blue"] {
120
129
  input[type="checkbox"] {
121
130
  &:checked {
122
131
  &::before {
123
132
  background-color: getLightBlue($theme);
124
- border-color:getLightBlue($theme);
133
+ border-color: getLightBlue($theme);
125
134
  }
135
+
126
136
  &::after {
127
137
  background-color: getLightBlueContrast($theme);
128
138
  }
@@ -136,8 +146,9 @@
136
146
  &:checked {
137
147
  &::before {
138
148
  background-color: getCyan($theme);
139
- border-color:getCyan($theme);
149
+ border-color: getCyan($theme);
140
150
  }
151
+
141
152
  &::after {
142
153
  background-color: getCyanContrast($theme);
143
154
  }
@@ -151,8 +162,9 @@
151
162
  &:checked {
152
163
  &::before {
153
164
  background-color: getTeal($theme);
154
- border-color:getTeal($theme);
165
+ border-color: getTeal($theme);
155
166
  }
167
+
156
168
  &::after {
157
169
  background-color: getTealContrast($theme);
158
170
  }
@@ -166,8 +178,9 @@
166
178
  &:checked {
167
179
  &::before {
168
180
  background-color: getGreen($theme);
169
- border-color:getGreen($theme);
181
+ border-color: getGreen($theme);
170
182
  }
183
+
171
184
  &::after {
172
185
  background-color: getGreenContrast($theme);
173
186
  }
@@ -181,8 +194,9 @@
181
194
  &:checked {
182
195
  &::before {
183
196
  background-color: getLightGreen($theme);
184
- border-color:getLightGreen($theme);
197
+ border-color: getLightGreen($theme);
185
198
  }
199
+
186
200
  &::after {
187
201
  background-color: getLightGreenContrast($theme);
188
202
  }
@@ -196,8 +210,9 @@
196
210
  &:checked {
197
211
  &::before {
198
212
  background-color: getLime($theme);
199
- border-color:getLime($theme);
213
+ border-color: getLime($theme);
200
214
  }
215
+
201
216
  &::after {
202
217
  background-color: getLimeContrast($theme);
203
218
  }
@@ -211,8 +226,9 @@
211
226
  &:checked {
212
227
  &::before {
213
228
  background-color: getYellow($theme);
214
- border-color:getYellow($theme);
229
+ border-color: getYellow($theme);
215
230
  }
231
+
216
232
  &::after {
217
233
  background-color: getYellowContrast($theme);
218
234
  }
@@ -226,8 +242,9 @@
226
242
  &:checked {
227
243
  &::before {
228
244
  background-color: getAmber($theme);
229
- border-color:getAmber($theme);
245
+ border-color: getAmber($theme);
230
246
  }
247
+
231
248
  &::after {
232
249
  background-color: getAmberContrast($theme);
233
250
  }
@@ -241,8 +258,9 @@
241
258
  &:checked {
242
259
  &::before {
243
260
  background-color: getOrange($theme);
244
- border-color:getOrange($theme);
261
+ border-color: getOrange($theme);
245
262
  }
263
+
246
264
  &::after {
247
265
  background-color: getOrangeContrast($theme);
248
266
  }
@@ -256,8 +274,9 @@
256
274
  &:checked {
257
275
  &::before {
258
276
  background-color: getDeepOrange($theme);
259
- border-color:getDeepOrange($theme);
277
+ border-color: getDeepOrange($theme);
260
278
  }
279
+
261
280
  &::after {
262
281
  background-color: getDeepOrangeContrast($theme);
263
282
  }
@@ -271,8 +290,9 @@
271
290
  &:checked {
272
291
  &::before {
273
292
  background-color: getBrown($theme);
274
- border-color:getBrown($theme);
293
+ border-color: getBrown($theme);
275
294
  }
295
+
276
296
  &::after {
277
297
  background-color: getBrownContrast($theme);
278
298
  }
@@ -286,8 +306,9 @@
286
306
  &:checked {
287
307
  &::before {
288
308
  background-color: getGrey($theme);
289
- border-color:getGrey($theme);
309
+ border-color: getGrey($theme);
290
310
  }
311
+
291
312
  &::after {
292
313
  background-color: getGreyContrast($theme);
293
314
  }
@@ -299,10 +320,11 @@
299
320
  &[color="blue-grey"] {
300
321
  input[type="checkbox"] {
301
322
  &:checked {
302
- &::before {
323
+ &::before {
303
324
  background-color: getBlueGrey($theme);
304
- border-color:getBlueGrey($theme);
325
+ border-color: getBlueGrey($theme);
305
326
  }
327
+
306
328
  &::after {
307
329
  background-color: getBlueGreyContrast($theme);
308
330
  }
@@ -316,8 +338,9 @@
316
338
  &:checked {
317
339
  &::before {
318
340
  background-color: getPrimary($theme);
319
- border-color:getPrimary($theme);
341
+ border-color: getPrimary($theme);
320
342
  }
343
+
321
344
  &::after {
322
345
  background-color: getPrimaryContrast($theme);
323
346
  }
@@ -325,14 +348,31 @@
325
348
  }
326
349
  }
327
350
 
351
+ //success
352
+ &[color="success"] {
353
+ input[type="checkbox"] {
354
+ &:checked {
355
+ &::before {
356
+ background-color: getSuccess($theme);
357
+ border-color: getSuccess($theme);
358
+ }
359
+
360
+ &::after {
361
+ background-color: getSuccessContrast($theme);
362
+ }
363
+ }
364
+ }
365
+ }
366
+
328
367
  //warn
329
368
  &[color="warn"] {
330
369
  input[type="checkbox"] {
331
370
  &:checked {
332
371
  &::before {
333
372
  background-color: getWarn($theme);
334
- border-color:getWarn($theme);
373
+ border-color: getWarn($theme);
335
374
  }
375
+
336
376
  &::after {
337
377
  background-color: getWarnContrast($theme);
338
378
  }
@@ -340,6 +380,38 @@
340
380
  }
341
381
  }
342
382
 
383
+ //danger
384
+ &[color="danger"] {
385
+ input[type="checkbox"] {
386
+ &:checked {
387
+ &::before {
388
+ background-color: getDanger($theme);
389
+ border-color: getDanger($theme);
390
+ }
391
+
392
+ &::after {
393
+ background-color: getDangerContrast($theme);
394
+ }
395
+ }
396
+ }
397
+ }
398
+
399
+ //info
400
+ &[color="info"] {
401
+ input[type="checkbox"] {
402
+ &:checked {
403
+ &::before {
404
+ background-color: getInfo($theme);
405
+ border-color: getInfo($theme);
406
+ }
407
+
408
+ &::after {
409
+ background-color: getInfoContrast($theme);
410
+ }
411
+ }
412
+ }
413
+ }
414
+
343
415
  .matcha-slide-toggle-label {
344
416
  color: getGrey($theme);
345
417
  }
@@ -359,6 +431,7 @@
359
431
  font-size: 14px;
360
432
  user-select: none;
361
433
  }
434
+
362
435
  &.matcha-slide-toggle-disabled {
363
436
  cursor: not-allowed;
364
437
  opacity: 0.5;
@@ -378,7 +451,7 @@
378
451
  height: 20px;
379
452
  margin: 0;
380
453
  outline: none;
381
- cursor: pointer;
454
+ cursor: pointer;
382
455
  vertical-align: middle;
383
456
  min-width: 36px; // garante que não fique < 36px
384
457
  flex-shrink: 0; // se estiver dentro de um container flex
@@ -391,7 +464,7 @@
391
464
  transform: translateY(-50%);
392
465
  width: 100%;
393
466
  height: 20px;
394
- border-width:2px;
467
+ border-width: 2px;
395
468
  border-style: solid;
396
469
  border-radius: 12px;
397
470
  box-sizing: border-box;
@@ -413,7 +486,7 @@
413
486
  }
414
487
 
415
488
  &:checked {
416
- &::after {
489
+ &::after {
417
490
  top: 2px;
418
491
  left: 1px;
419
492
  width: 16px;
@@ -427,4 +500,4 @@
427
500
  }
428
501
  }
429
502
  }
430
- }
503
+ }
package/components/matcha-slider.scss CHANGED
@@ -24,73 +24,88 @@
24
24
  blue-grey: getBlueGrey,
25
25
  primary: getPrimary,
26
26
  accent: getAccent,
27
+ success: getSuccess,
27
28
  warn: getWarn,
29
+ danger: getDanger,
30
+ info: getInfo,
28
31
  disabled: getDisabled,
29
32
  );
30
33
 
31
- .matcha-slider {
32
- // Default accent color
33
- &[data-color="accent"] {
34
+ .matcha-slider {
35
+
36
+ // Default accent color
37
+ &[data-color="accent"] {
38
+ .selection-bar {
39
+ background-color: getAccent($theme);
40
+ }
41
+
42
+ .pointer {
43
+ background-color: getAccent($theme);
44
+
45
+ &.focused {
46
+ box-shadow: 0 0 0 4px getAccent($theme);
47
+ }
48
+
49
+ &:hover {
50
+ box-shadow: 0 0 0 4px rgba(getAccent($theme), 0.24);
51
+ }
52
+
53
+ &:active {
54
+ box-shadow: 0 0 0 4px rgba(getAccent($theme), 0.24);
55
+ }
56
+ }
57
+ }
58
+
59
+ .slider-track {
60
+ background-color: getDisabled($theme);
61
+ }
62
+
63
+ // Dynamic colors
64
+ @each $colorName, $colorFn in $color-functions {
65
+ &[data-color="#{'' + $colorName}"] {
34
66
  .selection-bar {
35
- background-color: getAccent($theme);
67
+ background-color: call(#{$colorFn}, $theme);
36
68
  }
69
+
37
70
  .pointer {
38
- background-color: getAccent($theme);
71
+ background-color: call(#{$colorFn}, $theme);
72
+
39
73
  &.focused {
40
- box-shadow: 0 0 0 4px getAccent($theme);
74
+ box-shadow: 0 0 0 4px call(#{$colorFn}, $theme);
41
75
  }
76
+
42
77
  &:hover {
43
- box-shadow: 0 0 0 4px rgba(getAccent($theme), 0.24);
78
+ box-shadow: 0 0 0 4px rgba(call(#{$colorFn}, $theme), 0.24);
44
79
  }
80
+
45
81
  &:active {
46
- box-shadow: 0 0 0 4px rgba(getAccent($theme), 0.24);
82
+ box-shadow: 0 0 0 4px rgba(call(#{$colorFn}, $theme), 0.24);
47
83
  }
48
84
  }
49
85
  }
86
+ }
50
87
 
51
- .slider-track {
52
- background-color: getDisabled($theme);
88
+ // Disabled state
89
+ &.disabled {
90
+ background-color: transparent !important;
91
+
92
+ .selection-bar {
93
+ background-color: getDisabled($theme);
53
94
  }
54
- // Dynamic colors
55
- @each $colorName, $colorFn in $color-functions {
56
- &[data-color="#{'' + $colorName}"] {
57
- .selection-bar {
58
- background-color: call(#{$colorFn}, $theme);
59
- }
60
- .pointer {
61
- background-color: call(#{$colorFn}, $theme);
62
- &.focused {
63
- box-shadow: 0 0 0 4px call(#{$colorFn}, $theme);
64
- }
65
- &:hover {
66
- box-shadow: 0 0 0 4px rgba(call(#{$colorFn}, $theme), 0.24);
67
- }
68
- &:active {
69
- box-shadow: 0 0 0 4px rgba(call(#{$colorFn}, $theme), 0.24);
70
- }
71
- }
72
- }
95
+
96
+ .pointer {
97
+ background-color: getDisabled($theme);
73
98
  }
74
99
 
75
- // Disabled state
76
- &.disabled {
77
- background-color: transparent !important;
78
-
79
- .selection-bar {
80
- background-color: getDisabled($theme);
81
- }
82
- .pointer {
83
- background-color: getDisabled($theme);
84
- }
85
- .tick-value,
86
- .pointer-label,
87
- .floor-label,
88
- .ceil-label {
89
- color: getDisabled($theme);
90
- }
100
+ .tick-value,
101
+ .pointer-label,
102
+ .floor-label,
103
+ .ceil-label {
104
+ color: getDisabled($theme);
91
105
  }
92
106
  }
93
107
  }
108
+ }
94
109
 
95
110
  .matcha-slider {
96
111
  position: relative;
@@ -180,11 +195,11 @@
180
195
  display: flex;
181
196
  justify-content: space-between;
182
197
  margin: 8px 10px 0;
183
- top:-18px;
198
+ top: -18px;
184
199
  position: relative;
185
200
  font-size: 16px;
186
201
  color: var(--color-fg-muted);
187
-
202
+
188
203
  .color-placeholder {
189
204
  color: var(--color-fg-muted);
190
205
  }
@@ -226,9 +241,9 @@
226
241
  transform: translate(-50%, -50%) scale(1.1);
227
242
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
228
243
  }
229
-
244
+
230
245
  .selection-bar {
231
- transition: none;
246
+ transition: none;
232
247
  background-color: $color-base-blue-grey-300;
233
248
  }
234
249
  }
@@ -252,11 +267,10 @@
252
267
 
253
268
  // Reduced motion support
254
269
  @media (prefers-reduced-motion: reduce) {
270
+
255
271
  .pointer,
256
272
  .selection-bar {
257
273
  transition: none;
258
274
  }
259
275
  }
260
- }
261
-
262
-
276
+ }