@withlayers/tokens 0.29.0 → 0.30.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 (2) hide show
  1. package/dist/index.css +254 -81
  2. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -31,68 +31,68 @@
31
31
  --l--breakpoint--lg: 1040px;
32
32
  --l--breakpoint--xl: 1440px;
33
33
  --l--color--primary--0: oklch(1 0 0);
34
- --l--color--primary--10: oklch(0.99 0.004 355.21);
35
- --l--color--primary--20: oklch(0.98 0.009 355.21);
36
- --l--color--primary--30: oklch(0.96 0.018 355.21);
37
- --l--color--primary--40: oklch(0.93 0.031 355.21);
38
- --l--color--primary--50: oklch(0.89 0.048 355.21);
39
- --l--color--primary--60: oklch(0.84 0.07 355.21);
40
- --l--color--primary--70: oklch(0.79 0.092 355.21);
41
- --l--color--primary--80: oklch(0.73 0.119 355.21);
42
- --l--color--primary--90: oklch(0.522 0.21 355.21);
43
- --l--color--primary--100: oklch(0.492 0.201 355.99);
44
- --l--color--primary--110: oklch(0.577 0.186 355.21);
45
- --l--color--primary--120: oklch(0.529 0.207 355.21);
46
- --l--color--primary--130: oklch(0.344 0.138 3.5);
47
- --l--color--primary--140: oklch(0.27 0.108 8.89);
34
+ --l--color--primary--10: oklch(0.99 0.002 267.48);
35
+ --l--color--primary--20: oklch(0.98 0.005 267.48);
36
+ --l--color--primary--30: oklch(0.96 0.01 267.48);
37
+ --l--color--primary--40: oklch(0.93 0.017 267.48);
38
+ --l--color--primary--50: oklch(0.89 0.027 267.48);
39
+ --l--color--primary--60: oklch(0.84 0.039 267.48);
40
+ --l--color--primary--70: oklch(0.79 0.051 267.48);
41
+ --l--color--primary--80: oklch(0.73 0.066 267.48);
42
+ --l--color--primary--90: oklch(0.35 0.158 267.48);
43
+ --l--color--primary--100: oklch(0.431 0.138 267.48);
44
+ --l--color--primary--110: oklch(0.557 0.108 267.48);
45
+ --l--color--primary--120: oklch(0.529 0.115 267.48);
46
+ --l--color--primary--130: oklch(0.344 0.158 267.48);
47
+ --l--color--primary--140: oklch(0.27 0.158 267.48);
48
48
  --l--color--primary--150: oklch(0 0 0);
49
49
  --l--color--primary--dark--0: oklch(0 0 0);
50
- --l--color--primary--dark--10: oklch(0.11 0.045 27.2);
51
- --l--color--primary--dark--20: oklch(0.16 0.064 20.41);
52
- --l--color--primary--dark--30: oklch(0.25 0.1 10.66);
53
- --l--color--primary--dark--40: oklch(0.29 0.116 7.28);
54
- --l--color--primary--dark--50: oklch(0.33 0.133 4.39);
55
- --l--color--primary--dark--60: oklch(0.38 0.154 1.3);
56
- --l--color--primary--dark--70: oklch(0.45 0.184 357.75);
57
- --l--color--primary--dark--80: oklch(0.55 0.198 355.21);
58
- --l--color--primary--dark--90: oklch(0.522 0.21 355.21);
59
- --l--color--primary--dark--100: oklch(0.492 0.201 355.99);
60
- --l--color--primary--dark--110: oklch(0.78 0.097 355.21);
61
- --l--color--primary--dark--120: oklch(0.83 0.075 355.21);
62
- --l--color--primary--dark--130: oklch(0.98 0.009 355.21);
63
- --l--color--primary--dark--140: oklch(0.99 0.004 355.21);
50
+ --l--color--primary--dark--10: oklch(0.123 0.072 284.09);
51
+ --l--color--primary--dark--20: oklch(0.16 0.097 279.97);
52
+ --l--color--primary--dark--30: oklch(0.25 0.158 267.48);
53
+ --l--color--primary--dark--40: oklch(0.29 0.158 267.48);
54
+ --l--color--primary--dark--50: oklch(0.33 0.158 267.48);
55
+ --l--color--primary--dark--60: oklch(0.38 0.151 267.48);
56
+ --l--color--primary--dark--70: oklch(0.45 0.134 267.48);
57
+ --l--color--primary--dark--80: oklch(0.55 0.11 267.48);
58
+ --l--color--primary--dark--90: oklch(0.35 0.158 267.48);
59
+ --l--color--primary--dark--100: oklch(0.431 0.138 267.48);
60
+ --l--color--primary--dark--110: oklch(0.78 0.054 267.48);
61
+ --l--color--primary--dark--120: oklch(0.83 0.041 267.48);
62
+ --l--color--primary--dark--130: oklch(0.98 0.005 267.48);
63
+ --l--color--primary--dark--140: oklch(0.99 0.002 267.48);
64
64
  --l--color--primary--dark--150: oklch(1 0 0);
65
65
  --l--color--primary--alpha--0: oklch(1 0 0 / 0);
66
- --l--color--primary--alpha--10: oklch(0.512 0.205 14.65 / 0.016);
67
- --l--color--primary--alpha--20: oklch(0.583 0.233 12.11 / 0.035);
68
- --l--color--primary--alpha--30: oklch(0.581 0.232 16.61 / 0.071);
69
- --l--color--primary--alpha--40: oklch(0.557 0.223 14.07 / 0.122);
70
- --l--color--primary--alpha--50: oklch(0.546 0.218 13.71 / 0.192);
71
- --l--color--primary--alpha--60: oklch(0.54 0.216 12.31 / 0.278);
72
- --l--color--primary--alpha--70: oklch(0.526 0.21 11.71 / 0.365);
73
- --l--color--primary--alpha--80: oklch(0.519 0.208 10.09 / 0.471);
74
- --l--color--primary--alpha--90: oklch(0.512 0.209 356.64 / 0.961);
75
- --l--color--primary--alpha--100: oklch(0.491 0.201 355.95 / 0.996);
76
- --l--color--primary--alpha--110: oklch(0.501 0.202 3.49 / 0.769);
77
- --l--color--primary--alpha--120: oklch(0.509 0.207 358.4 / 0.918);
78
- --l--color--primary--alpha--130: oklch(0.343 0.138 4.15 / 0.996);
79
- --l--color--primary--alpha--140: oklch(0.269 0.108 8.93 / 1);
66
+ --l--color--primary--alpha--10: oklch(0.375 0.122 254.66 / 0.016);
67
+ --l--color--primary--alpha--20: oklch(0.346 0.201 264.01 / 0.031);
68
+ --l--color--primary--alpha--30: oklch(0.372 0.185 262.88 / 0.063);
69
+ --l--color--primary--alpha--40: oklch(0.363 0.182 262.95 / 0.11);
70
+ --l--color--primary--alpha--50: oklch(0.36 0.176 262.67 / 0.173);
71
+ --l--color--primary--alpha--60: oklch(0.356 0.179 263.01 / 0.251);
72
+ --l--color--primary--alpha--70: oklch(0.35 0.175 262.94 / 0.325);
73
+ --l--color--primary--alpha--80: oklch(0.35 0.174 262.88 / 0.416);
74
+ --l--color--primary--alpha--90: oklch(0.292 0.172 264.06 / 0.906);
75
+ --l--color--primary--alpha--100: oklch(0.311 0.17 263.67 / 0.816);
76
+ --l--color--primary--alpha--110: oklch(0.329 0.172 263.32 / 0.655);
77
+ --l--color--primary--alpha--120: oklch(0.327 0.172 263.36 / 0.694);
78
+ --l--color--primary--alpha--130: oklch(0.288 0.171 264.09 / 0.91);
79
+ --l--color--primary--alpha--140: oklch(0.247 0.162 264.19 / 0.961);
80
80
  --l--color--primary--alpha--150: oklch(0 0 0 / 1);
81
81
  --l--color--primary--alpha--dark--0: oklch(0 0 0 / 0);
