@withlayers/tokens 0.28.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 +314 -93
  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,86 +585,178 @@
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
- --l--theme--color--feedback--content--destructive--on-default: var(--l--color--red--130);
646
- --l--theme--color--feedback--content--destructive--on-knockout: var(--l--color--red--dark--130);
647
- --l--theme--color--feedback--content--destructive--on-subtle: var(--l--color--red--130);
648
- --l--theme--color--feedback--content--informative--on-default: var(--l--color--blue--130);
649
- --l--theme--color--feedback--content--informative--on-knockout: var(--l--color--blue--dark--130);
650
- --l--theme--color--feedback--content--informative--on-subtle: var(--l--color--blue--130);
651
- --l--theme--color--feedback--content--positive--on-default: var(--l--color--green--130);
652
- --l--theme--color--feedback--content--positive--on-knockout: var(--l--color--green--dark--130);
653
- --l--theme--color--feedback--content--positive--on-subtle: var(--l--color--green--130);
654
- --l--theme--color--feedback--content--warning--on-default: var(--l--color--yellow--130);
655
- --l--theme--color--feedback--content--warning--on-knockout: var(--l--color--yellow--dark--130);
656
- --l--theme--color--feedback--content--warning--on-subtle: var(--l--color--yellow--130);
665
+ --l--theme--color--feedback--content--destructive--on-default--rest: var(--l--color--red--130);
666
+ --l--theme--color--feedback--content--destructive--on-default--hover: var(--l--color--red--140);
667
+ --l--theme--color--feedback--content--destructive--on-default--focus: var(--l--color--red--130);
668
+ --l--theme--color--feedback--content--destructive--on-default--active: var(--l--color--red--130);
669
+ --l--theme--color--feedback--content--destructive--on-default--visited: var(--l--color--red--130);
670
+ --l--theme--color--feedback--content--destructive--on-knockout--rest: var(--l--color--red--dark--130);
671
+ --l--theme--color--feedback--content--destructive--on-knockout--hover: var(--l--color--red--dark--140);
672
+ --l--theme--color--feedback--content--destructive--on-knockout--focus: var(--l--color--red--dark--130);
673
+ --l--theme--color--feedback--content--destructive--on-knockout--active: var(--l--color--red--dark--130);
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);
680
+ --l--theme--color--feedback--content--destructive--on-subtle--rest: var(--l--color--red--130);
681
+ --l--theme--color--feedback--content--destructive--on-subtle--hover: var(--l--color--red--140);
682
+ --l--theme--color--feedback--content--destructive--on-subtle--focus: var(--l--color--red--130);
683
+ --l--theme--color--feedback--content--destructive--on-subtle--active: var(--l--color--red--130);
684
+ --l--theme--color--feedback--content--destructive--on-subtle--visited: var(--l--color--red--130);
685
+ --l--theme--color--feedback--content--informative--on-default--rest: var(--l--color--blue--130);
686
+ --l--theme--color--feedback--content--informative--on-default--hover: var(--l--color--blue--140);
687
+ --l--theme--color--feedback--content--informative--on-default--focus: var(--l--color--blue--130);
688
+ --l--theme--color--feedback--content--informative--on-default--active: var(--l--color--blue--130);
689
+ --l--theme--color--feedback--content--informative--on-default--visited: var(--l--color--blue--130);
690
+ --l--theme--color--feedback--content--informative--on-knockout--rest: var(--l--color--blue--dark--130);
691
+ --l--theme--color--feedback--content--informative--on-knockout--hover: var(--l--color--blue--dark--140);
692
+ --l--theme--color--feedback--content--informative--on-knockout--focus: var(--l--color--blue--dark--130);
693
+ --l--theme--color--feedback--content--informative--on-knockout--active: var(--l--color--blue--dark--130);
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);
700
+ --l--theme--color--feedback--content--informative--on-subtle--rest: var(--l--color--blue--130);
701
+ --l--theme--color--feedback--content--informative--on-subtle--hover: var(--l--color--blue--140);
702
+ --l--theme--color--feedback--content--informative--on-subtle--focus: var(--l--color--blue--130);
703
+ --l--theme--color--feedback--content--informative--on-subtle--active: var(--l--color--blue--130);
704
+ --l--theme--color--feedback--content--informative--on-subtle--visited: var(--l--color--blue--130);
705
+ --l--theme--color--feedback--content--positive--on-default--rest: var(--l--color--green--130);
706
+ --l--theme--color--feedback--content--positive--on-default--hover: var(--l--color--green--140);
707
+ --l--theme--color--feedback--content--positive--on-default--focus: var(--l--color--green--130);
708
+ --l--theme--color--feedback--content--positive--on-default--active: var(--l--color--green--130);
709
+ --l--theme--color--feedback--content--positive--on-default--visited: var(--l--color--green--130);
710
+ --l--theme--color--feedback--content--positive--on-knockout--rest: var(--l--color--green--dark--130);
711
+ --l--theme--color--feedback--content--positive--on-knockout--hover: var(--l--color--green--dark--140);
712
+ --l--theme--color--feedback--content--positive--on-knockout--focus: var(--l--color--green--dark--130);
713
+ --l--theme--color--feedback--content--positive--on-knockout--active: var(--l--color--green--dark--130);
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);
720
+ --l--theme--color--feedback--content--positive--on-subtle--rest: var(--l--color--green--130);
721
+ --l--theme--color--feedback--content--positive--on-subtle--hover: var(--l--color--green--140);
722
+ --l--theme--color--feedback--content--positive--on-subtle--focus: var(--l--color--green--130);
723
+ --l--theme--color--feedback--content--positive--on-subtle--active: var(--l--color--green--130);
724
+ --l--theme--color--feedback--content--positive--on-subtle--visited: var(--l--color--green--130);
725
+ --l--theme--color--feedback--content--warning--on-default--rest: var(--l--color--yellow--130);
726
+ --l--theme--color--feedback--content--warning--on-default--hover: var(--l--color--yellow--140);
727
+ --l--theme--color--feedback--content--warning--on-default--focus: var(--l--color--yellow--130);
728
+ --l--theme--color--feedback--content--warning--on-default--active: var(--l--color--yellow--130);
729
+ --l--theme--color--feedback--content--warning--on-default--visited: var(--l--color--yellow--130);
730
+ --l--theme--color--feedback--content--warning--on-knockout--rest: var(--l--color--yellow--dark--130);
731
+ --l--theme--color--feedback--content--warning--on-knockout--hover: var(--l--color--yellow--dark--140);
732
+ --l--theme--color--feedback--content--warning--on-knockout--focus: var(--l--color--yellow--dark--130);
733
+ --l--theme--color--feedback--content--warning--on-knockout--active: var(--l--color--yellow--dark--130);
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);
740
+ --l--theme--color--feedback--content--warning--on-subtle--rest: var(--l--color--yellow--130);
741
+ --l--theme--color--feedback--content--warning--on-subtle--hover: var(--l--color--yellow--140);
742
+ --l--theme--color--feedback--content--warning--on-subtle--focus: var(--l--color--yellow--130);
743
+ --l--theme--color--feedback--content--warning--on-subtle--active: var(--l--color--yellow--130);
744
+ --l--theme--color--feedback--content--warning--on-subtle--visited: var(--l--color--yellow--130);
657
745
  --l--theme--color--feedback--outline--destructive--on-default: var(--l--color--red--120);
