@phcdevworks/spectre-tokens 2.5.0 → 2.7.0

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 (14) hide show
  1. package/README.md +185 -76
  2. package/dist/index.cjs +96 -79
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +23 -26
  5. package/dist/index.d.cts +33 -0
  6. package/dist/index.d.ts +33 -0
  7. package/dist/index.js +96 -79
  8. package/dist/index.js.map +1 -1
  9. package/package.json +19 -11
  10. package/tokens/components.json +22 -6
  11. package/tokens/modes.json +14 -6
  12. package/tokens/primitives.json +35 -20
  13. package/tokens/semantic-roles.json +69 -12
  14. package/tokens/typography.json +36 -18
package/dist/index.css CHANGED
@@ -2,7 +2,7 @@
2
2
  --sp-surface-page: #f7f8fb;
3
3
  --sp-surface-card: #ffffff;
4
4
  --sp-surface-input: #ffffff;
5
- --sp-surface-overlay: rgba(20, 27, 36, 0.6);
5
+ --sp-surface-overlay: rgba(0, 0, 0, 0.6);
6
6
  --sp-surface-alternate: #eef1f6;
7
7
  --sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
8
8
  --sp-text-on-page-default: #141b24;
@@ -144,10 +144,14 @@
144
144
  --sp-layout-container-max-width: 72rem;
145
145
  --sp-border-width-base: 1px;
146
146
  --sp-border-width-thick: 2px;
147
+ --sp-border-style-none: none;
148
+ --sp-border-style-solid: solid;
147
149
  --sp-radius-none: 0;
148
150
  --sp-radius-sm: 2px;
149
151
  --sp-radius-md: 4px;
150
152
  --sp-radius-lg: 8px;
153
+ --sp-radius-xl: 12px;
154
+ --sp-radius-2xl: 16px;
151
155
  --sp-radius-pill: 999px;
152
156
  --sp-font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
153
157
  --sp-font-family-serif: 'Times New Roman', Times, serif;
@@ -183,34 +187,21 @@
183
187
  --sp-font-6xl-line-height: 5rem;
184
188
  --sp-font-6xl-weight: 900;
185
189
  --sp-font-xs-letter-spacing: 0.02em;
186
- --sp-text-on-page-default: #141b24;
187
- --sp-text-on-page-muted: #4b576a;
188
- --sp-text-on-page-subtle: #657287;
189
- --sp-text-on-page-meta: #657287;
190
- --sp-text-on-surface-default: #141b24;
191
- --sp-text-on-surface-muted: #4b576a;
192
- --sp-text-on-surface-subtle: #657287;
193
- --sp-text-on-surface-meta: #657287;
194
- --sp-badge-neutral-bg: #eef1f6;
195
- --sp-badge-neutral-text: #374253;
196
- --sp-badge-info-bg: #e0f2fe;
197
- --sp-badge-info-text: #075985;
198
- --sp-badge-success-bg: #dcfce7;
199
- --sp-badge-success-text: #166534;
200
- --sp-badge-warning-bg: #fff1c2;
201
- --sp-badge-warning-text: #8f5200;
202
- --sp-badge-danger-bg: #fee2e2;
203
- --sp-badge-danger-text: #991b1b;
204
- --sp-icon-box-bg: #ffffff;
205
- --sp-icon-box-border: #d9dfeb;
206
- --sp-icon-box-icon-default: #0369a1;
207
- --sp-icon-box-icon-success: #16a34a;
208
- --sp-icon-box-icon-warning: #d48806;
209
- --sp-icon-box-icon-danger: #dc2626;
190
+ --sp-font-sm-letter-spacing: 0em;
191
+ --sp-font-md-letter-spacing: 0em;
192
+ --sp-font-lg-letter-spacing: 0em;
193
+ --sp-font-xl-letter-spacing: 0em;
194
+ --sp-font-2xl-letter-spacing: 0em;
195
+ --sp-font-3xl-letter-spacing: 0em;
196
+ --sp-font-4xl-letter-spacing: 0em;
197
+ --sp-font-5xl-letter-spacing: 0em;
198
+ --sp-font-6xl-letter-spacing: 0em;
210
199
  --sp-shadow-none: none;
211
200
  --sp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
212
201
  --sp-shadow-md: 0 2px 6px -1px rgba(0, 0, 0, 0.08);
213
202
  --sp-shadow-lg: 0 6px 16px -4px rgba(0, 0, 0, 0.12);
203
+ --sp-shadow-xl: 0 12px 24px -6px rgba(0, 0, 0, 0.15);
204
+ --sp-shadow-2xl: 0 20px 48px -12px rgba(0, 0, 0, 0.20);
214
205
  --sp-breakpoint-sm: 640px;
