@phcdevworks/spectre-tokens 2.8.0 → 2.9.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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phcdevworks/spectre-tokens",
3
- "version": "2.8.0",
3
+ "version": "2.9.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",
@@ -96,17 +96,21 @@
96
96
  "devDependencies": {
97
97
  "@phcdevworks/spectre-manifest": "^1.0.0",
98
98
  "@types/node": "^25.9.2",
99
- "@typescript-eslint/eslint-plugin": "^8.60.1",
100
- "@typescript-eslint/parser": "^8.60.1",
99
+ "@typescript-eslint/eslint-plugin": "^8.61.0",
100
+ "@typescript-eslint/parser": "^8.61.0",
101
101
  "colord": "^2.9.3",
102
102
  "eslint": "^10.4.1",
103
103
  "jiti": "^2.7.0",
104
- "prettier": "^3.8.3",
104
+ "prettier": "^3.8.4",
105
105
  "ts-node": "^10.9.2",
106
106
  "tsup": "^8.5.1",
107
107
  "tsx": "^4.22.4",
108
108
  "typescript": "^6.0.3",
109
- "typescript-eslint": "^8.60.1",
109
+ "typescript-eslint": "^8.61.0",
110
110
  "vitest": "^4.1.8"
111
+ },
112
+ "allowScripts": {
113
+ "esbuild@0.27.7": true,
114
+ "esbuild@0.28.0": true
111
115
  }
112
116
  }
@@ -253,6 +253,173 @@
253
253
  "pair": "surface.card"
254
254
  }
255
255
  }
256
+ },
257
+ "nav": {
258
+ "bg": {
259
+ "value": "{colors.white}",
260
+ "metadata": {
261
+ "pair": "component.nav.text"
262
+ }
263
+ },
264
+ "text": {
265
+ "value": "{colors.neutral.900}",
266
+ "metadata": {
267
+ "pair": "component.nav.bg"
268
+ }
269
+ },
270
+ "link": {
271
+ "value": "{colors.neutral.700}"
272
+ },
273
+ "linkHover": {
274
+ "value": "{colors.brand.600}"
275
+ },
276
+ "linkActive": {
277
+ "value": "{colors.brand.700}"
278
+ },
279
+ "border": {
280
+ "value": "{colors.neutral.200}"
281
+ }
282
+ },
283
+ "modal": {
284
+ "bg": {
285
+ "value": "{colors.white}"
286
+ },
287
+ "shadow": {
288
+ "value": "0 20px 48px -12px {colors.black} / 0.20"
289
+ },
290
+ "border": {
291
+ "value": "{colors.neutral.200}"
292
+ },
293
+ "overlay": {
294
+ "value": "{colors.black} / 0.6"
295
+ }
296
+ },
297
+ "toast": {
298
+ "success": {
299
+ "bg": {
300
+ "value": "{colors.success.50}",
301
+ "metadata": {
302
+ "pair": "component.toast.success.text"
303
+ }
304
+ },
305
+ "text": {
306
+ "value": "{colors.success.800}",
307
+ "metadata": {
308
+ "pair": "component.toast.success.bg"
309
+ }
310
+ },
311
+ "border": {
312
+ "value": "{colors.success.200}"
313
+ },
314
+ "icon": {
315
+ "value": "{colors.success.600}"
316
+ }
317
+ },
318
+ "warning": {
319
+ "bg": {
320
+ "value": "{colors.warning.50}",
321
+ "metadata": {
322
+ "pair": "component.toast.warning.text"
323
+ }
324
+ },
325
+ "text": {
326
+ "value": "{colors.warning.800}",
327
+ "metadata": {
328
+ "pair": "component.toast.warning.bg"
329
+ }
330
+ },
331
+ "border": {
332
+ "value": "{colors.warning.200}"
333
+ },
334
+ "icon": {
335
+ "value": "{colors.warning.600}"
336
+ }
337
+ },
338
+ "danger": {
339
+ "bg": {
340
+ "value": "{colors.error.50}",
341
+ "metadata": {
342
+ "pair": "component.toast.danger.text"
343
+ }
344
+ },
345
+ "text": {
346
+ "value": "{colors.error.800}",
347
+ "metadata": {
348
+ "pair": "component.toast.danger.bg"
349
+ }
350
+ },
351
+ "border": {
352
+ "value": "{colors.error.200}"
353
+ },
354
+ "icon": {
355
+ "value": "{colors.error.600}"
356
+ }
357
+ },
358
+ "info": {
359
+ "bg": {
360
+ "value": "{colors.info.50}",
361
+ "metadata": {
362
+ "pair": "component.toast.info.text"
363
+ }
364
+ },
365
+ "text": {
366
+ "value": "{colors.info.800}",
367
+ "metadata": {
368
+ "pair": "component.toast.info.bg"
369
+ }
370
+ },
371
+ "border": {
372
+ "value": "{colors.info.200}"
373
+ },
374
+ "icon": {
375
+ "value": "{colors.info.600}"
376
+ }
377
+ }
378
+ },
379
+ "tooltip": {
380
+ "bg": {
381
+ "value": "{colors.neutral.900}",
382
+ "metadata": {
383
+ "pair": "component.tooltip.text"
384
+ }
385
+ },
386
+ "text": {
387
+ "value": "{colors.white}",
388
+ "metadata": {
389
+ "pair": "component.tooltip.bg"
390
+ }
391
+ },
392
+ "border": {
393
+ "value": "{colors.neutral.700}"
394
+ }
395
+ },
396
+ "dropdown": {
397
+ "bg": {
398
+ "value": "{colors.white}",
399
+ "metadata": {
400
+ "pair": "component.dropdown.item.text"
401
+ }
402
+ },
403
+ "border": {
404
+ "value": "{colors.neutral.200}"
405
+ },
406
+ "item": {
407
+ "default": {
408
+ "value": "transparent"
409
+ },
410
+ "hover": {
411
+ "value": "{colors.neutral.100}"
412
+ },
413
+ "active": {
414
+ "value": "{colors.info.50}"
415
+ },
416
+ "text": {
417
+ "value": "{colors.neutral.900}",
418
+ "metadata": {
419
+ "pair": "component.dropdown.bg"
420
+ }
421
+ }
422
+ }
256
423
  }
