@itcase/ui 1.8.134 → 1.8.136

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 (27) hide show
  1. package/dist/cjs/components/Modal.js +2 -2
  2. package/dist/cjs/components/Pagination.js +8 -5
  3. package/dist/components/Modal.js +2 -2
  4. package/dist/components/Pagination.js +8 -5
  5. package/dist/css/components/Checkbox/Checkbox.css +137 -310
  6. package/dist/css/components/Icon/Icon.css +76 -139
  7. package/dist/css/components/Modal/Modal.css +11 -1
  8. package/dist/css/components/Radio/Radio.css +141 -312
  9. package/dist/css/styles/blur/blur.css +3 -3
  10. package/dist/css/styles/border-color/border-color.css +92 -0
  11. package/dist/css/styles/bundle.css +268 -592
  12. package/dist/css/styles/fill/fill.css +156 -36
  13. package/dist/css/styles/text-color/text-color.css +55 -0
  14. package/dist/css/styles/text-gradient/text-gradient.css +1 -2
  15. package/dist/types/components/Accordion/Accordion.interface.d.ts +1 -1
  16. package/package.json +2 -2
  17. package/dist/css/styles/border-color/border-color_active.css +0 -45
  18. package/dist/css/styles/border-color/border-color_active_hover.css +0 -49
  19. package/dist/css/styles/border-color/border-color_focus.css +0 -51
  20. package/dist/css/styles/border-color/border-color_hover.css +0 -63
  21. package/dist/css/styles/fill/fill_active.css +0 -50
  22. package/dist/css/styles/fill/fill_active_hover.css +0 -119
  23. package/dist/css/styles/fill/fill_hover.css +0 -89
  24. package/dist/css/styles/text-color/text-color_active.css +0 -38
  25. package/dist/css/styles/text-color/text-color_active_hover.css +0 -45
  26. package/dist/css/styles/text-color/text-color_disabled.css +0 -13
  27. package/dist/css/styles/text-color/text-color_hover.css +0 -28
package/dist/css/styles/bundle.css CHANGED
@@ -332,17 +332,21 @@ div.alignment {
332
332
  }
333
333
  }
