@phcdevworks/spectre-tokens 4.7.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 +11 -11
  11. package/tokens/components.json +310 -0
  12. package/tokens/modes.json +604 -4
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # @phcdevworks/spectre-tokens
2
2
 
3
- `@phcdevworks/spectre-tokens` is the design-token package of the Spectre system.
4
- It provides a complete, UI-ready token surface for downstream Spectre packages
5
- and compatible applications.
3
+ `@phcdevworks/spectre-tokens` is the design-token foundation of the Spectre
4
+ system. It provides the shared visual values and semantic contracts used across
5
+ Spectre packages and PHCDevworks applications.
6
6
 
7
7
  Maintained by [PHCDevworks](https://go.phcdev.co). It defines the visual
8
8
  language, semantic roles, and token contracts that downstream consumers can rely
@@ -17,7 +17,7 @@ contracts for specific frameworks and runtimes.
17
17
  | Project team | `project-design` |
18
18
  | Repository role | Spectre L1 design-token contract |
19
19
  | Package/artifact | `@phcdevworks/spectre-tokens` |
20
- | Current version/status | 4.7.0 |
20
+ | Current version/status | 4.9.0 |
21
21
 
22
22
  ## Standard Workflow
23
23
 
package/dist/index.cjs CHANGED
@@ -36,6 +36,16 @@ var coreTokens = {
36
36
  "sm": "1.5rem",
37
37
  "md": "2rem",
38
38
  "lg": "2.5rem"
39
+ },
40
+ "accent": {
41
+ "neutral": "{colors.neutral.600}",
42
+ "brand": "{colors.brand.600}",
43
+ "info": "{colors.info.600}",
44
+ "success": "{colors.success.600}",
45
+ "warning": "{colors.warning.600}",
46
+ "danger": "{colors.error.600}",
47
+ "cta": "{colors.brand.600}",
48
+ "thickness": "0.25rem"
39
49
  }
40
50
  },