257
424
  },
258
425
  "buttons": {
package/tokens/modes.json CHANGED
@@ -31,6 +31,18 @@
31
31
  },
32
32
  "hero": {
33
33
  "value": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)"
34
+ },
35
+ "hover": {
36
+ "value": "{colors.neutral.100}"
37
+ },
38
+ "selected": {
39
+ "value": "{colors.info.50}"
40
+ },
41
+ "active": {
42
+ "value": "{colors.neutral.200}"
43
+ },
44
+ "divider": {
45
+ "value": "{colors.neutral.200}"
34
46
  }
35
47
  },
36
48
  "text": {
@@ -347,6 +359,194 @@
347
359
  "pair": "modes.default.surface.card"
348
360
  }
349
361
  }
362
+ },
363
+ "nav": {
364
+ "bg": {
365
+ "value": "{colors.white}",
366
+ "metadata": {
367
+ "pair": "modes.default.component.nav.text"
368
+ }
369
+ },
370
+ "text": {
371
+ "value": "{colors.neutral.900}",
372
+ "metadata": {
373
+ "pair": "modes.default.component.nav.bg"
374
+ }
375
+ },
376
+ "link": {
377
+ "value": "{colors.neutral.700}",
378
+ "metadata": {}
379
+ },
380
+ "linkHover": {
381
+ "value": "{colors.brand.600}",
382
+ "metadata": {}
383
+ },
384
+ "linkActive": {
385
+ "value": "{colors.brand.700}",
386
+ "metadata": {}
387
+ },
388
+ "border": {
389
+ "value": "{colors.neutral.200}",
390
+ "metadata": {}
391
+ }
392
+ },
393
+ "modal": {
394
+ "bg": {
395
+ "value": "{colors.white}",
396
+ "metadata": {}
397
+ },
398
+ "shadow": {
399
+ "value": "0 20px 48px -12px {colors.black} / 0.20",
400
+ "metadata": {}
401
+ },
402
+ "border": {
403
+ "value": "{colors.neutral.200}",
404
+ "metadata": {}
405
+ },
406
+ "overlay": {
407
+ "value": "{colors.black} / 0.6",
408
+ "metadata": {}
409
+ }
410
+ },
411
+ "toast": {
412
+ "success": {
413
+ "bg": {
414
+ "value": "{colors.success.50}",
415
+ "metadata": {
416
+ "pair": "modes.default.component.toast.success.text"
417
+ }
418
+ },
419
+ "text": {
420
+ "value": "{colors.success.800}",
421
+ "metadata": {
422
+ "pair": "modes.default.component.toast.success.bg"
423
+ }
424
+ },
425
+ "border": {
426
+ "value": "{colors.success.200}",
427
+ "metadata": {}
428
+ },
429
+ "icon": {
430
+ "value": "{colors.success.600}",
431
+ "metadata": {}
432
+ }
433
+ },
434
+ "warning": {
435
+ "bg": {
436
+ "value": "{colors.warning.50}",
437
+ "metadata": {
438
+ "pair": "modes.default.component.toast.warning.text"
439
+ }
440
+ },
441
+ "text": {
442
+ "value": "{colors.warning.800}",
443
+ "metadata": {
444
+ "pair": "modes.default.component.toast.warning.bg"
445
+ }
446
+ },
447
+ "border": {
448
+ "value": "{colors.warning.200}",
449
+ "metadata": {}
450
+ },
451
+ "icon": {
452
+ "value": "{colors.warning.600}",
453
+ "metadata": {}
454
+ }
455
+ },
456
+ "danger": {
457
+ "bg": {
458
+ "value": "{colors.error.50}",
459
+ "metadata": {
460
+ "pair": "modes.default.component.toast.danger.text"
461
+ }
462
+ },
463
+ "text": {
464
+ "value": "{colors.error.800}",
465
+ "metadata": {
466
+ "pair": "modes.default.component.toast.danger.bg"
467
+ }
468
+ },
469
+ "border": {
470
+ "value": "{colors.error.200}",
471
+ "metadata": {}
472
+ },
473
+ "icon": {
474
+ "value": "{colors.error.600}",
475
+ "metadata": {}
476
+ }
477
+ },
478
+ "info": {
479
+ "bg": {
480
+ "value": "{colors.info.50}",
481
+ "metadata": {
482
+ "pair": "modes.default.component.toast.info.text"
483
+ }
484
+ },
485
+ "text": {
486
+ "value": "{colors.info.800}",
487
+ "metadata": {
488
+ "pair": "modes.default.component.toast.info.bg"
489
+ }
490
+ },
491
+ "border": {
492
+ "value": "{colors.info.200}",
493
+ "metadata": {}
494
+ },
495
+ "icon": {
496
+ "value": "{colors.info.600}",
497
+ "metadata": {}
498
+ }
499
+ }
500
+ },
501
+ "tooltip": {
502
+ "bg": {
503
+ "value": "{colors.neutral.900}",
504
+ "metadata": {
505
+ "pair": "modes.default.component.tooltip.text"
506
+ }
507
+ },
508
+ "text": {
509
+ "value": "{colors.white}",
510
+ "metadata": {
511
+ "pair": "modes.default.component.tooltip.bg"
512
+ }
513
+ },
514
+ "border": {
515
+ "value": "{colors.neutral.700}",
516
+ "metadata": {}
517
+ }
518
+ },
519
+ "dropdown": {
520
+ "bg": {
521
+ "value": "{colors.white}",
522
+ "metadata": {
523
+ "pair": "modes.default.component.dropdown.item.text"
524
+ }
525
+ },
526
+ "border": {
527
+ "value": "{colors.neutral.200}",
528
+ "metadata": {}
529
+ },
530
+ "item": {
531
+ "default": {
532
+ "value": "transparent",
533
+ "metadata": {}
534
+ },
535
+ "hover": {
536
+ "value": "{colors.neutral.100}",
537
+ "metadata": {}
538
+ },
539
+ "active": {
540
+ "value": "{colors.info.50}",
541
+ "metadata": {}
542
+ },
543
+ "text": {
544
+ "value": "{colors.neutral.900}",
545
+ "metadata": {
546
+ "pair": "modes.default.component.dropdown.bg"
547
+ }
548
+ }
549
+ }
350
550
  }
