@liner-fe/design-token 2.4.21 → 2.4.22

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 (11) hide show
  1. package/lib/index.css +103 -74
  2. package/lib/index.css.map +1 -1
  3. package/lib/index.d.ts +37 -19
  4. package/lib/index.js +2 -2
  5. package/lib/index.js.map +1 -1
  6. package/lib/tailwind.css +33 -17
  7. package/package.json +1 -1
  8. package/src/generated/classNames.ts +1 -1
  9. package/src/generated/vars.ts +1 -1
  10. package/src/style/global.css +101 -72
  11. package/src/style/tailwind.css +33 -17
package/src/style/global.css CHANGED
@@ -23,6 +23,7 @@
23
23
  --lp-pri-brand-original-200: #14371B;
24
24
  --lp-pri-brand-original-150: #082C11;
25
25
  --lp-pri-brand-original-50: #002109;
26
+ --lp-pri-brand-variation-970: #DEFFDF;
26
27
  --lp-pri-brand-variation-950: #C3FFD0;
27
28
  --lp-pri-brand-variation-900: #96F7B3;
28
29
  --lp-pri-brand-variation-420: #00733E;
@@ -287,6 +288,11 @@
287
288
  --lp-sys-padding-component-700: 32px;
288
289
  --lp-sys-padding-component-800: 40px;
289
290
  --lp-sys-padding-component-900: 48px;
291
+ --lp-sys-padding-component-1000: 56px;
292
+ --lp-sys-padding-component-1100: 64px;
293
+ --lp-sys-padding-component-1300: 80px;
294
+ --lp-sys-padding-component-1500: 100px;
295
+ --lp-sys-padding-component-1700: 120px;
290
296
  --lp-sys-padding-section-50: 20px;
291
297
  --lp-sys-padding-section-100: 24px;
292
298
  --lp-sys-padding-section-200: 32px;
@@ -325,6 +331,7 @@
325
331
  --lp-pri-font-size-32: 32px;
326
332
  --lp-pri-font-size-34: 34px;
327
333
  --lp-pri-font-size-40: 40px;
334
+ --lp-pri-font-size-42: 42px;
328
335
  --lp-pri-font-size-52: 52px;
329
336
  --lp-pri-font-size-54: 54px;
330
337
  --lp-pri-font-size-56: 56px;
@@ -359,39 +366,39 @@
359
366
  line-height: var(--lp-pri-font-lineheight-130);
360
367
 
