@phcdevworks/spectre-tokens 2.1.0 → 2.1.2

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 (13) hide show
  1. package/LICENSE +12 -13
  2. package/README.md +138 -1456
  3. package/dist/index.cjs +449 -167
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +174 -174
  6. package/dist/index.d.cts +309 -27
  7. package/dist/index.d.ts +309 -27
  8. package/dist/index.js +449 -167
  9. package/dist/index.js.map +1 -1
  10. package/package.json +16 -13
  11. package/tokens/components.json +144 -45
  12. package/tokens/modes.json +250 -67
  13. package/tokens/palette.json +55 -55
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@phcdevworks/spectre-tokens",
3
- "version": "2.1.0",
4
- "description": "Spectre design tokens with JS, TS, Tailwind, and CSS variable outputs.",
3
+ "version": "2.1.2",
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"
@@ -56,32 +52,39 @@
56
52
  "scripts": {
57
53
  "generate": "tsx scripts/generate-types.ts",
58
54
  "prebuild": "npm run generate",
59
- "build": "npm run build:ts && npm run build:css && npm run check:tokens",
55
+ "build": "npm run build:ts && npm run build:css",
60
56
  "build:ts": "tsup --config tsup.config.ts",
61
57
  "build:css": "tsx scripts/build-css.ts",
62
- "check:tokens": "tsx scripts/assert-core-tokens.ts",
58
+ "check:structure": "tsx scripts/assert-core-tokens.ts",
59
+ "check:locked": "tsx scripts/check-locked-color-contracts.ts",
63
60
  "check:contrast": "tsx scripts/check-contrast.ts",
64
61
  "check:regression": "tsx scripts/check-tokens-regression.ts",
65
62
  "lint": "eslint .",
66
63
  "format": "prettier --write .",
67
- "check": "npm run check:tokens && npm run check:contrast && npm run check:regression && npm run lint",
64
+ "check": "npm run build && npm run check:structure && npm run check:locked && npm run check:contrast && npm run check:regression && npm run lint",
68
65
  "check:all": "npm run check",
69
66
  "test": "npm run check"
70
67
  },
71
68
  "publishConfig": {
72
69
  "access": "public"
73
70
  },
71
+ "peerDependencies": {
72
+ "typescript": "^5.9 || ^6.0"
73
+ },
74
74
  "devDependencies": {
75
75
  "@types/chroma-js": "^3.1.2",
76
- "@typescript-eslint/eslint-plugin": "^8.57.1",
77
- "@typescript-eslint/parser": "^8.57.1",
76
+ "@types/node": "^25.5.0",
77
+ "@typescript-eslint/eslint-plugin": "^8.58.0",
78
+ "@typescript-eslint/parser": "^8.58.0",
78
79
  "chroma-js": "^3.2.0",
79
80
  "colord": "^2.9.3",
80
81
  "eslint": "^10.1.0",
82
+ "jiti": "^2.6.1",
81
83
  "prettier": "^3.8.1",
82
84
  "ts-node": "^10.9.2",
83
85
  "tsup": "^8.5.1",
84
86
  "tsx": "^4.21.0",
85
- "typescript": "^5.9.3"
87
+ "typescript": "^6.0.2",
88
+ "typescript-eslint": "^8.58.0"
86
89
  }
87
90
  }
package/tokens/components.json CHANGED
@@ -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": {
@@ -32,7 +44,10 @@
32
44
  }
33
45
  },
34
46
  "neutralBgHover": {
35
- "value": "{colors.neutral.200}"
47
+ "value": "{colors.neutral.200}",
48
+ "metadata": {
49
+ "pair": "component.badge.neutralText"
50
+ }
36
51
  },
37
52
  "neutralText": {
38
53
  "value": "{colors.neutral.700}"
@@ -44,7 +59,10 @@
44
59
  }
45
60
  },
46
61
  "infoBgHover": {
47
- "value": "{colors.info.200}"
62
+ "value": "{colors.info.200}",
63
+ "metadata": {
64
+ "pair": "component.badge.infoText"
65
+ }
48
66
  },
49
67
  "infoText": {
50
68
  "value": "{colors.info.700}"
@@ -56,10 +74,13 @@
56
74
  }
57
75
  },
58
76
  "successBgHover": {
59
- "value": "{colors.success.200}"
77
+ "value": "{colors.success.200}",
78
+ "metadata": {
79
+ "pair": "component.badge.successText"
80
+ }
60
81
  },
61
82
  "successText": {
62
- "value": "{colors.success.700}"
83
+ "value": "{colors.success.800}"
63
84
  },
64
85
  "warningBg": {
65
86
  "value": "{colors.warning.100}",
@@ -68,10 +89,13 @@
68
89
  }
69
90
  },
70
91
  "warningBgHover": {
71
- "value": "{colors.warning.200}"
92
+ "value": "{colors.warning.200}",
93
+ "metadata": {
94
+ "pair": "component.badge.warningText"
95
+ }
72
96
  },
73
97
  "warningText": {
74
- "value": "{colors.warning.700}"
98
+ "value": "{colors.warning.800}"
75
99
  },