41
51
  "input": {
@@ -65,7 +75,17 @@ var coreTokens = {
65
75
  "inverseBg": "{colors.white} / 0.16",
66
76
  "inverseBgHover": "{colors.white} / 0.24",
67
77
  "inverseText": "{colors.white}",
68
- "inverseBorder": "{colors.white} / 0.3"
78
+ "inverseBorder": "{colors.white} / 0.3",
79
+ "accent": {
80
+ "neutral": "{colors.neutral.600}",
81
+ "brand": "{colors.brand.600}",
82
+ "info": "{colors.info.600}",
83
+ "success": "{colors.success.600}",
84
+ "warning": "{colors.warning.600}",
85
+ "danger": "{colors.error.600}",
86
+ "cta": "{colors.brand.600}",
87
+ "thickness": "0.25rem"
88
+ }
69
89
  },
70
90
  "iconBox": {
71
91
  "bg": "{colors.white}",
@@ -82,7 +102,17 @@ var coreTokens = {
82
102
  "text": "{colors.neutral.700}",
83
103
  "authorName": "{colors.neutral.900}",
84
104
  "authorTitle": "{colors.neutral.600}",
85
- "quoteMark": "{colors.neutral.600}"
105
+ "quoteMark": "{colors.neutral.600}",
106
+ "accent": {
107
+ "neutral": "{colors.neutral.600}",
108
+ "brand": "{colors.brand.600}",
109
+ "info": "{colors.info.600}",
110
+ "success": "{colors.success.600}",
111
+ "warning": "{colors.warning.600}",
112
+ "danger": "{colors.error.600}",
113
+ "cta": "{colors.brand.600}",
114
+ "thickness": "0.25rem"
115
+ }
86
116
  },
87
117
  "pricingCard": {
88
118
  "bg": "{colors.white}",
@@ -93,7 +123,17 @@ var coreTokens = {
93
123
  "featuredBadgeBg": "{colors.warning.500}",
94
124
  "featuredBadgeText": "{colors.neutral.900}",
95
125
  "price": "{colors.neutral.900}",
96
- "priceDescription": "{colors.neutral.600}"
126
+ "priceDescription": "{colors.neutral.600}",
127
+ "accent": {
128
+ "neutral": "{colors.neutral.600}",
129
+ "brand": "{colors.brand.600}",
130
+ "info": "{colors.info.600}",
131
+ "success": "{colors.success.600}",
132
+ "warning": "{colors.warning.600}",
133
+ "danger": "{colors.error.600}",
134
+ "cta": "{colors.brand.600}",
135
+ "thickness": "0.25rem"
136
+ }
97
137
  },
98
138
  "rating": {
99
139
  "starFilled": "{colors.warning.500}",
@@ -106,7 +146,17 @@ var coreTokens = {
106
146
  "link": "{colors.neutral.700}",
107
147
  "linkHover": "{colors.brand.600}",
108
148
  "linkActive": "{colors.brand.700}",
109
- "border": "{colors.neutral.200}"
149
+ "border": "{colors.neutral.200}",
150
+ "accent": {
151
+ "neutral": "{colors.neutral.600}",
152
+ "brand": "{colors.brand.600}",
153
+ "info": "{colors.info.600}",
154
+ "success": "{colors.success.600}",
155
+ "warning": "{colors.warning.600}",
156
+ "danger": "{colors.error.600}",
157
+ "cta": "{colors.brand.600}",
158
+ "thickness": "0.25rem"
159
+ }
110
160
  },
111
161
  "footer": {
112
162
  "bg": "{colors.neutral.900}",
@@ -117,13 +167,33 @@ var coreTokens = {
117
167
  "linkHover": "{colors.brand.400}",
118
168
  "border": "{colors.neutral.700}",
119
169
  "divider": "{colors.neutral.800}",
120
- "chipBg": "{colors.neutral.800}"
170
+ "chipBg": "{colors.neutral.800}",
171
+ "accent": {
172
+ "neutral": "{colors.neutral.600}",
173
+ "brand": "{colors.brand.600}",
174
+ "info": "{colors.info.600}",
175
+ "success": "{colors.success.600}",
176
+ "warning": "{colors.warning.600}",
177
+ "danger": "{colors.error.600}",
178
+ "cta": "{colors.brand.600}",
179
+ "thickness": "0.25rem"
180
+ }
121
181
  },
122
182
  "modal": {
123
183
  "bg": "{colors.white}",
124
184
  "shadow": "0 20px 48px -12px {colors.black} / 0.20",
125
185
  "border": "{colors.neutral.200}",
126
- "overlay": "{colors.black} / 0.6"
186
+ "overlay": "{colors.black} / 0.6",
187
+ "accent": {
188
+ "neutral": "{colors.neutral.600}",
189
+ "brand": "{colors.brand.600}",
190
+ "info": "{colors.info.600}",
191
+ "success": "{colors.success.600}",
192
+ "warning": "{colors.warning.600}",
193
+ "danger": "{colors.error.600}",
194
+ "cta": "{colors.brand.600}",
195
+ "thickness": "0.25rem"
196
+ }
127
197
  },
128
198
  "toast": {
129
199
  "success": {
@@ -149,12 +219,32 @@ var coreTokens = {
149
219
  "text": "{colors.info.800}",
150
220
  "border": "{colors.info.200}",
151
221
  "icon": "{colors.info.600}"
222
+ },
223
+ "accent": {
224
+ "neutral": "{colors.neutral.600}",
225
+ "brand": "{colors.brand.600}",
226
+ "info": "{colors.info.600}",
227
+ "success": "{colors.success.600}",
228
+ "warning": "{colors.warning.600}",
229
+ "danger": "{colors.error.600}",
230
+ "cta": "{colors.brand.600}",
231
+ "thickness": "0.25rem"
152
232
  }
153
233
  },
154
234
  "tooltip": {
155
235
  "bg": "{colors.neutral.900}",
156
236
  "text": "{colors.white}",
157
- "border": "{colors.neutral.700}"
237
+ "border": "{colors.neutral.700}",
238
+ "accent": {
239
+ "neutral": "{colors.neutral.600}",
240
+ "brand": "{colors.brand.600}",
241
+ "info": "{colors.info.600}",
242
+ "success": "{colors.success.600}",
243
+ "warning": "{colors.warning.600}",
244
+ "danger": "{colors.error.600}",
245
+ "cta": "{colors.brand.600}",
246
+ "thickness": "0.25rem"
247
+ }
158
248
  },
159
249
  "dropdown": {
160
250
  "bg": "{colors.white}",
@@ -164,6 +254,16 @@ var coreTokens = {
164
254
  "hover": "{colors.neutral.100}",
165
255
  "active": "{colors.info.50}",
166
256
  "text": "{colors.neutral.900}"
257
+ },
258
+ "accent": {
259
+ "neutral": "{colors.neutral.600}",
260
+ "brand": "{colors.brand.600}",
261
+ "info": "{colors.info.600}",
262
+ "success": "{colors.success.600}",
263
+ "warning": "{colors.warning.600}",
264
+ "danger": "{colors.error.600}",
265
+ "cta": "{colors.brand.600}",
266
+ "thickness": "0.25rem"
167
267
  }
168
268
  },
169
269
  "checkbox": {
@@ -373,7 +473,16 @@ var coreTokens = {
373
473
  "component": {
374
474
  "card": {
375
475
  "text": "{colors.neutral.900}",
376
- "textMuted": "{colors.neutral.600}"
476
+ "textMuted": "{colors.neutral.600}",
477
+ "accent": {
478
+ "neutral": "{colors.neutral.600}",
479
+ "brand": "{colors.brand.600}",
480
+ "info": "{colors.info.600}",
481
+ "success": "{colors.success.600}",
482
+ "warning": "{colors.warning.600}",
483
+ "danger": "{colors.error.600}",
484
+ "cta": "{colors.brand.600}"
485
+ }
377
486
  },
378
487
  "input": {
379
488
  "text": "{colors.neutral.900}",
@@ -395,7 +504,16 @@ var coreTokens = {
395
504
  "warningBg": "{colors.warning.100}",
396
505
  "warningText": "{colors.warning.800}",
397
506
  "dangerBg": "{colors.error.100}",
398
- "dangerText": "{colors.error.700}"
507
+ "dangerText": "{colors.error.700}",
508
+ "accent": {
509
+ "neutral": "{colors.neutral.600}",
510
+ "brand": "{colors.brand.600}",
511
+ "info": "{colors.info.600}",
512
+ "success": "{colors.success.600}",
513
+ "warning": "{colors.warning.600}",
514
+ "danger": "{colors.error.600}",
515
+ "cta": "{colors.brand.600}"
516
+ }
399
517
  },
400
518
  "iconBox": {
401
519
  "bg": "{colors.white}",
@@ -412,7 +530,16 @@ var coreTokens = {
412
530
  "text": "{colors.neutral.700}",
413
531
  "authorName": "{colors.neutral.900}",
414
532
  "authorTitle": "{colors.neutral.600}",
415
- "quoteMark": "{colors.neutral.600}"
533
+ "quoteMark": "{colors.neutral.600}",
534
+ "accent": {
535
+ "neutral": "{colors.neutral.600}",
536
+ "brand": "{colors.brand.600}",
537
+ "info": "{colors.info.600}",
538
+ "success": "{colors.success.600}",
539
+ "warning": "{colors.warning.600}",
540
+ "danger": "{colors.error.600}",
541
+ "cta": "{colors.brand.600}"
542
+ }
416
543
  },
417
544
  "pricingCard": {
418
545
  "bg": "{colors.white}",
@@ -423,7 +550,16 @@ var coreTokens = {
423
550
  "featuredBadgeBg": "{colors.warning.500}",
424
551
  "featuredBadgeText": "{colors.neutral.900}",
425
552
  "price": "{colors.neutral.900}",
426
- "priceDescription": "{colors.neutral.600}"
553
+ "priceDescription": "{colors.neutral.600}",
554
+ "accent": {
555
+ "neutral": "{colors.neutral.600}",
556
+ "brand": "{colors.brand.600}",
557
+ "info": "{colors.info.600}",
558
+ "success": "{colors.success.600}",
559
+ "warning": "{colors.warning.600}",
560
+ "danger": "{colors.error.600}",
561
+ "cta": "{colors.brand.600}"
562
+ }
427
563
  },
428
564
  "rating": {
429
565
  "starFilled": "{colors.warning.500}",
@@ -436,7 +572,16 @@ var coreTokens = {
436
572
  "link": "{colors.neutral.700}",
437
573
  "linkHover": "{colors.brand.600}",
438
574
  "linkActive": "{colors.brand.700}",
439
- "border": "{colors.neutral.200}"
575
+ "border": "{colors.neutral.200}",
576
+ "accent": {
577
+ "neutral": "{colors.neutral.600}",
578
+ "brand": "{colors.brand.600}",
579
+ "info": "{colors.info.600}",
580
+ "success": "{colors.success.600}",
581
+ "warning": "{colors.warning.600}",
582
+ "danger": "{colors.error.600}",
583
+ "cta": "{colors.brand.600}"
584
+ }
440
585
  },
441
586
  "footer": {
442
587
  "bg": "{colors.neutral.900}",
@@ -447,13 +592,31 @@ var coreTokens = {
447
592
  "linkHover": "{colors.brand.400}",
448
593
  "border": "{colors.neutral.700}",
449
594
  "divider": "{colors.neutral.800}",
450
- "chipBg": "{colors.neutral.800}"
595
+ "chipBg": "{colors.neutral.800}",
596
+ "accent": {
597
+ "neutral": "{colors.neutral.600}",
598
+ "brand": "{colors.brand.600}",
599
+ "info": "{colors.info.600}",
600
+ "success": "{colors.success.600}",
601
+ "warning": "{colors.warning.600}",
602
+ "danger": "{colors.error.600}",
603
+ "cta": "{colors.brand.600}"
604
+ }
451
605
  },
452
606
  "modal": {
453
607
  "bg": "{colors.white}",
454
608
  "shadow": "0 20px 48px -12px {colors.black} / 0.20",
455
609
  "border": "{colors.neutral.200}",
456
- "overlay": "{colors.black} / 0.6"
610
+ "overlay": "{colors.black} / 0.6",
611
+ "accent": {
612
+ "neutral": "{colors.neutral.600}",
613
+ "brand": "{colors.brand.600}",
614
+ "info": "{colors.info.600}",
615
+ "success": "{colors.success.600}",
616
+ "warning": "{colors.warning.600}",
617
+ "danger": "{colors.error.600}",
618
+ "cta": "{colors.brand.600}"
619
+ }
457
620
  },
458
621
  "toast": {
459
622
  "success": {
@@ -479,12 +642,30 @@ var coreTokens = {
479
642
  "text": "{colors.info.800}",
480
643
  "border": "{colors.info.200}",
481
644
  "icon": "{colors.info.600}"
645
+ },
646
+ "accent": {
647
+ "neutral": "{colors.neutral.600}",
648
+ "brand": "{colors.brand.600}",
649
+ "info": "{colors.info.600}",
650
+ "success": "{colors.success.600}",
651
+ "warning": "{colors.warning.600}",
652
+ "danger": "{colors.error.600}",
653
+ "cta": "{colors.brand.600}"
482
654
  }
483
655
  },
484
656
  "tooltip": {
485
657
  "bg": "{colors.neutral.900}",
486
658
  "text": "{colors.white}",
487
- "border": "{colors.neutral.700}"
659
+ "border": "{colors.neutral.700}",
660
+ "accent": {
661
+ "neutral": "{colors.neutral.600}",
662
+ "brand": "{colors.brand.600}",
663
+ "info": "{colors.info.600}",
664
+ "success": "{colors.success.600}",
665
+ "warning": "{colors.warning.600}",
666
+ "danger": "{colors.error.600}",
667
+ "cta": "{colors.brand.600}"
668
+ }
488
669
  },
489
670
  "dropdown": {
490
671
  "bg": "{colors.white}",
@@ -494,6 +675,15 @@ var coreTokens = {
494
675
  "hover": "{colors.neutral.100}",
495
676
  "active": "{colors.info.50}",
496
677
  "text": "{colors.neutral.900}"
678
+ },
679
+ "accent": {
680
+ "neutral": "{colors.neutral.600}",
681
+ "brand": "{colors.brand.600}",
682
+ "info": "{colors.info.600}",
683
+ "success": "{colors.success.600}",
684
+ "warning": "{colors.warning.600}",
685
+ "danger": "{colors.error.600}",
686
+ "cta": "{colors.brand.600}"
497
687
  }
498
688
  },
499
689
  "checkbox": {
@@ -575,7 +765,16 @@ var coreTokens = {
575
765
  "component": {
576
766
  "card": {
577
767
  "text": "{colors.neutral.100}",
578
- "textMuted": "{colors.neutral.300}"
768
+ "textMuted": "{colors.neutral.300}",
769
+ "accent": {
770
+ "neutral": "{colors.neutral.400}",
771
+ "brand": "{colors.brand.400}",
772
+ "info": "{colors.info.400}",
773
+ "success": "{colors.success.400}",
774
+ "warning": "{colors.warning.400}",
775
+ "danger": "{colors.error.400}",
776
+ "cta": "{colors.brand.400}"
777
+ }
579
778
  },
580
779
  "input": {
581
780
  "text": "{colors.neutral.100}",
@@ -600,7 +799,16 @@ var coreTokens = {
600
799
  "warningText": "{colors.warning.100}",
601
800
  "dangerBg": "{colors.error.800}",
602
801
  "dangerBgHover": "{colors.error.700}",
603
- "dangerText": "{colors.error.100}"
802
+ "dangerText": "{colors.error.100}",
803
+ "accent": {
804
+ "neutral": "{colors.neutral.400}",
805
+ "brand": "{colors.brand.400}",
806
+ "info": "{colors.info.400}",
807
+ "success": "{colors.success.400}",
808
+ "warning": "{colors.warning.400}",
809
+ "danger": "{colors.error.400}",
810
+ "cta": "{colors.brand.400}"
811
+ }
604
812
  },
605
813
  "iconBox": {
606
814
  "bg": "{colors.neutral.800}",
@@ -617,7 +825,16 @@ var coreTokens = {
617
825
  "text": "{colors.neutral.200}",
618
826
  "authorName": "{colors.neutral.100}",
619
827
  "authorTitle": "{colors.neutral.300}",
620
- "quoteMark": "{colors.neutral.300}"
828
+ "quoteMark": "{colors.neutral.300}",
829
+ "accent": {
830
+ "neutral": "{colors.neutral.400}",
831
+ "brand": "{colors.brand.400}",
832
+ "info": "{colors.info.400}",
833
+ "success": "{colors.success.400}",
834
+ "warning": "{colors.warning.400}",
835
+ "danger": "{colors.error.400}",
836
+ "cta": "{colors.brand.400}"
837
+ }
621
838
  },
622
839
  "pricingCard": {
623
840
  "bg": "{colors.neutral.800}",
@@ -628,7 +845,16 @@ var coreTokens = {
628
845
  "featuredBadgeBg": "{colors.warning.500}",
629
846
  "featuredBadgeText": "{colors.neutral.900}",
630
847
  "price": "{colors.neutral.100}",
631
- "priceDescription": "{colors.neutral.300}"
848
+ "priceDescription": "{colors.neutral.300}",
849
+ "accent": {
850
+ "neutral": "{colors.neutral.400}",
851
+ "brand": "{colors.brand.400}",
852
+ "info": "{colors.info.400}",
853
+ "success": "{colors.success.400}",
854
+ "warning": "{colors.warning.400}",
855
+ "danger": "{colors.error.400}",
856
+ "cta": "{colors.brand.400}"
857
+ }
632
858
  },
633
859
  "rating": {
634
860
  "starFilled": "{colors.warning.400}",
@@ -641,7 +867,16 @@ var coreTokens = {
641
867
  "link": "{colors.neutral.300}",
642
868
  "linkHover": "{colors.brand.400}",
643
869
  "linkActive": "{colors.brand.300}",
644
- "border": "{colors.neutral.700}"
870
+ "border": "{colors.neutral.700}",
871
+ "accent": {
872
+ "neutral": "{colors.neutral.400}",
873
+ "brand": "{colors.brand.400}",
874
+ "info": "{colors.info.400}",
875
+ "success": "{colors.success.400}",
876
+ "warning": "{colors.warning.400}",
877
+ "danger": "{colors.error.400}",
878
+ "cta": "{colors.brand.400}"
879
+ }
645
880
  },
646
881
  "footer": {
647
882
  "bg": "{colors.black}",
@@ -652,13 +887,31 @@ var coreTokens = {
652
887
  "linkHover": "{colors.brand.300}",
653
888
  "border": "{colors.neutral.800}",
654
889
  "divider": "{colors.neutral.900}",
655
- "chipBg": "{colors.neutral.900}"
890
+ "chipBg": "{colors.neutral.900}",
891
+ "accent": {
892
+ "neutral": "{colors.neutral.400}",
893
+ "brand": "{colors.brand.400}",
894
+ "info": "{colors.info.400}",
895
+ "success": "{colors.success.400}",
896
+ "warning": "{colors.warning.400}",
897
+ "danger": "{colors.error.400}",
898
+ "cta": "{colors.brand.400}"
899
+ }
656
900
  },
657
901
  "modal": {
658
902
  "bg": "{colors.neutral.800}",
659
903
  "shadow": "0 20px 48px -12px {colors.black} / 0.20",
660
904
  "border": "{colors.neutral.700}",
661
- "overlay": "{colors.black} / 0.6"
905
+ "overlay": "{colors.black} / 0.6",
906
+ "accent": {
907
+ "neutral": "{colors.neutral.400}",
908
+ "brand": "{colors.brand.400}",
909
+ "info": "{colors.info.400}",
910
+ "success": "{colors.success.400}",
911
+ "warning": "{colors.warning.400}",
912
+ "danger": "{colors.error.400}",
913
+ "cta": "{colors.brand.400}"
914
+ }
662
915
  },
663
916
  "toast": {
664
917
  "success": {
@@ -684,12 +937,30 @@ var coreTokens = {
684
937
  "text": "{colors.info.100}",
685
938
  "border": "{colors.info.700}",
686
939
  "icon": "{colors.info.400}"
940
+ },
941
+ "accent": {
942
+ "neutral": "{colors.neutral.400}",
943
+ "brand": "{colors.brand.400}",
944
+ "info": "{colors.info.400}",
945
+ "success": "{colors.success.400}",
946
+ "warning": "{colors.warning.400}",
947
+ "danger": "{colors.error.400}",
948
+ "cta": "{colors.brand.400}"
687
949
  }
688
950
  },
689
951
  "tooltip": {
690
952
  "bg": "{colors.neutral.50}",
691
953
  "text": "{colors.neutral.900}",
692
- "border": "{colors.neutral.300}"
954
+ "border": "{colors.neutral.300}",
955
+ "accent": {
956
+ "neutral": "{colors.neutral.400}",
957
+ "brand": "{colors.brand.400}",
958
+ "info": "{colors.info.400}",
959
+ "success": "{colors.success.400}",
960
+ "warning": "{colors.warning.400}",
961
+ "danger": "{colors.error.400}",
962
+ "cta": "{colors.brand.400}"
963
+ }
693
964
  },
694
965
  "dropdown": {
695
966
  "bg": "{colors.neutral.800}",
@@ -699,6 +970,15 @@ var coreTokens = {
699
970
  "hover": "{colors.neutral.700}",
700
971
  "active": "{colors.info.900}",
701
972
  "text": "{colors.neutral.100}"
973
+ },
974
+ "accent": {
975
+ "neutral": "{colors.neutral.400}",
976
+ "brand": "{colors.brand.400}",
977
+ "info": "{colors.info.400}",
978
+ "success": "{colors.success.400}",
979
+ "warning": "{colors.warning.400}",
980
+ "danger": "{colors.error.400}",
981
+ "cta": "{colors.brand.400}"
702
982
  }
703
983
  },
704
984
  "checkbox": {