@phcdevworks/spectre-tokens 2.8.0 → 3.0.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.
- package/README.md +97 -58
- package/dist/index.cjs +317 -11
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +98 -2
- package/dist/index.d.cts +281 -3
- package/dist/index.d.ts +281 -3
- package/dist/index.js +317 -11
- package/dist/index.js.map +1 -1
- package/dist/tokens.dtcg.json +690 -6
- package/package.json +17 -9
- package/tokens/components.json +167 -0
- package/tokens/modes.json +408 -4
- package/tokens/primitives.json +45 -0
- package/tokens/semantic-roles.json +37 -0
package/dist/index.d.ts
CHANGED
|
@@ -62,6 +62,61 @@ interface SpectreGeneratedTokens {
|
|
|
62
62
|
starEmpty: string;
|
|
63
63
|
text: string;
|
|
64
64
|
};
|
|
65
|
+
nav: {
|
|
66
|
+
bg: string;
|
|
67
|
+
text: string;
|
|
68
|
+
link: string;
|
|
69
|
+
linkHover: string;
|
|
70
|
+
linkActive: string;
|
|
71
|
+
border: string;
|
|
72
|
+
};
|
|
73
|
+
modal: {
|
|
74
|
+
bg: string;
|
|
75
|
+
shadow: string;
|
|
76
|
+
border: string;
|
|
77
|
+
overlay: string;
|
|
78
|
+
};
|
|
79
|
+
toast: {
|
|
80
|
+
success: {
|
|
81
|
+
bg: string;
|
|
82
|
+
text: string;
|
|
83
|
+
border: string;
|
|
84
|
+
icon: string;
|
|
85
|
+
};
|
|
86
|
+
warning: {
|
|
87
|
+
bg: string;
|
|
88
|
+
text: string;
|
|
89
|
+
border: string;
|
|
90
|
+
icon: string;
|
|
91
|
+
};
|
|
92
|
+
danger: {
|
|
93
|
+
bg: string;
|
|
94
|
+
text: string;
|
|
95
|
+
border: string;
|
|
96
|
+
icon: string;
|
|
97
|
+
};
|
|
98
|
+
info: {
|
|
99
|
+
bg: string;
|
|
100
|
+
text: string;
|
|
101
|
+
border: string;
|
|
102
|
+
icon: string;
|
|
103
|
+
};
|
|
104
|
+
};
|
|
105
|
+
tooltip: {
|
|
106
|
+
bg: string;
|
|
107
|
+
text: string;
|
|
108
|
+
border: string;
|
|
109
|
+
};
|
|
110
|
+
dropdown: {
|
|
111
|
+
bg: string;
|
|
112
|
+
border: string;
|
|
113
|
+
item: {
|
|
114
|
+
default: string;
|
|
115
|
+
hover: string;
|
|
116
|
+
active: string;
|
|
117
|
+
text: string;
|
|
118
|
+
};
|
|
119
|
+
};
|
|
65
120
|
};
|
|
66
121
|
buttons: {
|
|
67
122
|
primary: {
|
|
@@ -178,8 +233,12 @@ interface SpectreGeneratedTokens {
|
|
|
178
233
|
card: string;
|
|
179
234
|
input: string;
|
|
180
235
|
overlay: string;
|
|
181
|
-
|
|
236
|
+
subtle: string;
|
|
182
237
|
hero: string;
|
|
238
|
+
hover: string;
|
|
239
|
+
selected: string;
|
|
240
|
+
active: string;
|
|
241
|
+
divider: string;
|
|
183
242
|
};
|
|
184
243
|
text: {
|
|
185
244
|
onPage: {
|
|
@@ -257,6 +316,61 @@ interface SpectreGeneratedTokens {
|
|
|
257
316
|
starEmpty: string;
|
|
258
317
|
text: string;
|
|
259
318
|
};
|
|
319
|
+
nav: {
|
|
320
|
+
bg: string;
|
|
321
|
+
text: string;
|
|
322
|
+
link: string;
|
|
323
|
+
linkHover: string;
|
|
324
|
+
linkActive: string;
|
|
325
|
+
border: string;
|
|
326
|
+
};
|
|
327
|
+
modal: {
|
|
328
|
+
bg: string;
|
|
329
|
+
shadow: string;
|
|
330
|
+
border: string;
|
|
331
|
+
overlay: string;
|
|
332
|
+
};
|
|
333
|
+
toast: {
|
|
334
|
+
success: {
|
|
335
|
+
bg: string;
|
|
336
|
+
text: string;
|
|
337
|
+
border: string;
|
|
338
|
+
icon: string;
|
|
339
|
+
};
|
|
340
|
+
warning: {
|
|
341
|
+
bg: string;
|
|
342
|
+
text: string;
|
|
343
|
+
border: string;
|
|
344
|
+
icon: string;
|
|
345
|
+
};
|
|
346
|
+
danger: {
|
|
347
|
+
bg: string;
|
|
348
|
+
text: string;
|
|
349
|
+
border: string;
|
|
350
|
+
icon: string;
|
|
351
|
+
};
|
|
352
|
+
info: {
|
|
353
|
+
bg: string;
|
|
354
|
+
text: string;
|
|
355
|
+
border: string;
|
|
356
|
+
icon: string;
|
|
357
|
+
};
|
|
358
|
+
};
|
|
359
|
+
tooltip: {
|
|
360
|
+
bg: string;
|
|
361
|
+
text: string;
|
|
362
|
+
border: string;
|
|
363
|
+
};
|
|
364
|
+
dropdown: {
|
|
365
|
+
bg: string;
|
|
366
|
+
border: string;
|
|
367
|
+
item: {
|
|
368
|
+
default: string;
|
|
369
|
+
hover: string;
|
|
370
|
+
active: string;
|
|
371
|
+
text: string;
|
|
372
|
+
};
|
|
373
|
+
};
|
|
260
374
|
};
|
|
261
375
|
};
|
|
262
376
|
dark: {
|
|
@@ -265,8 +379,12 @@ interface SpectreGeneratedTokens {
|
|
|
265
379
|
card: string;
|
|
266
380
|
input: string;
|
|
267
381
|
overlay: string;
|
|
268
|
-
|
|
382
|
+
subtle: string;
|
|
269
383
|
hero: string;
|
|
384
|
+
hover: string;
|
|
385
|
+
selected: string;
|
|
386
|
+
active: string;
|
|
387
|
+
divider: string;
|
|
270
388
|
};
|
|
271
389
|
text: {
|
|
272
390
|
onPage: {
|
|
@@ -347,6 +465,61 @@ interface SpectreGeneratedTokens {
|
|
|
347
465
|
starEmpty: string;
|
|
348
466
|
text: string;
|
|
349
467
|
};
|
|
468
|
+
nav: {
|
|
469
|
+
bg: string;
|
|
470
|
+
text: string;
|
|
471
|
+
link: string;
|
|
472
|
+
linkHover: string;
|
|
473
|
+
linkActive: string;
|
|
474
|
+
border: string;
|
|
475
|
+
};
|
|
476
|
+
modal: {
|
|
477
|
+
bg: string;
|
|
478
|
+
shadow: string;
|
|
479
|
+
border: string;
|
|
480
|
+
overlay: string;
|
|
481
|
+
};
|
|
482
|
+
toast: {
|
|
483
|
+
success: {
|
|
484
|
+
bg: string;
|
|
485
|
+
text: string;
|
|
486
|
+
border: string;
|
|
487
|
+
icon: string;
|
|
488
|
+
};
|
|
489
|
+
warning: {
|
|
490
|
+
bg: string;
|
|
491
|
+
text: string;
|
|
492
|
+
border: string;
|
|
493
|
+
icon: string;
|
|
494
|
+
};
|
|
495
|
+
danger: {
|
|
496
|
+
bg: string;
|
|
497
|
+
text: string;
|
|
498
|
+
border: string;
|
|
499
|
+
icon: string;
|
|
500
|
+
};
|
|
501
|
+
info: {
|
|
502
|
+
bg: string;
|
|
503
|
+
text: string;
|
|
504
|
+
border: string;
|
|
505
|
+
icon: string;
|
|
506
|
+
};
|
|
507
|
+
};
|
|
508
|
+
tooltip: {
|
|
509
|
+
bg: string;
|
|
510
|
+
text: string;
|
|
511
|
+
border: string;
|
|
512
|
+
};
|
|
513
|
+
dropdown: {
|
|
514
|
+
bg: string;
|
|
515
|
+
border: string;
|
|
516
|
+
item: {
|
|
517
|
+
default: string;
|
|
518
|
+
hover: string;
|
|
519
|
+
active: string;
|
|
520
|
+
text: string;
|
|
521
|
+
};
|
|
522
|
+
};
|
|
350
523
|
};
|
|
351
524
|
};
|
|
352
525
|
};
|
|
@@ -512,6 +685,7 @@ interface SpectreGeneratedTokens {
|
|
|
512
685
|
};
|
|
513
686
|
transitions: {
|
|
514
687
|
duration: {
|
|
688
|
+
reduced: string;
|
|
515
689
|
instant: string;
|
|
516
690
|
fast: string;
|
|
517
691
|
base: string;
|
|
@@ -572,6 +746,48 @@ interface SpectreGeneratedTokens {
|
|
|
572
746
|
easing: string;
|
|
573
747
|
keyframes: string;
|
|
574
748
|
};
|
|
749
|
+
reducedMotion: {
|
|
750
|
+
fadeIn: {
|
|
751
|
+
duration: string;
|
|
752
|
+
easing: string;
|
|
753
|
+
keyframes: string;
|
|
754
|
+
};
|
|
755
|
+
fadeOut: {
|
|
756
|
+
duration: string;
|
|
757
|
+
easing: string;
|
|
758
|
+
keyframes: string;
|
|
759
|
+
};
|
|
760
|
+
slideUp: {
|
|
761
|
+
duration: string;
|
|
762
|
+
easing: string;
|
|
763
|
+
keyframes: string;
|
|
764
|
+
};
|
|
765
|
+
slideDown: {
|
|
766
|
+
duration: string;
|
|
767
|
+
easing: string;
|
|
768
|
+
keyframes: string;
|
|
769
|
+
};
|
|
770
|
+
scaleIn: {
|
|
771
|
+
duration: string;
|
|
772
|
+
easing: string;
|
|
773
|
+
keyframes: string;
|
|
774
|
+
};
|
|
775
|
+
bounce: {
|
|
776
|
+
duration: string;
|
|
777
|
+
easing: string;
|
|
778
|
+
keyframes: string;
|
|
779
|
+
};
|
|
780
|
+
shake: {
|
|
781
|
+
duration: string;
|
|
782
|
+
easing: string;
|
|
783
|
+
keyframes: string;
|
|
784
|
+
};
|
|
785
|
+
pulse: {
|
|
786
|
+
duration: string;
|
|
787
|
+
easing: string;
|
|
788
|
+
keyframes: string;
|
|
789
|
+
};
|
|
790
|
+
};
|
|
575
791
|
};
|
|
576
792
|
opacity: {
|
|
577
793
|
disabled: string;
|
|
@@ -606,6 +822,8 @@ interface SpectreGeneratedTokens {
|
|
|
606
822
|
offset: string;
|
|
607
823
|
style: string;
|
|
608
824
|
};
|
|
825
|
+
reducedMotion: string;
|
|
826
|
+
forcedColors: string;
|
|
609
827
|
minTouchTarget: string;
|
|
610
828
|
minTextSize: string;
|
|
611
829
|
};
|
|
@@ -627,6 +845,16 @@ interface SpectreGeneratedTokens {
|
|
|
627
845
|
card: string;
|
|
628
846
|
input: string;
|
|
629
847
|
overlay: string;
|
|
848
|
+
hover: string;
|
|
849
|
+
selected: string;
|
|
850
|
+
active: string;
|
|
851
|
+
divider: string;
|
|
852
|
+
};
|
|
853
|
+
link: {
|
|
854
|
+
default: string;
|
|
855
|
+
hover: string;
|
|
856
|
+
active: string;
|
|
857
|
+
visited: string;
|
|
630
858
|
};
|
|
631
859
|
text: {
|
|
632
860
|
onPage: {
|
|
@@ -906,6 +1134,47 @@ interface ComponentRatingTokens<Value = string> {
|
|
|
906
1134
|
starEmpty: Value;
|
|
907
1135
|
text: Value;
|
|
908
1136
|
}
|
|
1137
|
+
interface ComponentNavTokens<Value = string> {
|
|
1138
|
+
bg: Value;
|
|
1139
|
+
text: Value;
|
|
1140
|
+
link: Value;
|
|
1141
|
+
linkHover: Value;
|
|
1142
|
+
linkActive: Value;
|
|
1143
|
+
border: Value;
|
|
1144
|
+
}
|
|
1145
|
+
interface ComponentModalTokens<Value = string> {
|
|
1146
|
+
bg: Value;
|
|
1147
|
+
shadow: Value;
|
|
1148
|
+
border: Value;
|
|
1149
|
+
overlay: Value;
|
|
1150
|
+
}
|
|
1151
|
+
interface ComponentToastVariantTokens<Value = string> {
|
|
1152
|
+
bg: Value;
|
|
1153
|
+
text: Value;
|
|
1154
|
+
border: Value;
|
|
1155
|
+
icon: Value;
|
|
1156
|
+
}
|
|
1157
|
+
interface ComponentToastTokens<Value = string> {
|
|
1158
|
+
success: ComponentToastVariantTokens<Value>;
|
|
1159
|
+
warning: ComponentToastVariantTokens<Value>;
|
|
1160
|
+
danger: ComponentToastVariantTokens<Value>;
|
|
1161
|
+
info: ComponentToastVariantTokens<Value>;
|
|
1162
|
+
}
|
|
1163
|
+
interface ComponentTooltipTokens<Value = string> {
|
|
1164
|
+
bg: Value;
|
|
1165
|
+
text: Value;
|
|
1166
|
+
border: Value;
|
|
1167
|
+
}
|
|
1168
|
+
interface ComponentDropdownTokens<Value = string> {
|
|
1169
|
+
bg: Value;
|
|
1170
|
+
border: Value;
|
|
1171
|
+
item: {
|
|
1172
|
+
default: Value;
|
|
1173
|
+
hover: Value;
|
|
1174
|
+
active: Value;
|
|
1175
|
+
text: Value;
|
|
1176
|
+
};
|
|
1177
|
+
}
|
|
909
1178
|
interface ComponentTokens<Value = string> {
|
|
910
1179
|
card: {
|
|
911
1180
|
text: Value;
|
|
@@ -924,6 +1193,11 @@ interface ComponentTokens<Value = string> {
|
|
|
924
1193
|
testimonial: ComponentTestimonialTokens<Value>;
|
|
925
1194
|
pricingCard: ComponentPricingCardTokens<Value>;
|
|
926
1195
|
rating: ComponentRatingTokens<Value>;
|
|
1196
|
+
nav: ComponentNavTokens<Value>;
|
|
1197
|
+
modal: ComponentModalTokens<Value>;
|
|
1198
|
+
toast: ComponentToastTokens<Value>;
|
|
1199
|
+
tooltip: ComponentTooltipTokens<Value>;
|
|
1200
|
+
dropdown: ComponentDropdownTokens<Value>;
|
|
927
1201
|
[key: string]: unknown;
|
|
928
1202
|
}
|
|
929
1203
|
type SpectreModeName = 'default' | 'dark';
|
|
@@ -934,8 +1208,12 @@ interface SpectreModeTokens {
|
|
|
934
1208
|
card: SemanticTokenValue;
|
|
935
1209
|
input: SemanticTokenValue;
|
|
936
1210
|
overlay: SemanticTokenValue;
|
|
937
|
-
|
|
1211
|
+
subtle: SemanticTokenValue;
|
|
938
1212
|
hero: SemanticTokenValue;
|
|
1213
|
+
hover: SemanticTokenValue;
|
|
1214
|
+
selected: SemanticTokenValue;
|
|
1215
|
+
active: SemanticTokenValue;
|
|
1216
|
+
divider: SemanticTokenValue;
|
|
939
1217
|
};
|
|
940
1218
|
text: {
|
|
941
1219
|
onPage: {
|