@phcdevworks/spectre-tokens 2.1.1 → 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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phcdevworks/spectre-tokens",
3
- "version": "2.1.1",
3
+ "version": "2.2.0",
4
4
  "description": "@phcdevworks/spectre-tokens is the design-token package of the Spectre system for downstream Spectre packages and compatible applications.",
5
5
  "keywords": [
6
6
  "phcdevworks",
@@ -48,39 +48,45 @@
48
48
  "dist",
49
49
  "tokens"
50
50
  ],
51
- "sideEffects": false,
51
+ "sideEffects": [
52
+ "./dist/index.css"
53
+ ],
52
54
  "scripts": {
53
55
  "generate": "tsx scripts/generate-types.ts",
54
56
  "prebuild": "npm run generate",
55
- "build": "npm run build:ts && npm run build:css && npm run check:tokens",
57
+ "build": "npm run build:ts && npm run build:css",
56
58
  "build:ts": "tsup --config tsup.config.ts",
57
59
  "build:css": "tsx scripts/build-css.ts",
58
- "check:tokens": "tsx scripts/assert-core-tokens.ts",
60
+ "check:structure": "tsx scripts/assert-core-tokens.ts",
61
+ "check:locked": "tsx scripts/check-locked-color-contracts.ts",
59
62
  "check:contrast": "tsx scripts/check-contrast.ts",
60
63
  "check:regression": "tsx scripts/check-tokens-regression.ts",
61
64
  "lint": "eslint .",
62
65
  "format": "prettier --write .",
63
- "check": "npm run check:tokens && npm run check:contrast && npm run check:regression && npm run lint",
66
+ "check": "npm run build && npm run check:structure && npm run check:locked && npm run check:contrast && npm run check:regression && npm run lint",
64
67
  "check:all": "npm run check",
65
68
  "test": "npm run check"
66
69
  },
67
70
  "publishConfig": {
68
71
  "access": "public"
69
72
  },
73
+ "peerDependencies": {
74
+ "typescript": "^5.9 || ^6.0"
75
+ },
70
76
  "devDependencies": {
71
77
  "@types/chroma-js": "^3.1.2",
72
- "@types/node": "^25.5.0",
73
- "@typescript-eslint/eslint-plugin": "^8.57.1",
74
- "@typescript-eslint/parser": "^8.57.1",
78
+ "@types/node": "^25.6.0",
79
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
80
+ "@typescript-eslint/parser": "^8.58.1",
75
81
  "chroma-js": "^3.2.0",
76
82
  "colord": "^2.9.3",
77
- "eslint": "^10.1.0",
83
+ "eslint": "^10.2.0",
78
84
  "jiti": "^2.6.1",
79
- "prettier": "^3.8.1",
85
+ "prettier": "^3.8.2",
80
86
  "ts-node": "^10.9.2",
81
87
  "tsup": "^8.5.1",
82
88
  "tsx": "^4.21.0",
83
- "typescript": "^5.9.3",
84
- "typescript-eslint": "^8.57.1"
89
+ "typescript": "^6.0.2",
90
+ "typescript-eslint": "^8.58.1"
85
91
  }
86
92
  }