82
- --l--color--primary--alpha--dark--10: oklch(0.628 0.258 29.23 / 0.063);
83
- --l--color--primary--alpha--dark--20: oklch(0.629 0.257 27.75 / 0.133);
84
- --l--color--primary--alpha--dark--30: oklch(0.635 0.254 16.48 / 0.271);
85
- --l--color--primary--alpha--dark--40: oklch(0.638 0.255 11.76 / 0.337);
86
- --l--color--primary--alpha--dark--50: oklch(0.641 0.257 7.64 / 0.404);
87
- --l--color--primary--alpha--dark--60: oklch(0.644 0.259 3.59 / 0.49);
88
- --l--color--primary--alpha--dark--70: oklch(0.649 0.264 359.07 / 0.612);
89
- --l--color--primary--alpha--dark--80: oklch(0.673 0.245 355.48 / 0.761);
90
- --l--color--primary--alpha--dark--90: oklch(0.655 0.265 355.71 / 0.737);
91
- --l--color--primary--alpha--dark--100: oklch(0.652 0.266 356.56 / 0.686);
92
- --l--color--primary--alpha--dark--110: oklch(0.833 0.105 355.09 / 0.914);
93
- --l--color--primary--alpha--dark--120: oklch(0.87 0.079 355.06 / 0.941);
94
- --l--color--primary--alpha--dark--130: oklch(0.983 0.009 352.59 / 0.996);
95
- --l--color--primary--alpha--dark--140: oklch(0.994 0.003 355.32 / 0.996);
82
+ --l--color--primary--alpha--dark--10: oklch(0.465 0.305 269.98 / 0.125);
83
+ --l--color--primary--alpha--dark--20: oklch(0.467 0.303 271.11 / 0.208);
84
+ --l--color--primary--alpha--dark--30: oklch(0.46 0.308 265.49 / 0.42);
85
+ --l--color--primary--alpha--dark--40: oklch(0.489 0.288 266.17 / 0.471);
86
+ --l--color--primary--alpha--dark--50: oklch(0.52 0.267 266.57 / 0.522);
87
+ --l--color--primary--alpha--dark--60: oklch(0.565 0.238 266.97 / 0.569);
88
+ --l--color--primary--alpha--dark--70: oklch(0.63 0.198 267.52 / 0.624);
89
+ --l--color--primary--alpha--dark--80: oklch(0.714 0.148 267.36 / 0.698);
90
+ --l--color--primary--alpha--dark--90: oklch(0.534 0.258 266.78 / 0.545);
91
+ --l--color--primary--alpha--dark--100: oklch(0.614 0.208 267.29 / 0.608);
92
+ --l--color--primary--alpha--dark--110: oklch(0.874 0.061 267.34 / 0.859);
93
+ --l--color--primary--alpha--dark--120: oklch(0.905 0.046 267.06 / 0.89);
94
+ --l--color--primary--alpha--dark--130: oklch(0.988 0.005 275.12 / 0.988);
95
+ --l--color--primary--alpha--dark--140: oklch(0.997 0.002 247.73 / 0.992);
96
96
  --l--color--primary--alpha--dark--150: oklch(1 0 0 / 1);
97
97
  --l--color--neutral--0: oklch(1 0 0);
98
98
  --l--color--neutral--10: oklch(0.99 0.001 0);
@@ -585,62 +585,82 @@
585
585
  --l--theme--color--background--default: var(--l--color--neutral--0);
586
586
  --l--theme--color--background--knockout: var(--l--color--neutral--dark--0);
587
587
  --l--theme--color--background--subtle: var(--l--color--neutral--20);
588
+ --l--theme--color--background--primary: var(--l--color--primary--90);
588
589
  --l--theme--color--border--primary--on-default: var(--l--color--neutral--100);
589
- --l--theme--color--border--primary--on-knockout: var(--l--color--neutral--dark--100);
590
+ --l--theme--color--border--primary--on-knockout: var(--l--color--neutral--dark--120);
591
+ --l--theme--color--border--primary--on-primary: var(--l--color--primary--0);
590
592
  --l--theme--color--border--primary--on-subtle: var(--l--color--neutral--100);
591
593
  --l--theme--color--border--secondary--on-default: var(--l--color--neutral--60);
592
594
  --l--theme--color--border--secondary--on-knockout: var(--l--color--neutral--dark--60);
595
+ --l--theme--color--border--secondary--on-primary: var(--l--color--primary--70);
593
596
  --l--theme--color--border--secondary--on-subtle: var(--l--color--neutral--60);
594
597
  --l--theme--color--border--tertiary--on-default: var(--l--color--neutral--30);
595
598
  --l--theme--color--border--tertiary--on-knockout: var(--l--color--neutral--dark--30);
599
+ --l--theme--color--border--tertiary--on-primary: var(--l--color--primary--80);
596
600
  --l--theme--color--border--tertiary--on-subtle: var(--l--color--neutral--40);
597
601
  --l--theme--color--content--primary--on-default: var(--l--color--neutral--140);
598
602
  --l--theme--color--content--primary--on-knockout: var(--l--color--neutral--dark--140);
603
+ --l--theme--color--content--primary--on-primary: var(--l--color--primary--dark--140);
599
604
  --l--theme--color--content--primary--on-subtle: var(--l--color--neutral--140);
600
605
  --l--theme--color--content--secondary--on-default: var(--l--color--neutral--110);
601
606
  --l--theme--color--content--secondary--on-knockout: var(--l--color--neutral--dark--110);
607
+ --l--theme--color--content--secondary--on-primary: var(--l--color--primary--dark--130);
602
608
  --l--theme--color--content--secondary--on-subtle: var(--l--color--neutral--110);
603
609
  --l--theme--color--outline--on-default: var(--l--color--neutral--140);
604
610
  --l--theme--color--outline--on-knockout: var(--l--color--neutral--dark--140);
611
+ --l--theme--color--outline--on-primary: var(--l--color--primary--dark--140);
605
612
  --l--theme--color--outline--on-subtle: var(--l--color--neutral--140);
606
613
  --l--theme--color--overlay--on-default: var(--l--color--neutral--alpha--50);
607
614
  --l--theme--color--overlay--on-knockout: var(--l--color--neutral--alpha--dark--50);
615
+ --l--theme--color--overlay--on-primary: var(--l--color--primary--alpha--dark--50);
608
616
  --l--theme--color--overlay--on-subtle: var(--l--color--neutral--alpha--50);
609
617
  --l--theme--color--code--background--on-default: var(--l--color--neutral--30);
610
618
  --l--theme--color--code--background--on-knockout: var(--l--color--neutral--dark--30);
619
+ --l--theme--color--code--background--on-primary: var(--l--color--primary--110);
611
620
  --l--theme--color--code--background--on-subtle: var(--l--color--neutral--40);
612
621
  --l--theme--color--code--border--on-default: var(--l--color--neutral--alpha--0);
613
622
  --l--theme--color--code--border--on-knockout: var(--l--color--neutral--alpha--dark--0);
623
+ --l--theme--color--code--border--on-primary: var(--l--color--primary--alpha--dark--0);
614
624
  --l--theme--color--code--border--on-subtle: var(--l--color--neutral--alpha--0);
615
625
  --l--theme--color--code--content--on-default: var(--l--color--neutral--130);
616
626
  --l--theme--color--code--content--on-knockout: var(--l--color--neutral--dark--130);
627
+ --l--theme--color--code--content--on-primary: var(--l--color--primary--dark--130);
617
628
  --l--theme--color--code--content--on-subtle: var(--l--color--neutral--130);
618
629
  --l--theme--color--dialog--border--on-default: var(--l--color--neutral--alpha--0);
619
630
  --l--theme--color--dialog--border--on-knockout: var(--l--color--neutral--alpha--dark--0);
631
+ --l--theme--color--dialog--border--on-primary: var(--l--color--primary--alpha--dark--0);
620
632
  --l--theme--color--dialog--border--on-subtle: var(--l--color--neutral--alpha--0);
621
633
  --l--theme--color--feedback--background--destructive--on-default: var(--l--color--red--40);
622
634
  --l--theme--color--feedback--background--destructive--on-knockout: var(--l--color--red--dark--40);
635
+ --l--theme--color--feedback--background--destructive--on-primary: var(--l--color--red--50);
623
636
  --l--theme--color--feedback--background--destructive--on-subtle: var(--l--color--red--40);
624
637
  --l--theme--color--feedback--background--informative--on-default: var(--l--color--blue--40);
625
638
  --l--theme--color--feedback--background--informative--on-knockout: var(--l--color--blue--dark--40);
639
+ --l--theme--color--feedback--background--informative--on-primary: var(--l--color--blue--50);
626
640
  --l--theme--color--feedback--background--informative--on-subtle: var(--l--color--blue--40);
627
641
  --l--theme--color--feedback--background--positive--on-default: var(--l--color--green--40);
628
642
  --l--theme--color--feedback--background--positive--on-knockout: var(--l--color--green--dark--40);
643
+ --l--theme--color--feedback--background--positive--on-primary: var(--l--color--green--50);
629
644
  --l--theme--color--feedback--background--positive--on-subtle: var(--l--color--green--40);
630
645
  --l--theme--color--feedback--background--warning--on-default: var(--l--color--yellow--40);
631
646
  --l--theme--color--feedback--background--warning--on-knockout: var(--l--color--yellow--dark--40);
647
+ --l--theme--color--feedback--background--warning--on-primary: var(--l--color--yellow--50);
632
648
  --l--theme--color--feedback--background--warning--on-subtle: var(--l--color--yellow--40);
633
649
  --l--theme--color--feedback--border--destructive--on-default: var(--l--color--red--50);
