@phcdevworks/spectre-tokens 2.6.0 → 2.8.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 (15) hide show
  1. package/README.md +15 -13
  2. package/dist/index.cjs +96 -65
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +36 -25
  5. package/dist/index.d.cts +47 -0
  6. package/dist/index.d.ts +47 -0
  7. package/dist/index.js +96 -65
  8. package/dist/index.js.map +1 -1
  9. package/dist/tokens.dtcg.json +2478 -0
  10. package/package.json +19 -11
  11. package/tokens/components.json +6 -0
  12. package/tokens/modes.json +1 -1
  13. package/tokens/palette.json +3 -3
  14. package/tokens/primitives.json +47 -20
  15. package/tokens/typography.json +36 -18
package/dist/index.css CHANGED
@@ -116,17 +116,24 @@
116
116
  --sp-color-white: #ffffff;
117
117
  --sp-color-black: #000000;
118
118
  --sp-space-0: 0rem;
119
+ --sp-space-1: 0.0625rem;
120
+ --sp-space-2: 0.125rem;
119
121
  --sp-space-4: 0.25rem;
122
+ --sp-space-6: 0.375rem;
120
123
  --sp-space-8: 0.5rem;
124
+ --sp-space-10: 0.625rem;
121
125
  --sp-space-12: 0.75rem;
126
+ --sp-space-14: 0.875rem;
122
127
  --sp-space-16: 1rem;
123
128
  --sp-space-20: 1.25rem;
124
129
  --sp-space-24: 1.5rem;
130
+ --sp-space-28: 1.75rem;
125
131
  --sp-space-32: 2rem;
126
132
  --sp-space-40: 2.5rem;
127
133
  --sp-space-48: 3rem;
128
134
  --sp-space-56: 3.5rem;
129
135
  --sp-space-64: 4rem;
136
+ --sp-space-72: 4.5rem;
130
137
  --sp-space-80: 5rem;
131
138
  --sp-space-96: 6rem;
132
139
  --sp-layout-section-padding-sm: 1.5rem;
@@ -142,12 +149,21 @@
142
149
  --sp-layout-container-padding-inline-md: 1.5rem;
143
150
  --sp-layout-container-padding-inline-lg: 2rem;
144
151
  --sp-layout-container-max-width: 72rem;
152
+ --sp-border-width-none: 0;
145
153
  --sp-border-width-base: 1px;
146
154
  --sp-border-width-thick: 2px;
155
+ --sp-border-style-none: none;
156
+ --sp-border-style-solid: solid;
157
+ --sp-border-style-dashed: dashed;
158
+ --sp-border-style-dotted: dotted;
147
159
  --sp-radius-none: 0;
148
160
  --sp-radius-sm: 2px;
149
161
  --sp-radius-md: 4px;
150
162
  --sp-radius-lg: 8px;
163
+ --sp-radius-xl: 12px;
164
+ --sp-radius-2xl: 16px;
165
+ --sp-radius-3xl: 24px;
166
+ --sp-radius-4xl: 32px;
151
167
  --sp-radius-pill: 999px;
152
168
  --sp-font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
153
169
  --sp-font-family-serif: 'Times New Roman', Times, serif;
@@ -183,34 +199,21 @@
183
199
  --sp-font-6xl-line-height: 5rem;
184
200
  --sp-font-6xl-weight: 900;
185
201
  --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;
202
+ --sp-font-sm-letter-spacing: 0em;
203
+ --sp-font-md-letter-spacing: 0em;
204
+ --sp-font-lg-letter-spacing: 0em;
205
+ --sp-font-xl-letter-spacing: 0em;
206
+ --sp-font-2xl-letter-spacing: 0em;
207
+ --sp-font-3xl-letter-spacing: 0em;
208
+ --sp-font-4xl-letter-spacing: 0em;
209
+ --sp-font-5xl-letter-spacing: 0em;
210
+ --sp-font-6xl-letter-spacing: 0em;
210
211
  --sp-shadow-none: none;
211
212
  --sp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
212
213
  --sp-shadow-md: 0 2px 6px -1px rgba(0, 0, 0, 0.08);
213
214
  --sp-shadow-lg: 0 6px 16px -4px rgba(0, 0, 0, 0.12);
215
+ --sp-shadow-xl: 0 12px 24px -6px rgba(0, 0, 0, 0.15);
216
+ --sp-shadow-2xl: 0 20px 48px -12px rgba(0, 0, 0, 0.20);
214
217
  --sp-breakpoint-sm: 640px;