658
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);
659
748
  --l--theme--color--feedback--outline--destructive--on-subtle: var(--l--color--red--120);
660
749
  --l--theme--color--feedback--outline--informative--on-default: var(--l--color--blue--120);
661
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);
662
752
  --l--theme--color--feedback--outline--informative--on-subtle: var(--l--color--blue--120);
663
753
  --l--theme--color--feedback--outline--positive--on-default: var(--l--color--green--120);
664
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);
665
756
  --l--theme--color--feedback--outline--positive--on-subtle: var(--l--color--green--120);
666
757
  --l--theme--color--feedback--outline--warning--on-default: var(--l--color--yellow--120);
667
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);
668
760
  --l--theme--color--feedback--outline--warning--on-subtle: var(--l--color--yellow--120);
669
761
  --l--theme--color--input--background--on-default--rest: var(--l--color--neutral--alpha--0);
670
762
  --l--theme--color--input--background--on-default--focus: var(--l--color--neutral--alpha--0);
@@ -692,6 +784,19 @@
692
784
  --l--theme--color--input--background--on-knockout--invalid--focus: var(--l--color--red--alpha--dark--0);
693
785
  --l--theme--color--input--background--on-knockout--invalid--hover: var(--l--color--red--alpha--dark--10);
694
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);
695
800
  --l--theme--color--input--background--on-subtle--rest: var(--l--color--neutral--alpha--0);
