@withlayers/tokens 0.29.0 → 0.31.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 +267 -88
  2. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -25,74 +25,77 @@
25
25
  --l--border--width--8: 8px;
26
26
  --l--border--width--12: 12px;
27
27
  --l--border--width--16: 16px;
28
- --l--breakpoint--xs: 360px;
29
- --l--breakpoint--sm: 490px;
30
- --l--breakpoint--md: 768px;
31
- --l--breakpoint--lg: 1040px;
32
- --l--breakpoint--xl: 1440px;
28
+ --l--breakpoint--360: 360px;
29
+ --l--breakpoint--490: 490px;
30
+ --l--breakpoint--768: 768px;
31
+ --l--breakpoint--960: 960px;
32
+ --l--breakpoint--1024: 1024px;
33
+ --l--breakpoint--1140: 1140px;
34
+ --l--breakpoint--1280: 1280px;
35
+ --l--breakpoint--1440: 1440px;
33
36
  --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);
37
+ --l--color--primary--10: oklch(0.99 0.002 267.48);
38
+ --l--color--primary--20: oklch(0.98 0.005 267.48);
39
+ --l--color--primary--30: oklch(0.96 0.01 267.48);
40
+ --l--color--primary--40: oklch(0.93 0.017 267.48);
41
+ --l--color--primary--50: oklch(0.89 0.027 267.48);
42
+ --l--color--primary--60: oklch(0.84 0.039 267.48);
43
+ --l--color--primary--70: oklch(0.79 0.051 267.48);
44
+ --l--color--primary--80: oklch(0.73 0.066 267.48);
45
+ --l--color--primary--90: oklch(0.35 0.158 267.48);
46
+ --l--color--primary--100: oklch(0.431 0.138 267.48);
47
+ --l--color--primary--110: oklch(0.557 0.108 267.48);
48
+ --l--color--primary--120: oklch(0.529 0.115 267.48);
49
+ --l--color--primary--130: oklch(0.344 0.158 267.48);
50
+ --l--color--primary--140: oklch(0.27 0.158 267.48);
48
51
  --l--color--primary--150: oklch(0 0 0);
49
52
  --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);
53
+ --l--color--primary--dark--10: oklch(0.123 0.072 284.09);
54
+ --l--color--primary--dark--20: oklch(0.16 0.097 279.97);
55
+ --l--color--primary--dark--30: oklch(0.25 0.158 267.48);
56
+ --l--color--primary--dark--40: oklch(0.29 0.158 267.48);
57
+ --l--color--primary--dark--50: oklch(0.33 0.158 267.48);
58
+ --l--color--primary--dark--60: oklch(0.38 0.151 267.48);
59
+ --l--color--primary--dark--70: oklch(0.45 0.134 267.48);
60
+ --l--color--primary--dark--80: oklch(0.55 0.11 267.48);
61
+ --l--color--primary--dark--90: oklch(0.35 0.158 267.48);
62
+ --l--color--primary--dark--100: oklch(0.431 0.138 267.48);
63
+ --l--color--primary--dark--110: oklch(0.78 0.054 267.48);
64
+ --l--color--primary--dark--120: oklch(0.83 0.041 267.48);
65
+ --l--color--primary--dark--130: oklch(0.98 0.005 267.48);
66
+ --l--color--primary--dark--140: oklch(0.99 0.002 267.48);
64
67
  --l--color--primary--dark--150: oklch(1 0 0);
65
68
  --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);
69
+ --l--color--primary--alpha--10: oklch(0.375 0.122 254.66 / 0.016);
70
+ --l--color--primary--alpha--20: oklch(0.346 0.201 264.01 / 0.031);
71
+ --l--color--primary--alpha--30: oklch(0.372 0.185 262.88 / 0.063);
72
+ --l--color--primary--alpha--40: oklch(0.363 0.182 262.95 / 0.11);
73
+ --l--color--primary--alpha--50: oklch(0.36 0.176 262.67 / 0.173);
74
+ --l--color--primary--alpha--60: oklch(0.356 0.179 263.01 / 0.251);
75
+ --l--color--primary--alpha--70: oklch(0.35 0.175 262.94 / 0.325);
76
+ --l--color--primary--alpha--80: oklch(0.35 0.174 262.88 / 0.416);
77
+ --l--color--primary--alpha--90: oklch(0.292 0.172 264.06 / 0.906);
78
+ --l--color--primary--alpha--100: oklch(0.311 0.17 263.67 / 0.816);
79
+ --l--color--primary--alpha--110: oklch(0.329 0.172 263.32 / 0.655);
80
+ --l--color--primary--alpha--120: oklch(0.327 0.172 263.36 / 0.694);
81
+ --l--color--primary--alpha--130: oklch(0.288 0.171 264.09 / 0.91);
82
+ --l--color--primary--alpha--140: oklch(0.247 0.162 264.19 / 0.961);
80
83
  --l--color--primary--alpha--150: oklch(0 0 0 / 1);
81
84
  --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);
85
+ --l--color--primary--alpha--dark--10: oklch(0.465 0.305 269.98 / 0.125);
86
+ --l--color--primary--alpha--dark--20: oklch(0.467 0.303 271.11 / 0.208);
87
+ --l--color--primary--alpha--dark--30: oklch(0.46 0.308 265.49 / 0.42);
88
+ --l--color--primary--alpha--dark--40: oklch(0.489 0.288 266.17 / 0.471);
89
+ --l--color--primary--alpha--dark--50: oklch(0.52 0.267 266.57 / 0.522);
90
+ --l--color--primary--alpha--dark--60: oklch(0.565 0.238 266.97 / 0.569);
91
+ --l--color--primary--alpha--dark--70: oklch(0.63 0.198 267.52 / 0.624);
92
+ --l--color--primary--alpha--dark--80: oklch(0.714 0.148 267.36 / 0.698);
93
+ --l--color--primary--alpha--dark--90: oklch(0.534 0.258 266.78 / 0.545);
94
+ --l--color--primary--alpha--dark--100: oklch(0.614 0.208 267.29 / 0.608);
95
+ --l--color--primary--alpha--dark--110: oklch(0.874 0.061 267.34 / 0.859);
96
+ --l--color--primary--alpha--dark--120: oklch(0.905 0.046 267.06 / 0.89);
97
+ --l--color--primary--alpha--dark--130: oklch(0.988 0.005 275.12 / 0.988);
98
+ --l--color--primary--alpha--dark--140: oklch(0.997 0.002 247.73 / 0.992);
96
99
  --l--color--primary--alpha--dark--150: oklch(1 0 0 / 1);
97
100
  --l--color--neutral--0: oklch(1 0 0);
98
101
  --l--color--neutral--10: oklch(0.99 0.001 0);
@@ -558,6 +561,7 @@
558
561
  --l--units--static--384: 384px;
559
562
  --l--units--static--448: 448px;
560
563
  --l--units--static--512: 512px;
564
+ --l--theme--size--measure--xs: 12rem;
561
565
  --l--theme--size--measure--sm: 18.75rem;
562
566
  --l--theme--size--measure--md: 37.5rem;
563
567
  --l--theme--size--measure--lg: 48rem;
@@ -585,62 +589,82 @@
585
589
  --l--theme--color--background--default: var(--l--color--neutral--0);
586
590
  --l--theme--color--background--knockout: var(--l--color--neutral--dark--0);
587
591
  --l--theme--color--background--subtle: var(--l--color--neutral--20);
592
+ --l--theme--color--background--primary: var(--l--color--primary--90);
588
593
  --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);
594
+ --l--theme--color--border--primary--on-knockout: var(--l--color--neutral--dark--120);
595
+ --l--theme--color--border--primary--on-primary: var(--l--color--primary--0);
590
596
  --l--theme--color--border--primary--on-subtle: var(--l--color--neutral--100);
591
597
  --l--theme--color--border--secondary--on-default: var(--l--color--neutral--60);
592
598
  --l--theme--color--border--secondary--on-knockout: var(--l--color--neutral--dark--60);