634
650
  --l--theme--color--feedback--border--destructive--on-knockout: var(--l--color--red--dark--50);
651
+ --l--theme--color--feedback--border--destructive--on-primary: var(--l--color--red--60);
635
652
  --l--theme--color--feedback--border--destructive--on-subtle: var(--l--color--red--50);
636
653
  --l--theme--color--feedback--border--informative--on-default: var(--l--color--blue--50);
637
654
  --l--theme--color--feedback--border--informative--on-knockout: var(--l--color--blue--dark--50);
655
+ --l--theme--color--feedback--border--informative--on-primary: var(--l--color--blue--60);
638
656
  --l--theme--color--feedback--border--informative--on-subtle: var(--l--color--blue--50);
639
657
  --l--theme--color--feedback--border--positive--on-default: var(--l--color--green--50);
640
658
  --l--theme--color--feedback--border--positive--on-knockout: var(--l--color--green--dark--50);
659
+ --l--theme--color--feedback--border--positive--on-primary: var(--l--color--green--60);
641
660
  --l--theme--color--feedback--border--positive--on-subtle: var(--l--color--green--50);
642
661
  --l--theme--color--feedback--border--warning--on-default: var(--l--color--yellow--50);
643
662
  --l--theme--color--feedback--border--warning--on-knockout: var(--l--color--yellow--dark--50);
663
+ --l--theme--color--feedback--border--warning--on-primary: var(--l--color--yellow--60);
644
664
  --l--theme--color--feedback--border--warning--on-subtle: var(--l--color--yellow--50);
645
665
  --l--theme--color--feedback--content--destructive--on-default--rest: var(--l--color--red--130);
646
666
  --l--theme--color--feedback--content--destructive--on-default--hover: var(--l--color--red--140);
@@ -652,6 +672,11 @@
652
672
  --l--theme--color--feedback--content--destructive--on-knockout--focus: var(--l--color--red--dark--130);
653
673
  --l--theme--color--feedback--content--destructive--on-knockout--active: var(--l--color--red--dark--130);
654
674
  --l--theme--color--feedback--content--destructive--on-knockout--visited: var(--l--color--red--dark--130);
675
+ --l--theme--color--feedback--content--destructive--on-primary--rest: var(--l--color--red--140);
676
+ --l--theme--color--feedback--content--destructive--on-primary--hover: var(--l--color--red--150);
677
+ --l--theme--color--feedback--content--destructive--on-primary--focus: var(--l--color--red--140);
678
+ --l--theme--color--feedback--content--destructive--on-primary--active: var(--l--color--red--140);
679
+ --l--theme--color--feedback--content--destructive--on-primary--visited: var(--l--color--red--140);
655
680
  --l--theme--color--feedback--content--destructive--on-subtle--rest: var(--l--color--red--130);
656
681
  --l--theme--color--feedback--content--destructive--on-subtle--hover: var(--l--color--red--140);
657
682
  --l--theme--color--feedback--content--destructive--on-subtle--focus: var(--l--color--red--130);
@@ -667,6 +692,11 @@
667
692
  --l--theme--color--feedback--content--informative--on-knockout--focus: var(--l--color--blue--dark--130);
668
693
  --l--theme--color--feedback--content--informative--on-knockout--active: var(--l--color--blue--dark--130);
669
694
  --l--theme--color--feedback--content--informative--on-knockout--visited: var(--l--color--blue--dark--130);
695
+ --l--theme--color--feedback--content--informative--on-primary--rest: var(--l--color--blue--140);
696
+ --l--theme--color--feedback--content--informative--on-primary--hover: var(--l--color--blue--150);
697
+ --l--theme--color--feedback--content--informative--on-primary--focus: var(--l--color--blue--140);
698
+ --l--theme--color--feedback--content--informative--on-primary--active: var(--l--color--blue--140);
699
+ --l--theme--color--feedback--content--informative--on-primary--visited: var(--l--color--blue--140);
670
700
  --l--theme--color--feedback--content--informative--on-subtle--rest: var(--l--color--blue--130);
671
701
  --l--theme--color--feedback--content--informative--on-subtle--hover: var(--l--color--blue--140);
672
702
  --l--theme--color--feedback--content--informative--on-subtle--focus: var(--l--color--blue--130);
@@ -682,6 +712,11 @@
682
712
  --l--theme--color--feedback--content--positive--on-knockout--focus: var(--l--color--green--dark--130);
683
713
  --l--theme--color--feedback--content--positive--on-knockout--active: var(--l--color--green--dark--130);
684
714
  --l--theme--color--feedback--content--positive--on-knockout--visited: var(--l--color--green--dark--130);
715
+ --l--theme--color--feedback--content--positive--on-primary--rest: var(--l--color--green--140);
716
+ --l--theme--color--feedback--content--positive--on-primary--hover: var(--l--color--green--150);
717
+ --l--theme--color--feedback--content--positive--on-primary--focus: var(--l--color--green--140);
718
+ --l--theme--color--feedback--content--positive--on-primary--active: var(--l--color--green--140);
719
+ --l--theme--color--feedback--content--positive--on-primary--visited: var(--l--color--green--140);
685
720
  --l--theme--color--feedback--content--positive--on-subtle--rest: var(--l--color--green--130);
686
721
  --l--theme--color--feedback--content--positive--on-subtle--hover: var(--l--color--green--140);
687
722
  --l--theme--color--feedback--content--positive--on-subtle--focus: var(--l--color--green--130);
@@ -697,6 +732,11 @@
697
732
  --l--theme--color--feedback--content--warning--on-knockout--focus: var(--l--color--yellow--dark--130);
698
733
  --l--theme--color--feedback--content--warning--on-knockout--active: var(--l--color--yellow--dark--130);
699
734
  --l--theme--color--feedback--content--warning--on-knockout--visited: var(--l--color--yellow--dark--130);
735
+ --l--theme--color--feedback--content--warning--on-primary--rest: var(--l--color--yellow--140);
736
+ --l--theme--color--feedback--content--warning--on-primary--hover: var(--l--color--yellow--150);
737
+ --l--theme--color--feedback--content--warning--on-primary--focus: var(--l--color--yellow--140);
738
+ --l--theme--color--feedback--content--warning--on-primary--active: var(--l--color--yellow--140);
739
+ --l--theme--color--feedback--content--warning--on-primary--visited: var(--l--color--yellow--140);
700
740
  --l--theme--color--feedback--content--warning--on-subtle--rest: var(--l--color--yellow--130);
701
741
  --l--theme--color--feedback--content--warning--on-subtle--hover: var(--l--color--yellow--140);
702
742
  --l--theme--color--feedback--content--warning--on-subtle--focus: var(--l--color--yellow--130);
@@ -704,15 +744,19 @@
704
744
  --l--theme--color--feedback--content--warning--on-subtle--visited: var(--l--color--yellow--130);
705
745
  --l--theme--color--feedback--outline--destructive--on-default: var(--l--color--red--120);
706
746
  --l--theme--color--feedback--outline--destructive--on-knockout: var(--l--color--red--dark--120);
747
+ --l--theme--color--feedback--outline--destructive--on-primary: var(--l--color--red--140);
707
748
  --l--theme--color--feedback--outline--destructive--on-subtle: var(--l--color--red--120);
708
749
  --l--theme--color--feedback--outline--informative--on-default: var(--l--color--blue--120);
709
750
  --l--theme--color--feedback--outline--informative--on-knockout: var(--l--color--blue--dark--120);
751
+ --l--theme--color--feedback--outline--informative--on-primary: var(--l--color--blue--140);
710
752
  --l--theme--color--feedback--outline--informative--on-subtle: var(--l--color--blue--120);
711
753
  --l--theme--color--feedback--outline--positive--on-default: var(--l--color--green--120);
712
754
  --l--theme--color--feedback--outline--positive--on-knockout: var(--l--color--green--dark--120);
755
+ --l--theme--color--feedback--outline--positive--on-primary: var(--l--color--green--140);
713
756
  --l--theme--color--feedback--outline--positive--on-subtle: var(--l--color--green--120);
714
757
  --l--theme--color--feedback--outline--warning--on-default: var(--l--color--yellow--120);
715
758
  --l--theme--color--feedback--outline--warning--on-knockout: var(--l--color--yellow--dark--120);
759
+ --l--theme--color--feedback--outline--warning--on-primary: var(--l--color--yellow--140);
716
760
  --l--theme--color--feedback--outline--warning--on-subtle: var(--l--color--yellow--120);
717
761
  --l--theme--color--input--background--on-default--rest: var(--l--color--neutral--alpha--0);
718
762
  --l--theme--color--input--background--on-default--focus: var(--l--color--neutral--alpha--0);
@@ -740,6 +784,19 @@
740
784
  --l--theme--color--input--background--on-knockout--invalid--focus: var(--l--color--red--alpha--dark--0);
