@phcdevworks/spectre-tokens 2.4.0 → 2.6.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/README.md +172 -64
- package/dist/index.cjs +22 -22
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +4 -4
- package/dist/index.js +22 -22
- package/dist/index.js.map +1 -1
- package/package.json +15 -10
- package/tokens/components.json +33 -11
- package/tokens/modes.json +25 -9
- package/tokens/semantic-roles.json +69 -12
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phcdevworks/spectre-tokens",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.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",
|
|
@@ -33,12 +33,17 @@
|
|
|
33
33
|
"url": "https://github.com/phcdevworks/spectre-tokens/issues"
|
|
34
34
|
},
|
|
35
35
|
"homepage": "https://github.com/phcdevworks/spectre-tokens#readme",
|
|
36
|
+
"engines": {
|
|
37
|
+
"node": "^22.12.0 || >=24.0.0"
|
|
38
|
+
},
|
|
36
39
|
"type": "module",
|
|
40
|
+
"packageManager": "npm@11.14.1",
|
|
37
41
|
"main": "./dist/index.cjs",
|
|
38
42
|
"module": "./dist/index.js",
|
|
39
43
|
"types": "./dist/index.d.ts",
|
|
40
44
|
"exports": {
|
|
41
45
|
".": {
|
|
46
|
+
"types": "./dist/index.d.ts",
|
|
42
47
|
"import": "./dist/index.js",
|
|
43
48
|
"require": "./dist/index.cjs"
|
|
44
49
|
},
|
|
@@ -59,12 +64,12 @@
|
|
|
59
64
|
"build:css": "tsx scripts/build-css.ts",
|
|
60
65
|
"check:manifest": "tsx scripts/check-contract-manifest.ts",
|
|
61
66
|
"check:docs": "tsx scripts/check-doc-contract.ts",
|
|
62
|
-
"check:dist": "
|
|
67
|
+
"check:dist": "tsx scripts/check-dist-sync.ts",
|
|
63
68
|
"check:structure": "tsx scripts/assert-core-tokens.ts",
|
|
64
69
|
"check:locked": "tsx scripts/check-locked-color-contracts.ts",
|
|
65
70
|
"check:contrast": "tsx scripts/check-contrast.ts",
|
|
66
71
|
"check:regression": "tsx scripts/check-tokens-regression.ts",
|
|
67
|
-
"check:exports": "
|
|
72
|
+
"check:exports": "tsx scripts/check-public-exports.ts",
|
|
68
73
|
"check:css": "tsx scripts/check-css-contract.ts",
|
|
69
74
|
"check:tailwind": "tsx scripts/check-tailwind-contract.ts",
|
|
70
75
|
"check:consumer": "tsx scripts/check-consumer-smoke.ts",
|
|
@@ -83,17 +88,17 @@
|
|
|
83
88
|
"typescript": "^5.9 || ^6.0"
|
|
84
89
|
},
|
|
85
90
|
"devDependencies": {
|
|
86
|
-
"@types/node": "^25.
|
|
87
|
-
"@typescript-eslint/eslint-plugin": "^8.59.
|
|
88
|
-
"@typescript-eslint/parser": "^8.59.
|
|
91
|
+
"@types/node": "^25.9.1",
|
|
92
|
+
"@typescript-eslint/eslint-plugin": "^8.59.4",
|
|
93
|
+
"@typescript-eslint/parser": "^8.59.4",
|
|
89
94
|
"colord": "^2.9.3",
|
|
90
|
-
"eslint": "^10.
|
|
91
|
-
"jiti": "^2.
|
|
95
|
+
"eslint": "^10.4.0",
|
|
96
|
+
"jiti": "^2.7.0",
|
|
92
97
|
"prettier": "^3.8.3",
|
|
93
98
|
"ts-node": "^10.9.2",
|
|
94
99
|
"tsup": "^8.5.1",
|
|
95
|
-
"tsx": "^4.
|
|
100
|
+
"tsx": "^4.22.3",
|
|
96
101
|
"typescript": "^6.0.3",
|
|
97
|
-
"typescript-eslint": "^8.59.
|
|
102
|
+
"typescript-eslint": "^8.59.4"
|
|
98
103
|
}
|
|
99
104
|
}
|
package/tokens/components.json
CHANGED
|
@@ -50,7 +50,10 @@
|
|
|
50
50
|
}
|
|
51
51
|
},
|
|
52
52
|
"neutralText": {
|
|
53
|
-
"value": "{colors.neutral.700}"
|
|
53
|
+
"value": "{colors.neutral.700}",
|
|
54
|
+
"metadata": {
|
|
55
|
+
"pair": "component.badge.neutralBgHover"
|
|
56
|
+
}
|
|
54
57
|
},
|
|
55
58
|
"infoBg": {
|
|
56
59
|
"value": "{colors.info.100}",
|
|
@@ -65,7 +68,10 @@
|
|
|
65
68
|
}
|
|
66
69
|
},
|
|
67
70
|
"infoText": {
|
|
68
|
-
"value": "{colors.info.700}"
|
|
71
|
+
"value": "{colors.info.700}",
|
|
72
|
+
"metadata": {
|
|
73
|
+
"pair": "component.badge.infoBgHover"
|
|
74
|
+
}
|
|
69
75
|
},
|
|
70
76
|
"successBg": {
|
|
71
77
|
"value": "{colors.success.100}",
|
|
@@ -205,7 +211,9 @@
|
|
|
205
211
|
},
|
|
206
212
|
"featuredText": {
|
|
207
213
|
"value": "{colors.white}",
|
|
208
|
-
"metadata": {
|
|
214
|
+
"metadata": {
|
|
215
|
+
"pair": "component.pricingCard.featuredBg"
|
|
216
|
+
}
|
|
209
217
|
},
|
|
210
218
|
"featuredBadgeBg": {
|
|
211
219
|
"value": "{colors.warning.500}",
|
|
@@ -215,7 +223,9 @@
|
|
|
215
223
|
},
|
|
216
224
|
"featuredBadgeText": {
|
|
217
225
|
"value": "{colors.neutral.900}",
|
|
218
|
-
"metadata": {
|
|
226
|
+
"metadata": {
|
|
227
|
+
"pair": "component.pricingCard.featuredBadgeBg"
|
|
228
|
+
}
|
|
219
229
|
},
|
|
220
230
|
"price": {
|
|
221
231
|
"value": "{colors.neutral.900}",
|
|
@@ -269,7 +279,10 @@
|
|
|
269
279
|
"value": "{colors.neutral.200}"
|
|
270
280
|
},
|
|
271
281
|
"text": {
|
|
272
|
-
"value": "{colors.white}"
|
|
282
|
+
"value": "{colors.white}",
|
|
283
|
+
"metadata": {
|
|
284
|
+
"pair": "buttons.primary.bg"
|
|
285
|
+
}
|
|
273
286
|
},
|
|
274
287
|
"textDisabled": {
|
|
275
288
|
"value": "{colors.neutral.400}"
|
|
@@ -304,7 +317,10 @@
|
|
|
304
317
|
"value": "{colors.neutral.50}"
|
|
305
318
|
},
|
|
306
319
|
"text": {
|
|
307
|
-
"value": "{colors.info.700}"
|
|
320
|
+
"value": "{colors.info.700}",
|
|
321
|
+
"metadata": {
|
|
322
|
+
"pair": "buttons.secondary.bg"
|
|
323
|
+
}
|
|
308
324
|
},
|
|
309
325
|
"textDisabled": {
|
|
310
326
|
"value": "{colors.neutral.400}"
|
|
@@ -342,7 +358,10 @@
|
|
|
342
358
|
"value": "transparent"
|
|
343
359
|
},
|
|
344
360
|
"text": {
|
|
345
|
-
"value": "{colors.info.700}"
|
|
361
|
+
"value": "{colors.info.700}",
|
|
362
|
+
"metadata": {
|
|
363
|
+
"pair": "buttons.ghost.bgHover"
|
|
364
|
+
}
|
|
346
365
|
},
|
|
347
366
|
"textDisabled": {
|
|
348
367
|
"value": "{colors.neutral.400}"
|
|
@@ -455,19 +474,19 @@
|
|
|
455
474
|
},
|
|
456
475
|
"accent": {
|
|
457
476
|
"bg": {
|
|
458
|
-
"value": "{colors.accent.
|
|
477
|
+
"value": "{colors.accent.700}",
|
|
459
478
|
"metadata": {
|
|
460
479
|
"pair": "buttons.accent.text"
|
|
461
480
|
}
|
|
462
481
|
},
|
|
463
482
|
"bgHover": {
|
|
464
|
-
"value": "{colors.accent.
|
|
483
|
+
"value": "{colors.accent.800}",
|
|
465
484
|
"metadata": {
|
|
466
485
|
"pair": "buttons.accent.text"
|
|
467
486
|
}
|
|
468
487
|
},
|
|
469
488
|
"bgActive": {
|
|
470
|
-
"value": "{colors.accent.
|
|
489
|
+
"value": "{colors.accent.900}",
|
|
471
490
|
"metadata": {
|
|
472
491
|
"pair": "buttons.accent.text"
|
|
473
492
|
}
|
|
@@ -476,7 +495,10 @@
|
|
|
476
495
|
"value": "{colors.accent.200}"
|
|
477
496
|
},
|
|
478
497
|
"text": {
|
|
479
|
-
"value": "{colors.white}"
|
|
498
|
+
"value": "{colors.white}",
|
|
499
|
+
"metadata": {
|
|
500
|
+
"pair": "buttons.accent.bg"
|
|
501
|
+
}
|
|
480
502
|
},
|
|
481
503
|
"textDisabled": {
|
|
482
504
|
"value": "{colors.neutral.400}"
|
package/tokens/modes.json
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
}
|
|
22
22
|
},
|
|
23
23
|
"overlay": {
|
|
24
|
-
"value": "{colors.
|
|
24
|
+
"value": "{colors.black} / 0.6"
|
|
25
25
|
},
|
|
26
26
|
"alternate": {
|
|
27
27
|
"value": "{colors.neutral.100}",
|
|
@@ -151,7 +151,9 @@
|
|
|
151
151
|
},
|
|
152
152
|
"neutralText": {
|
|
153
153
|
"value": "{colors.neutral.700}",
|
|
154
|
-
"metadata": {
|
|
154
|
+
"metadata": {
|
|
155
|
+
"pair": "modes.default.component.badge.neutralBgHover"
|
|
156
|
+
}
|
|
155
157
|
},
|
|
156
158
|
"infoBg": {
|
|
157
159
|
"value": "{colors.info.100}",
|
|
@@ -167,7 +169,9 @@
|
|
|
167
169
|
},
|
|
168
170
|
"infoText": {
|
|
169
171
|
"value": "{colors.info.700}",
|
|
170
|
-
"metadata": {
|
|
172
|
+
"metadata": {
|
|
173
|
+
"pair": "modes.default.component.badge.infoBgHover"
|
|
174
|
+
}
|
|
171
175
|
},
|
|
172
176
|
"successBg": {
|
|
173
177
|
"value": "{colors.success.100}",
|
|
@@ -299,7 +303,9 @@
|
|
|
299
303
|
},
|
|
300
304
|
"featuredText": {
|
|
301
305
|
"value": "{colors.white}",
|
|
302
|
-
"metadata": {
|
|
306
|
+
"metadata": {
|
|
307
|
+
"pair": "modes.default.component.pricingCard.featuredBg"
|
|
308
|
+
}
|
|
303
309
|
},
|
|
304
310
|
"featuredBadgeBg": {
|
|
305
311
|
"value": "{colors.warning.500}",
|
|
@@ -309,7 +315,9 @@
|
|
|
309
315
|
},
|
|
310
316
|
"featuredBadgeText": {
|
|
311
317
|
"value": "{colors.neutral.900}",
|
|
312
|
-
"metadata": {
|
|
318
|
+
"metadata": {
|
|
319
|
+
"pair": "modes.default.component.pricingCard.featuredBadgeBg"
|
|
320
|
+
}
|
|
313
321
|
},
|
|
314
322
|
"price": {
|
|
315
323
|
"value": "{colors.neutral.900}",
|
|
@@ -493,7 +501,9 @@
|
|
|
493
501
|
},
|
|
494
502
|
"neutralText": {
|
|
495
503
|
"value": "{colors.neutral.100}",
|
|
496
|
-
"metadata": {
|
|
504
|
+
"metadata": {
|
|
505
|
+
"pair": "modes.dark.component.badge.neutralBgHover"
|
|
506
|
+
}
|
|
497
507
|
},
|
|
498
508
|
"infoBg": {
|
|
499
509
|
"value": "{colors.info.800}",
|
|
@@ -509,7 +519,9 @@
|
|
|
509
519
|
},
|
|
510
520
|
"infoText": {
|
|
511
521
|
"value": "{colors.info.100}",
|
|
512
|
-
"metadata": {
|
|
522
|
+
"metadata": {
|
|
523
|
+
"pair": "modes.dark.component.badge.infoBgHover"
|
|
524
|
+
}
|
|
513
525
|
},
|
|
514
526
|
"successBg": {
|
|
515
527
|
"value": "{colors.success.800}",
|
|
@@ -663,7 +675,9 @@
|
|
|
663
675
|
},
|
|
664
676
|
"featuredText": {
|
|
665
677
|
"value": "{colors.white}",
|
|
666
|
-
"metadata": {
|
|
678
|
+
"metadata": {
|
|
679
|
+
"pair": "modes.dark.component.pricingCard.featuredBg"
|
|
680
|
+
}
|
|
667
681
|
},
|
|
668
682
|
"featuredBadgeBg": {
|
|
669
683
|
"value": "{colors.warning.500}",
|
|
@@ -673,7 +687,9 @@
|
|
|
673
687
|
},
|
|
674
688
|
"featuredBadgeText": {
|
|
675
689
|
"value": "{colors.neutral.900}",
|
|
676
|
-
"metadata": {
|
|
690
|
+
"metadata": {
|
|
691
|
+
"pair": "modes.dark.component.pricingCard.featuredBadgeBg"
|
|
692
|
+
}
|
|
677
693
|
},
|
|
678
694
|
"price": {
|
|
679
695
|
"value": "{colors.neutral.100}",
|
|
@@ -2,34 +2,91 @@
|
|
|
2
2
|
"surface": {
|
|
3
3
|
"page": {
|
|
4
4
|
"value": "{colors.neutral.50}",
|
|
5
|
-
"description": "primary app background"
|
|
5
|
+
"description": "primary app background",
|
|
6
|
+
"metadata": {
|
|
7
|
+
"pair": "text.onPage.default"
|
|
8
|
+
}
|
|
6
9
|
},
|
|
7
10
|
"card": {
|
|
8
11
|
"value": "{colors.white}",
|
|
9
|
-
"description": "containers and tiles"
|
|
12
|
+
"description": "containers and tiles",
|
|
13
|
+
"metadata": {
|
|
14
|
+
"pair": "text.onSurface.default"
|
|
15
|
+
}
|
|
10
16
|
},
|
|
11
17
|
"input": {
|
|
12
18
|
"value": "{colors.white}",
|
|
13
|
-
"description": "form inputs, textareas"
|
|
19
|
+
"description": "form inputs, textareas",
|
|
20
|
+
"metadata": {
|
|
21
|
+
"pair": "text.onSurface.default"
|
|
22
|
+
}
|
|
14
23
|
},
|
|
15
24
|
"overlay": {
|
|
16
|
-
"value": "{colors.
|
|
25
|
+
"value": "{colors.black} / 0.6",
|
|
17
26
|
"description": "modals, dropdowns, flyouts"
|
|
18
27
|
}
|
|
19
28
|
},
|
|
20
29
|
"text": {
|
|
21
30
|
"onPage": {
|
|
22
|
-
"default":
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
31
|
+
"default": {
|
|
32
|
+
"value": "{colors.neutral.900}",
|
|
33
|
+
"description": "base text on page background",
|
|
34
|
+
"metadata": {
|
|
35
|
+
"pair": "surface.page"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
"muted": {
|
|
39
|
+
"value": "{colors.neutral.600}",
|
|
40
|
+
"description": "muted text for de-emphasized content",
|
|
41
|
+
"metadata": {
|
|
42
|
+
"pair": "surface.page"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
"subtle": {
|
|
46
|
+
"value": "{colors.neutral.500}",
|
|
47
|
+
"description": "subtle text for secondary labels",
|
|
48
|
+
"metadata": {
|
|
49
|
+
"pair": "surface.page"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
"meta": {
|
|
53
|
+
"value": "{colors.neutral.500}",
|
|
54
|
+
"description": "meta text for smallest labels and timestamps",
|
|
55
|
+
"metadata": {
|
|
56
|
+
"pair": "surface.page"
|
|
57
|
+
}
|
|
58
|
+
},
|
|
26
59
|
"brand": "{colors.brand.600}"
|
|
27
60
|
},
|
|
28
61
|
"onSurface": {
|
|
29
|
-
"default":
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
62
|
+
"default": {
|
|
63
|
+
"value": "{colors.neutral.900}",
|
|
64
|
+
"description": "base text on surface containers",
|
|
65
|
+
"metadata": {
|
|
66
|
+
"pair": "surface.card"
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
"muted": {
|
|
70
|
+
"value": "{colors.neutral.600}",
|
|
71
|
+
"description": "muted text on surfaces",
|
|
72
|
+
"metadata": {
|
|
73
|
+
"pair": "surface.card"
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
"subtle": {
|
|
77
|
+
"value": "{colors.neutral.500}",
|
|
78
|
+
"description": "subtle text on surfaces",
|
|
79
|
+
"metadata": {
|
|
80
|
+
"pair": "surface.card"
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
"meta": {
|
|
84
|
+
"value": "{colors.neutral.500}",
|
|
85
|
+
"description": "meta text on surfaces",
|
|
86
|
+
"metadata": {
|
|
87
|
+
"pair": "surface.card"
|
|
88
|
+
}
|
|
89
|
+
},
|
|
33
90
|
"brand": "{colors.brand.600}"
|
|
34
91
|
}
|
|
35
92
|
},
|