599
+ --l--theme--color--border--secondary--on-primary: var(--l--color--primary--70);
593
600
  --l--theme--color--border--secondary--on-subtle: var(--l--color--neutral--60);
594
601
  --l--theme--color--border--tertiary--on-default: var(--l--color--neutral--30);
595
602
  --l--theme--color--border--tertiary--on-knockout: var(--l--color--neutral--dark--30);
603
+ --l--theme--color--border--tertiary--on-primary: var(--l--color--primary--80);
596
604
  --l--theme--color--border--tertiary--on-subtle: var(--l--color--neutral--40);
597
605
  --l--theme--color--content--primary--on-default: var(--l--color--neutral--140);
598
606
  --l--theme--color--content--primary--on-knockout: var(--l--color--neutral--dark--140);
607
+ --l--theme--color--content--primary--on-primary: var(--l--color--primary--dark--140);
599
608
  --l--theme--color--content--primary--on-subtle: var(--l--color--neutral--140);
600
609
  --l--theme--color--content--secondary--on-default: var(--l--color--neutral--110);
601
610
  --l--theme--color--content--secondary--on-knockout: var(--l--color--neutral--dark--110);
611
+ --l--theme--color--content--secondary--on-primary: var(--l--color--primary--dark--130);
602
612
  --l--theme--color--content--secondary--on-subtle: var(--l--color--neutral--110);
603
613
  --l--theme--color--outline--on-default: var(--l--color--neutral--140);
604
614
  --l--theme--color--outline--on-knockout: var(--l--color--neutral--dark--140);
615
+ --l--theme--color--outline--on-primary: var(--l--color--primary--dark--140);
605
616
  --l--theme--color--outline--on-subtle: var(--l--color--neutral--140);
606
617
  --l--theme--color--overlay--on-default: var(--l--color--neutral--alpha--50);
607
618
  --l--theme--color--overlay--on-knockout: var(--l--color--neutral--alpha--dark--50);
619
+ --l--theme--color--overlay--on-primary: var(--l--color--primary--alpha--dark--50);
608
620
  --l--theme--color--overlay--on-subtle: var(--l--color--neutral--alpha--50);
609
621
  --l--theme--color--code--background--on-default: var(--l--color--neutral--30);
610
622
  --l--theme--color--code--background--on-knockout: var(--l--color--neutral--dark--30);
623
+ --l--theme--color--code--background--on-primary: var(--l--color--primary--110);
611
624
  --l--theme--color--code--background--on-subtle: var(--l--color--neutral--40);
612
625
  --l--theme--color--code--border--on-default: var(--l--color--neutral--alpha--0);
613
626
  --l--theme--color--code--border--on-knockout: var(--l--color--neutral--alpha--dark--0);
627
+ --l--theme--color--code--border--on-primary: var(--l--color--primary--alpha--dark--0);
614
628
  --l--theme--color--code--border--on-subtle: var(--l--color--neutral--alpha--0);
615
629
  --l--theme--color--code--content--on-default: var(--l--color--neutral--130);
616
630
  --l--theme--color--code--content--on-knockout: var(--l--color--neutral--dark--130);
631
+ --l--theme--color--code--content--on-primary: var(--l--color--primary--dark--130);
617
632
  --l--theme--color--code--content--on-subtle: var(--l--color--neutral--130);
618
633
  --l--theme--color--dialog--border--on-default: var(--l--color--neutral--alpha--0);
619
634
  --l--theme--color--dialog--border--on-knockout: var(--l--color--neutral--alpha--dark--0);
635
+ --l--theme--color--dialog--border--on-primary: var(--l--color--primary--alpha--dark--0);
620
636
  --l--theme--color--dialog--border--on-subtle: var(--l--color--neutral--alpha--0);
621
637
  --l--theme--color--feedback--background--destructive--on-default: var(--l--color--red--40);
622
638
  --l--theme--color--feedback--background--destructive--on-knockout: var(--l--color--red--dark--40);
639
+ --l--theme--color--feedback--background--destructive--on-primary: var(--l--color--red--50);
623
640
  --l--theme--color--feedback--background--destructive--on-subtle: var(--l--color--red--40);
624
641
  --l--theme--color--feedback--background--informative--on-default: var(--l--color--blue--40);
625
642
  --l--theme--color--feedback--background--informative--on-knockout: var(--l--color--blue--dark--40);
643
+ --l--theme--color--feedback--background--informative--on-primary: var(--l--color--blue--50);
626
644
  --l--theme--color--feedback--background--informative--on-subtle: var(--l--color--blue--40);
627
645
  --l--theme--color--feedback--background--positive--on-default: var(--l--color--green--40);
628
646
  --l--theme--color--feedback--background--positive--on-knockout: var(--l--color--green--dark--40);
647
+ --l--theme--color--feedback--background--positive--on-primary: var(--l--color--green--50);
629
648
  --l--theme--color--feedback--background--positive--on-subtle: var(--l--color--green--40);
630
649
  --l--theme--color--feedback--background--warning--on-default: var(--l--color--yellow--40);
631
650
  --l--theme--color--feedback--background--warning--on-knockout: var(--l--color--yellow--dark--40);
651
+ --l--theme--color--feedback--background--warning--on-primary: var(--l--color--yellow--50);
632
652
  --l--theme--color--feedback--background--warning--on-subtle: var(--l--color--yellow--40);
633
653
  --l--theme--color--feedback--border--destructive--on-default: var(--l--color--red--50);
634
654
  --l--theme--color--feedback--border--destructive--on-knockout: var(--l--color--red--dark--50);
655
+ --l--theme--color--feedback--border--destructive--on-primary: var(--l--color--red--60);
635
656
  --l--theme--color--feedback--border--destructive--on-subtle: var(--l--color--red--50);
636
657
  --l--theme--color--feedback--border--informative--on-default: var(--l--color--blue--50);
637
658
  --l--theme--color--feedback--border--informative--on-knockout: var(--l--color--blue--dark--50);
659
+ --l--theme--color--feedback--border--informative--on-primary: var(--l--color--blue--60);
638
660
  --l--theme--color--feedback--border--informative--on-subtle: var(--l--color--blue--50);
639
661
  --l--theme--color--feedback--border--positive--on-default: var(--l--color--green--50);
640
662
  --l--theme--color--feedback--border--positive--on-knockout: var(--l--color--green--dark--50);
663
+ --l--theme--color--feedback--border--positive--on-primary: var(--l--color--green--60);
641
664
  --l--theme--color--feedback--border--positive--on-subtle: var(--l--color--green--50);
642
665
  --l--theme--color--feedback--border--warning--on-default: var(--l--color--yellow--50);
643
666
  --l--theme--color--feedback--border--warning--on-knockout: var(--l--color--yellow--dark--50);
667
+ --l--theme--color--feedback--border--warning--on-primary: var(--l--color--yellow--60);
644
668
  --l--theme--color--feedback--border--warning--on-subtle: var(--l--color--yellow--50);
645
669
  --l--theme--color--feedback--content--destructive--on-default--rest: var(--l--color--red--130);
646
670
  --l--theme--color--feedback--content--destructive--on-default--hover: var(--l--color--red--140);
@@ -652,6 +676,11 @@
652
676
  --l--theme--color--feedback--content--destructive--on-knockout--focus: var(--l--color--red--dark--130);
653
677
  --l--theme--color--feedback--content--destructive--on-knockout--active: var(--l--color--red--dark--130);
654
678
  --l--theme--color--feedback--content--destructive--on-knockout--visited: var(--l--color--red--dark--130);
679
+ --l--theme--color--feedback--content--destructive--on-primary--rest: var(--l--color--red--140);
680
+ --l--theme--color--feedback--content--destructive--on-primary--hover: var(--l--color--red--150);
681
+ --l--theme--color--feedback--content--destructive--on-primary--focus: var(--l--color--red--140);
682
+ --l--theme--color--feedback--content--destructive--on-primary--active: var(--l--color--red--140);
683
+ --l--theme--color--feedback--content--destructive--on-primary--visited: var(--l--color--red--140);
655
684
  --l--theme--color--feedback--content--destructive--on-subtle--rest: var(--l--color--red--130);