351
551
  }
352
552
  },
@@ -381,6 +581,18 @@
381
581
  },
382
582
  "hero": {
383
583
  "value": "linear-gradient(135deg, {colors.accent.700} 0%, {colors.accent.900} 100%)"
584
+ },
585
+ "hover": {
586
+ "value": "{colors.neutral.700}"
587
+ },
588
+ "selected": {
589
+ "value": "{colors.info.900}"
590
+ },
591
+ "active": {
592
+ "value": "{colors.neutral.600}"
593
+ },
594
+ "divider": {
595
+ "value": "{colors.neutral.700}"
384
596
  }
385
597
  },
386
598
  "text": {
@@ -719,6 +931,194 @@
719
931
  "pair": "modes.dark.surface.card"
720
932
  }
721
933
  }
934
+ },
935
+ "nav": {
936
+ "bg": {
937
+ "value": "{colors.neutral.900}",
938
+ "metadata": {
939
+ "pair": "modes.dark.component.nav.text"
940
+ }
941
+ },
942
+ "text": {
943
+ "value": "{colors.neutral.50}",
944
+ "metadata": {
945
+ "pair": "modes.dark.component.nav.bg"
946
+ }
947
+ },
948
+ "link": {
949
+ "value": "{colors.neutral.300}",
950
+ "metadata": {}
951
+ },
952
+ "linkHover": {
953
+ "value": "{colors.brand.400}",
954
+ "metadata": {}
955
+ },
956
+ "linkActive": {
957
+ "value": "{colors.brand.300}",
958
+ "metadata": {}
959
+ },
960
+ "border": {
961
+ "value": "{colors.neutral.700}",
962
+ "metadata": {}
963
+ }
964
+ },
965
+ "modal": {
966
+ "bg": {
967
+ "value": "{colors.neutral.800}",
968
+ "metadata": {}
969
+ },
970
+ "shadow": {
971
+ "value": "0 20px 48px -12px {colors.black} / 0.20",
972
+ "metadata": {}
973
+ },
974
+ "border": {
975
+ "value": "{colors.neutral.700}",
976
+ "metadata": {}
977
+ },
978
+ "overlay": {
979
+ "value": "{colors.black} / 0.6",
980
+ "metadata": {}
981
+ }
982
+ },
983
+ "toast": {
984
+ "success": {
985
+ "bg": {
986
+ "value": "{colors.success.900}",
987
+ "metadata": {
988
+ "pair": "modes.dark.component.toast.success.text"
989
+ }
990
+ },
991
+ "text": {
992
+ "value": "{colors.success.100}",
993
+ "metadata": {
994
+ "pair": "modes.dark.component.toast.success.bg"
995
+ }
996
+ },
997
+ "border": {
998
+ "value": "{colors.success.700}",
999
+ "metadata": {}
1000
+ },
1001
+ "icon": {
1002
+ "value": "{colors.success.400}",
1003
+ "metadata": {}
1004
+ }
1005
+ },
1006
+ "warning": {
1007
+ "bg": {
1008
+ "value": "{colors.warning.900}",
1009
+ "metadata": {
1010
+ "pair": "modes.dark.component.toast.warning.text"
1011
+ }
1012
+ },
1013
+ "text": {
1014
+ "value": "{colors.warning.100}",
1015
+ "metadata": {
1016
+ "pair": "modes.dark.component.toast.warning.bg"
1017
+ }
1018
+ },
1019
+ "border": {
1020
+ "value": "{colors.warning.700}",
1021
+ "metadata": {}
1022
+ },
1023
+ "icon": {
1024
+ "value": "{colors.warning.400}",
1025
+ "metadata": {}
1026
+ }
1027
+ },
1028
+ "danger": {
1029
+ "bg": {
1030
+ "value": "{colors.error.900}",
1031
+ "metadata": {
1032
+ "pair": "modes.dark.component.toast.danger.text"
1033
+ }
1034
+ },
1035
+ "text": {
1036
+ "value": "{colors.error.100}",
1037
+ "metadata": {
1038
+ "pair": "modes.dark.component.toast.danger.bg"
1039
+ }
1040
+ },
1041
+ "border": {
1042
+ "value": "{colors.error.700}",
1043
+ "metadata": {}
1044
+ },
1045
+ "icon": {
1046
+ "value": "{colors.error.400}",
1047
+ "metadata": {}
1048
+ }
1049
+ },
1050
+ "info": {
1051
+ "bg": {
1052
+ "value": "{colors.info.900}",
1053
+ "metadata": {
1054
+ "pair": "modes.dark.component.toast.info.text"
1055
+ }
1056
+ },
1057
+ "text": {
1058
+ "value": "{colors.info.100}",
1059
+ "metadata": {
1060
+ "pair": "modes.dark.component.toast.info.bg"
1061
+ }
1062
+ },
1063
+ "border": {
1064
+ "value": "{colors.info.700}",
1065
+ "metadata": {}
1066
+ },
1067
+ "icon": {
1068
+ "value": "{colors.info.400}",
1069
+ "metadata": {}
1070
+ }
1071
+ }
1072
+ },
1073
+ "tooltip": {
1074
+ "bg": {
1075
+ "value": "{colors.neutral.50}",
1076
+ "metadata": {
1077
+ "pair": "modes.dark.component.tooltip.text"
1078
+ }
1079
+ },
1080
+ "text": {
1081
+ "value": "{colors.neutral.900}",
1082
+ "metadata": {
1083
+ "pair": "modes.dark.component.tooltip.bg"
1084
+ }
1085
+ },
1086
+ "border": {
1087
+ "value": "{colors.neutral.300}",
1088
+ "metadata": {}
1089
+ }
1090
+ },
1091
+ "dropdown": {
1092
+ "bg": {
1093
+ "value": "{colors.neutral.800}",
1094
+ "metadata": {
1095
+ "pair": "modes.dark.component.dropdown.item.text"
1096
+ }
1097
+ },
1098
+ "border": {
1099
+ "value": "{colors.neutral.700}",
1100
+ "metadata": {}
1101
+ },
1102
+ "item": {
1103
+ "default": {
1104
+ "value": "transparent",
1105
+ "metadata": {}
1106
+ },
1107
+ "hover": {
1108
+ "value": "{colors.neutral.700}",
1109
+ "metadata": {}
1110
+ },
1111
+ "active": {
1112
+ "value": "{colors.info.900}",
1113
+ "metadata": {}
1114
+ },
1115
+ "text": {
1116
+ "value": "{colors.neutral.100}",
1117
+ "metadata": {
1118
+ "pair": "modes.dark.component.dropdown.bg"
1119
+ }
1120
+ }
1121
+ }
722
1122
  }
