@phcdevworks/spectre-tokens 2.0.0 → 2.1.1

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 (15) hide show
  1. package/LICENSE +12 -13
  2. package/README.md +133 -1440
  3. package/dist/index.cjs +386 -136
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +179 -169
  6. package/dist/index.d.cts +250 -14
  7. package/dist/index.d.ts +250 -14
  8. package/dist/index.js +386 -136
  9. package/dist/index.js.map +1 -1
  10. package/package.json +15 -11
  11. package/tokens/components.json +444 -105
  12. package/tokens/modes.json +558 -108
  13. package/tokens/palette.json +55 -55
  14. package/tokens/primitives.json +6 -0
  15. package/tokens/semantic-roles.json +2 -1
package/dist/index.d.ts CHANGED
@@ -33,6 +33,9 @@ interface SpectreGeneratedTokens {
33
33
  };
34
34
  neutralBgHover: {
35
35
  value: string;
36
+ metadata: {
37
+ pair: string;
38
+ };
36
39
  };
37
40
  neutralText: {
38
41
  value: string;
@@ -45,6 +48,9 @@ interface SpectreGeneratedTokens {
45
48
  };
46
49
  infoBgHover: {
47
50
  value: string;
51
+ metadata: {
52
+ pair: string;
53
+ };
48
54
  };
49
55
  infoText: {
50
56
  value: string;
@@ -57,6 +63,9 @@ interface SpectreGeneratedTokens {
57
63
  };
58
64
  successBgHover: {
59
65
  value: string;
66
+ metadata: {
67
+ pair: string;
68
+ };
60
69
  };
61
70
  successText: {
62
71
  value: string;
@@ -69,6 +78,9 @@ interface SpectreGeneratedTokens {
69
78
  };
70
79
  warningBgHover: {
71
80
  value: string;
81
+ metadata: {
82
+ pair: string;
83
+ };
72
84
  };
73
85
  warningText: {
74
86
  value: string;
@@ -81,6 +93,9 @@ interface SpectreGeneratedTokens {
81
93
  };
82
94
  dangerBgHover: {
83
95
  value: string;
96
+ metadata: {
97
+ pair: string;
98
+ };
84
99
  };
85
100
  dangerText: {
86
101
  value: string;
@@ -186,9 +201,15 @@ interface SpectreGeneratedTokens {
186
201
  };
187
202
  bgHover: {
188
203
  value: string;
204
+ metadata: {
205
+ pair: string;
206
+ };
189
207
  };
190
208
  bgActive: {
191
209
  value: string;
210
+ metadata: {
211
+ pair: string;
212
+ };
192
213
  };
193
214
  bgDisabled: {
194
215
  value: string;
@@ -199,6 +220,9 @@ interface SpectreGeneratedTokens {
199
220
  textDisabled: {
200
221
  value: string;
201
222
  };
223
+ focusRing: {
224
+ value: string;
225
+ };
202
226
  };
203
227
  secondary: {
204
228
  bg: {
@@ -209,9 +233,15 @@ interface SpectreGeneratedTokens {
209
233
  };
210
234
  bgHover: {
211
235
  value: string;
236
+ metadata: {
237
+ pair: string;
238
+ };
212
239
  };
213
240
  bgActive: {
214
241
  value: string;
242
+ metadata: {
243
+ pair: string;
244
+ };
215
245
  };
216
246
  bgDisabled: {
217
247
  value: string;
@@ -228,6 +258,9 @@ interface SpectreGeneratedTokens {
228
258
  borderDisabled: {
229
259
  value: string;
230
260
  };
261
+ focusRing: {
262
+ value: string;
263
+ };
231
264
  };
232
265
  ghost: {
233
266
  bg: {
@@ -235,9 +268,15 @@ interface SpectreGeneratedTokens {
235
268
  };
236
269
  bgHover: {
237
270
  value: string;
271
+ metadata: {
272
+ pair: string;
273
+ };
238
274
  };
239
275
  bgActive: {
240
276
  value: string;
277
+ metadata: {
278
+ pair: string;
279
+ };
241
280
  };
242
281
  bgDisabled: {
243
282
  value: string;
@@ -248,6 +287,9 @@ interface SpectreGeneratedTokens {
248
287
  textDisabled: {
249
288
  value: string;
250
289
  };
290
+ focusRing: {
291
+ value: string;
292
+ };
251
293
  };
252
294
  danger: {
253
295
  bg: {
@@ -258,9 +300,15 @@ interface SpectreGeneratedTokens {
258
300
  };
259
301
  bgHover: {
260
302
  value: string;
303
+ metadata: {
304
+ pair: string;
305
+ };
261
306
  };
262
307
  bgActive: {
263
308
  value: string;
309
+ metadata: {
310
+ pair: string;
311
+ };
264
312
  };
265
313
  bgDisabled: {
266
314
  value: string;
@@ -271,6 +319,9 @@ interface SpectreGeneratedTokens {
271
319
  textDisabled: {
272
320
  value: string;
273
321
  };
322
+ focusRing: {
323
+ value: string;
324
+ };
274
325
  };
275
326
  success: {
276
327
  bg: {
@@ -281,9 +332,15 @@ interface SpectreGeneratedTokens {
281
332
  };
282
333
  bgHover: {
283
334
  value: string;
335
+ metadata: {
336
+ pair: string;
337
+ };
284
338
  };
285
339
  bgActive: {
286
340
  value: string;
341
+ metadata: {
342
+ pair: string;
343
+ };
287
344
  };
288
345
  bgDisabled: {
289
346
  value: string;
@@ -294,6 +351,9 @@ interface SpectreGeneratedTokens {
294
351
  textDisabled: {
295
352
  value: string;
296
353
  };
354
+ focusRing: {
355
+ value: string;
356
+ };
297
357
  };
298
358
  cta: {
299
359
  bg: {
@@ -304,9 +364,15 @@ interface SpectreGeneratedTokens {
304
364
  };
305
365
  bgHover: {
306
366
  value: string;
367
+ metadata: {
368
+ pair: string;
369
+ };
307
370
  };
308
371
  bgActive: {
309
372
  value: string;
373
+ metadata: {
374
+ pair: string;
375
+ };
310
376
  };
311
377
  bgDisabled: {
312
378
  value: string;
@@ -320,6 +386,9 @@ interface SpectreGeneratedTokens {
320
386
  shadow: {
321
387
  value: string;
322
388
  };
389
+ focusRing: {
390
+ value: string;
391
+ };
323
392
  };
324
393
  accent: {
325
394
  bg: {
@@ -330,9 +399,15 @@ interface SpectreGeneratedTokens {
330
399
  };
331
400
  bgHover: {
332
401
  value: string;
402
+ metadata: {
403
+ pair: string;
404
+ };
333
405
  };
334
406
  bgActive: {
335
407
  value: string;
408
+ metadata: {
409
+ pair: string;
410
+ };
336
411
  };
337
412
  bgDisabled: {
338
413
  value: string;
@@ -343,6 +418,9 @@ interface SpectreGeneratedTokens {
343
418
  textDisabled: {
344
419
  value: string;
345
420
  };
421
+ focusRing: {
422
+ value: string;
423
+ };
346
424
  };
347
425
  };
348
426
  forms: {
@@ -418,18 +496,30 @@ interface SpectreGeneratedTokens {
418
496
  surface: {
419
497
  page: {
420
498
  value: string;
499
+ metadata: {
500
+ pair: string;
501
+ };
421
502
  };
422
503
  card: {
423
504
  value: string;
505
+ metadata: {
506
+ pair: string;
507
+ };
424
508
  };
425
509
  input: {
426
510
  value: string;
511
+ metadata: {
512
+ pair: string;
513
+ };
427
514
  };
428
515
  overlay: {
429
516
  value: string;
430
517
  };
431
518
  alternate: {
432
519
  value: string;
520
+ metadata: {
521
+ pair: string;
522
+ };
433
523
  };
434
524
  hero: {
435
525
  value: string;
@@ -439,35 +529,65 @@ interface SpectreGeneratedTokens {
439
529
  onPage: {
440
530
  default: {
441
531
  value: string;
532
+ metadata: {
533
+ pair: string;
534
+ };
442
535
  };
443
536
  muted: {
444
537
  value: string;
538
+ metadata: {
539
+ pair: string;
540
+ };
445
541
  };
446
542
  subtle: {
447
543
  value: string;
544
+ metadata: {
545
+ pair: string;
546
+ };
448
547
  };
449
548
  meta: {
450
549
  value: string;
550
+ metadata: {
551
+ pair: string;
552
+ };
451
553
  };
452
554
  brand: {
453
555
  value: string;
556
+ metadata: {
557
+ pair: string;
558
+ };
454
559
  };
455
560
  };
456
561
  onSurface: {
457
562
  default: {
458
563
  value: string;
564
+ metadata: {
565
+ pair: string;
566
+ };
459
567
  };
460
568
  muted: {
461
569
  value: string;
570
+ metadata: {
571
+ pair: string;
572
+ };
462
573
  };
463
574
  subtle: {
464
575
  value: string;
576
+ metadata: {
577
+ pair: string;
578
+ };
465
579
  };
466
580
  meta: {
467
581
  value: string;
582
+ metadata: {
583
+ pair: string;
584
+ };
468
585
  };
469
586
  brand: {
470
587
  value: string;
588
+ metadata: {
589
+ pair: string;
590
+ };
471
591
  };
472
592
  };
473
593
  };
@@ -577,7 +697,9 @@ interface SpectreGeneratedTokens {
577
697
  testimonial: {
578
698
  bg: {
579
699
  value: string;
580
- metadata: {};
700
+ metadata: {
701
+ pair: string;
702
+ };
581
703
  };
582
704
  border: {
583
705
  value: string;
@@ -585,15 +707,21 @@ interface SpectreGeneratedTokens {
585
707
  };
586
708
  text: {
587
709
  value: string;
588
- metadata: {};
710
+ metadata: {
711
+ pair: string;
712
+ };
589
713
  };
590
714
  authorName: {
591
715
  value: string;
592
- metadata: {};
716
+ metadata: {
717
+ pair: string;
718
+ };
593
719
  };
594
720
  authorTitle: {
595
721
  value: string;
596
- metadata: {};
722
+ metadata: {
723
+ pair: string;
724
+ };
597
725
  };
598
726
  quoteMark: {
599
727
  value: string;
@@ -603,7 +731,9 @@ interface SpectreGeneratedTokens {
603
731
  pricingCard: {
604
732
  bg: {
605
733
  value: string;
606
- metadata: {};
734
+ metadata: {
735
+ pair: string;
736
+ };
607
737
  };
608
738
  border: {
609
739
  value: string;
@@ -631,11 +761,15 @@ interface SpectreGeneratedTokens {
631
761
  };
632
762
  price: {
633
763
  value: string;
634
- metadata: {};
764
+ metadata: {
765
+ pair: string;
766
+ };
635
767
  };
636
768
  priceDescription: {
637
769
  value: string;
638
- metadata: {};
770
+ metadata: {
771
+ pair: string;
772
+ };
639
773
  };
640
774
  };
641
775
  rating: {
@@ -658,18 +792,30 @@ interface SpectreGeneratedTokens {
658
792
  surface: {
659
793
  page: {
660
794
  value: string;
795
+ metadata: {
796
+ pair: string;
797
+ };
661
798
  };
662
799
  card: {
663
800
  value: string;
801
+ metadata: {
802
+ pair: string;
803
+ };
664
804
  };
665
805
  input: {
666
806
  value: string;
807
+ metadata: {
808
+ pair: string;
809
+ };
667
810
  };
668
811
  overlay: {
669
812
  value: string;
670
813
  };
671
814
  alternate: {
672
815
  value: string;
816
+ metadata: {
817
+ pair: string;
818
+ };
673
819
  };
674
820
  hero: {
675
821
  value: string;
@@ -679,35 +825,65 @@ interface SpectreGeneratedTokens {
679
825
  onPage: {
680
826
  default: {
681
827
  value: string;
828
+ metadata: {
829
+ pair: string;
830
+ };
682
831
  };
683
832
  muted: {
684
833
  value: string;
834
+ metadata: {
835
+ pair: string;
836
+ };
685
837
  };
686
838
  subtle: {
687
839
  value: string;
840
+ metadata: {
841
+ pair: string;
842
+ };
688
843
  };
689
844
  meta: {
690
845
  value: string;
846
+ metadata: {
847
+ pair: string;
848
+ };
691
849
  };
692
850
  brand: {
693
851
  value: string;
852
+ metadata: {
853
+ pair: string;
854
+ };
694
855
  };
695
856
  };
696
857
  onSurface: {
697
858
  default: {
698
859
  value: string;
860
+ metadata: {
861
+ pair: string;
862
+ };
699
863
  };
700
864
  muted: {
701
865
  value: string;
866
+ metadata: {
867
+ pair: string;
868
+ };
702
869
  };
703
870
  subtle: {
704
871
  value: string;
872
+ metadata: {
873
+ pair: string;
874
+ };
705
875
  };
706
876
  meta: {
707
877
  value: string;
878
+ metadata: {
879
+ pair: string;
880
+ };
708
881
  };
709
882
  brand: {
710
883
  value: string;
884
+ metadata: {
885
+ pair: string;
886
+ };
711
887
  };
712
888
  };
713
889
  };
@@ -715,9 +891,15 @@ interface SpectreGeneratedTokens {
715
891
  card: {
716
892
  text: {
717
893
  value: string;
894
+ metadata: {
895
+ pair: string;
896
+ };
718
897
  };
719
898
  textMuted: {
720
899
  value: string;
900
+ metadata: {
901
+ pair: string;
902
+ };
721
903
  };
722
904
  };
723
905
  input: {
@@ -743,6 +925,12 @@ interface SpectreGeneratedTokens {
743
925
  pair: string;
744
926
  };
745
927
  };
928
+ neutralBgHover: {
929
+ value: string;
930
+ metadata: {
931
+ pair: string;
932
+ };
933
+ };
746
934
  neutralText: {
747
935
  value: string;
748
936
  metadata: {};
@@ -753,6 +941,12 @@ interface SpectreGeneratedTokens {
753
941
  pair: string;
754
942
  };
755
943
  };
944
+ infoBgHover: {
945
+ value: string;
946
+ metadata: {
947
+ pair: string;
948
+ };
949
+ };
756
950
  infoText: {
757
951
  value: string;
758
952
  metadata: {};
@@ -763,6 +957,12 @@ interface SpectreGeneratedTokens {
763
957
  pair: string;
764
958
  };
765
959
  };
960
+ successBgHover: {
961
+ value: string;
962
+ metadata: {
963
+ pair: string;
964
+ };
965
+ };
766
966
  successText: {
767
967
  value: string;
768
968
  metadata: {};
@@ -773,6 +973,12 @@ interface SpectreGeneratedTokens {
773
973
  pair: string;
774
974
  };
775
975
  };
976
+ warningBgHover: {
977
+ value: string;
978
+ metadata: {
979
+ pair: string;
980
+ };
981
+ };
776
982
  warningText: {
777
983
  value: string;
778
984
  metadata: {};
@@ -783,6 +989,12 @@ interface SpectreGeneratedTokens {
783
989
  pair: string;
784
990
  };
785
991
  };
992
+ dangerBgHover: {
993
+ value: string;
994
+ metadata: {
995
+ pair: string;
996
+ };
997
+ };
786
998
  dangerText: {
787
999
  value: string;
788
1000
  metadata: {};
@@ -817,7 +1029,9 @@ interface SpectreGeneratedTokens {
817
1029
  testimonial: {
818
1030
  bg: {
819
1031
  value: string;
820
- metadata: {};
1032
+ metadata: {
1033
+ pair: string;
1034
+ };
821
1035
  };
822
1036
  border: {
823
1037
  value: string;
@@ -825,15 +1039,21 @@ interface SpectreGeneratedTokens {
825
1039
  };
826
1040
  text: {
827
1041
  value: string;
828
- metadata: {};
1042
+ metadata: {
1043
+ pair: string;
1044
+ };
829
1045
  };
830
1046
  authorName: {
831
1047
  value: string;
832
- metadata: {};
1048
+ metadata: {
1049
+ pair: string;
1050
+ };
833
1051
  };
834
1052
  authorTitle: {
835
1053
  value: string;
836
- metadata: {};
1054
+ metadata: {
1055
+ pair: string;
1056
+ };
837
1057
  };
838
1058
  quoteMark: {
839
1059
  value: string;
@@ -843,7 +1063,9 @@ interface SpectreGeneratedTokens {
843
1063
  pricingCard: {
844
1064
  bg: {
845
1065
  value: string;
846
- metadata: {};
1066
+ metadata: {
1067
+ pair: string;
1068
+ };
847
1069
  };
848
1070
  border: {
849
1071
  value: string;
@@ -871,11 +1093,15 @@ interface SpectreGeneratedTokens {
871
1093
  };
872
1094
  price: {
873
1095
  value: string;
874
- metadata: {};
1096
+ metadata: {
1097
+ pair: string;
1098
+ };
875
1099
  };
876
1100
  priceDescription: {
877
1101
  value: string;
878
- metadata: {};
1102
+ metadata: {
1103
+ pair: string;
1104
+ };
879
1105
  };
880
1106
  };
881
1107
  rating: {
@@ -1138,6 +1364,12 @@ interface SpectreGeneratedTokens {
1138
1364
  card: string;
1139
1365
  input: string;
1140
1366
  };
1367
+ border: {
1368
+ width: {
1369
+ base: string;
1370
+ thick: string;
1371
+ };
1372
+ };
1141
1373
  surface: {
1142
1374
  page: {
1143
1375
  value: string;
@@ -1198,6 +1430,7 @@ interface SpectreGeneratedTokens {
1198
1430
  md: string;
1199
1431
  lg: string;
1200
1432
  };
1433
+ maxWidth: string;
1201
1434
  };
1202
1435
  };
1203
1436
  font: {
@@ -1447,6 +1680,7 @@ interface LayoutTokens {
1447
1680
  };
1448
1681
  container: {
1449
1682
  paddingInline: TokenScale;
1683
+ maxWidth: string;
1450
1684
  };
1451
1685
  }
1452
1686
  interface Tokens extends Omit<SpectreGeneratedTokens, 'modes' | 'surface' | 'text'> {
@@ -1471,6 +1705,8 @@ interface TailwindTheme {
1471
1705
  transitionDuration: SpectreGeneratedTokens['transitions']['duration'];
1472
1706
  transitionTimingFunction: SpectreGeneratedTokens['transitions']['easing'];
1473
1707
  opacity: SpectreGeneratedTokens['opacity'];
1708
+ maxWidth: Record<string, string | undefined>;
1709
+ borderWidth: Record<string, string | undefined>;
1474
1710
  }
1475
1711
 
1476
1712
  declare const generateCssVariables: (tokens: SpectreTokens, options?: CssVariableOptions) => string;