334
334
  .blur {
335
- @each $val in 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85,
336
- 90, 95, 100 {
335
+ @each $val in 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80,
336
+ 85, 90, 95, 100 {
337
337
  &_$(val) {
338
338
  /* stylelint-disable-next-line prettier/prettier */
339
- backdrop-filter: blur($(val)px);
339
+ backdrop-filter: blur($(val) px);
340
340
  }
341
341
  }
342
342
  }
343
343
  @each $selector in div, button, input, textarea {
344
344
  .border-color,
345
345
  $(selector).border-color {
346
+ &_active_none,
347
+ &_active_hover_none,
348
+ &_focus,
349
+ &_hover_none,
346
350
  &_none {
347
351
  border-width: 1px;
348
352
  border-color: transparent;
@@ -351,6 +355,58 @@ div.alignment {
351
355
  @each $type in accent, primary, secondary, surface, error, warning, success,
352
356
  danger, info, disabled {
353
357
  @each $color in primary, secondary, tertiary, quaternary {
358
+ .border&_active_$(type),
359
+ &_active_$(type) {
360
+ &-border {
361
+ &-$(color) {
362
+ border-width: 1px;
363
+ border-color: var(--color-$(type)-border-$(color));
364
+ border-style: solid;
365
+ }
366
+ }
367
+ }
368
+ .border&_active_hover_$(type),
369
+ &_active_hover_$(type) {
370
+ &-border {
371
+ &-$(color) {
372
+ &:hover {
373
+ border-width: 1px;
374
+ border-color: var(--color-$(type)-border-$(color));
375
+ border-style: solid;
376
+ }
377
+ }
378
+ }
379
+ }
380
+ &_focus_$(type) {
381
+ &-border {
382
+ &-$(color) {
383
+ &:focus {
384
+ border-width: 1px;
385
+ border-color: var(--color-$(type)-border-$(color)) !important;
386
+ border-style: solid;
387
+ outline: 0;
388
+ }
389
+ }
390
+ }
391
+ }
392
+ &_hover_$(type) {
393
+ &-border {
394
+ &-$(color) {
395
+ &:hover {
396
+ border-width: 1px;
397
+ border-color: var(--color-$(type)-border-$(color));
398
+ border-style: solid;
399
+ }
400
+ &-hover {
401
+ &:hover {
402
+ border-width: 1px;
403
+ border-color: var(--color-$(type)-border-$(color));
404
+ border-style: solid;
405
+ }
406
+ }
407
+ }
408
+ }
409
+ }
354
410
  &_$(type) {
355
411
  &-border {
356
412
  &-$(color) {
@@ -375,98 +431,35 @@ div.alignment {
375
431
  alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
376
432
  gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
377
433
  alto, athens-gray, sonic-silver {
378
- &_$(palette) {
434
+ .border&_active_$(palette),
435
+ &_active_$(palette) {
379
436
  border-width: 1px;
380
437
  border-color: var(--color-palette-$(palette));
381
438
  border-style: solid;
382
439
  }
383
- }
384
- }
385
- }
386
- @each $selector in div, button, input, textarea {
387
- .border-color,
388
- $(selector).border-color {
389
- &_active {
390
- &_none {
391
- border-width: 1px;
392
- border-color: transparent;
393
- border-style: solid;
394
- }
395
- @each $type in accent, primary, secondary, surface, error, warning,
396
- success, danger, info, disabled {
397
- @each $color in primary, secondary, tertiary, quaternary {
398
- &_$(type) {
399
- &-border {
400
- &-$(color) {
401
- border-width: 1px;
402
- border-color: var(--color-$(type)-border-$(color));
403
- border-style: solid;
404
- }
405
- }
406
- }
407
- }
408
- }
409
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
410
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
411
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
412
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
413
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
414
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
415
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
416
- blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
417
- ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
418
- lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
419
- northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
420
- antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
421
- coastal-gray, white, black, alto, athens-gray, sonic-silver {
422
- &_$(palette) {
440
+ .border&_active_hover_$(palette),
441
+ &_active_hover_$(palette) {
442
+ &:hover {
423
443
  border-width: 1px;
424
444
  border-color: var(--color-palette-$(palette));
425
445
  border-style: solid;
426
446
  }
427
447
  }
428
- }
429
- }
430
- }
431
- @each $selector in div, button, input, textarea {
432
- .border-color,
433
- $(selector).border-color {
434
- &_active {
435
- &_none {
436
- border-width: 1px;
437
- border-color: transparent;
438
- border-style: solid;
439
- }
440
- @each $type in accent, primary, secondary, surface, error, warning,
441
- success, danger, info, disabled {
442
- @each $color in primary, secondary, tertiary, quaternary {
443
- &_$(type) {
444
- &-border {
445
- &-$(color) {
446
- &:hover {
447
- border-width: 1px;
448
- border-color: var(--color-$(type)-border-$(color));
449
- border-style: solid;
450
- }
451
- }
452
- }
453
- }
448
+ &_focus_$(palette) {
449
+ &:focus {
450
+ border-width: 1px;
451
+ border-color: var(--color-palette-$(palette)) !important;
452
+ border-style: solid;
453
+ outline: 0;
454
454
  }
455
455
  }
456
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
457
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
458
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
459
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
460
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
461
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
462
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
463
- blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
464
- ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
465
- lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
466
- northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
467
- antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
468
- coastal-gray, white, black, alto, athens-gray, sonic-silver {
469
- &_$(palette) {
456
+ &_hover_$(palette) {
457
+ &:hover {
458
+ border-width: 1px;
459
+ border-color: var(--color-palette-$(palette));
460
+ border-style: solid;
461
+ }
462
+ &-hover {
470
463
  &:hover {
471
464
  border-width: 1px;
472
465
  border-color: var(--color-palette-$(palette));
@@ -474,120 +467,11 @@ div.alignment {
474
467
  }
475
468
  }
476
469
  }
477
- }
478
- }
479
- }
480
- @each $selector in div, button, input, textarea {
481
- .border-color,
482
- $(selector).border-color {
483
- &_focus {
484
- &_none {
485
- border-width: 1px;
486
- border-color: transparent;
487
- border-style: solid;
488
- }
489
- @each $type in accent, primary, secondary, surface, error, warning,
490
- success, danger, info, disabled {
491
- @each $color in primary, secondary, tertiary, quaternary {
492
- &_$(type) {
493
- &-border {
494
- &-$(color) {
495
- &:focus {
496
- border-width: 1px;
497
- border-color: var(--color-$(type)-border-$(color)) !important;
498
- border-style: solid;
499
- outline: 0;
500
- }
501
- }
502
- }
503
- }
504
- }
505
- }
506
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
507
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
508
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
509
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
510
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
511
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
512
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
513
- blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
514
- ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
515
- lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
516
- northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
517
- antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
518
- coastal-gray, white, black, alto, athens-gray, sonic-silver {
519
- &_$(palette) {
520
- &:focus {
521
- border-width: 1px;
522
- border-color: var(--color-palette-$(palette)) !important;
523
- border-style: solid;
524
- outline: 0;
525
- }
526
- }
527
- }
528
- }
529
- }
530
- }
531
- @each $selector in div, button, input, textarea {
532
- .border-color,
533
- $(selector).border-color {
534
- &_hover {
535
- &_none {
470
+ &_$(palette) {
536
471
  border-width: 1px;
537
- border-color: transparent;
472
+ border-color: var(--color-palette-$(palette));
538
473
  border-style: solid;
539
474
  }
540
- @each $type in accent, primary, secondary, surface, error, warning,
541
- success, danger, info, disabled {
542
- @each $color in primary, secondary, tertiary, quaternary {
543
- &_$(type) {
544
- &-border {
545
- &-$(color) {
546
- &:hover {
547
- border-width: 1px;
548
- border-color: var(--color-$(type)-border-$(color));
549
- border-style: solid;
550
- }
551
- &-hover {
552
- &:hover {
553
- border-width: 1px;
554
- border-color: var(--color-$(type)-border-$(color));
555
- border-style: solid;
556
- }
557
- }
558
- }
559
- }
560
- }
561
- }
562
- }
563
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
564
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
565
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
566
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
567
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
568
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
569
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
570
- blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
571
- ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
572
- lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
573
- northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
574
- antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
575
- coastal-gray, white, black, alto, athens-gray, sonic-silver {
576
- &_$(palette) {
577
- &:hover {
578
- border-width: 1px;
579
- border-color: var(--color-palette-$(palette));
580
- border-style: solid;
581
- }
582
- &-hover {
583
- &:hover {
584
- border-width: 1px;
585
- border-color: var(--color-palette-$(palette));
586
- border-style: solid;
587
- }
588
- }
589
- }
590
- }
591
475
  }
592
476
  }
593
477
  }
@@ -897,223 +781,174 @@ div.easing {
897
781
  }
898
782
  }
899
783
  }
900
- @each $selector in div, button, input, textarea {
901
- .fill,
902
- $(selector).fill {
903
- &_none {
904
- background-color: transparent;
905
- }
906
- @each $type in accent, primary, secondary, surface, error, warning, success,
907
- danger, info, disabled {
908
- @each $color in primary, secondary, tertiary, quaternary {
909
- /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
910
- &_$(type) {
911
- &-item {
912
- &-$(color) {
913
- background: var(--color-$(type)-item-$(color));
914
- /* &$(alpha) {
915
- background: var(--color-$(type)-item-$(color)-$(alpha));
916
- } */
917
- }
918
- }
784
+ .fill,
785
+ div.fill,
786
+ button.fill,
787
+ input.fill,
788
+ textarea.fill {
789
+ &_active_none,
790
+ &_active_hover_none,
791
+ &_hover_none,
792
+ &_none {
793
+ background-color: transparent;
794
+ }
795
+ @each $type in accent, primary, secondary, surface, error, warning, success,
796
+ danger, info, disabled {
797
+ @each $color in primary, secondary, tertiary, quaternary {
798
+ &_$(type) {
799
+ &-item {
919
800
  &-$(color) {
920
- background: var(--color-$(type)-fill-$(color));
921
- /* &$(alpha) {
922
- background: var(--color-$(type)-$(color)-$(alpha));
923
- } */
801
+ background: var(--color-$(type)-item-$(color));
924
802
  }
925
803
  }
926
- /* } */
927
- }
928
- }
929
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
930
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
931
- clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
932
- rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
933
- canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
934
- spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
935
- surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
936
- denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
937
- lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
938
- storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
939
- alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
940
- gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
941
- alto, athens-gray, sonic-silver {
942
- &_$(palette) {
943
- background: var(--color-palette-$(palette));
944
- &-item {
945
- &_$(palette) {
946
- background: var(--color-palette-$(palette));
947
- }
804
+ &-$(color) {
805
+ background: var(--color-$(type)-fill-$(color));
948
806
  }
949
807
  }
950
- }
951
- }
952
- }
953
- @each $selector in div, button, input, textarea {
954
- .fill,
955
- $(selector).fill {
956
- &_active {
957
- &_none {
958
- background-color: transparent;
959
- }
960
- @each $type in accent, primary, secondary, surface, error, warning,
961
- success, danger, info, disabled {
962
- @each $color in primary, secondary, tertiary, quaternary {
963
- &_$(type) {
964
- &-item {
965
- &-$(color) {
966
- background: var(--color-$(type)-item-$(color));
808
+ &_hover_$(type) {
809
+ &-item {
810
+ &-$(color) {
811
+ &:hover {
812
+ background: var(--color-$(type)-item-$(color));
813
+ }
814
+ &-hover {
815
+ &:hover {
816
+ background: var(--color-$(type)-item-$(color)-hover);
967
817
  }
968
818
  }
969
- &-$(color) {
970
- background: var(--color-$(type)-fill-$(color));
819
+ }
820
+ }
821
+ &-$(color) {
822
+ &:hover {
823
+ background: var(--color-$(type)-fill-$(color));
824
+ }
825
+ &-hover {
826
+ &:hover {
827
+ background: var(--color-$(type)-fill-$(color)-hover);
971
828
  }
972
- &-$(color)-active {
973
- background: var(--color-$(type)-fill-active-$(color));
829
+ }
830
+ }
831
+ &-hover {
832
+ &-$(color) {
833
+ &:hover {
834
+ background: var(--color-$(type)-fill-hover-$(color));
974
835
  }
975
836
  }
976
837
  }
977
838
  }
978
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
979
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
980
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
981
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
982
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
983
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
984
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
985
- blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
986
- ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
987
- lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
988
- northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
989
- antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
990
- coastal-gray, white, black, alto, athens-gray, sonic-silver {
991
- &_$(palette) {
992
- background: var(--color-palette-$(palette));
993
- &-item {
994
- &_$(palette) {
995
- background: var(--color-palette-$(palette));
996
- }
839
+ .fill&_active_$(type),
840
+ &_active_$(type) {
841
+ &-item {
842
+ &-$(color) {
843
+ background: var(--color-$(type)-item-$(color));
997
844
  }
998
845
  }
846
+ &-$(color) {
847
+ background: var(--color-$(type)-fill-$(color));
848
+ }
999
849
  }
1000
- }
1001
- }
1002
- }
1003
- @each $selector in div, button, input, textarea {
1004
- .fill,
1005
- $(selector).fill {
1006
- &_active {
1007
- &_hover {
1008
- &_none {
1009
- background-color: transparent;
1010
- }
1011
- @each $type in accent, primary, secondary, surface, error, warning,
1012
- success, danger, info, disabled {
1013
- @each $color in primary, secondary, tertiary, quaternary {
1014
- /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
1015
- &_$(type) {
1016
- &-item {
1017
- &-$(color) {
1018
- &:hover {
1019
- background: var(--color-$(type)-item-$(color));
1020
- }
1021
-
1022
- /* &$(alpha) {
1023
- &:hover {
1024
- background: var(--color-$(type)-item-$(color)-$(alpha));
1025
- }
1026
- } */
1027
- &-hover {
1028
- &:hover {
1029
- background: var(--color-$(type)-item-$(color)-hover);
1030
- }
1031
-
1032
- /* &$(alpha) {
1033
- &:hover {
1034
- background: var(
1035
- --color-$(type)-item-$(color)-$(alpha)-hover
1036
- );
1037
- }
1038
- } */
1039
- &-active {
1040
- &:hover {
1041
- background: var(
1042
- --color-$(type)-item-$(color)-active-hover
1043
- );
1044
- }
850
+ .fill&_active_hover_$(type),
851
+ &_active_hover_$(type) {
852
+ &-item {
853
+ &-$(color) {
854
+ &:hover {
855
+ background: var(--color-$(type)-item-$(color));
856
+ }
1045
857
 
1046
- /* &$(alpha) {
1047
- &:hover {
1048
- background: var(
1049
- --color-$(type)-item-$(color)-$(alpha)-active-hover
1050
- );
1051
- }
1052
- } */
1053
- }
1054
- }
1055
- }
858
+ &-hover {
859
+ &:hover {
860
+ background: var(--color-$(type)-item-$(color)-hover);
1056
861
  }
1057
- &-$(color) {
862
+ &-active {
1058
863
  &:hover {
1059
- background: var(--color-$(type)-fill-$(color));
1060
- }
1061
- &-hover {
1062
- &:hover {
1063
- background: var(--color-$(type)-fill-$(color)-hover);
1064
- }
1065
- &-active {
1066
- &:hover {
1067
- background: var(
1068
- --color-$(type)-fill-$(color)-active-hover
1069
- );
1070
- }
1071
- }
1072
- }
1073
- &-active {
1074
- &:hover {
1075
- background: var(--color-$(type)-fill-$(color)-active);
1076
- }
1077
- }
1078
- }
1079
- &-hover {
1080
- &-$(color) {
1081
- &:hover {
1082
- background: var(--color-$(type)-fill-hover-$(color));
1083
- }
864
+ background: var(--color-$(type)-item-$(color)-active-hover);
1084
865
  }
1085
866
  }
1086
867
  }
1087
-
1088
- /* } */
1089
868
  }
1090
869
  }
1091
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
1092
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
1093
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
1094
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
1095
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
1096
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
1097
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt,
1098
- dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
1099
- midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue,
1100
- indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
1101
- pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
1102
- dark-olive, soft-white, antique-white, yellow-gold, gold, camel,
1103
- walnut, stone, pebble, cocoa, coastal-gray, white, black, alto,
1104
- athens-gray, sonic-silver {
1105
- &_$(palette) {
870
+ &-$(color) {
871
+ &:hover {
872
+ background: var(--color-$(type)-fill-$(color));
873
+ }
874
+ &-hover {
1106
875
  &:hover {
1107
- background: var(--color-palette-$(palette));
876
+ background: var(--color-$(type)-fill-$(color)-hover);
1108
877
  }
1109
- &-item {
1110
- &_$(palette) {
1111
- &:hover {
1112
- background: var(--color-palette-$(palette));
1113
- }
878
+ &-active {
879
+ &:hover {
880
+ background: var(--color-$(type)-fill-$(color)-active-hover);
1114
881
  }
1115
882
  }
1116
883
  }
884
+ &-active {
885
+ &:hover {
886
+ background: var(--color-$(type)-fill-$(color)-active);
887
+ }
888
+ }
889
+ }
890
+ &-hover {
891
+ &-$(color) {
892
+ &:hover {
893
+ background: var(--color-$(type)-fill-hover-$(color));
894
+ }
895
+ }
896
+ }
897
+ }
898
+ }
899
+ }
900
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
901
+ pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
902
+ apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
903
+ pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
904
+ pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
905
+ beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
906
+ pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
907
+ deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
908
+ delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
909
+ pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
910
+ dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
911
+ stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
912
+ sonic-silver {
913
+ &_$(palette) {
914
+ background: var(--color-palette-$(palette));
915
+ &-item {
916
+ &_$(palette) {
917
+ background: var(--color-palette-$(palette));
918
+ }
919
+ }
920
+ }
921
+ &_hover_$(palette) {
922
+ &:hover {
923
+ background: var(--color-palette-$(palette));
924
+ }
925
+ &-item {
926
+ &_$(palette) {
927
+ &:hover {
928
+ background: var(--color-palette-$(palette));
929
+ }
930
+ }
931
+ }
932
+ }
933
+ .fill&_active_$(palette),
934
+ &_active_$(palette) {
935
+ background: var(--color-palette-$(palette));
936
+ &-item {
937
+ &_$(palette) {
938
+ background: var(--color-palette-$(palette));
939
+ }
940
+ }
941
+ }
942
+ .fill&_active_hover_$(palette),
943
+ &_active_hover_$(palette) {
944
+ &:hover {
945
+ background: var(--color-palette-$(palette));
946
+ }
947
+ &-item {
948
+ &_$(palette) {
949
+ &:hover {
950
+ background: var(--color-palette-$(palette));
951
+ }
1117
952
  }
1118
953
  }
1119
954
  }
@@ -1137,95 +972,6 @@ div.easing {
1137
972
  }
1138
973
  }
1139
974
  }
1140
- @each $selector in div, button, input, textarea {
1141
- .fill,
1142
- $(selector).fill {
1143
- &_hover {
1144
- &_none {
1145
- background-color: transparent;
1146
- }
1147
- @each $type in accent, primary, secondary, surface, error, warning,
1148
- success, danger, info, disabled {
1149
- @each $color in primary, secondary, tertiary, quaternary {
1150
- /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
1151
- &_$(type) {
1152
- &-item {
1153
- &-$(color) {
1154
- &:hover {
1155
- background: var(--color-$(type)-item-$(color));
1156
- }
1157
-
1158
- /* &$(alpha) {
1159
- &:hover {
1160
- background: var(--color-$(type)-item-$(color)-$(alpha));
1161
- }
1162
- } */
1163
- &-hover {
1164
- &:hover {
1165
- background: var(--color-$(type)-item-$(color)-hover);
1166
- }
1167
-
1168
- /* &$(alpha) {
1169
- &:hover {
1170
- background: var(
1171
- --color-$(type)-item-$(color)-$(alpha)-hover
1172
- );
1173
- }
1174
- } */
1175
- }
1176
- }
1177
- }
1178
- &-$(color) {
1179
- &:hover {
1180
- background: var(--color-$(type)-fill-$(color));
1181
- }
1182
- &-hover {
1183
- &:hover {
1184
- background: var(--color-$(type)-fill-$(color)-hover);
1185
- }
1186
- }
1187
- }
1188
- &-hover {
1189
- &-$(color) {
1190
- &:hover {
1191
- background: var(--color-$(type)-fill-hover-$(color));
1192
- }
1193
- }
1194
- }
1195
- }
1196
-
1197
- /* } */
1198
- }
1199
- }
1200
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
1201
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
1202
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
1203
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
1204
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
1205
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
1206
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
1207
- blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
1208
- ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
1209
- lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
1210
- northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
1211
- antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
1212
- coastal-gray, white, black, alto, athens-gray, sonic-silver {
1213
- &_$(palette) {
1214
- &:hover {
1215
- background: var(--color-palette-$(palette));
1216
- }
1217
- &-item {
1218
- &_$(palette) {
1219
- &:hover {
1220
- background: var(--color-palette-$(palette));
1221
- }
1222
- }
1223
- }
1224
- }
1225
- }
1226
- }
1227
- }
1228
- }
1229
975
  .flex-grow {
1230
976
  @each $val in 0, 1 {
1231
977
  &_$(val) {
@@ -1465,12 +1211,47 @@ div.easing {
1465
1211
  }
1466
1212
  .text {
1467
1213
  &&-color {
1214
+ &_active_none,
1215
+ &_active_hover_none,
1216
+ &_hover_none,
1468
1217
  &_none {
1469
1218
  color: transparent;
1470
1219
  }
1471
1220
  @each $type in accent, primary, secondary, surface, error, warning, success,
1472
1221
  danger, info, disabled {
1473
1222
  @each $color in primary, secondary, tertiary, quaternary {
1223
+ .text&_active_$(type),
1224
+ &_active_$(type) {
1225
+ &-text {
1226
+ &-$(color) {
1227
+ color: var(--color-$(type)-text-$(color));
1228
+ }
1229
+ }
1230
+ }
1231
+ .text&_active_hover_$(type),
1232
+ &_active_hover_$(type) {
1233
+ &-text {
1234
+ &-$(color) {
1235
+ &:hover {
1236
+ color: var(--color-$(type)-text-$(color));
1237
+ }
1238
+ }
1239
+ }
1240
+ }
1241
+ &_hover_$(type) {
1242
+ &-text {
1243
+ &-$(color) {
1244
+ &:hover {
1245
+ color: var(--color-$(type)-text-$(color));
1246
+ }
1247
+ &-hover {
1248
+ &:hover {
1249
+ color: var(--color-$(type)-text-$(color)-hover);
1250
+ }
1251
+ }
1252
+ }
1253
+ }
1254
+ }
1474
1255
  &_$(type) {
1475
1256
  &-text {
1476
1257
  &-$(color) {
@@ -1493,132 +1274,28 @@ div.easing {
1493
1274
  alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
1494
1275
  gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
1495
1276
  alto, athens-gray, sonic-silver {
1496
- &_$(palette) {
1277
+ .text&_active_$(palette),
1278
+ &_active_$(palette) {
1497
1279
  color: var(--color-palette-$(palette));
1498
1280
  }
1499
- }
1500
- }
1501
- }
1502
- .text {
1503
- &&-color {
1504
- &_active {
1505
- &_none {
1506
- color: transparent;
1507
- }
1508
- @each $type in accent, primary, secondary, surface, error, warning,
1509
- success, danger, info, disabled {
1510
- @each $color in primary, secondary, tertiary, quaternary {
1511
- &_$(type) {
1512
- &-text {
1513
- &-$(color) {
1514
- color: var(--color-$(type)-text-$(color));
1515
- }
1516
- }
1517
- }
1518
- }
1519
- }
1520
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
1521
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
1522
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
1523
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
1524
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
1525
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
1526
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
1527
- blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
1528
- ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
1529
- lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
1530
- northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
1531
- antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
1532
- coastal-gray, white, black, alto, athens-gray, sonic-silver {
1533
- &_$(palette) {
1281
+ .text&_active_hover_$(palette),
1282
+ &_active_hover_$(palette) {
1283
+ &:hover {
1534
1284
  color: var(--color-palette-$(palette));
1535
1285
  }
1536
1286
  }
1537
- }
1538
- }
1539
- }
1540
- .text {
1541
- &&-color {
1542
- &_active {
1543
- &_hover {
1544
- &_none {
1545
- color: transparent;
1546
- }
1547
- @each $type in accent, primary, secondary, surface, error, warning,
1548
- success, danger, info, disabled {
1549
- @each $color in primary, secondary, tertiary, quaternary {
1550
- &_$(type) {
1551
- &-text {
1552
- &-$(color) {
1553
- &:hover {
1554
- color: var(--color-$(type)-text-$(color));
1555
- }
1556
- }
1557
- }
1558
- }
1559
- }
1560
- }
1561
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
1562
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
1563
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
1564
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
1565
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
1566
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
1567
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt,
1568
- dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
1569
- midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue,
1570
- indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
1571
- pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
1572
- dark-olive, soft-white, antique-white, yellow-gold, gold, camel,
1573
- walnut, stone, pebble, cocoa, coastal-gray, white, black, alto,
1574
- athens-gray, sonic-silver {
1575
- &_$(palette) {
1576
- &:hover {
1577
- color: var(--color-palette-$(palette));
1578
- }
1579
- }
1287
+ &_hover_$(palette) {
1288
+ &:hover {
1289
+ color: var(--color-palette-$(palette));
1580
1290
  }
1581
- }
1582
- }
1583
- }
1584
- }
1585
- .text {
1586
- &&-color {
1587
- &_disabled {
1588
- &-text {
1589
- @each $color in primary, secondary, tertiary, quaternary {
1590
- &-$(color) {
1591
- color: var(--color-disabled-text-$(color));
1291
+ &-hover {
1292
+ &:hover {
1293
+ color: var(--color-palette-$(palette)-hover);
1592
1294
  }
1593
1295
  }
1594
1296
  }
1595
- }
1596
- }
1597
- }
1598
- .text {
1599
- &&-color {
1600
- &_hover {
1601
- &_none {
1602
- color: transparent;
1603
- }
1604
- @each $type in accent, primary, secondary, surface, error, warning,
1605
- success, danger, info, disabled {
1606
- @each $color in primary, secondary, tertiary, quaternary {
1607
- &_$(type) {
1608
- &-text {
1609
- &-$(color) {
1610
- &:hover {
1611
- color: var(--color-$(type)-text-$(color));
1612
- }
1613
- &-hover {
1614
- &:hover {
1615
- color: var(--color-$(type)-text-$(color)-hover);
1616
- }
1617
- }
1618
- }
1619
- }
1620
- }
1621
- }
1297
+ &_$(palette) {
1298
+ color: var(--color-palette-$(palette));
1622
1299
  }
1623
1300
  }
1624
1301
  }
@@ -1638,8 +1315,7 @@ div.easing {
1638
1315
  }
1639
1316
  @each $type in accent, primary, secondary, tertiary, surface, success, error {
1640
1317
  &_$(type) {
1641
- @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
1642
- hover {
1318
+ @each $color in primary, secondary, tertiary, quaternary {
1643
1319
  &-$(color) {
1644
1320
  @each $direction in left, top, right, bottom {
1645
1321
  &-$(direction) {