76
100
  "dangerBg": {
77
101
  "value": "{colors.error.100}",
@@ -80,21 +104,30 @@
80
104
  }
81
105
  },
82
106
  "dangerBgHover": {
83
- "value": "{colors.error.200}"
107
+ "value": "{colors.error.200}",
108
+ "metadata": {
109
+ "pair": "component.badge.dangerText"
110
+ }
84
111
  },
85
112
  "dangerText": {
86
- "value": "{colors.error.700}"
113
+ "value": "{colors.error.800}"
87
114
  }
88
115
  },
89
116
  "iconBox": {
90
117
  "bg": {
91
- "value": "{colors.white}"
118
+ "value": "{colors.white}",
119
+ "metadata": {
120
+ "pair": "component.iconBox.iconDefault"
121
+ }
92
122
  },
93
123
  "border": {
94
124
  "value": "{colors.neutral.200}"
95
125
  },
96
126
  "iconDefault": {
97
- "value": "{colors.info.600}"
127
+ "value": "{colors.info.600}",
128
+ "metadata": {
129
+ "pair": "component.iconBox.bg"
130
+ }
98
131
  },
99
132
  "iconSuccess": {
100
133
  "value": "{colors.success.600}"
@@ -108,19 +141,31 @@
108
141
  },
109
142
  "testimonial": {
110
143
  "bg": {
111
- "value": "{colors.white}"
144
+ "value": "{colors.white}",
145
+ "metadata": {
146
+ "pair": "component.testimonial.text"
147
+ }
112
148
  },
113
149
  "border": {
114
150
  "value": "{colors.neutral.200}"
115
151
  },
116
152
  "text": {
117
- "value": "{colors.neutral.700}"
153
+ "value": "{colors.neutral.700}",
154
+ "metadata": {
155
+ "pair": "component.testimonial.bg"
156
+ }
118
157
  },
119
158
  "authorName": {
120
- "value": "{colors.neutral.900}"
159
+ "value": "{colors.neutral.900}",
160
+ "metadata": {
161
+ "pair": "component.testimonial.bg"
162
+ }
121
163
  },
122
164
  "authorTitle": {
123
- "value": "{colors.neutral.500}"
165
+ "value": "{colors.neutral.500}",
166
+ "metadata": {
167
+ "pair": "component.testimonial.bg"
168
+ }
124
169
  },
125
170
  "quoteMark": {
126
171
  "value": "{colors.neutral.300}"
@@ -129,7 +174,9 @@
129
174
  "pricingCard": {
130
175
  "bg": {
131
176
  "value": "{colors.white}",
132
- "metadata": {}
177
+ "metadata": {
178
+ "pair": "component.pricingCard.price"
179
+ }
133
180
  },
134
181
  "border": {
135
182
  "value": "{colors.neutral.200}",
@@ -157,11 +204,15 @@
157
204
  },
158
205
  "price": {
159
206
  "value": "{colors.neutral.900}",
160
- "metadata": {}
207
+ "metadata": {
208
+ "pair": "component.pricingCard.bg"
209
+ }
161
210
  },
162
211
  "priceDescription": {
163
212
  "value": "{colors.neutral.500}",
164
- "metadata": {}
213
+ "metadata": {
214
+ "pair": "component.pricingCard.bg"
215
+ }
165
216
  }
166
217
  },
167
218
  "rating": {
@@ -172,7 +223,10 @@
172
223
  "value": "{colors.neutral.200}"
173
224
  },
174
225
  "text": {
175
- "value": "{colors.neutral.500}"
226
+ "value": "{colors.neutral.500}",
227
+ "metadata": {
228
+ "pair": "surface.card"
229
+ }
176
230
  }
177
231
  }
178
232
  },
@@ -185,10 +239,16 @@
185
239
  }
186
240
  },
187
241
  "bgHover": {
188
- "value": "{colors.info.700}"
242
+ "value": "{colors.info.700}",
243
+ "metadata": {
244
+ "pair": "buttons.primary.text"
245
+ }
189
246
  },
190
247
  "bgActive": {
191
- "value": "{colors.info.800}"
248
+ "value": "{colors.info.800}",
249
+ "metadata": {
250
+ "pair": "buttons.primary.text"
251
+ }
192
252
  },
193
253
  "bgDisabled": {
194
254
  "value": "{colors.neutral.200}"
@@ -211,22 +271,28 @@
211
271
  }
212
272
  },
213
273
  "bgHover": {
214
- "value": "{colors.neutral.50}"
274
+ "value": "{colors.neutral.50}",
275
+ "metadata": {
276
+ "pair": "buttons.secondary.text"
277
+ }
215
278
  },
216
279
  "bgActive": {
217
- "value": "{colors.neutral.100}"
280
+ "value": "{colors.neutral.100}",
281
+ "metadata": {
282
+ "pair": "buttons.secondary.text"
283
+ }
218
284
  },
219
285
  "bgDisabled": {
220
286
  "value": "{colors.neutral.50}"
221
287
  },
222
288
  "text": {
223
- "value": "{colors.info.600}"
289
+ "value": "{colors.info.700}"
224
290
  },