361
368
  }.lp-sys-typo-display3-accent-black { font-family: "Pretendard Variable";
362
- font-size: var(--lp-pri-font-size-40);
369
+ font-size: var(--lp-pri-font-size-42);
363
370
  font-weight: var(--lp-pri-font-weight-600);
364
371
  line-height: var(--lp-pri-font-lineheight-130);
365
372
 
366
373
  }.lp-sys-typo-heading1-answer { font-family: "Pretendard Variable";
367
- font-size: var(--lp-pri-font-size-28);
368
- font-weight: var(--lp-pri-font-weight-700);
369
- line-height: var(--lp-pri-font-lineheight-180);
374
+ font-size: var(--lp-pri-font-size-22);
375
+ font-weight: var(--lp-pri-font-weight-600);
376
+ line-height: var(--lp-pri-font-lineheight-150);
370
377
 
371
378
  }.lp-sys-typo-heading2-answer { font-family: "Pretendard Variable";
372
- font-size: var(--lp-pri-font-size-24);
373
- font-weight: var(--lp-pri-font-weight-700);
374
- line-height: var(--lp-pri-font-lineheight-180);
379
+ font-size: var(--lp-pri-font-size-22);
380
+ font-weight: var(--lp-pri-font-weight-600);
381
+ line-height: var(--lp-pri-font-lineheight-150);
375
382
 
376
383
  }.lp-sys-typo-heading3-answer { font-family: "Pretendard Variable";
377
- font-size: var(--lp-pri-font-size-20);
378
- font-weight: var(--lp-pri-font-weight-700);
379
- line-height: var(--lp-pri-font-lineheight-180);
384
+ font-size: var(--lp-pri-font-size-22);
385
+ font-weight: var(--lp-pri-font-weight-600);
386
+ line-height: var(--lp-pri-font-lineheight-150);
380
387
 
381
388
  }.lp-sys-typo-heading4-answer { font-family: "Pretendard Variable";
382
- font-size: var(--lp-pri-font-size-17);
383
- font-weight: var(--lp-pri-font-weight-700);
384
- line-height: var(--lp-pri-font-lineheight-180);
389
+ font-size: var(--lp-pri-font-size-20);
390
+ font-weight: var(--lp-pri-font-weight-600);
391
+ line-height: var(--lp-pri-font-lineheight-150);
385
392
 
386
393
  }.lp-sys-typo-heading5-answer { font-family: "Pretendard Variable";
387
- font-size: var(--lp-pri-font-size-17);
388
- font-weight: var(--lp-pri-font-weight-700);
389
- line-height: var(--lp-pri-font-lineheight-180);
394
+ font-size: var(--lp-pri-font-size-16);
395
+ font-weight: var(--lp-pri-font-weight-600);
396
+ line-height: var(--lp-pri-font-lineheight-150);
390
397
 
391
398
  }.lp-sys-typo-heading6-answer { font-family: "Pretendard Variable";
392
- font-size: var(--lp-pri-font-size-17);
393
- font-weight: var(--lp-pri-font-weight-700);
394
- line-height: var(--lp-pri-font-lineheight-180);
399
+ font-size: var(--lp-pri-font-size-16);
400
+ font-weight: var(--lp-pri-font-weight-600);
401
+ line-height: var(--lp-pri-font-lineheight-150);
395
402
 
396
403
  }.lp-sys-typo-title1-accent-bold { font-family: "Pretendard Variable";
397
404
  font-size: var(--lp-pri-font-size-32);
@@ -498,8 +505,8 @@
498
505
  font-weight: var(--lp-pri-font-weight-350);
499
506
  line-height: var(--lp-pri-font-lineheight-130);
500
507
 
501
- }.lp-sys-typo-paragraph1-post-regular { font-family: "Pretendard Variable";
502
- font-size: var(--lp-pri-font-size-17);
508
+ }.lp-sys-typo-paragraph2-post-regular { font-family: "Pretendard Variable";
509
+ font-size: var(--lp-pri-font-size-16);
503
510
  font-weight: var(--lp-pri-font-weight-350);
504
511
  line-height: var(--lp-pri-font-lineheight-150);
505
512
 
@@ -508,10 +515,20 @@
508
515
  font-weight: var(--lp-pri-font-weight-350);
509
516
  line-height: var(--lp-pri-font-lineheight-150);
510
517
 
511
- }.lp-sys-typo-paragraph1-answer-regular { font-family: "Pretendard Variable";
518
+ }.lp-sys-typo-paragraph4-post-regular { font-family: "Pretendard Variable";
519
+ font-size: var(--lp-pri-font-size-14);
520
+ font-weight: var(--lp-pri-font-weight-350);
521
+ line-height: var(--lp-pri-font-lineheight-150);
522
+
523
+ }.lp-sys-typo-paragraph2-answer-bold { font-family: "Pretendard Variable";
524
+ font-size: var(--lp-pri-font-size-16);
525
+ font-weight: var(--lp-pri-font-weight-600);
526
+ line-height: var(--lp-pri-font-lineheight-160);
527
+
528
+ }.lp-sys-typo-paragraph2-answer-regular { font-family: "Pretendard Variable";
512
529
  font-size: var(--lp-pri-font-size-16);
513
530
  font-weight: var(--lp-pri-font-weight-350);
514
- line-height: var(--lp-pri-font-lineheight-180);
531
+ line-height: var(--lp-pri-font-lineheight-160);
515
532
 
516
533
  }.lp-sys-typo-caption1-normal-bold { font-family: "Pretendard Variable";
517
534
  font-size: var(--lp-pri-font-size-13);
@@ -577,15 +594,20 @@
577
594
  --neutral-container-static-lowest: var(--lp-pri-achromatic-white);
578
595
  --neutral-container-static-lowest-hover: var(--lp-pri-gray-cool-980);
579
596
  --neutral-container-variation-lowest: var(--lp-pri-gray-cool-200);
580
- --neutral-fill-lowest: var(--lp-pri-gray-cool-dark-alpha-0);
581
- --neutral-fill-lowest-hover: var(--lp-pri-gray-cool-dark-alpha-12);
582
- --neutral-fill-low: var(--lp-pri-gray-cool-dark-alpha-8);
583
- --neutral-fill-low-hover: var(--lp-pri-gray-cool-dark-alpha-20);
584
- --neutral-fill-mid: var(--lp-pri-gray-cool-dark-alpha-16);
585
- --neutral-fill-mid-hover: var(--lp-pri-gray-cool-dark-alpha-32);
586
- --neutral-fill-high: var(--lp-pri-gray-cool-dark-alpha-32);
587
- --neutral-fill-high-hover: var(--lp-pri-gray-cool-dark-alpha-44);
588
- --neutral-fill-highest: var(--lp-pri-gray-cool-dark-alpha-72);
597
+ --neutral-fill-overlay-lowest: var(--lp-pri-gray-cool-dark-alpha-0);
598
+ --neutral-fill-overlay-lowest-hover: var(--lp-pri-gray-cool-dark-alpha-12);
599
+ --neutral-fill-overlay-low: var(--lp-pri-gray-cool-dark-alpha-8);
600
+ --neutral-fill-overlay-low-hover: var(--lp-pri-gray-cool-dark-alpha-20);
601
+ --neutral-fill-overlay-mid: var(--lp-pri-gray-cool-dark-alpha-16);
602
+ --neutral-fill-overlay-mid-hover: var(--lp-pri-gray-cool-dark-alpha-32);
603
+ --neutral-fill-overlay-high: var(--lp-pri-gray-cool-dark-alpha-32);
604
+ --neutral-fill-overlay-high-hover: var(--lp-pri-gray-cool-dark-alpha-44);
605
+ --neutral-fill-overlay-highest: var(--lp-pri-gray-cool-dark-alpha-72);
606
+ --neutral-fill-opaque-lowest: var(--lp-pri-gray-cool-100);
607
+ --neutral-fill-opaque-lowest-hover: var(--lp-pri-gray-cool-200);
608
+ --neutral-fill-opaque-low: var(--lp-pri-gray-cool-200);
609
+ --neutral-fill-opaque-low-hover: var(--lp-pri-gray-cool-250);
610
+ --neutral-fill-opaque-static-lowest: var(--lp-pri-achromatic-white);
589
611
  --neutral-label-primary: var(--lp-pri-achromatic-white);
590
612
  --neutral-label-secondary: var(--lp-pri-gray-cool-light-alpha-64);
591
613
  --neutral-label-tertiary: var(--lp-pri-gray-cool-light-alpha-32);
@@ -608,8 +630,13 @@
608
630
  --inverse-container-high: var(--lp-pri-gray-cool-940);
609
631
  --inverse-container-high-hover: var(--lp-pri-gray-cool-900);
610
632
  --inverse-container-static-high: var(--lp-pri-gray-cool-250);
611
- --inverse-container-static-high-hover: var(--lp-pri-gray-cool-350);
633
+ --inverse-container-static-high-hover: var(--lp-pri-gray-cool-270);
612
634
  --inverse-container-highest: var(--lp-pri-gray-cool-920);
635
+ --inverse-fill-opaque-lowest: var(--lp-pri-achromatic-white);
636
+ --inverse-fill-opaque-lowest-hover: var(--lp-pri-gray-cool-980);
637
+ --inverse-fill-opaque-low: var(--lp-pri-gray-cool-980);
638
+ --inverse-fill-opaque-low-hover: var(--lp-pri-gray-cool-970);
639
+ --inverse-fill-opaque-mid: var(--lp-pri-gray-cool-970);
613
640
  --inverse-fill-mid: var(--lp-pri-gray-cool-light-alpha-24);
614
641
  --inverse-fill-mid-hover: var(--lp-pri-gray-cool-dark-alpha-16);
615
642
  --inverse-label-primary: var(--lp-pri-gray-cool-100);
@@ -634,7 +661,7 @@
634
661
  --brand-fill-low-hover: var(--lp-pri-brand-variation-380);
635
662
  --brand-label-primary: var(--lp-pri-brand-variation-950);
636
663
  --brand-label-secondary: var(--lp-pri-achromatic-white);
637
- --brand-label-variation-secondary: var(--lp-pri-achromatic-white-alpha-80);
664
+ --brand-label-variation-secondary: var(--lp-pri-brand-variation-970);
638
665
  --brand-border-opaque-normal: var(--lp-pri-achromatic-white);
639
666
  --brand-border-opaque-strong: var(--lp-pri-brand-variation-950);
640
667
  --brandinverse-label-primary: var(--lp-pri-brand-original-500);
@@ -646,14 +673,15 @@
646
673
  --accent-label-cyan: var(--lp-pri-rainbow-cyan-600);
647
674
  --accent-label-purple: var(--lp-pri-rainbow-purple-600);
648
675
  --accent-label-pink: var(--lp-pri-rainbow-pink-600);
649
- --accent-container-primary: var(--lp-pri-rainbow-orange-500);
650
- --function-container-positive: var(--lp-pri-rainbow-green-600);
651
- --function-container-negative: var(--lp-pri-rainbow-red-500);
652
- --function-container-negative-hover: var(--lp-pri-rainbow-red-600);
653
- --function-container-caution: var(--lp-pri-rainbow-orange-730);
654
- --function-container-highlight: var(--lp-pri-rainbow-lime_green-300);
655
- --function-container-selection: var(--lp-pri-achromatic-white-alpha-12);
656
- --function-container-drag: var(--lp-pri-achromatic-white-alpha-16);
676
+ --accent-fill-primary: var(--lp-pri-rainbow-orange-500);
677
+ --function-fill-positive: var(--lp-pri-rainbow-green-600);
678
+ --function-fill-negative: var(--lp-pri-rainbow-red-500);
679
+ --function-fill-caution: var(--lp-pri-rainbow-orange-730);
680
+ --function-fill-highlight: var(--lp-pri-rainbow-lime_green-300);
681
+ --function-fill-selection: var(--lp-pri-achromatic-white-alpha-12);
682
+ --function-fill-drag: var(--lp-pri-achromatic-white-alpha-16);
683
+ --function-fill-positive-low: var(--lp-pri-rainbow-green-200);
684
+ --function-fill-negative-low: var(--lp-pri-rainbow-red-200);
657
685
  --function-label-positive: var(--lp-pri-rainbow-green-600);
658
686
  --function-label-negative: var(--lp-pri-rainbow-red-500);
659
687
  --function-label-caution: var(--lp-pri-rainbow-orange-730);
@@ -682,15 +710,20 @@
682
710
  --neutral-container-static-lowest: var(--lp-pri-achromatic-white);
683
711
  --neutral-container-static-lowest-hover: var(--lp-pri-gray-cool-980);
684
712
  --neutral-container-variation-lowest: var(--lp-pri-achromatic-white);
685
- --neutral-fill-lowest: var(--lp-pri-gray-cool-dark-alpha-0);
686
- --neutral-fill-lowest-hover: var(--lp-pri-gray-cool-dark-alpha-6);
687
- --neutral-fill-low: var(--lp-pri-gray-cool-dark-alpha-4);
688
- --neutral-fill-low-hover: var(--lp-pri-gray-cool-dark-alpha-8);
689
- --neutral-fill-mid: var(--lp-pri-gray-cool-dark-alpha-8);
690
- --neutral-fill-mid-hover: var(--lp-pri-gray-cool-dark-alpha-16);
691
- --neutral-fill-high: var(--lp-pri-gray-cool-dark-alpha-20);
692
- --neutral-fill-high-hover: var(--lp-pri-gray-cool-dark-alpha-28);
693
- --neutral-fill-highest: var(--lp-pri-gray-cool-dark-alpha-72);
713
+ --neutral-fill-overlay-lowest: var(--lp-pri-gray-cool-dark-alpha-0);
714
+ --neutral-fill-overlay-lowest-hover: var(--lp-pri-gray-cool-dark-alpha-6);
715
+ --neutral-fill-overlay-low: var(--lp-pri-gray-cool-dark-alpha-4);
716
+ --neutral-fill-overlay-low-hover: var(--lp-pri-gray-cool-dark-alpha-8);
717
+ --neutral-fill-overlay-mid: var(--lp-pri-gray-cool-dark-alpha-8);
718
+ --neutral-fill-overlay-mid-hover: var(--lp-pri-gray-cool-dark-alpha-16);
719
+ --neutral-fill-overlay-high: var(--lp-pri-gray-cool-dark-alpha-20);
720
+ --neutral-fill-overlay-high-hover: var(--lp-pri-gray-cool-dark-alpha-28);
721
+ --neutral-fill-overlay-highest: var(--lp-pri-gray-cool-dark-alpha-72);
722
+ --neutral-fill-opaque-lowest: var(--lp-pri-achromatic-white);
723
+ --neutral-fill-opaque-lowest-hover: var(--lp-pri-gray-cool-980);
724
+ --neutral-fill-opaque-low: var(--lp-pri-gray-cool-980);
725
+ --neutral-fill-opaque-low-hover: var(--lp-pri-gray-cool-970);
726
+ --neutral-fill-opaque-static-lowest: var(--lp-pri-achromatic-white);
694
727
  --neutral-label-primary: var(--lp-pri-gray-cool-100);
695
728
  --neutral-label-secondary: var(--lp-pri-gray-cool-dark-alpha-80);
696
729
  --neutral-label-tertiary: var(--lp-pri-gray-cool-dark-alpha-48);
@@ -713,8 +746,13 @@
713
746
  --inverse-container-high: var(--lp-pri-gray-cool-250);
714
747
  --inverse-container-high-hover: var(--lp-pri-gray-cool-300);
715
748
  --inverse-container-static-high: var(--lp-pri-gray-cool-250);
716
- --inverse-container-static-high-hover: var(--lp-pri-gray-cool-350);
749
+ --inverse-container-static-high-hover: var(--lp-pri-gray-cool-270);
717
750
  --inverse-container-highest: var(--lp-pri-gray-cool-300);
751
+ --inverse-fill-opaque-lowest: var(--lp-pri-gray-cool-100);
752
+ --inverse-fill-opaque-lowest-hover: var(--lp-pri-gray-cool-200);
753
+ --inverse-fill-opaque-low: var(--lp-pri-gray-cool-200);
754
+ --inverse-fill-opaque-low-hover: var(--lp-pri-gray-cool-250);
755
+ --inverse-fill-opaque-mid: var(--lp-pri-gray-cool-250);
718
756
  --inverse-fill-mid: var(--lp-pri-achromatic-white);
719
757
  --inverse-fill-mid-hover: var(--lp-pri-gray-cool-dark-alpha-32);
720
758
  --inverse-label-primary: var(--lp-pri-achromatic-white);
@@ -751,14 +789,15 @@
751
789
  --accent-label-cyan: var(--lp-pri-rainbow-cyan-500);
752
790
  --accent-label-purple: var(--lp-pri-rainbow-purple-500);
753
791
  --accent-label-pink: var(--lp-pri-rainbow-pink-500);
754
- --accent-container-primary: var(--lp-pri-rainbow-orange-800);
755
- --function-container-positive: var(--lp-pri-rainbow-green-500);
756
- --function-container-negative: var(--lp-pri-rainbow-red-500);
757
- --function-container-negative-hover: var(--lp-pri-rainbow-red-400);
758
- --function-container-caution: var(--lp-pri-rainbow-orange-700);
759
- --function-container-highlight: var(--lp-pri-rainbow-lime_green-970);
760
- --function-container-selection: var(--lp-pri-brand-original-alpha-8);
761
- --function-container-drag: var(--lp-pri-brand-original-alpha-12);
792
+ --accent-fill-primary: var(--lp-pri-rainbow-orange-800);
793
+ --function-fill-positive: var(--lp-pri-rainbow-green-500);
794
+ --function-fill-negative: var(--lp-pri-rainbow-red-500);
795
+ --function-fill-caution: var(--lp-pri-rainbow-orange-700);
796
+ --function-fill-highlight: var(--lp-pri-rainbow-lime_green-970);
797
+ --function-fill-selection: var(--lp-pri-brand-original-alpha-8);
798
+ --function-fill-drag: var(--lp-pri-brand-original-alpha-12);
799
+ --function-fill-positive-low: var(--lp-pri-rainbow-green-900);
800
+ --function-fill-negative-low: var(--lp-pri-rainbow-red-900);
762
801
  --function-label-positive: var(--lp-pri-rainbow-green-500);
763
802
  --function-label-negative: var(--lp-pri-rainbow-red-500);
764
803
  --function-label-caution: var(--lp-pri-rainbow-orange-700);
@@ -804,15 +843,10 @@
804
843
  line-height: var(--lp-pri-font-lineheight-110);
805
844
  letter-spacing: var(--lp-pri-font-letterspacing-tight);
806
845
  }.lp-sys-typo-display3-accent-black { font-family: Flare;
807
- font-size: var(--lp-pri-font-size-40);
846
+ font-size: var(--lp-pri-font-size-42);
808
847
  font-weight: var(--lp-pri-font-weight-400);
809
848
  line-height: var(--lp-pri-font-lineheight-120);
810
849
  letter-spacing: var(--lp-pri-font-letterspacing-tight);
811
- }.lp-sys-typo-paragraph1-answer-regular { font-family: Flare;
812
- font-size: var(--lp-pri-font-size-17);
813
- font-weight: var(--lp-pri-font-weight-400);
814
- line-height: var(--lp-pri-font-lineheight-170);
815
-
816
850
  }
