@phcdevworks/spectre-tokens 2.1.1 → 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.
- package/README.md +12 -6
- package/dist/index.cjs +133 -41
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +11 -11
- package/dist/index.d.cts +105 -13
- package/dist/index.d.ts +105 -13
- package/dist/index.js +133 -41
- package/dist/index.js.map +1 -1
- package/package.json +12 -8
- package/tokens/components.json +57 -15
- package/tokens/modes.json +76 -26
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phcdevworks/spectre-tokens",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.2",
|
|
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",
|
|
@@ -52,26 +52,30 @@
|
|
|
52
52
|
"scripts": {
|
|
53
53
|
"generate": "tsx scripts/generate-types.ts",
|
|
54
54
|
"prebuild": "npm run generate",
|
|
55
|
-
"build": "npm run build:ts && npm run build:css
|
|
55
|
+
"build": "npm run build:ts && npm run build:css",
|
|
56
56
|
"build:ts": "tsup --config tsup.config.ts",
|
|
57
57
|
"build:css": "tsx scripts/build-css.ts",
|
|
58
|
-
"check:
|
|
58
|
+
"check:structure": "tsx scripts/assert-core-tokens.ts",
|
|
59
|
+
"check:locked": "tsx scripts/check-locked-color-contracts.ts",
|
|
59
60
|
"check:contrast": "tsx scripts/check-contrast.ts",
|
|
60
61
|
"check:regression": "tsx scripts/check-tokens-regression.ts",
|
|
61
62
|
"lint": "eslint .",
|
|
62
63
|
"format": "prettier --write .",
|
|
63
|
-
"check": "npm run check:
|
|
64
|
+
"check": "npm run build && npm run check:structure && npm run check:locked && npm run check:contrast && npm run check:regression && npm run lint",
|
|
64
65
|
"check:all": "npm run check",
|
|
65
66
|
"test": "npm run check"
|
|
66
67
|
},
|
|
67
68
|
"publishConfig": {
|
|
68
69
|
"access": "public"
|
|
69
70
|
},
|
|
71
|
+
"peerDependencies": {
|
|
72
|
+
"typescript": "^5.9 || ^6.0"
|
|
73
|
+
},
|
|
70
74
|
"devDependencies": {
|
|
71
75
|
"@types/chroma-js": "^3.1.2",
|
|
72
76
|
"@types/node": "^25.5.0",
|
|
73
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
74
|
-
"@typescript-eslint/parser": "^8.
|
|
77
|
+
"@typescript-eslint/eslint-plugin": "^8.58.0",
|
|
78
|
+
"@typescript-eslint/parser": "^8.58.0",
|
|
75
79
|
"chroma-js": "^3.2.0",
|
|
76
80
|
"colord": "^2.9.3",
|
|
77
81
|
"eslint": "^10.1.0",
|
|
@@ -80,7 +84,7 @@
|
|
|
80
84
|
"ts-node": "^10.9.2",
|
|
81
85
|
"tsup": "^8.5.1",
|
|
82
86
|
"tsx": "^4.21.0",
|
|
83
|
-
"typescript": "^
|
|
84
|
-
"typescript-eslint": "^8.
|
|
87
|
+
"typescript": "^6.0.2",
|
|
88
|
+
"typescript-eslint": "^8.58.0"
|
|
85
89
|
}
|
|
86
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.
|
|
25
|
+
"value": "{colors.neutral.500}",
|
|
26
|
+
"metadata": {
|
|
27
|
+
"pair": "forms.default.bg"
|
|
28
|
+
}
|
|
17
29
|
}
|
|
18
30
|
},
|
|
19
31
|
"button": {
|
|
@@ -103,13 +115,19 @@
|
|
|
103
115
|
},
|
|
104
116
|
"iconBox": {
|
|
105
117
|
"bg": {
|
|
106
|
-
"value": "{colors.white}"
|
|
118
|
+
"value": "{colors.white}",
|
|
119
|
+
"metadata": {
|
|
120
|
+
"pair": "component.iconBox.iconDefault"
|
|
121
|
+
}
|
|
107
122
|
},
|
|
108
123
|
"border": {
|
|
109
124
|
"value": "{colors.neutral.200}"
|
|
110
125
|
},
|
|
111
126
|
"iconDefault": {
|
|
112
|
-
"value": "{colors.info.600}"
|
|
127
|
+
"value": "{colors.info.600}",
|
|
128
|
+
"metadata": {
|
|
129
|
+
"pair": "component.iconBox.bg"
|
|
130
|
+
}
|
|
113
131
|
},
|
|
114
132
|
"iconSuccess": {
|
|
115
133
|
"value": "{colors.success.600}"
|
|
@@ -123,19 +141,31 @@
|
|
|
123
141
|
},
|
|
124
142
|
"testimonial": {
|
|
125
143
|
"bg": {
|
|
126
|
-
"value": "{colors.white}"
|
|
144
|
+
"value": "{colors.white}",
|
|
145
|
+
"metadata": {
|
|
146
|
+
"pair": "component.testimonial.text"
|
|
147
|
+
}
|
|
127
148
|
},
|
|
128
149
|
"border": {
|
|
129
150
|
"value": "{colors.neutral.200}"
|
|
130
151
|
},
|
|
131
152
|
"text": {
|
|
132
|
-
"value": "{colors.neutral.700}"
|
|
153
|
+
"value": "{colors.neutral.700}",
|
|
154
|
+
"metadata": {
|
|
155
|
+
"pair": "component.testimonial.bg"
|
|
156
|
+
}
|
|
133
157
|
},
|
|
134
158
|
"authorName": {
|
|
135
|
-
"value": "{colors.neutral.900}"
|
|
159
|
+
"value": "{colors.neutral.900}",
|
|
160
|
+
"metadata": {
|
|
161
|
+
"pair": "component.testimonial.bg"
|
|
162
|
+
}
|
|
136
163
|
},
|
|
137
164
|
"authorTitle": {
|
|
138
|
-
"value": "{colors.neutral.500}"
|
|
165
|
+
"value": "{colors.neutral.500}",
|
|
166
|
+
"metadata": {
|
|
167
|
+
"pair": "component.testimonial.bg"
|
|
168
|
+
}
|
|
139
169
|
},
|
|
140
170
|
"quoteMark": {
|
|
141
171
|
"value": "{colors.neutral.300}"
|
|
@@ -144,7 +174,9 @@
|
|
|
144
174
|
"pricingCard": {
|
|
145
175
|
"bg": {
|
|
146
176
|
"value": "{colors.white}",
|
|
147
|
-
"metadata": {
|
|
177
|
+
"metadata": {
|
|
178
|
+
"pair": "component.pricingCard.price"
|
|
179
|
+
}
|
|
148
180
|
},
|
|
149
181
|
"border": {
|
|
150
182
|
"value": "{colors.neutral.200}",
|
|
@@ -172,11 +204,15 @@
|
|
|
172
204
|
},
|
|
173
205
|
"price": {
|
|
174
206
|
"value": "{colors.neutral.900}",
|
|
175
|
-
"metadata": {
|
|
207
|
+
"metadata": {
|
|
208
|
+
"pair": "component.pricingCard.bg"
|
|
209
|
+
}
|
|
176
210
|
},
|
|
177
211
|
"priceDescription": {
|
|
178
212
|
"value": "{colors.neutral.500}",
|
|
179
|
-
"metadata": {
|
|
213
|
+
"metadata": {
|
|
214
|
+
"pair": "component.pricingCard.bg"
|
|
215
|
+
}
|
|
180
216
|
}
|
|
181
217
|
},
|
|
182
218
|
"rating": {
|
|
@@ -187,7 +223,10 @@
|
|
|
187
223
|
"value": "{colors.neutral.200}"
|
|
188
224
|
},
|
|
189
225
|
"text": {
|
|
190
|
-
"value": "{colors.neutral.500}"
|
|
226
|
+
"value": "{colors.neutral.500}",
|
|
227
|
+
"metadata": {
|
|
228
|
+
"pair": "surface.card"
|
|
229
|
+
}
|
|
191
230
|
}
|
|
192
231
|
}
|
|
193
232
|
},
|
|
@@ -435,7 +474,10 @@
|
|
|
435
474
|
"value": "{colors.neutral.900}"
|
|
436
475
|
},
|
|
437
476
|
"placeholder": {
|
|
438
|
-
"value": "{colors.neutral.
|
|
477
|
+
"value": "{colors.neutral.500}",
|
|
478
|
+
"metadata": {
|
|
479
|
+
"pair": "forms.default.bg"
|
|
480
|
+
}
|
|
439
481
|
}
|
|
440
482
|
},
|
|
441
483
|
"hover": {
|
package/tokens/modes.json
CHANGED
|
@@ -102,18 +102,30 @@
|
|
|
102
102
|
"component": {
|
|
103
103
|
"card": {
|
|
104
104
|
"text": {
|
|
105
|
-
"value": "{colors.neutral.900}"
|
|
105
|
+
"value": "{colors.neutral.900}",
|
|
106
|
+
"metadata": {
|
|
107
|
+
"pair": "modes.default.surface.card"
|
|
108
|
+
}
|
|
106
109
|
},
|
|
107
110
|
"textMuted": {
|
|
108
|
-
"value": "{colors.neutral.500}"
|
|
111
|
+
"value": "{colors.neutral.500}",
|
|
112
|
+
"metadata": {
|
|
113
|
+
"pair": "modes.default.surface.card"
|
|
114
|
+
}
|
|
109
115
|
}
|
|
110
116
|
},
|
|
111
117
|
"input": {
|
|
112
118
|
"text": {
|
|
113
|
-
"value": "{colors.neutral.900}"
|
|
119
|
+
"value": "{colors.neutral.900}",
|
|
120
|
+
"metadata": {
|
|
121
|
+
"pair": "modes.default.surface.input"
|
|
122
|
+
}
|
|
114
123
|
},
|
|
115
124
|
"placeholder": {
|
|
116
|
-
"value": "{colors.neutral.
|
|
125
|
+
"value": "{colors.neutral.500}",
|
|
126
|
+
"metadata": {
|
|
127
|
+
"pair": "modes.default.surface.input"
|
|
128
|
+
}
|
|
117
129
|
}
|
|
118
130
|
},
|
|
119
131
|
"button": {
|
|
@@ -131,6 +143,12 @@
|
|
|
131
143
|
"pair": "modes.default.component.badge.neutralText"
|
|
132
144
|
}
|
|
133
145
|
},
|
|
146
|
+
"neutralBgHover": {
|
|
147
|
+
"value": "{colors.neutral.200}",
|
|
148
|
+
"metadata": {
|
|
149
|
+
"pair": "modes.default.component.badge.neutralText"
|
|
150
|
+
}
|
|
151
|
+
},
|
|
134
152
|
"neutralText": {
|
|
135
153
|
"value": "{colors.neutral.700}",
|
|
136
154
|
"metadata": {}
|
|
@@ -141,6 +159,12 @@
|
|
|
141
159
|
"pair": "modes.default.component.badge.infoText"
|
|
142
160
|
}
|
|
143
161
|
},
|
|
162
|
+
"infoBgHover": {
|
|
163
|
+
"value": "{colors.info.200}",
|
|
164
|
+
"metadata": {
|
|
165
|
+
"pair": "modes.default.component.badge.infoText"
|
|
166
|
+
}
|
|
167
|
+
},
|
|
144
168
|
"infoText": {
|
|
145
169
|
"value": "{colors.info.700}",
|
|
146
170
|
"metadata": {}
|
|
@@ -179,7 +203,9 @@
|
|
|
179
203
|
"iconBox": {
|
|
180
204
|
"bg": {
|
|
181
205
|
"value": "{colors.white}",
|
|
182
|
-
"metadata": {
|
|
206
|
+
"metadata": {
|
|
207
|
+
"pair": "modes.default.component.iconBox.iconDefault"
|
|
208
|
+
}
|
|
183
209
|
},
|
|
184
210
|
"border": {
|
|
185
211
|
"value": "{colors.neutral.200}",
|
|
@@ -187,7 +213,9 @@
|
|
|
187
213
|
},
|
|
188
214
|
"iconDefault": {
|
|
189
215
|
"value": "{colors.info.600}",
|
|
190
|
-
"metadata": {
|
|
216
|
+
"metadata": {
|
|
217
|
+
"pair": "modes.default.component.iconBox.bg"
|
|
218
|
+
}
|
|
191
219
|
},
|
|
192
220
|
"iconSuccess": {
|
|
193
221
|
"value": "{colors.success.600}",
|
|
@@ -199,7 +227,9 @@
|
|
|
199
227
|
},
|
|
200
228
|
"iconDanger": {
|
|
201
229
|
"value": "{colors.error.600}",
|
|
202
|
-
"metadata": {
|
|
230
|
+
"metadata": {
|
|
231
|
+
"pair": "modes.default.component.iconBox.bg"
|
|
232
|
+
}
|
|
203
233
|
}
|
|
204
234
|
},
|
|
205
235
|
"testimonial": {
|
|
@@ -291,7 +321,9 @@
|
|
|
291
321
|
},
|
|
292
322
|
"text": {
|
|
293
323
|
"value": "{colors.neutral.500}",
|
|
294
|
-
"metadata": {
|
|
324
|
+
"metadata": {
|
|
325
|
+
"pair": "modes.default.surface.card"
|
|
326
|
+
}
|
|
295
327
|
}
|
|
296
328
|
}
|
|
297
329
|
}
|
|
@@ -338,19 +370,19 @@
|
|
|
338
370
|
}
|
|
339
371
|
},
|
|
340
372
|
"muted": {
|
|
341
|
-
"value": "{colors.neutral.
|
|
373
|
+
"value": "{colors.neutral.300}",
|
|
342
374
|
"metadata": {
|
|
343
375
|
"pair": "modes.dark.surface.page"
|
|
344
376
|
}
|
|
345
377
|
},
|
|
346
378
|
"subtle": {
|
|
347
|
-
"value": "{colors.neutral.
|
|
379
|
+
"value": "{colors.neutral.400}",
|
|
348
380
|
"metadata": {
|
|
349
381
|
"pair": "modes.dark.surface.page"
|
|
350
382
|
}
|
|
351
383
|
},
|
|
352
384
|
"meta": {
|
|
353
|
-
"value": "{colors.neutral.
|
|
385
|
+
"value": "{colors.neutral.400}",
|
|
354
386
|
"metadata": {
|
|
355
387
|
"pair": "modes.dark.surface.page"
|
|
356
388
|
}
|
|
@@ -370,19 +402,19 @@
|
|
|
370
402
|
}
|
|
371
403
|
},
|
|
372
404
|
"muted": {
|
|
373
|
-
"value": "{colors.neutral.
|
|
405
|
+
"value": "{colors.neutral.300}",
|
|
374
406
|
"metadata": {
|
|
375
407
|
"pair": "modes.dark.surface.card"
|
|
376
408
|
}
|
|
377
409
|
},
|
|
378
410
|
"subtle": {
|
|
379
|
-
"value": "{colors.neutral.
|
|
411
|
+
"value": "{colors.neutral.400}",
|
|
380
412
|
"metadata": {
|
|
381
413
|
"pair": "modes.dark.surface.card"
|
|
382
414
|
}
|
|
383
415
|
},
|
|
384
416
|
"meta": {
|
|
385
|
-
"value": "{colors.neutral.
|
|
417
|
+
"value": "{colors.neutral.400}",
|
|
386
418
|
"metadata": {
|
|
387
419
|
"pair": "modes.dark.surface.card"
|
|
388
420
|
}
|
|
@@ -404,7 +436,7 @@
|
|
|
404
436
|
}
|
|
405
437
|
},
|
|
406
438
|
"textMuted": {
|
|
407
|
-
"value": "{colors.neutral.
|
|
439
|
+
"value": "{colors.neutral.300}",
|
|
408
440
|
"metadata": {
|
|
409
441
|
"pair": "modes.dark.surface.card"
|
|
410
442
|
}
|
|
@@ -412,10 +444,16 @@
|
|
|
412
444
|
},
|
|
413
445
|
"input": {
|
|
414
446
|
"text": {
|
|
415
|
-
"value": "{colors.neutral.100}"
|
|
447
|
+
"value": "{colors.neutral.100}",
|
|
448
|
+
"metadata": {
|
|
449
|
+
"pair": "modes.dark.surface.input"
|
|
450
|
+
}
|
|
416
451
|
},
|
|
417
452
|
"placeholder": {
|
|
418
|
-
"value": "{colors.neutral.
|
|
453
|
+
"value": "{colors.neutral.300}",
|
|
454
|
+
"metadata": {
|
|
455
|
+
"pair": "modes.dark.surface.input"
|
|
456
|
+
}
|
|
419
457
|
}
|
|
420
458
|
},
|
|
421
459
|
"button": {
|
|
@@ -444,7 +482,7 @@
|
|
|
444
482
|
"metadata": {}
|
|
445
483
|
},
|
|
446
484
|
"infoBg": {
|
|
447
|
-
"value": "{colors.info.
|
|
485
|
+
"value": "{colors.info.800}",
|
|
448
486
|
"metadata": {
|
|
449
487
|
"pair": "modes.dark.component.badge.infoText"
|
|
450
488
|
}
|
|
@@ -511,7 +549,9 @@
|
|
|
511
549
|
"iconBox": {
|
|
512
550
|
"bg": {
|
|
513
551
|
"value": "{colors.neutral.800}",
|
|
514
|
-
"metadata": {
|
|
552
|
+
"metadata": {
|
|
553
|
+
"pair": "modes.dark.component.iconBox.iconDefault"
|
|
554
|
+
}
|
|
515
555
|
},
|
|
516
556
|
"border": {
|
|
517
557
|
"value": "{colors.neutral.700}",
|
|
@@ -519,19 +559,27 @@
|
|
|
519
559
|
},
|
|
520
560
|
"iconDefault": {
|
|
521
561
|
"value": "{colors.info.300}",
|
|
522
|
-
"metadata": {
|
|
562
|
+
"metadata": {
|
|
563
|
+
"pair": "modes.dark.component.iconBox.bg"
|
|
564
|
+
}
|
|
523
565
|
},
|
|
524
566
|
"iconSuccess": {
|
|
525
567
|
"value": "{colors.success.400}",
|
|
526
|
-
"metadata": {
|
|
568
|
+
"metadata": {
|
|
569
|
+
"pair": "modes.dark.component.iconBox.bg"
|
|
570
|
+
}
|
|
527
571
|
},
|
|
528
572
|
"iconWarning": {
|
|
529
573
|
"value": "{colors.warning.400}",
|
|
530
|
-
"metadata": {
|
|
574
|
+
"metadata": {
|
|
575
|
+
"pair": "modes.dark.component.iconBox.bg"
|
|
576
|
+
}
|
|
531
577
|
},
|
|
532
578
|
"iconDanger": {
|
|
533
579
|
"value": "{colors.error.400}",
|
|
534
|
-
"metadata": {
|
|
580
|
+
"metadata": {
|
|
581
|
+
"pair": "modes.dark.component.iconBox.bg"
|
|
582
|
+
}
|
|
535
583
|
}
|
|
536
584
|
},
|
|
537
585
|
"testimonial": {
|
|
@@ -558,7 +606,7 @@
|
|
|
558
606
|
}
|
|
559
607
|
},
|
|
560
608
|
"authorTitle": {
|
|
561
|
-
"value": "{colors.neutral.
|
|
609
|
+
"value": "{colors.neutral.400}",
|
|
562
610
|
"metadata": {
|
|
563
611
|
"pair": "modes.dark.component.testimonial.bg"
|
|
564
612
|
}
|
|
@@ -606,7 +654,7 @@
|
|
|
606
654
|
}
|
|
607
655
|
},
|
|
608
656
|
"priceDescription": {
|
|
609
|
-
"value": "{colors.neutral.
|
|
657
|
+
"value": "{colors.neutral.400}",
|
|
610
658
|
"metadata": {
|
|
611
659
|
"pair": "modes.dark.component.pricingCard.bg"
|
|
612
660
|
}
|
|
@@ -623,7 +671,9 @@
|
|
|
623
671
|
},
|
|
624
672
|
"text": {
|
|
625
673
|
"value": "{colors.neutral.400}",
|
|
626
|
-
"metadata": {
|
|
674
|
+
"metadata": {
|
|
675
|
+
"pair": "modes.dark.surface.card"
|
|
676
|
+
}
|
|
627
677
|
}
|
|
628
678
|
}
|
|
629
679
|
}
|