@aziontech/theme 2.0.2 → 2.0.3

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.
@@ -1,11 +1,9 @@
1
1
  /* generated by build-tokens.mjs — target: v3 — do not edit */
2
2
 
3
- @tailwind base;
4
3
  @tailwind components;
5
4
  @tailwind utilities;
6
5
 
7
- @layer base {
8
- :root, [data-theme=light], .azion.azion-light {
6
+ :root, [data-theme=light], .azion.azion-light {
9
7
  /* ── Primitives ── */
10
8
  --color-base-white: #FFFFFF;
11
9
  --color-base-black: #000000;
@@ -20,16 +18,16 @@
20
18
  --color-blue-800: #003066;
21
19
  --color-blue-900: #001833;
22
20
  --color-blue-950: #000C1A;
23
- --color-gray-50: #FCFCFC;
24
- --color-gray-100: #F2F2F2;
21
+ --color-gray-50: #FAFAFA;
22
+ --color-gray-100: #F5F5F5;
25
23
  --color-gray-200: #E5E5E5;
26
24
  --color-gray-300: #B2B2B2;
27
25
  --color-gray-400: #999999;
28
26
  --color-gray-500: #808080;
29
27
  --color-gray-600: #666666;
30
28
  --color-gray-700: #4D4D4D;
31
- --color-gray-800: #333333;
32
- --color-gray-900: #1A1A1A;
29
+ --color-gray-800: #1A1A1A;
30
+ --color-gray-900: #141414;
33
31
  --color-gray-950: #0A0A0A;
34
32
  --color-violet-50: #F6F6FF;
35
33
  --color-violet-100: #ECECFF;
@@ -40,14 +38,14 @@
40
38
  --color-violet-600: #756FE5;
41
39
  --color-violet-700: #625BD5;
42
40
  --color-violet-800: #524BBB;
43
- --color-violet-900: #423F99;
44
- --color-violet-950: #0B0A19;
41
+ --color-violet-900: #1F1E48;
42
+ --color-violet-950: #100F24;
45
43
  --color-orange-50: #FFF5EF;
46
44
  --color-orange-100: #FFE7D8;
47
45
  --color-orange-200: #FFCFB3;
48
46
  --color-orange-300: #FFB180;
49
47
  --color-orange-400: #FF8E4D;
50
- --color-orange-500: #FE601F;
48
+ --color-orange-500: #F3652B;
51
49
  --color-orange-600: #D94A03;
52
50
  --color-orange-700: #B03C02;
53
51
  --color-orange-800: #8A2F02;
@@ -96,18 +94,18 @@
96
94
  --color-red-700: #B91C1C;
97
95
  --color-red-800: #991B1B;
98
96
  --color-red-900: #7F1D1D;
99
- --color-red-950: #240505;
97
+ --color-red-950: #430A0A;
100
98
  --color-surface-0: #FFFFFF;
101
99
  --color-surface-50: #FAFAFA;
102
100
  --color-surface-100: #F5F5F5;
103
101
  --color-surface-200: #E5E5E5;
104
- --color-surface-300: #D4D4D4;
105
- --color-surface-400: #A3A3A3;
106
- --color-surface-500: #737373;
107
- --color-surface-600: #525252;
108
- --color-surface-700: #404040;
109
- --color-surface-800: #262626;
110
- --color-surface-900: #171717;
102
+ --color-surface-300: #B2B2B2;
103
+ --color-surface-400: #999999;
104
+ --color-surface-500: #808080;
105
+ --color-surface-600: #666666;
106
+ --color-surface-700: #4D4D4D;
107
+ --color-surface-800: #1A1A1A;
108
+ --color-surface-900: #141414;
111
109
  --color-surface-950: #0A0A0A;
112
110
  --color-alpha-violet-50: #8A84EC0D;
113
111
  --color-alpha-violet-100: #8A84EC1A;
@@ -140,7 +138,7 @@
140
138
  --color-alpha-white-800: #FFFFFFCC;
141
139
  --color-alpha-white-900: #FFFFFFE5;
142
140
  --color-alpha-black-50: #00000005;
143
- --color-alpha-black-100: #0000000D;
141
+ --color-alpha-black-100: #00000014;
144
142
  --color-alpha-black-200: #00000033;
145
143
  --color-alpha-black-300: #0000004D;
146
144
  --color-alpha-black-400: #00000066;
@@ -179,16 +177,16 @@
179
177
  --color-alpha-yellow-700: #F7BD08B2;
180
178
  --color-alpha-yellow-800: #F7BD08CC;
181
179
  --color-alpha-yellow-900: #F7BD08E5;
182
- --color-alpha-blue-50: #E5F1FF0D;
183
- --color-alpha-blue-100: #CCE4FF1A;
184
- --color-alpha-blue-200: #99C9FF33;
185
- --color-alpha-blue-300: #66ADFF4D;
186
- --color-alpha-blue-400: #3392FF66;
180
+ --color-alpha-blue-50: #0072F50D;
181
+ --color-alpha-blue-100: #0072F51A;
182
+ --color-alpha-blue-200: #0072F533;
183
+ --color-alpha-blue-300: #0072F54D;
184
+ --color-alpha-blue-400: #0072F566;
187
185
  --color-alpha-blue-500: #0072F580;
188
- --color-alpha-blue-600: #005FCC99;
189
- --color-alpha-blue-700: #004799B2;
190
- --color-alpha-blue-800: #003066CC;
191
- --color-alpha-blue-900: #001833E5;
186
+ --color-alpha-blue-600: #0072F599;
187
+ --color-alpha-blue-700: #0072F5B2;
188
+ --color-alpha-blue-800: #0072F5CC;
189
+ --color-alpha-blue-900: #0072F5E5;
192
190
  --color-alpha-absolute-black: #000000E5;
193
191
  --color-alpha-absolute-white: #FFFFFFE5;
194
192
  --color-primary-50: #FFF5EF;
@@ -196,7 +194,7 @@
196
194
  --color-primary-200: #FFCFB3;
197
195
  --color-primary-300: #FFB180;
198
196
  --color-primary-400: #FF8E4D;
199
- --color-primary-500: #FE601F;
197
+ --color-primary-500: #F3652B;
200
198
  --color-primary-600: #D94A03;
201
199
  --color-primary-700: #B03C02;
202
200
  --color-primary-800: #8A2F02;
@@ -211,10 +209,10 @@
211
209
  --color-accent-600: #756FE5;
212
210
  --color-accent-700: #625BD5;
213
211
  --color-accent-800: #524BBB;
214
- --color-accent-900: #423F99;
215
- --color-accent-950: #0B0A19;
212
+ --color-accent-900: #1F1E48;
213
+ --color-accent-950: #100F24;
216
214
  --color-absolute-black: #0A0A0A;
217
- --color-absolute-white: #FCFCFC;
215
+ --color-absolute-white: #FAFAFA;
218
216
  --breakpoint-sm: 640px;
219
217
  --breakpoint-md: 768px;
220
218
  --breakpoint-lg: 1024px;
@@ -469,10 +467,13 @@
469
467
  /* ── Texts ── */
470
468
  --text-big-number-md-font-size: 1.25rem;
471
469
  --text-big-number-md-line-height: 1.20;
470
+ --text-big-number-md-font-family: Proto Mono;
472
471
  --text-big-number-sm-font-size: 1rem;
473
472
  --text-big-number-sm-line-height: 1.20;
473
+ --text-big-number-sm-font-family: Proto Mono;
474
474
  --text-big-number-lg-font-size: 1.5rem;
475
475
  --text-big-number-lg-line-height: 1.20;
476
+ --text-big-number-lg-font-family: Proto Mono;
476
477
  --text-heading-2xl-font-size: 1.875rem;
477
478
  --text-heading-2xl-line-height: 1.2;
478
479
  --text-heading-xl-font-size: 1.25rem;
@@ -483,6 +484,15 @@
483
484
  --text-heading-md-line-height: 1.2;
484
485
  --text-heading-sm-font-size: 0.875rem;
485
486
  --text-heading-sm-line-height: 1.2;
487
+ --text-label-lg-font-size: 1rem;
488
+ --text-label-lg-line-height: 1.5;
489
+ --text-label-lg-font-weight: 500;
490
+ --text-label-md-font-size: 0.875rem;
491
+ --text-label-md-line-height: 1.5;
492
+ --text-label-md-font-weight: 500;
493
+ --text-label-sm-font-size: 0.75rem;
494
+ --text-label-sm-line-height: 1.5;
495
+ --text-label-sm-font-weight: 500;
486
496
  --text-body-lg-font-size: 1rem;
487
497
  --text-body-lg-line-height: 1.5;
488
498
  --text-body-md-font-size: 1rem;
@@ -491,38 +501,41 @@
491
501
  --text-body-sm-line-height: 1.5;
492
502
  --text-body-xs-font-size: 0.75rem;
493
503
  --text-body-xs-line-height: 1.5;
494
- --text-body-xss-font-size: 0.625rem;
495
- --text-body-xss-line-height: 1.5;
504
+ --text-body-xxs-font-size: 0.625rem;
505
+ --text-body-xxs-line-height: 1.5;
506
+ --text-overline-md-font-family: Proto Mono;
496
507
  --text-overline-md-font-size: 0.75rem;
497
508
  --text-overline-md-line-height: 1.4;
498
509
  --text-overline-md-letter-spacing: 0.08em;
499
510
  --text-overline-md-text-transform: uppercase;
511
+ --text-overline-sm-font-family: Proto Mono;
500
512
  --text-overline-sm-font-size: 0.75rem;
501
513
  --text-overline-sm-line-height: 1.4;
502
514
  --text-overline-sm-letter-spacing: 0.08em;
503
515
  --text-overline-sm-text-transform: uppercase;
516
+ --text-overline-xs-font-family: Proto Mono;
504
517
  --text-overline-xs-font-size: 0.625rem;
505
518
  --text-overline-xs-line-height: 1.4;
506
519
  --text-overline-xs-letter-spacing: 0.08em;
507
520
  --text-overline-xs-text-transform: uppercase;
508
- --text-button-lg-font-family: Proto Mono;
521
+ --text-button-lg-font-family: Sora;
509
522
  --text-button-lg-font-size: 0.875rem;
510
523
  --text-button-lg-font-weight: 600;
511
524
  --text-button-lg-line-height: 1;
512
525
  --text-button-lg-letter-spacing: 0;
513
- --text-button-md-font-family: Proto Mono;
526
+ --text-button-md-font-family: Sora;
514
527
  --text-button-md-font-size: 0.75rem;
515
528
  --text-button-md-font-weight: 600;
516
529
  --text-button-md-line-height: 1;
517
530
  --text-button-md-letter-spacing: 0;
518
531
 
519
532
  /* ── Semantic colors ── */
520
- --text-default: #1A1A1A;
533
+ --text-default: #141414;
521
534
  --text-muted: #666666;
522
535
  --text-link: #005FCC;
523
536
  --text-code: #666666;
524
537
  --text-link-hover: #004799;
525
- --text-primary: #FE601F;
538
+ --text-primary: #F3652B;
526
539
  --text-primary-hover: #D94A03;
527
540
  --text-accent: #8A84EC;
528
541
  --text-accent-hover: #756FE5;
@@ -544,14 +557,14 @@
544
557
  --background-warning: #FCE49C;
545
558
  --background-backdrop: primitives.alpha.neutral.25;
546
559
  --background-primary-hover: #D94A03;
547
- --background-primary: #FE601F;
560
+ --background-primary: #F3652B;
548
561
  --background-primary-mask: primitives.alpha.brand.primary.65;
549
562
  --border-default: #F5F5F5;
550
563
  --border-strong: #000000;
551
564
  --border-warning: #C59707;
552
565
  --border-success: #18B452;
553
566
  --border-danger: #DC2626;
554
- --border-primary: #FE601F;
567
+ --border-primary: #F3652B;
555
568
  --border-accent: #8A84EC;
556
569
  --border-warning-hover: #F7BD08;
557
570
  --border-success-hover: #26D968;
@@ -559,7 +572,7 @@
559
572
  --border-primary-hover: #D94A03;
560
573
  --border-accent-hover: #756FE5;
561
574
  --border-subtle: #E5E5E5;
562
- }
575
+ }
563
576
 
564
577
  @media (min-width: 640px) {
565
578
  :root, [data-theme=light], .azion.azion-light {
@@ -602,71 +615,68 @@
602
615
  --spacing-xl: 3rem;
603
616
  }
604
617
  }
605
- }
606
618
 