696
801
  --l--theme--color--input--background--on-subtle--focus: var(--l--color--neutral--alpha--0);
697
802
  --l--theme--color--input--background--on-subtle--hover: var(--l--color--neutral--alpha--10);
@@ -731,6 +836,19 @@
731
836
  --l--theme--color--input--border--on-knockout--invalid--focus: var(--l--color--red--dark--90);
732
837
  --l--theme--color--input--border--on-knockout--invalid--hover: var(--l--color--red--dark--100);
733
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);
734
852
  --l--theme--color--input--border--on-subtle--rest: var(--l--color--neutral--120);
735
853
  --l--theme--color--input--border--on-subtle--focus: var(--l--color--neutral--120);
736
854
  --l--theme--color--input--border--on-subtle--hover: var(--l--color--neutral--120);
@@ -754,16 +872,26 @@
754
872
  --l--theme--color--input--content--on-default--checked--invalid--hover: var(--l--color--neutral--0);
755
873
  --l--theme--color--input--content--on-default--checked--invalid--focus: var(--l--color--neutral--0);
756
874
  --l--theme--color--input--content--on-default--disabled: var(--l--color--neutral--110);
757
- --l--theme--color--input--content--on-knockout--invalid--rest: var(--l--color--red--dark--130);
758
- --l--theme--color--input--content--on-knockout--invalid--hover: var(--l--color--red--dark--130);
759
- --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);
760
878
  --l--theme--color--input--content--on-knockout--checked--rest: var(--l--color--neutral--dark--0);
761
879
  --l--theme--color--input--content--on-knockout--checked--hover: var(--l--color--neutral--dark--0);
762
880
  --l--theme--color--input--content--on-knockout--checked--focus: var(--l--color--neutral--dark--0);
763
- --l--theme--color--input--content--on-knockout--checked--invalid--rest: var(--l--color--neutral--dark--0);
764
- --l--theme--color--input--content--on-knockout--checked--invalid--hover: var(--l--color--neutral--dark--0);
765
- --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);
766
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);
767
895
  --l--theme--color--input--content--on-subtle--invalid--rest: var(--l--color--red--130);
768
896
  --l--theme--color--input--content--on-subtle--invalid--hover: var(--l--color--red--130);
769
897
  --l--theme--color--input--content--on-subtle--invalid--focus: var(--l--color--red--130);
@@ -782,6 +910,10 @@
782
910
  --l--theme--color--input--placeholder--on-knockout--invalid--rest: var(--l--color--red--dark--110);
783
911
  --l--theme--color--input--placeholder--on-knockout--invalid--hover: var(--l--color--red--dark--110);
784
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);
785
917
  --l--theme--color--input--placeholder--on-subtle--disabled: var(--l--color--neutral--110);
786
918
  --l--theme--color--input--placeholder--on-subtle--invalid--rest: var(--l--color--red--110);
787
919
  --l--theme--color--input--placeholder--on-subtle--invalid--hover: var(--l--color--red--110);
@@ -796,38 +928,53 @@
796
928
  --l--theme--color--interactive--background--primary--on-knockout--disabled: var(--l--color--neutral--dark--40);
797
929
  --l--theme--color--interactive--background--primary--on-knockout--focus: var(--l--color--neutral--dark--140);
798
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);
799
936
  --l--theme--color--interactive--background--primary--on-subtle--rest: var(--l--color--neutral--140);
800
937
  --l--theme--color--interactive--background--primary--on-subtle--active: var(--l--color--neutral--140);
801
938
  --l--theme--color--interactive--background--primary--on-subtle--disabled: var(--l--color--neutral--40);
802
939
  --l--theme--color--interactive--background--primary--on-subtle--focus: var(--l--color--neutral--140);
803
940
  --l--theme--color--interactive--background--primary--on-subtle--hover: var(--l--color--neutral--130);
804
941
  --l--theme--color--interactive--background--secondary--on-default--rest: var(--l--color--neutral--alpha--0);
805
- --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);
806
943
  --l--theme--color--interactive--background--secondary--on-default--disabled: var(--l--color--neutral--40);
807
944
  --l--theme--color--interactive--background--secondary--on-default--focus: var(--l--color--neutral--alpha--0);
808
945
  --l--theme--color--interactive--background--secondary--on-default--hover: var(--l--color--neutral--alpha--20);