817
851
  }
818
852
  :root[lang="default"] {
@@ -847,14 +881,9 @@
847
881
  line-height: var(--lp-pri-font-lineheight-110);
848
882
  letter-spacing: var(--lp-pri-font-letterspacing-tight);
849
883
  }.lp-sys-typo-display3-accent-black { font-family: Flare;
850
- font-size: var(--lp-pri-font-size-40);
884
+ font-size: var(--lp-pri-font-size-42);
851
885
  font-weight: var(--lp-pri-font-weight-400);
852
886
  line-height: var(--lp-pri-font-lineheight-120);
853
887
  letter-spacing: var(--lp-pri-font-letterspacing-tight);
854
- }.lp-sys-typo-paragraph1-answer-regular { font-family: Flare;
855
- font-size: var(--lp-pri-font-size-17);
856
- font-weight: var(--lp-pri-font-weight-400);
857
- line-height: var(--lp-pri-font-lineheight-170);
858
-
859
888
  }
860
889
  }
package/src/style/tailwind.css CHANGED
@@ -16,15 +16,20 @@
16
16
  --color-neutral-container-static-lowest: var(--neutral-container-static-lowest);
17
17
  --color-neutral-container-static-lowest-hover: var(--neutral-container-static-lowest-hover);
18
18
  --color-neutral-container-variation-lowest: var(--neutral-container-variation-lowest);