607
- @layer base {
608
- [data-theme=dark], .dark, .azion.azion-dark {
609
- /* ── Semantic colors (dark) ── */
610
- --text-default: #FCFCFC;
611
- --text-muted: #999999;
612
- --text-link: #3392FF;
613
- --text-code: #999999;
614
- --text-link-hover: #66ADFF;
615
- --text-primary: #FE601F;
616
- --text-primary-hover: #FF8E4D;
617
- --text-accent: #8A84EC;
618
- --text-accent-hover: #9F9AF1;
619
- --text-danger-hover: #EF4444;
620
- --text-warning-hover: #F7BD08;
621
- --text-success-hover: #26D968;
622
- --text-success: #52E086;
623
- --text-danger: #F87171;
624
- --text-warning: #F8CA3A;
625
- --background-surface-raised: #262626;
626
- --background-surface-overlay: #404040;
627
- --background-surface: #171717;
628
- --background-canvas: #0A0A0A;
629
- --background-danger-hover: #DC2626;
630
- --background-warning-hover: #C59707;
631
- --background-success-hover: #18B452;
632
- --background-success: #12542B;
633
- --background-danger: #991B1B;
634
- --background-warning: #634B03;
635
- --background-backdrop: primitives.alpha.neutral.25;
636
- --background-primary-hover: #FF8E4D;
637
- --background-primary: #FE601F;
638
- --background-primary-mask: primitives.alpha.brand.primary.65;
639
- --border-default: #262626;
640
- --border-strong: #FFFFFF;
641
- --border-warning: #F8CA3A;
642
- --border-success: #52E086;
643
- --border-danger: #F87171;
644
- --border-primary: #FE601F;
645
- --border-accent: #8A84EC;
646
- --border-warning-hover: #F7BD08;
647
- --border-success-hover: #26D968;
648
- --border-danger-hover: #EF4444;
649
- --border-primary-hover: #FF8E4D;
650
- --border-accent-hover: #9F9AF1;
651
- --border-subtle: #404040;
652
- }
619
+ [data-theme=dark], .dark, .azion.azion-dark {
620
+ /* ── Semantic colors (dark) ── */
621
+ --text-default: #FAFAFA;
622
+ --text-muted: #999999;
623
+ --text-link: #3392FF;
624
+ --text-code: #999999;
625
+ --text-link-hover: #66ADFF;
626
+ --text-primary: #F3652B;
627
+ --text-primary-hover: #FF8E4D;
628
+ --text-accent: #8A84EC;
629
+ --text-accent-hover: #9F9AF1;
630
+ --text-danger-hover: #EF4444;
631
+ --text-warning-hover: #F7BD08;
632
+ --text-success-hover: #26D968;
633
+ --text-success: #52E086;
634
+ --text-danger: #F87171;
635
+ --text-warning: #F8CA3A;
636
+ --background-surface-raised: #1A1A1A;
637
+ --background-surface-overlay: #4D4D4D;
638
+ --background-surface: #141414;
639
+ --background-canvas: #0A0A0A;
640
+ --background-danger-hover: #DC2626;
641
+ --background-warning-hover: #C59707;
642
+ --background-success-hover: #18B452;
643
+ --background-success: #12542B;
644
+ --background-danger: #991B1B;
645
+ --background-warning: #634B03;
646
+ --background-backdrop: primitives.alpha.neutral.25;
647
+ --background-primary-hover: #FF8E4D;
648
+ --background-primary: #F3652B;
649
+ --background-primary-mask: primitives.alpha.brand.primary.65;
650
+ --border-default: #1A1A1A;
651
+ --border-strong: #FFFFFF;
652
+ --border-warning: #F8CA3A;
653
+ --border-success: #52E086;
654
+ --border-danger: #F87171;
655
+ --border-primary: #F3652B;
656
+ --border-accent: #8A84EC;
657
+ --border-warning-hover: #F7BD08;
658
+ --border-success-hover: #26D968;
659
+ --border-danger-hover: #EF4444;
660
+ --border-primary-hover: #FF8E4D;
661
+ --border-accent-hover: #9F9AF1;
662
+ --border-subtle: #4D4D4D;
653
663
  }
654
664
 
655
665
  /* ── Theme semantics (primary, secondary, surfaces, feedback, …) ── */
656
666
  :root, [data-theme=light], .azion.azion-light {
657
667
  --surface-0: #FFFFFF;
658
- --surface-50: #FCFCFC;
659
- --surface-100: #F2F2F2;
668
+ --surface-50: #FAFAFA;
669
+ --surface-100: #F5F5F5;
660
670
  --surface-200: #E5E5E5;
661
671
  --surface-300: #B2B2B2;
662
672
  --surface-400: #999999;
663
673
  --surface-500: #808080;
664
674
  --surface-600: #666666;
665
675
  --surface-700: #4D4D4D;
666
- --surface-800: #333333;
667
- --surface-900: #1A1A1A;
676
+ --surface-800: #1A1A1A;
677
+ --surface-900: #141414;
668
678
  --surface-950: #0A0A0A;
669
- --primary: #FE601F;
679
+ --primary: #F3652B;
670
680
  --primary-mask: #FE601F1A;
671
681
  --primary-selected: #FE601F1A;
672
682
  --primary-contrast: #000000;
@@ -678,24 +688,25 @@
678
688
  --accent-mask: #8A84EC0D;
679
689
  --accent-selected: #8A84EC;
680
690
  --accent-contrast: #000000;
681
- --bg-canvas: #FFFFFF;
691
+ --bg-canvas: #FAFAFA;
682
692
  --bg-surface: #FFFFFF;
683
693
  --bg-surface-raised: #FFFFFF;
684
694
  --bg-mask: #00000005;
685
- --bg-surface-overlay: #FCFCFC;
686
- --bg-hover: #0000000D;
695
+ --bg-surface-overlay: #FAFAFA;
696
+ --bg-hover: #00000014;
687
697
  --bg-active: #00000005;
688
- --bg-backdrop: #000000B2;
698
+ --bg-backdrop: #000000CC;
689
699
  --bg-selected: #E5E5E5;
690
- --bg-contrast: #1A1A1A;
691
- --bg-disabled: #999999;
692
- --border-default: #E5E5E5;
693
- --border-muted: #F2F2F2;
700
+ --bg-contrast: #141414;
701
+ --bg-disabled: #E5E5E5;
702
+ --border-default: #00000033;
703
+ --border-muted: #00000014;
694
704
  --border-strong: #000000;
695
- --border-selected: #FE601F;
696
- --text-default: #1A1A1A;
705
+ --border-selected: #F3652B;
706
+ --text-default: #141414;
697
707
  --text-muted: #666666;
698
- --text-disabled: #666666;
708
+ --text-disabled: #999999;
709
+ --text-link: #005FCC;
699
710
  --ring-color: #0A0A0A;
700
711
  --success: #F0FDF4;
701
712
  --success-border: #22C55E99;
@@ -706,25 +717,25 @@
706
717
  --danger: #FFE5E5;
707
718
  --danger-border: #EF444499;
708
719
  --danger-contrast: #DC2626;
709
- --info: #F6F6FF;
710
- --info-border: #8A84EC99;
711
- --info-contrast: #8A84EC;
720
+ --info: #CCE4FF;
721
+ --info-border: #99C9FF;
722
+ --info-contrast: #0072F5;
712
723
  }
713
724
 
714
725
  [data-theme=dark], .dark, .azion.azion-dark {
715
726
  --surface-0: #FFFFFF;
716
- --surface-50: #FCFCFC;
717
- --surface-100: #F2F2F2;
727
+ --surface-50: #FAFAFA;
728
+ --surface-100: #F5F5F5;
718
729
  --surface-200: #E5E5E5;
719
730
  --surface-300: #B2B2B2;
720
731
  --surface-400: #999999;
721
732
  --surface-500: #808080;
722
733
  --surface-600: #666666;
723
734
  --surface-700: #4D4D4D;
724
- --surface-800: #333333;
725
- --surface-900: #1A1A1A;
735
+ --surface-800: #1A1A1A;
736
+ --surface-900: #141414;
726
737
  --surface-950: #0A0A0A;
727
- --primary: #FE601F;
738
+ --primary: #F3652B;
728
739
  --primary-mask: #FE601F1A;
729
740
  --primary-selected: #FE601F1A;
730
741
  --primary-contrast: #FFFFFF;
@@ -737,23 +748,24 @@
737
748
  --accent-selected: #8A84EC;
738
749
  --accent-contrast: #000000;
739
750
  --bg-canvas: #0A0A0A;
740
- --bg-surface: #1A1A1A;
741
- --bg-surface-raised: #333333;
751
+ --bg-surface: #0A0A0A;
752
+ --bg-surface-raised: #141414;
742
753
  --bg-mask: #FFFFFF0D;
743
754
  --bg-surface-overlay: #4D4D4D;
744
- --bg-hover: #FFFFFF1A;
745
- --bg-active: #FFFFFF0D;
746
- --bg-backdrop: #000000B2;
755
+ --bg-hover: #00000033;
756
+ --bg-active: #00000014;
757
+ --bg-backdrop: #000000CC;
747
758
  --bg-selected: #0A0A0A;
748
- --bg-contrast: #FCFCFC;
749
- --bg-disabled: #808080;
750
- --border-default: #333333;
751
- --border-muted: #4D4D4D;
759
+ --bg-contrast: #FAFAFA;
760
+ --bg-disabled: #1A1A1A;
761
+ --border-default: #FFFFFF1A;
762
+ --border-muted: #FFFFFF0D;
752
763
  --border-strong: #FFFFFF;
753
- --border-selected: #FE601F;
754
- --text-default: #FCFCFC;
764
+ --border-selected: #F3652B;
765
+ --text-default: #FAFAFA;
755
766
  --text-muted: #999999;
756
- --text-disabled: #666666;
767
+ --text-disabled: #4D4D4D;
768
+ --text-link: #3392FF;
757
769
  --ring-color: #FFFFFF;
758
770
  --success: #03170B;
759
771
  --success-border: #22C55E66;
@@ -761,12 +773,12 @@
761
773
  --warning: #191301;
762
774
  --warning-border: #F7BD084D;
763
775
  --warning-contrast: #FAD76B;
764
- --danger: #240505;
776
+ --danger: #430A0A;
765
777
  --danger-border: #EF444480;
766
778
  --danger-contrast: #F87171;
767
- --info: #0B0A19;
768
- --info-border: #8A84EC66;
769
- --info-contrast: #8A84EC;
779
+ --info: #001833;
780
+ --info-border: #0072F580;
781
+ --info-contrast: #66ADFF;
770
782
  }
771
783
 
772
784
  @layer components {
@@ -792,22 +804,25 @@
792
804
  .p-spacing-xxs { padding: var(--spacing-xxs); }
793
805
 
794
806
  /* ── Texts ── */
795
- .text-big-number-md { font-size: var(--text-big-number-md-font-size); line-height: var(--text-big-number-md-line-height); }
796
- .text-big-number-sm { font-size: var(--text-big-number-sm-font-size); line-height: var(--text-big-number-sm-line-height); }
797
- .text-big-number-lg { font-size: var(--text-big-number-lg-font-size); line-height: var(--text-big-number-lg-line-height); }
807
+ .text-big-number-md { font-size: var(--text-big-number-md-font-size); line-height: var(--text-big-number-md-line-height); font-family: var(--text-big-number-md-font-family); }
808
+ .text-big-number-sm { font-size: var(--text-big-number-sm-font-size); line-height: var(--text-big-number-sm-line-height); font-family: var(--text-big-number-sm-font-family); }
809
+ .text-big-number-lg { font-size: var(--text-big-number-lg-font-size); line-height: var(--text-big-number-lg-line-height); font-family: var(--text-big-number-lg-font-family); }
798
810
  .text-heading-2xl { font-size: var(--text-heading-2xl-font-size); line-height: var(--text-heading-2xl-line-height); }
799
811
  .text-heading-xl { font-size: var(--text-heading-xl-font-size); line-height: var(--text-heading-xl-line-height); }
800
812
  .text-heading-lg { font-size: var(--text-heading-lg-font-size); line-height: var(--text-heading-lg-line-height); }
801
813
  .text-heading-md { font-size: var(--text-heading-md-font-size); line-height: var(--text-heading-md-line-height); }
802
814
  .text-heading-sm { font-size: var(--text-heading-sm-font-size); line-height: var(--text-heading-sm-line-height); }
815
+ .text-label-lg { font-size: var(--text-label-lg-font-size); line-height: var(--text-label-lg-line-height); font-weight: var(--text-label-lg-font-weight); }
816
+ .text-label-md { font-size: var(--text-label-md-font-size); line-height: var(--text-label-md-line-height); font-weight: var(--text-label-md-font-weight); }
817
+ .text-label-sm { font-size: var(--text-label-sm-font-size); line-height: var(--text-label-sm-line-height); font-weight: var(--text-label-sm-font-weight); }
803
818
  .text-body-lg { font-size: var(--text-body-lg-font-size); line-height: var(--text-body-lg-line-height); }
804
819
  .text-body-md { font-size: var(--text-body-md-font-size); line-height: var(--text-body-md-line-height); }
805
820
  .text-body-sm { font-size: var(--text-body-sm-font-size); line-height: var(--text-body-sm-line-height); }
806
821
  .text-body-xs { font-size: var(--text-body-xs-font-size); line-height: var(--text-body-xs-line-height); }
807
- .text-body-xss { font-size: var(--text-body-xss-font-size); line-height: var(--text-body-xss-line-height); }
808
- .text-overline-md { font-size: var(--text-overline-md-font-size); line-height: var(--text-overline-md-line-height); letter-spacing: var(--text-overline-md-letter-spacing); text-transform: var(--text-overline-md-text-transform); }
809
- .text-overline-sm { font-size: var(--text-overline-sm-font-size); line-height: var(--text-overline-sm-line-height); letter-spacing: var(--text-overline-sm-letter-spacing); text-transform: var(--text-overline-sm-text-transform); }
810
- .text-overline-xs { font-size: var(--text-overline-xs-font-size); line-height: var(--text-overline-xs-line-height); letter-spacing: var(--text-overline-xs-letter-spacing); text-transform: var(--text-overline-xs-text-transform); }
822
+ .text-body-xxs { font-size: var(--text-body-xxs-font-size); line-height: var(--text-body-xxs-line-height); }
823
+ .text-overline-md { font-family: var(--text-overline-md-font-family); font-size: var(--text-overline-md-font-size); line-height: var(--text-overline-md-line-height); letter-spacing: var(--text-overline-md-letter-spacing); text-transform: var(--text-overline-md-text-transform); }
824
+ .text-overline-sm { font-family: var(--text-overline-sm-font-family); font-size: var(--text-overline-sm-font-size); line-height: var(--text-overline-sm-line-height); letter-spacing: var(--text-overline-sm-letter-spacing); text-transform: var(--text-overline-sm-text-transform); }
825
+ .text-overline-xs { font-family: var(--text-overline-xs-font-family); font-size: var(--text-overline-xs-font-size); line-height: var(--text-overline-xs-line-height); letter-spacing: var(--text-overline-xs-letter-spacing); text-transform: var(--text-overline-xs-text-transform); }
811
826
  .text-button-lg { font-family: var(--text-button-lg-font-family); font-size: var(--text-button-lg-font-size); font-weight: var(--text-button-lg-font-weight); line-height: var(--text-button-lg-line-height); letter-spacing: var(--text-button-lg-letter-spacing); }
812
827
  .text-button-md { font-family: var(--text-button-md-font-family); font-size: var(--text-button-md-font-size); font-weight: var(--text-button-md-font-weight); line-height: var(--text-button-md-line-height); letter-spacing: var(--text-button-md-letter-spacing); }
813
828
  }
@@ -307,6 +307,27 @@ const preset = {
307
307
  "lineHeight": "var(--text-heading-sm-line-height)"
308
308
  }
309
309
  ],
