@aziontech/theme 2.0.2 → 2.0.4

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 (20) hide show
  1. package/README.md +1 -1
  2. package/dist/v3/globals.css +151 -136
  3. package/dist/v3/globals.scss +151 -136
  4. package/dist/v3/tailwind-preset.js +24 -3
  5. package/dist/v3/tailwind.config.js +24 -3
  6. package/dist/v4/globals.css +58 -40
  7. package/dist/v4/globals.scss +58 -40
  8. package/package.json +1 -1
  9. package/src/scripts/build-tokens.mjs +5 -10
  10. package/src/tokens/primitives/colors/alpha.js +10 -10
  11. package/src/tokens/primitives/colors/brand.js +4 -4
  12. package/src/tokens/primitives/colors/colors.js +15 -15
  13. package/src/tokens/primitives/typography/font-family.js +3 -3
  14. package/src/tokens/semantic/texts.data.js +44 -22
  15. package/src/tokens/semantic/texts.js +84 -84
  16. package/src/tokens/theme/background.js +14 -14
  17. package/src/tokens/theme/border.js +4 -4
  18. package/src/tokens/theme/feedback/info.js +6 -6
  19. package/src/tokens/theme/secondary.js +4 -4
  20. package/src/tokens/theme/text.js +4 -4
package/dist/v4/globals.css CHANGED
@@ -16,16 +16,16 @@
16
16
  --color-blue-800: #003066;
17
17
  --color-blue-900: #001833;
18
18
  --color-blue-950: #000C1A;
19
- --color-gray-50: #FCFCFC;
20
- --color-gray-100: #F2F2F2;
19
+ --color-gray-50: #FAFAFA;
20
+ --color-gray-100: #F5F5F5;
21
21
  --color-gray-200: #E5E5E5;
22
22
  --color-gray-300: #B2B2B2;
23
23
  --color-gray-400: #999999;
24
24
  --color-gray-500: #808080;
25
25
  --color-gray-600: #666666;
26
26
  --color-gray-700: #4D4D4D;
27
- --color-gray-800: #333333;
28
- --color-gray-900: #1A1A1A;
27
+ --color-gray-800: #1A1A1A;
28
+ --color-gray-900: #141414;
29
29
  --color-gray-950: #0A0A0A;
30
30
  --color-violet-50: #F6F6FF;
31
31
  --color-violet-100: #ECECFF;
@@ -36,14 +36,14 @@
36
36
  --color-violet-600: #756FE5;
37
37
  --color-violet-700: #625BD5;
38
38
  --color-violet-800: #524BBB;
39
- --color-violet-900: #423F99;
40
- --color-violet-950: #0B0A19;
39
+ --color-violet-900: #1F1E48;
40
+ --color-violet-950: #100F24;
41
41
  --color-orange-50: #FFF5EF;
42
42
  --color-orange-100: #FFE7D8;
43
43
  --color-orange-200: #FFCFB3;
44
44
  --color-orange-300: #FFB180;
45
45
  --color-orange-400: #FF8E4D;
46
- --color-orange-500: #FE601F;
46
+ --color-orange-500: #F3652B;
47
47
  --color-orange-600: #D94A03;
48
48
  --color-orange-700: #B03C02;
49
49
  --color-orange-800: #8A2F02;
@@ -92,18 +92,18 @@
92
92
  --color-red-700: #B91C1C;
93
93
  --color-red-800: #991B1B;
94
94
  --color-red-900: #7F1D1D;
95
- --color-red-950: #240505;
95
+ --color-red-950: #430A0A;
96
96
  --color-surface-0: #FFFFFF;
97
97
  --color-surface-50: #FAFAFA;
98
98
  --color-surface-100: #F5F5F5;
99
99
  --color-surface-200: #E5E5E5;
100
- --color-surface-300: #D4D4D4;
101
- --color-surface-400: #A3A3A3;
102
- --color-surface-500: #737373;
103
- --color-surface-600: #525252;
104
- --color-surface-700: #404040;
105
- --color-surface-800: #262626;
106
- --color-surface-900: #171717;
100
+ --color-surface-300: #B2B2B2;
101
+ --color-surface-400: #999999;
102
+ --color-surface-500: #808080;
103
+ --color-surface-600: #666666;
104
+ --color-surface-700: #4D4D4D;
105
+ --color-surface-800: #1A1A1A;
106
+ --color-surface-900: #141414;
107
107
  --color-surface-950: #0A0A0A;
108
108
  --color-alpha-violet-50: #8A84EC0D;
109
109
  --color-alpha-violet-100: #8A84EC1A;
@@ -136,7 +136,7 @@
136
136
  --color-alpha-white-800: #FFFFFFCC;
137
137
  --color-alpha-white-900: #FFFFFFE5;
138
138
  --color-alpha-black-50: #00000005;
139
- --color-alpha-black-100: #0000000D;
139
+ --color-alpha-black-100: #00000014;
140
140
  --color-alpha-black-200: #00000033;
141
141
  --color-alpha-black-300: #0000004D;
142
142
  --color-alpha-black-400: #00000066;
@@ -175,16 +175,16 @@
175
175
  --color-alpha-yellow-700: #F7BD08B2;
176
176
  --color-alpha-yellow-800: #F7BD08CC;
177
177
  --color-alpha-yellow-900: #F7BD08E5;
178
- --color-alpha-blue-50: #E5F1FF0D;
179
- --color-alpha-blue-100: #CCE4FF1A;
180
- --color-alpha-blue-200: #99C9FF33;
181
- --color-alpha-blue-300: #66ADFF4D;
182
- --color-alpha-blue-400: #3392FF66;
178
+ --color-alpha-blue-50: #0072F50D;
179
+ --color-alpha-blue-100: #0072F51A;
180
+ --color-alpha-blue-200: #0072F533;
181
+ --color-alpha-blue-300: #0072F54D;
182
+ --color-alpha-blue-400: #0072F566;
183
183
  --color-alpha-blue-500: #0072F580;
184
- --color-alpha-blue-600: #005FCC99;
185
- --color-alpha-blue-700: #004799B2;
186
- --color-alpha-blue-800: #003066CC;
187
- --color-alpha-blue-900: #001833E5;
184
+ --color-alpha-blue-600: #0072F599;
185
+ --color-alpha-blue-700: #0072F5B2;
186
+ --color-alpha-blue-800: #0072F5CC;
187
+ --color-alpha-blue-900: #0072F5E5;
188
188
  --color-alpha-absolute-black: #000000E5;
189
189
  --color-alpha-absolute-white: #FFFFFFE5;
190
190
  --color-primary-50: #FFF5EF;
@@ -192,7 +192,7 @@
192
192
  --color-primary-200: #FFCFB3;
193
193
  --color-primary-300: #FFB180;
194
194
  --color-primary-400: #FF8E4D;
195
- --color-primary-500: #FE601F;
195
+ --color-primary-500: #F3652B;
196
196
  --color-primary-600: #D94A03;
197
197
  --color-primary-700: #B03C02;
198
198
  --color-primary-800: #8A2F02;
@@ -207,10 +207,10 @@
207
207
  --color-accent-600: #756FE5;
208
208
  --color-accent-700: #625BD5;
209
209
  --color-accent-800: #524BBB;
210
- --color-accent-900: #423F99;
211
- --color-accent-950: #0B0A19;
210
+ --color-accent-900: #1F1E48;
211
+ --color-accent-950: #100F24;
212
212
  --color-absolute-black: #0A0A0A;
213
- --color-absolute-white: #FCFCFC;
213
+ --color-absolute-white: #FAFAFA;
214
214
  --breakpoint-sm: 640px;
215
215
  --breakpoint-md: 768px;
216
216
  --breakpoint-lg: 1024px;
@@ -462,10 +462,13 @@
462
462
  --spacing-xxs: 0.25rem;
463
463
  --text-big-number-md-font-size: 1.25rem;
464
464
  --text-big-number-md-line-height: 1.20;
465
+ --text-big-number-md-font-family: Proto Mono;
465
466
  --text-big-number-sm-font-size: 1rem;
466
467
  --text-big-number-sm-line-height: 1.20;
468
+ --text-big-number-sm-font-family: Proto Mono;
467
469
  --text-big-number-lg-font-size: 1.5rem;
468
470
  --text-big-number-lg-line-height: 1.20;
471
+ --text-big-number-lg-font-family: Proto Mono;
469
472
  --text-heading-2xl-font-size: 1.875rem;
470
473
  --text-heading-2xl-line-height: 1.2;
471
474
  --text-heading-xl-font-size: 1.25rem;
@@ -476,6 +479,15 @@
476
479
  --text-heading-md-line-height: 1.2;
477
480
  --text-heading-sm-font-size: 0.875rem;
478
481
  --text-heading-sm-line-height: 1.2;
482
+ --text-label-lg-font-size: 1rem;
483
+ --text-label-lg-line-height: 1.5;
484
+ --text-label-lg-font-weight: 500;
485
+ --text-label-md-font-size: 0.875rem;
486
+ --text-label-md-line-height: 1.5;
487
+ --text-label-md-font-weight: 500;
488
+ --text-label-sm-font-size: 0.75rem;
489
+ --text-label-sm-line-height: 1.5;
490
+ --text-label-sm-font-weight: 500;
479
491
  --text-body-lg-font-size: 1rem;
480
492
  --text-body-lg-line-height: 1.5;
481
493
  --text-body-md-font-size: 1rem;
@@ -484,26 +496,29 @@
484
496
  --text-body-sm-line-height: 1.5;
485
497
  --text-body-xs-font-size: 0.75rem;
486
498
  --text-body-xs-line-height: 1.5;
487
- --text-body-xss-font-size: 0.625rem;
488
- --text-body-xss-line-height: 1.5;
499
+ --text-body-xxs-font-size: 0.625rem;
500
+ --text-body-xxs-line-height: 1.5;
501
+ --text-overline-md-font-family: Proto Mono;
489
502
  --text-overline-md-font-size: 0.75rem;
490
503
  --text-overline-md-line-height: 1.4;
491
504
  --text-overline-md-letter-spacing: 0.08em;
492
505
  --text-overline-md-text-transform: uppercase;
506
+ --text-overline-sm-font-family: Proto Mono;
493
507
  --text-overline-sm-font-size: 0.75rem;
494
508
  --text-overline-sm-line-height: 1.4;
495
509
  --text-overline-sm-letter-spacing: 0.08em;
496
510
  --text-overline-sm-text-transform: uppercase;
511
+ --text-overline-xs-font-family: Proto Mono;
497
512
  --text-overline-xs-font-size: 0.625rem;
498
513
  --text-overline-xs-line-height: 1.4;
499
514
  --text-overline-xs-letter-spacing: 0.08em;
500
515
  --text-overline-xs-text-transform: uppercase;
501
- --text-button-lg-font-family: Proto Mono;
516
+ --text-button-lg-font-family: Sora;
502
517
  --text-button-lg-font-size: 0.875rem;
503
518
  --text-button-lg-font-weight: 600;
504
519
  --text-button-lg-line-height: 1;
505
520
  --text-button-lg-letter-spacing: 0;
506
- --text-button-md-font-family: Proto Mono;
521
+ --text-button-md-font-family: Sora;
507
522
  --text-button-md-font-size: 0.75rem;
508
523
  --text-button-md-font-weight: 600;
509
524
  --text-button-md-line-height: 1;
@@ -569,22 +584,25 @@
569
584
  .p-spacing-xxs { padding: var(--spacing-xxs); }
570
585
 
571
586
  /* ── Texts ── */
572
- .text-big-number-md { font-size: var(--text-big-number-md-font-size); line-height: var(--text-big-number-md-line-height); }
573
- .text-big-number-sm { font-size: var(--text-big-number-sm-font-size); line-height: var(--text-big-number-sm-line-height); }
574
- .text-big-number-lg { font-size: var(--text-big-number-lg-font-size); line-height: var(--text-big-number-lg-line-height); }
587
+ .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); }
588
+ .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); }
589
+ .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); }
575
590
  .text-heading-2xl { font-size: var(--text-heading-2xl-font-size); line-height: var(--text-heading-2xl-line-height); }
576
591
  .text-heading-xl { font-size: var(--text-heading-xl-font-size); line-height: var(--text-heading-xl-line-height); }
577
592
  .text-heading-lg { font-size: var(--text-heading-lg-font-size); line-height: var(--text-heading-lg-line-height); }
578
593
  .text-heading-md { font-size: var(--text-heading-md-font-size); line-height: var(--text-heading-md-line-height); }
579
594
  .text-heading-sm { font-size: var(--text-heading-sm-font-size); line-height: var(--text-heading-sm-line-height); }
595
+ .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); }
596
+ .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); }
597
+ .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); }
580
598
  .text-body-lg { font-size: var(--text-body-lg-font-size); line-height: var(--text-body-lg-line-height); }
581
599
  .text-body-md { font-size: var(--text-body-md-font-size); line-height: var(--text-body-md-line-height); }
582
600
  .text-body-sm { font-size: var(--text-body-sm-font-size); line-height: var(--text-body-sm-line-height); }
583
601
  .text-body-xs { font-size: var(--text-body-xs-font-size); line-height: var(--text-body-xs-line-height); }
584
- .text-body-xss { font-size: var(--text-body-xss-font-size); line-height: var(--text-body-xss-line-height); }
585
- .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); }
586
- .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); }
587
- .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); }
602
+ .text-body-xxs { font-size: var(--text-body-xxs-font-size); line-height: var(--text-body-xxs-line-height); }
603
+ .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); }
604
+ .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); }
605
+ .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); }
588
606
  .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); }
589
607
  .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); }
590
608
  }
package/dist/v4/globals.scss CHANGED
@@ -16,16 +16,16 @@
16
16
  --color-blue-800: #003066;
17
17
  --color-blue-900: #001833;
18
18
  --color-blue-950: #000C1A;
19
- --color-gray-50: #FCFCFC;
20
- --color-gray-100: #F2F2F2;
19
+ --color-gray-50: #FAFAFA;
20
+ --color-gray-100: #F5F5F5;
21
21
  --color-gray-200: #E5E5E5;
22
22
  --color-gray-300: #B2B2B2;
23
23
  --color-gray-400: #999999;
24
24
  --color-gray-500: #808080;
25
25
  --color-gray-600: #666666;
26
26
  --color-gray-700: #4D4D4D;
27
- --color-gray-800: #333333;
28
- --color-gray-900: #1A1A1A;
27
+ --color-gray-800: #1A1A1A;
28
+ --color-gray-900: #141414;
29
29
  --color-gray-950: #0A0A0A;
30
30
  --color-violet-50: #F6F6FF;
31
31
  --color-violet-100: #ECECFF;
@@ -36,14 +36,14 @@
36
36
  --color-violet-600: #756FE5;
37
37
  --color-violet-700: #625BD5;
38
38
  --color-violet-800: #524BBB;
39
- --color-violet-900: #423F99;
40
- --color-violet-950: #0B0A19;
39
+ --color-violet-900: #1F1E48;
40
+ --color-violet-950: #100F24;
41
41
  --color-orange-50: #FFF5EF;
42
42
  --color-orange-100: #FFE7D8;
43
43
  --color-orange-200: #FFCFB3;
44
44
  --color-orange-300: #FFB180;
45
45
  --color-orange-400: #FF8E4D;
46
- --color-orange-500: #FE601F;
46
+ --color-orange-500: #F3652B;
47
47
  --color-orange-600: #D94A03;
48
48
  --color-orange-700: #B03C02;
49
49
  --color-orange-800: #8A2F02;
@@ -92,18 +92,18 @@
92
92
  --color-red-700: #B91C1C;
93
93
  --color-red-800: #991B1B;
94
94
  --color-red-900: #7F1D1D;
95
- --color-red-950: #240505;
95
+ --color-red-950: #430A0A;
96
96
  --color-surface-0: #FFFFFF;
97
97
  --color-surface-50: #FAFAFA;
98
98
  --color-surface-100: #F5F5F5;
99
99
  --color-surface-200: #E5E5E5;
100
- --color-surface-300: #D4D4D4;
101
- --color-surface-400: #A3A3A3;
102
- --color-surface-500: #737373;
103
- --color-surface-600: #525252;
104
- --color-surface-700: #404040;
105
- --color-surface-800: #262626;
106
- --color-surface-900: #171717;
100
+ --color-surface-300: #B2B2B2;
101
+ --color-surface-400: #999999;
102
+ --color-surface-500: #808080;
103
+ --color-surface-600: #666666;
104
+ --color-surface-700: #4D4D4D;
105
+ --color-surface-800: #1A1A1A;
106
+ --color-surface-900: #141414;
107
107
  --color-surface-950: #0A0A0A;
108
108
  --color-alpha-violet-50: #8A84EC0D;
109
109
  --color-alpha-violet-100: #8A84EC1A;
@@ -136,7 +136,7 @@
136
136
  --color-alpha-white-800: #FFFFFFCC;
137
137
  --color-alpha-white-900: #FFFFFFE5;
138
138
  --color-alpha-black-50: #00000005;
139
- --color-alpha-black-100: #0000000D;
139
+ --color-alpha-black-100: #00000014;
140
140
  --color-alpha-black-200: #00000033;
141
141
  --color-alpha-black-300: #0000004D;
142
142
  --color-alpha-black-400: #00000066;
@@ -175,16 +175,16 @@
175
175
  --color-alpha-yellow-700: #F7BD08B2;
176
176
  --color-alpha-yellow-800: #F7BD08CC;
177
177
  --color-alpha-yellow-900: #F7BD08E5;
178
- --color-alpha-blue-50: #E5F1FF0D;
179
- --color-alpha-blue-100: #CCE4FF1A;
180
- --color-alpha-blue-200: #99C9FF33;
181
- --color-alpha-blue-300: #66ADFF4D;
182
- --color-alpha-blue-400: #3392FF66;
178
+ --color-alpha-blue-50: #0072F50D;
179
+ --color-alpha-blue-100: #0072F51A;
180
+ --color-alpha-blue-200: #0072F533;
181
+ --color-alpha-blue-300: #0072F54D;
182
+ --color-alpha-blue-400: #0072F566;
183
183
  --color-alpha-blue-500: #0072F580;
184
- --color-alpha-blue-600: #005FCC99;
185
- --color-alpha-blue-700: #004799B2;
186
- --color-alpha-blue-800: #003066CC;
187
- --color-alpha-blue-900: #001833E5;
184
+ --color-alpha-blue-600: #0072F599;
185
+ --color-alpha-blue-700: #0072F5B2;
186
+ --color-alpha-blue-800: #0072F5CC;
187
+ --color-alpha-blue-900: #0072F5E5;
188
188
  --color-alpha-absolute-black: #000000E5;
189
189
  --color-alpha-absolute-white: #FFFFFFE5;
190
190
  --color-primary-50: #FFF5EF;
@@ -192,7 +192,7 @@
192
192
  --color-primary-200: #FFCFB3;
193
193
  --color-primary-300: #FFB180;
194
194
  --color-primary-400: #FF8E4D;
195
- --color-primary-500: #FE601F;
195
+ --color-primary-500: #F3652B;
196
196
  --color-primary-600: #D94A03;
197
197
  --color-primary-700: #B03C02;
198
198
  --color-primary-800: #8A2F02;
@@ -207,10 +207,10 @@
207
207
  --color-accent-600: #756FE5;
208
208
  --color-accent-700: #625BD5;
209
209
  --color-accent-800: #524BBB;
210
- --color-accent-900: #423F99;
211
- --color-accent-950: #0B0A19;
210
+ --color-accent-900: #1F1E48;
211
+ --color-accent-950: #100F24;
212
212
  --color-absolute-black: #0A0A0A;
213
- --color-absolute-white: #FCFCFC;
213
+ --color-absolute-white: #FAFAFA;
214
214
  --breakpoint-sm: 640px;
215
215
  --breakpoint-md: 768px;
216
216
  --breakpoint-lg: 1024px;
@@ -462,10 +462,13 @@
462
462
  --spacing-xxs: 0.25rem;
463
463
  --text-big-number-md-font-size: 1.25rem;
464
464
  --text-big-number-md-line-height: 1.20;
465
+ --text-big-number-md-font-family: Proto Mono;
465
466
  --text-big-number-sm-font-size: 1rem;
466
467
  --text-big-number-sm-line-height: 1.20;
468
+ --text-big-number-sm-font-family: Proto Mono;
467
469
  --text-big-number-lg-font-size: 1.5rem;