19
- --color-neutral-fill-lowest: var(--neutral-fill-lowest);
20
- --color-neutral-fill-lowest-hover: var(--neutral-fill-lowest-hover);
21
- --color-neutral-fill-low: var(--neutral-fill-low);
22
- --color-neutral-fill-low-hover: var(--neutral-fill-low-hover);
23
- --color-neutral-fill-mid: var(--neutral-fill-mid);
24
- --color-neutral-fill-mid-hover: var(--neutral-fill-mid-hover);
25
- --color-neutral-fill-high: var(--neutral-fill-high);
26
- --color-neutral-fill-high-hover: var(--neutral-fill-high-hover);
27
- --color-neutral-fill-highest: var(--neutral-fill-highest);
19
+ --color-neutral-fill-overlay-lowest: var(--neutral-fill-overlay-lowest);
20
+ --color-neutral-fill-overlay-lowest-hover: var(--neutral-fill-overlay-lowest-hover);
21
+ --color-neutral-fill-overlay-low: var(--neutral-fill-overlay-low);
22
+ --color-neutral-fill-overlay-low-hover: var(--neutral-fill-overlay-low-hover);
23
+ --color-neutral-fill-overlay-mid: var(--neutral-fill-overlay-mid);
24
+ --color-neutral-fill-overlay-mid-hover: var(--neutral-fill-overlay-mid-hover);
25
+ --color-neutral-fill-overlay-high: var(--neutral-fill-overlay-high);
26
+ --color-neutral-fill-overlay-high-hover: var(--neutral-fill-overlay-high-hover);
27
+ --color-neutral-fill-overlay-highest: var(--neutral-fill-overlay-highest);
28
+ --color-neutral-fill-opaque-lowest: var(--neutral-fill-opaque-lowest);
29
+ --color-neutral-fill-opaque-lowest-hover: var(--neutral-fill-opaque-lowest-hover);
30
+ --color-neutral-fill-opaque-low: var(--neutral-fill-opaque-low);
31
+ --color-neutral-fill-opaque-low-hover: var(--neutral-fill-opaque-low-hover);
32
+ --color-neutral-fill-opaque-static-lowest: var(--neutral-fill-opaque-static-lowest);
28
33
  --color-neutral-label-primary: var(--neutral-label-primary);