809
946
  --l--theme--color--interactive--background--secondary--on-knockout--rest: var(--l--color--neutral--alpha--dark--0);
810
- --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);
811
948
  --l--theme--color--interactive--background--secondary--on-knockout--disabled: var(--l--color--neutral--dark--40);
812
949
  --l--theme--color--interactive--background--secondary--on-knockout--focus: var(--l--color--neutral--alpha--dark--0);
813
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);
814
956
  --l--theme--color--interactive--background--secondary--on-subtle--rest: var(--l--color--neutral--alpha--0);
815
- --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);
816
958
  --l--theme--color--interactive--background--secondary--on-subtle--disabled: var(--l--color--neutral--40);
817
959
  --l--theme--color--interactive--background--secondary--on-subtle--focus: var(--l--color--neutral--alpha--0);
818
960
  --l--theme--color--interactive--background--secondary--on-subtle--hover: var(--l--color--neutral--alpha--20);
819
961
  --l--theme--color--interactive--background--tertiary--on-default--rest: var(--l--color--neutral--alpha--0);
820
- --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);
821
963
  --l--theme--color--interactive--background--tertiary--on-default--disabled: var(--l--color--neutral--40);
822
964
  --l--theme--color--interactive--background--tertiary--on-default--focus: var(--l--color--neutral--alpha--0);
823
965
  --l--theme--color--interactive--background--tertiary--on-default--hover: var(--l--color--neutral--alpha--20);
824
966
  --l--theme--color--interactive--background--tertiary--on-knockout--rest: var(--l--color--neutral--alpha--dark--0);
825
- --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);
826
968
  --l--theme--color--interactive--background--tertiary--on-knockout--disabled: var(--l--color--neutral--dark--40);
827
969
  --l--theme--color--interactive--background--tertiary--on-knockout--focus: var(--l--color--neutral--alpha--dark--0);
828
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);
829
976
  --l--theme--color--interactive--background--tertiary--on-subtle--rest: var(--l--color--neutral--alpha--0);
830
- --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);
831
978
  --l--theme--color--interactive--background--tertiary--on-subtle--disabled: var(--l--color--neutral--40);
832
979
  --l--theme--color--interactive--background--tertiary--on-subtle--focus: var(--l--color--neutral--alpha--0);
833
980
  --l--theme--color--interactive--background--tertiary--on-subtle--hover: var(--l--color--neutral--alpha--20);
@@ -841,6 +988,11 @@
841
988
  --l--theme--color--interactive--background--destructive--on-knockout--disabled: var(--l--color--neutral--dark--40);
842
989
  --l--theme--color--interactive--background--destructive--on-knockout--focus: var(--l--color--red--dark--90);
843
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);
844
996
  --l--theme--color--interactive--background--destructive--on-subtle--rest: var(--l--color--red--90);
845
997
  --l--theme--color--interactive--background--destructive--on-subtle--active: var(--l--color--red--100);
846
998
  --l--theme--color--interactive--background--destructive--on-subtle--disabled: var(--l--color--neutral--40);
@@ -856,6 +1008,11 @@
856
1008
  --l--theme--color--interactive--border--primary--on-knockout--disabled: var(--l--color--neutral--dark--40);
857
1009
  --l--theme--color--interactive--border--primary--on-knockout--focus: var(--l--color--neutral--dark--140);
858
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);
859
1016
  --l--theme--color--interactive--border--primary--on-subtle--rest: var(--l--color--neutral--140);
860
1017
  --l--theme--color--interactive--border--primary--on-subtle--active: var(--l--color--neutral--140);
861
1018
  --l--theme--color--interactive--border--primary--on-subtle--disabled: var(--l--color--neutral--40);
@@ -865,29 +1022,39 @@
865
1022
  --l--theme--color--interactive--border--secondary--on-default--active: var(--l--color--neutral--120);
866
1023
  --l--theme--color--interactive--border--secondary--on-default--disabled: var(--l--color--neutral--40);
867
1024
  --l--theme--color--interactive--border--secondary--on-default--focus: var(--l--color--neutral--120);
868
- --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);
869
1026
  --l--theme--color--interactive--border--secondary--on-knockout--rest: var(--l--color--neutral--dark--120);
870
1027
  --l--theme--color--interactive--border--secondary--on-knockout--active: var(--l--color--neutral--dark--120);
871
1028
  --l--theme--color--interactive--border--secondary--on-knockout--disabled: var(--l--color--neutral--dark--40);
