@phcdevworks/spectre-tokens 2.1.1 → 2.2.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 (13) hide show
  1. package/README.md +16 -6
  2. package/dist/index.cjs +269 -1038
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +33 -15
  5. package/dist/index.d.cts +270 -1042
  6. package/dist/index.d.ts +270 -1042
  7. package/dist/index.js +269 -1038
  8. package/dist/index.js.map +1 -1
  9. package/package.json +18 -12
  10. package/tokens/components.json +89 -15
  11. package/tokens/modes.json +109 -31
  12. package/tokens/primitives.json +0 -4
  13. package/tokens/typography.json +22 -2
package/dist/index.d.cts CHANGED
@@ -1,1122 +1,349 @@
1
1
  interface SpectreGeneratedTokens {
2
2
  component: {
3
3
  card: {
4
- text: {
5
- value: string;
6
- };
7
- textMuted: {
8
- value: string;
9
- };
4
+ text: string;
5
+ textMuted: string;
10
6
  };
11
7
  input: {
12
- text: {
13
- value: string;
14
- };
15
- placeholder: {
16
- value: string;
17
- };
8
+ text: string;
9
+ placeholder: string;
18
10
  };
19
11
  button: {
20
- textDefault: {
21
- value: string;
22
- };
23
- textOnPrimary: {
24
- value: string;
25
- };
12
+ textDefault: string;
13
+ textOnPrimary: string;
26
14
  };
27
15
  badge: {
28
- neutralBg: {
29
- value: string;
30
- metadata: {
31
- pair: string;
32
- };
33
- };
34
- neutralBgHover: {
35
- value: string;
36
- metadata: {
37
- pair: string;
38
- };
39
- };
40
- neutralText: {
41
- value: string;
42
- };
43
- infoBg: {
44
- value: string;
45
- metadata: {
46
- pair: string;
47
- };
48
- };
49
- infoBgHover: {
50
- value: string;
51
- metadata: {
52
- pair: string;
53
- };
54
- };
55
- infoText: {
56
- value: string;
57
- };
58
- successBg: {
59
- value: string;
60
- metadata: {
61
- pair: string;
62
- };
63
- };
64
- successBgHover: {
65
- value: string;
66
- metadata: {
67
- pair: string;
68
- };
69
- };
70
- successText: {
71
- value: string;
72
- };
73
- warningBg: {
74
- value: string;
75
- metadata: {
76
- pair: string;
77
- };
78
- };
79
- warningBgHover: {
80
- value: string;
81
- metadata: {
82
- pair: string;
83
- };
84
- };
85
- warningText: {
86
- value: string;
87
- };
88
- dangerBg: {
89
- value: string;
90
- metadata: {
91
- pair: string;
92
- };
93
- };
94
- dangerBgHover: {
95
- value: string;
96
- metadata: {
97
- pair: string;
98
- };
99
- };
100
- dangerText: {
101
- value: string;
102
- };
16
+ neutralBg: string;
17
+ neutralBgHover: string;
18
+ neutralText: string;
19
+ infoBg: string;
20
+ infoBgHover: string;
21
+ infoText: string;
22
+ successBg: string;
23
+ successBgHover: string;
24
+ successText: string;
25
+ warningBg: string;
26
+ warningBgHover: string;
27
+ warningText: string;
28
+ dangerBg: string;
29
+ dangerBgHover: string;
30
+ dangerText: string;
103
31
  };
104
32
  iconBox: {
105
- bg: {
106
- value: string;
107
- };
108
- border: {
109
- value: string;
110
- };
111
- iconDefault: {
112
- value: string;
113
- };
114
- iconSuccess: {
115
- value: string;
116
- };
117
- iconWarning: {
118
- value: string;
119
- };
120
- iconDanger: {
121
- value: string;
122
- };
33
+ bg: string;
34
+ border: string;
35
+ iconDefault: string;
36
+ iconSuccess: string;
37
+ iconWarning: string;
38
+ iconDanger: string;
123
39
  };
124
40
  testimonial: {
125
- bg: {
126
- value: string;
127
- };
128
- border: {
129
- value: string;
130
- };
131
- text: {
132
- value: string;
133
- };
134
- authorName: {
135
- value: string;
136
- };
137
- authorTitle: {
138
- value: string;
139
- };
140
- quoteMark: {
141
- value: string;
142
- };
41
+ bg: string;
42
+ bgHover: string;
43
+ border: string;
44
+ text: string;
45
+ authorName: string;
46
+ authorTitle: string;
47
+ quoteMark: string;
143
48
  };
144
49
  pricingCard: {
145
- bg: {
146
- value: string;
147
- metadata: {};
148
- };
149
- border: {
150
- value: string;
151
- metadata: {};
152
- };
153
- featuredBg: {
154
- value: string;
155
- metadata: {
156
- pair: string;
157
- };
158
- };
159
- featuredText: {
160
- value: string;
161
- metadata: {};
162
- };
163
- featuredBadgeBg: {
164
- value: string;
165
- metadata: {
166
- pair: string;
167
- };
168
- };
169
- featuredBadgeText: {
170
- value: string;
171
- metadata: {};
172
- };
173
- price: {
174
- value: string;
175
- metadata: {};
176
- };
177
- priceDescription: {
178
- value: string;
179
- metadata: {};
180
- };
50
+ bg: string;
51
+ bgHover: string;
52
+ border: string;
53
+ featuredBg: string;
54
+ featuredText: string;
55
+ featuredBadgeBg: string;
56
+ featuredBadgeText: string;
57
+ price: string;
58
+ priceDescription: string;
181
59
  };
182
60
  rating: {
183
- starFilled: {
184
- value: string;
185
- };
186
- starEmpty: {
187
- value: string;
188
- };
189
- text: {
190
- value: string;
191
- };
61
+ starFilled: string;
62
+ starEmpty: string;
63
+ text: string;
192
64
  };
193
65
  };
194
66
  buttons: {
195
67
  primary: {
196
- bg: {
197
- value: string;
198
- metadata: {
199
- pair: string;
200
- };
201
- };
202
- bgHover: {
203
- value: string;
204
- metadata: {
205
- pair: string;
206
- };
207
- };
208
- bgActive: {
209
- value: string;
210
- metadata: {
211
- pair: string;
212
- };
213
- };
214
- bgDisabled: {
215
- value: string;
216
- };
217
- text: {
218
- value: string;
219
- };
220
- textDisabled: {
221
- value: string;
222
- };
223
- focusRing: {
224
- value: string;
225
- };
68
+ bg: string;
69
+ bgHover: string;
70
+ bgActive: string;
71
+ bgDisabled: string;
72
+ text: string;
73
+ textDisabled: string;
74
+ focusRing: string;
75
+ focusVisible: string;
226
76
  };
227
77
  secondary: {
228
- bg: {
229
- value: string;
230
- metadata: {
231
- pair: string;
232
- };
233
- };
234
- bgHover: {
235
- value: string;
236
- metadata: {
237
- pair: string;
238
- };
239
- };
240
- bgActive: {
241
- value: string;
242
- metadata: {
243
- pair: string;
244
- };
245
- };
246
- bgDisabled: {
247
- value: string;
248
- };
249
- text: {
250
- value: string;
251
- };
252
- textDisabled: {
253
- value: string;
254
- };
255
- border: {
256
- value: string;
257
- };
258
- borderDisabled: {
259
- value: string;
260
- };
261
- focusRing: {
262
- value: string;
263
- };
78
+ bg: string;
79
+ bgHover: string;
80
+ bgActive: string;
81
+ bgDisabled: string;
82
+ text: string;
83
+ textDisabled: string;
84
+ border: string;
85
+ borderDisabled: string;
86
+ focusRing: string;
87
+ focusVisible: string;
264
88
  };
265
89
  ghost: {
266
- bg: {
267
- value: string;
268
- };
269
- bgHover: {
270
- value: string;
271
- metadata: {
272
- pair: string;
273
- };
274
- };
275
- bgActive: {
276
- value: string;
277
- metadata: {
278
- pair: string;
279
- };
280
- };
281
- bgDisabled: {
282
- value: string;
283
- };
284
- text: {
285
- value: string;
286
- };
287
- textDisabled: {
288
- value: string;
289
- };
290
- focusRing: {
291
- value: string;
292
- };
90
+ bg: string;
91
+ bgHover: string;
92
+ bgActive: string;
93
+ bgDisabled: string;
94
+ text: string;
95
+ textDisabled: string;
96
+ focusRing: string;
97
+ focusVisible: string;
293
98
  };
294
99
  danger: {
295
- bg: {
296
- value: string;
297
- metadata: {
298
- pair: string;
299
- };
300
- };
301
- bgHover: {
302
- value: string;
303
- metadata: {
304
- pair: string;
305
- };
306
- };
307
- bgActive: {
308
- value: string;
309
- metadata: {
310
- pair: string;
311
- };
312
- };
313
- bgDisabled: {
314
- value: string;
315
- };
316
- text: {
317
- value: string;
318
- };
319
- textDisabled: {
320
- value: string;
321
- };
322
- focusRing: {
323
- value: string;
324
- };
100
+ bg: string;
101
+ bgHover: string;
102
+ bgActive: string;
103
+ bgDisabled: string;
104
+ text: string;
105
+ textDisabled: string;
106
+ focusRing: string;
325
107
  };
326
108
  success: {
327
- bg: {
328
- value: string;
329
- metadata: {
330
- pair: string;
331
- };
332
- };
333
- bgHover: {
334
- value: string;
335
- metadata: {
336
- pair: string;
337
- };
338
- };
339
- bgActive: {
340
- value: string;
341
- metadata: {
342
- pair: string;
343
- };
344
- };
345
- bgDisabled: {
346
- value: string;
347
- };
348
- text: {
349
- value: string;
350
- };
351
- textDisabled: {
352
- value: string;
353
- };
354
- focusRing: {
355
- value: string;
356
- };
109
+ bg: string;
110
+ bgHover: string;
111
+ bgActive: string;
112
+ bgDisabled: string;
113
+ text: string;
114
+ textDisabled: string;
115
+ focusRing: string;
357
116
  };
358
117
  cta: {
359
- bg: {
360
- value: string;
361
- metadata: {
362
- pair: string;
363
- };
364
- };
365
- bgHover: {
366
- value: string;
367
- metadata: {
368
- pair: string;
369
- };
370
- };
371
- bgActive: {
372
- value: string;
373
- metadata: {
374
- pair: string;
375
- };
376
- };
377
- bgDisabled: {
378
- value: string;
379
- };
380
- text: {
381
- value: string;
382
- };
383
- textDisabled: {
384
- value: string;
385
- };
386
- shadow: {
387
- value: string;
388
- };
389
- focusRing: {
390
- value: string;
391
- };
118
+ bg: string;
119
+ bgHover: string;
120
+ bgActive: string;
121
+ bgDisabled: string;
122
+ text: string;
123
+ textDisabled: string;
124
+ shadow: string;
125
+ focusRing: string;
392
126
  };
393
127
  accent: {
394
- bg: {
395
- value: string;
396
- metadata: {
397
- pair: string;
398
- };
399
- };
400
- bgHover: {
401
- value: string;
402
- metadata: {
403
- pair: string;
404
- };
405
- };
406
- bgActive: {
407
- value: string;
408
- metadata: {
409
- pair: string;
410
- };
411
- };
412
- bgDisabled: {
413
- value: string;
414
- };
415
- text: {
416
- value: string;
417
- };
418
- textDisabled: {
419
- value: string;
420
- };
421
- focusRing: {
422
- value: string;
423
- };
128
+ bg: string;
129
+ bgHover: string;
130
+ bgActive: string;
131
+ bgDisabled: string;
132
+ text: string;
133
+ textDisabled: string;
134
+ focusRing: string;
135
+ focusVisible: string;
424
136
  };
425
137
  };
426
138
  forms: {
427
139
  default: {
428
- bg: {
429
- value: string;
430
- };
431
- border: {
432
- value: string;
433
- };
434
- text: {
435
- value: string;
436
- };
437
- placeholder: {
438
- value: string;
439
- };
140
+ bg: string;
141
+ border: string;
142
+ text: string;
143
+ placeholder: string;
440
144
  };
441
145
  hover: {
442
- border: {
443
- value: string;
444
- };
146
+ border: string;
445
147
  };
446
148
  focus: {
447
- border: {
448
- value: string;
449
- };
450
- ring: {
451
- value: string;
452
- };
149
+ border: string;
150
+ ring: string;
151
+ };
152
+ focusVisible: {
153
+ border: string;
154
+ ring: string;
453
155
  };
454
156
  valid: {
455
- border: {
456
- value: string;
457
- };
458
- bg: {
459
- value: string;
460
- metadata: {
461
- pair: string;
462
- };
463
- };
464
- text: {
465
- value: string;
466
- };
157
+ border: string;
158
+ bg: string;
159
+ text: string;
467
160
  };
468
161
  invalid: {
469
- border: {
470
- value: string;
471
- };
472
- bg: {
473
- value: string;
474
- metadata: {
475
- pair: string;
476
- };
477
- };
478
- text: {
479
- value: string;
480
- };
162
+ border: string;
163
+ bg: string;
164
+ text: string;
481
165
  };
482
166
  disabled: {
483
- bg: {
484
- value: string;
485
- };
486
- border: {
487
- value: string;
488
- };
489
- text: {
490
- value: string;
491
- };
167
+ bg: string;
168
+ border: string;
169
+ text: string;
492
170
  };
493
171
  };
494
172
  modes: {
495
173
  default: {
496
174
  surface: {
497
- page: {
498
- value: string;
499
- metadata: {
500
- pair: string;
501
- };
502
- };
503
- card: {
504
- value: string;
505
- metadata: {
506
- pair: string;
507
- };
508
- };
509
- input: {
510
- value: string;
511
- metadata: {
512
- pair: string;
513
- };
514
- };
515
- overlay: {
516
- value: string;
517
- };
518
- alternate: {
519
- value: string;
520
- metadata: {
521
- pair: string;
522
- };
523
- };
524
- hero: {
525
- value: string;
526
- };
175
+ page: string;
176
+ card: string;
177
+ input: string;
178
+ overlay: string;
179
+ alternate: string;
180
+ hero: string;
527
181
  };
528
182
  text: {
529
183
  onPage: {
530
- default: {
531
- value: string;
532
- metadata: {
533
- pair: string;
534
- };
535
- };
536
- muted: {
537
- value: string;
538
- metadata: {
539
- pair: string;
540
- };
541
- };
542
- subtle: {
543
- value: string;
544
- metadata: {
545
- pair: string;
546
- };
547
- };
548
- meta: {
549
- value: string;
550
- metadata: {
551
- pair: string;
552
- };
553
- };
554
- brand: {
555
- value: string;
556
- metadata: {
557
- pair: string;
558
- };
559
- };
184
+ default: string;
185
+ muted: string;
186
+ subtle: string;
187
+ meta: string;
188
+ brand: string;
560
189
  };
561
190
  onSurface: {
562
- default: {
563
- value: string;
564
- metadata: {
565
- pair: string;
566
- };
567
- };
568
- muted: {
569
- value: string;
570
- metadata: {
571
- pair: string;
572
- };
573
- };
574
- subtle: {
575
- value: string;
576
- metadata: {
577
- pair: string;
578
- };
579
- };
580
- meta: {
581
- value: string;
582
- metadata: {
583
- pair: string;
584
- };
585
- };
586
- brand: {
587
- value: string;
588
- metadata: {
589
- pair: string;
590
- };
591
- };
191
+ default: string;
192
+ muted: string;
193
+ subtle: string;
194
+ meta: string;
195
+ brand: string;
592
196
  };
593
197
  };
594
198
  component: {
595
199
  card: {
596
- text: {
597
- value: string;
598
- };
599
- textMuted: {
600
- value: string;
601
- };
200
+ text: string;
201
+ textMuted: string;
602
202
  };
603
203
  input: {
604
- text: {
605
- value: string;
606
- };
607
- placeholder: {
608
- value: string;
609
- };
204
+ text: string;
205
+ placeholder: string;
610
206
  };
611
207
  button: {
612
- textDefault: {
613
- value: string;
614
- };
615
- textOnPrimary: {
616
- value: string;
617
- };
208
+ textDefault: string;
209
+ textOnPrimary: string;
618
210
  };
619
211
  badge: {
620
- neutralBg: {
621
- value: string;
622
- metadata: {
623
- pair: string;
624
- };
625
- };
626
- neutralText: {
627
- value: string;
628
- metadata: {};
629
- };
630
- infoBg: {
631
- value: string;
632
- metadata: {
633
- pair: string;
634
- };
635
- };
636
- infoText: {
637
- value: string;
638
- metadata: {};
639
- };
640
- successBg: {
641
- value: string;
642
- metadata: {
643
- pair: string;
644
- };
645
- };
646
- successText: {
647
- value: string;
648
- metadata: {};
649
- };
650
- warningBg: {
651
- value: string;
652
- metadata: {
653
- pair: string;
654
- };
655
- };
656
- warningText: {
657
- value: string;
658
- metadata: {};
659
- };
660
- dangerBg: {
661
- value: string;
662
- metadata: {
663
- pair: string;
664
- };
665
- };
666
- dangerText: {
667
- value: string;
668
- metadata: {};
669
- };
212
+ neutralBg: string;
213
+ neutralBgHover: string;
214
+ neutralText: string;
215
+ infoBg: string;
216
+ infoBgHover: string;
217
+ infoText: string;
218
+ successBg: string;
219
+ successText: string;
220
+ warningBg: string;
221
+ warningText: string;
222
+ dangerBg: string;
223
+ dangerText: string;
670
224
  };
671
225
  iconBox: {
672
- bg: {
673
- value: string;
674
- metadata: {};
675
- };
676
- border: {
677
- value: string;
678
- metadata: {};
679
- };
680
- iconDefault: {
681
- value: string;
682
- metadata: {};
683
- };
684
- iconSuccess: {
685
- value: string;
686
- metadata: {};
687
- };
688
- iconWarning: {
689
- value: string;
690
- metadata: {};
691
- };
692
- iconDanger: {
693
- value: string;
694
- metadata: {};
695
- };
226
+ bg: string;
227
+ border: string;
228
+ iconDefault: string;
229
+ iconSuccess: string;
230
+ iconWarning: string;
231
+ iconDanger: string;
696
232
  };
697
233
  testimonial: {
698
- bg: {
699
- value: string;
700
- metadata: {
701
- pair: string;
702
- };
703
- };
704
- border: {
705
- value: string;
706
- metadata: {};
707
- };
708
- text: {
709
- value: string;
710
- metadata: {
711
- pair: string;
712
- };
713
- };
714
- authorName: {
715
- value: string;
716
- metadata: {
717
- pair: string;
718
- };
719
- };
720
- authorTitle: {
721
- value: string;
722
- metadata: {
723
- pair: string;
724
- };
725
- };
726
- quoteMark: {
727
- value: string;
728
- metadata: {};
729
- };
234
+ bg: string;
235
+ bgHover: string;
236
+ border: string;
237
+ text: string;
238
+ authorName: string;
239
+ authorTitle: string;
240
+ quoteMark: string;
730
241
  };
731
242
  pricingCard: {
732
- bg: {
733
- value: string;
734
- metadata: {
735
- pair: string;
736
- };
737
- };
738
- border: {
739
- value: string;
740
- metadata: {};
741
- };
742
- featuredBg: {
743
- value: string;
744
- metadata: {
745
- pair: string;
746
- };
747
- };
748
- featuredText: {
749
- value: string;
750
- metadata: {};
751
- };
752
- featuredBadgeBg: {
753
- value: string;
754
- metadata: {
755
- pair: string;
756
- };
757
- };
758
- featuredBadgeText: {
759
- value: string;
760
- metadata: {};
761
- };
762
- price: {
763
- value: string;
764
- metadata: {
765
- pair: string;
766
- };
767
- };
768
- priceDescription: {
769
- value: string;
770
- metadata: {
771
- pair: string;
772
- };
773
- };
243
+ bg: string;
244
+ bgHover: string;
245
+ border: string;
246
+ featuredBg: string;
247
+ featuredText: string;
248
+ featuredBadgeBg: string;
249
+ featuredBadgeText: string;
250
+ price: string;
251
+ priceDescription: string;
774
252
  };
775
253
  rating: {
776
- starFilled: {
777
- value: string;
778
- metadata: {};
779
- };
780
- starEmpty: {
781
- value: string;
782
- metadata: {};
783
- };
784
- text: {
785
- value: string;
786
- metadata: {};
787
- };
254
+ starFilled: string;
255
+ starEmpty: string;
256
+ text: string;
788
257
  };
789
258
  };
790
259
  };
791
260
  dark: {
792
261
  surface: {
793
- page: {
794
- value: string;
795
- metadata: {
796
- pair: string;
797
- };
798
- };
799
- card: {
800
- value: string;
801
- metadata: {
802
- pair: string;
803
- };
804
- };
805
- input: {
806
- value: string;
807
- metadata: {
808
- pair: string;
809
- };
810
- };
811
- overlay: {
812
- value: string;
813
- };
814
- alternate: {
815
- value: string;
816
- metadata: {
817
- pair: string;
818
- };
819
- };
820
- hero: {
821
- value: string;
822
- };
262
+ page: string;
263
+ card: string;
264
+ input: string;
265
+ overlay: string;
266
+ alternate: string;
267
+ hero: string;
823
268
  };
824
269
  text: {
825
270
  onPage: {
826
- default: {
827
- value: string;
828
- metadata: {
829
- pair: string;
830
- };
831
- };
832
- muted: {
833
- value: string;
834
- metadata: {
835
- pair: string;
836
- };
837
- };
838
- subtle: {
839
- value: string;
840
- metadata: {
841
- pair: string;
842
- };
843
- };
844
- meta: {
845
- value: string;
846
- metadata: {
847
- pair: string;
848
- };
849
- };
850
- brand: {
851
- value: string;
852
- metadata: {
853
- pair: string;
854
- };
855
- };
271
+ default: string;
272
+ muted: string;
273
+ subtle: string;
274
+ meta: string;
275
+ brand: string;
856
276
  };
857
277
  onSurface: {
858
- default: {
859
- value: string;
860
- metadata: {
861
- pair: string;
862
- };
863
- };
864
- muted: {
865
- value: string;
866
- metadata: {
867
- pair: string;
868
- };
869
- };
870
- subtle: {
871
- value: string;
872
- metadata: {
873
- pair: string;
874
- };
875
- };
876
- meta: {
877
- value: string;
878
- metadata: {
879
- pair: string;
880
- };
881
- };
882
- brand: {
883
- value: string;
884
- metadata: {
885
- pair: string;
886
- };
887
- };
278
+ default: string;
279
+ muted: string;
280
+ subtle: string;
281
+ meta: string;
282
+ brand: string;
888
283
  };
889
284
  };
890
285
  component: {
891
286
  card: {
892
- text: {
893
- value: string;
894
- metadata: {
895
- pair: string;
896
- };
897
- };
898
- textMuted: {
899
- value: string;
900
- metadata: {
901
- pair: string;
902
- };
903
- };
287
+ text: string;
288
+ textMuted: string;
904
289
  };
905
290
  input: {
906
- text: {
907
- value: string;
908
- };
909
- placeholder: {
910
- value: string;
911
- };
291
+ text: string;
292
+ placeholder: string;
912
293
  };
913
294
  button: {
914
- textDefault: {
915
- value: string;
916
- };
917
- textOnPrimary: {
918
- value: string;
919
- };
295
+ textDefault: string;
296
+ textOnPrimary: string;
920
297
  };
921
298
  badge: {
922
- neutralBg: {
923
- value: string;
924
- metadata: {
925
- pair: string;
926
- };
927
- };
928
- neutralBgHover: {
929
- value: string;
930
- metadata: {
931
- pair: string;
932
- };
933
- };
934
- neutralText: {
935
- value: string;
936
- metadata: {};
937
- };
938
- infoBg: {
939
- value: string;
940
- metadata: {
941
- pair: string;
942
- };
943
- };
944
- infoBgHover: {
945
- value: string;
946
- metadata: {
947
- pair: string;
948
- };
949
- };
950
- infoText: {
951
- value: string;
952
- metadata: {};
953
- };
954
- successBg: {
955
- value: string;
956
- metadata: {
957
- pair: string;
958
- };
959
- };
960
- successBgHover: {
961
- value: string;
962
- metadata: {
963
- pair: string;
964
- };
965
- };
966
- successText: {
967
- value: string;
968
- metadata: {};
969
- };
970
- warningBg: {
971
- value: string;
972
- metadata: {
973
- pair: string;
974
- };
975
- };
976
- warningBgHover: {
977
- value: string;
978
- metadata: {
979
- pair: string;
980
- };
981
- };
982
- warningText: {
983
- value: string;
984
- metadata: {};
985
- };
986
- dangerBg: {
987
- value: string;
988
- metadata: {
989
- pair: string;
990
- };
991
- };
992
- dangerBgHover: {
993
- value: string;
994
- metadata: {
995
- pair: string;
996
- };
997
- };
998
- dangerText: {
999
- value: string;
1000
- metadata: {};
1001
- };
299
+ neutralBg: string;
300
+ neutralBgHover: string;
301
+ neutralText: string;
302
+ infoBg: string;
303
+ infoBgHover: string;
304
+ infoText: string;
305
+ successBg: string;
306
+ successBgHover: string;
307
+ successText: string;
308
+ warningBg: string;
309
+ warningBgHover: string;
310
+ warningText: string;
311
+ dangerBg: string;
312
+ dangerBgHover: string;
313
+ dangerText: string;
1002
314
  };
1003
315
  iconBox: {
1004
- bg: {
1005
- value: string;
1006
- metadata: {};
1007
- };
1008
- border: {
1009
- value: string;
1010
- metadata: {};
1011
- };
1012
- iconDefault: {
1013
- value: string;
1014
- metadata: {};
1015
- };
1016
- iconSuccess: {
1017
- value: string;
1018
- metadata: {};
1019
- };
1020
- iconWarning: {
1021
- value: string;
1022
- metadata: {};
1023
- };
1024
- iconDanger: {
1025
- value: string;
1026
- metadata: {};
1027
- };
316
+ bg: string;
317
+ border: string;
318
+ iconDefault: string;
319
+ iconSuccess: string;
320
+ iconWarning: string;
321
+ iconDanger: string;
1028
322
  };
1029
323
  testimonial: {
1030
- bg: {
1031
- value: string;
1032
- metadata: {
1033
- pair: string;
1034
- };
1035
- };
1036
- border: {
1037
- value: string;
1038
- metadata: {};
1039
- };
1040
- text: {
1041
- value: string;
1042
- metadata: {
1043
- pair: string;
1044
- };
1045
- };
1046
- authorName: {
1047
- value: string;
1048
- metadata: {
1049
- pair: string;
1050
- };
1051
- };
1052
- authorTitle: {
1053
- value: string;
1054
- metadata: {
1055
- pair: string;
1056
- };
1057
- };
1058
- quoteMark: {
1059
- value: string;
1060
- metadata: {};
1061
- };
324
+ bg: string;
325
+ bgHover: string;
326
+ border: string;
327
+ text: string;
328
+ authorName: string;
329
+ authorTitle: string;
330
+ quoteMark: string;
1062
331
  };
1063
332
  pricingCard: {
1064
- bg: {
1065
- value: string;
1066
- metadata: {
1067
- pair: string;
1068
- };
1069
- };
1070
- border: {
1071
- value: string;
1072
- metadata: {};
1073
- };
1074
- featuredBg: {
1075
- value: string;
1076
- metadata: {
1077
- pair: string;
1078
- };
1079
- };
1080
- featuredText: {
1081
- value: string;
1082
- metadata: {};
1083
- };
1084
- featuredBadgeBg: {
1085
- value: string;
1086
- metadata: {
1087
- pair: string;
1088
- };
1089
- };
1090
- featuredBadgeText: {
1091
- value: string;
1092
- metadata: {};
1093
- };
1094
- price: {
1095
- value: string;
1096
- metadata: {
1097
- pair: string;
1098
- };
1099
- };
1100
- priceDescription: {
1101
- value: string;
1102
- metadata: {
1103
- pair: string;
1104
- };
1105
- };
333
+ bg: string;
334
+ bgHover: string;
335
+ border: string;
336
+ featuredBg: string;
337
+ featuredText: string;
338
+ featuredBadgeBg: string;
339
+ featuredBadgeText: string;
340
+ price: string;
341
+ priceDescription: string;
1106
342
  };
1107
343
  rating: {
1108
- starFilled: {
1109
- value: string;
1110
- metadata: {};
1111
- };
1112
- starEmpty: {
1113
- value: string;
1114
- metadata: {};
1115
- };
1116
- text: {
1117
- value: string;
1118
- metadata: {};
1119
- };
344
+ starFilled: string;
345
+ starEmpty: string;
346
+ text: string;
1120
347
  };
1121
348
  };
1122
349
  };
@@ -1360,10 +587,6 @@ interface SpectreGeneratedTokens {
1360
587
  minTouchTarget: string;
1361
588
  minTextSize: string;
1362
589
  };
1363
- borders: {
1364
- card: string;
1365
- input: string;
1366
- };
1367
590
  border: {
1368
591
  width: {
1369
592
  base: string;
@@ -1371,22 +594,10 @@ interface SpectreGeneratedTokens {
1371
594
  };
1372
595
  };
1373
596
  surface: {
1374
- page: {
1375
- value: string;
1376
- description: string;
1377
- };
1378
- card: {
1379
- value: string;
1380
- description: string;
1381
- };
1382
- input: {
1383
- value: string;
1384
- description: string;
1385
- };
1386
- overlay: {
1387
- value: string;
1388
- description: string;
1389
- };
597
+ page: string;
598
+ card: string;
599
+ input: string;
600
+ overlay: string;
1390
601
  };
1391
602
  text: {
1392
603
  onPage: {
@@ -1464,6 +675,26 @@ interface SpectreGeneratedTokens {
1464
675
  lineHeight: string;
1465
676
  weight: number;
1466
677
  };
678
+ '3xl': {
679
+ size: string;
680
+ lineHeight: string;
681
+ weight: number;
682
+ };
683
+ '4xl': {
684
+ size: string;
685
+ lineHeight: string;
686
+ weight: number;
687
+ };
688
+ '5xl': {
689
+ size: string;
690
+ lineHeight: string;
691
+ weight: number;
692
+ };
693
+ '6xl': {
694
+ size: string;
695
+ lineHeight: string;
696
+ weight: number;
697
+ };
1467
698
  };
1468
699
  typography: {
1469
700
  families: {
@@ -1567,6 +798,7 @@ interface ButtonStateTokens {
1567
798
  border?: string;
1568
799
  borderDisabled?: string;
1569
800
  shadow?: string;
801
+ focusRing?: string;
1570
802
  }
1571
803
  interface FormStateTokens {
1572
804
  bg?: string;
@@ -1639,10 +871,7 @@ interface ComponentTokens<Value = string> {
1639
871
  [key: string]: unknown;
1640
872
  }
1641
873
  type SpectreModeName = 'default' | 'dark';
1642
- type SemanticTokenValue = string | {
1643
- value: string;
1644
- [key: string]: unknown;
1645
- };
874
+ type SemanticTokenValue = string;
1646
875
  interface SpectreModeTokens {
1647
876
  surface: {
1648
877
  page: SemanticTokenValue;
@@ -1683,8 +912,7 @@ interface LayoutTokens {
1683
912
  maxWidth: string;
1684
913
  };
1685
914
  }
1686
- interface Tokens extends Omit<SpectreGeneratedTokens, 'modes' | 'surface' | 'text'> {
1687
- }
915
+ type Tokens = SpectreGeneratedTokens;
1688
916
  interface CssVariableOptions {
1689
917
  selector?: string;
1690
918
  prefix?: string;