656
685
  --l--theme--color--feedback--content--destructive--on-subtle--hover: var(--l--color--red--140);
657
686
  --l--theme--color--feedback--content--destructive--on-subtle--focus: var(--l--color--red--130);
@@ -667,6 +696,11 @@
667
696
  --l--theme--color--feedback--content--informative--on-knockout--focus: var(--l--color--blue--dark--130);
668
697
  --l--theme--color--feedback--content--informative--on-knockout--active: var(--l--color--blue--dark--130);
669
698
  --l--theme--color--feedback--content--informative--on-knockout--visited: var(--l--color--blue--dark--130);
699
+ --l--theme--color--feedback--content--informative--on-primary--rest: var(--l--color--blue--140);
700
+ --l--theme--color--feedback--content--informative--on-primary--hover: var(--l--color--blue--150);
701
+ --l--theme--color--feedback--content--informative--on-primary--focus: var(--l--color--blue--140);
702
+ --l--theme--color--feedback--content--informative--on-primary--active: var(--l--color--blue--140);
703
+ --l--theme--color--feedback--content--informative--on-primary--visited: var(--l--color--blue--140);
670
704
  --l--theme--color--feedback--content--informative--on-subtle--rest: var(--l--color--blue--130);
671
705
  --l--theme--color--feedback--content--informative--on-subtle--hover: var(--l--color--blue--140);
672
706
  --l--theme--color--feedback--content--informative--on-subtle--focus: var(--l--color--blue--130);
@@ -682,6 +716,11 @@
682
716
  --l--theme--color--feedback--content--positive--on-knockout--focus: var(--l--color--green--dark--130);
683
717
  --l--theme--color--feedback--content--positive--on-knockout--active: var(--l--color--green--dark--130);
684
718
  --l--theme--color--feedback--content--positive--on-knockout--visited: var(--l--color--green--dark--130);
719
+ --l--theme--color--feedback--content--positive--on-primary--rest: var(--l--color--green--140);
720
+ --l--theme--color--feedback--content--positive--on-primary--hover: var(--l--color--green--150);
721
+ --l--theme--color--feedback--content--positive--on-primary--focus: var(--l--color--green--140);
722
+ --l--theme--color--feedback--content--positive--on-primary--active: var(--l--color--green--140);
723
+ --l--theme--color--feedback--content--positive--on-primary--visited: var(--l--color--green--140);
685
724
  --l--theme--color--feedback--content--positive--on-subtle--rest: var(--l--color--green--130);
686
725
  --l--theme--color--feedback--content--positive--on-subtle--hover: var(--l--color--green--140);
687
726
  --l--theme--color--feedback--content--positive--on-subtle--focus: var(--l--color--green--130);
@@ -697,6 +736,11 @@
697
736
  --l--theme--color--feedback--content--warning--on-knockout--focus: var(--l--color--yellow--dark--130);
698
737
  --l--theme--color--feedback--content--warning--on-knockout--active: var(--l--color--yellow--dark--130);
699
738
  --l--theme--color--feedback--content--warning--on-knockout--visited: var(--l--color--yellow--dark--130);
739
+ --l--theme--color--feedback--content--warning--on-primary--rest: var(--l--color--yellow--140);
740
+ --l--theme--color--feedback--content--warning--on-primary--hover: var(--l--color--yellow--150);
741
+ --l--theme--color--feedback--content--warning--on-primary--focus: var(--l--color--yellow--140);
742
+ --l--theme--color--feedback--content--warning--on-primary--active: var(--l--color--yellow--140);
743
+ --l--theme--color--feedback--content--warning--on-primary--visited: var(--l--color--yellow--140);
700
744
  --l--theme--color--feedback--content--warning--on-subtle--rest: var(--l--color--yellow--130);
701
745
  --l--theme--color--feedback--content--warning--on-subtle--hover: var(--l--color--yellow--140);
702
746
  --l--theme--color--feedback--content--warning--on-subtle--focus: var(--l--color--yellow--130);
@@ -704,15 +748,19 @@
704
748
  --l--theme--color--feedback--content--warning--on-subtle--visited: var(--l--color--yellow--130);
705
749
  --l--theme--color--feedback--outline--destructive--on-default: var(--l--color--red--120);
706
750
  --l--theme--color--feedback--outline--destructive--on-knockout: var(--l--color--red--dark--120);
751
+ --l--theme--color--feedback--outline--destructive--on-primary: var(--l--color--red--140);
707
752
  --l--theme--color--feedback--outline--destructive--on-subtle: var(--l--color--red--120);
708
753
  --l--theme--color--feedback--outline--informative--on-default: var(--l--color--blue--120);
709
754
  --l--theme--color--feedback--outline--informative--on-knockout: var(--l--color--blue--dark--120);
755
+ --l--theme--color--feedback--outline--informative--on-primary: var(--l--color--blue--140);
710
756
  --l--theme--color--feedback--outline--informative--on-subtle: var(--l--color--blue--120);
711
757
  --l--theme--color--feedback--outline--positive--on-default: var(--l--color--green--120);
712
758
  --l--theme--color--feedback--outline--positive--on-knockout: var(--l--color--green--dark--120);
759
+ --l--theme--color--feedback--outline--positive--on-primary: var(--l--color--green--140);
713
760
  --l--theme--color--feedback--outline--positive--on-subtle: var(--l--color--green--120);
714
761
  --l--theme--color--feedback--outline--warning--on-default: var(--l--color--yellow--120);
715
762
  --l--theme--color--feedback--outline--warning--on-knockout: var(--l--color--yellow--dark--120);
763
+ --l--theme--color--feedback--outline--warning--on-primary: var(--l--color--yellow--140);
716
764
  --l--theme--color--feedback--outline--warning--on-subtle: var(--l--color--yellow--120);
717
765
  --l--theme--color--input--background--on-default--rest: var(--l--color--neutral--alpha--0);
718
766
  --l--theme--color--input--background--on-default--focus: var(--l--color--neutral--alpha--0);
@@ -740,6 +788,19 @@
740
788
  --l--theme--color--input--background--on-knockout--invalid--focus: var(--l--color--red--alpha--dark--0);
741
789
  --l--theme--color--input--background--on-knockout--invalid--hover: var(--l--color--red--alpha--dark--10);
742
790
  --l--theme--color--input--background--on-knockout--disabled: var(--l--color--neutral--dark--40);
791
+ --l--theme--color--input--background--on-primary--rest: var(--l--color--primary--alpha--dark--0);
792
+ --l--theme--color--input--background--on-primary--focus: var(--l--color--primary--alpha--dark--0);
793
+ --l--theme--color--input--background--on-primary--hover: var(--l--color--primary--alpha--dark--10);
794
+ --l--theme--color--input--background--on-primary--checked--rest: var(--l--color--primary--dark--140);
795
+ --l--theme--color--input--background--on-primary--checked--focus: var(--l--color--primary--dark--140);
796
+ --l--theme--color--input--background--on-primary--checked--hover: var(--l--color--primary--dark--130);
797
+ --l--theme--color--input--background--on-primary--checked--invalid--rest: var(--l--color--red--dark--90);
798
+ --l--theme--color--input--background--on-primary--checked--invalid--focus: var(--l--color--red--dark--90);
799
+ --l--theme--color--input--background--on-primary--checked--invalid--hover: var(--l--color--red--dark--100);
800
+ --l--theme--color--input--background--on-primary--invalid--rest: var(--l--color--red--alpha--dark--0);
801
+ --l--theme--color--input--background--on-primary--invalid--focus: var(--l--color--red--alpha--dark--0);
802
+ --l--theme--color--input--background--on-primary--invalid--hover: var(--l--color--red--alpha--dark--10);
803
+ --l--theme--color--input--background--on-primary--disabled: var(--l--color--primary--100);
743
804
  --l--theme--color--input--background--on-subtle--rest: var(--l--color--neutral--alpha--0);
744
805
  --l--theme--color--input--background--on-subtle--focus: var(--l--color--neutral--alpha--0);