215
218
  --sp-breakpoint-md: 768px;
216
219
  --sp-breakpoint-lg: 1024px;
@@ -224,20 +227,26 @@
224
227
  --sp-z-index-modal: 1400;
225
228
  --sp-z-index-popover: 1500;
226
229
  --sp-z-index-tooltip: 1600;
230
+ --sp-z-index-toast: 1700;
227
231
  --sp-duration-instant: 75ms;
228
232
  --sp-duration-fast: 150ms;
229
233
  --sp-duration-base: 200ms;
234
+ --sp-duration-relaxed: 250ms;
230
235
  --sp-duration-moderate: 300ms;
231
236
  --sp-duration-slow: 500ms;
232
237
  --sp-duration-slower: 700ms;
238
+ --sp-duration-long: 1000ms;
239
+ --sp-duration-slowest: 1200ms;
233
240
  --sp-easing-linear: linear;
234
241
  --sp-easing-in: cubic-bezier(0.4, 0, 1, 1);
235
242
  --sp-easing-out: cubic-bezier(0, 0, 0.2, 1);
236
243
  --sp-easing-inout: cubic-bezier(0.4, 0, 0.2, 1);
237
244
  --sp-easing-spring: cubic-bezier(0.4, 0, 0.2, 1);
245
+ --sp-easing-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
238
246
  --sp-opacity-disabled: 0.38;
239
247
  --sp-opacity-hover: 0.92;
240
248
  --sp-opacity-active: 0.84;
249
+ --sp-opacity-loading: 0.6;
241
250
  --sp-opacity-focus: 1;
242
251
  --sp-opacity-overlay: 0.5;
243
252
  --sp-opacity-tooltip: 0.95;
@@ -279,6 +288,7 @@
279
288
  --sp-button-danger-text: #ffffff;
280
289
  --sp-button-danger-textdisabled: #8a96ad;
281
290
  --sp-button-danger-focusring: rgba(239, 68, 68, 0.4);
291
+ --sp-button-danger-focusvisible: rgba(239, 68, 68, 0.4);
282
292
  --sp-button-success-bg: #15803d;
283
293
  --sp-button-success-bghover: #166534;
284
294
  --sp-button-success-bgactive: #14532d;
@@ -286,6 +296,7 @@
286
296
  --sp-button-success-text: #ffffff;
287
297
  --sp-button-success-textdisabled: #8a96ad;
288
298
  --sp-button-success-focusring: rgba(34, 197, 94, 0.4);
299
+ --sp-button-success-focusvisible: rgba(34, 197, 94, 0.4);
289
300
  --sp-button-cta-bg: #1f57db;
290
301
  --sp-button-cta-bghover: #1946b4;
291
302
  --sp-button-cta-bgactive: #173b8f;
@@ -369,7 +380,7 @@
369
380
  --sp-button-text-default: #eef1f6;
370
381
  --sp-button-text-on-primary: #ffffff;
371
382
  --sp-badge-neutral-bg: #374253;
372
- --sp-badge-neutral-text: #eef1f6;
383
+ --sp-badge-neutral-text: #f7f8fb;
373
384
  --sp-badge-info-bg: #0c4a6e;
374
385
  --sp-badge-info-text: #e0f2fe;
375
386
  --sp-badge-success-bg: #166534;
package/dist/index.d.cts CHANGED
@@ -104,6 +104,7 @@ interface SpectreGeneratedTokens {
104
104
  text: string;
105
105
  textDisabled: string;
106
106
  focusRing: string;
107
+ focusVisible: string;
107
108
  };