741
785
  --l--theme--color--input--background--on-knockout--invalid--hover: var(--l--color--red--alpha--dark--10);
742
786
  --l--theme--color--input--background--on-knockout--disabled: var(--l--color--neutral--dark--40);
787
+ --l--theme--color--input--background--on-primary--rest: var(--l--color--primary--alpha--dark--0);
788
+ --l--theme--color--input--background--on-primary--focus: var(--l--color--primary--alpha--dark--0);
789
+ --l--theme--color--input--background--on-primary--hover: var(--l--color--primary--alpha--dark--10);
790
+ --l--theme--color--input--background--on-primary--checked--rest: var(--l--color--primary--dark--140);
791
+ --l--theme--color--input--background--on-primary--checked--focus: var(--l--color--primary--dark--140);
792
+ --l--theme--color--input--background--on-primary--checked--hover: var(--l--color--primary--dark--130);
793
+ --l--theme--color--input--background--on-primary--checked--invalid--rest: var(--l--color--red--dark--90);
794
+ --l--theme--color--input--background--on-primary--checked--invalid--focus: var(--l--color--red--dark--90);
795
+ --l--theme--color--input--background--on-primary--checked--invalid--hover: var(--l--color--red--dark--100);
796
+ --l--theme--color--input--background--on-primary--invalid--rest: var(--l--color--red--alpha--dark--0);
797
+ --l--theme--color--input--background--on-primary--invalid--focus: var(--l--color--red--alpha--dark--0);
798
+ --l--theme--color--input--background--on-primary--invalid--hover: var(--l--color--red--alpha--dark--10);
799
+ --l--theme--color--input--background--on-primary--disabled: var(--l--color--primary--100);
743
800
  --l--theme--color--input--background--on-subtle--rest: var(--l--color--neutral--alpha--0);
744
801
  --l--theme--color--input--background--on-subtle--focus: var(--l--color--neutral--alpha--0);
745
802
  --l--theme--color--input--background--on-subtle--hover: var(--l--color--neutral--alpha--10);
@@ -779,6 +836,19 @@
779
836
  --l--theme--color--input--border--on-knockout--invalid--focus: var(--l--color--red--dark--90);
780
837
  --l--theme--color--input--border--on-knockout--invalid--hover: var(--l--color--red--dark--100);
781
838
  --l--theme--color--input--border--on-knockout--disabled: var(--l--color--neutral--dark--40);
839
+ --l--theme--color--input--border--on-primary--rest: var(--l--color--primary--dark--120);
840
+ --l--theme--color--input--border--on-primary--focus: var(--l--color--primary--dark--120);
841
+ --l--theme--color--input--border--on-primary--hover: var(--l--color--primary--dark--120);
842
+ --l--theme--color--input--border--on-primary--checked--rest: var(--l--color--primary--dark--140);
843
+ --l--theme--color--input--border--on-primary--checked--focus: var(--l--color--primary--dark--140);
844
+ --l--theme--color--input--border--on-primary--checked--hover: var(--l--color--primary--dark--130);
845
+ --l--theme--color--input--border--on-primary--checked--invalid--rest: var(--l--color--red--dark--90);
846
+ --l--theme--color--input--border--on-primary--checked--invalid--focus: var(--l--color--red--dark--90);
847
+ --l--theme--color--input--border--on-primary--checked--invalid--hover: var(--l--color--red--dark--100);
848
+ --l--theme--color--input--border--on-primary--invalid--rest: var(--l--color--red--dark--90);
849
+ --l--theme--color--input--border--on-primary--invalid--focus: var(--l--color--red--dark--90);
850
+ --l--theme--color--input--border--on-primary--invalid--hover: var(--l--color--red--dark--100);
851
+ --l--theme--color--input--border--on-primary--disabled: var(--l--color--primary--100);
782
852
  --l--theme--color--input--border--on-subtle--rest: var(--l--color--neutral--120);
783
853
  --l--theme--color--input--border--on-subtle--focus: var(--l--color--neutral--120);
784
854
  --l--theme--color--input--border--on-subtle--hover: var(--l--color--neutral--120);
@@ -802,16 +872,26 @@
802
872
  --l--theme--color--input--content--on-default--checked--invalid--hover: var(--l--color--neutral--0);
803
873
  --l--theme--color--input--content--on-default--checked--invalid--focus: var(--l--color--neutral--0);
804
874
  --l--theme--color--input--content--on-default--disabled: var(--l--color--neutral--110);
805
- --l--theme--color--input--content--on-knockout--invalid--rest: var(--l--color--red--dark--130);
806
- --l--theme--color--input--content--on-knockout--invalid--hover: var(--l--color--red--dark--130);
807
- --l--theme--color--input--content--on-knockout--invalid--focus: var(--l--color--red--dark--130);
875
+ --l--theme--color--input--content--on-knockout--invalid--rest: var(--l--color--red--dark--150);
876
+ --l--theme--color--input--content--on-knockout--invalid--hover: var(--l--color--red--dark--150);
877
+ --l--theme--color--input--content--on-knockout--invalid--focus: var(--l--color--red--dark--150);
808
878
  --l--theme--color--input--content--on-knockout--checked--rest: var(--l--color--neutral--dark--0);
809
879
  --l--theme--color--input--content--on-knockout--checked--hover: var(--l--color--neutral--dark--0);
810
880
  --l--theme--color--input--content--on-knockout--checked--focus: var(--l--color--neutral--dark--0);
811
- --l--theme--color--input--content--on-knockout--checked--invalid--rest: var(--l--color--neutral--dark--0);
812
- --l--theme--color--input--content--on-knockout--checked--invalid--hover: var(--l--color--neutral--dark--0);
813
- --l--theme--color--input--content--on-knockout--checked--invalid--focus: var(--l--color--neutral--dark--0);
881
+ --l--theme--color--input--content--on-knockout--checked--invalid--rest: var(--l--color--neutral--dark--150);
882
+ --l--theme--color--input--content--on-knockout--checked--invalid--hover: var(--l--color--neutral--dark--150);
883
+ --l--theme--color--input--content--on-knockout--checked--invalid--focus: var(--l--color--neutral--dark--150);
814
884
  --l--theme--color--input--content--on-knockout--disabled: var(--l--color--neutral--dark--110);
885
+ --l--theme--color--input--content--on-primary--invalid--rest: var(--l--color--red--dark--150);
886
+ --l--theme--color--input--content--on-primary--invalid--hover: var(--l--color--red--dark--150);
887
+ --l--theme--color--input--content--on-primary--invalid--focus: var(--l--color--red--dark--150);
888
+ --l--theme--color--input--content--on-primary--checked--rest: var(--l--color--primary--dark--0);
889
+ --l--theme--color--input--content--on-primary--checked--hover: var(--l--color--primary--dark--0);
890
+ --l--theme--color--input--content--on-primary--checked--focus: var(--l--color--primary--dark--0);
891
+ --l--theme--color--input--content--on-primary--checked--invalid--rest: var(--l--color--red--dark--150);
892
+ --l--theme--color--input--content--on-primary--checked--invalid--hover: var(--l--color--red--dark--150);
893
+ --l--theme--color--input--content--on-primary--checked--invalid--focus: var(--l--color--red--dark--150);
894
+ --l--theme--color--input--content--on-primary--disabled: var(--l--color--primary--dark--110);
815
895
  --l--theme--color--input--content--on-subtle--invalid--rest: var(--l--color--red--130);
816
896
  --l--theme--color--input--content--on-subtle--invalid--hover: var(--l--color--red--130);
817
897
  --l--theme--color--input--content--on-subtle--invalid--focus: var(--l--color--red--130);
@@ -830,6 +910,10 @@
830
910
  --l--theme--color--input--placeholder--on-knockout--invalid--rest: var(--l--color--red--dark--110);
831
911
  --l--theme--color--input--placeholder--on-knockout--invalid--hover: var(--l--color--red--dark--110);
832
912
  --l--theme--color--input--placeholder--on-knockout--invalid--focus: var(--l--color--red--dark--110);
913
+ --l--theme--color--input--placeholder--on-primary--disabled: var(--l--color--primary--dark--110);
914
+ --l--theme--color--input--placeholder--on-primary--invalid--rest: var(--l--color--red--dark--110);
915
+ --l--theme--color--input--placeholder--on-primary--invalid--hover: var(--l--color--red--dark--110);
916
+ --l--theme--color--input--placeholder--on-primary--invalid--focus: var(--l--color--red--dark--110);
833
917
  --l--theme--color--input--placeholder--on-subtle--disabled: var(--l--color--neutral--110);
834
918
  --l--theme--color--input--placeholder--on-subtle--invalid--rest: var(--l--color--red--110);
835
919
  --l--theme--color--input--placeholder--on-subtle--invalid--hover: var(--l--color--red--110);