745
806
  --l--theme--color--input--background--on-subtle--hover: var(--l--color--neutral--alpha--10);
@@ -779,6 +840,19 @@
779
840
  --l--theme--color--input--border--on-knockout--invalid--focus: var(--l--color--red--dark--90);
780
841
  --l--theme--color--input--border--on-knockout--invalid--hover: var(--l--color--red--dark--100);
781
842
  --l--theme--color--input--border--on-knockout--disabled: var(--l--color--neutral--dark--40);
843
+ --l--theme--color--input--border--on-primary--rest: var(--l--color--primary--dark--120);
844
+ --l--theme--color--input--border--on-primary--focus: var(--l--color--primary--dark--120);
845
+ --l--theme--color--input--border--on-primary--hover: var(--l--color--primary--dark--120);
846
+ --l--theme--color--input--border--on-primary--checked--rest: var(--l--color--primary--dark--140);
847
+ --l--theme--color--input--border--on-primary--checked--focus: var(--l--color--primary--dark--140);
848
+ --l--theme--color--input--border--on-primary--checked--hover: var(--l--color--primary--dark--130);
849
+ --l--theme--color--input--border--on-primary--checked--invalid--rest: var(--l--color--red--dark--90);
850
+ --l--theme--color--input--border--on-primary--checked--invalid--focus: var(--l--color--red--dark--90);
851
+ --l--theme--color--input--border--on-primary--checked--invalid--hover: var(--l--color--red--dark--100);
852
+ --l--theme--color--input--border--on-primary--invalid--rest: var(--l--color--red--dark--90);
853
+ --l--theme--color--input--border--on-primary--invalid--focus: var(--l--color--red--dark--90);
854
+ --l--theme--color--input--border--on-primary--invalid--hover: var(--l--color--red--dark--100);
855
+ --l--theme--color--input--border--on-primary--disabled: var(--l--color--primary--100);
782
856
  --l--theme--color--input--border--on-subtle--rest: var(--l--color--neutral--120);
783
857
  --l--theme--color--input--border--on-subtle--focus: var(--l--color--neutral--120);
784
858
  --l--theme--color--input--border--on-subtle--hover: var(--l--color--neutral--120);
@@ -802,16 +876,26 @@
802
876
  --l--theme--color--input--content--on-default--checked--invalid--hover: var(--l--color--neutral--0);
803
877
  --l--theme--color--input--content--on-default--checked--invalid--focus: var(--l--color--neutral--0);
804
878
  --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);
879
+ --l--theme--color--input--content--on-knockout--invalid--rest: var(--l--color--red--dark--150);
880
+ --l--theme--color--input--content--on-knockout--invalid--hover: var(--l--color--red--dark--150);
881
+ --l--theme--color--input--content--on-knockout--invalid--focus: var(--l--color--red--dark--150);
808
882
  --l--theme--color--input--content--on-knockout--checked--rest: var(--l--color--neutral--dark--0);
809
883
  --l--theme--color--input--content--on-knockout--checked--hover: var(--l--color--neutral--dark--0);
810
884
  --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);
885
+ --l--theme--color--input--content--on-knockout--checked--invalid--rest: var(--l--color--neutral--dark--150);
886
+ --l--theme--color--input--content--on-knockout--checked--invalid--hover: var(--l--color--neutral--dark--150);
887
+ --l--theme--color--input--content--on-knockout--checked--invalid--focus: var(--l--color--neutral--dark--150);
814
888
  --l--theme--color--input--content--on-knockout--disabled: var(--l--color--neutral--dark--110);
889
+ --l--theme--color--input--content--on-primary--invalid--rest: var(--l--color--red--dark--150);
890
+ --l--theme--color--input--content--on-primary--invalid--hover: var(--l--color--red--dark--150);
891
+ --l--theme--color--input--content--on-primary--invalid--focus: var(--l--color--red--dark--150);
892
+ --l--theme--color--input--content--on-primary--checked--rest: var(--l--color--primary--dark--0);
893
+ --l--theme--color--input--content--on-primary--checked--hover: var(--l--color--primary--dark--0);
894
+ --l--theme--color--input--content--on-primary--checked--focus: var(--l--color--primary--dark--0);
895
+ --l--theme--color--input--content--on-primary--checked--invalid--rest: var(--l--color--red--dark--150);
896
+ --l--theme--color--input--content--on-primary--checked--invalid--hover: var(--l--color--red--dark--150);
897
+ --l--theme--color--input--content--on-primary--checked--invalid--focus: var(--l--color--red--dark--150);
898
+ --l--theme--color--input--content--on-primary--disabled: var(--l--color--primary--dark--110);
815
899
  --l--theme--color--input--content--on-subtle--invalid--rest: var(--l--color--red--130);
816
900
  --l--theme--color--input--content--on-subtle--invalid--hover: var(--l--color--red--130);
817
901
  --l--theme--color--input--content--on-subtle--invalid--focus: var(--l--color--red--130);
@@ -830,6 +914,10 @@
830
914
  --l--theme--color--input--placeholder--on-knockout--invalid--rest: var(--l--color--red--dark--110);
831
915
  --l--theme--color--input--placeholder--on-knockout--invalid--hover: var(--l--color--red--dark--110);
832
916
  --l--theme--color--input--placeholder--on-knockout--invalid--focus: var(--l--color--red--dark--110);
917
+ --l--theme--color--input--placeholder--on-primary--disabled: var(--l--color--primary--dark--110);
918
+ --l--theme--color--input--placeholder--on-primary--invalid--rest: var(--l--color--red--dark--110);
919
+ --l--theme--color--input--placeholder--on-primary--invalid--hover: var(--l--color--red--dark--110);
920
+ --l--theme--color--input--placeholder--on-primary--invalid--focus: var(--l--color--red--dark--110);
833
921
  --l--theme--color--input--placeholder--on-subtle--disabled: var(--l--color--neutral--110);
834
922
  --l--theme--color--input--placeholder--on-subtle--invalid--rest: var(--l--color--red--110);
835
923
  --l--theme--color--input--placeholder--on-subtle--invalid--hover: var(--l--color--red--110);
@@ -844,38 +932,53 @@
844
932
  --l--theme--color--interactive--background--primary--on-knockout--disabled: var(--l--color--neutral--dark--40);
845
933
  --l--theme--color--interactive--background--primary--on-knockout--focus: var(--l--color--neutral--dark--140);
846
934
  --l--theme--color--interactive--background--primary--on-knockout--hover: var(--l--color--neutral--dark--130);
935
+ --l--theme--color--interactive--background--primary--on-primary--rest: var(--l--color--primary--dark--140);
936
+ --l--theme--color--interactive--background--primary--on-primary--active: var(--l--color--primary--dark--140);
937
+ --l--theme--color--interactive--background--primary--on-primary--disabled: var(--l--color--primary--100);
938
+ --l--theme--color--interactive--background--primary--on-primary--focus: var(--l--color--primary--dark--140);
939
+ --l--theme--color--interactive--background--primary--on-primary--hover: var(--l--color--primary--dark--130);
847
940
  --l--theme--color--interactive--background--primary--on-subtle--rest: var(--l--color--neutral--140);
848
941
  --l--theme--color--interactive--background--primary--on-subtle--active: var(--l--color--neutral--140);
849
942
  --l--theme--color--interactive--background--primary--on-subtle--disabled: var(--l--color--neutral--40);
850
943
  --l--theme--color--interactive--background--primary--on-subtle--focus: var(--l--color--neutral--140);
851
944
  --l--theme--color--interactive--background--primary--on-subtle--hover: var(--l--color--neutral--130);
852
945
  --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);
946
+ --l--theme--color--interactive--background--secondary--on-default--active: var(--l--color--neutral--alpha--0);
854
947
  --l--theme--color--interactive--background--secondary--on-default--disabled: var(--l--color--neutral--40);
855
948
  --l--theme--color--interactive--background--secondary--on-default--focus: var(--l--color--neutral--alpha--0);
856
949
  --l--theme--color--interactive--background--secondary--on-default--hover: var(--l--color--neutral--alpha--20);
857
950
  --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);