@@ -2,18 +2,30 @@
2
2
  "component": {
3
3
  "card": {
4
4
  "text": {
5
- "value": "{colors.neutral.900}"
5
+ "value": "{colors.neutral.900}",
6
+ "metadata": {
7
+ "pair": "surface.card"
8
+ }
6
9
  },
7
10
  "textMuted": {
8
- "value": "{colors.neutral.500}"
11
+ "value": "{colors.neutral.500}",
12
+ "metadata": {
13
+ "pair": "surface.card"
14
+ }
9
15
  }
10
16
  },
11
17
  "input": {
12
18
  "text": {
13
- "value": "{colors.neutral.900}"
19
+ "value": "{colors.neutral.900}",
20
+ "metadata": {
21
+ "pair": "surface.input"
22
+ }
14
23
  },
15
24
  "placeholder": {
16
- "value": "{colors.neutral.400}"
25
+ "value": "{colors.neutral.500}",
26
+ "metadata": {
27
+ "pair": "forms.default.bg"
28
+ }
17
29
  }
18
30
  },
19
31
  "button": {
@@ -103,13 +115,19 @@
103
115
  },
104
116
  "iconBox": {
105
117
  "bg": {
106
- "value": "{colors.white}"
118
+ "value": "{colors.white}",
119
+ "metadata": {
120
+ "pair": "component.iconBox.iconDefault"
121
+ }
107
122
  },
108
123
  "border": {
109
124
  "value": "{colors.neutral.200}"
110
125
  },
111
126
  "iconDefault": {
112
- "value": "{colors.info.600}"
127
+ "value": "{colors.info.600}",
128
+ "metadata": {
129
+ "pair": "component.iconBox.bg"
130
+ }
113
131
  },
114
132
  "iconSuccess": {
115
133
  "value": "{colors.success.600}"
@@ -123,19 +141,37 @@
123
141
  },
124
142
  "testimonial": {
125
143
  "bg": {
126
- "value": "{colors.white}"
144
+ "value": "{colors.white}",
145
+ "metadata": {
146
+ "pair": "component.testimonial.text"
147
+ }
148
+ },
149
+ "bgHover": {
150
+ "value": "{colors.neutral.50}",
151
+ "metadata": {
152
+ "pair": "component.testimonial.text"
153
+ }
127
154
  },
128
155
  "border": {
129
156
  "value": "{colors.neutral.200}"
130
157
  },
131
158
  "text": {
132
- "value": "{colors.neutral.700}"
159
+ "value": "{colors.neutral.700}",
160
+ "metadata": {
161
+ "pair": "component.testimonial.bg"
162
+ }
133
163
  },
134
164
  "authorName": {
135
- "value": "{colors.neutral.900}"
165
+ "value": "{colors.neutral.900}",
166
+ "metadata": {
167
+ "pair": "component.testimonial.bg"
168
+ }
136
169
  },
137
170
  "authorTitle": {
138
- "value": "{colors.neutral.500}"
171
+ "value": "{colors.neutral.500}",
172
+ "metadata": {
173
+ "pair": "component.testimonial.bg"
174
+ }
139
175
  },
140
176
  "quoteMark": {
141
177
  "value": "{colors.neutral.300}"
@@ -144,7 +180,15 @@
144
180
  "pricingCard": {
145
181
  "bg": {
146
182
  "value": "{colors.white}",
147
- "metadata": {}
183
+ "metadata": {
184
+ "pair": "component.pricingCard.price"
185
+ }
186
+ },
187
+ "bgHover": {
188
+ "value": "{colors.neutral.50}",
189
+ "metadata": {
190
+ "pair": "component.pricingCard.price"
191
+ }
148
192
  },
149
193
  "border": {
150
194
  "value": "{colors.neutral.200}",
@@ -172,11 +216,15 @@
172
216
  },
173
217
  "price": {
174
218
  "value": "{colors.neutral.900}",
175
- "metadata": {}
219
+ "metadata": {
220
+ "pair": "component.pricingCard.bg"
221
+ }
176
222
  },
177
223
  "priceDescription": {
178
224
  "value": "{colors.neutral.500}",
179
- "metadata": {}
225
+ "metadata": {
226
+ "pair": "component.pricingCard.bg"
227
+ }
180
228
  }
181
229
  },
182
230
  "rating": {
@@ -187,7 +235,10 @@
187
235
  "value": "{colors.neutral.200}"
188
236
  },
189
237
  "text": {
190
- "value": "{colors.neutral.500}"
238
+ "value": "{colors.neutral.500}",
239
+ "metadata": {
240
+ "pair": "surface.card"
241
+ }
191
242
  }
192
243
  }
193
244
  },
@@ -222,6 +273,9 @@
222
273
  },
223
274
  "focusRing": {
224
275
  "value": "{colors.info.500} / 0.4"
276
+ },
277
+ "focusVisible": {
278
+ "value": "{buttons.primary.focusRing}"
225
279
  }
226
280
  },
227
281
  "secondary": {
@@ -260,6 +314,9 @@
260
314
  },
261
315
  "focusRing": {
262
316
  "value": "{colors.info.500} / 0.4"
317
+ },
318
+ "focusVisible": {
319
+ "value": "{buttons.secondary.focusRing}"
263
320
  }
264
321
  },
265
322
  "ghost": {
@@ -289,6 +346,9 @@
289
346
  },
290
347
  "focusRing": {
291
348
  "value": "{colors.info.500} / 0.4"
349
+ },
350
+ "focusVisible": {
351
+ "value": "{buttons.ghost.focusRing}"
292
352
  }
293
353
  },
294
354
  "danger": {
@@ -420,6 +480,9 @@
420
480
  },
421
481
  "focusRing": {
422
482
  "value": "{colors.accent.500} / 0.4"
483
+ },
484
+ "focusVisible": {
485
+ "value": "{buttons.accent.focusRing}"
423
486
  }
424
487
  }
425
488
  },
