matcha-theme 19.54.0 → 19.55.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 (3) hide show
  1. package/components/matcha-button-toggle.scss +75 -36
  2. package/components/matcha-buttons.scss +81 -458
  3. package/package.json +1 -1
package/components/matcha-button-toggle.scss CHANGED
@@ -1,11 +1,46 @@
1
+ @mixin _colorize-inactive-type-solid-button-toggle-item($theme, $color-functions) {
2
+ &:not([inactivetype]),
3
+ &[inactivetype="solid"]{
4
+ @each $colorName, $colorFn in $color-functions {
5
+ &[inactivecolor="#{$colorName}"]{
6
+ .button-group{
7
+ button[matcha-button],
8
+ a[matcha-button]{
9
+ &:not([active]){
10
+ background: call(#{$colorFn}, $theme);
11
+ color: call(#{$colorFn}Contrast, $theme);
12
+ box-shadow: 0 0 0 0px inset;
13
+ .ripple{
14
+ background: call(#{$colorFn}ContrastAlpha, $theme);
15
+ }
16
+ }
17
+ }
18
+ }
19
+ }
20
+ }
21
+ &[disabled],
22
+ &[disabled]:not([disabled="false"]),
23
+ &[disabled="true"] {
24
+ .button-group{
25
+ button[matcha-button],
26
+ a[matcha-button]{
27
+ &:not([active]){
28
+ @include _disabled-solid-button($theme);
29
+ }
30
+ }
31
+ }
32
+ }
33
+ }
34
+ }
35
+
1
36
  @mixin _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions) {
2
37
  &[inactivetype="basic"]{
3
38
  @each $colorName, $colorFn in $color-functions {
4
39
  &[inactivecolor="#{$colorName}"]{
5
- .button-group matcha-button-toggle-item{
40
+ .button-group{
6
41
  button[matcha-button],
7
42
  a[matcha-button]{
8
- &:not([active-item="true"]){
43
+ &:not([active]){
9
44
  background: getSurface($theme);
10
45
  color: call(#{$colorFn}, $theme);
11
46
  box-shadow: 0 0 0 0px inset;
@@ -20,10 +55,10 @@
20
55
  &[disabled],
21
56
  &[disabled]:not([disabled="false"]),
22
57
  &[disabled="true"] {
23
- &:not([active-item="true"]){
24
- .button-group matcha-button-toggle-item{
25
- button[matcha-button],
26
- a[matcha-button]{
58
+ .button-group{
59
+ button[matcha-button],
60
+ a[matcha-button]{
61
+ &:not([active]){
27
62
  @include _disabled-basic-button($theme);
28
63
  }
29
64
  }
@@ -38,11 +73,11 @@
38
73
  &:not([disabled="true"]){
39
74
  @each $colorName, $colorFn in $color-functions {
40
75
  &[inactivecolor="#{$colorName}"]{
41
- .button-group matcha-button-toggle-item{
76
+ .button-group{
42
77
  button[matcha-button],
43
78
  a[matcha-button]{
44
79
  //botão não ativo
45
- &:not([active-item="true"]){
80
+ &:not([active]){
46
81
  color: call(#{$colorFn}, $theme);
47
82
  background: transparent;
48
83
  box-shadow: 0 0 0 2px call(#{$colorFn}, $theme) inset;
@@ -59,11 +94,11 @@
59
94
  &[disabled],
60
95
  &[disabled]:not([disabled="false"]),
61
96
  &[disabled="true"] {
62
- > .button-group matcha-button-toggle-item{
97
+ .button-group{
63
98
  button[matcha-button],
64
99
  a[matcha-button]{
65
100
  //botão não ativo
66
- &:not([active-item="true"]){
101
+ &:not([active]){
67
102
  @include _disabled-outline-button($theme);
68
103
  }
69
104
  }
@@ -76,10 +111,10 @@
76
111
  &[inactivetype="alpha"]{
77
112
  @each $colorName, $colorFn in $color-functions {
78
113
  &[inactivecolor="#{$colorName}"]{
79
- .button-group matcha-button-toggle-item{
114
+ .button-group{
80
115
  button[matcha-button],
81
116
  a[matcha-button]{
82
- &:not([active-item="true"]){
117
+ &:not([active]){
83
118
  color: call(#{$colorFn}, $theme);
84
119
  background: call(#{$colorFn}Alpha, $theme);
85
120
  box-shadow: 0 0 0 0px;
@@ -94,11 +129,11 @@
94
129
  &[disabled],
95
130
  &[disabled]:not([disabled="false"]),
96
131
  &[disabled="true"] {
97
- .button-group matcha-button-toggle-item{
132
+ .button-group{
98
133
  button[matcha-button],
99
134
  a[matcha-button]{
100
135
  //botão não ativo
101
- &:not([active-item="true"]){
136
+ &:not([active]){
102
137
  @include _disabled-alpha-button($theme);
103
138
  }
104
139
  }
@@ -112,10 +147,10 @@
112
147
  &[inactivetype="link"]{
113
148
  @each $colorName, $colorFn in $color-functions {
114
149
  &[inactivecolor="#{$colorName}"]{
115
- .button-group matcha-button-toggle-item{
150
+ .button-group{
116
151
  button[matcha-button],
117
152
  a[matcha-button]{
118
- &:not([active-item="true"]){
153
+ &:not([active]){
119
154
 
120
155
  background: transparent;
121
156
  color: call(#{$colorFn}, $theme);
@@ -132,11 +167,11 @@
132
167
  &[disabled],
133
168
  &[disabled]:not([disabled="false"]),
134
169
  &[disabled="true"] {
135
- .button-group matcha-button-toggle-item{
170
+ .button-group{
136
171
  button[matcha-button],
137
172
  a[matcha-button]{
138
173
  //botão não ativo
139
- &:not([active-item="true"]){
174
+ &:not([active]){
140
175
  @include _disabled-link-button($theme);
141
176
  }
142
177
  }
@@ -177,6 +212,7 @@
177
212
 
178
213
  matcha-button-toggle{
179
214
  display: flex;
215
+ @include _colorize-inactive-type-solid-button-toggle-item($theme, $color-functions);
180
216
  @include _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions);
181
217
  @include _colorize-inactive-type-outline-button-toggle-item($theme, $color-functions);
182
218
  @include _colorize-inactive-type-alpha-button-toggle-item($theme, $color-functions);
@@ -185,10 +221,11 @@
185
221
  &[disabled],
186
222
  &[disabled]:not([disabled="false"]),
187
223
  &[disabled="true"] {
188
- .button-group matcha-button-toggle-item{
224
+ .button-group{
189
225
  button[matcha-button],
190
226
  a[matcha-button]{
191
- &[active-item="true"]{
227
+ &[active]{
228
+
192
229
  &[outline],
193
230
  &[outline]:not([outline="false"]),
194
231
  &[outline="true"]{
@@ -212,6 +249,8 @@
212
249
  &[link="true"]{
213
250
  @include _disabled-link-button($theme);
214
251
  }
252
+
253
+ @include _disabled-solid-button($theme);
215
254
  }
216
255
  }
217
256
  }
@@ -219,25 +258,25 @@
219
258
  }
220
259
  }
221
260
  }
261
+ matcha-button-toggle {
262
+ .button-group {
263
+ &.gap-0 {
264
+ gap: 0 !important;
222
265
 
223
- .button-group {
224
- &.gap-0 {
225
- gap: 0 !important;
226
-
227
- // Ajuste border-radius quando gap = 0
228
- matcha-button-toggle-item:first-child button[matcha-button] {
229
- border-top-right-radius: 0;
230
- border-bottom-right-radius: 0;
231
- }
266
+ // Ajuste border-radius quando gap = 0
267
+ button[matcha-button]:first-child {
268
+ border-top-right-radius: 0;
269
+ border-bottom-right-radius: 0;
270
+ }
232
271
 
233
- matcha-button-toggle-item:last-child button[matcha-button] {
234
- border-top-left-radius: 0;
235
- border-bottom-left-radius: 0;
236
- }
272
+ button[matcha-button]:last-child {
273
+ border-top-left-radius: 0;
274
+ border-bottom-left-radius: 0;
275
+ }
237
276
 
238
- matcha-button-toggle-item:not(:first-child):not(:last-child) button[matcha-button] {
239
- border-radius: 0;
277
+ button[matcha-button]:not(:first-child):not(:last-child) {
278
+ border-radius: 0;
279
+ }
240
280
  }
241
281
  }
242
282
  }
243
-
package/components/matcha-buttons.scss CHANGED
@@ -22,6 +22,13 @@
22
22
  // [size-lg]="sizeLg"
23
23
  // [size-xl]="sizeXl">
24
24
 
25
+ @mixin _disabled-solid-button($theme) {
26
+ background: getDisabled($theme);
27
+ color: getDisabledBgContrast($theme);
28
+ box-shadow: 0 0 0 0px inset;
29
+ pointer-events: none;
30
+ }
31
+
25
32
  @mixin _disabled-basic-button($theme) {
26
33
  background: getSurface($theme);
27
34
  color: getDisabled($theme);
@@ -215,472 +222,88 @@ a[matcha-button] {
215
222
  }
216
223
 
217
224
  @mixin matcha-button-theme($theme) {
225
+ $color-functions: (
226
+ red: getRed,
227
+ pink: getPink,
228
+ purple: getPurple,
229
+ deep-purple: getDeepPurple,
230
+ indigo: getIndigo,
231
+ blue: getBlue,
232
+ light-blue: getLightBlue,
233
+ cyan: getCyan,
234
+ teal: getTeal,
235
+ green: getGreen,
236
+ light-green: getLightGreen,
237
+ lime: getLime,
238
+ yellow: getYellow,
239
+ amber: getAmber,
240
+ orange: getOrange,
241
+ deep-orange: getDeepOrange,
242
+ brown: getBrown,
243
+ grey: getGrey,
244
+ blue-grey: getBlueGrey,
245
+ primary: getPrimary,
246
+ accent: getAccent,
247
+ warn: getWarn,
248
+ disabled: getDisabled,
249
+ );
218
250
 
219
251
  button[matcha-button],
220
252
  a[matcha-button] {
221
253
  &:not([color]) .ripple {
222
254
  background: getForegroundAlpha($theme)
223
255
  }
224
- // red
225
- &[color="red"][outline]:not([outline="false"]) .ripple,
226
- &[color="red"][basic]:not([basic="false"]) .ripple {
227
- background: getRedAlpha($theme)
228
- }
229
- &[color="red"][alpha]:not([alpha="false"]){
230
- background: getRedAlpha($theme);
231
- color: getRed($theme);
232
- }
233
- &[color="red"][outline]:not([outline="false"]),
234
- &[color="red"][link]:not([link="false"]),
235
- &[color="red"][basic]:not([basic="false"]) {
236
- color: getRed($theme);
237
- }
238
- &[color="red"]{
239
- background: getRed($theme);
240
- color: getRedContrast($theme);
241
- }
242
- &[color="red"] .ripple{background: getRedContrastAlpha($theme)}
243
-
244
- // pink
245
- &[color="pink"][outline]:not([outline="false"]) .ripple,
246
- &[color="pink"][basic]:not([basic="false"]) .ripple {
247
- background: getPinkAlpha($theme)
248
- }
249
- &[color="pink"][alpha]:not([alpha="false"]){
250
- background: getPinkAlpha($theme);
251
- color: getPink($theme);
252
- }
253
- &[color="pink"][outline]:not([outline="false"]),
254
- &[color="pink"][link]:not([link="false"]),
255
- &[color="pink"][basic]:not([basic="false"]) {
256
- color: getPink($theme);
257
- }
258
- &[color="pink"]{
259
- background: getPink($theme);
260
- color: getPinkContrast($theme);
261
- }
262
- &[color="pink"] .ripple{background: getPinkContrastAlpha($theme)}
263
-
264
- // purple
265
- &[color="purple"][outline]:not([outline="false"]) .ripple,
266
- &[color="purple"][basic]:not([basic="false"]) .ripple {
267
- background: getPurpleAlpha($theme)
268
- }
269
- &[color="purple"][alpha]:not([alpha="false"]){
270
- background: getPurpleAlpha($theme);
271
- color: getPurple($theme);
272
- }
273
- &[color="purple"][outline]:not([outline="false"]),
274
- &[color="purple"][link]:not([link="false"]),
275
- &[color="purple"][basic]:not([basic="false"]) {
276
- color: getPurple($theme);
277
- }
278
- &[color="purple"]{
279
- background: getPurple($theme);
280
- color: getPurpleContrast($theme);
281
- }
282
- &[color="purple"] .ripple{background: getPurpleContrastAlpha($theme)}
283
-
284
- // deep-purple
285
- &[color="deep-purple"][outline]:not([outline="false"]) .ripple,
286
- &[color="deep-purple"][basic]:not([basic="false"]) .ripple {
287
- background: getDeepPurpleAlpha($theme)
288
- }
289
- &[color="deep-purple"][alpha]:not([alpha="false"]){
290
- background: getDeepPurpleAlpha($theme);
291
- color: getDeepPurple($theme);
292
- }
293
- &[color="deep-purple"][outline]:not([outline="false"]),
294
- &[color="deep-purple"][link]:not([link="false"]),
295
- &[color="deep-purple"][basic]:not([basic="false"]) {
296
- color: getDeepPurple($theme);
297
- }
298
- &[color="deep-purple"]{
299
- background: getDeepPurple($theme);
300
- color: getDeepPurpleContrast($theme);
301
- }
302
- &[color="deep-purple"] .ripple{background: getDeepPurpleContrastAlpha($theme)}
303
-
304
- // indigo
305
- &[color="indigo"][outline]:not([outline="false"]) .ripple,
306
- &[color="indigo"][basic]:not([basic="false"]) .ripple {
307
- background: getIndigoAlpha($theme)
308
- }
309
- &[color="indigo"][alpha]:not([alpha="false"]){
310
- background: getIndigoAlpha($theme);
311
- color: getIndigo($theme);
312
- }
313
- &[color="indigo"][outline]:not([outline="false"]),
314
- &[color="indigo"][link]:not([link="false"]),
315
- &[color="indigo"][basic]:not([basic="false"]) {
316
- color: getIndigo($theme);
317
- }
318
- &[color="indigo"]{
319
- background: getIndigo($theme);
320
- color: getIndigoContrast($theme);
321
- }
322
- &[color="indigo"] .ripple{background: getIndigoContrastAlpha($theme)}
323
-
324
- // blue
325
- &[color="blue"][outline]:not([outline="false"]) .ripple,
326
- &[color="blue"][basic]:not([basic="false"]) .ripple {
327
- background: getBlueAlpha($theme)
328
- }
329
- &[color="blue"][alpha]:not([alpha="false"]){
330
- background: getBlueAlpha($theme);
331
- color: getBlue($theme);
332
- }
333
- &[color="blue"][outline]:not([outline="false"]),
334
- &[color="blue"][link]:not([link="false"]),
335
- &[color="blue"][basic]:not([basic="false"]) {
336
- color: getBlue($theme);
337
- }
338
- &[color="blue"]{
339
- background: getBlue($theme);
340
- color: getBlueContrast($theme);
341
- }
342
- &[color="blue"] .ripple{background: getBlueContrastAlpha($theme)}
343
-
344
- // light-blue
345
- &[color="light-blue"][outline]:not([outline="false"]) .ripple,
346
- &[color="light-blue"][basic]:not([basic="false"]) .ripple {
347
- background: getLightBlueAlpha($theme)
348
- }
349
- &[color="light-blue"][alpha]:not([alpha="false"]){
350
- background: getLightBlueAlpha($theme);
351
- color: getLightBlue($theme);
352
- }
353
- &[color="light-blue"][outline]:not([outline="false"]),
354
- &[color="light-blue"][link]:not([link="false"]),
355
- &[color="light-blue"][basic]:not([basic="false"]) {
356
- color: getLightBlue($theme);
357
- }
358
- &[color="light-blue"]{
359
- background: getLightBlue($theme);
360
- color: getLightBlueContrast($theme);
361
- }
362
- &[color="light-blue"] .ripple{background: getLightBlueContrastAlpha($theme)}
363
-
364
- // cyan
365
- &[color="cyan"][outline]:not([outline="false"]) .ripple,
366
- &[color="cyan"][basic]:not([basic="false"]) .ripple {
367
- background: getCyanAlpha($theme)
368
- }
369
- &[color="cyan"][alpha]:not([alpha="false"]){
370
- background: getCyanAlpha($theme);
371
- color: getCyan($theme);
372
- }
373
- &[color="cyan"][outline]:not([outline="false"]),
374
- &[color="cyan"][link]:not([link="false"]),
375
- &[color="cyan"][basic]:not([basic="false"]) {
376
- color: getCyan($theme);
377
- }
378
- &[color="cyan"]{
379
- background: getCyan($theme);
380
- color: getCyanContrast($theme);
381
- }
382
- &[color="cyan"] .ripple{background: getCyanContrastAlpha($theme)}
383
256
 
384
- // teal
385
- &[color="teal"][outline]:not([outline="false"]) .ripple,
386
- &[color="teal"][basic]:not([basic="false"]) .ripple {
387
- background: getTealAlpha($theme)
388
- }
389
- &[color="teal"][alpha]:not([alpha="false"]){
390
- background: getTealAlpha($theme);
391
- color: getTeal($theme);
392
- }
393
- &[color="teal"][outline]:not([outline="false"]),
394
- &[color="teal"][link]:not([link="false"]),
395
- &[color="teal"][basic]:not([basic="false"]) {
396
- color: getTeal($theme);
397
- }
398
- &[color="teal"]{
399
- background: getTeal($theme);
400
- color: getTealContrast($theme);
401
- }
402
- &[color="teal"] .ripple{background: getTealContrastAlpha($theme)}
403
-
404
- // green
405
- &[color="green"][outline]:not([outline="false"]) .ripple,
406
- &[color="green"][basic]:not([basic="false"]) .ripple {
407
- background: getGreenAlpha($theme)
408
- }
409
- &[color="green"][alpha]:not([alpha="false"]){
410
- background: getGreenAlpha($theme);
411
- color: getGreen($theme);
412
- }
413
- &[color="green"][outline]:not([outline="false"]),
414
- &[color="green"][link]:not([link="false"]),
415
- &[color="green"][basic]:not([basic="false"]) {
416
- color: getGreen($theme);
417
- }
418
- &[color="green"]{
419
- background: getGreen($theme);
420
- color: getGreenContrast($theme);
421
- }
422
- &[color="green"] .ripple{background: getGreenContrastAlpha($theme)}
423
-
424
- // light-green
425
- &[color="light-green"][outline]:not([outline="false"]) .ripple,
426
- &[color="light-green"][basic]:not([basic="false"]) .ripple {
427
- background: getLightGreenAlpha($theme)
428
- }
429
- &[color="light-green"][alpha]:not([alpha="false"]){
430
- background: getLightGreenAlpha($theme);
431
- color: getLightGreen($theme);
432
- }
433
- &[color="light-green"][outline]:not([outline="false"]),
434
- &[color="light-green"][link]:not([link="false"]),
435
- &[color="light-green"][basic]:not([basic="false"]) {
436
- color: getLightGreen($theme);
437
- }
438
- &[color="light-green"]{
439
- background: getLightGreen($theme);
440
- color: getLightGreenContrast($theme);
441
- }
442
- &[color="light-green"] .ripple{background: getLightGreenContrastAlpha($theme)}
443
-
444
- // lime
445
- &[color="lime"][outline]:not([outline="false"]) .ripple,
446
- &[color="lime"][basic]:not([basic="false"]) .ripple {
447
- background: getLimeAlpha($theme)
448
- }
449
- &[color="lime"][alpha]:not([alpha="false"]){
450
- background: getLimeAlpha($theme);
451
- color: getLime($theme);
452
- }
453
- &[color="lime"][outline]:not([outline="false"]),
454
- &[color="lime"][link]:not([link="false"]),
455
- &[color="lime"][basic]:not([basic="false"]) {
456
- color: getLime($theme);
457
- }
458
- &[color="lime"]{
459
- background: getLime($theme);
460
- color: getLimeContrast($theme);
461
- }
462
- &[color="lime"] .ripple{background: getLimeContrastAlpha($theme)}
463
-
464
- // yellow
465
- &[color="yellow"][outline]:not([outline="false"]) .ripple,
466
- &[color="yellow"][basic]:not([basic="false"]) .ripple {
467
- background: getYellowAlpha($theme)
468
- }
469
- &[color="yellow"][alpha]:not([alpha="false"]){
470
- background: getYellowAlpha($theme);
471
- color: getYellow($theme);
472
- }
473
- &[color="yellow"][outline]:not([outline="false"]),
474
- &[color="yellow"][link]:not([link="false"]),
475
- &[color="yellow"][basic]:not([basic="false"]) {
476
- color: getYellow($theme);
477
- }
478
- &[color="yellow"]{
479
- background: getYellow($theme);
480
- color: getYellowContrast($theme);
481
- }
482
- &[color="yellow"] .ripple{background: getYellowContrastAlpha($theme)}
483
-
484
- // amber
485
- &[color="amber"][outline]:not([outline="false"]) .ripple,
486
- &[color="amber"][basic]:not([basic="false"]) .ripple {
487
- background: getAmberAlpha($theme)
488
- }
489
- &[color="amber"][alpha]:not([alpha="false"]){
490
- background: getAmberAlpha($theme);
491
- color: getAmber($theme);
492
- }
493
- &[color="amber"][outline]:not([outline="false"]),
494
- &[color="amber"][link]:not([link="false"]),
495
- &[color="amber"][basic]:not([basic="false"]) {
496
- color: getAmber($theme);
497
- }
498
- &[color="amber"]{
499
- background: getAmber($theme);
500
- color: getAmberContrast($theme);
501
- }
502
- &[color="amber"] .ripple{background: getAmberContrastAlpha($theme)}
503
-
504
- // orange
505
- &[color="orange"][outline]:not([outline="false"]) .ripple,
506
- &[color="orange"][basic]:not([basic="false"]) .ripple {
507
- background: getOrangeAlpha($theme)
508
- }
509
- &[color="orange"][alpha]:not([alpha="false"]){
510
- background: getOrangeAlpha($theme);
511
- color: getOrange($theme);
512
- }
513
- &[color="orange"][outline]:not([outline="false"]),
514
- &[color="orange"][link]:not([link="false"]),
515
- &[color="orange"][basic]:not([basic="false"]) {
516
- color: getOrange($theme);
517
- }
518
- &[color="orange"]{
519
- background: getOrange($theme);
520
- color: getOrangeContrast($theme);
521
- }
522
- &[color="orange"] .ripple{background: getOrangeContrastAlpha($theme)}
523
-
524
- // deep-orange
525
- &[color="deep-orange"][outline]:not([outline="false"]) .ripple,
526
- &[color="deep-orange"][basic]:not([basic="false"]) .ripple {
527
- background: getDeepOrangeAlpha($theme)
528
- }
529
- &[color="deep-orange"][alpha]:not([alpha="false"]){
530
- background: getDeepOrangeAlpha($theme);
531
- color: getDeepOrange($theme);
532
- }
533
- &[color="deep-orange"][outline]:not([outline="false"]),
534
- &[color="deep-orange"][link]:not([link="false"]),
535
- &[color="deep-orange"][basic]:not([basic="false"]) {
536
- color: getDeepOrange($theme);
537
- }
538
- &[color="deep-orange"]{
539
- background: getDeepOrange($theme);
540
- color: getDeepOrangeContrast($theme);
541
- }
542
- &[color="deep-orange"] .ripple{background: getDeepOrangeContrastAlpha($theme)}
543
-
544
- // brown
545
- &[color="brown"][outline]:not([outline="false"]) .ripple,
546
- &[color="brown"][basic]:not([basic="false"]) .ripple {
547
- background: getBrownAlpha($theme)
548
- }
549
- &[color="brown"][alpha]:not([alpha="false"]){
550
- background: getBrownAlpha($theme);
551
- color: getBrown($theme);
552
- }
553
- &[color="brown"][outline]:not([outline="false"]),
554
- &[color="brown"][link]:not([link="false"]),
555
- &[color="brown"][basic]:not([basic="false"]) {
556
- color: getBrown($theme);
557
- }
558
- &[color="brown"]{
559
- background: getBrown($theme);
560
- color: getBrownContrast($theme);
561
- }
562
- &[color="brown"] .ripple{background: getBrownContrastAlpha($theme)}
563
-
564
- // grey
565
- &[color="grey"][outline]:not([outline="false"]) .ripple,
566
- &[color="grey"][basic]:not([basic="false"]) .ripple {
567
- background: getGreyAlpha($theme)
568
- }
569
- &[color="grey"][alpha]:not([alpha="false"]){
570
- background: getGreyAlpha($theme);
571
- color: getGrey($theme);
572
- }
573
- &[color="grey"][outline]:not([outline="false"]),
574
- &[color="grey"][link]:not([link="false"]),
575
- &[color="grey"][basic]:not([basic="false"]) {
576
- color: getGrey($theme);
577
- }
578
- &[color="grey"]{
579
- background: getGrey($theme);
580
- color: getGreyContrast($theme);
581
- }
582
- &[color="grey"] .ripple{background: getGreyContrastAlpha($theme)}
583
-
584
- // blue-grey
585
- &[color="blue-grey"][outline]:not([outline="false"]) .ripple,
586
- &[color="blue-grey"][basic]:not([basic="false"]) .ripple {
587
- background: getBlueGreyAlpha($theme)
588
- }
589
- &[color="blue-grey"][alpha]:not([alpha="false"]){
590
- background: getBlueGreyAlpha($theme);
591
- color: getBlueGrey($theme);
592
- }
593
- &[color="blue-grey"][outline]:not([outline="false"]),
594
- &[color="blue-grey"][link]:not([link="false"]),
595
- &[color="blue-grey"][basic]:not([basic="false"]) {
596
- color: getBlueGrey($theme);
597
- }
598
- &[color="blue-grey"]{
599
- background: getBlueGrey($theme);
600
- color: getBlueGreyContrast($theme);
601
- }
602
- &[color="blue-grey"] .ripple{background: getBlueGreyContrastAlpha($theme)}
603
-
604
- // primary
605
- &[color="primary"][outline]:not([outline="false"]) .ripple,
606
- &[color="primary"][basic]:not([basic="false"]) .ripple {
607
- background: getPrimaryAlpha($theme)
608
- }
609
- &[color="primary"][alpha]:not([alpha="false"]){
610
- background: getPrimaryAlpha($theme);
611
- color: getPrimary($theme);
612
- }
613
- &[color="primary"][outline]:not([outline="false"]),
614
- &[color="primary"][link]:not([link="false"]),
615
- &[color="primary"][basic]:not([basic="false"]) {
616
- color: getPrimary($theme);
617
- }
618
- &[color="primary"]{
619
- background: getPrimary($theme);
620
- color: getPrimaryContrast($theme);
621
- }
622
- &[color="primary"] .ripple{background: getPrimaryContrastAlpha($theme)}
623
-
624
- // accent
625
- &[color="accent"][outline]:not([outline="false"]) .ripple,
626
- &[color="accent"][basic]:not([basic="false"]) .ripple {
627
- background: getAccentAlpha($theme)
628
- }
629
- &[color="accent"][alpha]:not([alpha="false"]){
630
- background: getAccentAlpha($theme);
631
- color: getAccent($theme);
632
- }
633
- &[color="accent"][outline]:not([outline="false"]),
634
- &[color="accent"][link]:not([link="false"]),
635
- &[color="accent"][basic]:not([basic="false"]) {
636
- color: getAccent($theme);
637
- }
638
- &[color="accent"]{
639
- background: getAccent($theme);
640
- color: getAccentContrast($theme);
641
- }
642
- &[color="accent"] .ripple{background: getAccentContrastAlpha($theme)}
643
-
644
- // warn
645
- &[color="warn"][outline]:not([outline="false"]) .ripple,
646
- &[color="warn"][basic]:not([basic="false"]) .ripple {
647
- background: getWarnAlpha($theme)
648
- }
649
- &[color="warn"][alpha]:not([alpha="false"]){
650
- background: getWarnAlpha($theme);
651
- color: getWarn($theme);
652
- }
653
- &[color="warn"][outline]:not([outline="false"]),
654
- &[color="warn"][link]:not([link="false"]),
655
- &[color="warn"][basic]:not([basic="false"]) {
656
- color: getWarn($theme);
657
- }
658
- &[color="warn"]{
659
- background: getWarn($theme);
660
- color: getWarnContrast($theme);
661
- }
662
- &[color="warn"] .ripple{background: getWarnContrastAlpha($theme)}
663
-
664
- // Disabled
665
- &[color="disabled"][outline]:not([outline="false"]) .ripple,
666
- &[color="disabled"][basic]:not([basic="false"]) .ripple {
667
- background: getDisabledAlpha($theme);
668
- }
669
- &[color="disabled"][alpha]:not([alpha="false"]){
670
- background: getDisabledAlpha($theme);
671
- color: getDisabled($theme);
672
- }
673
- &[color="disabled"][outline]:not([outline="false"]),
674
- &[color="disabled"][link]:not([link="false"]),
675
- &[color="disabled"][basic]:not([basic="false"]) {
676
- color: getDisabled($theme);
677
- }
678
- &[color="disabled"]{
679
- background: getDisabled($theme);
680
- color: getDisabledBgContrast($theme);
257
+ @each $colorName, $colorFn in $color-functions {
258
+ &[color="#{$colorName}"][outline]:not([outline="false"]) .ripple,
259
+ &[color="#{$colorName}"][basic]:not([basic="false"]) .ripple {
260
+ background: call(#{$colorFn}Alpha, $theme)
261
+ }
262
+ &[color="#{$colorName}"][alpha]:not([alpha="false"]){
263
+ background: call(#{$colorFn}Alpha, $theme);
264
+ color: call(#{$colorFn}, $theme);
265
+ }
266
+ &[color="#{$colorName}"][outline]:not([outline="false"]),
267
+ &[color="#{$colorName}"][link]:not([link="false"]),
268
+ &[color="#{$colorName}"][basic]:not([basic="false"]) {
269
+ color: call(#{$colorFn}, $theme);
270
+ }
271
+ &[color="#{$colorName}"]{
272
+ background: call(#{$colorFn}, $theme);
273
+ color: call(#{$colorFn}Contrast, $theme);
274
+ }
275
+ &[color="#{$colorName}"] .ripple{background: call(#{$colorFn}ContrastAlpha, $theme)}
276
+
277
+ &[disabled],
278
+ &[disabled]:not([disabled="false"]),
279
+ &[disabled="true"] {
280
+ &[solid],
281
+ &[solid]:not([solid="false"]),
282
+ &[solid="true"]{
283
+ @include _disabled-solid-button($theme);
284
+ }
285
+ &[outline],
286
+ &[outline]:not([outline="false"]),
287
+ &[outline="true"]{
288
+ @include _disabled-outline-button($theme);
289
+ }
290
+ &[basic],
291
+ &[basic]:not([basic="false"]),
292
+ &[basic="true"]{
293
+ @include _disabled-basic-button($theme);
294
+ }
295
+ &[alpha],
296
+ &[alpha]:not([alpha="false"]),
297
+ &[alpha="true"]{
298
+ @include _disabled-alpha-button($theme);
299
+ }
300
+ &[link],
301
+ &[link]:not([link="false"]),
302
+ &[link="true"]{
303
+ @include _disabled-link-button($theme);
304
+ }
305
+ }
681
306
  }
682
- &[color="disabled"] .ripple{background: getDisabledContrastAlpha($theme)}
683
-
684
307
  }
685
308
 
686
309
  button[matcha-button],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "19.54.0",
3
+ "version": "19.55.0",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {