@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.
- package/README.md +1 -1
- package/dist/v3/globals.css +150 -135
- package/dist/v3/globals.scss +150 -135
- package/dist/v3/tailwind-preset.js +24 -3
- package/dist/v3/tailwind.config.js +24 -3
- package/dist/v4/globals.css +58 -40
- package/dist/v4/globals.scss +58 -40
- package/package.json +1 -1
- package/src/scripts/build-tokens.mjs +5 -10
- package/src/tokens/primitives/colors/alpha.js +10 -10
- package/src/tokens/primitives/colors/brand.js +4 -4
- package/src/tokens/primitives/colors/colors.js +15 -15
- package/src/tokens/primitives/typography/font-family.js +3 -3
- package/src/tokens/semantic/texts.data.js +44 -22
- package/src/tokens/semantic/texts.js +84 -84
- package/src/tokens/theme/background.js +9 -9
- package/src/tokens/theme/border.js +4 -4
- package/src/tokens/theme/feedback/info.js +6 -6
- package/src/tokens/theme/secondary.js +4 -4
- package/src/tokens/theme/text.js +4 -4
package/dist/v3/globals.scss
CHANGED
|
@@ -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
|
-
|
|
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: #
|
|
24
|
-
--color-gray-100: #
|
|
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: #
|
|
32
|
-
--color-gray-900: #
|
|
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: #
|
|
44
|
-
--color-violet-950: #
|
|
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: #
|
|
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: #
|
|
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: #
|
|
105
|
-
--color-surface-400: #
|
|
106
|
-
--color-surface-500: #
|
|
107
|
-
--color-surface-600: #
|
|
108
|
-
--color-surface-700: #
|
|
109
|
-
--color-surface-800: #
|
|
110
|
-
--color-surface-900: #
|
|
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: #
|
|
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: #
|
|
183
|
-
--color-alpha-blue-100: #
|
|
184
|
-
--color-alpha-blue-200: #
|
|
185
|
-
--color-alpha-blue-300: #
|
|
186
|
-
--color-alpha-blue-400: #
|
|
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: #
|
|
189
|
-
--color-alpha-blue-700: #
|
|
190
|
-
--color-alpha-blue-800: #
|
|
191
|
-
--color-alpha-blue-900: #
|
|
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: #
|
|
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: #
|
|
215
|
-
--color-accent-950: #
|
|
212
|
+
--color-accent-900: #1F1E48;
|
|
213
|
+
--color-accent-950: #100F24;
|
|
216
214
|
--color-absolute-black: #0A0A0A;
|
|
217
|
-
--color-absolute-white: #
|
|
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-
|
|
495
|
-
--text-body-
|
|
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:
|
|
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:
|
|
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: #
|
|
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: #
|
|
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: #
|
|
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: #
|
|
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
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
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: #
|
|
659
|
-
--surface-100: #
|
|
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: #
|
|
667
|
-
--surface-900: #
|
|
676
|
+
--surface-800: #1A1A1A;
|
|
677
|
+
--surface-900: #141414;
|
|
668
678
|
--surface-950: #0A0A0A;
|
|
669
|
-
--primary: #
|
|
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: #
|
|
691
|
+
--bg-canvas: #FAFAFA;
|
|
682
692
|
--bg-surface: #FFFFFF;
|
|
683
693
|
--bg-surface-raised: #FFFFFF;
|
|
684
694
|
--bg-mask: #00000005;
|
|
685
|
-
--bg-surface-overlay: #
|
|
686
|
-
--bg-hover: #
|
|
695
|
+
--bg-surface-overlay: #FAFAFA;
|
|
696
|
+
--bg-hover: #00000014;
|
|
687
697
|
--bg-active: #00000005;
|
|
688
|
-
--bg-backdrop: #
|
|
698
|
+
--bg-backdrop: #000000CC;
|
|
689
699
|
--bg-selected: #E5E5E5;
|
|
690
|
-
--bg-contrast: #
|
|
691
|
-
--bg-disabled: #
|
|
692
|
-
--border-default: #
|
|
693
|
-
--border-muted: #
|
|
700
|
+
--bg-contrast: #141414;
|
|
701
|
+
--bg-disabled: #E5E5E5;
|
|
702
|
+
--border-default: #00000033;
|
|
703
|
+
--border-muted: #00000014;
|
|
694
704
|
--border-strong: #000000;
|
|
695
|
-
--border-selected: #
|
|
696
|
-
--text-default: #
|
|
705
|
+
--border-selected: #F3652B;
|
|
706
|
+
--text-default: #141414;
|
|
697
707
|
--text-muted: #666666;
|
|
698
|
-
--text-disabled: #
|
|
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: #
|
|
710
|
-
--info-border: #
|
|
711
|
-
--info-contrast: #
|
|
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: #
|
|
717
|
-
--surface-100: #
|
|
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: #
|
|
725
|
-
--surface-900: #
|
|
735
|
+
--surface-800: #1A1A1A;
|
|
736
|
+
--surface-900: #141414;
|
|
726
737
|
--surface-950: #0A0A0A;
|
|
727
|
-
--primary: #
|
|
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: #
|
|
741
|
-
--bg-surface-raised: #
|
|
751
|
+
--bg-surface: #0A0A0A;
|
|
752
|
+
--bg-surface-raised: #141414;
|
|
742
753
|
--bg-mask: #FFFFFF0D;
|
|
743
754
|
--bg-surface-overlay: #4D4D4D;
|
|
744
|
-
--bg-hover: #
|
|
745
|
-
--bg-active: #
|
|
746
|
-
--bg-backdrop: #
|
|
755
|
+
--bg-hover: #00000033;
|
|
756
|
+
--bg-active: #00000014;
|
|
757
|
+
--bg-backdrop: #000000CC;
|
|
747
758
|
--bg-selected: #0A0A0A;
|
|
748
|
-
--bg-contrast: #
|
|
749
|
-
--bg-disabled: #
|
|
750
|
-
--border-default: #
|
|
751
|
-
--border-muted: #
|
|
759
|
+
--bg-contrast: #FAFAFA;
|
|
760
|
+
--bg-disabled: #1A1A1A;
|
|
761
|
+
--border-default: #FFFFFF1A;
|
|
762
|
+
--border-muted: #FFFFFF0D;
|
|
752
763
|
--border-strong: #FFFFFF;
|
|
753
|
-
--border-selected: #
|
|
754
|
-
--text-default: #
|
|
764
|
+
--border-selected: #F3652B;
|
|
765
|
+
--text-default: #FAFAFA;
|
|
755
766
|
--text-muted: #999999;
|
|
756
|
-
--text-disabled: #
|
|
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: #
|
|
776
|
+
--danger: #430A0A;
|
|
765
777
|
--danger-border: #EF444480;
|
|
766
778
|
--danger-contrast: #F87171;
|
|
767
|
-
--info: #
|
|
768
|
-
--info-border: #
|
|
769
|
-
--info-contrast: #
|
|
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-
|
|
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-
|
|
335
|
-
"var(--text-body-
|
|
355
|
+
"body-xxs": [
|
|
356
|
+
"var(--text-body-xxs-font-size)",
|
|
336
357
|
{
|
|
337
|
-
"lineHeight": "var(--text-body-
|
|
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-
|
|
343
|
-
"var(--text-body-
|
|
363
|
+
"body-xxs": [
|
|
364
|
+
"var(--text-body-xxs-font-size)",
|
|
344
365
|
{
|
|
345
|
-
"lineHeight": "var(--text-body-
|
|
366
|
+
"lineHeight": "var(--text-body-xxs-line-height)"
|
|
346
367
|
}
|
|
347
368
|
],
|
|
348
369
|
"overline-md": [
|