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