@phcdevworks/spectre-tokens 4.8.0 → 4.9.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 (12) hide show
  1. package/README.md +4 -4
  2. package/dist/index.cjs +303 -23
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +160 -0
  5. package/dist/index.d.cts +313 -1
  6. package/dist/index.d.ts +313 -1
  7. package/dist/index.js +303 -23
  8. package/dist/index.js.map +1 -1
  9. package/dist/tokens.dtcg.json +957 -17
  10. package/package.json +10 -10
  11. package/tokens/components.json +310 -0
  12. package/tokens/modes.json +604 -4
package/dist/index.d.ts CHANGED
@@ -8,6 +8,16 @@ interface SpectreGeneratedTokens {
8
8
  md: string;
9
9
  lg: string;
10
10
  };
11
+ accent: {
12
+ neutral: string;
13
+ brand: string;
14
+ info: string;
15
+ success: string;
16
+ warning: string;
17
+ danger: string;
18
+ cta: string;
19
+ thickness: string;
20
+ };
11
21
  };
12
22
  input: {
13
23
  text: string;
@@ -37,6 +47,16 @@ interface SpectreGeneratedTokens {
37
47
  inverseBgHover: string;
38
48
  inverseText: string;
39
49
  inverseBorder: string;
50
+ accent: {
51
+ neutral: string;
52
+ brand: string;
53
+ info: string;
54
+ success: string;
55
+ warning: string;
56
+ danger: string;
57
+ cta: string;
58
+ thickness: string;
59
+ };
40
60
  };
41
61
  iconBox: {
42
62
  bg: string;
@@ -54,6 +74,16 @@ interface SpectreGeneratedTokens {
54
74
  authorName: string;
55
75
  authorTitle: string;
56
76
  quoteMark: string;
77
+ accent: {
78
+ neutral: string;
79
+ brand: string;
80
+ info: string;
81
+ success: string;
82
+ warning: string;
83
+ danger: string;
84
+ cta: string;
85
+ thickness: string;
86
+ };
57
87
  };
58
88
  pricingCard: {
59
89
  bg: string;
@@ -65,6 +95,16 @@ interface SpectreGeneratedTokens {
65
95
  featuredBadgeText: string;
66
96
  price: string;
67
97
  priceDescription: string;
98
+ accent: {
99
+ neutral: string;
100
+ brand: string;
101
+ info: string;
102
+ success: string;
103
+ warning: string;
104
+ danger: string;
105
+ cta: string;
106
+ thickness: string;
107
+ };
68
108
  };
69
109
  rating: {
70
110
  starFilled: string;
@@ -78,6 +118,16 @@ interface SpectreGeneratedTokens {
78
118
  linkHover: string;
79
119
  linkActive: string;
80
120
  border: string;
121
+ accent: {
122
+ neutral: string;
123
+ brand: string;
124
+ info: string;
125
+ success: string;
126
+ warning: string;
127
+ danger: string;
128
+ cta: string;
129
+ thickness: string;
130
+ };
81
131
  };
82
132
  footer: {
83
133
  bg: string;
@@ -89,12 +139,32 @@ interface SpectreGeneratedTokens {
89
139
  border: string;
90
140
  divider: string;
91
141
  chipBg: string;
142
+ accent: {
143
+ neutral: string;
144
+ brand: string;
145
+ info: string;
146
+ success: string;
147
+ warning: string;
148
+ danger: string;
149
+ cta: string;
150
+ thickness: string;
151
+ };
92
152
  };
93
153
  modal: {
94
154
  bg: string;
95
155
  shadow: string;
96
156
  border: string;
97
157
  overlay: string;
158
+ accent: {
159
+ neutral: string;
160
+ brand: string;
161
+ info: string;
162
+ success: string;
163
+ warning: string;
164
+ danger: string;
165
+ cta: string;
166
+ thickness: string;
167
+ };
98
168
  };
99
169
  toast: {
100
170
  success: {
@@ -121,11 +191,31 @@ interface SpectreGeneratedTokens {
121
191
  border: string;
122
192
  icon: string;
123
193
  };
194
+ accent: {
195
+ neutral: string;
196
+ brand: string;
197
+ info: string;
198
+ success: string;
199
+ warning: string;
200
+ danger: string;
201
+ cta: string;
202
+ thickness: string;
203
+ };
124
204
  };
125
205
  tooltip: {
126
206
  bg: string;
127
207
  text: string;
128
208
  border: string;
209
+ accent: {
210
+ neutral: string;
211
+ brand: string;
212
+ info: string;
213
+ success: string;
214
+ warning: string;
215
+ danger: string;
216
+ cta: string;
217
+ thickness: string;
218
+ };
129
219
  };
130
220
  dropdown: {
131
221
  bg: string;
@@ -136,6 +226,16 @@ interface SpectreGeneratedTokens {
136
226
  active: string;
137
227
  text: string;
138
228
  };
229
+ accent: {
230
+ neutral: string;
231
+ brand: string;
232
+ info: string;
233
+ success: string;
234
+ warning: string;
235
+ danger: string;
236
+ cta: string;
237
+ thickness: string;
238
+ };
139
239
  };
140
240
  checkbox: {
141
241
  bg: string;
@@ -345,6 +445,15 @@ interface SpectreGeneratedTokens {
345
445
  card: {
346
446
  text: string;
347
447
  textMuted: string;
448
+ accent: {
449
+ neutral: string;
450
+ brand: string;
451
+ info: string;
452
+ success: string;
453
+ warning: string;
454
+ danger: string;
455
+ cta: string;
456
+ };
348
457
  };
349
458
  input: {
350
459
  text: string;
@@ -367,6 +476,15 @@ interface SpectreGeneratedTokens {
367
476
  warningText: string;
368
477
  dangerBg: string;
369
478
  dangerText: string;
479
+ accent: {
480
+ neutral: string;
481
+ brand: string;
482
+ info: string;
483
+ success: string;
484
+ warning: string;
485
+ danger: string;
486
+ cta: string;
487
+ };
370
488
  };
371
489
  iconBox: {
372
490
  bg: string;
@@ -384,6 +502,15 @@ interface SpectreGeneratedTokens {
384
502
  authorName: string;
385
503
  authorTitle: string;
386
504
  quoteMark: string;
505
+ accent: {
506
+ neutral: string;
507
+ brand: string;
508
+ info: string;
509
+ success: string;
510
+ warning: string;
511
+ danger: string;
512
+ cta: string;
513
+ };
387
514
  };
388
515
  pricingCard: {
389
516
  bg: string;
@@ -395,6 +522,15 @@ interface SpectreGeneratedTokens {
395
522
  featuredBadgeText: string;
396
523
  price: string;
397
524
  priceDescription: string;
525
+ accent: {
526
+ neutral: string;
527
+ brand: string;
528
+ info: string;
529
+ success: string;
530
+ warning: string;
531
+ danger: string;
532
+ cta: string;
533
+ };
398
534
  };
399
535
  rating: {
400
536
  starFilled: string;
@@ -408,6 +544,15 @@ interface SpectreGeneratedTokens {
408
544
  linkHover: string;
409
545
  linkActive: string;
410
546
  border: string;
547
+ accent: {
548
+ neutral: string;
549
+ brand: string;
550
+ info: string;
551
+ success: string;
552
+ warning: string;
553
+ danger: string;
554
+ cta: string;
555
+ };
411
556
  };
412
557
  footer: {
413
558
  bg: string;
@@ -419,12 +564,30 @@ interface SpectreGeneratedTokens {
419
564
  border: string;
420
565
  divider: string;
421
566
  chipBg: string;
567
+ accent: {
568
+ neutral: string;
569
+ brand: string;
570
+ info: string;
571
+ success: string;
572
+ warning: string;
573
+ danger: string;
574
+ cta: string;
575
+ };
422
576
  };
423
577
  modal: {
424
578
  bg: string;
425
579
  shadow: string;
426
580
  border: string;
427
581
  overlay: string;
582
+ accent: {
583
+ neutral: string;
584
+ brand: string;
585
+ info: string;
586
+ success: string;
587
+ warning: string;
588
+ danger: string;
589
+ cta: string;
590
+ };
428
591
  };
429
592
  toast: {
430
593
  success: {
@@ -451,11 +614,29 @@ interface SpectreGeneratedTokens {
451
614
  border: string;
452
615
  icon: string;
453
616
  };
617
+ accent: {
618
+ neutral: string;
619
+ brand: string;
620
+ info: string;
621
+ success: string;
622
+ warning: string;
623
+ danger: string;
624
+ cta: string;
625
+ };
454
626
  };
455
627
  tooltip: {
456
628
  bg: string;
457
629
  text: string;
458
630
  border: string;
631
+ accent: {
632
+ neutral: string;
633
+ brand: string;
634
+ info: string;
635
+ success: string;
636
+ warning: string;
637
+ danger: string;
638
+ cta: string;
639
+ };
459
640
  };
460
641
  dropdown: {
461
642
  bg: string;
@@ -466,6 +647,15 @@ interface SpectreGeneratedTokens {
466
647
  active: string;
467
648
  text: string;
468
649
  };
650
+ accent: {
651
+ neutral: string;
652
+ brand: string;
653
+ info: string;
654
+ success: string;
655
+ warning: string;
656
+ danger: string;
657
+ cta: string;
658
+ };
469
659
  };
470
660
  checkbox: {
471
661
  bg: string;
@@ -547,6 +737,15 @@ interface SpectreGeneratedTokens {
547
737
  card: {
548
738
  text: string;
549
739
  textMuted: string;
740
+ accent: {
741
+ neutral: string;
742
+ brand: string;
743
+ info: string;
744
+ success: string;
745
+ warning: string;
746
+ danger: string;
747
+ cta: string;
748
+ };
550
749
  };
551
750
  input: {
552
751
  text: string;
@@ -572,6 +771,15 @@ interface SpectreGeneratedTokens {
572
771
  dangerBg: string;
573
772
  dangerBgHover: string;
574
773
  dangerText: string;
774
+ accent: {
775
+ neutral: string;
776
+ brand: string;
777
+ info: string;
778
+ success: string;
779
+ warning: string;
780
+ danger: string;
781
+ cta: string;
782
+ };
575
783
  };
576
784
  iconBox: {
577
785
  bg: string;
@@ -589,6 +797,15 @@ interface SpectreGeneratedTokens {
589
797
  authorName: string;
590
798
  authorTitle: string;
591
799
  quoteMark: string;
800
+ accent: {
801
+ neutral: string;
802
+ brand: string;
803
+ info: string;
804
+ success: string;
805
+ warning: string;
806
+ danger: string;
807
+ cta: string;
808
+ };
592
809
  };
593
810
  pricingCard: {
594
811
  bg: string;
@@ -600,6 +817,15 @@ interface SpectreGeneratedTokens {
600
817
  featuredBadgeText: string;
601
818
  price: string;
602
819
  priceDescription: string;
820
+ accent: {
821
+ neutral: string;
822
+ brand: string;
823
+ info: string;
824
+ success: string;
825
+ warning: string;
826
+ danger: string;
827
+ cta: string;
828
+ };
603
829
  };
604
830
  rating: {
605
831
  starFilled: string;
@@ -613,6 +839,15 @@ interface SpectreGeneratedTokens {
613
839
  linkHover: string;
614
840
  linkActive: string;
615
841
  border: string;
842
+ accent: {
843
+ neutral: string;
844
+ brand: string;
845
+ info: string;
846
+ success: string;
847
+ warning: string;
848
+ danger: string;
849
+ cta: string;
850
+ };
616
851
  };
617
852
  footer: {
618
853
  bg: string;
@@ -624,12 +859,30 @@ interface SpectreGeneratedTokens {
624
859
  border: string;
625
860
  divider: string;
626
861
  chipBg: string;
862
+ accent: {
863
+ neutral: string;
864
+ brand: string;
865
+ info: string;
866
+ success: string;
867
+ warning: string;
868
+ danger: string;
869
+ cta: string;
870
+ };
627
871
  };
628
872
  modal: {
629
873
  bg: string;
630
874
  shadow: string;
631
875
  border: string;
632
876
  overlay: string;
877
+ accent: {
878
+ neutral: string;
879
+ brand: string;
880
+ info: string;
881
+ success: string;
882
+ warning: string;
883
+ danger: string;
884
+ cta: string;
885
+ };
633
886
  };
634
887
  toast: {
635
888
  success: {
@@ -656,11 +909,29 @@ interface SpectreGeneratedTokens {
656
909
  border: string;
657
910
  icon: string;
658
911
  };
912
+ accent: {
913
+ neutral: string;
914
+ brand: string;
915
+ info: string;
916
+ success: string;
917
+ warning: string;
918
+ danger: string;
919
+ cta: string;
920
+ };
659
921
  };
660
922
  tooltip: {
661
923
  bg: string;
662
924
  text: string;
663
925
  border: string;
926
+ accent: {
927
+ neutral: string;
928
+ brand: string;
929
+ info: string;
930
+ success: string;
931
+ warning: string;
932
+ danger: string;
933
+ cta: string;
934
+ };
664
935
  };
665
936
  dropdown: {
666
937
  bg: string;
@@ -671,6 +942,15 @@ interface SpectreGeneratedTokens {
671
942
  active: string;
672
943
  text: string;
673
944
  };
945
+ accent: {
946
+ neutral: string;
947
+ brand: string;
948
+ info: string;
949
+ success: string;
950
+ warning: string;
951
+ danger: string;
952
+ cta: string;
953
+ };
674
954
  };
675
955
  checkbox: {
676
956
  bg: string;
@@ -1803,6 +2083,16 @@ interface FormStateTokens {
1803
2083
  placeholder?: string;
1804
2084
  ring?: string;
1805
2085
  }
2086
+ interface ComponentAccentTokens<Value = string> {
2087
+ neutral: Value;
2088
+ brand: Value;
2089
+ info: Value;
2090
+ success: Value;
2091
+ warning: Value;
2092
+ danger: Value;
2093
+ cta: Value;
2094
+ thickness: Value;
2095
+ }
1806
2096
  interface ComponentBadgeTokens<Value = string> {
1807
2097
  neutralBg: Value;
1808
2098
  neutralBgHover?: Value;
@@ -1819,6 +2109,7 @@ interface ComponentBadgeTokens<Value = string> {
1819
2109
  dangerBg: Value;
1820
2110
  dangerBgHover?: Value;
1821
2111
  dangerText: Value;
2112
+ accent: ComponentAccentTokens<Value>;
1822
2113
  }
1823
2114
  interface ComponentIconBoxTokens<Value = string> {
1824
2115
  bg: Value;
@@ -1836,6 +2127,7 @@ interface ComponentTestimonialTokens<Value = string> {
1836
2127
  authorName: Value;
1837
2128
  authorTitle: Value;
1838
2129
  quoteMark: Value;
2130
+ accent: ComponentAccentTokens<Value>;
1839
2131
  }
1840
2132
  interface ComponentPricingCardTokens<Value = string> {
1841
2133
  bg: Value;
@@ -1847,6 +2139,7 @@ interface ComponentPricingCardTokens<Value = string> {
1847
2139
  featuredBadgeText: Value;
1848
2140
  price: Value;
1849
2141
  priceDescription: Value;
2142
+ accent: ComponentAccentTokens<Value>;
1850
2143
  }
1851
2144
  interface ComponentRatingTokens<Value = string> {
1852
2145
  starFilled: Value;
@@ -1860,12 +2153,26 @@ interface ComponentNavTokens<Value = string> {
1860
2153
  linkHover: Value;
1861
2154
  linkActive: Value;
1862
2155
  border: Value;
2156
+ accent: ComponentAccentTokens<Value>;
2157
+ }
2158
+ interface ComponentFooterTokens<Value = string> {
2159
+ bg: Value;
2160
+ text: Value;
2161
+ heading: Value;
2162
+ muted: Value;
2163
+ link: Value;
2164
+ linkHover: Value;
2165
+ border: Value;
2166
+ divider: Value;
2167
+ chipBg: Value;
2168
+ accent: ComponentAccentTokens<Value>;
1863
2169
  }
1864
2170
  interface ComponentModalTokens<Value = string> {
1865
2171
  bg: Value;
1866
2172
  shadow: Value;
1867
2173
  border: Value;
1868
2174
  overlay: Value;
2175
+ accent: ComponentAccentTokens<Value>;
1869
2176
  }
1870
2177
  interface ComponentToastVariantTokens<Value = string> {
1871
2178
  bg: Value;
@@ -1878,11 +2185,13 @@ interface ComponentToastTokens<Value = string> {
1878
2185
  warning: ComponentToastVariantTokens<Value>;
1879
2186
  danger: ComponentToastVariantTokens<Value>;
1880
2187
  info: ComponentToastVariantTokens<Value>;
2188
+ accent: ComponentAccentTokens<Value>;
1881
2189
  }
1882
2190
  interface ComponentTooltipTokens<Value = string> {
1883
2191
  bg: Value;
1884
2192
  text: Value;
1885
2193
  border: Value;
2194
+ accent: ComponentAccentTokens<Value>;
1886
2195
  }
1887
2196
  interface ComponentDropdownTokens<Value = string> {
1888
2197
  bg: Value;
@@ -1893,6 +2202,7 @@ interface ComponentDropdownTokens<Value = string> {
1893
2202
  active: Value;
1894
2203
  text: Value;
1895
2204
  };
2205
+ accent: ComponentAccentTokens<Value>;
1896
2206
  }
1897
2207
  interface ComponentSelectionControlTokens<Value = string> {
1898
2208
  bg: Value;
@@ -1943,6 +2253,7 @@ interface ComponentTokens<Value = string> {
1943
2253
  text: Value;
1944
2254
  textMuted: Value;
1945
2255
  padding: TokenScale;
2256
+ accent: ComponentAccentTokens<Value>;
1946
2257
  };
1947
2258
  input: {
1948
2259
  text: Value;
@@ -1958,6 +2269,7 @@ interface ComponentTokens<Value = string> {
1958
2269
  pricingCard: ComponentPricingCardTokens<Value>;
1959
2270
  rating: ComponentRatingTokens<Value>;
1960
2271
  nav: ComponentNavTokens<Value>;
2272
+ footer: ComponentFooterTokens<Value>;
1961
2273
  modal: ComponentModalTokens<Value>;
1962
2274
  toast: ComponentToastTokens<Value>;
1963
2275
  tooltip: ComponentTooltipTokens<Value>;
@@ -2032,4 +2344,4 @@ declare const generateCssVariables: (tokens: SpectreTokens, options?: CssVariabl
2032
2344
 
2033
2345
  declare const tokens: SpectreTokens;
2034
2346
 
2035
- export { type AccessibilityTokens, type AnimationEntry, type ButtonStateTokens, type ColorScale, type ComponentBadgeTokens, type ComponentIconBoxTokens, type ComponentPricingCardTokens, type ComponentRatingTokens, type ComponentTestimonialTokens, type ComponentTokens, type FormStateTokens, type LayoutTokens, type SpectreModeName, type SpectreModeTokens, type SpectreTokens, type TokenScale, type Tokens, type TransitionTokens, type TypographyTokens, tokens as default, generateCssVariables, tokens };
2347
+ export { type AccessibilityTokens, type AnimationEntry, type ButtonStateTokens, type ColorScale, type ComponentAccentTokens, type ComponentBadgeTokens, type ComponentFooterTokens, type ComponentIconBoxTokens, type ComponentPricingCardTokens, type ComponentRatingTokens, type ComponentTestimonialTokens, type ComponentTokens, type FormStateTokens, type LayoutTokens, type SpectreModeName, type SpectreModeTokens, type SpectreTokens, type TokenScale, type Tokens, type TransitionTokens, type TypographyTokens, tokens as default, generateCssVariables, tokens };