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