215
206
  --sp-breakpoint-md: 768px;
216
207
  --sp-breakpoint-lg: 1024px;
@@ -224,20 +215,26 @@
224
215
  --sp-z-index-modal: 1400;
225
216
  --sp-z-index-popover: 1500;
226
217
  --sp-z-index-tooltip: 1600;
218
+ --sp-z-index-toast: 1700;
227
219
  --sp-duration-instant: 75ms;
228
220
  --sp-duration-fast: 150ms;
229
221
  --sp-duration-base: 200ms;
222
+ --sp-duration-relaxed: 250ms;
230
223
  --sp-duration-moderate: 300ms;
231
224
  --sp-duration-slow: 500ms;
232
225
  --sp-duration-slower: 700ms;
226
+ --sp-duration-long: 1000ms;
227
+ --sp-duration-slowest: 1200ms;
233
228
  --sp-easing-linear: linear;
234
229
  --sp-easing-in: cubic-bezier(0.4, 0, 1, 1);
235
230
  --sp-easing-out: cubic-bezier(0, 0, 0.2, 1);
236
231
  --sp-easing-inout: cubic-bezier(0.4, 0, 0.2, 1);
237
232
  --sp-easing-spring: cubic-bezier(0.4, 0, 0.2, 1);
233
+ --sp-easing-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
238
234
  --sp-opacity-disabled: 0.38;
239
235
  --sp-opacity-hover: 0.92;
240
236
  --sp-opacity-active: 0.84;
237
+ --sp-opacity-loading: 0.6;
241
238
  --sp-opacity-focus: 1;
242
239
  --sp-opacity-overlay: 0.5;
243
240
  --sp-opacity-tooltip: 0.95;
@@ -369,7 +366,7 @@
369
366
  --sp-button-text-default: #eef1f6;
370
367
  --sp-button-text-on-primary: #ffffff;
371
368
  --sp-badge-neutral-bg: #374253;
372
- --sp-badge-neutral-text: #eef1f6;
369
+ --sp-badge-neutral-text: #f7f8fb;
373
370
  --sp-badge-info-bg: #0c4a6e;
374
371
  --sp-badge-info-text: #e0f2fe;
375
372
  --sp-badge-success-bg: #166534;
package/dist/index.d.cts CHANGED
@@ -469,6 +469,8 @@ interface SpectreGeneratedTokens {
469
469
  sm: string;
470
470
  md: string;
471
471
  lg: string;
472
+ xl: string;
473
+ '2xl': string;
472
474
  pill: string;
473
475
  };
