@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.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@phcdevworks/spectre-tokens",
3
- "version": "2.0.0",
4
- "description": "Spectre design tokens with JS, TS, Tailwind, and CSS variable outputs.",
3
+ "version": "2.1.1",
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",
7
7
  "spectre",
@@ -23,15 +23,11 @@
23
23
  {
24
24
  "type": "github",
25
25
  "url": "https://github.com/sponsors/phcdevworks"
26
- },
27
- {
28
- "type": "buymeacoffee",
29
- "url": "https://buymeacoffee.com/phcdevworks"
30
26
  }
31
27
  ],
32
28
  "repository": {
33
29
  "type": "git",
34
- "url": "https://github.com/phcdevworks/spectre-tokens.git"
30
+ "url": "git+https://github.com/phcdevworks/spectre-tokens.git"
35
31
  },
36
32
  "bugs": {
37
33
  "url": "https://github.com/phcdevworks/spectre-tokens/issues"
@@ -62,8 +58,9 @@
62
58
  "check:tokens": "tsx scripts/assert-core-tokens.ts",
63
59
  "check:contrast": "tsx scripts/check-contrast.ts",
64
60
  "check:regression": "tsx scripts/check-tokens-regression.ts",
65
- "check:ai": "tsx skills/ai-implementation/scripts/verify-ai-readiness.ts",
66
- "check": "npm run check:tokens && npm run check:contrast && npm run check:regression && npm run check:ai",
61
+ "lint": "eslint .",
62
+ "format": "prettier --write .",
63
+ "check": "npm run check:tokens && npm run check:contrast && npm run check:regression && npm run lint",
67
64
  "check:all": "npm run check",
68
65
  "test": "npm run check"
69
66
  },
@@ -72,11 +69,18 @@
72
69
  },
73
70
  "devDependencies": {
74
71
  "@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",
75
75
  "chroma-js": "^3.2.0",
76
76
  "colord": "^2.9.3",
77
+ "eslint": "^10.1.0",
78
+ "jiti": "^2.6.1",
79
+ "prettier": "^3.8.1",
77
80
  "ts-node": "^10.9.2",
78
81
  "tsup": "^8.5.1",
79
- "tsx": "^4.16.2",
80
- "typescript": "^5.9.3"
82
+ "tsx": "^4.21.0",
83
+ "typescript": "^5.9.3",
84
+ "typescript-eslint": "^8.57.1"
81
85
  }
82
86
  }
