@phcdevworks/spectre-tokens 2.8.0 → 3.0.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": "3.0.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",
@@ -37,7 +37,7 @@
37
37
  "node": "^22.12.0 || >=24.0.0"
38
38
  },
39
39
  "type": "module",
40
- "packageManager": "npm@11.16.0",
40
+ "packageManager": "npm@11.17.0",
41
41
  "main": "./dist/index.cjs",
42
42
  "module": "./dist/index.js",
43
43
  "types": "./dist/index.d.ts",
@@ -95,18 +95,26 @@
95
95
  },
96
96
  "devDependencies": {
97
97
  "@phcdevworks/spectre-manifest": "^1.0.0",
98
- "@types/node": "^25.9.2",
99
- "@typescript-eslint/eslint-plugin": "^8.60.1",
100
- "@typescript-eslint/parser": "^8.60.1",
98
+ "@types/node": "^25.9.3",
99
+ "@typescript-eslint/eslint-plugin": "^8.61.1",
100
+ "@typescript-eslint/parser": "^8.61.1",
101
101
  "colord": "^2.9.3",
102
- "eslint": "^10.4.1",
102
+ "eslint": "^10.5.0",
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",
110
- "vitest": "^4.1.8"
109
+ "typescript-eslint": "^8.61.1",
110
+ "vitest": "^4.1.9"
111
+ },
112
+ "overrides": {
113
+ "esbuild": "0.28.1"
114
+ },
115
+ "allowScripts": {
116
+ "esbuild@0.27.7": true,
117
+ "esbuild@0.28.1": true,
118
+ "esbuild@0.28.0": true
111
119
  }
112
120
  }
@@ -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
@@ -23,14 +23,28 @@
23
23
  "overlay": {
24
24
  "value": "{colors.black} / 0.6"
25
25
  },
26
- "alternate": {
26
+ "subtle": {
27
27
  "value": "{colors.neutral.100}",
28
+ "description": "slightly recessed background for zebra rows, section bands, and inset panels — one step below surface.page",
28
29
  "metadata": {
29
30
  "pair": "modes.default.text.onPage.default"
30
31
  }
31
32
  },
32
33
  "hero": {
33
- "value": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)"
34
+ "value": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)",
35
+ "description": "full-bleed gradient background for hero and marketing sections only — not a general surface; pair with light text tokens explicitly"
36
+ },
37
+ "hover": {
38
+ "value": "{colors.neutral.100}"
39
+ },
40
+ "selected": {
41
+ "value": "{colors.info.50}"
42
+ },
43
+ "active": {
44
+ "value": "{colors.neutral.200}"
45
+ },
46
+ "divider": {
47
+ "value": "{colors.neutral.200}"
34
48
  }
35
49
  },
36
50
  "text": {
@@ -347,6 +361,194 @@
347
361
  "pair": "modes.default.surface.card"
348
362
  }
349
363
  }