29
34
  --color-neutral-label-secondary: var(--neutral-label-secondary);
30
35
  --color-neutral-label-tertiary: var(--neutral-label-tertiary);
@@ -49,6 +54,11 @@
49
54
  --color-inverse-container-static-high: var(--inverse-container-static-high);
50
55
  --color-inverse-container-static-high-hover: var(--inverse-container-static-high-hover);
51
56
  --color-inverse-container-highest: var(--inverse-container-highest);
57
+ --color-inverse-fill-opaque-lowest: var(--inverse-fill-opaque-lowest);
58
+ --color-inverse-fill-opaque-lowest-hover: var(--inverse-fill-opaque-lowest-hover);
59
+ --color-inverse-fill-opaque-low: var(--inverse-fill-opaque-low);
60
+ --color-inverse-fill-opaque-low-hover: var(--inverse-fill-opaque-low-hover);
61
+ --color-inverse-fill-opaque-mid: var(--inverse-fill-opaque-mid);
52
62
  --color-inverse-fill-mid: var(--inverse-fill-mid);
53
63
  --color-inverse-fill-mid-hover: var(--inverse-fill-mid-hover);
54
64
  --color-inverse-label-primary: var(--inverse-label-primary);
@@ -85,14 +95,15 @@
85
95
  --color-accent-label-cyan: var(--accent-label-cyan);