108
109
  success: {
109
110
  bg: string;
@@ -113,6 +114,7 @@ interface SpectreGeneratedTokens {
113
114
  text: string;
114
115
  textDisabled: string;
115
116
  focusRing: string;
117
+ focusVisible: string;
116
118
  };
117
119
  cta: {
118
120
  bg: string;
@@ -450,17 +452,24 @@ interface SpectreGeneratedTokens {
450
452
  };
451
453
  space: {
452
454
  '0': string;
455
+ '1': string;
456
+ '2': string;
453
457
  '4': string;
458
+ '6': string;
454
459
  '8': string;
460
+ '10': string;
455
461
  '12': string;
462
+ '14': string;
456
463
  '16': string;
457
464
  '20': string;
458
465
  '24': string;
466
+ '28': string;
459
467
  '32': string;
460
468
  '40': string;
461
469
  '48': string;
462
470
  '56': string;
463
471
  '64': string;
472
+ '72': string;
464
473
  '80': string;
465
474
  '96': string;
466
475
  };
@@ -469,6 +478,10 @@ interface SpectreGeneratedTokens {
469
478
  sm: string;
470
479
  md: string;
471
480
  lg: string;
481
+ xl: string;
482
+ '2xl': string;
483
+ '3xl': string;
484
+ '4xl': string;
472
485
  pill: string;
473
486
  };
474
487
  shadows: {
@@ -476,6 +489,8 @@ interface SpectreGeneratedTokens {
476
489
  sm: string;
477
490
  md: string;
478
491
  lg: string;
492
+ xl: string;
493
+ '2xl': string;
479
494
  };
480
495
  breakpoints: {
481
496
  sm: string;
@@ -493,15 +508,19 @@ interface SpectreGeneratedTokens {
493
508
  modal: string;
494
509
  popover: string;
495
510
  tooltip: string;
511
+ toast: string;
496
512
  };
497
513
  transitions: {
498
514
  duration: {
499
515
  instant: string;
500
516
  fast: string;
501
517
  base: string;
518
+ relaxed: string;
502
519
  moderate: string;
503
520
  slow: string;
504
521
  slower: string;
522
+ long: string;
523
+ slowest: string;
505
524
  };
506
525
  easing: {
507
526
  linear: string;
@@ -509,6 +528,7 @@ interface SpectreGeneratedTokens {
509
528
  out: string;
510
529
  inOut: string;
511
530
  spring: string;
531
+ overshoot: string;
512
532
  };
513
533
  };
514
534
  animations: {
@@ -557,6 +577,7 @@ interface SpectreGeneratedTokens {
557
577
  disabled: string;
558
578
  hover: string;
559
579
  active: string;
580
+ loading: string;
560
581
  focus: string;
561
582
  overlay: string;
562
583
  tooltip: string;
@@ -564,6 +585,7 @@ interface SpectreGeneratedTokens {
564
585
  aspectRatios: {
565
586
  square: string;
566
587
  video: string;
588
+ classic: string;
567
589
  portrait: string;
568
590
  landscape: string;
569
591
  ultrawide: string;
@@ -589,9 +611,16 @@ interface SpectreGeneratedTokens {
589
611
  };
590
612
  border: {
591
613
  width: {
614
+ none: string;
592
615
  base: string;
593
616
  thick: string;
594
617
  };
618
+ style: {
619
+ none: string;
620
+ solid: string;
621
+ dashed: string;
622
+ dotted: string;
623
+ };
595
624
  };
596
625
  surface: {
597
626
  page: string;
@@ -655,46 +684,55 @@ interface SpectreGeneratedTokens {
655
684
  size: string;
656
685
  lineHeight: string;
657
686
  weight: number;
687
+ letterSpacing: string;
658
688
  };
659
689
  md: {
660
690
  size: string;
661
691
  lineHeight: string;
662
692
  weight: number;
693
+ letterSpacing: string;
663
694
  };
664
695
  lg: {
665
696
  size: string;
666
697
  lineHeight: string;
667
698
  weight: number;
699
+ letterSpacing: string;
668
700
  };
669
701
  xl: {
670
702
  size: string;
671
703
  lineHeight: string;
672
704
  weight: number;
705
+ letterSpacing: string;
673
706
  };
674
707
  '2xl': {
675
708
  size: string;
676
709
  lineHeight: string;
677
710
  weight: number;
711
+ letterSpacing: string;
678
712
  };
679
713
  '3xl': {
680
714
  size: string;
681
715
  lineHeight: string;
682
716
  weight: number;
717
+ letterSpacing: string;
683
718
  };
684
719
  '4xl': {
685
720
  size: string;
686
721
  lineHeight: string;
687
722
  weight: number;
723
+ letterSpacing: string;
688
724
  };
689
725
  '5xl': {
690
726
  size: string;
691
727
  lineHeight: string;
692
728
  weight: number;
729
+ letterSpacing: string;
693
730
  };
694
731
  '6xl': {
695
732
  size: string;
696
733
  lineHeight: string;
697
734
  weight: number;
735
+ letterSpacing: string;
698
736
  };
699
737
  };
700
738
  typography: {
@@ -714,46 +752,55 @@ interface SpectreGeneratedTokens {
714
752
  fontSize: string;
715
753
  lineHeight: string;
716
754
  fontWeight: number;
755
+ letterSpacing: string;
717
756
  };
718
757
  md: {
719
758
  fontSize: string;
720
759
  lineHeight: string;
721
760
  fontWeight: number;
761
+ letterSpacing: string;
722
762
  };
723
763
  lg: {
724
764
  fontSize: string;
725
765
  lineHeight: string;
726
766
  fontWeight: number;
767
+ letterSpacing: string;
727
768
  };
728
769
  xl: {
729
770
  fontSize: string;
730
771
  lineHeight: string;
731
772
  fontWeight: number;
773
+ letterSpacing: string;
732
774
  };
733
775
  '2xl': {
734
776
  fontSize: string;
735
777
  lineHeight: string;
736
778
  fontWeight: number;
779
+ letterSpacing: string;
737
780
  };
738
781
  '3xl': {
739
782
  fontSize: string;
740
783
  lineHeight: string;
741
784
  fontWeight: number;
785
+ letterSpacing: string;
742
786
  };
743
787
  '4xl': {
744
788
  fontSize: string;
745
789
  lineHeight: string;
746
790
  fontWeight: number;
791
+ letterSpacing: string;
747
792
  };
748
793
  '5xl': {
749
794
  fontSize: string;
750
795
  lineHeight: string;
751
796
  fontWeight: number;
797
+ letterSpacing: string;
752
798
  };
753
799
  '6xl': {
754
800
  fontSize: string;
755
801
  lineHeight: string;
756
802
  fontWeight: number;
803
+ letterSpacing: string;
757
804
  };
758
805
  };
759
806
  };
package/dist/index.d.ts CHANGED
@@ -104,6 +104,7 @@ interface SpectreGeneratedTokens {
104
104
  text: string;
105
105
  textDisabled: string;
106
106
  focusRing: string;
107
+ focusVisible: string;
107
108
  };
108
109
  success: {
109
110
  bg: string;
@@ -113,6 +114,7 @@ interface SpectreGeneratedTokens {
113
114
  text: string;
114
115
  textDisabled: string;
115
116
  focusRing: string;
117
+ focusVisible: string;
116
118
  };
117
119
  cta: {
118
120
  bg: string;
@@ -450,17 +452,24 @@ interface SpectreGeneratedTokens {
450
452
  };
451
453
  space: {
452
454
  '0': string;
455
+ '1': string;
456
+ '2': string;
453
457
  '4': string;
458
+ '6': string;
454
459
  '8': string;
460
+ '10': string;
455
461
  '12': string;
462
+ '14': string;
456
463
  '16': string;
457
464
  '20': string;
458
465
  '24': string;
466
+ '28': string;
459
467
  '32': string;
460
468
  '40': string;
461
469
  '48': string;
462
470
  '56': string;
463
471
  '64': string;
472
+ '72': string;
464
473
  '80': string;
465
474
  '96': string;
466
475
  };
@@ -469,6 +478,10 @@ interface SpectreGeneratedTokens {
469
478
  sm: string;
470
479
  md: string;
471
480
  lg: string;
481
+ xl: string;
482
+ '2xl': string;
483
+ '3xl': string;
484
+ '4xl': string;
472
485
  pill: string;
473
486
  };
474
487
  shadows: {
@@ -476,6 +489,8 @@ interface SpectreGeneratedTokens {
476
489
  sm: string;
477
490
  md: string;
478
491
  lg: string;
492
+ xl: string;
493
+ '2xl': string;
479
494
  };
480
495
  breakpoints: {
481
496
  sm: string;
@@ -493,15 +508,19 @@ interface SpectreGeneratedTokens {
493
508
  modal: string;
494
509
  popover: string;
495
510
  tooltip: string;
511
+ toast: string;
496
512
  };
497
513
  transitions: {
498
514
  duration: {
499
515
  instant: string;
500
516
  fast: string;
501
517
  base: string;
518
+ relaxed: string;
502
519
  moderate: string;
503
520
  slow: string;
504
521
  slower: string;
522
+ long: string;
523
+ slowest: string;
505
524
  };
506
525
  easing: {
507
526
  linear: string;
@@ -509,6 +528,7 @@ interface SpectreGeneratedTokens {
509
528
  out: string;
510
529
  inOut: string;
511
530
  spring: string;
531
+ overshoot: string;
512
532
  };
513
533
  };
514
534
  animations: {
@@ -557,6 +577,7 @@ interface SpectreGeneratedTokens {
557
577
  disabled: string;
558
578
  hover: string;
559
579
  active: string;
580
+ loading: string;
560
581
  focus: string;
561
582
  overlay: string;
562
583
  tooltip: string;
@@ -564,6 +585,7 @@ interface SpectreGeneratedTokens {
564
585
  aspectRatios: {
565
586
  square: string;
566
587
  video: string;
588
+ classic: string;
567
589
  portrait: string;
568
590
  landscape: string;
569
591
  ultrawide: string;
@@ -589,9 +611,16 @@ interface SpectreGeneratedTokens {
589
611
  };
590
612
  border: {
591
613
  width: {
614
+ none: string;
592
615
  base: string;
593
616
  thick: string;
594
617
  };
618
+ style: {
619
+ none: string;
620
+ solid: string;
621
+ dashed: string;
622
+ dotted: string;
623
+ };
595
624
  };
596
625
  surface: {
597
626
  page: string;
@@ -655,46 +684,55 @@ interface SpectreGeneratedTokens {
655
684
  size: string;
656
685
  lineHeight: string;
657
686
  weight: number;
687
+ letterSpacing: string;
658
688
  };
659
689
  md: {
660
690
  size: string;
661
691
  lineHeight: string;
662
692
  weight: number;
693
+ letterSpacing: string;
663
694
  };
664
695
  lg: {
665
696
  size: string;
666
697
  lineHeight: string;
667
698
  weight: number;
699
+ letterSpacing: string;
668
700
  };
669
701
  xl: {
670
702
  size: string;
671
703
  lineHeight: string;
672
704
  weight: number;
705
+ letterSpacing: string;
673
706
  };
674
707
  '2xl': {
675
708
  size: string;
676
709
  lineHeight: string;
677
710
  weight: number;
711
+ letterSpacing: string;
678
712
  };
679
713
  '3xl': {
680
714
  size: string;
681
715
  lineHeight: string;
682
716
  weight: number;
717
+ letterSpacing: string;
683
718
  };
684
719
  '4xl': {
685
720
  size: string;
686
721
  lineHeight: string;
687
722
  weight: number;
723
+ letterSpacing: string;
688
724
  };
689
725
  '5xl': {
690
726
  size: string;
691
727
  lineHeight: string;
692
728
  weight: number;
729
+ letterSpacing: string;
693
730
  };
694
731
  '6xl': {
695
732
  size: string;
696
733
  lineHeight: string;
697
734
  weight: number;
735
+ letterSpacing: string;
698
736
  };
699
737
  };
700
738
  typography: {
@@ -714,46 +752,55 @@ interface SpectreGeneratedTokens {
714
752
  fontSize: string;
715
753
  lineHeight: string;
716
754
  fontWeight: number;
755
+ letterSpacing: string;
717
756
  };
718
757
  md: {
719
758
  fontSize: string;
720
759
  lineHeight: string;
721
760
  fontWeight: number;
761
+ letterSpacing: string;
722
762
  };
723
763
  lg: {
724
764
  fontSize: string;
725
765
  lineHeight: string;
726
766
  fontWeight: number;
767
+ letterSpacing: string;
727
768
  };
728
769
  xl: {
729
770
  fontSize: string;
730
771
  lineHeight: string;
731
772
  fontWeight: number;
773
+ letterSpacing: string;
732
774
  };
733
775
  '2xl': {
734
776
  fontSize: string;
735
777
  lineHeight: string;
736
778
  fontWeight: number;
779
+ letterSpacing: string;
737
780
  };
738
781
  '3xl': {
739
782
  fontSize: string;
740
783
  lineHeight: string;
741
784
  fontWeight: number;
785
+ letterSpacing: string;
742
786
  };
743
787
  '4xl': {
744
788
  fontSize: string;
745
789
  lineHeight: string;
746
790
  fontWeight: number;
791
+ letterSpacing: string;
747
792
  };
748
793
  '5xl': {
749
794
  fontSize: string;
750
795
  lineHeight: string;
751
796
  fontWeight: number;
797
+ letterSpacing: string;
752
798
  };
753
799
  '6xl': {
754
800
  fontSize: string;
755
801
  lineHeight: string;
756
802
  fontWeight: number;
803
+ letterSpacing: string;
757
804
  };
758
805
  };
759
806
  };