364
+ },
365
+ "nav": {
366
+ "bg": {
367
+ "value": "{colors.white}",
368
+ "metadata": {
369
+ "pair": "modes.default.component.nav.text"
370
+ }
371
+ },
372
+ "text": {
373
+ "value": "{colors.neutral.900}",
374
+ "metadata": {
375
+ "pair": "modes.default.component.nav.bg"
376
+ }
377
+ },
378
+ "link": {
379
+ "value": "{colors.neutral.700}",
380
+ "metadata": {}
381
+ },
382
+ "linkHover": {
383
+ "value": "{colors.brand.600}",
384
+ "metadata": {}
385
+ },
386
+ "linkActive": {
387
+ "value": "{colors.brand.700}",
388
+ "metadata": {}
389
+ },
390
+ "border": {
391
+ "value": "{colors.neutral.200}",
392
+ "metadata": {}
393
+ }
394
+ },
395
+ "modal": {
396
+ "bg": {
397
+ "value": "{colors.white}",
398
+ "metadata": {}
399
+ },
400
+ "shadow": {
401
+ "value": "0 20px 48px -12px {colors.black} / 0.20",
402
+ "metadata": {}
403
+ },
404
+ "border": {
405
+ "value": "{colors.neutral.200}",
406
+ "metadata": {}
407
+ },
408
+ "overlay": {
409
+ "value": "{colors.black} / 0.6",
410
+ "metadata": {}
411
+ }
412
+ },
413
+ "toast": {
414
+ "success": {
415
+ "bg": {
416
+ "value": "{colors.success.50}",
417
+ "metadata": {
418
+ "pair": "modes.default.component.toast.success.text"
419
+ }
420
+ },
421
+ "text": {
422
+ "value": "{colors.success.800}",
423
+ "metadata": {
424
+ "pair": "modes.default.component.toast.success.bg"
425
+ }
426
+ },
427
+ "border": {
428
+ "value": "{colors.success.200}",
429
+ "metadata": {}
430
+ },
431
+ "icon": {
432
+ "value": "{colors.success.600}",
433
+ "metadata": {}
434
+ }
435
+ },
436
+ "warning": {
437
+ "bg": {
438
+ "value": "{colors.warning.50}",
439
+ "metadata": {
440
+ "pair": "modes.default.component.toast.warning.text"
441
+ }
442
+ },
443
+ "text": {
444
+ "value": "{colors.warning.800}",
445
+ "metadata": {
446
+ "pair": "modes.default.component.toast.warning.bg"
447
+ }
448
+ },
449
+ "border": {
450
+ "value": "{colors.warning.200}",
451
+ "metadata": {}
452
+ },
453
+ "icon": {
454
+ "value": "{colors.warning.600}",
455
+ "metadata": {}
456
+ }
457
+ },
458
+ "danger": {
459
+ "bg": {
460
+ "value": "{colors.error.50}",
461
+ "metadata": {
462
+ "pair": "modes.default.component.toast.danger.text"
463
+ }
464
+ },
465
+ "text": {
466
+ "value": "{colors.error.800}",
467
+ "metadata": {
468
+ "pair": "modes.default.component.toast.danger.bg"
469
+ }
470
+ },
471
+ "border": {
472
+ "value": "{colors.error.200}",
473
+ "metadata": {}
474
+ },
475
+ "icon": {
476
+ "value": "{colors.error.600}",
477
+ "metadata": {}
478
+ }
479
+ },
480
+ "info": {
481
+ "bg": {
482
+ "value": "{colors.info.50}",
483
+ "metadata": {
484
+ "pair": "modes.default.component.toast.info.text"
485
+ }
486
+ },
487
+ "text": {
488
+ "value": "{colors.info.800}",
489
+ "metadata": {
490
+ "pair": "modes.default.component.toast.info.bg"
491
+ }
492
+ },
493
+ "border": {
494
+ "value": "{colors.info.200}",
495
+ "metadata": {}
496
+ },
497
+ "icon": {
498
+ "value": "{colors.info.600}",
499
+ "metadata": {}
500
+ }
501
+ }
502
+ },
503
+ "tooltip": {
504
+ "bg": {
505
+ "value": "{colors.neutral.900}",
506
+ "metadata": {
507
+ "pair": "modes.default.component.tooltip.text"
508
+ }
509
+ },
510
+ "text": {
511
+ "value": "{colors.white}",
512
+ "metadata": {
513
+ "pair": "modes.default.component.tooltip.bg"
514
+ }
515
+ },
516
+ "border": {
517
+ "value": "{colors.neutral.700}",
518
+ "metadata": {}
519
+ }
520
+ },
521
+ "dropdown": {
522
+ "bg": {
523
+ "value": "{colors.white}",
524
+ "metadata": {
525
+ "pair": "modes.default.component.dropdown.item.text"
526
+ }
527
+ },
528
+ "border": {
529
+ "value": "{colors.neutral.200}",
530
+ "metadata": {}
531
+ },
532
+ "item": {
533
+ "default": {
534
+ "value": "transparent",
535
+ "metadata": {}
536
+ },
537
+ "hover": {
538
+ "value": "{colors.neutral.100}",
539
+ "metadata": {}
540
+ },
541
+ "active": {
542
+ "value": "{colors.info.50}",
543
+ "metadata": {}
544
+ },
545
+ "text": {
546
+ "value": "{colors.neutral.900}",
547
+ "metadata": {
548
+ "pair": "modes.default.component.dropdown.bg"
549
+ }
550
+ }
551
+ }
350
552
  }