474
476
  shadows: {
@@ -476,6 +478,8 @@ interface SpectreGeneratedTokens {
476
478
  sm: string;
477
479
  md: string;
478
480
  lg: string;
481
+ xl: string;
482
+ '2xl': string;
479
483
  };
480
484
  breakpoints: {
481
485
  sm: string;
@@ -493,15 +497,19 @@ interface SpectreGeneratedTokens {
493
497
  modal: string;
494
498
  popover: string;
495
499
  tooltip: string;
500
+ toast: string;
496
501
  };
497
502
  transitions: {
498
503
  duration: {
499
504
  instant: string;
500
505
  fast: string;
501
506
  base: string;
507
+ relaxed: string;
502
508
  moderate: string;
503
509
  slow: string;
504
510
  slower: string;
511
+ long: string;
512
+ slowest: string;
505
513
  };
506
514
  easing: {
507
515
  linear: string;
@@ -509,6 +517,7 @@ interface SpectreGeneratedTokens {
509
517
  out: string;
510
518
  inOut: string;
511
519
  spring: string;
520
+ overshoot: string;
512
521
  };
513
522
  };
514
523
  animations: {
@@ -557,6 +566,7 @@ interface SpectreGeneratedTokens {
557
566
  disabled: string;
558
567
  hover: string;
559
568
  active: string;
569
+ loading: string;
560
570
  focus: string;
561
571
  overlay: string;
562
572
  tooltip: string;
@@ -564,6 +574,7 @@ interface SpectreGeneratedTokens {
564
574
  aspectRatios: {
565
575
  square: string;
566
576
  video: string;
577
+ classic: string;
567
578
  portrait: string;
568
579
  landscape: string;
569
580
  ultrawide: string;
@@ -592,6 +603,10 @@ interface SpectreGeneratedTokens {
592
603
  base: string;
593
604
  thick: string;
594
605
  };
606
+ style: {
607
+ none: string;
608
+ solid: string;
609
+ };
595
610
  };
596
611
  surface: {
597
612
  page: string;
@@ -655,46 +670,55 @@ interface SpectreGeneratedTokens {
655
670
  size: string;
656
671
  lineHeight: string;
657
672
  weight: number;
673
+ letterSpacing: string;
658
674
  };
659
675
  md: {
660
676
  size: string;
661
677
  lineHeight: string;
662
678
  weight: number;
679
+ letterSpacing: string;
663
680
  };
664
681
  lg: {
665
682
  size: string;
666
683
  lineHeight: string;
667
684
  weight: number;
685
+ letterSpacing: string;
668
686
  };
669
687
  xl: {
670
688
  size: string;
671
689
  lineHeight: string;
672
690
  weight: number;
691
+ letterSpacing: string;
673
692
  };
674
693
  '2xl': {
675
694
  size: string;
676
695
  lineHeight: string;
677
696
  weight: number;
697
+ letterSpacing: string;
678
698
  };
679
699
  '3xl': {
680
700
  size: string;
681
701
  lineHeight: string;
682
702
  weight: number;
703
+ letterSpacing: string;
683
704
  };
684
705
  '4xl': {
685
706
  size: string;
686
707
  lineHeight: string;
687
708
  weight: number;
709
+ letterSpacing: string;
688
710
  };
689
711
  '5xl': {
690
712
  size: string;
691
713
  lineHeight: string;
692
714
  weight: number;
715
+ letterSpacing: string;
693
716
  };
694
717
  '6xl': {
695
718
  size: string;
696
719
  lineHeight: string;
697
720
  weight: number;
721
+ letterSpacing: string;
698
722
  };
699
723
  };
700
724
  typography: {
@@ -714,46 +738,55 @@ interface SpectreGeneratedTokens {
714
738
  fontSize: string;
715
739
  lineHeight: string;
716
740
  fontWeight: number;
741
+ letterSpacing: string;
717
742
  };
718
743
  md: {
719
744
  fontSize: string;
720
745
  lineHeight: string;
721
746
  fontWeight: number;
747
+ letterSpacing: string;
722
748
  };
723
749
  lg: {
724
750
  fontSize: string;
725
751
  lineHeight: string;
726
752
  fontWeight: number;
753
+ letterSpacing: string;
727
754
  };
728
755
  xl: {
729
756
  fontSize: string;
730
757
  lineHeight: string;
731
758
  fontWeight: number;
759
+ letterSpacing: string;
732
760
  };
733
761
  '2xl': {
734
762
  fontSize: string;
735
763
  lineHeight: string;
736
764
  fontWeight: number;
765
+ letterSpacing: string;
737
766
  };
738
767
  '3xl': {
739
768
  fontSize: string;
740
769
  lineHeight: string;
741
770
  fontWeight: number;
771
+ letterSpacing: string;
742
772
  };
743
773
  '4xl': {
744
774
  fontSize: string;
745
775
  lineHeight: string;
746
776
  fontWeight: number;
777
+ letterSpacing: string;
747
778
  };
748
779
  '5xl': {
749
780
  fontSize: string;
750
781
  lineHeight: string;
751
782
  fontWeight: number;
783
+ letterSpacing: string;
752
784
  };
753
785
  '6xl': {
754
786
  fontSize: string;
755
787
  lineHeight: string;
756
788
  fontWeight: number;
789
+ letterSpacing: string;
757
790
  };
758
791
  };
759
792
  };
package/dist/index.d.ts CHANGED
@@ -469,6 +469,8 @@ interface SpectreGeneratedTokens {
469
469
  sm: string;
470
470
  md: string;
471
471
  lg: string;
472
+ xl: string;
473
+ '2xl': string;
472
474
  pill: string;
473
475
  };
474
476
  shadows: {
@@ -476,6 +478,8 @@ interface SpectreGeneratedTokens {
476
478
  sm: string;
477
479
  md: string;
478
480
  lg: string;
481
+ xl: string;
482
+ '2xl': string;
479
483
  };
480
484
  breakpoints: {
481
485
  sm: string;
@@ -493,15 +497,19 @@ interface SpectreGeneratedTokens {
493
497
  modal: string;
494
498
  popover: string;
495
499
  tooltip: string;
500
+ toast: string;
496
501
  };
497
502
  transitions: {
498
503
  duration: {
499
504
  instant: string;
500
505
  fast: string;
501
506
  base: string;
507
+ relaxed: string;
502
508
  moderate: string;
503
509
  slow: string;
504
510
  slower: string;
511
+ long: string;
512
+ slowest: string;
505
513
  };
506
514
  easing: {
507
515
  linear: string;
@@ -509,6 +517,7 @@ interface SpectreGeneratedTokens {
509
517
  out: string;
510
518
  inOut: string;
511
519
  spring: string;
520
+ overshoot: string;
512
521
  };
513
522
  };
514
523
  animations: {
@@ -557,6 +566,7 @@ interface SpectreGeneratedTokens {
557
566
  disabled: string;
558
567
  hover: string;
559
568
  active: string;
569
+ loading: string;
560
570
  focus: string;
561
571
  overlay: string;
562
572
  tooltip: string;
@@ -564,6 +574,7 @@ interface SpectreGeneratedTokens {
564
574
  aspectRatios: {
565
575
  square: string;
566
576
  video: string;
577
+ classic: string;
567
578
  portrait: string;
568
579
  landscape: string;
569
580
  ultrawide: string;
@@ -592,6 +603,10 @@ interface SpectreGeneratedTokens {
592
603
  base: string;
593
604
  thick: string;
594
605
  };
606
+ style: {
607
+ none: string;
608
+ solid: string;
609
+ };
595
610
  };
596
611
  surface: {
597
612
  page: string;
@@ -655,46 +670,55 @@ interface SpectreGeneratedTokens {
655
670
  size: string;
656
671
  lineHeight: string;
657
672
  weight: number;
673
+ letterSpacing: string;
658
674
  };
659
675
  md: {
660
676
  size: string;
661
677
  lineHeight: string;
662
678
  weight: number;
679
+ letterSpacing: string;
663
680
  };
664
681
  lg: {
665
682
  size: string;
666
683
  lineHeight: string;
667
684
  weight: number;
685
+ letterSpacing: string;
668
686
  };
669
687
  xl: {
670
688
  size: string;
671
689
  lineHeight: string;
672
690
  weight: number;
691
+ letterSpacing: string;
673
692
  };
674
693
  '2xl': {
675
694
  size: string;
676
695
  lineHeight: string;
677
696
  weight: number;
697
+ letterSpacing: string;
678
698
  };
679
699
  '3xl': {
680
700
  size: string;
681
701
  lineHeight: string;
682
702
  weight: number;
703
+ letterSpacing: string;
683
704
  };
684
705
  '4xl': {
685
706
  size: string;
686
707
  lineHeight: string;
687
708
  weight: number;
709
+ letterSpacing: string;
688
710
  };
689
711
  '5xl': {
690
712
  size: string;
691
713
  lineHeight: string;
692
714
  weight: number;
715
+ letterSpacing: string;
693
716
  };
694
717
  '6xl': {
695
718
  size: string;
696
719
  lineHeight: string;
697
720
  weight: number;
721
+ letterSpacing: string;
698
722
  };
699
723
  };
700
724
  typography: {
@@ -714,46 +738,55 @@ interface SpectreGeneratedTokens {
714
738
  fontSize: string;
715
739
  lineHeight: string;
716
740
  fontWeight: number;
741
+ letterSpacing: string;
717
742
  };
718
743
  md: {
719
744
  fontSize: string;
720
745
  lineHeight: string;
721
746
  fontWeight: number;
747
+ letterSpacing: string;
722
748
  };
723
749
  lg: {
724
750
  fontSize: string;
725
751
  lineHeight: string;
726
752
  fontWeight: number;
753
+ letterSpacing: string;
727
754
  };
728
755
  xl: {
729
756
  fontSize: string;
730
757
  lineHeight: string;
731
758
  fontWeight: number;
759
+ letterSpacing: string;
732
760
  };
733
761
  '2xl': {
734
762
  fontSize: string;
735
763
  lineHeight: string;
736
764
  fontWeight: number;
765
+ letterSpacing: string;
737
766
  };
738
767
  '3xl': {
739
768
  fontSize: string;
740
769
  lineHeight: string;
741
770
  fontWeight: number;
771
+ letterSpacing: string;
742
772
  };
743
773
  '4xl': {
744
774
  fontSize: string;
745
775
  lineHeight: string;
746
776
  fontWeight: number;
777
+ letterSpacing: string;
747
778
  };
748
779
  '5xl': {
749
780
  fontSize: string;
750
781
  lineHeight: string;
751
782
  fontWeight: number;
783
+ letterSpacing: string;
752
784
  };
753
785
  '6xl': {
754
786
  fontSize: string;
755
787
  lineHeight: string;
756
788
  fontWeight: number;
789
+ letterSpacing: string;
757
790
  };
758
791
  };
759
792
  };