@@ -844,38 +928,53 @@
844
928
  --l--theme--color--interactive--background--primary--on-knockout--disabled: var(--l--color--neutral--dark--40);
845
929
  --l--theme--color--interactive--background--primary--on-knockout--focus: var(--l--color--neutral--dark--140);
846
930
  --l--theme--color--interactive--background--primary--on-knockout--hover: var(--l--color--neutral--dark--130);
931
+ --l--theme--color--interactive--background--primary--on-primary--rest: var(--l--color--primary--dark--140);
932
+ --l--theme--color--interactive--background--primary--on-primary--active: var(--l--color--primary--dark--140);
933
+ --l--theme--color--interactive--background--primary--on-primary--disabled: var(--l--color--primary--100);
934
+ --l--theme--color--interactive--background--primary--on-primary--focus: var(--l--color--primary--dark--140);
935
+ --l--theme--color--interactive--background--primary--on-primary--hover: var(--l--color--primary--dark--130);
847
936
  --l--theme--color--interactive--background--primary--on-subtle--rest: var(--l--color--neutral--140);
848
937
  --l--theme--color--interactive--background--primary--on-subtle--active: var(--l--color--neutral--140);
849
938
  --l--theme--color--interactive--background--primary--on-subtle--disabled: var(--l--color--neutral--40);
850
939
  --l--theme--color--interactive--background--primary--on-subtle--focus: var(--l--color--neutral--140);
851
940
  --l--theme--color--interactive--background--primary--on-subtle--hover: var(--l--color--neutral--130);
852
941
  --l--theme--color--interactive--background--secondary--on-default--rest: var(--l--color--neutral--alpha--0);
853
- --l--theme--color--interactive--background--secondary--on-default--active: var(--l--color--neutral--alpha--20);
942
+ --l--theme--color--interactive--background--secondary--on-default--active: var(--l--color--neutral--alpha--0);
854
943
  --l--theme--color--interactive--background--secondary--on-default--disabled: var(--l--color--neutral--40);
855
944
  --l--theme--color--interactive--background--secondary--on-default--focus: var(--l--color--neutral--alpha--0);
856
945
  --l--theme--color--interactive--background--secondary--on-default--hover: var(--l--color--neutral--alpha--20);
857
946
  --l--theme--color--interactive--background--secondary--on-knockout--rest: var(--l--color--neutral--alpha--dark--0);
858
- --l--theme--color--interactive--background--secondary--on-knockout--active: var(--l--color--neutral--alpha--dark--20);
947
+ --l--theme--color--interactive--background--secondary--on-knockout--active: var(--l--color--neutral--alpha--dark--0);
859
948
  --l--theme--color--interactive--background--secondary--on-knockout--disabled: var(--l--color--neutral--dark--40);
860
949
  --l--theme--color--interactive--background--secondary--on-knockout--focus: var(--l--color--neutral--alpha--dark--0);
861
950
  --l--theme--color--interactive--background--secondary--on-knockout--hover: var(--l--color--neutral--alpha--dark--20);
951
+ --l--theme--color--interactive--background--secondary--on-primary--rest: var(--l--color--primary--alpha--dark--0);
952
+ --l--theme--color--interactive--background--secondary--on-primary--active: var(--l--color--primary--alpha--dark--0);
953
+ --l--theme--color--interactive--background--secondary--on-primary--disabled: var(--l--color--primary--100);
954
+ --l--theme--color--interactive--background--secondary--on-primary--focus: var(--l--color--primary--alpha--dark--0);
955
+ --l--theme--color--interactive--background--secondary--on-primary--hover: var(--l--color--primary--alpha--dark--20);
862
956
  --l--theme--color--interactive--background--secondary--on-subtle--rest: var(--l--color--neutral--alpha--0);
863
- --l--theme--color--interactive--background--secondary--on-subtle--active: var(--l--color--neutral--alpha--20);
957
+ --l--theme--color--interactive--background--secondary--on-subtle--active: var(--l--color--neutral--alpha--0);
864
958
  --l--theme--color--interactive--background--secondary--on-subtle--disabled: var(--l--color--neutral--40);
865
959
  --l--theme--color--interactive--background--secondary--on-subtle--focus: var(--l--color--neutral--alpha--0);
866
960
  --l--theme--color--interactive--background--secondary--on-subtle--hover: var(--l--color--neutral--alpha--20);
867
961
  --l--theme--color--interactive--background--tertiary--on-default--rest: var(--l--color--neutral--alpha--0);
868
- --l--theme--color--interactive--background--tertiary--on-default--active: var(--l--color--neutral--alpha--20);
962
+ --l--theme--color--interactive--background--tertiary--on-default--active: var(--l--color--neutral--alpha--0);
869
963
  --l--theme--color--interactive--background--tertiary--on-default--disabled: var(--l--color--neutral--40);
870
964
  --l--theme--color--interactive--background--tertiary--on-default--focus: var(--l--color--neutral--alpha--0);
871
965
  --l--theme--color--interactive--background--tertiary--on-default--hover: var(--l--color--neutral--alpha--20);
872
966
  --l--theme--color--interactive--background--tertiary--on-knockout--rest: var(--l--color--neutral--alpha--dark--0);
873
- --l--theme--color--interactive--background--tertiary--on-knockout--active: var(--l--color--neutral--alpha--dark--20);
967
+ --l--theme--color--interactive--background--tertiary--on-knockout--active: var(--l--color--neutral--alpha--dark--0);
874
968
  --l--theme--color--interactive--background--tertiary--on-knockout--disabled: var(--l--color--neutral--dark--40);
875
969
  --l--theme--color--interactive--background--tertiary--on-knockout--focus: var(--l--color--neutral--alpha--dark--0);
876
970
  --l--theme--color--interactive--background--tertiary--on-knockout--hover: var(--l--color--neutral--alpha--dark--20);
971
+ --l--theme--color--interactive--background--tertiary--on-primary--rest: var(--l--color--primary--alpha--dark--0);
972
+ --l--theme--color--interactive--background--tertiary--on-primary--active: var(--l--color--primary--alpha--dark--0);
973
+ --l--theme--color--interactive--background--tertiary--on-primary--disabled: var(--l--color--primary--100);
974
+ --l--theme--color--interactive--background--tertiary--on-primary--focus: var(--l--color--primary--alpha--dark--0);
975
+ --l--theme--color--interactive--background--tertiary--on-primary--hover: var(--l--color--primary--alpha--dark--20);
877
976
  --l--theme--color--interactive--background--tertiary--on-subtle--rest: var(--l--color--neutral--alpha--0);
878
- --l--theme--color--interactive--background--tertiary--on-subtle--active: var(--l--color--neutral--alpha--20);
977
+ --l--theme--color--interactive--background--tertiary--on-subtle--active: var(--l--color--neutral--alpha--0);
879
978
  --l--theme--color--interactive--background--tertiary--on-subtle--disabled: var(--l--color--neutral--40);
880
979
  --l--theme--color--interactive--background--tertiary--on-subtle--focus: var(--l--color--neutral--alpha--0);
881
980
  --l--theme--color--interactive--background--tertiary--on-subtle--hover: var(--l--color--neutral--alpha--20);
@@ -889,6 +988,11 @@
889
988
  --l--theme--color--interactive--background--destructive--on-knockout--disabled: var(--l--color--neutral--dark--40);
890
989
  --l--theme--color--interactive--background--destructive--on-knockout--focus: var(--l--color--red--dark--90);
891
990
  --l--theme--color--interactive--background--destructive--on-knockout--hover: var(--l--color--red--dark--100);
991
+ --l--theme--color--interactive--background--destructive--on-primary--rest: var(--l--color--red--dark--90);
992
+ --l--theme--color--interactive--background--destructive--on-primary--active: var(--l--color--red--dark--100);
993
+ --l--theme--color--interactive--background--destructive--on-primary--disabled: var(--l--color--primary--100);
994
+ --l--theme--color--interactive--background--destructive--on-primary--focus: var(--l--color--red--dark--90);
995
+ --l--theme--color--interactive--background--destructive--on-primary--hover: var(--l--color--red--dark--100);
892
996
  --l--theme--color--interactive--background--destructive--on-subtle--rest: var(--l--color--red--90);
893
997
  --l--theme--color--interactive--background--destructive--on-subtle--active: var(--l--color--red--100);
894
998
  --l--theme--color--interactive--background--destructive--on-subtle--disabled: var(--l--color--neutral--40);
@@ -904,6 +1008,11 @@
904
1008
  --l--theme--color--interactive--border--primary--on-knockout--disabled: var(--l--color--neutral--dark--40);
905
1009
  --l--theme--color--interactive--border--primary--on-knockout--focus: var(--l--color--neutral--dark--140);
906
1010
  --l--theme--color--interactive--border--primary--on-knockout--hover: var(--l--color--neutral--dark--130);
