matcha-theme 18.1.30 → 18.1.31

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 (2) hide show
  1. package/abstracts/_colors.scss +210 -421
  2. package/package.json +1 -1
package/abstracts/_colors.scss CHANGED
@@ -247,427 +247,216 @@ $index: 0;
247
247
  }
248
248
  }
249
249
 
250
- @if ($is-dark) {
251
- .red.matcha-button-outline .ripple, .background-red-alpha {background: rgba(map-get($red, 100), 0.2)}
252
- .red .ripple{background: rgba(map-get($red-contrast, 100), 0.2)}
253
- .background-red{background: map-get($red, 100)}
254
- .border-color-red{border-color: map-get($red, 100)}
255
- .red.matcha-button-outline, .color-red{color: map-get($red, 100)}
256
- .fill-red{fill: map-get($red, 100)}
257
- .stroke-red{stroke: map-get($red, 100)}
258
- .red{
259
- background: map-get($red, 100);
260
- color: map-get($red-contrast, 100);
261
- }
262
- .pink.matcha-button-outline .ripple, .background-pink-alpha {background: rgba(map-get($pink, 100), 0.2)}
263
- .pink .ripple{background: rgba(map-get($pink-contrast, 100), 0.2)}
264
- .background-pink{background: map-get($pink, 100)}
265
- .border-color-pink{border-color: map-get($pink, 100)}
266
- .pink.matcha-button-outline, .color-pink{color: map-get($pink, 100)}
267
- .fill-pink{fill: map-get($pink, 100)}
268
- .stroke-pink{stroke: map-get($pink, 100)}
269
- .pink{
270
- background: map-get($pink, 100);
271
- color: map-get($pink-contrast, 100);
272
- }
273
- .purple.matcha-button-outline .ripple, .background-purple-alpha {background: rgba(map-get($purple, 100), 0.2)}
274
- .purple .ripple{background: rgba(map-get($purple-contrast, 100), 0.2)}
275
- .background-purple{background: map-get($purple, 100)}
276
- .border-color-purple{border-color: map-get($purple, 100)}
277
- .purple.matcha-button-outline, .color-purple{color: map-get($purple, 100)}
278
- .fill-purple{fill: map-get($purple, 100)}
279
- .stroke-purple{stroke: map-get($purple, 100)}
280
- .purple{
281
- background: map-get($purple, 100);
282
- color: map-get($purple-contrast, 100);
283
- }
284
- .deep-purple.matcha-button-outline .ripple, .background-deep-purple-alpha {background: rgba(map-get($deep-purple, 100), 0.2)}
285
- .deep-purple .ripple{background: rgba(map-get($deep-purple-contrast, 100), 0.2)}
286
- .background-deep-purple{background: map-get($deep-purple, 100)}
287
- .border-color-deep-purple{border-color: map-get($deep-purple, 100)}
288
- .deep-purple.matcha-button-outline, .color-deep-purple{color: map-get($deep-purple, 100)}
289
- .fill-deep-purple{fill: map-get($deep-purple, 100)}
290
- .stroke-deep-purple{stroke: map-get($deep-purple, 100)}
291
- .deep-purple{
292
- background: map-get($deep-purple, 100);
293
- color: map-get($deep-purple-contrast, 100);
294
- }
295
- .indigo.matcha-button-outline .ripple, .background-indigo-alpha {background: rgba(map-get($indigo, 100), 0.2)}
296
- .indigo .ripple{background: rgba(map-get($indigo-contrast, 100), 0.2)}
297
- .background-indigo{background: map-get($indigo, 100)}
298
- .border-color-indigo{border-color: map-get($indigo, 100)}
299
- .indigo.matcha-button-outline, .color-indigo{color: map-get($indigo, 100)}
300
- .fill-indigo{fill: map-get($indigo, 100)}
301
- .stroke-indigo{stroke: map-get($indigo, 100)}
302
- .indigo{
303
- background: map-get($indigo, 100);
304
- color: map-get($indigo-contrast, 100);
305
- }
306
- .blue.matcha-button-outline .ripple, .background-blue-alpha {background: rgba(map-get($blue, 100), 0.2)}
307
- .blue .ripple{background: rgba(map-get($blue-contrast, 100), 0.2)}
308
- .background-blue{background: map-get($blue, 100)}
309
- .border-color-blue{border-color: map-get($blue, 100)}
310
- .blue.matcha-button-outline, .color-blue{color: map-get($blue, 100)}
311
- .fill-blue{fill: map-get($blue, 100)}
312
- .stroke-blue{stroke: map-get($blue, 100)}
313
- .blue{
314
- background: map-get($blue, 100);
315
- color: map-get($blue-contrast, 100);
316
- }
317
- .light-blue.matcha-button-outline .ripple, .background-light-blue-alpha {background: rgba(map-get($light-blue, 100), 0.2)}
318
- .light-blue .ripple{background: rgba(map-get($light-blue-contrast, 100), 0.2)}
319
- .background-light-blue{background: map-get($light-blue, 100)}
320
- .border-color-light-blue{border-color: map-get($light-blue, 100)}
321
- .light-blue.matcha-button-outline, .color-light-blue{color: map-get($light-blue, 100)}
322
- .fill-light-blue{fill: map-get($light-blue, 100)}
323
- .stroke-light-blue{stroke: map-get($light-blue, 100)}
324
- .light-blue{
325
- background: map-get($light-blue, 100);
326
- color: map-get($light-blue-contrast, 100);
327
- }
328
- .cyan.matcha-button-outline .ripple, .background-cyan-alpha {background: rgba(map-get($cyan, 100), 0.2)}
329
- .cyan .ripple{background: rgba(map-get($cyan-contrast, 100), 0.2)}
330
- .background-cyan{background: map-get($cyan, 100)}
331
- .border-color-cyan{border-color: map-get($cyan, 100)}
332
- .cyan.matcha-button-outline, .color-cyan{color: map-get($cyan, 100)}
333
- .fill-cyan{fill: map-get($cyan, 100)}
334
- .stroke-cyan{stroke: map-get($cyan, 100)}
335
- .cyan{
336
- background: map-get($cyan, 100);
337
- color: map-get($cyan-contrast, 100);
338
- }
339
- .teal.matcha-button-outline .ripple, .background-teal-alpha {background: rgba(map-get($teal, 100), 0.2)}
340
- .teal .ripple{background: rgba(map-get($teal-contrast, 100), 0.2)}
341
- .background-teal{background: map-get($teal, 100)}
342
- .border-color-teal{border-color: map-get($teal, 100)}
343
- .teal.matcha-button-outline, .color-teal{color: map-get($teal, 100)}
344
- .fill-teal{fill: map-get($teal, 100)}
345
- .stroke-teal{stroke: map-get($teal, 100)}
346
- .teal{
347
- background: map-get($teal, 100);
348
- color: map-get($teal-contrast, 100);
349
- }
350
- .green.matcha-button-outline .ripple, .background-green-alpha {background: rgba(map-get($green, 100), 0.2)}
351
- .green .ripple{background: rgba(map-get($green-contrast, 100), 0.2)}
352
- .background-green{background: map-get($green, 100)}
353
- .border-color-green{border-color: map-get($green, 100)}
354
- .green.matcha-button-outline, .color-green{color: map-get($green, 100)}
355
- .fill-green{fill: map-get($green, 100)}
356
- .stroke-green{stroke: map-get($green, 100)}
357
- .green{
358
- background: map-get($green, 100);
359
- color: map-get($green-contrast, 100);
360
- }
361
- .light-green.matcha-button-outline .ripple, .background-light-green-alpha {background: rgba(map-get($light-green, 100), 0.2)}
362
- .light-green .ripple{background: rgba(map-get($light-green-contrast, 100), 0.2)}
363
- .background-light-green{background: map-get($light-green, 100)}
364
- .border-color-light-green{border-color: map-get($light-green, 100)}
365
- .light-green.matcha-button-outline, .color-light-green{color: map-get($light-green, 100)}
366
- .fill-light-green{fill: map-get($light-green, 100)}
367
- .stroke-light-green{stroke: map-get($light-green, 100)}
368
- .light-green{
369
- background: map-get($light-green, 100);
370
- color: map-get($light-green-contrast, 100);
371
- }
372
- .lime.matcha-button-outline .ripple, .background-lime-alpha {background: rgba(map-get($lime, 100), 0.2)}
373
- .lime .ripple{background: rgba(map-get($lime-contrast, 100), 0.2)}
374
- .background-lime{background: map-get($lime, 100)}
375
- .border-color-lime{border-color: map-get($lime, 100)}
376
- .lime.matcha-button-outline, .color-lime{color: map-get($lime, 100)}
377
- .fill-lime{fill: map-get($lime, 100)}
378
- .stroke-lime{stroke: map-get($lime, 100)}
379
- .lime{
380
- background: map-get($lime, 100);
381
- color: map-get($lime-contrast, 100);
382
- }
383
- .yellow.matcha-button-outline .ripple, .background-yellow-alpha {background: rgba(map-get($yellow, 100), 0.2)}
384
- .yellow .ripple{background: rgba(map-get($yellow-contrast, 100), 0.2)}
385
- .background-yellow{background: map-get($yellow, 100)}
386
- .border-color-yellow{border-color: map-get($yellow, 100)}
387
- .yellow.matcha-button-outline, .color-yellow{color: map-get($yellow, 100)}
388
- .fill-yellow{fill: map-get($yellow, 100)}
389
- .stroke-yellow{stroke: map-get($yellow, 100)}
390
- .yellow{
391
- background: map-get($yellow, 100);
392
- color: map-get($yellow-contrast, 100);
393
- }
394
- .amber.matcha-button-outline .ripple, .background-amber-alpha {background: rgba(map-get($amber, 100), 0.2)}
395
- .amber .ripple{background: rgba(map-get($amber-contrast, 100), 0.2)}
396
- .background-amber{background: map-get($amber, 100)}
397
- .border-color-amber{border-color: map-get($amber, 100)}
398
- .amber.matcha-button-outline, .color-amber{color: map-get($amber, 100)}
399
- .fill-amber{fill: map-get($amber, 100)}
400
- .stroke-amber{stroke: map-get($amber, 100)}
401
- .amber{
402
- background: map-get($amber, 100);
403
- color: map-get($amber-contrast, 100);
404
- }
405
- .orange.matcha-button-outline .ripple, .background-orange-alpha {background: rgba(map-get($orange, 100), 0.2)}
406
- .orange .ripple{background: rgba(map-get($orange-contrast, 100), 0.2)}
407
- .background-orange{background: map-get($orange, 100)}
408
- .border-color-orange{border-color: map-get($orange, 100)}
409
- .orange.matcha-button-outline, .color-orange{color: map-get($orange, 100)}
410
- .fill-orange{fill: map-get($orange, 100)}
411
- .stroke-orange{stroke: map-get($orange, 100)}
412
- .orange{
413
- background: map-get($orange, 100);
414
- color: map-get($orange-contrast, 100);
415
- }
416
- .deep-orange.matcha-button-outline .ripple, .background-deep-orange-alpha {background: rgba(map-get($deep-orange, 100), 0.2)}
417
- .deep-orange .ripple{background: rgba(map-get($deep-orange-contrast, 100), 0.2)}
418
- .background-deep-orange{background: map-get($deep-orange, 100)}
419
- .border-color-deep-orange{border-color: map-get($deep-orange, 100)}
420
- .deep-orange.matcha-button-outline, .color-deep-orange{color: map-get($deep-orange, 100)}
421
- .fill-deep-orange{fill: map-get($deep-orange, 100)}
422
- .stroke-deep-orange{stroke: map-get($deep-orange, 100)}
423
- .deep-orange{
424
- background: map-get($deep-orange, 100);
425
- color: map-get($deep-orange-contrast, 100);
426
- }
427
- .brown.matcha-button-outline .ripple, .background-brown-alpha {background: rgba(map-get($brown, 100), 0.2)}
428
- .brown .ripple{background: rgba(map-get($brown-contrast, 100), 0.2)}
429
- .background-brown{background: map-get($brown, 100)}
430
- .border-color-brown{border-color: map-get($brown, 100)}
431
- .brown.matcha-button-outline, .color-brown{color: map-get($brown, 100)}
432
- .fill-brown{fill: map-get($brown, 100)}
433
- .stroke-brown{stroke: map-get($brown, 100)}
434
- .brown{
435
- background: map-get($brown, 100);
436
- color: map-get($brown-contrast, 100);
437
- }
438
- .grey.matcha-button-outline .ripple, .background-grey-alpha {background: rgba(map-get($grey, 100), 0.2)}
439
- .grey .ripple{background: rgba(map-get($grey-contrast, 100), 0.2)}
440
- .background-grey{background: map-get($grey, 100)}
441
- .border-color-grey{border-color: map-get($grey, 100)}
442
- .grey.matcha-button-outline, .color-grey{color: map-get($grey, 100)}
443
- .fill-grey{fill: map-get($grey, 100)}
444
- .stroke-grey{stroke: map-get($grey, 100)}
445
- .grey{
446
- background: map-get($grey, 100);
447
- color: map-get($grey-contrast, 100);
448
- }
449
- .blue-grey.matcha-button-outline .ripple, .background-blue-grey-alpha {background: rgba(map-get($blue-grey, 100), 0.2)}
450
- .blue-grey .ripple{background: rgba(map-get($blue-grey-contrast, 100), 0.2)}
451
- .background-blue-grey{background: map-get($blue-grey, 100)}
452
- .border-color-blue-grey{border-color: map-get($blue-grey, 100)}
453
- .blue-grey.matcha-button-outline, .color-blue-grey{color: map-get($blue-grey, 100)}
454
- .fill-blue-grey{fill: map-get($blue-grey, 100)}
455
- .stroke-blue-grey{stroke: map-get($blue-grey, 100)}
456
- .blue-grey{
457
- background: map-get($blue-grey, 100);
458
- color: map-get($blue-grey-contrast, 100);
459
- }
460
- } @else {
461
- .red.matcha-button-outline .ripple, .background-red-alpha {background: rgba(map-get($red, 500), 0.2)}
462
- .red .ripple{background: rgba(map-get($red-contrast, 500), 0.2)}
463
- .background-red{background: map-get($red, 500)}
464
- .border-color-red{border-color: map-get($red, 500)}
465
- .red.matcha-button-outline, .color-red{color: map-get($red, 500)}
466
- .fill-red{fill: map-get($red, 500)}
467
- .stroke-red{stroke: map-get($red, 500)}
468
- .red{
469
- background: map-get($red, 500);
470
- color: map-get($red-contrast, 500);
471
- }
472
-
473
- .pink.matcha-button-outline .ripple, .background-pink-alpha {background: rgba(map-get($pink, 500), 0.2)}
474
- .pink .ripple{background: rgba(map-get($pink-contrast, 500), 0.2)}
475
- .background-pink{background: map-get($pink, 500)}
476
- .border-color-pink{border-color: map-get($pink, 500)}
477
- .pink.matcha-button-outline, .color-pink{color: map-get($pink, 500)}
478
- .fill-pink{fill: map-get($pink, 500)}
479
- .stroke-pink{stroke: map-get($pink, 500)}
480
- .pink{
481
- background: map-get($pink, 500);
482
- color: map-get($pink-contrast, 500);
483
- }
484
- .purple.matcha-button-outline .ripple, .background-purple-alpha {background: rgba(map-get($purple, 500), 0.2)}
485
- .purple .ripple{background: rgba(map-get($purple-contrast, 500), 0.2)}
486
- .background-purple{background: map-get($purple, 500)}
487
- .border-color-purple{border-color: map-get($purple, 500)}
488
- .purple.matcha-button-outline, .color-purple{color: map-get($purple, 500)}
489
- .fill-purple{fill: map-get($purple, 500)}
490
- .stroke-purple{stroke: map-get($purple, 500)}
491
- .purple{
492
- background: map-get($purple, 500);
493
- color: map-get($purple-contrast, 500);
494
- }
495
- .deep-purple.matcha-button-outline .ripple, .background-deep-purple-alpha {background: rgba(map-get($deep-purple, 500), 0.2)}
496
- .deep-purple .ripple{background: rgba(map-get($deep-purple-contrast, 500), 0.2)}
497
- .background-deep-purple{background: map-get($deep-purple, 500)}
498
- .border-color-deep-purple{border-color: map-get($deep-purple, 500)}
499
- .deep-purple.matcha-button-outline, .color-deep-purple{color: map-get($deep-purple, 500)}
500
- .fill-deep-purple{fill: map-get($deep-purple, 500)}
501
- .stroke-deep-purple{stroke: map-get($deep-purple, 500)}
502
- .deep-purple{
503
- background: map-get($deep-purple, 500);
504
- color: map-get($deep-purple-contrast, 500);
505
- }
506
- .indigo.matcha-button-outline .ripple, .background-indigo-alpha {background: rgba(map-get($indigo, 500), 0.2)}
507
- .indigo .ripple{background: rgba(map-get($indigo-contrast, 500), 0.2)}
508
- .background-indigo{background: map-get($indigo, 500)}
509
- .border-color-indigo{border-color: map-get($indigo, 500)}
510
- .indigo.matcha-button-outline, .color-indigo{color: map-get($indigo, 500)}
511
- .fill-indigo{fill: map-get($indigo, 500)}
512
- .stroke-indigo{stroke: map-get($indigo, 500)}
513
- .indigo{
514
- background: map-get($indigo, 500);
515
- color: map-get($indigo-contrast, 500);
516
- }
517
- .blue.matcha-button-outline .ripple, .background-blue-alpha {background: rgba(map-get($blue, 500), 0.2)}
518
- .blue .ripple{background: rgba(map-get($blue-contrast, 500), 0.2)}
519
- .background-blue{background: map-get($blue, 500)}
520
- .border-color-blue{border-color: map-get($blue, 500)}
521
- .blue.matcha-button-outline, .color-blue{color: map-get($blue, 500)}
522
- .fill-blue{fill: map-get($blue, 500)}
523
- .stroke-blue{stroke: map-get($blue, 500)}
524
- .blue{
525
- background: map-get($blue, 500);
526
- color: map-get($blue-contrast, 500);
527
- }
528
- .light-blue.matcha-button-outline .ripple, .background-light-blue-alpha {background: rgba(map-get($light-blue, 500), 0.2)}
529
- .light-blue .ripple{background: rgba(map-get($light-blue-contrast, 500), 0.2)}
530
- .background-light-blue{background: map-get($light-blue, 500)}
531
- .border-color-light-blue{border-color: map-get($light-blue, 500)}
532
- .light-blue.matcha-button-outline, .color-light-blue{color: map-get($light-blue, 500)}
533
- .fill-light-blue{fill: map-get($light-blue, 500)}
534
- .stroke-light-blue{stroke: map-get($light-blue, 500)}
535
- .light-blue{
536
- background: map-get($light-blue, 500);
537
- color: map-get($light-blue-contrast, 500);
538
- }
539
- .cyan.matcha-button-outline .ripple, .background-cyan-alpha {background: rgba(map-get($cyan, 500), 0.2)}
540
- .cyan .ripple{background: rgba(map-get($cyan-contrast, 500), 0.2)}
541
- .background-cyan{background: map-get($cyan, 500)}
542
- .border-color-cyan{border-color: map-get($cyan, 500)}
543
- .cyan.matcha-button-outline, .color-cyan{color: map-get($cyan, 500)}
544
- .fill-cyan{fill: map-get($cyan, 500)}
545
- .stroke-cyan{stroke: map-get($cyan, 500)}
546
- .cyan{
547
- background: map-get($cyan, 500);
548
- color: map-get($cyan-contrast, 500);
549
- }
550
- .teal.matcha-button-outline .ripple, .background-teal-alpha {background: rgba(map-get($teal, 500), 0.2)}
551
- .teal .ripple{background: rgba(map-get($teal-contrast, 500), 0.2)}
552
- .background-teal{background: map-get($teal, 500)}
553
- .border-color-teal{border-color: map-get($teal, 500)}
554
- .teal.matcha-button-outline, .color-teal{color: map-get($teal, 500)}
555
- .fill-teal{fill: map-get($teal, 500)}
556
- .stroke-teal{stroke: map-get($teal, 500)}
557
- .teal{
558
- background: map-get($teal, 500);
559
- color: map-get($teal-contrast, 500);
560
- }
561
- .green.matcha-button-outline .ripple, .background-green-alpha {background: rgba(map-get($green, 500), 0.2)}
562
- .green .ripple{background: rgba(map-get($green-contrast, 500), 0.2)}
563
- .background-green{background: map-get($green, 500)}
564
- .border-color-green{border-color: map-get($green, 500)}
565
- .green.matcha-button-outline, .color-green{color: map-get($green, 500)}
566
- .fill-green{fill: map-get($green, 500)}
567
- .stroke-green{stroke: map-get($green, 500)}
568
- .green{
569
- background: map-get($green, 500);
570
- color: map-get($green-contrast, 500);
571
- }
572
- .light-green.matcha-button-outline .ripple, .background-light-green-alpha {background: rgba(map-get($light-green, 500), 0.2)}
573
- .light-green .ripple{background: rgba(map-get($light-green-contrast, 500), 0.2)}
574
- .background-light-green{background: map-get($light-green, 500)}
575
- .border-color-light-green{border-color: map-get($light-green, 500)}
576
- .light-green.matcha-button-outline, .color-light-green{color: map-get($light-green, 500)}
577
- .fill-light-green{fill: map-get($light-green, 500)}
578
- .stroke-light-green{stroke: map-get($light-green, 500)}
579
- .light-green{
580
- background: map-get($light-green, 500);
581
- color: map-get($light-green-contrast, 500);
582
- }
583
- .lime.matcha-button-outline .ripple, .background-lime-alpha {background: rgba(map-get($lime, 500), 0.2)}
584
- .lime .ripple{background: rgba(map-get($lime-contrast, 500), 0.2)}
585
- .background-lime{background: map-get($lime, 500)}
586
- .border-color-lime{border-color: map-get($lime, 500)}
587
- .lime.matcha-button-outline, .color-lime{color: map-get($lime, 500)}
588
- .fill-lime{fill: map-get($lime, 500)}
589
- .stroke-lime{stroke: map-get($lime, 500)}
590
- .lime{
591
- background: map-get($lime, 500);
592
- color: map-get($lime-contrast, 500);
593
- }
594
- .yellow.matcha-button-outline .ripple, .background-yellow-alpha {background: rgba(map-get($yellow, 500), 0.2)}
595
- .yellow .ripple{background: rgba(map-get($yellow-contrast, 500), 0.2)}
596
- .background-yellow{background: map-get($yellow, 500)}
597
- .border-color-yellow{border-color: map-get($yellow, 500)}
598
- .yellow.matcha-button-outline, .color-yellow{color: map-get($yellow, 500)}
599
- .fill-yellow{fill: map-get($yellow, 500)}
600
- .stroke-yellow{stroke: map-get($yellow, 500)}
601
- .yellow{
602
- background: map-get($yellow, 500);
603
- color: map-get($yellow-contrast, 500);
604
- }
605
- .amber.matcha-button-outline .ripple, .background-amber-alpha {background: rgba(map-get($amber, 500), 0.2)}
606
- .amber .ripple{background: rgba(map-get($amber-contrast, 500), 0.2)}
607
- .background-amber{background: map-get($amber, 500)}
608
- .border-color-amber{border-color: map-get($amber, 500)}
609
- .amber.matcha-button-outline, .color-amber{color: map-get($amber, 500)}
610
- .fill-amber{fill: map-get($amber, 500)}
611
- .stroke-amber{stroke: map-get($amber, 500)}
612
- .amber{
613
- background: map-get($amber, 500);
614
- color: map-get($amber-contrast, 500);
615
- }
616
- .orange.matcha-button-outline .ripple, .background-orange-alpha {background: rgba(map-get($orange, 500), 0.2)}
617
- .orange .ripple{background: rgba(map-get($orange-contrast, 500), 0.2)}
618
- .background-orange{background: map-get($orange, 500)}
619
- .border-color-orange{border-color: map-get($orange, 500)}
620
- .orange.matcha-button-outline, .color-orange{color: map-get($orange, 500)}
621
- .fill-orange{fill: map-get($orange, 500)}
622
- .stroke-orange{stroke: map-get($orange, 500)}
623
- .orange{
624
- background: map-get($orange, 500);
625
- color: map-get($orange-contrast, 500);
626
- }
627
- .deep-orange.matcha-button-outline .ripple, .background-deep-orange-alpha {background: rgba(map-get($deep-orange, 500), 0.2)}
628
- .deep-orange .ripple{background: rgba(map-get($deep-orange-contrast, 500), 0.2)}
629
- .background-deep-orange{background: map-get($deep-orange, 500)}
630
- .border-color-deep-orange{border-color: map-get($deep-orange, 500)}
631
- .deep-orange.matcha-button-outline, .color-deep-orange{color: map-get($deep-orange, 500)}
632
- .fill-deep-orange{fill: map-get($deep-orange, 500)}
633
- .stroke-deep-orange{stroke: map-get($deep-orange, 500)}
634
- .deep-orange{
635
- background: map-get($deep-orange, 500);
636
- color: map-get($deep-orange-contrast, 500);
637
- }
638
- .brown.matcha-button-outline .ripple, .background-brown-alpha {background: rgba(map-get($brown, 500), 0.2)}
639
- .brown .ripple{background: rgba(map-get($brown-contrast, 500), 0.2)}
640
- .background-brown{background: map-get($brown, 500)}
641
- .border-color-brown{border-color: map-get($brown, 500)}
642
- .brown.matcha-button-outline, .color-brown{color: map-get($brown, 500)}
643
- .fill-brown{fill: map-get($brown, 500)}
644
- .stroke-brown{stroke: map-get($brown, 500)}
645
- .brown{
646
- background: map-get($brown, 500);
647
- color: map-get($brown-contrast, 500);
648
- }
649
- .grey.matcha-button-outline .ripple, .background-grey-alpha {background: rgba(map-get($grey, 500), 0.2)}
650
- .grey .ripple{background: rgba(map-get($grey-contrast, 500), 0.2)}
651
- .background-grey{background: map-get($grey, 500)}
652
- .border-color-grey{border-color: map-get($grey, 500)}
653
- .grey.matcha-button-outline, .color-grey{color: map-get($grey, 500)}
654
- .fill-grey{fill: map-get($grey, 500)}
655
- .stroke-grey{stroke: map-get($grey, 500)}
656
- .grey{
657
- background: map-get($grey, 500);
658
- color: map-get($grey-contrast, 500);
659
- }
660
- .blue-grey.matcha-button-outline .ripple, .background-blue-grey-alpha {background: rgba(map-get($blue-grey, 500), 0.2)}
661
- .blue-grey .ripple{background: rgba(map-get($blue-grey-contrast, 500), 0.2)}
662
- .background-blue-grey{background: map-get($blue-grey, 500)}
663
- .border-color-blue-grey{border-color: map-get($blue-grey, 500)}
664
- .blue-grey.matcha-button-outline, .color-blue-grey{color: map-get($blue-grey, 500)}
665
- .fill-blue-grey{fill: map-get($blue-grey, 500)}
666
- .stroke-blue-grey{stroke: map-get($blue-grey, 500)}
667
- .blue-grey{
668
- background: map-get($blue-grey, 500);
669
- color: map-get($blue-grey-contrast, 500);
670
- }
250
+ $get-shade: if($is-dark, 100, 500); // Define $red-shade com base no valor de $is-dark
251
+
252
+ .red.matcha-button-outline .ripple, .background-red-alpha {background: rgba(map-get($red, $get-shade), 0.2)}
253
+ .red .ripple{background: rgba(map-get($red-contrast, $get-shade), 0.2)}
254
+ .background-red{background: map-get($red, $get-shade)}
255
+ .border-color-red{border-color: map-get($red, $get-shade)}
256
+ .red.matcha-button-outline, .color-red{color: map-get($red, $get-shade)}
257
+ .fill-red{fill: map-get($red, $get-shade)}
258
+ .stroke-red{stroke: map-get($red, $get-shade)}
259
+ .red{
260
+ background: map-get($red, $get-shade);
261
+ color: map-get($red-contrast, $get-shade);
262
+ }
263
+ .pink.matcha-button-outline .ripple, .background-pink-alpha {background: rgba(map-get($pink, $get-shade), 0.2)}
264
+ .pink .ripple{background: rgba(map-get($pink-contrast, $get-shade), 0.2)}
265
+ .background-pink{background: map-get($pink, $get-shade)}
266
+ .border-color-pink{border-color: map-get($pink, $get-shade)}
267
+ .pink.matcha-button-outline, .color-pink{color: map-get($pink, $get-shade)}
268
+ .fill-pink{fill: map-get($pink, $get-shade)}
269
+ .stroke-pink{stroke: map-get($pink, $get-shade)}
270
+ .pink{
271
+ background: map-get($pink, $get-shade);
272
+ color: map-get($pink-contrast, $get-shade);
273
+ }
274
+ .purple.matcha-button-outline .ripple, .background-purple-alpha {background: rgba(map-get($purple, $get-shade), 0.2)}
275
+ .purple .ripple{background: rgba(map-get($purple-contrast, $get-shade), 0.2)}
276
+ .background-purple{background: map-get($purple, $get-shade)}
277
+ .border-color-purple{border-color: map-get($purple, $get-shade)}
278
+ .purple.matcha-button-outline, .color-purple{color: map-get($purple, $get-shade)}
279
+ .fill-purple{fill: map-get($purple, $get-shade)}
280
+ .stroke-purple{stroke: map-get($purple, $get-shade)}
281
+ .purple{
282
+ background: map-get($purple, $get-shade);
283
+ color: map-get($purple-contrast, $get-shade);
284
+ }
285
+ .deep-purple.matcha-button-outline .ripple, .background-deep-purple-alpha {background: rgba(map-get($deep-purple, $get-shade), 0.2)}
286
+ .deep-purple .ripple{background: rgba(map-get($deep-purple-contrast, $get-shade), 0.2)}
287
+ .background-deep-purple{background: map-get($deep-purple, $get-shade)}
288
+ .border-color-deep-purple{border-color: map-get($deep-purple, $get-shade)}
289
+ .deep-purple.matcha-button-outline, .color-deep-purple{color: map-get($deep-purple, $get-shade)}
290
+ .fill-deep-purple{fill: map-get($deep-purple, $get-shade)}
291
+ .stroke-deep-purple{stroke: map-get($deep-purple, $get-shade)}
292
+ .deep-purple{
293
+ background: map-get($deep-purple, $get-shade);
294
+ color: map-get($deep-purple-contrast, $get-shade);
295
+ }
296
+ .indigo.matcha-button-outline .ripple, .background-indigo-alpha {background: rgba(map-get($indigo, $get-shade), 0.2)}
297
+ .indigo .ripple{background: rgba(map-get($indigo-contrast, $get-shade), 0.2)}
298
+ .background-indigo{background: map-get($indigo, $get-shade)}
299
+ .border-color-indigo{border-color: map-get($indigo, $get-shade)}
300
+ .indigo.matcha-button-outline, .color-indigo{color: map-get($indigo, $get-shade)}
301
+ .fill-indigo{fill: map-get($indigo, $get-shade)}
302
+ .stroke-indigo{stroke: map-get($indigo, $get-shade)}
303
+ .indigo{
304
+ background: map-get($indigo, $get-shade);
305
+ color: map-get($indigo-contrast, $get-shade);
306
+ }
307
+ .blue.matcha-button-outline .ripple, .background-blue-alpha {background: rgba(map-get($blue, $get-shade), 0.2)}
308
+ .blue .ripple{background: rgba(map-get($blue-contrast, $get-shade), 0.2)}
309
+ .background-blue{background: map-get($blue, $get-shade)}
310
+ .border-color-blue{border-color: map-get($blue, $get-shade)}
311
+ .blue.matcha-button-outline, .color-blue{color: map-get($blue, $get-shade)}
312
+ .fill-blue{fill: map-get($blue, $get-shade)}
313
+ .stroke-blue{stroke: map-get($blue, $get-shade)}
314
+ .blue{
315
+ background: map-get($blue, $get-shade);
316
+ color: map-get($blue-contrast, $get-shade);
317
+ }
318
+ .light-blue.matcha-button-outline .ripple, .background-light-blue-alpha {background: rgba(map-get($light-blue, $get-shade), 0.2)}
319
+ .light-blue .ripple{background: rgba(map-get($light-blue-contrast, $get-shade), 0.2)}
320
+ .background-light-blue{background: map-get($light-blue, $get-shade)}
321
+ .border-color-light-blue{border-color: map-get($light-blue, $get-shade)}
322
+ .light-blue.matcha-button-outline, .color-light-blue{color: map-get($light-blue, $get-shade)}
323
+ .fill-light-blue{fill: map-get($light-blue, $get-shade)}
324
+ .stroke-light-blue{stroke: map-get($light-blue, $get-shade)}
325
+ .light-blue{
326
+ background: map-get($light-blue, $get-shade);
327
+ color: map-get($light-blue-contrast, $get-shade);
328
+ }
329
+ .cyan.matcha-button-outline .ripple, .background-cyan-alpha {background: rgba(map-get($cyan, $get-shade), 0.2)}
330
+ .cyan .ripple{background: rgba(map-get($cyan-contrast, $get-shade), 0.2)}
331
+ .background-cyan{background: map-get($cyan, $get-shade)}
332
+ .border-color-cyan{border-color: map-get($cyan, $get-shade)}
333
+ .cyan.matcha-button-outline, .color-cyan{color: map-get($cyan, $get-shade)}
334
+ .fill-cyan{fill: map-get($cyan, $get-shade)}
335
+ .stroke-cyan{stroke: map-get($cyan, $get-shade)}
336
+ .cyan{
337
+ background: map-get($cyan, $get-shade);
338
+ color: map-get($cyan-contrast, $get-shade);
339
+ }
340
+ .teal.matcha-button-outline .ripple, .background-teal-alpha {background: rgba(map-get($teal, $get-shade), 0.2)}
341
+ .teal .ripple{background: rgba(map-get($teal-contrast, $get-shade), 0.2)}
342
+ .background-teal{background: map-get($teal, $get-shade)}
343
+ .border-color-teal{border-color: map-get($teal, $get-shade)}
344
+ .teal.matcha-button-outline, .color-teal{color: map-get($teal, $get-shade)}
345
+ .fill-teal{fill: map-get($teal, $get-shade)}
346
+ .stroke-teal{stroke: map-get($teal, $get-shade)}
347
+ .teal{
348
+ background: map-get($teal, $get-shade);
349
+ color: map-get($teal-contrast, $get-shade);
350
+ }
351
+ .green.matcha-button-outline .ripple, .background-green-alpha {background: rgba(map-get($green, $get-shade), 0.2)}
352
+ .green .ripple{background: rgba(map-get($green-contrast, $get-shade), 0.2)}
353
+ .background-green{background: map-get($green, $get-shade)}
354
+ .border-color-green{border-color: map-get($green, $get-shade)}
355
+ .green.matcha-button-outline, .color-green{color: map-get($green, $get-shade)}
356
+ .fill-green{fill: map-get($green, $get-shade)}
357
+ .stroke-green{stroke: map-get($green, $get-shade)}
358
+ .green{
359
+ background: map-get($green, $get-shade);
360
+ color: map-get($green-contrast, $get-shade);
361
+ }
362
+ .light-green.matcha-button-outline .ripple, .background-light-green-alpha {background: rgba(map-get($light-green, $get-shade), 0.2)}
363
+ .light-green .ripple{background: rgba(map-get($light-green-contrast, $get-shade), 0.2)}
364
+ .background-light-green{background: map-get($light-green, $get-shade)}
365
+ .border-color-light-green{border-color: map-get($light-green, $get-shade)}
366
+ .light-green.matcha-button-outline, .color-light-green{color: map-get($light-green, $get-shade)}
367
+ .fill-light-green{fill: map-get($light-green, $get-shade)}
368
+ .stroke-light-green{stroke: map-get($light-green, $get-shade)}
369
+ .light-green{
370
+ background: map-get($light-green, $get-shade);
371
+ color: map-get($light-green-contrast, $get-shade);
372
+ }
373
+ .lime.matcha-button-outline .ripple, .background-lime-alpha {background: rgba(map-get($lime, $get-shade), 0.2)}
374
+ .lime .ripple{background: rgba(map-get($lime-contrast, $get-shade), 0.2)}
375
+ .background-lime{background: map-get($lime, $get-shade)}
376
+ .border-color-lime{border-color: map-get($lime, $get-shade)}
377
+ .lime.matcha-button-outline, .color-lime{color: map-get($lime, $get-shade)}
378
+ .fill-lime{fill: map-get($lime, $get-shade)}
379
+ .stroke-lime{stroke: map-get($lime, $get-shade)}
380
+ .lime{
381
+ background: map-get($lime, $get-shade);
382
+ color: map-get($lime-contrast, $get-shade);
383
+ }
384
+ .yellow.matcha-button-outline .ripple, .background-yellow-alpha {background: rgba(map-get($yellow, $get-shade), 0.2)}
385
+ .yellow .ripple{background: rgba(map-get($yellow-contrast, $get-shade), 0.2)}
386
+ .background-yellow{background: map-get($yellow, $get-shade)}
387
+ .border-color-yellow{border-color: map-get($yellow, $get-shade)}
388
+ .yellow.matcha-button-outline, .color-yellow{color: map-get($yellow, $get-shade)}
389
+ .fill-yellow{fill: map-get($yellow, $get-shade)}
390
+ .stroke-yellow{stroke: map-get($yellow, $get-shade)}
391
+ .yellow{
392
+ background: map-get($yellow, $get-shade);
393
+ color: map-get($yellow-contrast, $get-shade);
394
+ }
395
+ .amber.matcha-button-outline .ripple, .background-amber-alpha {background: rgba(map-get($amber, $get-shade), 0.2)}
396
+ .amber .ripple{background: rgba(map-get($amber-contrast, $get-shade), 0.2)}
397
+ .background-amber{background: map-get($amber, $get-shade)}
398
+ .border-color-amber{border-color: map-get($amber, $get-shade)}
399
+ .amber.matcha-button-outline, .color-amber{color: map-get($amber, $get-shade)}
400
+ .fill-amber{fill: map-get($amber, $get-shade)}
401
+ .stroke-amber{stroke: map-get($amber, $get-shade)}
402
+ .amber{
403
+ background: map-get($amber, $get-shade);
404
+ color: map-get($amber-contrast, $get-shade);
405
+ }
406
+ .orange.matcha-button-outline .ripple, .background-orange-alpha {background: rgba(map-get($orange, $get-shade), 0.2)}
407
+ .orange .ripple{background: rgba(map-get($orange-contrast, $get-shade), 0.2)}
408
+ .background-orange{background: map-get($orange, $get-shade)}
409
+ .border-color-orange{border-color: map-get($orange, $get-shade)}
410
+ .orange.matcha-button-outline, .color-orange{color: map-get($orange, $get-shade)}
411
+ .fill-orange{fill: map-get($orange, $get-shade)}
412
+ .stroke-orange{stroke: map-get($orange, $get-shade)}
413
+ .orange{
414
+ background: map-get($orange, $get-shade);
415
+ color: map-get($orange-contrast, $get-shade);
416
+ }
417
+ .deep-orange.matcha-button-outline .ripple, .background-deep-orange-alpha {background: rgba(map-get($deep-orange, $get-shade), 0.2)}
418
+ .deep-orange .ripple{background: rgba(map-get($deep-orange-contrast, $get-shade), 0.2)}
419
+ .background-deep-orange{background: map-get($deep-orange, $get-shade)}
420
+ .border-color-deep-orange{border-color: map-get($deep-orange, $get-shade)}
421
+ .deep-orange.matcha-button-outline, .color-deep-orange{color: map-get($deep-orange, $get-shade)}
422
+ .fill-deep-orange{fill: map-get($deep-orange, $get-shade)}
423
+ .stroke-deep-orange{stroke: map-get($deep-orange, $get-shade)}
424
+ .deep-orange{
425
+ background: map-get($deep-orange, $get-shade);
426
+ color: map-get($deep-orange-contrast, $get-shade);
427
+ }
428
+ .brown.matcha-button-outline .ripple, .background-brown-alpha {background: rgba(map-get($brown, $get-shade), 0.2)}
429
+ .brown .ripple{background: rgba(map-get($brown-contrast, $get-shade), 0.2)}
430
+ .background-brown{background: map-get($brown, $get-shade)}
431
+ .border-color-brown{border-color: map-get($brown, $get-shade)}
432
+ .brown.matcha-button-outline, .color-brown{color: map-get($brown, $get-shade)}
433
+ .fill-brown{fill: map-get($brown, $get-shade)}
434
+ .stroke-brown{stroke: map-get($brown, $get-shade)}
435
+ .brown{
436
+ background: map-get($brown, $get-shade);
437
+ color: map-get($brown-contrast, $get-shade);
438
+ }
439
+ .grey.matcha-button-outline .ripple, .background-grey-alpha {background: rgba(map-get($grey, $get-shade), 0.2)}
440
+ .grey .ripple{background: rgba(map-get($grey-contrast, $get-shade), 0.2)}
441
+ .background-grey{background: map-get($grey, $get-shade)}
442
+ .border-color-grey{border-color: map-get($grey, $get-shade)}
443
+ .grey.matcha-button-outline, .color-grey{color: map-get($grey, $get-shade)}
444
+ .fill-grey{fill: map-get($grey, $get-shade)}
445
+ .stroke-grey{stroke: map-get($grey, $get-shade)}
446
+ .grey{
447
+ background: map-get($grey, $get-shade);
448
+ color: map-get($grey-contrast, $get-shade);
449
+ }
450
+ .blue-grey.matcha-button-outline .ripple, .background-blue-grey-alpha {background: rgba(map-get($blue-grey, $get-shade), 0.2)}
451
+ .blue-grey .ripple{background: rgba(map-get($blue-grey-contrast, $get-shade), 0.2)}
452
+ .background-blue-grey{background: map-get($blue-grey, $get-shade)}
453
+ .border-color-blue-grey{border-color: map-get($blue-grey, $get-shade)}
454
+ .blue-grey.matcha-button-outline, .color-blue-grey{color: map-get($blue-grey, $get-shade)}
455
+ .fill-blue-grey{fill: map-get($blue-grey, $get-shade)}
456
+ .stroke-blue-grey{stroke: map-get($blue-grey, $get-shade)}
457
+ .blue-grey{
458
+ background: map-get($blue-grey, $get-shade);
459
+ color: map-get($blue-grey-contrast, $get-shade);
671
460
  }
672
461
 
673
462
  .primary.matcha-button-outline .ripple, .background-primary-alpha {background: rgba(map-get($primary, default), 0.2)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "18.1.30",
3
+ "version": "18.1.31",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {