@aziontech/theme 2.1.1 → 2.2.1

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 (19) hide show
  1. package/dist/v3/globals.css +71 -61
  2. package/dist/v3/globals.scss +71 -61
  3. package/dist/v3/tailwind-preset.js +14 -0
  4. package/dist/v3/tailwind.config.js +14 -0
  5. package/dist/v4/globals.css +32 -24
  6. package/dist/v4/globals.scss +32 -24
  7. package/package.json +2 -1
  8. package/src/tokens/primitives/colors/alpha.js +10 -10
  9. package/src/tokens/primitives/colors/colors.js +11 -11
  10. package/src/tokens/primitives/shape/shape.js +8 -8
  11. package/src/tokens/semantic/texts.data.js +10 -0
  12. package/src/tokens/theme/background.js +1 -1
  13. package/src/tokens/theme/border.js +1 -1
  14. package/src/tokens/theme/feedback/danger.js +6 -6
  15. package/src/tokens/theme/feedback/info.js +2 -2
  16. package/src/tokens/theme/feedback/success.js +5 -5
  17. package/src/tokens/theme/feedback/warning.js +6 -6
  18. package/src/tokens/theme/primary.js +4 -4
  19. package/src/tokens/theme/text.js +6 -4
package/dist/v3/globals.css CHANGED
@@ -84,17 +84,17 @@
84
84
  --color-green-800: #12542B;
85
85
  --color-green-900: #0A2916;
86
86
  --color-green-950: #03170B;
87
- --color-red-50: #FFE5E5;
88
- --color-red-100: #FFCCCC;
89
- --color-red-200: #FECACA;
90
- --color-red-300: #FCA5A5;
91
- --color-red-400: #F87171;
92
- --color-red-500: #EF4444;
93
- --color-red-600: #DC2626;
94
- --color-red-700: #B91C1C;
95
- --color-red-800: #991B1B;
96
- --color-red-900: #7F1D1D;
97
- --color-red-950: #430A0A;
87
+ --color-red-50: #FCE8E8;
88
+ --color-red-100: #F9D2D2;
89
+ --color-red-200: #F3A5A5;
90
+ --color-red-300: #ED7878;
91
+ --color-red-400: #E74B4B;
92
+ --color-red-500: #E51A1A;
93
+ --color-red-600: #B71515;
94
+ --color-red-700: #891010;
95
+ --color-red-800: #5B0B0B;
96
+ --color-red-900: #2E0606;
97
+ --color-red-950: #170303;
98
98
  --color-surface-0: #FFFFFF;
99
99
  --color-surface-50: #FAFAFA;
100
100
  --color-surface-100: #F5F5F5;
@@ -157,16 +157,16 @@
157
157
  --color-alpha-green-700: #22C55EB2;
158
158
  --color-alpha-green-800: #22C55ECC;
159
159
  --color-alpha-green-900: #22C55EE5;
160
- --color-alpha-red-50: #EF44440D;
161
- --color-alpha-red-100: #EF44441A;
162
- --color-alpha-red-200: #EF444433;
163
- --color-alpha-red-300: #EF44444D;
164
- --color-alpha-red-400: #EF444466;
165
- --color-alpha-red-500: #EF444480;
166
- --color-alpha-red-600: #EF444499;
167
- --color-alpha-red-700: #EF4444B2;
168
- --color-alpha-red-800: #EF4444CC;
169
- --color-alpha-red-900: #EF4444E5;
160
+ --color-alpha-red-50: #E51A1A0D;
161
+ --color-alpha-red-100: #E51A1A1A;
162
+ --color-alpha-red-200: #E51A1A33;
163
+ --color-alpha-red-300: #E51A1A4D;
164
+ --color-alpha-red-400: #E51A1A66;
165
+ --color-alpha-red-500: #E51A1A80;
166
+ --color-alpha-red-600: #E51A1A99;
167
+ --color-alpha-red-700: #E51A1AB2;
168
+ --color-alpha-red-800: #E51A1ACC;
169
+ --color-alpha-red-900: #E51A1AE5;
170
170
  --color-alpha-yellow-50: #F7BD080D;
171
171
  --color-alpha-yellow-100: #F7BD081A;
172
172
  --color-alpha-yellow-200: #F7BD0833;
@@ -345,9 +345,9 @@
345
345
  --width-7xl: 1280px;
346
346
  --aspect-video: 16 / 9;
347
347
  --shape-flat: 0;
348
- --shape-card: 4px;
349
- --shape-button: 4px;
350
- --shape-elements: 4px;
348
+ --shape-card: 8px;
349
+ --shape-button: 6px;
350
+ --shape-elements: 6px;
351
351
  --border-width-default: 0.8px;
352
352
  --font-sans: Sora;
353
353
  --font-code: Roboto Mono;
@@ -501,6 +501,12 @@
501
501
  --text-body-sm-line-height: 1.5;
502
502
  --text-body-xs-font-size: 0.75rem;
503
503
  --text-body-xs-line-height: 1.5;
504
+ --text-tag-sm-font-size: 0.6875rem;
505
+ --text-tag-sm-line-height: 1;
506
+ --text-tag-sm-font-weight: 600;
507
+ --text-tag-md-font-size: 0.75rem;
508
+ --text-tag-md-line-height: 1;
509
+ --text-tag-md-font-weight: 600;
504
510
  --text-body-xxs-font-size: 0.625rem;
505
511
  --text-body-xxs-line-height: 1.5;
506
512
  --text-overline-md-font-family: Proto Mono;
@@ -539,21 +545,21 @@
539
545
  --text-primary-hover: #D94A03;
540
546
  --text-accent: #8A84EC;
541
547
  --text-accent-hover: #756FE5;
542
- --text-danger-hover: #EF4444;
548
+ --text-danger-hover: #E51A1A;
543
549
  --text-warning-hover: #F7BD08;
544
550
  --text-success-hover: #26D968;
545
551
  --text-success: #18B452;
546
- --text-danger: #DC2626;
552
+ --text-danger: #B71515;
547
553
  --text-warning: #C59707;
548
554
  --background-surface-raised: #FFFFFF;
549
555
  --background-surface-overlay: #FAFAFA;
550
556
  --background-surface: #FFFFFF;
551
557
  --background-canvas: #F5F5F5;
552
- --background-danger-hover: #F87171;
558
+ --background-danger-hover: #E74B4B;
553
559
  --background-warning-hover: #F8CA3A;
554
560
  --background-success-hover: #52E086;
555
561
  --background-success: #A4F4C0;
556
- --background-danger: #FECACA;
562
+ --background-danger: #F3A5A5;
557
563
  --background-warning: #FCE49C;
558
564
  --background-backdrop: primitives.alpha.neutral.25;
559
565
  --background-primary-hover: #D94A03;
@@ -563,12 +569,12 @@
563
569
  --border-strong: #000000;
564
570
  --border-warning: #C59707;
565
571
  --border-success: #18B452;
566
- --border-danger: #DC2626;
572
+ --border-danger: #B71515;
567
573
  --border-primary: #F3652B;
568
574
  --border-accent: #8A84EC;
569
575
  --border-warning-hover: #F7BD08;
570
576
  --border-success-hover: #26D968;
571
- --border-danger-hover: #EF4444;
577
+ --border-danger-hover: #E51A1A;
572
578
  --border-primary-hover: #D94A03;
573
579
  --border-accent-hover: #756FE5;
574
580
  --border-subtle: #E5E5E5;
@@ -627,21 +633,21 @@
627
633
  --text-primary-hover: #FF8E4D;
628
634
  --text-accent: #8A84EC;
629
635
  --text-accent-hover: #9F9AF1;
630
- --text-danger-hover: #EF4444;
636
+ --text-danger-hover: #E51A1A;
631
637
  --text-warning-hover: #F7BD08;
632
638
  --text-success-hover: #26D968;
633
639
  --text-success: #52E086;
634
- --text-danger: #F87171;
640
+ --text-danger: #E74B4B;
635
641
  --text-warning: #F8CA3A;
636
642
  --background-surface-raised: #1A1A1A;
637
643
  --background-surface-overlay: #4D4D4D;
638
644
  --background-surface: #141414;
639
645
  --background-canvas: #0A0A0A;
640
- --background-danger-hover: #DC2626;
646
+ --background-danger-hover: #B71515;
641
647
  --background-warning-hover: #C59707;
642
648
  --background-success-hover: #18B452;
643
649
  --background-success: #12542B;
644
- --background-danger: #991B1B;
650
+ --background-danger: #5B0B0B;
645
651
  --background-warning: #634B03;
646
652
  --background-backdrop: primitives.alpha.neutral.25;
647
653
  --background-primary-hover: #FF8E4D;
@@ -651,12 +657,12 @@
651
657
  --border-strong: #FFFFFF;
652
658
  --border-warning: #F8CA3A;
653
659
  --border-success: #52E086;
654
- --border-danger: #F87171;
660
+ --border-danger: #E74B4B;
655
661
  --border-primary: #F3652B;
656
662
  --border-accent: #8A84EC;
657
663
  --border-warning-hover: #F7BD08;
658
664
  --border-success-hover: #26D968;
659
- --border-danger-hover: #EF4444;
665
+ --border-danger-hover: #E51A1A;
660
666
  --border-primary-hover: #FF8E4D;
661
667
  --border-accent-hover: #9F9AF1;
662
668
  --border-subtle: #4D4D4D;
@@ -677,8 +683,8 @@
677
683
  --surface-900: #141414;
678
684
  --surface-950: #0A0A0A;
679
685
  --primary: #F3652B;
680
- --primary-mask: #FE601F1A;
681
- --primary-selected: #FE601F1A;
686
+ --primary-mask: #FE601F33;
687
+ --primary-selected: #FE601F33;
682
688
  --primary-contrast: #000000;
683
689
  --secondary: #0A0A0A;
684
690
  --secondary-mask: #00000005;
@@ -699,7 +705,7 @@
699
705
  --bg-selected: #E5E5E5;
700
706
  --bg-contrast: #141414;
701
707
  --bg-disabled: #E5E5E5;
702
- --border-default: #00000033;
708
+ --border-default: #00000014;
703
709
  --border-muted: #00000014;
704
710
  --border-strong: #000000;
705
711
  --border-selected: #F3652B;
@@ -707,19 +713,20 @@
707
713
  --text-muted: #666666;
708
714
  --text-disabled: #999999;
709
715
  --text-link: #005FCC;
716
+ --text-contrast: #FAFAFA;
710
717
  --ring-color: #0A0A0A;
711
- --success: #F0FDF4;
712
- --success-border: #22C55E99;
713
- --success-contrast: #16833F;
714
- --warning: #FEF8E6;
715
- --warning-border: #F7BD0899;
716
- --warning-contrast: #947105;
717
- --danger: #FFE5E5;
718
- --danger-border: #EF444499;
719
- --danger-contrast: #DC2626;
718
+ --success: #A4F4C0;
719
+ --success-border: #22C55E66;
720
+ --success-contrast: #12542B;
721
+ --warning: #FCE49C;
722
+ --warning-border: #F7BD0880;
723
+ --warning-contrast: #634B03;
724
+ --danger: #F9D2D2;
725
+ --danger-border: #E51A1A66;
726
+ --danger-contrast: #891010;
720
727
  --info: #CCE4FF;
721
- --info-border: #99C9FF;
722
- --info-contrast: #0072F5;
728
+ --info-border: #8A84EC66;
729
+ --info-contrast: #004799;
723
730
  }
724
731
 
725
732
  [data-theme=dark], .dark, .azion.azion-dark {
@@ -736,8 +743,8 @@
736
743
  --surface-900: #141414;
737
744
  --surface-950: #0A0A0A;
738
745
  --primary: #F3652B;
739
- --primary-mask: #FE601F1A;
740
- --primary-selected: #FE601F1A;
746
+ --primary-mask: #FE601F33;
747
+ --primary-selected: #FE601F33;
741
748
  --primary-contrast: #FFFFFF;
742
749
  --secondary: #FFFFFF;
743
750
  --secondary-mask: #FFFFFF1A;
@@ -747,7 +754,7 @@
747
754
  --accent-mask: #8A84EC1A;
748
755
  --accent-selected: #8A84EC;
749
756
  --accent-contrast: #000000;
750
- --bg-canvas: #0A0A0A;
757
+ --bg-canvas: #000000;
751
758
  --bg-surface: #0A0A0A;
752
759
  --bg-surface-raised: #141414;
753
760
  --bg-mask: #FFFFFF0D;
@@ -766,16 +773,17 @@
766
773
  --text-muted: #999999;
767
774
  --text-disabled: #4D4D4D;
768
775
  --text-link: #3392FF;
776
+ --text-contrast: #000000;
769
777
  --ring-color: #FFFFFF;
770
- --success: #03170B;
778
+ --success: #0A2916;
771
779
  --success-border: #22C55E66;
772
- --success-contrast: #26D968;
773
- --warning: #191301;
774
- --warning-border: #F7BD084D;
775
- --warning-contrast: #FAD76B;
776
- --danger: #430A0A;
777
- --danger-border: #EF444480;
778
- --danger-contrast: #F87171;
780
+ --success-contrast: #52E086;
781
+ --warning: #312602;
782
+ --warning-border: #F7BD0880;
783
+ --warning-contrast: #F7BD08;
784
+ --danger: #5B0B0B;
785
+ --danger-border: #E51A1A66;
786
+ --danger-contrast: #ED7878;
779
787
  --info: #001833;
780
788
  --info-border: #0072F580;
781
789
  --info-contrast: #66ADFF;
@@ -819,6 +827,8 @@
819
827
  .text-body-md { font-size: var(--text-body-md-font-size); line-height: var(--text-body-md-line-height); }
820
828
  .text-body-sm { font-size: var(--text-body-sm-font-size); line-height: var(--text-body-sm-line-height); }
821
829
  .text-body-xs { font-size: var(--text-body-xs-font-size); line-height: var(--text-body-xs-line-height); }
830
+ .text-tag-sm { font-size: var(--text-tag-sm-font-size); line-height: var(--text-tag-sm-line-height); font-weight: var(--text-tag-sm-font-weight); }
831
+ .text-tag-md { font-size: var(--text-tag-md-font-size); line-height: var(--text-tag-md-line-height); font-weight: var(--text-tag-md-font-weight); }
822
832
  .text-body-xxs { font-size: var(--text-body-xxs-font-size); line-height: var(--text-body-xxs-line-height); }
823
833
  .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
834
  .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); }
package/dist/v3/globals.scss CHANGED
@@ -84,17 +84,17 @@
84
84
  --color-green-800: #12542B;
85
85
  --color-green-900: #0A2916;
86
86
  --color-green-950: #03170B;
87
- --color-red-50: #FFE5E5;
88
- --color-red-100: #FFCCCC;
89
- --color-red-200: #FECACA;
90
- --color-red-300: #FCA5A5;
91
- --color-red-400: #F87171;
92
- --color-red-500: #EF4444;
93
- --color-red-600: #DC2626;
94
- --color-red-700: #B91C1C;
95
- --color-red-800: #991B1B;
96
- --color-red-900: #7F1D1D;
97
- --color-red-950: #430A0A;
87
+ --color-red-50: #FCE8E8;
88
+ --color-red-100: #F9D2D2;
89
+ --color-red-200: #F3A5A5;
90
+ --color-red-300: #ED7878;
91
+ --color-red-400: #E74B4B;
92
+ --color-red-500: #E51A1A;
93
+ --color-red-600: #B71515;
94
+ --color-red-700: #891010;
95
+ --color-red-800: #5B0B0B;
96
+ --color-red-900: #2E0606;
97
+ --color-red-950: #170303;
98
98
  --color-surface-0: #FFFFFF;
99
99
  --color-surface-50: #FAFAFA;
100
100
  --color-surface-100: #F5F5F5;
@@ -157,16 +157,16 @@
157
157
  --color-alpha-green-700: #22C55EB2;
158
158
  --color-alpha-green-800: #22C55ECC;
159
159
  --color-alpha-green-900: #22C55EE5;
160
- --color-alpha-red-50: #EF44440D;
161
- --color-alpha-red-100: #EF44441A;
162
- --color-alpha-red-200: #EF444433;
163
- --color-alpha-red-300: #EF44444D;
164
- --color-alpha-red-400: #EF444466;
165
- --color-alpha-red-500: #EF444480;
166
- --color-alpha-red-600: #EF444499;
167
- --color-alpha-red-700: #EF4444B2;
168
- --color-alpha-red-800: #EF4444CC;
169
- --color-alpha-red-900: #EF4444E5;
160
+ --color-alpha-red-50: #E51A1A0D;
161
+ --color-alpha-red-100: #E51A1A1A;
162
+ --color-alpha-red-200: #E51A1A33;
163
+ --color-alpha-red-300: #E51A1A4D;
164
+ --color-alpha-red-400: #E51A1A66;
165
+ --color-alpha-red-500: #E51A1A80;
166
+ --color-alpha-red-600: #E51A1A99;
167
+ --color-alpha-red-700: #E51A1AB2;
168
+ --color-alpha-red-800: #E51A1ACC;
169
+ --color-alpha-red-900: #E51A1AE5;
170
170
  --color-alpha-yellow-50: #F7BD080D;
171
171
  --color-alpha-yellow-100: #F7BD081A;
172
172
  --color-alpha-yellow-200: #F7BD0833;
@@ -345,9 +345,9 @@
345
345
  --width-7xl: 1280px;
346
346
  --aspect-video: 16 / 9;
347
347
  --shape-flat: 0;
348
- --shape-card: 4px;
349
- --shape-button: 4px;
350
- --shape-elements: 4px;
348
+ --shape-card: 8px;
349
+ --shape-button: 6px;
350
+ --shape-elements: 6px;
351
351
  --border-width-default: 0.8px;
352
352
  --font-sans: Sora;
353
353
  --font-code: Roboto Mono;
@@ -501,6 +501,12 @@
501
501
  --text-body-sm-line-height: 1.5;
502
502
  --text-body-xs-font-size: 0.75rem;
503
503
  --text-body-xs-line-height: 1.5;
504
+ --text-tag-sm-font-size: 0.6875rem;
505
+ --text-tag-sm-line-height: 1;
506
+ --text-tag-sm-font-weight: 600;
507
+ --text-tag-md-font-size: 0.75rem;
508
+ --text-tag-md-line-height: 1;
509
+ --text-tag-md-font-weight: 600;
504
510
  --text-body-xxs-font-size: 0.625rem;
505
511
  --text-body-xxs-line-height: 1.5;
506
512
  --text-overline-md-font-family: Proto Mono;
@@ -539,21 +545,21 @@
539
545
  --text-primary-hover: #D94A03;
540
546
  --text-accent: #8A84EC;
541
547
  --text-accent-hover: #756FE5;
542
- --text-danger-hover: #EF4444;
548
+ --text-danger-hover: #E51A1A;
543
549
  --text-warning-hover: #F7BD08;
544
550
  --text-success-hover: #26D968;
545
551
  --text-success: #18B452;
546
- --text-danger: #DC2626;
552
+ --text-danger: #B71515;
547
553
  --text-warning: #C59707;
548
554
  --background-surface-raised: #FFFFFF;
549
555
  --background-surface-overlay: #FAFAFA;
550
556
  --background-surface: #FFFFFF;
551
557
  --background-canvas: #F5F5F5;
552
- --background-danger-hover: #F87171;
558
+ --background-danger-hover: #E74B4B;
553
559
  --background-warning-hover: #F8CA3A;
554
560
  --background-success-hover: #52E086;
555
561
  --background-success: #A4F4C0;
556
- --background-danger: #FECACA;
562
+ --background-danger: #F3A5A5;
557
563
  --background-warning: #FCE49C;
558
564
  --background-backdrop: primitives.alpha.neutral.25;
559
565
  --background-primary-hover: #D94A03;
@@ -563,12 +569,12 @@
563
569
  --border-strong: #000000;
564
570
  --border-warning: #C59707;
565
571
  --border-success: #18B452;
566
- --border-danger: #DC2626;
572
+ --border-danger: #B71515;
567
573
  --border-primary: #F3652B;
568
574
  --border-accent: #8A84EC;
569
575
  --border-warning-hover: #F7BD08;
570
576
  --border-success-hover: #26D968;
571
- --border-danger-hover: #EF4444;
577
+ --border-danger-hover: #E51A1A;
572
578
  --border-primary-hover: #D94A03;
573
579
  --border-accent-hover: #756FE5;
574
580
  --border-subtle: #E5E5E5;
@@ -627,21 +633,21 @@
627
633
  --text-primary-hover: #FF8E4D;
628
634
  --text-accent: #8A84EC;
629
635
  --text-accent-hover: #9F9AF1;
630
- --text-danger-hover: #EF4444;
636
+ --text-danger-hover: #E51A1A;
631
637
  --text-warning-hover: #F7BD08;
632
638
  --text-success-hover: #26D968;
633
639
  --text-success: #52E086;
634
- --text-danger: #F87171;
640
+ --text-danger: #E74B4B;
635
641
  --text-warning: #F8CA3A;
636
642
  --background-surface-raised: #1A1A1A;
637
643
  --background-surface-overlay: #4D4D4D;
638
644
  --background-surface: #141414;
639
645
  --background-canvas: #0A0A0A;
640
- --background-danger-hover: #DC2626;
646
+ --background-danger-hover: #B71515;
641
647
  --background-warning-hover: #C59707;
642
648
  --background-success-hover: #18B452;
643
649
  --background-success: #12542B;
644
- --background-danger: #991B1B;
650
+ --background-danger: #5B0B0B;
645
651
  --background-warning: #634B03;
646
652
  --background-backdrop: primitives.alpha.neutral.25;
647
653
  --background-primary-hover: #FF8E4D;
@@ -651,12 +657,12 @@
651
657
  --border-strong: #FFFFFF;
652
658
  --border-warning: #F8CA3A;
653
659
  --border-success: #52E086;
654
- --border-danger: #F87171;
660
+ --border-danger: #E74B4B;
655
661
  --border-primary: #F3652B;
656
662
  --border-accent: #8A84EC;
657
663
  --border-warning-hover: #F7BD08;
658
664
  --border-success-hover: #26D968;
659
- --border-danger-hover: #EF4444;
665
+ --border-danger-hover: #E51A1A;
660
666
  --border-primary-hover: #FF8E4D;
661
667
  --border-accent-hover: #9F9AF1;
662
668
  --border-subtle: #4D4D4D;
@@ -677,8 +683,8 @@
677
683
  --surface-900: #141414;
678
684
  --surface-950: #0A0A0A;
679
685
  --primary: #F3652B;
680
- --primary-mask: #FE601F1A;
681
- --primary-selected: #FE601F1A;
686
+ --primary-mask: #FE601F33;
687
+ --primary-selected: #FE601F33;
682
688
  --primary-contrast: #000000;
683
689
  --secondary: #0A0A0A;
684
690
  --secondary-mask: #00000005;
@@ -699,7 +705,7 @@
699
705
  --bg-selected: #E5E5E5;
700
706
  --bg-contrast: #141414;
701
707
  --bg-disabled: #E5E5E5;
702
- --border-default: #00000033;
708
+ --border-default: #00000014;
703
709
  --border-muted: #00000014;
704
710
  --border-strong: #000000;
705
711
  --border-selected: #F3652B;
@@ -707,19 +713,20 @@
707
713
  --text-muted: #666666;
708
714
  --text-disabled: #999999;
709
715
  --text-link: #005FCC;
716
+ --text-contrast: #FAFAFA;
710
717
  --ring-color: #0A0A0A;
711
- --success: #F0FDF4;
712
- --success-border: #22C55E99;
713
- --success-contrast: #16833F;
714
- --warning: #FEF8E6;
715
- --warning-border: #F7BD0899;
716
- --warning-contrast: #947105;
717
- --danger: #FFE5E5;
718
- --danger-border: #EF444499;
719
- --danger-contrast: #DC2626;
718
+ --success: #A4F4C0;
719
+ --success-border: #22C55E66;
720
+ --success-contrast: #12542B;
721
+ --warning: #FCE49C;
722
+ --warning-border: #F7BD0880;
723
+ --warning-contrast: #634B03;
724
+ --danger: #F9D2D2;
725
+ --danger-border: #E51A1A66;
726
+ --danger-contrast: #891010;
720
727
  --info: #CCE4FF;
721
- --info-border: #99C9FF;
722
- --info-contrast: #0072F5;
728
+ --info-border: #8A84EC66;
729
+ --info-contrast: #004799;
723
730
  }
724
731
 
725
732
  [data-theme=dark], .dark, .azion.azion-dark {
@@ -736,8 +743,8 @@
736
743
  --surface-900: #141414;
737
744
  --surface-950: #0A0A0A;
738
745
  --primary: #F3652B;
739
- --primary-mask: #FE601F1A;
740
- --primary-selected: #FE601F1A;
746
+ --primary-mask: #FE601F33;
747
+ --primary-selected: #FE601F33;
741
748
  --primary-contrast: #FFFFFF;
742
749
  --secondary: #FFFFFF;
743
750
  --secondary-mask: #FFFFFF1A;
@@ -747,7 +754,7 @@
747
754
  --accent-mask: #8A84EC1A;
748
755
  --accent-selected: #8A84EC;
749
756
  --accent-contrast: #000000;
750
- --bg-canvas: #0A0A0A;
757
+ --bg-canvas: #000000;
751
758
  --bg-surface: #0A0A0A;
752
759
  --bg-surface-raised: #141414;
753
760
  --bg-mask: #FFFFFF0D;
@@ -766,16 +773,17 @@
766
773
  --text-muted: #999999;
767
774
  --text-disabled: #4D4D4D;
768
775
  --text-link: #3392FF;
776
+ --text-contrast: #000000;
769
777
  --ring-color: #FFFFFF;
770
- --success: #03170B;
778
+ --success: #0A2916;
771
779
  --success-border: #22C55E66;
772
- --success-contrast: #26D968;
773
- --warning: #191301;
774
- --warning-border: #F7BD084D;
775
- --warning-contrast: #FAD76B;
776
- --danger: #430A0A;
777
- --danger-border: #EF444480;
778
- --danger-contrast: #F87171;
780
+ --success-contrast: #52E086;
781
+ --warning: #312602;
782
+ --warning-border: #F7BD0880;
783
+ --warning-contrast: #F7BD08;
784
+ --danger: #5B0B0B;
785
+ --danger-border: #E51A1A66;
786
+ --danger-contrast: #ED7878;
779
787
  --info: #001833;
780
788
  --info-border: #0072F580;
781
789
  --info-contrast: #66ADFF;
@@ -819,6 +827,8 @@
819
827
  .text-body-md { font-size: var(--text-body-md-font-size); line-height: var(--text-body-md-line-height); }
820
828
  .text-body-sm { font-size: var(--text-body-sm-font-size); line-height: var(--text-body-sm-line-height); }
821
829
  .text-body-xs { font-size: var(--text-body-xs-font-size); line-height: var(--text-body-xs-line-height); }
830
+ .text-tag-sm { font-size: var(--text-tag-sm-font-size); line-height: var(--text-tag-sm-line-height); font-weight: var(--text-tag-sm-font-weight); }
831
+ .text-tag-md { font-size: var(--text-tag-md-font-size); line-height: var(--text-tag-md-line-height); font-weight: var(--text-tag-md-font-weight); }
822
832
  .text-body-xxs { font-size: var(--text-body-xxs-font-size); line-height: var(--text-body-xxs-line-height); }
823
833
  .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
834
  .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); }
package/dist/v3/tailwind-preset.js CHANGED
@@ -352,6 +352,20 @@ const preset = {
352
352
  "lineHeight": "var(--text-body-xs-line-height)"
353
353
  }
354
354
  ],
355
+ "tag-sm": [
356
+ "var(--text-tag-sm-font-size)",
357
+ {
358
+ "lineHeight": "var(--text-tag-sm-line-height)",
359
+ "fontWeight": "var(--text-tag-sm-font-weight)"
360
+ }
361
+ ],
362
+ "tag-md": [
363
+ "var(--text-tag-md-font-size)",
364
+ {
365
+ "lineHeight": "var(--text-tag-md-line-height)",
366
+ "fontWeight": "var(--text-tag-md-font-weight)"
367
+ }
368
+ ],
355
369
  "body-xxs": [
356
370
  "var(--text-body-xxs-font-size)",
357
371
  {
package/dist/v3/tailwind.config.js CHANGED
@@ -360,6 +360,20 @@ module.exports = {
360
360
  "lineHeight": "var(--text-body-xs-line-height)"
361
361
  }
362
362
  ],
363
+ "tag-sm": [
364
+ "var(--text-tag-sm-font-size)",
365
+ {
366
+ "lineHeight": "var(--text-tag-sm-line-height)",
367
+ "fontWeight": "var(--text-tag-sm-font-weight)"
368
+ }
369
+ ],
370
+ "tag-md": [
371
+ "var(--text-tag-md-font-size)",
372
+ {
373
+ "lineHeight": "var(--text-tag-md-line-height)",
374
+ "fontWeight": "var(--text-tag-md-font-weight)"
375
+ }
376
+ ],
363
377
  "body-xxs": [
364
378
  "var(--text-body-xxs-font-size)",
365
379
  {
package/dist/v4/globals.css CHANGED
@@ -82,17 +82,17 @@
82
82
  --color-green-800: #12542B;
83
83
  --color-green-900: #0A2916;
84
84
  --color-green-950: #03170B;
85
- --color-red-50: #FFE5E5;
86
- --color-red-100: #FFCCCC;
87
- --color-red-200: #FECACA;
88
- --color-red-300: #FCA5A5;
89
- --color-red-400: #F87171;
90
- --color-red-500: #EF4444;
91
- --color-red-600: #DC2626;
92
- --color-red-700: #B91C1C;
93
- --color-red-800: #991B1B;
94
- --color-red-900: #7F1D1D;
95
- --color-red-950: #430A0A;
85
+ --color-red-50: #FCE8E8;
86
+ --color-red-100: #F9D2D2;
87
+ --color-red-200: #F3A5A5;
88
+ --color-red-300: #ED7878;
89
+ --color-red-400: #E74B4B;
90
+ --color-red-500: #E51A1A;
91
+ --color-red-600: #B71515;
92
+ --color-red-700: #891010;
93
+ --color-red-800: #5B0B0B;
94
+ --color-red-900: #2E0606;
95
+ --color-red-950: #170303;
96
96
  --color-surface-0: #FFFFFF;
97
97
  --color-surface-50: #FAFAFA;
98
98
  --color-surface-100: #F5F5F5;
@@ -155,16 +155,16 @@
155
155
  --color-alpha-green-700: #22C55EB2;
156
156
  --color-alpha-green-800: #22C55ECC;
157
157
  --color-alpha-green-900: #22C55EE5;
158
- --color-alpha-red-50: #EF44440D;
159
- --color-alpha-red-100: #EF44441A;
160
- --color-alpha-red-200: #EF444433;
161
- --color-alpha-red-300: #EF44444D;
162
- --color-alpha-red-400: #EF444466;
163
- --color-alpha-red-500: #EF444480;
164
- --color-alpha-red-600: #EF444499;
165
- --color-alpha-red-700: #EF4444B2;
166
- --color-alpha-red-800: #EF4444CC;
167
- --color-alpha-red-900: #EF4444E5;
158
+ --color-alpha-red-50: #E51A1A0D;
159
+ --color-alpha-red-100: #E51A1A1A;
160
+ --color-alpha-red-200: #E51A1A33;
161
+ --color-alpha-red-300: #E51A1A4D;
162
+ --color-alpha-red-400: #E51A1A66;
163
+ --color-alpha-red-500: #E51A1A80;
164
+ --color-alpha-red-600: #E51A1A99;
165
+ --color-alpha-red-700: #E51A1AB2;
166
+ --color-alpha-red-800: #E51A1ACC;
167
+ --color-alpha-red-900: #E51A1AE5;
168
168
  --color-alpha-yellow-50: #F7BD080D;
169
169
  --color-alpha-yellow-100: #F7BD081A;
170
170
  --color-alpha-yellow-200: #F7BD0833;
@@ -346,9 +346,9 @@
346
346
  --width-7xl: 1280px;
347
347
  --aspect-video: 16 / 9;
348
348
  --shape-flat: 0;
349
- --shape-card: 4px;
350
- --shape-button: 4px;
351
- --shape-elements: 4px;
349
+ --shape-card: 8px;
350
+ --shape-button: 6px;
351
+ --shape-elements: 6px;
352
352
  --border-width-default: 0.8px;
353
353
  --font-sans: Sora;
354
354
  --font-code: Roboto Mono;
@@ -496,6 +496,12 @@
496
496
  --text-body-sm-line-height: 1.5;
497
497
  --text-body-xs-font-size: 0.75rem;
498
498
  --text-body-xs-line-height: 1.5;
499
+ --text-tag-sm-font-size: 0.6875rem;
500
+ --text-tag-sm-line-height: 1;
501
+ --text-tag-sm-font-weight: 600;
502
+ --text-tag-md-font-size: 0.75rem;
503
+ --text-tag-md-line-height: 1;
504
+ --text-tag-md-font-weight: 600;
499
505
  --text-body-xxs-font-size: 0.625rem;
500
506
  --text-body-xxs-line-height: 1.5;
501
507
  --text-overline-md-font-family: Proto Mono;
@@ -599,6 +605,8 @@
599
605
  .text-body-md { font-size: var(--text-body-md-font-size); line-height: var(--text-body-md-line-height); }
600
606
  .text-body-sm { font-size: var(--text-body-sm-font-size); line-height: var(--text-body-sm-line-height); }
601
607
  .text-body-xs { font-size: var(--text-body-xs-font-size); line-height: var(--text-body-xs-line-height); }
608
+ .text-tag-sm { font-size: var(--text-tag-sm-font-size); line-height: var(--text-tag-sm-line-height); font-weight: var(--text-tag-sm-font-weight); }
609
+ .text-tag-md { font-size: var(--text-tag-md-font-size); line-height: var(--text-tag-md-line-height); font-weight: var(--text-tag-md-font-weight); }
602
610
  .text-body-xxs { font-size: var(--text-body-xxs-font-size); line-height: var(--text-body-xxs-line-height); }
603
611
  .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
612
  .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); }
package/dist/v4/globals.scss CHANGED
@@ -82,17 +82,17 @@
82
82
  --color-green-800: #12542B;
83
83
  --color-green-900: #0A2916;
84
84
  --color-green-950: #03170B;
85
- --color-red-50: #FFE5E5;
86
- --color-red-100: #FFCCCC;
87
- --color-red-200: #FECACA;
88
- --color-red-300: #FCA5A5;
89
- --color-red-400: #F87171;
90
- --color-red-500: #EF4444;
91
- --color-red-600: #DC2626;
92
- --color-red-700: #B91C1C;
93
- --color-red-800: #991B1B;
94
- --color-red-900: #7F1D1D;
95
- --color-red-950: #430A0A;
85
+ --color-red-50: #FCE8E8;
86
+ --color-red-100: #F9D2D2;
87
+ --color-red-200: #F3A5A5;
88
+ --color-red-300: #ED7878;
89
+ --color-red-400: #E74B4B;
90
+ --color-red-500: #E51A1A;
91
+ --color-red-600: #B71515;
92
+ --color-red-700: #891010;
93
+ --color-red-800: #5B0B0B;
94
+ --color-red-900: #2E0606;
95
+ --color-red-950: #170303;
96
96
  --color-surface-0: #FFFFFF;
97
97
  --color-surface-50: #FAFAFA;
98
98
  --color-surface-100: #F5F5F5;
@@ -155,16 +155,16 @@
155
155
  --color-alpha-green-700: #22C55EB2;
156
156
  --color-alpha-green-800: #22C55ECC;
157
157
  --color-alpha-green-900: #22C55EE5;
158
- --color-alpha-red-50: #EF44440D;
159
- --color-alpha-red-100: #EF44441A;
160
- --color-alpha-red-200: #EF444433;
161
- --color-alpha-red-300: #EF44444D;
162
- --color-alpha-red-400: #EF444466;
163
- --color-alpha-red-500: #EF444480;
164
- --color-alpha-red-600: #EF444499;
165
- --color-alpha-red-700: #EF4444B2;
166
- --color-alpha-red-800: #EF4444CC;
167
- --color-alpha-red-900: #EF4444E5;
158
+ --color-alpha-red-50: #E51A1A0D;
159
+ --color-alpha-red-100: #E51A1A1A;
160
+ --color-alpha-red-200: #E51A1A33;
161
+ --color-alpha-red-300: #E51A1A4D;
162
+ --color-alpha-red-400: #E51A1A66;
163
+ --color-alpha-red-500: #E51A1A80;
164
+ --color-alpha-red-600: #E51A1A99;
165
+ --color-alpha-red-700: #E51A1AB2;
166
+ --color-alpha-red-800: #E51A1ACC;
167
+ --color-alpha-red-900: #E51A1AE5;
168
168
  --color-alpha-yellow-50: #F7BD080D;
169
169
  --color-alpha-yellow-100: #F7BD081A;
170
170
  --color-alpha-yellow-200: #F7BD0833;
@@ -346,9 +346,9 @@
346
346
  --width-7xl: 1280px;
347
347
  --aspect-video: 16 / 9;
348
348
  --shape-flat: 0;
349
- --shape-card: 4px;
350
- --shape-button: 4px;
351
- --shape-elements: 4px;
349
+ --shape-card: 8px;
350
+ --shape-button: 6px;
351
+ --shape-elements: 6px;
352
352
  --border-width-default: 0.8px;
353
353
  --font-sans: Sora;
354
354
  --font-code: Roboto Mono;
@@ -496,6 +496,12 @@
496
496
  --text-body-sm-line-height: 1.5;
497
497
  --text-body-xs-font-size: 0.75rem;
498
498
  --text-body-xs-line-height: 1.5;
499
+ --text-tag-sm-font-size: 0.6875rem;
500
+ --text-tag-sm-line-height: 1;
501
+ --text-tag-sm-font-weight: 600;
502
+ --text-tag-md-font-size: 0.75rem;
503
+ --text-tag-md-line-height: 1;
504
+ --text-tag-md-font-weight: 600;
499
505
  --text-body-xxs-font-size: 0.625rem;
500
506
  --text-body-xxs-line-height: 1.5;
501
507
  --text-overline-md-font-family: Proto Mono;
@@ -599,6 +605,8 @@
599
605
  .text-body-md { font-size: var(--text-body-md-font-size); line-height: var(--text-body-md-line-height); }
600
606
  .text-body-sm { font-size: var(--text-body-sm-font-size); line-height: var(--text-body-sm-line-height); }
601
607
  .text-body-xs { font-size: var(--text-body-xs-font-size); line-height: var(--text-body-xs-line-height); }
608
+ .text-tag-sm { font-size: var(--text-tag-sm-font-size); line-height: var(--text-tag-sm-line-height); font-weight: var(--text-tag-sm-font-weight); }
609
+ .text-tag-md { font-size: var(--text-tag-md-font-size); line-height: var(--text-tag-md-line-height); font-weight: var(--text-tag-md-font-weight); }
602
610
  .text-body-xxs { font-size: var(--text-body-xxs-font-size); line-height: var(--text-body-xxs-line-height); }
603
611
  .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
612
  .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); }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aziontech/theme",
3
3
  "type": "module",
4
- "version": "2.1.1",
4
+ "version": "2.2.1",
5
5
  "author": "aziontech",
6
6
  "license": "MIT",
7
7
  "repository": {
@@ -53,6 +53,7 @@
53
53
  ],
54
54
  "exports": {
55
55
  ".": "./default.js",
56
+ "./animations": "./src/tokens/primitives/animations/animate.js",
56
57
  "./scripts/compile-primitives": "./src/scripts/compile-primitives.js",
57
58
  "./scripts/compile-theme": "./src/scripts/compile-theme.js",
58
59
  "./tailwind-preset": "./dist/v3/tailwind-preset.js",
package/src/tokens/primitives/colors/alpha.js CHANGED
@@ -60,16 +60,16 @@ export const alpha = {
60
60
  '900': '#22C55EE5',
61
61
  },
62
62
  red: {
63
- '50': '#EF44440D',
64
- '100': '#EF44441A',
65
- '200': '#EF444433',
66
- '300': '#EF44444D',
67
- '400': '#EF444466',
68
- '500': '#EF444480',
69
- '600': '#EF444499',
70
- '700': '#EF4444B2',
71
- '800': '#EF4444CC',
72
- '900': '#EF4444E5',
63
+ '50': '#E51A1A0D',
64
+ '100': '#E51A1A1A',
65
+ '200': '#E51A1A33',
66
+ '300': '#E51A1A4D',
67
+ '400': '#E51A1A66',
68
+ '500': '#E51A1A80',
69
+ '600': '#E51A1A99',
70
+ '700': '#E51A1AB2',
71
+ '800': '#E51A1ACC',
72
+ '900': '#E51A1AE5',
73
73
  },
74
74
  yellow: {
75
75
  '50': '#F7BD080D',
package/src/tokens/primitives/colors/colors.js CHANGED
@@ -101,17 +101,17 @@ export const primitives = {
101
101
  },
102
102
 
103
103
  red: {
104
- '50': '#FFE5E5',
105
- '100': '#FFCCCC',
106
- '200': '#FECACA',
107
- '300': '#FCA5A5',
108
- '400': '#F87171',
109
- '500': '#EF4444',
110
- '600': '#DC2626',
111
- '700': '#B91C1C',
112
- '800': '#991B1B',
113
- '900': '#7F1D1D',
114
- '950': '#430A0A',
104
+ '50': '#FCE8E8',
105
+ '100': '#F9D2D2',
106
+ '200': '#F3A5A5',
107
+ '300': '#ED7878',
108
+ '400': '#E74B4B',
109
+ '500': '#E51A1A',
110
+ '600': '#B71515',
111
+ '700': '#891010',
112
+ '800': '#5B0B0B',
113
+ '900': '#2E0606',
114
+ '950': '#170303',
115
115
  },
116
116
  brand,
117
117
  surface: {
package/src/tokens/primitives/shape/shape.js CHANGED
@@ -1,12 +1,12 @@
1
- import { radius } from './radius.js';
2
- import { borderWidths } from '../border-widths.js';
1
+ import { radius } from './radius.js'
2
+ import { borderWidths } from '../border-widths.js'
3
3
 
4
4
  export const shape = {
5
5
  'shape-flat': radius.none,
6
- 'shape-card': radius.DEFAULT,
7
- 'shape-button': radius.DEFAULT,
8
- 'shape-elements': radius.DEFAULT,
9
- 'border-width-default': borderWidths[1],
10
- };
6
+ 'shape-card': radius['lg'],
7
+ 'shape-button': radius['md'],
8
+ 'shape-elements': radius['md'],
9
+ 'border-width-default': borderWidths[1]
10
+ }
11
11
 
12
- export default { shape };
12
+ export default { shape }
package/src/tokens/semantic/texts.data.js CHANGED
@@ -81,6 +81,16 @@ export const textsData = {
81
81
  fontSize: '0.75rem',
82
82
  lineHeight: '1.5'
83
83
  },
84
+ 'text-tag-sm': {
85
+ fontSize: '0.6875rem',
86
+ lineHeight: '1',
87
+ fontWeight: '600'
88
+ },
89
+ 'text-tag-md': {
90
+ fontSize: '0.75rem',
91
+ lineHeight: '1',
92
+ fontWeight: '600'
93
+ },
84
94
  'text-body-xxs': {
85
95
  fontSize: '0.625rem',
86
96
  lineHeight: '1.5'
package/src/tokens/theme/background.js CHANGED
@@ -15,7 +15,7 @@ export const background = {
15
15
  'bg-disabled': tokenRef('theme.surfaces.surface-200')
16
16
  },
17
17
  dark: {
18
- 'bg-canvas': tokenRef('theme.surfaces.surface-950'),
18
+ 'bg-canvas': tokenRef('primitives.base.black'),
19
19
  'bg-surface': tokenRef('theme.surfaces.surface-950'),
20
20
  'bg-surface-raised': tokenRef('theme.surfaces.surface-900'),
21
21
  'bg-mask': tokenRef('primitives.alpha.white.50'),
package/src/tokens/theme/border.js CHANGED
@@ -2,7 +2,7 @@ import { tokenRef } from '../../scripts/refs.js';
2
2
 
3
3
  export const border = {
4
4
  light: {
5
- 'border-default': tokenRef('primitives.alpha.black.200'),
5
+ 'border-default': tokenRef('primitives.alpha.black.100'),
6
6
  'border-muted': tokenRef('primitives.alpha.black.100'),
7
7
  'border-strong': tokenRef('primitives.base.black'),
8
8
  'border-selected': tokenRef('brand.primary.primary-500'),
package/src/tokens/theme/feedback/danger.js CHANGED
@@ -2,14 +2,14 @@ import { tokenRef } from '../../../scripts/refs.js';
2
2
 
3
3
  export const danger = {
4
4
  light: {
5
- danger: tokenRef('primitives.red.50'),
6
- 'danger-border': tokenRef('primitives.alpha.red.600'),
7
- 'danger-contrast': tokenRef('primitives.red.600'),
5
+ danger: tokenRef('primitives.red.100'),
6
+ 'danger-border': tokenRef('primitives.alpha.red.400'),
7
+ 'danger-contrast': tokenRef('primitives.red.700'),
8
8
  },
9
9
  dark: {
10
- danger: tokenRef('primitives.red.950'),
11
- 'danger-border': tokenRef('primitives.alpha.red.500'),
12
- 'danger-contrast': tokenRef('primitives.red.400'),
10
+ danger: tokenRef('primitives.red.800'),
11
+ 'danger-border': tokenRef('primitives.alpha.red.400'),
12
+ 'danger-contrast': tokenRef('primitives.red.300'),
13
13
  },
14
14
  };
15
15
 
package/src/tokens/theme/feedback/info.js CHANGED
@@ -3,8 +3,8 @@ import { tokenRef } from '../../../scripts/refs.js';
3
3
  export const info = {
4
4
  light: {
5
5
  info: tokenRef('primitives.blue.100'),
6
- 'info-border': tokenRef('primitives.blue.200'),
7
- 'info-contrast': tokenRef('primitives.blue.500'),
6
+ 'info-border': tokenRef('primitives.alpha.violet.400'),
7
+ 'info-contrast': tokenRef('primitives.blue.700'),
8
8
  },
9
9
  dark: {
10
10
  info: tokenRef('primitives.blue.900'),
package/src/tokens/theme/feedback/success.js CHANGED
@@ -2,14 +2,14 @@ import { tokenRef } from '../../../scripts/refs.js';
2
2
 
3
3
  export const success = {
4
4
  light: {
5
- success: tokenRef('primitives.green.50'),
6
- 'success-border': tokenRef('primitives.alpha.green.600'),
7
- 'success-contrast': tokenRef('primitives.green.700'),
5
+ success: tokenRef('primitives.green.200'),
6
+ 'success-border': tokenRef('primitives.alpha.green.400'),
7
+ 'success-contrast': tokenRef('primitives.green.800'),
8
8
  },
9
9
  dark: {
10
- success: tokenRef('primitives.green.950'),
10
+ success: tokenRef('primitives.green.900'),
11
11
  'success-border': tokenRef('primitives.alpha.green.400'),
12
- 'success-contrast': tokenRef('primitives.green.500'),
12
+ 'success-contrast': tokenRef('primitives.green.400'),
13
13
  },
14
14
  };
15
15
 
package/src/tokens/theme/feedback/warning.js CHANGED
@@ -2,14 +2,14 @@ import { tokenRef } from '../../../scripts/refs.js';
2
2
 
3
3
  export const warning = {
4
4
  light: {
5
- warning: tokenRef('primitives.yellow.50'),
6
- 'warning-border': tokenRef('primitives.alpha.yellow.600'),
7
- 'warning-contrast': tokenRef('primitives.yellow.700'),
5
+ warning: tokenRef('primitives.yellow.200'),
6
+ 'warning-border': tokenRef('primitives.alpha.yellow.500'),
7
+ 'warning-contrast': tokenRef('primitives.yellow.800'),
8
8
  },
9
9
  dark: {
10
- warning: tokenRef('primitives.yellow.950'),
11
- 'warning-border': tokenRef('primitives.alpha.yellow.300'),
12
- 'warning-contrast': tokenRef('primitives.yellow.300'),
10
+ warning: tokenRef('primitives.yellow.900'),
11
+ 'warning-border': tokenRef('primitives.alpha.yellow.500'),
12
+ 'warning-contrast': tokenRef('primitives.yellow.500'),
13
13
  },
14
14
  };
15
15
 
package/src/tokens/theme/primary.js CHANGED
@@ -3,14 +3,14 @@ import { tokenRef } from '../../scripts/refs.js';
3
3
  export const primary = {
4
4
  light: {
5
5
  primary: tokenRef('brand.primary.primary-500'),
6
- 'primary-mask': tokenRef('primitives.alpha.orange.100'),
7
- 'primary-selected': tokenRef('primitives.alpha.orange.100'),
6
+ 'primary-mask': tokenRef('primitives.alpha.orange.200'),
7
+ 'primary-selected': tokenRef('primitives.alpha.orange.200'),
8
8
  'primary-contrast': tokenRef('primitives.base.black'),
9
9
  },
10
10
  dark: {
11
11
  primary: tokenRef('brand.primary.primary-500'),
12
- 'primary-mask': tokenRef('primitives.alpha.orange.100'),
13
- 'primary-selected': tokenRef('primitives.alpha.orange.100'),
12
+ 'primary-mask': tokenRef('primitives.alpha.orange.200'),
13
+ 'primary-selected': tokenRef('primitives.alpha.orange.200'),
14
14
  'primary-contrast': tokenRef('primitives.base.white'),
15
15
  },
16
16
  };
package/src/tokens/theme/text.js CHANGED
@@ -1,4 +1,4 @@
1
- import { tokenRef } from '../../scripts/refs.js';
1
+ import { tokenRef } from '../../scripts/refs.js'
2
2
 
3
3
  export const text = {
4
4
  light: {
@@ -6,13 +6,15 @@ export const text = {
6
6
  'text-muted': tokenRef('primitives.gray.600'),
7
7
  'text-disabled': tokenRef('primitives.gray.400'),
8
8
  'text-link': tokenRef('primitives.blue.600'),
9
+ 'text-contrast': tokenRef('primitives.gray.50')
9
10
  },
10
11
  dark: {
11
12
  'text-default': tokenRef('primitives.gray.50'),
12
13
  'text-muted': tokenRef('primitives.gray.400'),
13
14
  'text-disabled': tokenRef('primitives.gray.700'),
14
15
  'text-link': tokenRef('primitives.blue.400'),
15
- },
16
- };
16
+ 'text-contrast': tokenRef('primitives.base.black')
17
+ }
18
+ }
17
19
 
18
- export default { text };
20
+ export default { text }