@@ -435,7 +498,10 @@
435
498
  "value": "{colors.neutral.900}"
436
499
  },
437
500
  "placeholder": {
438
- "value": "{colors.neutral.400}"
501
+ "value": "{colors.neutral.500}",
502
+ "metadata": {
503
+ "pair": "forms.default.bg"
504
+ }
439
505
  }
440
506
  },
441
507
  "hover": {
@@ -451,6 +517,14 @@
451
517
  "value": "{colors.info.500}"
452
518
  }
453
519
  },
520
+ "focusVisible": {
521
+ "border": {
522
+ "value": "{forms.focus.border}"
523
+ },
524
+ "ring": {
525
+ "value": "{forms.focus.ring}"
526
+ }
527
+ },
454
528
  "valid": {
455
529
  "border": {
456
530
  "value": "{colors.success.500}"
package/tokens/modes.json CHANGED
@@ -102,18 +102,30 @@
102
102
  "component": {
103
103
  "card": {
104
104
  "text": {
105
- "value": "{colors.neutral.900}"
105
+ "value": "{colors.neutral.900}",
106
+ "metadata": {
107
+ "pair": "modes.default.surface.card"
108
+ }
106
109
  },
107
110
  "textMuted": {
108
- "value": "{colors.neutral.500}"
111
+ "value": "{colors.neutral.600}",
112
+ "metadata": {
113
+ "pair": "modes.default.surface.card"
114
+ }
109
115
  }
110
116
  },
111
117
  "input": {
112
118
  "text": {
113
- "value": "{colors.neutral.900}"
119
+ "value": "{colors.neutral.900}",
120
+ "metadata": {
121
+ "pair": "modes.default.surface.input"
122
+ }
114
123
  },
115
124
  "placeholder": {
116
- "value": "{colors.neutral.400}"
125
+ "value": "{colors.neutral.500}",
126
+ "metadata": {
127
+ "pair": "modes.default.surface.input"
128
+ }
117
129
  }
118
130
  },
119
131
  "button": {
@@ -131,6 +143,12 @@
131
143
  "pair": "modes.default.component.badge.neutralText"
132
144
  }
133
145
  },
146
+ "neutralBgHover": {
147
+ "value": "{colors.neutral.200}",
148
+ "metadata": {
149
+ "pair": "modes.default.component.badge.neutralText"
150
+ }
151
+ },
134
152
  "neutralText": {
135
153
  "value": "{colors.neutral.700}",
136
154
  "metadata": {}
@@ -141,6 +159,12 @@
141
159
  "pair": "modes.default.component.badge.infoText"
142
160
  }
143
161
  },
162
+ "infoBgHover": {
163
+ "value": "{colors.info.200}",
164
+ "metadata": {
165
+ "pair": "modes.default.component.badge.infoText"
166
+ }
167
+ },
144
168
  "infoText": {
145
169
  "value": "{colors.info.700}",
146
170
  "metadata": {}
@@ -179,7 +203,9 @@
179
203
  "iconBox": {
180
204
  "bg": {
181
205
  "value": "{colors.white}",
182
- "metadata": {}
206
+ "metadata": {
207
+ "pair": "modes.default.component.iconBox.iconDefault"
208
+ }
183
209
  },
184
210
  "border": {
185
211
  "value": "{colors.neutral.200}",
@@ -187,7 +213,9 @@
187
213
  },
188
214
  "iconDefault": {
189
215
  "value": "{colors.info.600}",
190
- "metadata": {}
216
+ "metadata": {
217
+ "pair": "modes.default.component.iconBox.bg"
218
+ }
191
219
  },
192
220
  "iconSuccess": {
193
221
  "value": "{colors.success.600}",
@@ -199,7 +227,9 @@
199
227
  },
200
228
  "iconDanger": {
201
229
  "value": "{colors.error.600}",
202
- "metadata": {}
230
+ "metadata": {
231
+ "pair": "modes.default.component.iconBox.bg"
232
+ }
203
233
  }
204
234
  },
205
235
  "testimonial": {
@@ -209,6 +239,12 @@
209
239
  "pair": "modes.default.component.testimonial.text"
210
240
  }
211
241
  },
242
+ "bgHover": {
243
+ "value": "{colors.neutral.50}",
244
+ "metadata": {
245
+ "pair": "modes.default.component.testimonial.text"
246
+ }
247
+ },
212
248
  "border": {
213
249
  "value": "{colors.neutral.200}",
214
250
  "metadata": {}
@@ -232,8 +268,10 @@
232
268
  }
233
269
  },