468
470
  --text-big-number-lg-line-height: 1.20;
471
+ --text-big-number-lg-font-family: Proto Mono;
469
472
  --text-heading-2xl-font-size: 1.875rem;
470
473
  --text-heading-2xl-line-height: 1.2;
471
474
  --text-heading-xl-font-size: 1.25rem;
@@ -476,6 +479,15 @@
476
479
  --text-heading-md-line-height: 1.2;
477
480
  --text-heading-sm-font-size: 0.875rem;
478
481
  --text-heading-sm-line-height: 1.2;
482
+ --text-label-lg-font-size: 1rem;
483
+ --text-label-lg-line-height: 1.5;
484
+ --text-label-lg-font-weight: 500;
485
+ --text-label-md-font-size: 0.875rem;
486
+ --text-label-md-line-height: 1.5;
487
+ --text-label-md-font-weight: 500;
488
+ --text-label-sm-font-size: 0.75rem;
489
+ --text-label-sm-line-height: 1.5;
490
+ --text-label-sm-font-weight: 500;
479
491
  --text-body-lg-font-size: 1rem;
480
492
  --text-body-lg-line-height: 1.5;
481
493
  --text-body-md-font-size: 1rem;
@@ -484,26 +496,29 @@
484
496
  --text-body-sm-line-height: 1.5;
485
497
  --text-body-xs-font-size: 0.75rem;
486
498
  --text-body-xs-line-height: 1.5;
487
- --text-body-xss-font-size: 0.625rem;
488
- --text-body-xss-line-height: 1.5;
499
+ --text-body-xxs-font-size: 0.625rem;
500
+ --text-body-xxs-line-height: 1.5;
501
+ --text-overline-md-font-family: Proto Mono;
489
502
  --text-overline-md-font-size: 0.75rem;
490
503
  --text-overline-md-line-height: 1.4;
491
504
  --text-overline-md-letter-spacing: 0.08em;
492
505
  --text-overline-md-text-transform: uppercase;
506
+ --text-overline-sm-font-family: Proto Mono;
493
507
  --text-overline-sm-font-size: 0.75rem;
494
508
  --text-overline-sm-line-height: 1.4;
495
509
  --text-overline-sm-letter-spacing: 0.08em;
496
510
  --text-overline-sm-text-transform: uppercase;
511
+ --text-overline-xs-font-family: Proto Mono;
497
512
  --text-overline-xs-font-size: 0.625rem;
498
513
  --text-overline-xs-line-height: 1.4;
499
514
  --text-overline-xs-letter-spacing: 0.08em;
500
515
  --text-overline-xs-text-transform: uppercase;
501
- --text-button-lg-font-family: Proto Mono;
516
+ --text-button-lg-font-family: Sora;
502
517
  --text-button-lg-font-size: 0.875rem;
503
518
  --text-button-lg-font-weight: 600;
504
519
  --text-button-lg-line-height: 1;
505
520
  --text-button-lg-letter-spacing: 0;
506
- --text-button-md-font-family: Proto Mono;
521
+ --text-button-md-font-family: Sora;
507
522
  --text-button-md-font-size: 0.75rem;
508
523
  --text-button-md-font-weight: 600;
509
524
  --text-button-md-line-height: 1;
@@ -569,22 +584,25 @@
569
584
  .p-spacing-xxs { padding: var(--spacing-xxs); }
570
585
 
571
586
  /* ── Texts ── */
572
- .text-big-number-md { font-size: var(--text-big-number-md-font-size); line-height: var(--text-big-number-md-line-height); }
573
- .text-big-number-sm { font-size: var(--text-big-number-sm-font-size); line-height: var(--text-big-number-sm-line-height); }
574
- .text-big-number-lg { font-size: var(--text-big-number-lg-font-size); line-height: var(--text-big-number-lg-line-height); }
587
+ .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); }
588
+ .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); }
589
+ .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); }
575
590
  .text-heading-2xl { font-size: var(--text-heading-2xl-font-size); line-height: var(--text-heading-2xl-line-height); }
576
591
  .text-heading-xl { font-size: var(--text-heading-xl-font-size); line-height: var(--text-heading-xl-line-height); }