723
1123
  }
724
1124
  }
@@ -61,6 +61,7 @@
61
61
  },
62
62
  "transitions": {
63
63
  "duration": {
64
+ "reduced": "0.01ms",
64
65
  "instant": "75ms",
65
66
  "fast": "150ms",
66
67
  "base": "200ms",
@@ -120,6 +121,48 @@
120
121
  "duration": "{transitions.duration.slowest}",
121
122
  "easing": "{transitions.easing.spring}",
122
123
  "keyframes": "pulse"
124
+ },
125
+ "reducedMotion": {
126
+ "fadeIn": {
127
+ "duration": "{transitions.duration.reduced}",
128
+ "easing": "{transitions.easing.linear}",
129
+ "keyframes": "fade-in"
130
+ },
131
+ "fadeOut": {
132
+ "duration": "{transitions.duration.reduced}",
133
+ "easing": "{transitions.easing.linear}",
134
+ "keyframes": "fade-out"
135
+ },
136
+ "slideUp": {
137
+ "duration": "{transitions.duration.reduced}",
138
+ "easing": "{transitions.easing.linear}",
139
+ "keyframes": "slide-up"
140
+ },
141
+ "slideDown": {
142
+ "duration": "{transitions.duration.reduced}",
143
+ "easing": "{transitions.easing.linear}",
144
+ "keyframes": "slide-down"
145
+ },
146
+ "scaleIn": {
147
+ "duration": "{transitions.duration.reduced}",
148
+ "easing": "{transitions.easing.linear}",
149
+ "keyframes": "scale-in"
150
+ },
151
+ "bounce": {
152
+ "duration": "{transitions.duration.reduced}",
153
+ "easing": "{transitions.easing.linear}",
154
+ "keyframes": "bounce"
155
+ },
156
+ "shake": {
157
+ "duration": "{transitions.duration.reduced}",
158
+ "easing": "{transitions.easing.linear}",
159
+ "keyframes": "shake"
160
+ },
161
+ "pulse": {
162
+ "duration": "{transitions.duration.reduced}",
163
+ "easing": "{transitions.easing.linear}",
164
+ "keyframes": "pulse"
165
+ }
123
166
  }
124
167
  },
125
168
  "opacity": {
@@ -155,6 +198,8 @@
155
198
  "offset": "2px",
156
199
  "style": "solid"
157
200
  },
201
+ "reducedMotion": "{transitions.duration.reduced}",
202
+ "forcedColors": "auto",
158
203
  "minTouchTarget": "44px",
159
204
  "minTextSize": "16px"
160
205
  },