234
270
  "quoteMark": {
235
- "value": "{colors.neutral.300}",
236
- "metadata": {}
271
+ "value": "{colors.neutral.500}",
272
+ "metadata": {
273
+ "pair": "modes.default.component.testimonial.bg"
274
+ }
237
275
  }
238
276
  },
239
277
  "pricingCard": {
@@ -243,6 +281,12 @@
243
281
  "pair": "modes.default.component.pricingCard.price"
244
282
  }
245
283
  },
284
+ "bgHover": {
285
+ "value": "{colors.neutral.50}",
286
+ "metadata": {
287
+ "pair": "modes.default.component.pricingCard.price"
288
+ }
289
+ },
246
290
  "border": {
247
291
  "value": "{colors.neutral.200}",
248
292
  "metadata": {}
@@ -291,7 +335,9 @@
291
335
  },
292
336
  "text": {
293
337
  "value": "{colors.neutral.500}",
294
- "metadata": {}
338
+ "metadata": {
339
+ "pair": "modes.default.surface.card"
340
+ }
295
341
  }
296
342
  }
297
343
  }
@@ -338,19 +384,19 @@
338
384
  }
339
385
  },
340
386
  "muted": {
341
- "value": "{colors.neutral.200}",
387
+ "value": "{colors.neutral.300}",
342
388
  "metadata": {
343
389
  "pair": "modes.dark.surface.page"
344
390
  }
345
391
  },
346
392
  "subtle": {
347
- "value": "{colors.neutral.300}",
393
+ "value": "{colors.neutral.400}",
348
394
  "metadata": {
349
395
  "pair": "modes.dark.surface.page"
350
396
  }
351
397
  },
352
398
  "meta": {
353
- "value": "{colors.neutral.300}",
399
+ "value": "{colors.neutral.400}",
354
400
  "metadata": {
355
401
  "pair": "modes.dark.surface.page"
356
402
  }
@@ -370,19 +416,19 @@
370
416
  }
371
417
  },
372
418
  "muted": {
373
- "value": "{colors.neutral.200}",
419
+ "value": "{colors.neutral.300}",
374
420
  "metadata": {
375
421
  "pair": "modes.dark.surface.card"
376
422
  }
377
423
  },
378
424
  "subtle": {
379
- "value": "{colors.neutral.300}",
425
+ "value": "{colors.neutral.400}",
380
426
  "metadata": {
381
427
  "pair": "modes.dark.surface.card"
382
428
  }
383
429
  },
384
430
  "meta": {
385
- "value": "{colors.neutral.300}",
431
+ "value": "{colors.neutral.400}",
386
432
  "metadata": {
387
433
  "pair": "modes.dark.surface.card"
388
434
  }
@@ -404,7 +450,7 @@
404
450
  }
405
451
  },
406
452
  "textMuted": {
407
- "value": "{colors.neutral.200}",
453
+ "value": "{colors.neutral.300}",
408
454
  "metadata": {
409
455
  "pair": "modes.dark.surface.card"
410
456
  }
@@ -412,10 +458,16 @@
412
458
  },
413
459
  "input": {
414
460
  "text": {
415
- "value": "{colors.neutral.100}"
461
+ "value": "{colors.neutral.100}",
462
+ "metadata": {
463
+ "pair": "modes.dark.surface.input"
464
+ }
416
465
  },
417
466
  "placeholder": {
418
- "value": "{colors.neutral.400}"
467
+ "value": "{colors.neutral.300}",
468
+ "metadata": {
469
+ "pair": "modes.dark.surface.input"
470
+ }
419
471
  }
420
472
  },
421
473
  "button": {
@@ -444,7 +496,7 @@
444
496
  "metadata": {}
445
497
  },