1011
+ --l--theme--color--interactive--border--primary--on-primary--rest: var(--l--color--primary--dark--140);
1012
+ --l--theme--color--interactive--border--primary--on-primary--active: var(--l--color--primary--dark--140);
1013
+ --l--theme--color--interactive--border--primary--on-primary--disabled: var(--l--color--primary--100);
1014
+ --l--theme--color--interactive--border--primary--on-primary--focus: var(--l--color--primary--dark--140);
1015
+ --l--theme--color--interactive--border--primary--on-primary--hover: var(--l--color--primary--dark--130);
907
1016
  --l--theme--color--interactive--border--primary--on-subtle--rest: var(--l--color--neutral--140);
908
1017
  --l--theme--color--interactive--border--primary--on-subtle--active: var(--l--color--neutral--140);
909
1018
  --l--theme--color--interactive--border--primary--on-subtle--disabled: var(--l--color--neutral--40);
@@ -913,29 +1022,39 @@
913
1022
  --l--theme--color--interactive--border--secondary--on-default--active: var(--l--color--neutral--120);
914
1023
  --l--theme--color--interactive--border--secondary--on-default--disabled: var(--l--color--neutral--40);
915
1024
  --l--theme--color--interactive--border--secondary--on-default--focus: var(--l--color--neutral--120);
916
- --l--theme--color--interactive--border--secondary--on-default--hover: var(--l--color--neutral--110);
1025
+ --l--theme--color--interactive--border--secondary--on-default--hover: var(--l--color--neutral--120);
917
1026
  --l--theme--color--interactive--border--secondary--on-knockout--rest: var(--l--color--neutral--dark--120);
918
1027
  --l--theme--color--interactive--border--secondary--on-knockout--active: var(--l--color--neutral--dark--120);
919
1028
  --l--theme--color--interactive--border--secondary--on-knockout--disabled: var(--l--color--neutral--dark--40);
920
1029
  --l--theme--color--interactive--border--secondary--on-knockout--focus: var(--l--color--neutral--dark--120);
921
- --l--theme--color--interactive--border--secondary--on-knockout--hover: var(--l--color--neutral--dark--110);
1030
+ --l--theme--color--interactive--border--secondary--on-knockout--hover: var(--l--color--neutral--dark--120);
1031
+ --l--theme--color--interactive--border--secondary--on-primary--rest: var(--l--color--primary--dark--120);
1032
+ --l--theme--color--interactive--border--secondary--on-primary--active: var(--l--color--primary--dark--120);
1033
+ --l--theme--color--interactive--border--secondary--on-primary--disabled: var(--l--color--primary--100);
1034
+ --l--theme--color--interactive--border--secondary--on-primary--focus: var(--l--color--primary--dark--120);
1035
+ --l--theme--color--interactive--border--secondary--on-primary--hover: var(--l--color--primary--dark--120);
922
1036
  --l--theme--color--interactive--border--secondary--on-subtle--rest: var(--l--color--neutral--120);
923
1037
  --l--theme--color--interactive--border--secondary--on-subtle--active: var(--l--color--neutral--120);
924
1038
  --l--theme--color--interactive--border--secondary--on-subtle--disabled: var(--l--color--neutral--40);
925
1039
  --l--theme--color--interactive--border--secondary--on-subtle--focus: var(--l--color--neutral--120);
926
- --l--theme--color--interactive--border--secondary--on-subtle--hover: var(--l--color--neutral--110);
1040
+ --l--theme--color--interactive--border--secondary--on-subtle--hover: var(--l--color--neutral--120);
927
1041
  --l--theme--color--interactive--border--tertiary--on-default--rest: var(--l--color--neutral--alpha--0);
928
- --l--theme--color--interactive--border--tertiary--on-default--active: var(--l--color--neutral--alpha--20);
1042
+ --l--theme--color--interactive--border--tertiary--on-default--active: var(--l--color--neutral--alpha--0);
929
1043
  --l--theme--color--interactive--border--tertiary--on-default--disabled: var(--l--color--neutral--40);
930
1044
  --l--theme--color--interactive--border--tertiary--on-default--focus: var(--l--color--neutral--alpha--0);
931
1045
  --l--theme--color--interactive--border--tertiary--on-default--hover: var(--l--color--neutral--alpha--0);
932
1046
  --l--theme--color--interactive--border--tertiary--on-knockout--rest: var(--l--color--neutral--alpha--dark--0);
933
- --l--theme--color--interactive--border--tertiary--on-knockout--active: var(--l--color--neutral--alpha--dark--20);
1047
+ --l--theme--color--interactive--border--tertiary--on-knockout--active: var(--l--color--neutral--alpha--dark--0);
934
1048
  --l--theme--color--interactive--border--tertiary--on-knockout--disabled: var(--l--color--neutral--dark--40);
935
1049
  --l--theme--color--interactive--border--tertiary--on-knockout--focus: var(--l--color--neutral--alpha--dark--0);
936
1050
  --l--theme--color--interactive--border--tertiary--on-knockout--hover: var(--l--color--neutral--alpha--dark--0);
1051
+ --l--theme--color--interactive--border--tertiary--on-primary--rest: var(--l--color--primary--alpha--dark--0);
1052
+ --l--theme--color--interactive--border--tertiary--on-primary--active: var(--l--color--primary--alpha--dark--0);
1053
+ --l--theme--color--interactive--border--tertiary--on-primary--disabled: var(--l--color--primary--100);
1054
+ --l--theme--color--interactive--border--tertiary--on-primary--focus: var(--l--color--primary--alpha--dark--0);
1055
+ --l--theme--color--interactive--border--tertiary--on-primary--hover: var(--l--color--primary--alpha--dark--0);
937
1056
  --l--theme--color--interactive--border--tertiary--on-subtle--rest: var(--l--color--neutral--alpha--0);
938
- --l--theme--color--interactive--border--tertiary--on-subtle--active: var(--l--color--neutral--alpha--20);
1057
+ --l--theme--color--interactive--border--tertiary--on-subtle--active: var(--l--color--neutral--alpha--0);
939
1058
  --l--theme--color--interactive--border--tertiary--on-subtle--disabled: var(--l--color--neutral--40);
940
1059
  --l--theme--color--interactive--border--tertiary--on-subtle--focus: var(--l--color--neutral--alpha--0);
941
1060
  --l--theme--color--interactive--border--tertiary--on-subtle--hover: var(--l--color--neutral--alpha--0);
@@ -949,6 +1068,11 @@
949
1068
  --l--theme--color--interactive--border--destructive--on-knockout--disabled: var(--l--color--neutral--dark--40);
950
1069
  --l--theme--color--interactive--border--destructive--on-knockout--focus: var(--l--color--red--dark--90);
951
1070
  --l--theme--color--interactive--border--destructive--on-knockout--hover: var(--l--color--red--dark--100);
1071
+ --l--theme--color--interactive--border--destructive--on-primary--rest: var(--l--color--red--dark--90);
1072
+ --l--theme--color--interactive--border--destructive--on-primary--active: var(--l--color--red--dark--100);
1073
+ --l--theme--color--interactive--border--destructive--on-primary--disabled: var(--l--color--primary--100);
1074
+ --l--theme--color--interactive--border--destructive--on-primary--focus: var(--l--color--red--dark--90);
1075
+ --l--theme--color--interactive--border--destructive--on-primary--hover: var(--l--color--red--dark--100);
952
1076
  --l--theme--color--interactive--border--destructive--on-subtle--rest: var(--l--color--red--90);
953
1077
  --l--theme--color--interactive--border--destructive--on-subtle--active: var(--l--color--red--100);
954
1078
  --l--theme--color--interactive--border--destructive--on-subtle--disabled: var(--l--color--neutral--40);
@@ -964,6 +1088,11 @@
964
1088
  --l--theme--color--interactive--content--primary--on-knockout--disabled: var(--l--color--neutral--dark--110);
965
1089
  --l--theme--color--interactive--content--primary--on-knockout--focus: var(--l--color--neutral--dark--0);
966
1090
  --l--theme--color--interactive--content--primary--on-knockout--hover: var(--l--color--neutral--dark--0);
1091
+ --l--theme--color--interactive--content--primary--on-primary--rest: var(--l--color--primary--dark--0);
1092
+ --l--theme--color--interactive--content--primary--on-primary--active: var(--l--color--primary--dark--0);
1093
+ --l--theme--color--interactive--content--primary--on-primary--disabled: var(--l--color--primary--dark--110);
1094
+ --l--theme--color--interactive--content--primary--on-primary--focus: var(--l--color--primary--dark--0);
1095
+ --l--theme--color--interactive--content--primary--on-primary--hover: var(--l--color--primary--dark--0);
967
1096
  --l--theme--color--interactive--content--primary--on-subtle--rest: var(--l--color--neutral--0);
968
1097
  --l--theme--color--interactive--content--primary--on-subtle--active: var(--l--color--neutral--0);