872
1029
  --l--theme--color--interactive--border--secondary--on-knockout--focus: var(--l--color--neutral--dark--120);
873
- --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);
874
1036
  --l--theme--color--interactive--border--secondary--on-subtle--rest: var(--l--color--neutral--120);
875
1037
  --l--theme--color--interactive--border--secondary--on-subtle--active: var(--l--color--neutral--120);
876
1038
  --l--theme--color--interactive--border--secondary--on-subtle--disabled: var(--l--color--neutral--40);
877
1039
  --l--theme--color--interactive--border--secondary--on-subtle--focus: var(--l--color--neutral--120);
878
- --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);
879
1041
  --l--theme--color--interactive--border--tertiary--on-default--rest: var(--l--color--neutral--alpha--0);
880
- --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);
881
1043
  --l--theme--color--interactive--border--tertiary--on-default--disabled: var(--l--color--neutral--40);
882
1044
  --l--theme--color--interactive--border--tertiary--on-default--focus: var(--l--color--neutral--alpha--0);
883
1045
  --l--theme--color--interactive--border--tertiary--on-default--hover: var(--l--color--neutral--alpha--0);
884
1046
  --l--theme--color--interactive--border--tertiary--on-knockout--rest: var(--l--color--neutral--alpha--dark--0);
885
- --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);
886
1048
  --l--theme--color--interactive--border--tertiary--on-knockout--disabled: var(--l--color--neutral--dark--40);
887
1049
  --l--theme--color--interactive--border--tertiary--on-knockout--focus: var(--l--color--neutral--alpha--dark--0);
888
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);
889
1056
  --l--theme--color--interactive--border--tertiary--on-subtle--rest: var(--l--color--neutral--alpha--0);
890
- --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);
891
1058
  --l--theme--color--interactive--border--tertiary--on-subtle--disabled: var(--l--color--neutral--40);
892
1059
  --l--theme--color--interactive--border--tertiary--on-subtle--focus: var(--l--color--neutral--alpha--0);
893
1060
  --l--theme--color--interactive--border--tertiary--on-subtle--hover: var(--l--color--neutral--alpha--0);
@@ -901,6 +1068,11 @@
901
1068
  --l--theme--color--interactive--border--destructive--on-knockout--disabled: var(--l--color--neutral--dark--40);
902
1069
  --l--theme--color--interactive--border--destructive--on-knockout--focus: var(--l--color--red--dark--90);
903
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);
904
1076
  --l--theme--color--interactive--border--destructive--on-subtle--rest: var(--l--color--red--90);
905
1077
  --l--theme--color--interactive--border--destructive--on-subtle--active: var(--l--color--red--100);
906
1078
  --l--theme--color--interactive--border--destructive--on-subtle--disabled: var(--l--color--neutral--40);
@@ -916,6 +1088,11 @@
916
1088
  --l--theme--color--interactive--content--primary--on-knockout--disabled: var(--l--color--neutral--dark--110);
917
1089
  --l--theme--color--interactive--content--primary--on-knockout--focus: var(--l--color--neutral--dark--0);
918
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);
919
1096
  --l--theme--color--interactive--content--primary--on-subtle--rest: var(--l--color--neutral--0);
920
1097
  --l--theme--color--interactive--content--primary--on-subtle--active: var(--l--color--neutral--0);
921
1098
  --l--theme--color--interactive--content--primary--on-subtle--disabled: var(--l--color--neutral--110);
@@ -925,32 +1102,42 @@
925
1102
  --l--theme--color--interactive--content--secondary--on-default--active: var(--l--color--neutral--140);
926
1103
  --l--theme--color--interactive--content--secondary--on-default--disabled: var(--l--color--neutral--110);
927
1104
  --l--theme--color--interactive--content--secondary--on-default--focus: var(--l--color--neutral--140);
928
- --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);
929
1106
  --l--theme--color--interactive--content--secondary--on-knockout--rest: var(--l--color--neutral--dark--140);
930
1107
  --l--theme--color--interactive--content--secondary--on-knockout--active: var(--l--color--neutral--dark--140);
931
1108
  --l--theme--color--interactive--content--secondary--on-knockout--disabled: var(--l--color--neutral--dark--110);
932
1109
  --l--theme--color--interactive--content--secondary--on-knockout--focus: var(--l--color--neutral--dark--140);
933
- --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);
934
1116
  --l--theme--color--interactive--content--secondary--on-subtle--rest: var(--l--color--neutral--140);