225
291
  "textDisabled": {
226
292
  "value": "{colors.neutral.400}"
227
293
  },
228
294
  "border": {
229
- "value": "{colors.info.600}"
295
+ "value": "{colors.info.700}"
230
296
  },
231
297
  "borderDisabled": {
232
298
  "value": "{colors.neutral.200}"
@@ -240,16 +306,22 @@
240
306
  "value": "transparent"
241
307
  },
242
308
  "bgHover": {
243
- "value": "{colors.info.50}"
309
+ "value": "{colors.info.50}",
310
+ "metadata": {
311
+ "pair": "buttons.ghost.text"
312
+ }
244
313
  },
245
314
  "bgActive": {
246
- "value": "{colors.info.100}"
315
+ "value": "{colors.info.100}",
316
+ "metadata": {
317
+ "pair": "buttons.ghost.text"
318
+ }
247
319
  },
248
320
  "bgDisabled": {
249
321
  "value": "transparent"
250
322
  },
251
323
  "text": {
252
- "value": "{colors.info.600}"
324
+ "value": "{colors.info.700}"
253
325
  },
254
326
  "textDisabled": {
255
327
  "value": "{colors.neutral.400}"
@@ -266,10 +338,16 @@
266
338
  }
267
339
  },
268
340
  "bgHover": {
269
- "value": "{colors.error.700}"
341
+ "value": "{colors.error.700}",
342
+ "metadata": {
343
+ "pair": "buttons.danger.text"
344
+ }
270
345
  },
271
346
  "bgActive": {
272
- "value": "{colors.error.800}"
347
+ "value": "{colors.error.800}",
348
+ "metadata": {
349
+ "pair": "buttons.danger.text"
350
+ }
273
351
  },
274
352
  "bgDisabled": {
275
353
  "value": "{colors.error.200}"
@@ -292,10 +370,16 @@
292
370
  }
293
371
  },
294
372
  "bgHover": {
295
- "value": "{colors.success.800}"
373
+ "value": "{colors.success.800}",
374
+ "metadata": {
375
+ "pair": "buttons.success.text"
376
+ }
296
377
  },
297
378
  "bgActive": {
298
- "value": "{colors.success.900}"
379
+ "value": "{colors.success.900}",
380
+ "metadata": {
381
+ "pair": "buttons.success.text"
382
+ }
299
383
  },
300
384
  "bgDisabled": {
301
385
  "value": "{colors.success.200}"
@@ -312,31 +396,37 @@
312
396
  },
313
397
  "cta": {
314
398
  "bg": {
315
- "value": "{colors.warning.500}",
399
+ "value": "{colors.brand.600}",
316
400
  "metadata": {
317
401
  "pair": "buttons.cta.text"
318
402
  }
319
403
  },
320
404
  "bgHover": {
321
- "value": "{colors.warning.600}"
405
+ "value": "{colors.brand.700}",
406
+ "metadata": {
407
+ "pair": "buttons.cta.text"
408
+ }
322
409
  },
323
410
  "bgActive": {
324
- "value": "{colors.warning.700}"
411
+ "value": "{colors.brand.800}",
412
+ "metadata": {
413
+ "pair": "buttons.cta.text"
414
+ }
325
415
  },
326
416
  "bgDisabled": {
327
- "value": "{colors.warning.200}"
417
+ "value": "{colors.brand.200}"
328
418
  },
329
419
  "text": {
330
- "value": "{colors.neutral.900}"
420
+ "value": "{colors.white}"
331
421
  },
332
422
  "textDisabled": {
333
423
  "value": "{colors.neutral.400}"
334
424
  },
335
425
  "shadow": {
336
- "value": "0 4px 14px 0 {colors.warning.500} / 0.39"
426
+ "value": "0 4px 14px 0 {colors.brand.500} / 0.39"
337
427
  },
338
428
  "focusRing": {
339
- "value": "{colors.warning.500} / 0.4"
429
+ "value": "{colors.brand.500} / 0.4"
340
430
  }
341
431
  },
342
432
  "accent": {
@@ -347,10 +437,16 @@
347
437
  }
348
438
  },
349
439
  "bgHover": {
350
- "value": "{colors.accent.700}"
440
+ "value": "{colors.accent.700}",
441
+ "metadata": {
442
+ "pair": "buttons.accent.text"
443
+ }
351
444
  },
352
445
  "bgActive": {
353
- "value": "{colors.accent.800}"
446
+ "value": "{colors.accent.800}",
447
+ "metadata": {
448
+ "pair": "buttons.accent.text"
449
+ }
354
450
  },
355
451
  "bgDisabled": {
356
452
  "value": "{colors.accent.200}"
@@ -378,7 +474,10 @@
378
474
  "value": "{colors.neutral.900}"
379
475
  },
380
476
  "placeholder": {
381
- "value": "{colors.neutral.400}"
477
+ "value": "{colors.neutral.500}",
478
+ "metadata": {
479
+ "pair": "forms.default.bg"
480
+ }
382
481
  }
383
482
  },
384
483
  "hover": {