351
553
  }
352
554
  },
@@ -373,14 +575,28 @@
373
575
  "overlay": {
374
576
  "value": "{colors.black} / 0.6"
375
577
  },
376
- "alternate": {
578
+ "subtle": {
377
579
  "value": "{colors.neutral.800}",
580
+ "description": "slightly recessed background for zebra rows, section bands, and inset panels — one step below surface.page",
378
581
  "metadata": {
379
582
  "pair": "modes.dark.text.onPage.default"
380
583
  }
381
584
  },
382
585
  "hero": {
383
- "value": "linear-gradient(135deg, {colors.accent.700} 0%, {colors.accent.900} 100%)"
586
+ "value": "linear-gradient(135deg, {colors.accent.700} 0%, {colors.accent.900} 100%)",
587
+ "description": "full-bleed gradient background for hero and marketing sections only — not a general surface; pair with light text tokens explicitly"
588
+ },
589
+ "hover": {
590
+ "value": "{colors.neutral.700}"
591
+ },
592
+ "selected": {
593
+ "value": "{colors.info.900}"
594
+ },
595
+ "active": {
596
+ "value": "{colors.neutral.600}"
597
+ },
598
+ "divider": {
599
+ "value": "{colors.neutral.700}"
384
600
  }
385
601
  },
386
602
  "text": {
@@ -719,6 +935,194 @@
719
935
  "pair": "modes.dark.surface.card"
720
936
  }
721
937
  }