935
1117
  --l--theme--color--interactive--content--secondary--on-subtle--active: var(--l--color--neutral--140);
936
1118
  --l--theme--color--interactive--content--secondary--on-subtle--disabled: var(--l--color--neutral--110);
937
1119
  --l--theme--color--interactive--content--secondary--on-subtle--focus: var(--l--color--neutral--140);
938
- --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);
939
1121
  --l--theme--color--interactive--content--tertiary--on-default--rest: var(--l--color--neutral--140);
940
1122
  --l--theme--color--interactive--content--tertiary--on-default--active: var(--l--color--neutral--140);
941
1123
  --l--theme--color--interactive--content--tertiary--on-default--disabled: var(--l--color--neutral--110);
942
1124
  --l--theme--color--interactive--content--tertiary--on-default--focus: var(--l--color--neutral--140);
943
- --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);
944
1126
  --l--theme--color--interactive--content--tertiary--on-knockout--rest: var(--l--color--neutral--dark--140);
945
1127
  --l--theme--color--interactive--content--tertiary--on-knockout--active: var(--l--color--neutral--dark--140);
946
1128
  --l--theme--color--interactive--content--tertiary--on-knockout--disabled: var(--l--color--neutral--dark--110);
947
1129
  --l--theme--color--interactive--content--tertiary--on-knockout--focus: var(--l--color--neutral--dark--140);
948
- --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);
949
1136
  --l--theme--color--interactive--content--tertiary--on-subtle--rest: var(--l--color--neutral--140);
950
1137
  --l--theme--color--interactive--content--tertiary--on-subtle--active: var(--l--color--neutral--140);
951
1138
  --l--theme--color--interactive--content--tertiary--on-subtle--disabled: var(--l--color--neutral--110);
952
1139
  --l--theme--color--interactive--content--tertiary--on-subtle--focus: var(--l--color--neutral--140);
953
- --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);
954
1141
  --l--theme--color--interactive--content--destructive--on-default--rest: var(--l--color--neutral--0);
955
1142
  --l--theme--color--interactive--content--destructive--on-default--active: var(--l--color--neutral--0);
956
1143
  --l--theme--color--interactive--content--destructive--on-default--disabled: var(--l--color--neutral--110);
@@ -961,6 +1148,11 @@
961
1148
  --l--theme--color--interactive--content--destructive--on-knockout--disabled: var(--l--color--neutral--dark--110);
962
1149
  --l--theme--color--interactive--content--destructive--on-knockout--focus: var(--l--color--neutral--dark--150);
963
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);
964
1156
  --l--theme--color--interactive--content--destructive--on-subtle--rest: var(--l--color--neutral--0);
965
1157
  --l--theme--color--interactive--content--destructive--on-subtle--active: var(--l--color--neutral--0);
966
1158
  --l--theme--color--interactive--content--destructive--on-subtle--disabled: var(--l--color--neutral--110);
@@ -976,6 +1168,11 @@
976
1168
  --l--theme--color--link--content--primary--on-knockout--focus: var(--l--color--primary--dark--110);
977
1169
  --l--theme--color--link--content--primary--on-knockout--active: var(--l--color--primary--dark--110);
978
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);
979
1176
  --l--theme--color--link--content--primary--on-subtle--rest: var(--l--color--primary--110);
980
1177
  --l--theme--color--link--content--primary--on-subtle--hover: var(--l--color--primary--120);
981
1178
  --l--theme--color--link--content--primary--on-subtle--focus: var(--l--color--primary--110);
@@ -991,6 +1188,11 @@
991
1188
  --l--theme--color--link--content--secondary--on-knockout--focus: var(--l--color--neutral--dark--140);
992
1189
  --l--theme--color--link--content--secondary--on-knockout--active: var(--l--color--neutral--dark--140);
993
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);
994
1196
  --l--theme--color--link--content--secondary--on-subtle--rest: var(--l--color--neutral--140);
995
1197
  --l--theme--color--link--content--secondary--on-subtle--hover: var(--l--color--neutral--130);
996
1198
  --l--theme--color--link--content--secondary--on-subtle--focus: var(--l--color--neutral--140);
@@ -1006,6 +1208,11 @@
1006
1208
  --l--theme--color--link--content--tertiary--on-knockout--focus: var(--l--color--neutral--dark--110);
1007
1209
  --l--theme--color--link--content--tertiary--on-knockout--active: var(--l--color--neutral--dark--110);