969
1098
  --l--theme--color--interactive--content--primary--on-subtle--disabled: var(--l--color--neutral--110);
@@ -973,32 +1102,42 @@
973
1102
  --l--theme--color--interactive--content--secondary--on-default--active: var(--l--color--neutral--140);
974
1103
  --l--theme--color--interactive--content--secondary--on-default--disabled: var(--l--color--neutral--110);
975
1104
  --l--theme--color--interactive--content--secondary--on-default--focus: var(--l--color--neutral--140);
976
- --l--theme--color--interactive--content--secondary--on-default--hover: var(--l--color--neutral--130);
1105
+ --l--theme--color--interactive--content--secondary--on-default--hover: var(--l--color--neutral--150);
977
1106
  --l--theme--color--interactive--content--secondary--on-knockout--rest: var(--l--color--neutral--dark--140);
978
1107
  --l--theme--color--interactive--content--secondary--on-knockout--active: var(--l--color--neutral--dark--140);
979
1108
  --l--theme--color--interactive--content--secondary--on-knockout--disabled: var(--l--color--neutral--dark--110);
980
1109
  --l--theme--color--interactive--content--secondary--on-knockout--focus: var(--l--color--neutral--dark--140);
981
- --l--theme--color--interactive--content--secondary--on-knockout--hover: var(--l--color--neutral--dark--130);
1110
+ --l--theme--color--interactive--content--secondary--on-knockout--hover: var(--l--color--neutral--dark--150);
1111
+ --l--theme--color--interactive--content--secondary--on-primary--rest: var(--l--color--primary--dark--140);
1112
+ --l--theme--color--interactive--content--secondary--on-primary--active: var(--l--color--primary--dark--140);
1113
+ --l--theme--color--interactive--content--secondary--on-primary--disabled: var(--l--color--primary--dark--110);
1114
+ --l--theme--color--interactive--content--secondary--on-primary--focus: var(--l--color--primary--dark--140);
1115
+ --l--theme--color--interactive--content--secondary--on-primary--hover: var(--l--color--primary--dark--150);
982
1116
  --l--theme--color--interactive--content--secondary--on-subtle--rest: var(--l--color--neutral--140);
983
1117
  --l--theme--color--interactive--content--secondary--on-subtle--active: var(--l--color--neutral--140);
984
1118
  --l--theme--color--interactive--content--secondary--on-subtle--disabled: var(--l--color--neutral--110);
985
1119
  --l--theme--color--interactive--content--secondary--on-subtle--focus: var(--l--color--neutral--140);
986
- --l--theme--color--interactive--content--secondary--on-subtle--hover: var(--l--color--neutral--130);
1120
+ --l--theme--color--interactive--content--secondary--on-subtle--hover: var(--l--color--neutral--150);
987
1121
  --l--theme--color--interactive--content--tertiary--on-default--rest: var(--l--color--neutral--140);
988
1122
  --l--theme--color--interactive--content--tertiary--on-default--active: var(--l--color--neutral--140);
989
1123
  --l--theme--color--interactive--content--tertiary--on-default--disabled: var(--l--color--neutral--110);
990
1124
  --l--theme--color--interactive--content--tertiary--on-default--focus: var(--l--color--neutral--140);
991
- --l--theme--color--interactive--content--tertiary--on-default--hover: var(--l--color--neutral--130);
1125
+ --l--theme--color--interactive--content--tertiary--on-default--hover: var(--l--color--neutral--150);
992
1126
  --l--theme--color--interactive--content--tertiary--on-knockout--rest: var(--l--color--neutral--dark--140);
993
1127
  --l--theme--color--interactive--content--tertiary--on-knockout--active: var(--l--color--neutral--dark--140);
994
1128
  --l--theme--color--interactive--content--tertiary--on-knockout--disabled: var(--l--color--neutral--dark--110);
995
1129
  --l--theme--color--interactive--content--tertiary--on-knockout--focus: var(--l--color--neutral--dark--140);
996
- --l--theme--color--interactive--content--tertiary--on-knockout--hover: var(--l--color--neutral--dark--130);
1130
+ --l--theme--color--interactive--content--tertiary--on-knockout--hover: var(--l--color--neutral--dark--150);
1131
+ --l--theme--color--interactive--content--tertiary--on-primary--rest: var(--l--color--primary--dark--140);
1132
+ --l--theme--color--interactive--content--tertiary--on-primary--active: var(--l--color--primary--dark--140);
1133
+ --l--theme--color--interactive--content--tertiary--on-primary--disabled: var(--l--color--primary--dark--110);
1134
+ --l--theme--color--interactive--content--tertiary--on-primary--focus: var(--l--color--primary--dark--140);
1135
+ --l--theme--color--interactive--content--tertiary--on-primary--hover: var(--l--color--primary--dark--150);
997
1136
  --l--theme--color--interactive--content--tertiary--on-subtle--rest: var(--l--color--neutral--140);
998
1137
  --l--theme--color--interactive--content--tertiary--on-subtle--active: var(--l--color--neutral--140);
999
1138
  --l--theme--color--interactive--content--tertiary--on-subtle--disabled: var(--l--color--neutral--110);
1000
1139
  --l--theme--color--interactive--content--tertiary--on-subtle--focus: var(--l--color--neutral--140);
1001
- --l--theme--color--interactive--content--tertiary--on-subtle--hover: var(--l--color--neutral--130);
1140
+ --l--theme--color--interactive--content--tertiary--on-subtle--hover: var(--l--color--neutral--150);
1002
1141
  --l--theme--color--interactive--content--destructive--on-default--rest: var(--l--color--neutral--0);
1003
1142
  --l--theme--color--interactive--content--destructive--on-default--active: var(--l--color--neutral--0);
1004
1143
  --l--theme--color--interactive--content--destructive--on-default--disabled: var(--l--color--neutral--110);
@@ -1009,6 +1148,11 @@
1009
1148
  --l--theme--color--interactive--content--destructive--on-knockout--disabled: var(--l--color--neutral--dark--110);
1010
1149
  --l--theme--color--interactive--content--destructive--on-knockout--focus: var(--l--color--neutral--dark--150);
1011
1150
  --l--theme--color--interactive--content--destructive--on-knockout--hover: var(--l--color--neutral--dark--150);
1151
+ --l--theme--color--interactive--content--destructive--on-primary--rest: var(--l--color--primary--dark--150);
1152
+ --l--theme--color--interactive--content--destructive--on-primary--active: var(--l--color--primary--dark--150);
1153
+ --l--theme--color--interactive--content--destructive--on-primary--disabled: var(--l--color--primary--110);
1154
+ --l--theme--color--interactive--content--destructive--on-primary--focus: var(--l--color--primary--dark--150);
1155
+ --l--theme--color--interactive--content--destructive--on-primary--hover: var(--l--color--primary--dark--150);
1012
1156
  --l--theme--color--interactive--content--destructive--on-subtle--rest: var(--l--color--neutral--0);
1013
1157
  --l--theme--color--interactive--content--destructive--on-subtle--active: var(--l--color--neutral--0);
1014
1158
  --l--theme--color--interactive--content--destructive--on-subtle--disabled: var(--l--color--neutral--110);
@@ -1024,6 +1168,11 @@
1024
1168
  --l--theme--color--link--content--primary--on-knockout--focus: var(--l--color--primary--dark--110);
1025
1169
  --l--theme--color--link--content--primary--on-knockout--active: var(--l--color--primary--dark--110);
1026
1170
  --l--theme--color--link--content--primary--on-knockout--visited: var(--l--color--primary--dark--110);
1171
+ --l--theme--color--link--content--primary--on-primary--rest: var(--l--color--primary--dark--140);
1172
+ --l--theme--color--link--content--primary--on-primary--hover: var(--l--color--primary--dark--150);
1173
+ --l--theme--color--link--content--primary--on-primary--focus: var(--l--color--primary--dark--140);
1174
+ --l--theme--color--link--content--primary--on-primary--active: var(--l--color--primary--dark--140);
1175
+ --l--theme--color--link--content--primary--on-primary--visited: var(--l--color--primary--dark--140);
1027
1176
  --l--theme--color--link--content--primary--on-subtle--rest: var(--l--color--primary--110);
1028
1177
  --l--theme--color--link--content--primary--on-subtle--hover: var(--l--color--primary--120);
1029
1178
  --l--theme--color--link--content--primary--on-subtle--focus: var(--l--color--primary--110);
@@ -1039,6 +1188,11 @@
1039
1188
  --l--theme--color--link--content--secondary--on-knockout--focus: var(--l--color--neutral--dark--140);
1040
1189
  --l--theme--color--link--content--secondary--on-knockout--active: var(--l--color--neutral--dark--140);
1041
1190
  --l--theme--color--link--content--secondary--on-knockout--visited: var(--l--color--neutral--dark--140);