938
+ },
939
+ "nav": {
940
+ "bg": {
941
+ "value": "{colors.neutral.900}",
942
+ "metadata": {
943
+ "pair": "modes.dark.component.nav.text"
944
+ }
945
+ },
946
+ "text": {
947
+ "value": "{colors.neutral.50}",
948
+ "metadata": {
949
+ "pair": "modes.dark.component.nav.bg"
950
+ }
951
+ },
952
+ "link": {
953
+ "value": "{colors.neutral.300}",
954
+ "metadata": {}
955
+ },
956
+ "linkHover": {
957
+ "value": "{colors.brand.400}",
958
+ "metadata": {}
959
+ },
960
+ "linkActive": {
961
+ "value": "{colors.brand.300}",
962
+ "metadata": {}
963
+ },
964
+ "border": {
965
+ "value": "{colors.neutral.700}",
966
+ "metadata": {}
967
+ }
968
+ },
969
+ "modal": {
970
+ "bg": {
971
+ "value": "{colors.neutral.800}",
972
+ "metadata": {}
973
+ },
974
+ "shadow": {
975
+ "value": "0 20px 48px -12px {colors.black} / 0.20",
976
+ "metadata": {}
977
+ },
978
+ "border": {
979
+ "value": "{colors.neutral.700}",
980
+ "metadata": {}
981
+ },
982
+ "overlay": {
983
+ "value": "{colors.black} / 0.6",
984
+ "metadata": {}
985
+ }
986
+ },
987
+ "toast": {
988
+ "success": {
989
+ "bg": {
990
+ "value": "{colors.success.900}",
991
+ "metadata": {
992
+ "pair": "modes.dark.component.toast.success.text"
993
+ }
994
+ },
995
+ "text": {
996
+ "value": "{colors.success.100}",
997
+ "metadata": {
998
+ "pair": "modes.dark.component.toast.success.bg"
999
+ }
1000
+ },
1001
+ "border": {
1002
+ "value": "{colors.success.700}",
1003
+ "metadata": {}
1004
+ },
1005
+ "icon": {
1006
+ "value": "{colors.success.400}",
1007
+ "metadata": {}
1008
+ }
1009
+ },
1010
+ "warning": {
1011
+ "bg": {
1012
+ "value": "{colors.warning.900}",
1013
+ "metadata": {
1014
+ "pair": "modes.dark.component.toast.warning.text"
1015
+ }
1016
+ },
1017
+ "text": {
1018
+ "value": "{colors.warning.100}",
1019
+ "metadata": {
1020
+ "pair": "modes.dark.component.toast.warning.bg"
1021
+ }
1022
+ },
1023
+ "border": {
1024
+ "value": "{colors.warning.700}",
1025
+ "metadata": {}
1026
+ },
1027
+ "icon": {
1028
+ "value": "{colors.warning.400}",
1029
+ "metadata": {}
1030
+ }
1031
+ },
1032
+ "danger": {
1033
+ "bg": {
1034
+ "value": "{colors.error.900}",
1035
+ "metadata": {
1036
+ "pair": "modes.dark.component.toast.danger.text"
1037
+ }
1038
+ },
1039
+ "text": {
1040
+ "value": "{colors.error.100}",
1041
+ "metadata": {
1042
+ "pair": "modes.dark.component.toast.danger.bg"
1043
+ }
1044
+ },
1045
+ "border": {
1046
+ "value": "{colors.error.700}",
1047
+ "metadata": {}
1048
+ },
1049
+ "icon": {
1050
+ "value": "{colors.error.400}",
1051
+ "metadata": {}
1052
+ }
1053
+ },
1054
+ "info": {
1055
+ "bg": {
1056
+ "value": "{colors.info.900}",
1057
+ "metadata": {
1058
+ "pair": "modes.dark.component.toast.info.text"
1059
+ }
1060
+ },
1061
+ "text": {
1062
+ "value": "{colors.info.100}",
1063
+ "metadata": {
1064
+ "pair": "modes.dark.component.toast.info.bg"
1065
+ }
1066
+ },
1067
+ "border": {
1068
+ "value": "{colors.info.700}",
1069
+ "metadata": {}
1070
+ },
1071
+ "icon": {
1072
+ "value": "{colors.info.400}",
1073
+ "metadata": {}
1074
+ }
1075
+ }
1076
+ },
1077
+ "tooltip": {
1078
+ "bg": {
1079
+ "value": "{colors.neutral.50}",
1080
+ "metadata": {
1081
+ "pair": "modes.dark.component.tooltip.text"
1082
+ }
1083
+ },
1084
+ "text": {
1085
+ "value": "{colors.neutral.900}",
1086
+ "metadata": {
1087
+ "pair": "modes.dark.component.tooltip.bg"
1088
+ }
1089
+ },
1090
+ "border": {
1091
+ "value": "{colors.neutral.300}",
1092
+ "metadata": {}
1093
+ }
1094
+ },
1095
+ "dropdown": {
1096
+ "bg": {
1097
+ "value": "{colors.neutral.800}",
1098
+ "metadata": {
1099
+ "pair": "modes.dark.component.dropdown.item.text"
1100
+ }
1101
+ },
1102
+ "border": {
1103
+ "value": "{colors.neutral.700}",
1104
+ "metadata": {}
1105
+ },
1106
+ "item": {
1107
+ "default": {
1108
+ "value": "transparent",
1109
+ "metadata": {}
1110
+ },
1111
+ "hover": {
1112
+ "value": "{colors.neutral.700}",
1113
+ "metadata": {}
1114
+ },
1115
+ "active": {
1116
+ "value": "{colors.info.900}",
1117
+ "metadata": {}
1118
+ },
1119
+ "text": {
1120
+ "value": "{colors.neutral.100}",
1121
+ "metadata": {
1122
+ "pair": "modes.dark.component.dropdown.bg"
1123
+ }
1124
+ }
1125
+ }
722
1126
  }
723
1127
  }
724
1128
  }