1008
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);
1009
1216
  --l--theme--color--link--content--tertiary--on-subtle--rest: var(--l--color--neutral--110);
1010
1217
  --l--theme--color--link--content--tertiary--on-subtle--hover: var(--l--color--neutral--120);
1011
1218
  --l--theme--color--link--content--tertiary--on-subtle--focus: var(--l--color--neutral--110);
@@ -1013,21 +1220,27 @@
1013
1220
  --l--theme--color--link--content--tertiary--on-subtle--visited: var(--l--color--neutral--110);
1014
1221
  --l--theme--color--messaging--content--destructive--on-default: var(--l--color--red--110);
1015
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);
1016
1224
  --l--theme--color--messaging--content--destructive--on-subtle: var(--l--color--red--120);
1017
1225
  --l--theme--color--messaging--content--informative--on-default: var(--l--color--blue--110);
1018
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);
1019
1228
  --l--theme--color--messaging--content--informative--on-subtle: var(--l--color--blue--120);
1020
1229
  --l--theme--color--messaging--content--positive--on-default: var(--l--color--green--110);
1021
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);
1022
1232
  --l--theme--color--messaging--content--positive--on-subtle: var(--l--color--green--120);
1023
1233
  --l--theme--color--messaging--content--warning--on-default: var(--l--color--yellow--110);
1024
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);
1025
1236
  --l--theme--color--messaging--content--warning--on-subtle: var(--l--color--yellow--120);
1026
1237
  --l--theme--color--selection--background--on-default: var(--l--color--neutral--140);
1027
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);
1028
1240
  --l--theme--color--selection--background--on-subtle: var(--l--color--neutral--140);
1029
1241
  --l--theme--color--selection--content--on-default: var(--l--color--neutral--0);
1030
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);
1031
1244
  --l--theme--color--selection--content--on-subtle: var(--l--color--neutral--0);
1032
1245
  --l--typography--text-decoration-thickness--sm: var(--l--units--relative--1);
1033
1246
  --l--typography--text-decoration-thickness--md: var(--l--units--relative--2);
@@ -1328,9 +1541,11 @@
1328
1541
  --l--theme--border--text-highlight--width: var(--l--theme--border--width--none);
1329
1542
  --l--theme--color--dialog--background--on-default: var(--l--theme--color--background--default);
1330
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);
1331
1545
  --l--theme--color--dialog--background--on-subtle: var(--l--theme--color--background--subtle);
1332
1546
  --l--theme--color--dialog--content--on-default: var(--l--theme--color--content--primary--on-default);
1333
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);
1334
1549
  --l--theme--color--dialog--content--on-subtle: var(--l--theme--color--content--primary--on-subtle);
1335
1550
  --l--theme--color--input--content--on-default--rest: var(--l--theme--color--content--primary--on-default);
1336
1551
  --l--theme--color--input--content--on-default--hover: var(--l--theme--color--content--primary--on-default);
@@ -1338,6 +1553,9 @@
1338
1553
  --l--theme--color--input--content--on-knockout--rest: var(--l--theme--color--content--primary--on-knockout);
1339
1554
  --l--theme--color--input--content--on-knockout--hover: var(--l--theme--color--content--primary--on-knockout);
1340
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);
1341
1559
  --l--theme--color--input--content--on-subtle--rest: var(--l--theme--color--content--primary--on-default);
1342
1560
  --l--theme--color--input--content--on-subtle--hover: var(--l--theme--color--content--primary--on-default);
1343
1561
  --l--theme--color--input--content--on-subtle--focus: var(--l--theme--color--content--primary--on-default);
@@ -1347,6 +1565,9 @@
1347
1565
  --l--theme--color--input--placeholder--on-knockout--rest: var(--l--theme--color--content--secondary--on-knockout);
1348
1566
  --l--theme--color--input--placeholder--on-knockout--hover: var(--l--theme--color--content--secondary--on-knockout);
1349
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);
1350
1571
  --l--theme--color--input--placeholder--on-subtle--rest: var(--l--theme--color--content--secondary--on-subtle);
1351
1572
  --l--theme--color--input--placeholder--on-subtle--hover: var(--l--theme--color--content--secondary--on-subtle);
1352
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.28.0",
3
+ "version": "0.30.0",
4
4
  "description": "Design tokens layer",
5
5
  "license": "MIT",
6
6
  "author": "Dmitry Mayorov",