951
+ --l--theme--color--interactive--background--secondary--on-knockout--active: var(--l--color--neutral--alpha--dark--0);
859
952
  --l--theme--color--interactive--background--secondary--on-knockout--disabled: var(--l--color--neutral--dark--40);
860
953
  --l--theme--color--interactive--background--secondary--on-knockout--focus: var(--l--color--neutral--alpha--dark--0);
861
954
  --l--theme--color--interactive--background--secondary--on-knockout--hover: var(--l--color--neutral--alpha--dark--20);
955
+ --l--theme--color--interactive--background--secondary--on-primary--rest: var(--l--color--primary--alpha--dark--0);
956
+ --l--theme--color--interactive--background--secondary--on-primary--active: var(--l--color--primary--alpha--dark--0);
957
+ --l--theme--color--interactive--background--secondary--on-primary--disabled: var(--l--color--primary--100);
958
+ --l--theme--color--interactive--background--secondary--on-primary--focus: var(--l--color--primary--alpha--dark--0);
959
+ --l--theme--color--interactive--background--secondary--on-primary--hover: var(--l--color--primary--alpha--dark--20);
862
960
  --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);
961
+ --l--theme--color--interactive--background--secondary--on-subtle--active: var(--l--color--neutral--alpha--0);
864
962
  --l--theme--color--interactive--background--secondary--on-subtle--disabled: var(--l--color--neutral--40);
865
963
  --l--theme--color--interactive--background--secondary--on-subtle--focus: var(--l--color--neutral--alpha--0);
866
964
  --l--theme--color--interactive--background--secondary--on-subtle--hover: var(--l--color--neutral--alpha--20);
867
965
  --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);
966
+ --l--theme--color--interactive--background--tertiary--on-default--active: var(--l--color--neutral--alpha--0);
869
967
  --l--theme--color--interactive--background--tertiary--on-default--disabled: var(--l--color--neutral--40);
870
968
  --l--theme--color--interactive--background--tertiary--on-default--focus: var(--l--color--neutral--alpha--0);
871
969
  --l--theme--color--interactive--background--tertiary--on-default--hover: var(--l--color--neutral--alpha--20);
872
970
  --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);
971
+ --l--theme--color--interactive--background--tertiary--on-knockout--active: var(--l--color--neutral--alpha--dark--0);
874
972
  --l--theme--color--interactive--background--tertiary--on-knockout--disabled: var(--l--color--neutral--dark--40);
875
973
  --l--theme--color--interactive--background--tertiary--on-knockout--focus: var(--l--color--neutral--alpha--dark--0);
876
974
  --l--theme--color--interactive--background--tertiary--on-knockout--hover: var(--l--color--neutral--alpha--dark--20);
975
+ --l--theme--color--interactive--background--tertiary--on-primary--rest: var(--l--color--primary--alpha--dark--0);
976
+ --l--theme--color--interactive--background--tertiary--on-primary--active: var(--l--color--primary--alpha--dark--0);
977
+ --l--theme--color--interactive--background--tertiary--on-primary--disabled: var(--l--color--primary--100);
978
+ --l--theme--color--interactive--background--tertiary--on-primary--focus: var(--l--color--primary--alpha--dark--0);
979
+ --l--theme--color--interactive--background--tertiary--on-primary--hover: var(--l--color--primary--alpha--dark--20);
877
980
  --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);
981
+ --l--theme--color--interactive--background--tertiary--on-subtle--active: var(--l--color--neutral--alpha--0);
879
982
  --l--theme--color--interactive--background--tertiary--on-subtle--disabled: var(--l--color--neutral--40);
880
983
  --l--theme--color--interactive--background--tertiary--on-subtle--focus: var(--l--color--neutral--alpha--0);
881
984
  --l--theme--color--interactive--background--tertiary--on-subtle--hover: var(--l--color--neutral--alpha--20);
@@ -889,6 +992,11 @@
889
992
  --l--theme--color--interactive--background--destructive--on-knockout--disabled: var(--l--color--neutral--dark--40);
890
993
  --l--theme--color--interactive--background--destructive--on-knockout--focus: var(--l--color--red--dark--90);
891
994
  --l--theme--color--interactive--background--destructive--on-knockout--hover: var(--l--color--red--dark--100);
995
+ --l--theme--color--interactive--background--destructive--on-primary--rest: var(--l--color--red--dark--90);
996
+ --l--theme--color--interactive--background--destructive--on-primary--active: var(--l--color--red--dark--100);
997
+ --l--theme--color--interactive--background--destructive--on-primary--disabled: var(--l--color--primary--100);
998
+ --l--theme--color--interactive--background--destructive--on-primary--focus: var(--l--color--red--dark--90);
999
+ --l--theme--color--interactive--background--destructive--on-primary--hover: var(--l--color--red--dark--100);
892
1000
  --l--theme--color--interactive--background--destructive--on-subtle--rest: var(--l--color--red--90);
893
1001
  --l--theme--color--interactive--background--destructive--on-subtle--active: var(--l--color--red--100);
894
1002
  --l--theme--color--interactive--background--destructive--on-subtle--disabled: var(--l--color--neutral--40);
@@ -904,6 +1012,11 @@
904
1012
  --l--theme--color--interactive--border--primary--on-knockout--disabled: var(--l--color--neutral--dark--40);
905
1013
  --l--theme--color--interactive--border--primary--on-knockout--focus: var(--l--color--neutral--dark--140);
906
1014
  --l--theme--color--interactive--border--primary--on-knockout--hover: var(--l--color--neutral--dark--130);
1015
+ --l--theme--color--interactive--border--primary--on-primary--rest: var(--l--color--primary--dark--140);
1016
+ --l--theme--color--interactive--border--primary--on-primary--active: var(--l--color--primary--dark--140);
1017
+ --l--theme--color--interactive--border--primary--on-primary--disabled: var(--l--color--primary--100);
1018
+ --l--theme--color--interactive--border--primary--on-primary--focus: var(--l--color--primary--dark--140);
1019
+ --l--theme--color--interactive--border--primary--on-primary--hover: var(--l--color--primary--dark--130);
907
1020
  --l--theme--color--interactive--border--primary--on-subtle--rest: var(--l--color--neutral--140);
908
1021
  --l--theme--color--interactive--border--primary--on-subtle--active: var(--l--color--neutral--140);
909
1022
  --l--theme--color--interactive--border--primary--on-subtle--disabled: var(--l--color--neutral--40);
@@ -913,29 +1026,39 @@
913
1026
  --l--theme--color--interactive--border--secondary--on-default--active: var(--l--color--neutral--120);
914
1027
  --l--theme--color--interactive--border--secondary--on-default--disabled: var(--l--color--neutral--40);
915
1028
  --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);
1029
+ --l--theme--color--interactive--border--secondary--on-default--hover: var(--l--color--neutral--120);
917
1030
  --l--theme--color--interactive--border--secondary--on-knockout--rest: var(--l--color--neutral--dark--120);
918
1031
  --l--theme--color--interactive--border--secondary--on-knockout--active: var(--l--color--neutral--dark--120);
919
1032
  --l--theme--color--interactive--border--secondary--on-knockout--disabled: var(--l--color--neutral--dark--40);
920
1033
  --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);
1034
+ --l--theme--color--interactive--border--secondary--on-knockout--hover: var(--l--color--neutral--dark--120);
1035
+ --l--theme--color--interactive--border--secondary--on-primary--rest: var(--l--color--primary--dark--120);
1036
+ --l--theme--color--interactive--border--secondary--on-primary--active: var(--l--color--primary--dark--120);
1037
+ --l--theme--color--interactive--border--secondary--on-primary--disabled: var(--l--color--primary--100);
1038
+ --l--theme--color--interactive--border--secondary--on-primary--focus: var(--l--color--primary--dark--120);
1039
+ --l--theme--color--interactive--border--secondary--on-primary--hover: var(--l--color--primary--dark--120);
922
1040
  --l--theme--color--interactive--border--secondary--on-subtle--rest: var(--l--color--neutral--120);