310
+ "label-lg": [
311
+ "var(--text-label-lg-font-size)",
312
+ {
313
+ "lineHeight": "var(--text-label-lg-line-height)",
314
+ "fontWeight": "var(--text-label-lg-font-weight)"
315
+ }
316
+ ],
317
+ "label-md": [
318
+ "var(--text-label-md-font-size)",
319
+ {
320
+ "lineHeight": "var(--text-label-md-line-height)",
321
+ "fontWeight": "var(--text-label-md-font-weight)"
322
+ }
323
+ ],
324
+ "label-sm": [
325
+ "var(--text-label-sm-font-size)",
326
+ {
327
+ "lineHeight": "var(--text-label-sm-line-height)",
328
+ "fontWeight": "var(--text-label-sm-font-weight)"
329
+ }
330
+ ],
310
331
  "body-lg": [
311
332
  "var(--text-body-lg-font-size)",
312
333
  {
@@ -331,10 +352,10 @@ const preset = {
331
352
  "lineHeight": "var(--text-body-xs-line-height)"
332
353
  }
333
354
  ],
334
- "body-xss": [
335
- "var(--text-body-xss-font-size)",
355
+ "body-xxs": [
356
+ "var(--text-body-xxs-font-size)",
336
357
  {
337
- "lineHeight": "var(--text-body-xss-line-height)"
358
+ "lineHeight": "var(--text-body-xxs-line-height)"
338
359
  }
339
360
  ],
340
361
  "overline-md": [
@@ -315,6 +315,27 @@ module.exports = {
315
315
  "lineHeight": "var(--text-heading-sm-line-height)"
316
316
  }
317
317
  ],
318
+ "label-lg": [
319
+ "var(--text-label-lg-font-size)",
320
+ {
321
+ "lineHeight": "var(--text-label-lg-line-height)",
322
+ "fontWeight": "var(--text-label-lg-font-weight)"
323
+ }
324
+ ],
325
+ "label-md": [
326
+ "var(--text-label-md-font-size)",
327
+ {
328
+ "lineHeight": "var(--text-label-md-line-height)",
329
+ "fontWeight": "var(--text-label-md-font-weight)"
330
+ }
331
+ ],
332
+ "label-sm": [
333
+ "var(--text-label-sm-font-size)",
334
+ {
335
+ "lineHeight": "var(--text-label-sm-line-height)",
336
+ "fontWeight": "var(--text-label-sm-font-weight)"
337
+ }
338
+ ],
318
339
  "body-lg": [
319
340
  "var(--text-body-lg-font-size)",
320
341
  {
@@ -339,10 +360,10 @@ module.exports = {
339
360
  "lineHeight": "var(--text-body-xs-line-height)"
340
361
  }
341
362
  ],
342
- "body-xss": [
343
- "var(--text-body-xss-font-size)",
363
+ "body-xxs": [
364
+ "var(--text-body-xxs-font-size)",
344
365
  {
345
- "lineHeight": "var(--text-body-xss-line-height)"
366
+ "lineHeight": "var(--text-body-xxs-line-height)"
346
367
  }
347
368
  ],
348
369
  "overline-md": [