@phcdevworks/spectre-tokens 4.8.0 → 4.9.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 (12) hide show
  1. package/README.md +4 -4
  2. package/dist/index.cjs +303 -23
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +160 -0
  5. package/dist/index.d.cts +313 -1
  6. package/dist/index.d.ts +313 -1
  7. package/dist/index.js +303 -23
  8. package/dist/index.js.map +1 -1
  9. package/dist/tokens.dtcg.json +957 -17
  10. package/package.json +10 -10
  11. package/tokens/components.json +310 -0
  12. package/tokens/modes.json +604 -4
package/dist/index.js CHANGED
@@ -8,6 +8,16 @@ var coreTokens = {
8
8
  "sm": "1.5rem",
9
9
  "md": "2rem",
10
10
  "lg": "2.5rem"
11
+ },
12
+ "accent": {
13
+ "neutral": "{colors.neutral.600}",
14
+ "brand": "{colors.brand.600}",
15
+ "info": "{colors.info.600}",
16
+ "success": "{colors.success.600}",
17
+ "warning": "{colors.warning.600}",
18
+ "danger": "{colors.error.600}",
19
+ "cta": "{colors.brand.600}",
20
+ "thickness": "0.25rem"
11
21
  }
12
22
  },
13
23
  "input": {
@@ -37,7 +47,17 @@ var coreTokens = {
37
47
  "inverseBg": "{colors.white} / 0.16",
38
48
  "inverseBgHover": "{colors.white} / 0.24",
39
49
  "inverseText": "{colors.white}",
40
- "inverseBorder": "{colors.white} / 0.3"
50
+ "inverseBorder": "{colors.white} / 0.3",
51
+ "accent": {
52
+ "neutral": "{colors.neutral.600}",
53
+ "brand": "{colors.brand.600}",
54
+ "info": "{colors.info.600}",
55
+ "success": "{colors.success.600}",
56
+ "warning": "{colors.warning.600}",
57
+ "danger": "{colors.error.600}",
58
+ "cta": "{colors.brand.600}",
59
+ "thickness": "0.25rem"
60
+ }
41
61
  },
42
62
  "iconBox": {
43
63
  "bg": "{colors.white}",
@@ -54,7 +74,17 @@ var coreTokens = {
54
74
  "text": "{colors.neutral.700}",
55
75
  "authorName": "{colors.neutral.900}",
56
76
  "authorTitle": "{colors.neutral.600}",
57
- "quoteMark": "{colors.neutral.600}"
77
+ "quoteMark": "{colors.neutral.600}",
78
+ "accent": {
79
+ "neutral": "{colors.neutral.600}",
80
+ "brand": "{colors.brand.600}",
81
+ "info": "{colors.info.600}",
82
+ "success": "{colors.success.600}",
83
+ "warning": "{colors.warning.600}",
84
+ "danger": "{colors.error.600}",
85
+ "cta": "{colors.brand.600}",
86
+ "thickness": "0.25rem"
87
+ }
58
88
  },
59
89
  "pricingCard": {
60
90
  "bg": "{colors.white}",
@@ -65,7 +95,17 @@ var coreTokens = {
65
95
  "featuredBadgeBg": "{colors.warning.500}",
66
96
  "featuredBadgeText": "{colors.neutral.900}",
67
97
  "price": "{colors.neutral.900}",
68
- "priceDescription": "{colors.neutral.600}"
98
+ "priceDescription": "{colors.neutral.600}",
99
+ "accent": {
100
+ "neutral": "{colors.neutral.600}",
101
+ "brand": "{colors.brand.600}",
102
+ "info": "{colors.info.600}",
103
+ "success": "{colors.success.600}",
104
+ "warning": "{colors.warning.600}",
105
+ "danger": "{colors.error.600}",
106
+ "cta": "{colors.brand.600}",
107
+ "thickness": "0.25rem"
108
+ }
69
109
  },
70
110
  "rating": {
71
111
  "starFilled": "{colors.warning.500}",
@@ -78,7 +118,17 @@ var coreTokens = {
78
118
  "link": "{colors.neutral.700}",
79
119
  "linkHover": "{colors.brand.600}",
80
120
  "linkActive": "{colors.brand.700}",
81
- "border": "{colors.neutral.200}"
121
+ "border": "{colors.neutral.200}",
122
+ "accent": {
123
+ "neutral": "{colors.neutral.600}",
124
+ "brand": "{colors.brand.600}",
125
+ "info": "{colors.info.600}",
126
+ "success": "{colors.success.600}",
127
+ "warning": "{colors.warning.600}",
128
+ "danger": "{colors.error.600}",
129
+ "cta": "{colors.brand.600}",
130
+ "thickness": "0.25rem"
131
+ }
82
132
  },
83
133
  "footer": {
84
134
  "bg": "{colors.neutral.900}",
@@ -89,13 +139,33 @@ var coreTokens = {
89
139
  "linkHover": "{colors.brand.400}",
90
140
  "border": "{colors.neutral.700}",
91
141
  "divider": "{colors.neutral.800}",
92
- "chipBg": "{colors.neutral.800}"
142
+ "chipBg": "{colors.neutral.800}",
143
+ "accent": {
144
+ "neutral": "{colors.neutral.600}",
145
+ "brand": "{colors.brand.600}",
146
+ "info": "{colors.info.600}",
147
+ "success": "{colors.success.600}",
148
+ "warning": "{colors.warning.600}",
149
+ "danger": "{colors.error.600}",
150
+ "cta": "{colors.brand.600}",
151
+ "thickness": "0.25rem"
152
+ }
93
153
  },
94
154
  "modal": {
95
155
  "bg": "{colors.white}",
96
156
  "shadow": "0 20px 48px -12px {colors.black} / 0.20",
97
157
  "border": "{colors.neutral.200}",
98
- "overlay": "{colors.black} / 0.6"
158
+ "overlay": "{colors.black} / 0.6",
159
+ "accent": {
160
+ "neutral": "{colors.neutral.600}",
161
+ "brand": "{colors.brand.600}",
162
+ "info": "{colors.info.600}",
163
+ "success": "{colors.success.600}",
164
+ "warning": "{colors.warning.600}",
165
+ "danger": "{colors.error.600}",
166
+ "cta": "{colors.brand.600}",
167
+ "thickness": "0.25rem"
168
+ }
99
169
  },
100
170
  "toast": {
101
171
  "success": {
@@ -121,12 +191,32 @@ var coreTokens = {
121
191
  "text": "{colors.info.800}",
122
192
  "border": "{colors.info.200}",
123
193
  "icon": "{colors.info.600}"
194
+ },
195
+ "accent": {
196
+ "neutral": "{colors.neutral.600}",
197
+ "brand": "{colors.brand.600}",
198
+ "info": "{colors.info.600}",
199
+ "success": "{colors.success.600}",
200
+ "warning": "{colors.warning.600}",
201
+ "danger": "{colors.error.600}",
202
+ "cta": "{colors.brand.600}",
203
+ "thickness": "0.25rem"
124
204
  }
125
205
  },
126
206
  "tooltip": {
127
207
  "bg": "{colors.neutral.900}",
128
208
  "text": "{colors.white}",
129
- "border": "{colors.neutral.700}"
209
+ "border": "{colors.neutral.700}",
210
+ "accent": {
211
+ "neutral": "{colors.neutral.600}",
212
+ "brand": "{colors.brand.600}",
213
+ "info": "{colors.info.600}",
214
+ "success": "{colors.success.600}",
215
+ "warning": "{colors.warning.600}",
216
+ "danger": "{colors.error.600}",
217
+ "cta": "{colors.brand.600}",
218
+ "thickness": "0.25rem"
219
+ }
130
220
  },
131
221
  "dropdown": {
132
222
  "bg": "{colors.white}",
@@ -136,6 +226,16 @@ var coreTokens = {
136
226
  "hover": "{colors.neutral.100}",
137
227
  "active": "{colors.info.50}",
138
228
  "text": "{colors.neutral.900}"
229
+ },
230
+ "accent": {
231
+ "neutral": "{colors.neutral.600}",
232
+ "brand": "{colors.brand.600}",
233
+ "info": "{colors.info.600}",
234
+ "success": "{colors.success.600}",
235
+ "warning": "{colors.warning.600}",
236
+ "danger": "{colors.error.600}",
237
+ "cta": "{colors.brand.600}",
238
+ "thickness": "0.25rem"
139
239
  }
140
240
  },
141
241
  "checkbox": {
@@ -345,7 +445,16 @@ var coreTokens = {
345
445
  "component": {
346
446
  "card": {
347
447
  "text": "{colors.neutral.900}",
348
- "textMuted": "{colors.neutral.600}"
448
+ "textMuted": "{colors.neutral.600}",
449
+ "accent": {
450
+ "neutral": "{colors.neutral.600}",
451
+ "brand": "{colors.brand.600}",
452
+ "info": "{colors.info.600}",
453
+ "success": "{colors.success.600}",
454
+ "warning": "{colors.warning.600}",
455
+ "danger": "{colors.error.600}",
456
+ "cta": "{colors.brand.600}"
457
+ }
349
458
  },
350
459
  "input": {
351
460
  "text": "{colors.neutral.900}",
@@ -367,7 +476,16 @@ var coreTokens = {
367
476
  "warningBg": "{colors.warning.100}",
368
477
  "warningText": "{colors.warning.800}",
369
478
  "dangerBg": "{colors.error.100}",
370
- "dangerText": "{colors.error.700}"
479
+ "dangerText": "{colors.error.700}",
480
+ "accent": {
481
+ "neutral": "{colors.neutral.600}",
482
+ "brand": "{colors.brand.600}",
483
+ "info": "{colors.info.600}",
484
+ "success": "{colors.success.600}",
485
+ "warning": "{colors.warning.600}",
486
+ "danger": "{colors.error.600}",
487
+ "cta": "{colors.brand.600}"
488
+ }
371
489
  },
372
490
  "iconBox": {
373
491
  "bg": "{colors.white}",
@@ -384,7 +502,16 @@ var coreTokens = {
384
502
  "text": "{colors.neutral.700}",
385
503
  "authorName": "{colors.neutral.900}",
386
504
  "authorTitle": "{colors.neutral.600}",
387
- "quoteMark": "{colors.neutral.600}"
505
+ "quoteMark": "{colors.neutral.600}",
506
+ "accent": {
507
+ "neutral": "{colors.neutral.600}",
508
+ "brand": "{colors.brand.600}",
509
+ "info": "{colors.info.600}",
510
+ "success": "{colors.success.600}",
511
+ "warning": "{colors.warning.600}",
512
+ "danger": "{colors.error.600}",
513
+ "cta": "{colors.brand.600}"
514
+ }
388
515
  },
389
516
  "pricingCard": {
390
517
  "bg": "{colors.white}",
@@ -395,7 +522,16 @@ var coreTokens = {
395
522
  "featuredBadgeBg": "{colors.warning.500}",
396
523
  "featuredBadgeText": "{colors.neutral.900}",
397
524
  "price": "{colors.neutral.900}",
398
- "priceDescription": "{colors.neutral.600}"
525
+ "priceDescription": "{colors.neutral.600}",
526
+ "accent": {
527
+ "neutral": "{colors.neutral.600}",
528
+ "brand": "{colors.brand.600}",
529
+ "info": "{colors.info.600}",
530
+ "success": "{colors.success.600}",
531
+ "warning": "{colors.warning.600}",
532
+ "danger": "{colors.error.600}",
533
+ "cta": "{colors.brand.600}"
534
+ }
399
535
  },
400
536
  "rating": {
401
537
  "starFilled": "{colors.warning.500}",
@@ -408,7 +544,16 @@ var coreTokens = {
408
544
  "link": "{colors.neutral.700}",
409
545
  "linkHover": "{colors.brand.600}",
410
546
  "linkActive": "{colors.brand.700}",
411
- "border": "{colors.neutral.200}"
547
+ "border": "{colors.neutral.200}",
548
+ "accent": {
549
+ "neutral": "{colors.neutral.600}",
550
+ "brand": "{colors.brand.600}",
551
+ "info": "{colors.info.600}",
552
+ "success": "{colors.success.600}",
553
+ "warning": "{colors.warning.600}",
554
+ "danger": "{colors.error.600}",
555
+ "cta": "{colors.brand.600}"
556
+ }
412
557
  },
413
558
  "footer": {
414
559
  "bg": "{colors.neutral.900}",
@@ -419,13 +564,31 @@ var coreTokens = {
419
564
  "linkHover": "{colors.brand.400}",
420
565
  "border": "{colors.neutral.700}",
421
566
  "divider": "{colors.neutral.800}",
422
- "chipBg": "{colors.neutral.800}"
567
+ "chipBg": "{colors.neutral.800}",
568
+ "accent": {
569
+ "neutral": "{colors.neutral.600}",
570
+ "brand": "{colors.brand.600}",
571
+ "info": "{colors.info.600}",
572
+ "success": "{colors.success.600}",
573
+ "warning": "{colors.warning.600}",
574
+ "danger": "{colors.error.600}",
575
+ "cta": "{colors.brand.600}"
576
+ }
423
577
  },
424
578
  "modal": {
425
579
  "bg": "{colors.white}",
426
580
  "shadow": "0 20px 48px -12px {colors.black} / 0.20",
427
581
  "border": "{colors.neutral.200}",
428
- "overlay": "{colors.black} / 0.6"
582
+ "overlay": "{colors.black} / 0.6",
583
+ "accent": {
584
+ "neutral": "{colors.neutral.600}",
585
+ "brand": "{colors.brand.600}",
586
+ "info": "{colors.info.600}",
587
+ "success": "{colors.success.600}",
588
+ "warning": "{colors.warning.600}",
589
+ "danger": "{colors.error.600}",
590
+ "cta": "{colors.brand.600}"
591
+ }
429
592
  },
430
593
  "toast": {
431
594
  "success": {
@@ -451,12 +614,30 @@ var coreTokens = {
451
614
  "text": "{colors.info.800}",
452
615
  "border": "{colors.info.200}",
453
616
  "icon": "{colors.info.600}"
617
+ },
618
+ "accent": {
619
+ "neutral": "{colors.neutral.600}",
620
+ "brand": "{colors.brand.600}",
621
+ "info": "{colors.info.600}",
622
+ "success": "{colors.success.600}",
623
+ "warning": "{colors.warning.600}",
624
+ "danger": "{colors.error.600}",
625
+ "cta": "{colors.brand.600}"
454
626
  }
455
627
  },
456
628
  "tooltip": {
457
629
  "bg": "{colors.neutral.900}",
458
630
  "text": "{colors.white}",
459
- "border": "{colors.neutral.700}"
631
+ "border": "{colors.neutral.700}",
632
+ "accent": {
633
+ "neutral": "{colors.neutral.600}",
634
+ "brand": "{colors.brand.600}",
635
+ "info": "{colors.info.600}",
636
+ "success": "{colors.success.600}",
637
+ "warning": "{colors.warning.600}",
638
+ "danger": "{colors.error.600}",
639
+ "cta": "{colors.brand.600}"
640
+ }
460
641
  },
461
642
  "dropdown": {
462
643
  "bg": "{colors.white}",
@@ -466,6 +647,15 @@ var coreTokens = {
466
647
  "hover": "{colors.neutral.100}",
467
648
  "active": "{colors.info.50}",
468
649
  "text": "{colors.neutral.900}"
650
+ },
651
+ "accent": {
652
+ "neutral": "{colors.neutral.600}",
653
+ "brand": "{colors.brand.600}",
654
+ "info": "{colors.info.600}",
655
+ "success": "{colors.success.600}",
656
+ "warning": "{colors.warning.600}",
657
+ "danger": "{colors.error.600}",
658
+ "cta": "{colors.brand.600}"
469
659
  }
470
660
  },
471
661
  "checkbox": {
@@ -547,7 +737,16 @@ var coreTokens = {
547
737
  "component": {
548
738
  "card": {
549
739
  "text": "{colors.neutral.100}",
550
- "textMuted": "{colors.neutral.300}"
740
+ "textMuted": "{colors.neutral.300}",
741
+ "accent": {
742
+ "neutral": "{colors.neutral.400}",
743
+ "brand": "{colors.brand.400}",
744
+ "info": "{colors.info.400}",
745
+ "success": "{colors.success.400}",
746
+ "warning": "{colors.warning.400}",
747
+ "danger": "{colors.error.400}",
748
+ "cta": "{colors.brand.400}"
749
+ }
551
750
  },
552
751
  "input": {
553
752
  "text": "{colors.neutral.100}",
@@ -572,7 +771,16 @@ var coreTokens = {
572
771
  "warningText": "{colors.warning.100}",
573
772
  "dangerBg": "{colors.error.800}",
574
773
  "dangerBgHover": "{colors.error.700}",
575
- "dangerText": "{colors.error.100}"
774
+ "dangerText": "{colors.error.100}",
775
+ "accent": {
776
+ "neutral": "{colors.neutral.400}",
777
+ "brand": "{colors.brand.400}",
778
+ "info": "{colors.info.400}",
779
+ "success": "{colors.success.400}",
780
+ "warning": "{colors.warning.400}",
781
+ "danger": "{colors.error.400}",
782
+ "cta": "{colors.brand.400}"
783
+ }
576
784
  },
577
785
  "iconBox": {
578
786
  "bg": "{colors.neutral.800}",
@@ -589,7 +797,16 @@ var coreTokens = {
589
797
  "text": "{colors.neutral.200}",
590
798
  "authorName": "{colors.neutral.100}",
591
799
  "authorTitle": "{colors.neutral.300}",
592
- "quoteMark": "{colors.neutral.300}"
800
+ "quoteMark": "{colors.neutral.300}",
801
+ "accent": {
802
+ "neutral": "{colors.neutral.400}",
803
+ "brand": "{colors.brand.400}",
804
+ "info": "{colors.info.400}",
805
+ "success": "{colors.success.400}",
806
+ "warning": "{colors.warning.400}",
807
+ "danger": "{colors.error.400}",
808
+ "cta": "{colors.brand.400}"
809
+ }
593
810
  },
594
811
  "pricingCard": {
595
812
  "bg": "{colors.neutral.800}",
@@ -600,7 +817,16 @@ var coreTokens = {
600
817
  "featuredBadgeBg": "{colors.warning.500}",
601
818
  "featuredBadgeText": "{colors.neutral.900}",
602
819
  "price": "{colors.neutral.100}",
603
- "priceDescription": "{colors.neutral.300}"
820
+ "priceDescription": "{colors.neutral.300}",
821
+ "accent": {
822
+ "neutral": "{colors.neutral.400}",
823
+ "brand": "{colors.brand.400}",
824
+ "info": "{colors.info.400}",
825
+ "success": "{colors.success.400}",
826
+ "warning": "{colors.warning.400}",
827
+ "danger": "{colors.error.400}",
828
+ "cta": "{colors.brand.400}"
829
+ }
604
830
  },
605
831
  "rating": {
606
832
  "starFilled": "{colors.warning.400}",
@@ -613,7 +839,16 @@ var coreTokens = {
613
839
  "link": "{colors.neutral.300}",
614
840
  "linkHover": "{colors.brand.400}",
615
841
  "linkActive": "{colors.brand.300}",
616
- "border": "{colors.neutral.700}"
842
+ "border": "{colors.neutral.700}",
843
+ "accent": {
844
+ "neutral": "{colors.neutral.400}",
845
+ "brand": "{colors.brand.400}",
846
+ "info": "{colors.info.400}",
847
+ "success": "{colors.success.400}",
848
+ "warning": "{colors.warning.400}",
849
+ "danger": "{colors.error.400}",
850
+ "cta": "{colors.brand.400}"
851
+ }
617
852
  },
618
853
  "footer": {
619
854
  "bg": "{colors.black}",
@@ -624,13 +859,31 @@ var coreTokens = {
624
859
  "linkHover": "{colors.brand.300}",
625
860
  "border": "{colors.neutral.800}",
626
861
  "divider": "{colors.neutral.900}",
627
- "chipBg": "{colors.neutral.900}"
862
+ "chipBg": "{colors.neutral.900}",
863
+ "accent": {
864
+ "neutral": "{colors.neutral.400}",
865
+ "brand": "{colors.brand.400}",
866
+ "info": "{colors.info.400}",
867
+ "success": "{colors.success.400}",
868
+ "warning": "{colors.warning.400}",
869
+ "danger": "{colors.error.400}",
870
+ "cta": "{colors.brand.400}"
871
+ }
628
872
  },
629
873
  "modal": {
630
874
  "bg": "{colors.neutral.800}",
631
875
  "shadow": "0 20px 48px -12px {colors.black} / 0.20",
632
876
  "border": "{colors.neutral.700}",
633
- "overlay": "{colors.black} / 0.6"
877
+ "overlay": "{colors.black} / 0.6",
878
+ "accent": {
879
+ "neutral": "{colors.neutral.400}",
880
+ "brand": "{colors.brand.400}",
881
+ "info": "{colors.info.400}",
882
+ "success": "{colors.success.400}",
883
+ "warning": "{colors.warning.400}",
884
+ "danger": "{colors.error.400}",
885
+ "cta": "{colors.brand.400}"
886
+ }
634
887
  },
635
888
  "toast": {
636
889
  "success": {
@@ -656,12 +909,30 @@ var coreTokens = {
656
909
  "text": "{colors.info.100}",
657
910
  "border": "{colors.info.700}",
658
911
  "icon": "{colors.info.400}"
912
+ },
913
+ "accent": {
914
+ "neutral": "{colors.neutral.400}",
915
+ "brand": "{colors.brand.400}",
916
+ "info": "{colors.info.400}",
917
+ "success": "{colors.success.400}",
918
+ "warning": "{colors.warning.400}",
919
+ "danger": "{colors.error.400}",
920
+ "cta": "{colors.brand.400}"
659
921
  }
660
922
  },
661
923
  "tooltip": {
662
924
  "bg": "{colors.neutral.50}",
663
925
  "text": "{colors.neutral.900}",
664
- "border": "{colors.neutral.300}"
926
+ "border": "{colors.neutral.300}",
927
+ "accent": {
928
+ "neutral": "{colors.neutral.400}",
929
+ "brand": "{colors.brand.400}",
930
+ "info": "{colors.info.400}",
931
+ "success": "{colors.success.400}",
932
+ "warning": "{colors.warning.400}",
933
+ "danger": "{colors.error.400}",
934
+ "cta": "{colors.brand.400}"
935
+ }
665
936
  },
666
937
  "dropdown": {
667
938
  "bg": "{colors.neutral.800}",
@@ -671,6 +942,15 @@ var coreTokens = {
671
942
  "hover": "{colors.neutral.700}",
672
943
  "active": "{colors.info.900}",
673
944
  "text": "{colors.neutral.100}"
945
+ },
946
+ "accent": {
947
+ "neutral": "{colors.neutral.400}",
948
+ "brand": "{colors.brand.400}",
949
+ "info": "{colors.info.400}",
950
+ "success": "{colors.success.400}",
951
+ "warning": "{colors.warning.400}",
952
+ "danger": "{colors.error.400}",
953
+ "cta": "{colors.brand.400}"
674
954
  }
675
955
  },
676
956
  "checkbox": {