446
498
  "infoBg": {
447
- "value": "{colors.info.900}",
499
+ "value": "{colors.info.800}",
448
500
  "metadata": {
449
501
  "pair": "modes.dark.component.badge.infoText"
450
502
  }
@@ -511,27 +563,37 @@
511
563
  "iconBox": {
512
564
  "bg": {
513
565
  "value": "{colors.neutral.800}",
514
- "metadata": {}
566
+ "metadata": {
567
+ "pair": "modes.dark.component.iconBox.iconDefault"
568
+ }
515
569
  },
516
570
  "border": {
517
571
  "value": "{colors.neutral.700}",
518
572
  "metadata": {}
519
573
  },
520
574
  "iconDefault": {
521
- "value": "{colors.info.300}",
522
- "metadata": {}
575
+ "value": "{colors.info.400}",
576
+ "metadata": {
577
+ "pair": "modes.dark.component.iconBox.bg"
578
+ }
523
579
  },
524
580
  "iconSuccess": {
525
581
  "value": "{colors.success.400}",
526
- "metadata": {}
582
+ "metadata": {
583
+ "pair": "modes.dark.component.iconBox.bg"
584
+ }
527
585
  },
528
586
  "iconWarning": {
529
587
  "value": "{colors.warning.400}",
530
- "metadata": {}
588
+ "metadata": {
589
+ "pair": "modes.dark.component.iconBox.bg"
590
+ }
531
591
  },
532
592
  "iconDanger": {
533
593
  "value": "{colors.error.400}",
534
- "metadata": {}
594
+ "metadata": {
595
+ "pair": "modes.dark.component.iconBox.bg"
596
+ }
535
597
  }
536
598
  },
537
599
  "testimonial": {
@@ -541,6 +603,12 @@
541
603
  "pair": "modes.dark.component.testimonial.text"
542
604
  }
543
605
  },
606
+ "bgHover": {
607
+ "value": "{colors.neutral.700}",
608
+ "metadata": {
609
+ "pair": "modes.dark.component.testimonial.text"
610
+ }
611
+ },
544
612
  "border": {
545
613
  "value": "{colors.neutral.700}",
546
614
  "metadata": {}
@@ -558,14 +626,16 @@
558
626
  }
559
627
  },
560
628
  "authorTitle": {
561
- "value": "{colors.neutral.300}",
629
+ "value": "{colors.neutral.400}",
562
630
  "metadata": {
563
631
  "pair": "modes.dark.component.testimonial.bg"
564
632
  }
565
633
  },
566
634
  "quoteMark": {
567
- "value": "{colors.neutral.600}",
568
- "metadata": {}
635
+ "value": "{colors.neutral.400}",
636
+ "metadata": {
637
+ "pair": "modes.dark.component.testimonial.bg"
638
+ }
569
639
  }
570
640
  },
571
641
  "pricingCard": {
@@ -575,6 +645,12 @@
575
645
  "pair": "modes.dark.component.pricingCard.price"
576
646
  }
577
647
  },
648
+ "bgHover": {
649
+ "value": "{colors.neutral.700}",
650
+ "metadata": {
651
+ "pair": "modes.dark.component.pricingCard.price"
652
+ }
653
+ },
578
654
  "border": {
579
655
  "value": "{colors.neutral.700}",
580
656
  "metadata": {}
@@ -606,7 +682,7 @@
606
682
  }
607
683
  },
608
684
  "priceDescription": {
609
- "value": "{colors.neutral.300}",
685
+ "value": "{colors.neutral.400}",
610
686
  "metadata": {
611
687
  "pair": "modes.dark.component.pricingCard.bg"
612
688
  }
@@ -623,7 +699,9 @@
623
699
  },
624
700
  "text": {
625
701
  "value": "{colors.neutral.400}",
626
- "metadata": {}
702
+ "metadata": {
703
+ "pair": "modes.dark.surface.card"
704
+ }
627
705
  }
628
706
  }
629
707
  }
@@ -138,10 +138,6 @@
138
138
  "minTouchTarget": "44px",
139
139
  "minTextSize": "16px"
140
140
  },
141
- "borders": {
142
- "card": "{colors.neutral.200}",
143
- "input": "{colors.neutral.300}"
144
- },
145
141
  "border": {
146
142
  "width": {
147
143
  "base": "1px",
@@ -18,7 +18,7 @@
18
18
  "lg": {
19
19
  "size": "1.25rem",
20
20
  "lineHeight": "2rem",
21
- "weight": 500
21
+ "weight": 600
22
22
  },
23
23
  "xl": {
24
24
  "size": "1.5rem",
@@ -28,7 +28,27 @@
28
28
  "2xl": {
29
29
  "size": "1.875rem",
30
30
  "lineHeight": "2.5rem",
31
- "weight": 600
31
+ "weight": 700
32
+ },
33
+ "3xl": {
34
+ "size": "2.25rem",
35
+ "lineHeight": "2.75rem",
36
+ "weight": 700
37
+ },
38
+ "4xl": {
39
+ "size": "3rem",
40
+ "lineHeight": "3.5rem",
41
+ "weight": 800
42
+ },
43
+ "5xl": {
44
+ "size": "3.75rem",
45
+ "lineHeight": "4.25rem",
46
+ "weight": 800
47
+ },
48
+ "6xl": {
49
+ "size": "4.5rem",
50
+ "lineHeight": "5rem",
51
+ "weight": 900
32
52
  }
33
53
  },
34
54
  "typography": {