1191
+ --l--theme--color--link--content--secondary--on-primary--rest: var(--l--color--primary--dark--140);
1192
+ --l--theme--color--link--content--secondary--on-primary--hover: var(--l--color--primary--dark--150);
1193
+ --l--theme--color--link--content--secondary--on-primary--focus: var(--l--color--primary--dark--140);
1194
+ --l--theme--color--link--content--secondary--on-primary--active: var(--l--color--primary--dark--140);
1195
+ --l--theme--color--link--content--secondary--on-primary--visited: var(--l--color--primary--dark--140);
1042
1196
  --l--theme--color--link--content--secondary--on-subtle--rest: var(--l--color--neutral--140);
1043
1197
  --l--theme--color--link--content--secondary--on-subtle--hover: var(--l--color--neutral--130);
1044
1198
  --l--theme--color--link--content--secondary--on-subtle--focus: var(--l--color--neutral--140);
@@ -1054,6 +1208,11 @@
1054
1208
  --l--theme--color--link--content--tertiary--on-knockout--focus: var(--l--color--neutral--dark--110);
1055
1209
  --l--theme--color--link--content--tertiary--on-knockout--active: var(--l--color--neutral--dark--110);
1056
1210
  --l--theme--color--link--content--tertiary--on-knockout--visited: var(--l--color--neutral--dark--110);
1211
+ --l--theme--color--link--content--tertiary--on-primary--rest: var(--l--color--primary--dark--130);
1212
+ --l--theme--color--link--content--tertiary--on-primary--hover: var(--l--color--primary--dark--140);
1213
+ --l--theme--color--link--content--tertiary--on-primary--focus: var(--l--color--primary--dark--130);
1214
+ --l--theme--color--link--content--tertiary--on-primary--active: var(--l--color--primary--dark--130);
1215
+ --l--theme--color--link--content--tertiary--on-primary--visited: var(--l--color--primary--dark--130);
1057
1216
  --l--theme--color--link--content--tertiary--on-subtle--rest: var(--l--color--neutral--110);
1058
1217
  --l--theme--color--link--content--tertiary--on-subtle--hover: var(--l--color--neutral--120);
1059
1218
  --l--theme--color--link--content--tertiary--on-subtle--focus: var(--l--color--neutral--110);
@@ -1061,21 +1220,27 @@
1061
1220
  --l--theme--color--link--content--tertiary--on-subtle--visited: var(--l--color--neutral--110);
1062
1221
  --l--theme--color--messaging--content--destructive--on-default: var(--l--color--red--110);
1063
1222
  --l--theme--color--messaging--content--destructive--on-knockout: var(--l--color--red--dark--110);
1223
+ --l--theme--color--messaging--content--destructive--on-primary: var(--l--color--red--dark--110);
1064
1224
  --l--theme--color--messaging--content--destructive--on-subtle: var(--l--color--red--120);
1065
1225
  --l--theme--color--messaging--content--informative--on-default: var(--l--color--blue--110);
1066
1226
  --l--theme--color--messaging--content--informative--on-knockout: var(--l--color--blue--dark--110);
1227
+ --l--theme--color--messaging--content--informative--on-primary: var(--l--color--blue--dark--110);
1067
1228
  --l--theme--color--messaging--content--informative--on-subtle: var(--l--color--blue--120);
1068
1229
  --l--theme--color--messaging--content--positive--on-default: var(--l--color--green--110);
1069
1230
  --l--theme--color--messaging--content--positive--on-knockout: var(--l--color--green--dark--110);
1231
+ --l--theme--color--messaging--content--positive--on-primary: var(--l--color--green--dark--110);
1070
1232
  --l--theme--color--messaging--content--positive--on-subtle: var(--l--color--green--120);
1071
1233
  --l--theme--color--messaging--content--warning--on-default: var(--l--color--yellow--110);
1072
1234
  --l--theme--color--messaging--content--warning--on-knockout: var(--l--color--yellow--dark--110);
1235
+ --l--theme--color--messaging--content--warning--on-primary: var(--l--color--yellow--dark--110);
1073
1236
  --l--theme--color--messaging--content--warning--on-subtle: var(--l--color--yellow--120);
1074
1237
  --l--theme--color--selection--background--on-default: var(--l--color--neutral--140);
1075
1238
  --l--theme--color--selection--background--on-knockout: var(--l--color--neutral--dark--140);
1239
+ --l--theme--color--selection--background--on-primary: var(--l--color--primary--dark--140);
1076
1240
  --l--theme--color--selection--background--on-subtle: var(--l--color--neutral--140);
1077
1241
  --l--theme--color--selection--content--on-default: var(--l--color--neutral--0);
1078
1242
  --l--theme--color--selection--content--on-knockout: var(--l--color--neutral--dark--0);
1243
+ --l--theme--color--selection--content--on-primary: var(--l--color--primary--dark--0);
1079
1244
  --l--theme--color--selection--content--on-subtle: var(--l--color--neutral--0);
1080
1245
  --l--typography--text-decoration-thickness--sm: var(--l--units--relative--1);
1081
1246
  --l--typography--text-decoration-thickness--md: var(--l--units--relative--2);
@@ -1376,9 +1541,11 @@
1376
1541
  --l--theme--border--text-highlight--width: var(--l--theme--border--width--none);
1377
1542
  --l--theme--color--dialog--background--on-default: var(--l--theme--color--background--default);
1378
1543
  --l--theme--color--dialog--background--on-knockout: var(--l--theme--color--background--knockout);
1544
+ --l--theme--color--dialog--background--on-primary: var(--l--theme--color--background--primary);
1379
1545
  --l--theme--color--dialog--background--on-subtle: var(--l--theme--color--background--subtle);
1380
1546
  --l--theme--color--dialog--content--on-default: var(--l--theme--color--content--primary--on-default);
1381
1547
  --l--theme--color--dialog--content--on-knockout: var(--l--theme--color--content--primary--on-knockout);
1548
+ --l--theme--color--dialog--content--on-primary: var(--l--theme--color--content--primary--on-primary);
1382
1549
  --l--theme--color--dialog--content--on-subtle: var(--l--theme--color--content--primary--on-subtle);
1383
1550
  --l--theme--color--input--content--on-default--rest: var(--l--theme--color--content--primary--on-default);
1384
1551
  --l--theme--color--input--content--on-default--hover: var(--l--theme--color--content--primary--on-default);
@@ -1386,6 +1553,9 @@
1386
1553
  --l--theme--color--input--content--on-knockout--rest: var(--l--theme--color--content--primary--on-knockout);
1387
1554
  --l--theme--color--input--content--on-knockout--hover: var(--l--theme--color--content--primary--on-knockout);
1388
1555
  --l--theme--color--input--content--on-knockout--focus: var(--l--theme--color--content--primary--on-knockout);
1556
+ --l--theme--color--input--content--on-primary--rest: var(--l--theme--color--content--primary--on-primary);
1557
+ --l--theme--color--input--content--on-primary--hover: var(--l--theme--color--content--primary--on-primary);
1558
+ --l--theme--color--input--content--on-primary--focus: var(--l--theme--color--content--primary--on-primary);
1389
1559
  --l--theme--color--input--content--on-subtle--rest: var(--l--theme--color--content--primary--on-default);
1390
1560
  --l--theme--color--input--content--on-subtle--hover: var(--l--theme--color--content--primary--on-default);
1391
1561
  --l--theme--color--input--content--on-subtle--focus: var(--l--theme--color--content--primary--on-default);
@@ -1395,6 +1565,9 @@
1395
1565
  --l--theme--color--input--placeholder--on-knockout--rest: var(--l--theme--color--content--secondary--on-knockout);
1396
1566
  --l--theme--color--input--placeholder--on-knockout--hover: var(--l--theme--color--content--secondary--on-knockout);
1397
1567
  --l--theme--color--input--placeholder--on-knockout--focus: var(--l--theme--color--content--secondary--on-knockout);
1568
+ --l--theme--color--input--placeholder--on-primary--rest: var(--l--theme--color--content--secondary--on-primary);
1569
+ --l--theme--color--input--placeholder--on-primary--hover: var(--l--theme--color--content--secondary--on-primary);
1570
+ --l--theme--color--input--placeholder--on-primary--focus: var(--l--theme--color--content--secondary--on-primary);
1398
1571
  --l--theme--color--input--placeholder--on-subtle--rest: var(--l--theme--color--content--secondary--on-subtle);
1399
1572
  --l--theme--color--input--placeholder--on-subtle--hover: var(--l--theme--color--content--secondary--on-subtle);
1400
1573
  --l--theme--color--input--placeholder--on-subtle--focus: var(--l--theme--color--content--secondary--on-subtle);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@withlayers/tokens",
3
- "version": "0.29.0",
3
+ "version": "0.30.0",
4
4
  "description": "Design tokens layer",
5
5
  "license": "MIT",
6
6
  "author": "Dmitry Mayorov",