@@ -1,155 +1,494 @@
1
1
  {
2
2
  "component": {
3
3
  "card": {
4
- "text": { "value": "{colors.neutral.900}" },
5
- "textMuted": { "value": "{colors.neutral.500}" }
4
+ "text": {
5
+ "value": "{colors.neutral.900}"
6
+ },
7
+ "textMuted": {
8
+ "value": "{colors.neutral.500}"
9
+ }
6
10
  },
7
11
  "input": {
8
- "text": { "value": "{colors.neutral.900}" },
9
- "placeholder": { "value": "{colors.neutral.400}" }
12
+ "text": {
13
+ "value": "{colors.neutral.900}"
14
+ },
15
+ "placeholder": {
16
+ "value": "{colors.neutral.400}"
17
+ }
10
18
  },
11
19
  "button": {
12
- "textDefault": { "value": "{colors.neutral.900}" },
13
- "textOnPrimary": { "value": "{colors.white}" }
20
+ "textDefault": {
21
+ "value": "{colors.neutral.900}"
22
+ },
23
+ "textOnPrimary": {
24
+ "value": "{colors.white}"
25
+ }
14
26
  },
15
27
  "badge": {
16
- "neutralBg": { "value": "{colors.neutral.100}", "metadata": { "pair": "component.badge.neutralText" } },
17
- "neutralBgHover": { "value": "{colors.neutral.200}" },
18
- "neutralText": { "value": "{colors.neutral.700}" },
19
- "infoBg": { "value": "{colors.info.100}", "metadata": { "pair": "component.badge.infoText" } },
20
- "infoBgHover": { "value": "{colors.info.200}" },
21
- "infoText": { "value": "{colors.info.700}" },
22
- "successBg": { "value": "{colors.success.100}", "metadata": { "pair": "component.badge.successText" } },
23
- "successBgHover": { "value": "{colors.success.200}" },
24
- "successText": { "value": "{colors.success.700}" },
25
- "warningBg": { "value": "{colors.warning.100}", "metadata": { "pair": "component.badge.warningText" } },
26
- "warningBgHover": { "value": "{colors.warning.200}" },
27
- "warningText": { "value": "{colors.warning.700}" },
28
- "dangerBg": { "value": "{colors.error.100}", "metadata": { "pair": "component.badge.dangerText" } },
29
- "dangerBgHover": { "value": "{colors.error.200}" },
30
- "dangerText": { "value": "{colors.error.700}" }
28
+ "neutralBg": {
29
+ "value": "{colors.neutral.100}",
30
+ "metadata": {
31
+ "pair": "component.badge.neutralText"
32
+ }
33
+ },
34
+ "neutralBgHover": {
35
+ "value": "{colors.neutral.200}",
36
+ "metadata": {
37
+ "pair": "component.badge.neutralText"
38
+ }
39
+ },
40
+ "neutralText": {
41
+ "value": "{colors.neutral.700}"
42
+ },
43
+ "infoBg": {
44
+ "value": "{colors.info.100}",
45
+ "metadata": {
46
+ "pair": "component.badge.infoText"
47
+ }
48
+ },
49
+ "infoBgHover": {
50
+ "value": "{colors.info.200}",
51
+ "metadata": {
52
+ "pair": "component.badge.infoText"
53
+ }
54
+ },
55
+ "infoText": {
56
+ "value": "{colors.info.700}"
57
+ },
58
+ "successBg": {
59
+ "value": "{colors.success.100}",
60
+ "metadata": {
61
+ "pair": "component.badge.successText"
62
+ }
63
+ },
64
+ "successBgHover": {
65
+ "value": "{colors.success.200}",
66
+ "metadata": {
67
+ "pair": "component.badge.successText"
68
+ }
69
+ },
70
+ "successText": {
71
+ "value": "{colors.success.800}"
72
+ },
73
+ "warningBg": {
74
+ "value": "{colors.warning.100}",
75
+ "metadata": {
76
+ "pair": "component.badge.warningText"
77
+ }
78
+ },
79
+ "warningBgHover": {
80
+ "value": "{colors.warning.200}",
81
+ "metadata": {
82
+ "pair": "component.badge.warningText"
83
+ }
84
+ },
85
+ "warningText": {
86
+ "value": "{colors.warning.800}"
87
+ },
88
+ "dangerBg": {
89
+ "value": "{colors.error.100}",
90
+ "metadata": {
91
+ "pair": "component.badge.dangerText"
92
+ }
93
+ },
94
+ "dangerBgHover": {
95
+ "value": "{colors.error.200}",
96
+ "metadata": {
97
+ "pair": "component.badge.dangerText"
98
+ }
99
+ },
100
+ "dangerText": {
101
+ "value": "{colors.error.800}"
102
+ }
31
103
  },
32
104
  "iconBox": {
33
- "bg": { "value": "{colors.white}" },
34
- "border": { "value": "{colors.neutral.200}" },
35
- "iconDefault": { "value": "{colors.info.600}" },
36
- "iconSuccess": { "value": "{colors.success.600}" },
37
- "iconWarning": { "value": "{colors.warning.600}" },
38
- "iconDanger": { "value": "{colors.error.600}" }
105
+ "bg": {
106
+ "value": "{colors.white}"
107
+ },
108
+ "border": {
109
+ "value": "{colors.neutral.200}"
110
+ },
111
+ "iconDefault": {
112
+ "value": "{colors.info.600}"
113
+ },
114
+ "iconSuccess": {
115
+ "value": "{colors.success.600}"
116
+ },
117
+ "iconWarning": {
118
+ "value": "{colors.warning.600}"
119
+ },
120
+ "iconDanger": {
121
+ "value": "{colors.error.600}"
122
+ }
39
123
  },
40
124
  "testimonial": {
41
- "bg": { "value": "{colors.white}" },
42
- "border": { "value": "{colors.neutral.200}" },
43
- "text": { "value": "{colors.neutral.700}" },
44
- "authorName": { "value": "{colors.neutral.900}" },
45
- "authorTitle": { "value": "{colors.neutral.500}" },
46
- "quoteMark": { "value": "{colors.neutral.300}" }
125
+ "bg": {
126
+ "value": "{colors.white}"
127
+ },
128
+ "border": {
129
+ "value": "{colors.neutral.200}"
130
+ },
131
+ "text": {
132
+ "value": "{colors.neutral.700}"
133
+ },
134
+ "authorName": {
135
+ "value": "{colors.neutral.900}"
136
+ },
137
+ "authorTitle": {
138
+ "value": "{colors.neutral.500}"
139
+ },
140
+ "quoteMark": {
141
+ "value": "{colors.neutral.300}"
142
+ }
47
143
  },
48
144
  "pricingCard": {
49
- "bg": { "value": "{colors.white}", "metadata": {} },
50
- "border": { "value": "{colors.neutral.200}", "metadata": {} },
51
- "featuredBg": { "value": "{colors.info.600}", "metadata": { "pair": "component.pricingCard.featuredText" } },
52
- "featuredText": { "value": "{colors.white}", "metadata": {} },
53
- "featuredBadgeBg": { "value": "{colors.warning.500}", "metadata": { "pair": "component.pricingCard.featuredBadgeText" } },
54
- "featuredBadgeText": { "value": "{colors.neutral.900}", "metadata": {} },
55
- "price": { "value": "{colors.neutral.900}", "metadata": {} },
56
- "priceDescription": { "value": "{colors.neutral.500}", "metadata": {} }
145
+ "bg": {
146
+ "value": "{colors.white}",
147
+ "metadata": {}
148
+ },
149
+ "border": {
150
+ "value": "{colors.neutral.200}",
151
+ "metadata": {}
152
+ },
153
+ "featuredBg": {
154
+ "value": "{colors.info.600}",
155
+ "metadata": {
156
+ "pair": "component.pricingCard.featuredText"
157
+ }
158
+ },
159
+ "featuredText": {
160
+ "value": "{colors.white}",
161
+ "metadata": {}
162
+ },
163
+ "featuredBadgeBg": {
164
+ "value": "{colors.warning.500}",
165
+ "metadata": {
166
+ "pair": "component.pricingCard.featuredBadgeText"
167
+ }
168
+ },
169
+ "featuredBadgeText": {
170
+ "value": "{colors.neutral.900}",
171
+ "metadata": {}
172
+ },
173
+ "price": {
174
+ "value": "{colors.neutral.900}",
175
+ "metadata": {}
176
+ },
177
+ "priceDescription": {
178
+ "value": "{colors.neutral.500}",
179
+ "metadata": {}
180
+ }
57
181
  },
58
182
  "rating": {
59
- "starFilled": { "value": "{colors.warning.500}" },
60
- "starEmpty": { "value": "{colors.neutral.200}" },
61
- "text": { "value": "{colors.neutral.500}" }
183
+ "starFilled": {
184
+ "value": "{colors.warning.500}"
185
+ },
186
+ "starEmpty": {
187
+ "value": "{colors.neutral.200}"
188
+ },
189
+ "text": {
190
+ "value": "{colors.neutral.500}"
191
+ }
62
192
  }
63
193
  },
64
194
  "buttons": {
65
195
  "primary": {
66
- "bg": { "value": "{colors.info.600}", "metadata": { "pair": "buttons.primary.text" } },
67
- "bgHover": { "value": "{colors.info.700}" },
68
- "bgActive": { "value": "{colors.info.800}" },
69
- "bgDisabled": { "value": "{colors.neutral.200}" },
70
- "text": { "value": "{colors.white}" },
71
- "textDisabled": { "value": "{colors.neutral.400}" }
196
+ "bg": {
197
+ "value": "{colors.info.600}",
198
+ "metadata": {
199
+ "pair": "buttons.primary.text"
200
+ }
201
+ },
202
+ "bgHover": {
203
+ "value": "{colors.info.700}",
204
+ "metadata": {
205
+ "pair": "buttons.primary.text"
206
+ }
207
+ },
208
+ "bgActive": {
209
+ "value": "{colors.info.800}",
210
+ "metadata": {
211
+ "pair": "buttons.primary.text"
212
+ }
213
+ },
214
+ "bgDisabled": {
215
+ "value": "{colors.neutral.200}"
216
+ },
217
+ "text": {
218
+ "value": "{colors.white}"
219
+ },
220
+ "textDisabled": {
221
+ "value": "{colors.neutral.400}"
222
+ },
223
+ "focusRing": {
224
+ "value": "{colors.info.500} / 0.4"
225
+ }
72
226
  },
73
227
  "secondary": {
74
- "bg": { "value": "{colors.white}", "metadata": { "pair": "buttons.secondary.text" } },
75
- "bgHover": { "value": "{colors.neutral.50}" },
76
- "bgActive": { "value": "{colors.neutral.100}" },
77
- "bgDisabled": { "value": "{colors.neutral.50}" },
78
- "text": { "value": "{colors.info.600}" },
79
- "textDisabled": { "value": "{colors.neutral.400}" },
80
- "border": { "value": "{colors.info.600}" },
81
- "borderDisabled": { "value": "{colors.neutral.200}" }
228
+ "bg": {
229
+ "value": "{colors.white}",
230
+ "metadata": {
231
+ "pair": "buttons.secondary.text"
232
+ }
233
+ },
234
+ "bgHover": {
235
+ "value": "{colors.neutral.50}",
236
+ "metadata": {
237
+ "pair": "buttons.secondary.text"
238
+ }
239
+ },
240
+ "bgActive": {
241
+ "value": "{colors.neutral.100}",
242
+ "metadata": {
243
+ "pair": "buttons.secondary.text"
244
+ }
245
+ },
246
+ "bgDisabled": {
247
+ "value": "{colors.neutral.50}"
248
+ },
249
+ "text": {
250
+ "value": "{colors.info.700}"
251
+ },
252
+ "textDisabled": {
253
+ "value": "{colors.neutral.400}"
254
+ },
255
+ "border": {
256
+ "value": "{colors.info.700}"
257
+ },
258
+ "borderDisabled": {
259
+ "value": "{colors.neutral.200}"
260
+ },
261
+ "focusRing": {
262
+ "value": "{colors.info.500} / 0.4"
263
+ }
82
264
  },
83
265
  "ghost": {
84
- "bg": { "value": "transparent" },
85
- "bgHover": { "value": "{colors.info.50}" },
86
- "bgActive": { "value": "{colors.info.100}" },
87
- "bgDisabled": { "value": "transparent" },
88
- "text": { "value": "{colors.info.600}" },
89
- "textDisabled": { "value": "{colors.neutral.400}" }
266
+ "bg": {
267
+ "value": "transparent"
268
+ },
269
+ "bgHover": {
270
+ "value": "{colors.info.50}",
271
+ "metadata": {
272
+ "pair": "buttons.ghost.text"
273
+ }
274
+ },
275
+ "bgActive": {
276
+ "value": "{colors.info.100}",
277
+ "metadata": {
278
+ "pair": "buttons.ghost.text"
279
+ }
280
+ },
281
+ "bgDisabled": {
282
+ "value": "transparent"
283
+ },
284
+ "text": {
285
+ "value": "{colors.info.700}"
286
+ },
287
+ "textDisabled": {
288
+ "value": "{colors.neutral.400}"
289
+ },
290
+ "focusRing": {
291
+ "value": "{colors.info.500} / 0.4"
292
+ }
90
293
  },
91
294
  "danger": {
92
- "bg": { "value": "{colors.error.600}", "metadata": { "pair": "buttons.danger.text" } },
93
- "bgHover": { "value": "{colors.error.700}" },
94
- "bgActive": { "value": "{colors.error.800}" },
95
- "bgDisabled": { "value": "{colors.error.200}" },
96
- "text": { "value": "{colors.white}" },
97
- "textDisabled": { "value": "{colors.neutral.400}" }
295
+ "bg": {
296
+ "value": "{colors.error.600}",
297
+ "metadata": {
298
+ "pair": "buttons.danger.text"
299
+ }
300
+ },
301
+ "bgHover": {
302
+ "value": "{colors.error.700}",
303
+ "metadata": {
304
+ "pair": "buttons.danger.text"
305
+ }
306
+ },
307
+ "bgActive": {
308
+ "value": "{colors.error.800}",
309
+ "metadata": {
310
+ "pair": "buttons.danger.text"
311
+ }
312
+ },
313
+ "bgDisabled": {
314
+ "value": "{colors.error.200}"
315
+ },
316
+ "text": {
317
+ "value": "{colors.white}"
318
+ },
319
+ "textDisabled": {
320
+ "value": "{colors.neutral.400}"
321
+ },
322
+ "focusRing": {
323
+ "value": "{colors.error.500} / 0.4"
324
+ }
98
325
  },
99
326
  "success": {
100
- "bg": { "value": "{colors.success.700}", "metadata": { "pair": "buttons.success.text" } },
101
- "bgHover": { "value": "{colors.success.800}" },
102
- "bgActive": { "value": "{colors.success.900}" },
103
- "bgDisabled": { "value": "{colors.success.200}" },
104
- "text": { "value": "{colors.white}" },
105
- "textDisabled": { "value": "{colors.neutral.400}" }
327
+ "bg": {
328
+ "value": "{colors.success.700}",
329
+ "metadata": {
330
+ "pair": "buttons.success.text"
331
+ }
332
+ },
333
+ "bgHover": {
334
+ "value": "{colors.success.800}",
335
+ "metadata": {
336
+ "pair": "buttons.success.text"
337
+ }
338
+ },
339
+ "bgActive": {
340
+ "value": "{colors.success.900}",
341
+ "metadata": {
342
+ "pair": "buttons.success.text"
343
+ }
344
+ },
345
+ "bgDisabled": {
346
+ "value": "{colors.success.200}"
347
+ },
348
+ "text": {
349
+ "value": "{colors.white}"
350
+ },
351
+ "textDisabled": {
352
+ "value": "{colors.neutral.400}"
353
+ },
354
+ "focusRing": {
355
+ "value": "{colors.success.500} / 0.4"
356
+ }
106
357
  },
107
358
  "cta": {
108
- "bg": { "value": "{colors.warning.500}", "metadata": { "pair": "buttons.cta.text" } },
109
- "bgHover": { "value": "{colors.warning.600}" },
110
- "bgActive": { "value": "{colors.warning.700}" },
111
- "bgDisabled": { "value": "{colors.warning.200}" },
112
- "text": { "value": "{colors.neutral.900}" },
113
- "textDisabled": { "value": "{colors.neutral.400}" },
114
- "shadow": { "value": "0 4px 14px 0 {colors.warning.500} / 0.39" }
359
+ "bg": {
360
+ "value": "{colors.brand.600}",
361
+ "metadata": {
362
+ "pair": "buttons.cta.text"
363
+ }
364
+ },
365
+ "bgHover": {
366
+ "value": "{colors.brand.700}",
367
+ "metadata": {
368
+ "pair": "buttons.cta.text"
369
+ }
370
+ },
371
+ "bgActive": {
372
+ "value": "{colors.brand.800}",
373
+ "metadata": {
374
+ "pair": "buttons.cta.text"
375
+ }
376
+ },
377
+ "bgDisabled": {
378
+ "value": "{colors.brand.200}"
379
+ },
380
+ "text": {
381
+ "value": "{colors.white}"
382
+ },
383
+ "textDisabled": {
384
+ "value": "{colors.neutral.400}"
385
+ },
386
+ "shadow": {
387
+ "value": "0 4px 14px 0 {colors.brand.500} / 0.39"
388
+ },
389
+ "focusRing": {
390
+ "value": "{colors.brand.500} / 0.4"
391
+ }
115
392
  },
116
393
  "accent": {
117
- "bg": { "value": "{colors.accent.600}", "metadata": { "pair": "buttons.accent.text" } },
118
- "bgHover": { "value": "{colors.accent.700}" },
119
- "bgActive": { "value": "{colors.accent.800}" },
120
- "bgDisabled": { "value": "{colors.accent.200}" },
121
- "text": { "value": "{colors.white}" },
122
- "textDisabled": { "value": "{colors.neutral.400}" }
394
+ "bg": {
395
+ "value": "{colors.accent.600}",
396
+ "metadata": {
397
+ "pair": "buttons.accent.text"
398
+ }
399
+ },
400
+ "bgHover": {
401
+ "value": "{colors.accent.700}",
402
+ "metadata": {
403
+ "pair": "buttons.accent.text"
404
+ }
405
+ },
406
+ "bgActive": {
407
+ "value": "{colors.accent.800}",
408
+ "metadata": {
409
+ "pair": "buttons.accent.text"
410
+ }
411
+ },
412
+ "bgDisabled": {
413
+ "value": "{colors.accent.200}"
414
+ },
415
+ "text": {
416
+ "value": "{colors.white}"
417
+ },
418
+ "textDisabled": {
419
+ "value": "{colors.neutral.400}"
420
+ },
421
+ "focusRing": {
422
+ "value": "{colors.accent.500} / 0.4"
423
+ }
123
424
  }
124
425
  },
125
426
  "forms": {
126
427
  "default": {
127
- "bg": { "value": "{colors.white}" },
128
- "border": { "value": "{colors.neutral.300}" },
129
- "text": { "value": "{colors.neutral.900}" },
130
- "placeholder": { "value": "{colors.neutral.400}" }
428
+ "bg": {
429
+ "value": "{colors.white}"
430
+ },
431
+ "border": {
432
+ "value": "{colors.neutral.300}"
433
+ },
434
+ "text": {
435
+ "value": "{colors.neutral.900}"
436
+ },
437
+ "placeholder": {
438
+ "value": "{colors.neutral.400}"
439
+ }
131
440
  },
132
441
  "hover": {
133
- "border": { "value": "{colors.info.500}" }
442
+ "border": {
443
+ "value": "{colors.info.500}"
444
+ }
134
445
  },
135
446
  "focus": {
136
- "border": { "value": "{colors.info.500}" },
137
- "ring": { "value": "{colors.info.500}" }
447
+ "border": {
448
+ "value": "{colors.info.500}"
449
+ },
450
+ "ring": {
451
+ "value": "{colors.info.500}"
452
+ }
138
453
  },
139
454
  "valid": {
140
- "border": { "value": "{colors.success.500}" },
141
- "bg": { "value": "{colors.success.50}", "metadata": { "pair": "forms.valid.text" } },
142
- "text": { "value": "{colors.success.700}" }
455
+ "border": {
456
+ "value": "{colors.success.500}"
457
+ },
458
+ "bg": {
459
+ "value": "{colors.success.50}",
460
+ "metadata": {
461
+ "pair": "forms.valid.text"
462
+ }
463
+ },
464
+ "text": {
465
+ "value": "{colors.success.700}"
466
+ }
143
467
  },
144
468
  "invalid": {
145
- "border": { "value": "{colors.error.500}" },
146
- "bg": { "value": "{colors.error.50}", "metadata": { "pair": "forms.invalid.text" } },
147
- "text": { "value": "{colors.error.700}" }
469
+ "border": {
470
+ "value": "{colors.error.500}"
471
+ },
472
+ "bg": {
473
+ "value": "{colors.error.50}",
474
+ "metadata": {
475
+ "pair": "forms.invalid.text"
476
+ }
477
+ },
478
+ "text": {
479
+ "value": "{colors.error.700}"
480
+ }
148
481
  },
149
482
  "disabled": {
150
- "bg": { "value": "{colors.neutral.50}" },
151
- "border": { "value": "{colors.neutral.200}" },
152
- "text": { "value": "{colors.neutral.400}" }
483
+ "bg": {
484
+ "value": "{colors.neutral.50}"
485
+ },
486
+ "border": {
487
+ "value": "{colors.neutral.200}"
488
+ },
489
+ "text": {
490
+ "value": "{colors.neutral.400}"
491
+ }
153
492
  }
154
493
  }
155
494
  }