577
592
  .text-heading-lg { font-size: var(--text-heading-lg-font-size); line-height: var(--text-heading-lg-line-height); }
578
593
  .text-heading-md { font-size: var(--text-heading-md-font-size); line-height: var(--text-heading-md-line-height); }
579
594
  .text-heading-sm { font-size: var(--text-heading-sm-font-size); line-height: var(--text-heading-sm-line-height); }
595
+ .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); }
596
+ .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); }
597
+ .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); }
580
598
  .text-body-lg { font-size: var(--text-body-lg-font-size); line-height: var(--text-body-lg-line-height); }
581
599
  .text-body-md { font-size: var(--text-body-md-font-size); line-height: var(--text-body-md-line-height); }
582
600
  .text-body-sm { font-size: var(--text-body-sm-font-size); line-height: var(--text-body-sm-line-height); }
583
601
  .text-body-xs { font-size: var(--text-body-xs-font-size); line-height: var(--text-body-xs-line-height); }
584
- .text-body-xss { font-size: var(--text-body-xss-font-size); line-height: var(--text-body-xss-line-height); }
585
- .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); }
586
- .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); }
587
- .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); }
602
+ .text-body-xxs { font-size: var(--text-body-xxs-font-size); line-height: var(--text-body-xxs-line-height); }
603
+ .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); }
604
+ .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); }
605
+ .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); }
588
606
  .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); }
589
607
  .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); }
590
608
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aziontech/theme",
3
3
  "type": "module",
4
- "version": "2.0.2",
4
+ "version": "2.0.4",
5
5
  "author": "aziontech",
6
6
  "license": "MIT",
