@phcdevworks/spectre-tokens 2.1.2 → 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 +4 -0
  2. package/dist/index.cjs +269 -1130
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +22 -4
  5. package/dist/index.d.cts +270 -1134
  6. package/dist/index.d.ts +270 -1134
  7. package/dist/index.js +269 -1130
  8. package/dist/index.js.map +1 -1
  9. package/package.json +10 -8
  10. package/tokens/components.json +32 -0
  11. package/tokens/modes.json +34 -6
  12. package/tokens/primitives.json +0 -4
  13. package/tokens/typography.json +22 -2
package/dist/index.d.cts 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: {
@@ -1556,6 +675,26 @@ interface SpectreGeneratedTokens {
1556
675
  lineHeight: string;
1557
676
  weight: number;
1558
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
+ };
1559
698
  };
1560
699
  typography: {
1561
700
  families: {
@@ -1659,6 +798,7 @@ interface ButtonStateTokens {
1659
798
  border?: string;
1660
799
  borderDisabled?: string;
1661
800
  shadow?: string;
801
+ focusRing?: string;
1662
802
  }
1663
803
  interface FormStateTokens {
1664
804
  bg?: string;
@@ -1731,10 +871,7 @@ interface ComponentTokens<Value = string> {
1731
871
  [key: string]: unknown;
1732
872
  }
1733
873
  type SpectreModeName = 'default' | 'dark';
1734
- type SemanticTokenValue = string | {
1735
- value: string;
1736
- [key: string]: unknown;
1737
- };
874
+ type SemanticTokenValue = string;
1738
875
  interface SpectreModeTokens {
1739
876
  surface: {
1740
877
  page: SemanticTokenValue;
@@ -1775,8 +912,7 @@ interface LayoutTokens {
1775
912
  maxWidth: string;
1776
913
  };
1777
914
  }
1778
- interface Tokens extends Omit<SpectreGeneratedTokens, 'modes' | 'surface' | 'text'> {
1779
- }
915
+ type Tokens = SpectreGeneratedTokens;
1780
916
  interface CssVariableOptions {
1781
917
  selector?: string;
1782
918
  prefix?: string;