86
96
  --color-accent-label-purple: var(--accent-label-purple);
87
97
  --color-accent-label-pink: var(--accent-label-pink);
88
- --color-accent-container-primary: var(--accent-container-primary);
89
- --color-function-container-positive: var(--function-container-positive);
90
- --color-function-container-negative: var(--function-container-negative);
91
- --color-function-container-negative-hover: var(--function-container-negative-hover);
92
- --color-function-container-caution: var(--function-container-caution);
93
- --color-function-container-highlight: var(--function-container-highlight);
94
- --color-function-container-selection: var(--function-container-selection);
95
- --color-function-container-drag: var(--function-container-drag);
98
+ --color-accent-fill-primary: var(--accent-fill-primary);
99
+ --color-function-fill-positive: var(--function-fill-positive);
100
+ --color-function-fill-negative: var(--function-fill-negative);
101
+ --color-function-fill-caution: var(--function-fill-caution);
102
+ --color-function-fill-highlight: var(--function-fill-highlight);
103
+ --color-function-fill-selection: var(--function-fill-selection);
104
+ --color-function-fill-drag: var(--function-fill-drag);
105
+ --color-function-fill-positive-low: var(--function-fill-positive-low);
106
+ --color-function-fill-negative-low: var(--function-fill-negative-low);
96
107
  --color-function-label-positive: var(--function-label-positive);
97
108
  --color-function-label-negative: var(--function-label-negative);
98
109
  --color-function-label-caution: var(--function-label-caution);
@@ -126,6 +137,11 @@
126
137
  --spacing-component-700: var(--lp-sys-padding-component-700);
127
138
  --spacing-component-800: var(--lp-sys-padding-component-800);
128
139
  --spacing-component-900: var(--lp-sys-padding-component-900);
140
+ --spacing-component-1000: var(--lp-sys-padding-component-1000);
141
+ --spacing-component-1100: var(--lp-sys-padding-component-1100);
142
+ --spacing-component-1300: var(--lp-sys-padding-component-1300);
143
+ --spacing-component-1500: var(--lp-sys-padding-component-1500);
144
+ --spacing-component-1700: var(--lp-sys-padding-component-1700);
129
145
  --spacing-section-50: var(--lp-sys-padding-section-50);
130
146
  --spacing-section-100: var(--lp-sys-padding-section-100);
131
147
  --spacing-section-200: var(--lp-sys-padding-section-200);