923
1041
  --l--theme--color--interactive--border--secondary--on-subtle--active: var(--l--color--neutral--120);
924
1042
  --l--theme--color--interactive--border--secondary--on-subtle--disabled: var(--l--color--neutral--40);
925
1043
  --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);
1044
+ --l--theme--color--interactive--border--secondary--on-subtle--hover: var(--l--color--neutral--120);
927
1045
  --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);
1046
+ --l--theme--color--interactive--border--tertiary--on-default--active: var(--l--color--neutral--alpha--0);
929
1047
  --l--theme--color--interactive--border--tertiary--on-default--disabled: var(--l--color--neutral--40);
930
1048
  --l--theme--color--interactive--border--tertiary--on-default--focus: var(--l--color--neutral--alpha--0);
931
1049
  --l--theme--color--interactive--border--tertiary--on-default--hover: var(--l--color--neutral--alpha--0);
932
1050
  --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);
1051
+ --l--theme--color--interactive--border--tertiary--on-knockout--active: var(--l--color--neutral--alpha--dark--0);
934
1052
  --l--theme--color--interactive--border--tertiary--on-knockout--disabled: var(--l--color--neutral--dark--40);
935
1053
  --l--theme--color--interactive--border--tertiary--on-knockout--focus: var(--l--color--neutral--alpha--dark--0);
936
1054
  --l--theme--color--interactive--border--tertiary--on-knockout--hover: var(--l--color--neutral--alpha--dark--0);
1055
+ --l--theme--color--interactive--border--tertiary--on-primary--rest: var(--l--color--primary--alpha--dark--0);
1056
+ --l--theme--color--interactive--border--tertiary--on-primary--active: var(--l--color--primary--alpha--dark--0);
1057
+ --l--theme--color--interactive--border--tertiary--on-primary--disabled: var(--l--color--primary--100);
1058
+ --l--theme--color--interactive--border--tertiary--on-primary--focus: var(--l--color--primary--alpha--dark--0);
1059
+ --l--theme--color--interactive--border--tertiary--on-primary--hover: var(--l--color--primary--alpha--dark--0);
937
1060
  --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);
1061
+ --l--theme--color--interactive--border--tertiary--on-subtle--active: var(--l--color--neutral--alpha--0);
939
1062
  --l--theme--color--interactive--border--tertiary--on-subtle--disabled: var(--l--color--neutral--40);
940
1063
  --l--theme--color--interactive--border--tertiary--on-subtle--focus: var(--l--color--neutral--alpha--0);
941
1064
  --l--theme--color--interactive--border--tertiary--on-subtle--hover: var(--l--color--neutral--alpha--0);
@@ -949,6 +1072,11 @@
949
1072
  --l--theme--color--interactive--border--destructive--on-knockout--disabled: var(--l--color--neutral--dark--40);
950
1073
  --l--theme--color--interactive--border--destructive--on-knockout--focus: var(--l--color--red--dark--90);
951
1074
  --l--theme--color--interactive--border--destructive--on-knockout--hover: var(--l--color--red--dark--100);
1075
+ --l--theme--color--interactive--border--destructive--on-primary--rest: var(--l--color--red--dark--90);
1076
+ --l--theme--color--interactive--border--destructive--on-primary--active: var(--l--color--red--dark--100);
1077
+ --l--theme--color--interactive--border--destructive--on-primary--disabled: var(--l--color--primary--100);
1078
+ --l--theme--color--interactive--border--destructive--on-primary--focus: var(--l--color--red--dark--90);
1079
+ --l--theme--color--interactive--border--destructive--on-primary--hover: var(--l--color--red--dark--100);
952
1080
  --l--theme--color--interactive--border--destructive--on-subtle--rest: var(--l--color--red--90);
953
1081
  --l--theme--color--interactive--border--destructive--on-subtle--active: var(--l--color--red--100);
954
1082
  --l--theme--color--interactive--border--destructive--on-subtle--disabled: var(--l--color--neutral--40);
@@ -964,6 +1092,11 @@
964
1092
  --l--theme--color--interactive--content--primary--on-knockout--disabled: var(--l--color--neutral--dark--110);
965
1093
  --l--theme--color--interactive--content--primary--on-knockout--focus: var(--l--color--neutral--dark--0);
966
1094
  --l--theme--color--interactive--content--primary--on-knockout--hover: var(--l--color--neutral--dark--0);
1095
+ --l--theme--color--interactive--content--primary--on-primary--rest: var(--l--color--primary--dark--0);
1096
+ --l--theme--color--interactive--content--primary--on-primary--active: var(--l--color--primary--dark--0);
1097
+ --l--theme--color--interactive--content--primary--on-primary--disabled: var(--l--color--primary--dark--110);
1098
+ --l--theme--color--interactive--content--primary--on-primary--focus: var(--l--color--primary--dark--0);
1099
+ --l--theme--color--interactive--content--primary--on-primary--hover: var(--l--color--primary--dark--0);
967
1100
  --l--theme--color--interactive--content--primary--on-subtle--rest: var(--l--color--neutral--0);
968
1101
  --l--theme--color--interactive--content--primary--on-subtle--active: var(--l--color--neutral--0);
969
1102
  --l--theme--color--interactive--content--primary--on-subtle--disabled: var(--l--color--neutral--110);
@@ -973,32 +1106,42 @@
973
1106
  --l--theme--color--interactive--content--secondary--on-default--active: var(--l--color--neutral--140);
974
1107
  --l--theme--color--interactive--content--secondary--on-default--disabled: var(--l--color--neutral--110);
975
1108
  --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);
1109
+ --l--theme--color--interactive--content--secondary--on-default--hover: var(--l--color--neutral--150);
977
1110
  --l--theme--color--interactive--content--secondary--on-knockout--rest: var(--l--color--neutral--dark--140);
978
1111
  --l--theme--color--interactive--content--secondary--on-knockout--active: var(--l--color--neutral--dark--140);
979
1112
  --l--theme--color--interactive--content--secondary--on-knockout--disabled: var(--l--color--neutral--dark--110);
980
1113
  --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);
1114
+ --l--theme--color--interactive--content--secondary--on-knockout--hover: var(--l--color--neutral--dark--150);
1115
+ --l--theme--color--interactive--content--secondary--on-primary--rest: var(--l--color--primary--dark--140);
1116
+ --l--theme--color--interactive--content--secondary--on-primary--active: var(--l--color--primary--dark--140);
1117
+ --l--theme--color--interactive--content--secondary--on-primary--disabled: var(--l--color--primary--dark--110);
1118
+ --l--theme--color--interactive--content--secondary--on-primary--focus: var(--l--color--primary--dark--140);
1119
+ --l--theme--color--interactive--content--secondary--on-primary--hover: var(--l--color--primary--dark--150);
982
1120
  --l--theme--color--interactive--content--secondary--on-subtle--rest: var(--l--color--neutral--140);
983
1121
  --l--theme--color--interactive--content--secondary--on-subtle--active: var(--l--color--neutral--140);
984
1122
  --l--theme--color--interactive--content--secondary--on-subtle--disabled: var(--l--color--neutral--110);
985
1123
  --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);
1124
+ --l--theme--color--interactive--content--secondary--on-subtle--hover: var(--l--color--neutral--150);
987
1125
  --l--theme--color--interactive--content--tertiary--on-default--rest: var(--l--color--neutral--140);
988
1126
  --l--theme--color--interactive--content--tertiary--on-default--active: var(--l--color--neutral--140);
989
1127
  --l--theme--color--interactive--content--tertiary--on-default--disabled: var(--l--color--neutral--110);
990
1128
  --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);
1129
+ --l--theme--color--interactive--content--tertiary--on-default--hover: var(--l--color--neutral--150);
992
1130
  --l--theme--color--interactive--content--tertiary--on-knockout--rest: var(--l--color--neutral--dark--140);
993
1131
  --l--theme--color--interactive--content--tertiary--on-knockout--active: var(--l--color--neutral--dark--140);
994
1132
  --l--theme--color--interactive--content--tertiary--on-knockout--disabled: var(--l--color--neutral--dark--110);