7
7
  "repository": {
package/src/scripts/build-tokens.mjs CHANGED
@@ -172,23 +172,18 @@ const emitCssV3 = () => {
172
172
  return [
173
173
  '/* generated by build-tokens.mjs — target: v3 — do not edit */',
174
174
  '',
175
- '@tailwind base;',
176
175
  '@tailwind components;',
177
176
  '@tailwind utilities;',
178
177
  '',
179
- '@layer base {',
180
- ` ${V3_SELECTOR} {`,
178
+ `${V3_SELECTOR} {`,
181
179
  baseBody,
182
- ' }',
180
+ '}',
183
181
  '',
184
182
  mediaBlocks.join('\n\n'),
185
- '}',
186
183
  '',
187
- '@layer base {',
188
- ` ${V3_DARK_SELECTOR} {`,
189
- ` /* ── Semantic colors (dark) ── */`,
190
- formatVars(m.semanticColors.dark, ' '),
191
- ' }',
184
+ `${V3_DARK_SELECTOR} {`,
185
+ ` /* ── Semantic colors (dark) ── */`,
186
+ formatVars(m.semanticColors.dark, ' '),
192
187
  '}',
193
188
  '',
194
189
  '/* ── Theme semantics (primary, secondary, surfaces, feedback, …) ── */',
package/src/tokens/primitives/colors/alpha.js CHANGED
@@ -37,7 +37,7 @@ export const alpha = {
37
37
  },
38
38
  black: {
39
39
  '50': '#00000005',
40
- '100': '#0000000D',
40
+ '100': '#00000014',
41
41
  '200': '#00000033',
42
42
  '300': '#0000004D',
43
43
  '400': '#00000066',
@@ -84,16 +84,16 @@ export const alpha = {
84
84
  '900': '#F7BD08E5',
85
85
  },
86
86
  blue: {
87
- '50': '#E5F1FF0D',
88
- '100': '#CCE4FF1A',
89
- '200': '#99C9FF33',
90
- '300': '#66ADFF4D',
91
- '400': '#3392FF66',
87
+ '50': '#0072F50D',
88
+ '100': '#0072F51A',
89
+ '200': '#0072F533',
90
+ '300': '#0072F54D',
91
+ '400': '#0072F566',
92
92
  '500': '#0072F580',
93
- '600': '#005FCC99',
94
- '700': '#004799B2',
95
- '800': '#003066CC',
96
- '900': '#001833E5',
93
+ '600': '#0072F599',
94
+ '700': '#0072F5B2',
95
+ '800': '#0072F5CC',
96
+ '900': '#0072F5E5',
97
97
  },
98
98
  absolute: {
99
99
  black: '#000000E5',
package/src/tokens/primitives/colors/brand.js CHANGED
@@ -5,7 +5,7 @@ export const brand = {
5
5
  '200': '#FFCFB3',
6
6
  '300': '#FFB180',
7
7
  '400': '#FF8E4D',
8
- '500': '#FE601F',
8
+ '500': '#F3652B',
9
9
  '600': '#D94A03',
10
10
  '700': '#B03C02',
11
11
  '800': '#8A2F02',
@@ -22,12 +22,12 @@ export const brand = {
22
22
  '600': '#756FE5',
23
23
  '700': '#625BD5',
24
24
  '800': '#524BBB',
25
- '900': '#423F99',
26
- '950': '#0B0A19',
25
+ '900': '#1F1E48',
26
+ '950': '#100F24',
27
27
  },
28
28
  absolute: {
29
29
  black: '#0A0A0A',
30
- white: '#FCFCFC',
30
+ white: '#FAFAFA',
31
31
  },
32
32
  };
33
33
 
package/src/tokens/primitives/colors/colors.js CHANGED
@@ -22,16 +22,16 @@ export const primitives = {
22
22
  '950': '#000C1A',
23
23
  },
24
24
  gray: {
25
- '50': '#FCFCFC',
26
- '100': '#F2F2F2',
25
+ '50': '#FAFAFA',
26
+ '100': '#F5F5F5',
27
27
  '200': '#E5E5E5',
28
28
  '300': '#B2B2B2',
29
29
  '400': '#999999',
30
30
  '500': '#808080',
31
31
  '600': '#666666',
32
32
  '700': '#4D4D4D',
33
- '800': '#333333',
34
- '900': '#1A1A1A',
33
+ '800': '#1A1A1A',
34
+ '900': '#141414',
35
35
  '950': '#0A0A0A',
36
36
  },
37
37
  violet: {
@@ -44,8 +44,8 @@ export const primitives = {
44
44
  '600': '#756FE5',
45
45
  '700': '#625BD5',
46
46
  '800': '#524BBB',
47
- '900': '#423F99',
48
- '950': '#0B0A19',
47
+ '900': '#1F1E48',
48
+ '950': '#100F24',
49
49
  },
50
50
  orange: {
51
51
  '50': '#FFF5EF',
@@ -53,7 +53,7 @@ export const primitives = {
53
53
  '200': '#FFCFB3',
54
54
  '300': '#FFB180',
55
55
  '400': '#FF8E4D',
56
- '500': '#FE601F',
56
+ '500': '#F3652B',
57
57
  '600': '#D94A03',
58
58
  '700': '#B03C02',
59
59
  '800': '#8A2F02',
@@ -111,7 +111,7 @@ export const primitives = {
111
111
  '700': '#B91C1C',
112
112
  '800': '#991B1B',
113
113
  '900': '#7F1D1D',
114
- '950': '#240505',
114
+ '950': '#430A0A',
115
115
  },
116
116
  brand,
117
117
  surface: {
@@ -119,13 +119,13 @@ export const primitives = {
119
119
  50: '#FAFAFA',
120
120
  100: '#F5F5F5',
121
121
  200: '#E5E5E5',
122
- 300: '#D4D4D4',
123
- 400: '#A3A3A3',
124
- 500: '#737373',
125
- 600: '#525252',
126
- 700: '#404040',
127
- 800: '#262626',
128
- 900: '#171717',
122
+ 300: '#B2B2B2',
123
+ 400: '#999999',
124
+ 500: '#808080',
125
+ 600: '#666666',
126
+ 700: '#4D4D4D',
127
+ 800: '#1A1A1A',
128
+ 900: '#141414',
129
129
  950: '#0A0A0A',
130
130
  },
131
131
  alpha,
package/src/tokens/primitives/typography/font-family.js CHANGED
@@ -1,7 +1,7 @@
1
1
  export const fontFamily = {
2
2
  sans: 'Sora',
3
3
  code: 'Roboto Mono',
4
- display: 'Proto Mono',
5
- };
4
+ display: 'Proto Mono'
5
+ }
6
6
 
7
- export default { fontFamily };
7
+ export default { fontFamily }