@phcdevworks/spectre-tokens 2.5.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 +171 -64
- package/dist/index.cjs +19 -19
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +19 -19
- package/dist/index.js.map +1 -1
- package/package.json +15 -10
- package/tokens/components.json +22 -6
- package/tokens/modes.json +13 -5
- 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
|
@@ -211,7 +211,9 @@
|
|
|
211
211
|
},
|
|
212
212
|
"featuredText": {
|
|
213
213
|
"value": "{colors.white}",
|
|
214
|
-
"metadata": {
|
|
214
|
+
"metadata": {
|
|
215
|
+
"pair": "component.pricingCard.featuredBg"
|
|
216
|
+
}
|
|
215
217
|
},
|
|
216
218
|
"featuredBadgeBg": {
|
|
217
219
|
"value": "{colors.warning.500}",
|
|
@@ -221,7 +223,9 @@
|
|
|
221
223
|
},
|
|
222
224
|
"featuredBadgeText": {
|
|
223
225
|
"value": "{colors.neutral.900}",
|
|
224
|
-
"metadata": {
|
|
226
|
+
"metadata": {
|
|
227
|
+
"pair": "component.pricingCard.featuredBadgeBg"
|
|
228
|
+
}
|
|
225
229
|
},
|
|
226
230
|
"price": {
|
|
227
231
|
"value": "{colors.neutral.900}",
|
|
@@ -275,7 +279,10 @@
|
|
|
275
279
|
"value": "{colors.neutral.200}"
|
|
276
280
|
},
|
|
277
281
|
"text": {
|
|
278
|
-
"value": "{colors.white}"
|
|
282
|
+
"value": "{colors.white}",
|
|
283
|
+
"metadata": {
|
|
284
|
+
"pair": "buttons.primary.bg"
|
|
285
|
+
}
|
|
279
286
|
},
|
|
280
287
|
"textDisabled": {
|
|
281
288
|
"value": "{colors.neutral.400}"
|
|
@@ -310,7 +317,10 @@
|
|
|
310
317
|
"value": "{colors.neutral.50}"
|
|
311
318
|
},
|
|
312
319
|
"text": {
|
|
313
|
-
"value": "{colors.info.700}"
|
|
320
|
+
"value": "{colors.info.700}",
|
|
321
|
+
"metadata": {
|
|
322
|
+
"pair": "buttons.secondary.bg"
|
|
323
|
+
}
|
|
314
324
|
},
|
|
315
325
|
"textDisabled": {
|
|
316
326
|
"value": "{colors.neutral.400}"
|
|
@@ -348,7 +358,10 @@
|
|
|
348
358
|
"value": "transparent"
|
|
349
359
|
},
|
|
350
360
|
"text": {
|
|
351
|
-
"value": "{colors.info.700}"
|
|
361
|
+
"value": "{colors.info.700}",
|
|
362
|
+
"metadata": {
|
|
363
|
+
"pair": "buttons.ghost.bgHover"
|
|
364
|
+
}
|
|
352
365
|
},
|
|
353
366
|
"textDisabled": {
|
|
354
367
|
"value": "{colors.neutral.400}"
|
|
@@ -482,7 +495,10 @@
|
|
|
482
495
|
"value": "{colors.accent.200}"
|
|
483
496
|
},
|
|
484
497
|
"text": {
|
|
485
|
-
"value": "{colors.white}"
|
|
498
|
+
"value": "{colors.white}",
|
|
499
|
+
"metadata": {
|
|
500
|
+
"pair": "buttons.accent.bg"
|
|
501
|
+
}
|
|
486
502
|
},
|
|
487
503
|
"textDisabled": {
|
|
488
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}",
|
|
@@ -303,7 +303,9 @@
|
|
|
303
303
|
},
|
|
304
304
|
"featuredText": {
|
|
305
305
|
"value": "{colors.white}",
|
|
306
|
-
"metadata": {
|
|
306
|
+
"metadata": {
|
|
307
|
+
"pair": "modes.default.component.pricingCard.featuredBg"
|
|
308
|
+
}
|
|
307
309
|
},
|
|
308
310
|
"featuredBadgeBg": {
|
|
309
311
|
"value": "{colors.warning.500}",
|
|
@@ -313,7 +315,9 @@
|
|
|
313
315
|
},
|
|
314
316
|
"featuredBadgeText": {
|
|
315
317
|
"value": "{colors.neutral.900}",
|
|
316
|
-
"metadata": {
|
|
318
|
+
"metadata": {
|
|
319
|
+
"pair": "modes.default.component.pricingCard.featuredBadgeBg"
|
|
320
|
+
}
|
|
317
321
|
},
|
|
318
322
|
"price": {
|
|
319
323
|
"value": "{colors.neutral.900}",
|
|
@@ -671,7 +675,9 @@
|
|
|
671
675
|
},
|
|
672
676
|
"featuredText": {
|
|
673
677
|
"value": "{colors.white}",
|
|
674
|
-
"metadata": {
|
|
678
|
+
"metadata": {
|
|
679
|
+
"pair": "modes.dark.component.pricingCard.featuredBg"
|
|
680
|
+
}
|
|
675
681
|
},
|
|
676
682
|
"featuredBadgeBg": {
|
|
677
683
|
"value": "{colors.warning.500}",
|
|
@@ -681,7 +687,9 @@
|
|
|
681
687
|
},
|
|
682
688
|
"featuredBadgeText": {
|
|
683
689
|
"value": "{colors.neutral.900}",
|
|
684
|
-
"metadata": {
|
|
690
|
+
"metadata": {
|
|
691
|
+
"pair": "modes.dark.component.pricingCard.featuredBadgeBg"
|
|
692
|
+
}
|
|
685
693
|
},
|
|
686
694
|
"price": {
|
|
687
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
|
},
|