995
1133
  --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);
1134
+ --l--theme--color--interactive--content--tertiary--on-knockout--hover: var(--l--color--neutral--dark--150);
1135
+ --l--theme--color--interactive--content--tertiary--on-primary--rest: var(--l--color--primary--dark--140);
1136
+ --l--theme--color--interactive--content--tertiary--on-primary--active: var(--l--color--primary--dark--140);
1137
+ --l--theme--color--interactive--content--tertiary--on-primary--disabled: var(--l--color--primary--dark--110);
1138
+ --l--theme--color--interactive--content--tertiary--on-primary--focus: var(--l--color--primary--dark--140);
1139
+ --l--theme--color--interactive--content--tertiary--on-primary--hover: var(--l--color--primary--dark--150);
997
1140
  --l--theme--color--interactive--content--tertiary--on-subtle--rest: var(--l--color--neutral--140);
998
1141
  --l--theme--color--interactive--content--tertiary--on-subtle--active: var(--l--color--neutral--140);
999
1142
  --l--theme--color--interactive--content--tertiary--on-subtle--disabled: var(--l--color--neutral--110);
1000
1143
  --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);
1144
+ --l--theme--color--interactive--content--tertiary--on-subtle--hover: var(--l--color--neutral--150);
1002
1145
  --l--theme--color--interactive--content--destructive--on-default--rest: var(--l--color--neutral--0);
1003
1146
  --l--theme--color--interactive--content--destructive--on-default--active: var(--l--color--neutral--0);
1004
1147
  --l--theme--color--interactive--content--destructive--on-default--disabled: var(--l--color--neutral--110);
@@ -1009,6 +1152,11 @@
1009
1152
  --l--theme--color--interactive--content--destructive--on-knockout--disabled: var(--l--color--neutral--dark--110);
1010
1153
  --l--theme--color--interactive--content--destructive--on-knockout--focus: var(--l--color--neutral--dark--150);
1011
1154
  --l--theme--color--interactive--content--destructive--on-knockout--hover: var(--l--color--neutral--dark--150);
1155
+ --l--theme--color--interactive--content--destructive--on-primary--rest: var(--l--color--primary--dark--150);
1156
+ --l--theme--color--interactive--content--destructive--on-primary--active: var(--l--color--primary--dark--150);
1157
+ --l--theme--color--interactive--content--destructive--on-primary--disabled: var(--l--color--primary--110);
1158
+ --l--theme--color--interactive--content--destructive--on-primary--focus: var(--l--color--primary--dark--150);
1159
+ --l--theme--color--interactive--content--destructive--on-primary--hover: var(--l--color--primary--dark--150);
1012
1160
  --l--theme--color--interactive--content--destructive--on-subtle--rest: var(--l--color--neutral--0);
1013
1161
  --l--theme--color--interactive--content--destructive--on-subtle--active: var(--l--color--neutral--0);
1014
1162
  --l--theme--color--interactive--content--destructive--on-subtle--disabled: var(--l--color--neutral--110);
@@ -1024,6 +1172,11 @@
1024
1172
  --l--theme--color--link--content--primary--on-knockout--focus: var(--l--color--primary--dark--110);
1025
1173
  --l--theme--color--link--content--primary--on-knockout--active: var(--l--color--primary--dark--110);
1026
1174
  --l--theme--color--link--content--primary--on-knockout--visited: var(--l--color--primary--dark--110);
1175
+ --l--theme--color--link--content--primary--on-primary--rest: var(--l--color--primary--dark--140);
1176
+ --l--theme--color--link--content--primary--on-primary--hover: var(--l--color--primary--dark--150);
1177
+ --l--theme--color--link--content--primary--on-primary--focus: var(--l--color--primary--dark--140);
1178
+ --l--theme--color--link--content--primary--on-primary--active: var(--l--color--primary--dark--140);
1179
+ --l--theme--color--link--content--primary--on-primary--visited: var(--l--color--primary--dark--140);
1027
1180
  --l--theme--color--link--content--primary--on-subtle--rest: var(--l--color--primary--110);
1028
1181
  --l--theme--color--link--content--primary--on-subtle--hover: var(--l--color--primary--120);
1029
1182
  --l--theme--color--link--content--primary--on-subtle--focus: var(--l--color--primary--110);
@@ -1039,6 +1192,11 @@
1039
1192
  --l--theme--color--link--content--secondary--on-knockout--focus: var(--l--color--neutral--dark--140);
1040
1193
  --l--theme--color--link--content--secondary--on-knockout--active: var(--l--color--neutral--dark--140);
1041
1194
  --l--theme--color--link--content--secondary--on-knockout--visited: var(--l--color--neutral--dark--140);
1195
+ --l--theme--color--link--content--secondary--on-primary--rest: var(--l--color--primary--dark--140);
1196
+ --l--theme--color--link--content--secondary--on-primary--hover: var(--l--color--primary--dark--150);
1197
+ --l--theme--color--link--content--secondary--on-primary--focus: var(--l--color--primary--dark--140);
1198
+ --l--theme--color--link--content--secondary--on-primary--active: var(--l--color--primary--dark--140);
1199
+ --l--theme--color--link--content--secondary--on-primary--visited: var(--l--color--primary--dark--140);
1042
1200
  --l--theme--color--link--content--secondary--on-subtle--rest: var(--l--color--neutral--140);
1043
1201
  --l--theme--color--link--content--secondary--on-subtle--hover: var(--l--color--neutral--130);
1044
1202
  --l--theme--color--link--content--secondary--on-subtle--focus: var(--l--color--neutral--140);
@@ -1054,6 +1212,11 @@
1054
1212
  --l--theme--color--link--content--tertiary--on-knockout--focus: var(--l--color--neutral--dark--110);
1055
1213
  --l--theme--color--link--content--tertiary--on-knockout--active: var(--l--color--neutral--dark--110);
1056
1214
  --l--theme--color--link--content--tertiary--on-knockout--visited: var(--l--color--neutral--dark--110);
1215
+ --l--theme--color--link--content--tertiary--on-primary--rest: var(--l--color--primary--dark--130);
1216
+ --l--theme--color--link--content--tertiary--on-primary--hover: var(--l--color--primary--dark--140);
1217
+ --l--theme--color--link--content--tertiary--on-primary--focus: var(--l--color--primary--dark--130);
1218
+ --l--theme--color--link--content--tertiary--on-primary--active: var(--l--color--primary--dark--130);
1219
+ --l--theme--color--link--content--tertiary--on-primary--visited: var(--l--color--primary--dark--130);
1057
1220
  --l--theme--color--link--content--tertiary--on-subtle--rest: var(--l--color--neutral--110);
1058
1221
  --l--theme--color--link--content--tertiary--on-subtle--hover: var(--l--color--neutral--120);
1059
1222
  --l--theme--color--link--content--tertiary--on-subtle--focus: var(--l--color--neutral--110);
@@ -1061,21 +1224,27 @@
1061
1224
  --l--theme--color--link--content--tertiary--on-subtle--visited: var(--l--color--neutral--110);
1062
1225
  --l--theme--color--messaging--content--destructive--on-default: var(--l--color--red--110);
1063
1226
  --l--theme--color--messaging--content--destructive--on-knockout: var(--l--color--red--dark--110);
1227
+ --l--theme--color--messaging--content--destructive--on-primary: var(--l--color--red--dark--110);
1064
1228
  --l--theme--color--messaging--content--destructive--on-subtle: var(--l--color--red--120);
1065
1229
  --l--theme--color--messaging--content--informative--on-default: var(--l--color--blue--110);
1066
1230
  --l--theme--color--messaging--content--informative--on-knockout: var(--l--color--blue--dark--110);
1231
+ --l--theme--color--messaging--content--informative--on-primary: var(--l--color--blue--dark--110);
1067
1232
  --l--theme--color--messaging--content--informative--on-subtle: var(--l--color--blue--120);
1068
1233
  --l--theme--color--messaging--content--positive--on-default: var(--l--color--green--110);
1069
1234
  --l--theme--color--messaging--content--positive--on-knockout: var(--l--color--green--dark--110);
1235
+ --l--theme--color--messaging--content--positive--on-primary: var(--l--color--green--dark--110);
1070
1236
  --l--theme--color--messaging--content--positive--on-subtle: var(--l--color--green--120);
1071
1237
  --l--theme--color--messaging--content--warning--on-default: var(--l--color--yellow--110);
1072
1238
  --l--theme--color--messaging--content--warning--on-knockout: var(--l--color--yellow--dark--110);
1239
+ --l--theme--color--messaging--content--warning--on-primary: var(--l--color--yellow--dark--110);
1073
1240
  --l--theme--color--messaging--content--warning--on-subtle: var(--l--color--yellow--120);
1074
1241
  --l--theme--color--selection--background--on-default: var(--l--color--neutral--140);
1075
1242
  --l--theme--color--selection--background--on-knockout: var(--l--color--neutral--dark--140);
1243
+ --l--theme--color--selection--background--on-primary: var(--l--color--primary--dark--140);
1076
1244
  --l--theme--color--selection--background--on-subtle: var(--l--color--neutral--140);
1077
1245
  --l--theme--color--selection--content--on-default: var(--l--color--neutral--0);
1078
1246
  --l--theme--color--selection--content--on-knockout: var(--l--color--neutral--dark--0);
1247
+ --l--theme--color--selection--content--on-primary: var(--l--color--primary--dark--0);
1079
1248
  --l--theme--color--selection--content--on-subtle: var(--l--color--neutral--0);
1080
1249
  --l--typography--text-decoration-thickness--sm: var(--l--units--relative--1);
1081
1250
  --l--typography--text-decoration-thickness--md: var(--l--units--relative--2);
@@ -1083,7 +1252,7 @@
1083
1252
  --l--typography--text-decoration-thickness--xl: var(--l--units--relative--8);
1084
1253
  --l--typography--text-decoration-thickness--xxl: var(--l--units--relative--12);
1085
1254
  --l--theme--typography--blockquote--font-family: var(--l--typography--font-family--primary);
1086
- --l--theme--typography--blockquote--font-size: clamp(var(--l--typography--font-size--24), 1.1765vw + 1.2353rem, var(--l--typography--font-size--32));
1255
+ --l--theme--typography--blockquote--font-size: clamp(var(--l--typography--font-size--24), 0.74074vw + 1.3333rem, var(--l--typography--font-size--32));
1087
1256
  --l--theme--typography--blockquote--font-style: var(--l--typography--font-style--italic);
1088
1257
  --l--theme--typography--blockquote--font-variant-caps: var(--l--typography--font-variant-caps--normal);
1089
1258
  --l--theme--typography--blockquote--font-weight: var(--l--typography--font-weight--medium);
@@ -1224,7 +1393,7 @@
1224
1393
  --l--theme--typography--label--font-variant-caps: var(--l--typography--font-variant-caps--normal);
1225
1394
  --l--theme--typography--label--font-weight: var(--l--typography--font-weight--medium);
1226
1395
  --l--theme--typography--label--letter-spacing: var(--l--typography--letter-spacing--normal);
1227
- --l--theme--typography--label--line-height: var(--l--typography--line-height--1500);
1396
+ --l--theme--typography--label--line-height: var(--l--typography--line-height--1375);
1228
1397
  --l--theme--typography--label--text-transform: var(--l--typography--text-transform--none);
1229
1398
  --l--theme--typography--link--text-decoration-line--primary--rest: var(--l--typography--text-decoration-line--underline);
1230
1399
  --l--theme--typography--link--text-decoration-line--primary--hover: var(--l--typography--text-decoration-line--none);
@@ -1376,9 +1545,11 @@
1376
1545
  --l--theme--border--text-highlight--width: var(--l--theme--border--width--none);
1377
1546
  --l--theme--color--dialog--background--on-default: var(--l--theme--color--background--default);
1378
1547
  --l--theme--color--dialog--background--on-knockout: var(--l--theme--color--background--knockout);
1548
+ --l--theme--color--dialog--background--on-primary: var(--l--theme--color--background--primary);
1379
1549
  --l--theme--color--dialog--background--on-subtle: var(--l--theme--color--background--subtle);
1380
1550
  --l--theme--color--dialog--content--on-default: var(--l--theme--color--content--primary--on-default);
1381
1551
  --l--theme--color--dialog--content--on-knockout: var(--l--theme--color--content--primary--on-knockout);
1552
+ --l--theme--color--dialog--content--on-primary: var(--l--theme--color--content--primary--on-primary);
1382
1553
  --l--theme--color--dialog--content--on-subtle: var(--l--theme--color--content--primary--on-subtle);
1383
1554
  --l--theme--color--input--content--on-default--rest: var(--l--theme--color--content--primary--on-default);
1384
1555
  --l--theme--color--input--content--on-default--hover: var(--l--theme--color--content--primary--on-default);
@@ -1386,6 +1557,9 @@
1386
1557
  --l--theme--color--input--content--on-knockout--rest: var(--l--theme--color--content--primary--on-knockout);
1387
1558
  --l--theme--color--input--content--on-knockout--hover: var(--l--theme--color--content--primary--on-knockout);
1388
1559
  --l--theme--color--input--content--on-knockout--focus: var(--l--theme--color--content--primary--on-knockout);
1560
+ --l--theme--color--input--content--on-primary--rest: var(--l--theme--color--content--primary--on-primary);
1561
+ --l--theme--color--input--content--on-primary--hover: var(--l--theme--color--content--primary--on-primary);
1562
+ --l--theme--color--input--content--on-primary--focus: var(--l--theme--color--content--primary--on-primary);
1389
1563
  --l--theme--color--input--content--on-subtle--rest: var(--l--theme--color--content--primary--on-default);
1390
1564
  --l--theme--color--input--content--on-subtle--hover: var(--l--theme--color--content--primary--on-default);
1391
1565
  --l--theme--color--input--content--on-subtle--focus: var(--l--theme--color--content--primary--on-default);
@@ -1395,11 +1569,16 @@
1395
1569
  --l--theme--color--input--placeholder--on-knockout--rest: var(--l--theme--color--content--secondary--on-knockout);
1396
1570
  --l--theme--color--input--placeholder--on-knockout--hover: var(--l--theme--color--content--secondary--on-knockout);
1397
1571
  --l--theme--color--input--placeholder--on-knockout--focus: var(--l--theme--color--content--secondary--on-knockout);
1572
+ --l--theme--color--input--placeholder--on-primary--rest: var(--l--theme--color--content--secondary--on-primary);
1573
+ --l--theme--color--input--placeholder--on-primary--hover: var(--l--theme--color--content--secondary--on-primary);
1574
+ --l--theme--color--input--placeholder--on-primary--focus: var(--l--theme--color--content--secondary--on-primary);
1398
1575
  --l--theme--color--input--placeholder--on-subtle--rest: var(--l--theme--color--content--secondary--on-subtle);
1399
1576
  --l--theme--color--input--placeholder--on-subtle--hover: var(--l--theme--color--content--secondary--on-subtle);
1400
1577
  --l--theme--color--input--placeholder--on-subtle--focus: var(--l--theme--color--content--secondary--on-subtle);
1401
1578
  --l--theme--outline--width: var(--l--theme--border--width--md);
1402
1579
  --l--theme--space--gutter: var(--l--theme--space--70);
1580
+ --l--theme--space--grid--gap--inline: var(--l--theme--space--70);
1581
+ --l--theme--space--grid--gap--block: var(--l--theme--space--70);
1403
1582
  --l--theme--space--interactive--inset-block--xs: var(--l--theme--space--20);
1404
1583
  --l--theme--space--interactive--inset-block--sm: var(--l--theme--space--30);
1405
1584
  --l--theme--space--interactive--inset-block--md: var(--l--theme--space--40);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@withlayers/tokens",
3
- "version": "0.29.0",
3
+ "version": "0.31.0",
4
4
  "description": "Design tokens layer",
5
5
  "license": "MIT",
6
6
  "author": "Dmitry Mayorov",