@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.
Files changed (14) hide show
  1. package/README.md +97 -58
  2. package/dist/index.cjs +317 -11
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +98 -2
  5. package/dist/index.d.cts +281 -3
  6. package/dist/index.d.ts +281 -3
  7. package/dist/index.js +317 -11
  8. package/dist/index.js.map +1 -1
  9. package/dist/tokens.dtcg.json +690 -6
  10. package/package.json +17 -9
  11. package/tokens/components.json +167 -0
  12. package/tokens/modes.json +408 -4
  13. package/tokens/primitives.json +45 -0
  14. package/tokens/semantic-roles.json +37 -0
package/dist/tokens.dtcg.json CHANGED
@@ -199,6 +199,166 @@
199
199
  "$value": "{colors.neutral.500}",
200
200
  "$type": "color"
201
201
  }
202
+ },
203
+ "nav": {
204
+ "bg": {
205
+ "$value": "{colors.white}",
206
+ "$type": "color"
207
+ },
208
+ "text": {
209
+ "$value": "{colors.neutral.900}",
210
+ "$type": "color"
211
+ },
212
+ "link": {
213
+ "$value": "{colors.neutral.700}",
214
+ "$type": "color"
215
+ },
216
+ "linkHover": {
217
+ "$value": "{colors.brand.600}",
218
+ "$type": "color"
219
+ },
220
+ "linkActive": {
221
+ "$value": "{colors.brand.700}",
222
+ "$type": "color"
223
+ },
224
+ "border": {
225
+ "$value": "{colors.neutral.200}",
226
+ "$type": "color"
227
+ }
228
+ },
229
+ "modal": {
230
+ "bg": {
231
+ "$value": "{colors.white}",
232
+ "$type": "color"
233
+ },
234
+ "shadow": {
235
+ "$value": "0 20px 48px -12px {colors.black} / 0.20",
236
+ "$type": "string"
237
+ },
238
+ "border": {
239
+ "$value": "{colors.neutral.200}",
240
+ "$type": "color"
241
+ },
242
+ "overlay": {
243
+ "$value": "{colors.black} / 0.6",
244
+ "$type": "color"
245
+ }
246
+ },
247
+ "toast": {
248
+ "success": {
249
+ "bg": {
250
+ "$value": "{colors.success.50}",
251
+ "$type": "color"
252
+ },
253
+ "text": {
254
+ "$value": "{colors.success.800}",
255
+ "$type": "color"
256
+ },
257
+ "border": {
258
+ "$value": "{colors.success.200}",
259
+ "$type": "color"
260
+ },
261
+ "icon": {
262
+ "$value": "{colors.success.600}",
263
+ "$type": "color"
264
+ }
265
+ },
266
+ "warning": {
267
+ "bg": {
268
+ "$value": "{colors.warning.50}",
269
+ "$type": "color"
270
+ },
271
+ "text": {
272
+ "$value": "{colors.warning.800}",
273
+ "$type": "color"
274
+ },
275
+ "border": {
276
+ "$value": "{colors.warning.200}",
277
+ "$type": "color"
278
+ },
279
+ "icon": {
280
+ "$value": "{colors.warning.600}",
281
+ "$type": "color"
282
+ }
283
+ },
284
+ "danger": {
285
+ "bg": {
286
+ "$value": "{colors.error.50}",
287
+ "$type": "color"
288
+ },
289
+ "text": {
290
+ "$value": "{colors.error.800}",
291
+ "$type": "color"
292
+ },
293
+ "border": {
294
+ "$value": "{colors.error.200}",
295
+ "$type": "color"
296
+ },
297
+ "icon": {
298
+ "$value": "{colors.error.600}",
299
+ "$type": "color"
300
+ }
301
+ },
302
+ "info": {
303
+ "bg": {
304
+ "$value": "{colors.info.50}",
305
+ "$type": "color"
306
+ },
307
+ "text": {
308
+ "$value": "{colors.info.800}",
309
+ "$type": "color"
310
+ },
311
+ "border": {
312
+ "$value": "{colors.info.200}",
313
+ "$type": "color"
314
+ },
315
+ "icon": {
316
+ "$value": "{colors.info.600}",
317
+ "$type": "color"
318
+ }
319
+ }
320
+ },
321
+ "tooltip": {
322
+ "bg": {
323
+ "$value": "{colors.neutral.900}",
324
+ "$type": "color"
325
+ },
326
+ "text": {
327
+ "$value": "{colors.white}",
328
+ "$type": "color"
329
+ },
330
+ "border": {
331
+ "$value": "{colors.neutral.700}",
332
+ "$type": "color"
333
+ }
334
+ },
335
+ "dropdown": {
336
+ "bg": {
337
+ "$value": "{colors.white}",
338
+ "$type": "color"
339
+ },
340
+ "border": {
341
+ "$value": "{colors.neutral.200}",
342
+ "$type": "color"
343
+ },
344
+ "item": {
345
+ "default": {
346
+ "$value": "transparent",
347
+ "$type": "string"
348
+ },
349
+ "hover": {
350
+ "$value": "{colors.neutral.100}",
351
+ "$type": "color"
352
+ },
353
+ "active": {
354
+ "$value": "{colors.info.50}",
355
+ "$type": "color"
356
+ },
357
+ "text": {
358
+ "$value": "{colors.neutral.900}",
359
+ "$type": "color"
360
+ }
361
+ }
202
362
  }
203
363
  },
204
364
  "buttons": {
@@ -556,13 +716,31 @@
556
716
  "$value": "{colors.black} / 0.6",
557
717
  "$type": "color"
558
718
  },
559
- "alternate": {
719
+ "subtle": {
560
720
  "$value": "{colors.neutral.100}",
561
- "$type": "color"
721
+ "$type": "color",
722
+ "$description": "slightly recessed background for zebra rows, section bands, and inset panels — one step below surface.page"
562
723
  },
563
724
  "hero": {
564
725
  "$value": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)",
565
- "$type": "string"
726
+ "$type": "string",
727
+ "$description": "full-bleed gradient background for hero and marketing sections only — not a general surface; pair with light text tokens explicitly"
728
+ },
729
+ "hover": {
730
+ "$value": "{colors.neutral.100}",
731
+ "$type": "color"
732
+ },
733
+ "selected": {
734
+ "$value": "{colors.info.50}",
735
+ "$type": "color"
736
+ },
737
+ "active": {
738
+ "$value": "{colors.neutral.200}",
739
+ "$type": "color"
740
+ },
741
+ "divider": {
742
+ "$value": "{colors.neutral.200}",
743
+ "$type": "color"
566
744
  }
567
745
  },
568
746
  "text": {
@@ -799,6 +977,166 @@
799
977
  "$value": "{colors.neutral.500}",
800
978
  "$type": "color"
801
979
  }
980
+ },
981
+ "nav": {
982
+ "bg": {
983
+ "$value": "{colors.white}",
984
+ "$type": "color"
985
+ },
986
+ "text": {
987
+ "$value": "{colors.neutral.900}",
988
+ "$type": "color"
989
+ },
990
+ "link": {
991
+ "$value": "{colors.neutral.700}",
992
+ "$type": "color"
993
+ },
994
+ "linkHover": {
995
+ "$value": "{colors.brand.600}",
996
+ "$type": "color"
997
+ },
998
+ "linkActive": {
999
+ "$value": "{colors.brand.700}",
1000
+ "$type": "color"
1001
+ },
1002
+ "border": {
1003
+ "$value": "{colors.neutral.200}",
1004
+ "$type": "color"
1005
+ }
1006
+ },
1007
+ "modal": {
1008
+ "bg": {
1009
+ "$value": "{colors.white}",
1010
+ "$type": "color"
1011
+ },
1012
+ "shadow": {
1013
+ "$value": "0 20px 48px -12px {colors.black} / 0.20",
1014
+ "$type": "string"
1015
+ },
1016
+ "border": {
1017
+ "$value": "{colors.neutral.200}",
1018
+ "$type": "color"
1019
+ },
1020
+ "overlay": {
1021
+ "$value": "{colors.black} / 0.6",
1022
+ "$type": "color"
1023
+ }
1024
+ },
1025
+ "toast": {
1026
+ "success": {
1027
+ "bg": {
1028
+ "$value": "{colors.success.50}",
1029
+ "$type": "color"
1030
+ },
1031
+ "text": {
1032
+ "$value": "{colors.success.800}",
1033
+ "$type": "color"
1034
+ },
1035
+ "border": {
1036
+ "$value": "{colors.success.200}",
1037
+ "$type": "color"
1038
+ },
1039
+ "icon": {
1040
+ "$value": "{colors.success.600}",
1041
+ "$type": "color"
1042
+ }
1043
+ },
1044
+ "warning": {
1045
+ "bg": {
1046
+ "$value": "{colors.warning.50}",
1047
+ "$type": "color"
1048
+ },
1049
+ "text": {
1050
+ "$value": "{colors.warning.800}",
1051
+ "$type": "color"
1052
+ },
1053
+ "border": {
1054
+ "$value": "{colors.warning.200}",
1055
+ "$type": "color"
1056
+ },
1057
+ "icon": {
1058
+ "$value": "{colors.warning.600}",
1059
+ "$type": "color"
1060
+ }
1061
+ },
1062
+ "danger": {
1063
+ "bg": {
1064
+ "$value": "{colors.error.50}",
1065
+ "$type": "color"
1066
+ },
1067
+ "text": {
1068
+ "$value": "{colors.error.800}",
1069
+ "$type": "color"
1070
+ },
1071
+ "border": {
1072
+ "$value": "{colors.error.200}",
1073
+ "$type": "color"
1074
+ },
1075
+ "icon": {
1076
+ "$value": "{colors.error.600}",
1077
+ "$type": "color"
1078
+ }
1079
+ },
1080
+ "info": {
1081
+ "bg": {
1082
+ "$value": "{colors.info.50}",
1083
+ "$type": "color"
1084
+ },
1085
+ "text": {
1086
+ "$value": "{colors.info.800}",
1087
+ "$type": "color"
1088
+ },
1089
+ "border": {
1090
+ "$value": "{colors.info.200}",
1091
+ "$type": "color"
1092
+ },
1093
+ "icon": {
1094
+ "$value": "{colors.info.600}",
1095
+ "$type": "color"
1096
+ }
1097
+ }
1098
+ },
1099
+ "tooltip": {
1100
+ "bg": {
1101
+ "$value": "{colors.neutral.900}",
1102
+ "$type": "color"
1103
+ },
1104
+ "text": {
1105
+ "$value": "{colors.white}",
1106
+ "$type": "color"
1107
+ },
1108
+ "border": {
1109
+ "$value": "{colors.neutral.700}",
1110
+ "$type": "color"
1111
+ }
1112
+ },
1113
+ "dropdown": {
1114
+ "bg": {
1115
+ "$value": "{colors.white}",
1116
+ "$type": "color"
1117
+ },
1118
+ "border": {
1119
+ "$value": "{colors.neutral.200}",
1120
+ "$type": "color"
1121
+ },
1122
+ "item": {
1123
+ "default": {
1124
+ "$value": "transparent",
1125
+ "$type": "string"
1126
+ },
1127
+ "hover": {
1128
+ "$value": "{colors.neutral.100}",
1129
+ "$type": "color"
1130
+ },
1131
+ "active": {
1132
+ "$value": "{colors.info.50}",
1133
+ "$type": "color"
1134
+ },
1135
+ "text": {
1136
+ "$value": "{colors.neutral.900}",
1137
+ "$type": "color"
1138
+ }
1139
+ }
802
1140
  }
803
1141
  }
804
1142
  },
@@ -820,13 +1158,31 @@
820
1158
  "$value": "{colors.black} / 0.6",
821
1159
  "$type": "color"
822
1160
  },
823
- "alternate": {
1161
+ "subtle": {
824
1162
  "$value": "{colors.neutral.800}",
825
- "$type": "color"
1163
+ "$type": "color",
1164
+ "$description": "slightly recessed background for zebra rows, section bands, and inset panels — one step below surface.page"
826
1165
  },
827
1166
  "hero": {
828
1167
  "$value": "linear-gradient(135deg, {colors.accent.700} 0%, {colors.accent.900} 100%)",
829
- "$type": "string"
1168
+ "$type": "string",
1169
+ "$description": "full-bleed gradient background for hero and marketing sections only — not a general surface; pair with light text tokens explicitly"
1170
+ },
1171
+ "hover": {
1172
+ "$value": "{colors.neutral.700}",
1173
+ "$type": "color"
1174
+ },
1175
+ "selected": {
1176
+ "$value": "{colors.info.900}",
1177
+ "$type": "color"
1178
+ },
1179
+ "active": {
1180
+ "$value": "{colors.neutral.600}",
1181
+ "$type": "color"
1182
+ },
1183
+ "divider": {
1184
+ "$value": "{colors.neutral.700}",
1185
+ "$type": "color"
830
1186
  }
831
1187
  },
832
1188
  "text": {
@@ -1075,6 +1431,166 @@
1075
1431
  "$value": "{colors.neutral.400}",
1076
1432
  "$type": "color"
1077
1433
  }
1434
+ },
1435
+ "nav": {
1436
+ "bg": {
1437
+ "$value": "{colors.neutral.900}",
1438
+ "$type": "color"
1439
+ },
1440
+ "text": {
1441
+ "$value": "{colors.neutral.50}",
1442
+ "$type": "color"
1443
+ },
1444
+ "link": {
1445
+ "$value": "{colors.neutral.300}",
1446
+ "$type": "color"
1447
+ },
1448
+ "linkHover": {
1449
+ "$value": "{colors.brand.400}",
1450
+ "$type": "color"
1451
+ },
1452
+ "linkActive": {
1453
+ "$value": "{colors.brand.300}",
1454
+ "$type": "color"
1455
+ },
1456
+ "border": {
1457
+ "$value": "{colors.neutral.700}",
1458
+ "$type": "color"
1459
+ }
1460
+ },
1461
+ "modal": {
1462
+ "bg": {
1463
+ "$value": "{colors.neutral.800}",
1464
+ "$type": "color"
1465
+ },
1466
+ "shadow": {
1467
+ "$value": "0 20px 48px -12px {colors.black} / 0.20",
1468
+ "$type": "string"
1469
+ },
1470
+ "border": {
1471
+ "$value": "{colors.neutral.700}",
1472
+ "$type": "color"
1473
+ },
1474
+ "overlay": {
1475
+ "$value": "{colors.black} / 0.6",
1476
+ "$type": "color"
1477
+ }
1478
+ },
1479
+ "toast": {
1480
+ "success": {
1481
+ "bg": {
1482
+ "$value": "{colors.success.900}",
1483
+ "$type": "color"
1484
+ },
1485
+ "text": {
1486
+ "$value": "{colors.success.100}",
1487
+ "$type": "color"
1488
+ },
1489
+ "border": {
1490
+ "$value": "{colors.success.700}",
1491
+ "$type": "color"
1492
+ },
1493
+ "icon": {
1494
+ "$value": "{colors.success.400}",
1495
+ "$type": "color"
1496
+ }
1497
+ },
1498
+ "warning": {
1499
+ "bg": {
1500
+ "$value": "{colors.warning.900}",
1501
+ "$type": "color"
1502
+ },
1503
+ "text": {
1504
+ "$value": "{colors.warning.100}",
1505
+ "$type": "color"
1506
+ },
1507
+ "border": {
1508
+ "$value": "{colors.warning.700}",
1509
+ "$type": "color"
1510
+ },
1511
+ "icon": {
1512
+ "$value": "{colors.warning.400}",
1513
+ "$type": "color"
1514
+ }
1515
+ },
1516
+ "danger": {
1517
+ "bg": {
1518
+ "$value": "{colors.error.900}",
1519
+ "$type": "color"
1520
+ },
1521
+ "text": {
1522
+ "$value": "{colors.error.100}",
1523
+ "$type": "color"
1524
+ },
1525
+ "border": {
1526
+ "$value": "{colors.error.700}",
1527
+ "$type": "color"
1528
+ },
1529
+ "icon": {
1530
+ "$value": "{colors.error.400}",
1531
+ "$type": "color"
1532
+ }
1533
+ },
1534
+ "info": {
1535
+ "bg": {
1536
+ "$value": "{colors.info.900}",
1537
+ "$type": "color"
1538
+ },
1539
+ "text": {
1540
+ "$value": "{colors.info.100}",
1541
+ "$type": "color"
1542
+ },
1543
+ "border": {
1544
+ "$value": "{colors.info.700}",
1545
+ "$type": "color"
1546
+ },
1547
+ "icon": {
1548
+ "$value": "{colors.info.400}",
1549
+ "$type": "color"
1550
+ }
1551
+ }
1552
+ },
1553
+ "tooltip": {
1554
+ "bg": {
1555
+ "$value": "{colors.neutral.50}",
1556
+ "$type": "color"
1557
+ },
1558
+ "text": {
1559
+ "$value": "{colors.neutral.900}",
1560
+ "$type": "color"
1561
+ },
1562
+ "border": {
1563
+ "$value": "{colors.neutral.300}",
1564
+ "$type": "color"
1565
+ }
1566
+ },
1567
+ "dropdown": {
1568
+ "bg": {
1569
+ "$value": "{colors.neutral.800}",
1570
+ "$type": "color"
1571
+ },
1572
+ "border": {
1573
+ "$value": "{colors.neutral.700}",
1574
+ "$type": "color"
1575
+ },
1576
+ "item": {
1577
+ "default": {
1578
+ "$value": "transparent",
1579
+ "$type": "string"
1580
+ },
1581
+ "hover": {
1582
+ "$value": "{colors.neutral.700}",
1583
+ "$type": "color"
1584
+ },
1585
+ "active": {
1586
+ "$value": "{colors.info.900}",
1587
+ "$type": "color"
1588
+ },
1589
+ "text": {
1590
+ "$value": "{colors.neutral.100}",
1591
+ "$type": "color"
1592
+ }
1593
+ }
1078
1594
  }
1079
1595
  }
1080
1596
  }
@@ -1625,6 +2141,10 @@
1625
2141
  },
1626
2142
  "transitions": {
1627
2143
  "duration": {
2144
+ "reduced": {
2145
+ "$value": "0.01ms",
2146
+ "$type": "duration"
2147
+ },
1628
2148
  "instant": {
1629
2149
  "$value": "75ms",
1630
2150
  "$type": "duration"
@@ -1801,6 +2321,120 @@
1801
2321
  "$value": "pulse",
1802
2322
  "$type": "string"
1803
2323
  }
2324
+ },
2325
+ "reducedMotion": {
2326
+ "fadeIn": {
2327
+ "duration": {
2328
+ "$value": "{transitions.duration.reduced}",
2329
+ "$type": "string"
2330
+ },
2331
+ "easing": {
2332
+ "$value": "{transitions.easing.linear}",
2333
+ "$type": "string"
2334
+ },
2335
+ "keyframes": {
2336
+ "$value": "fade-in",
2337
+ "$type": "string"
2338
+ }
2339
+ },
2340
+ "fadeOut": {
2341
+ "duration": {
2342
+ "$value": "{transitions.duration.reduced}",
2343
+ "$type": "string"
2344
+ },
2345
+ "easing": {
2346
+ "$value": "{transitions.easing.linear}",
2347
+ "$type": "string"
2348
+ },
2349
+ "keyframes": {
2350
+ "$value": "fade-out",
2351
+ "$type": "string"
2352
+ }
2353
+ },
2354
+ "slideUp": {
2355
+ "duration": {
2356
+ "$value": "{transitions.duration.reduced}",
2357
+ "$type": "string"
2358
+ },
2359
+ "easing": {
2360
+ "$value": "{transitions.easing.linear}",
2361
+ "$type": "string"
2362
+ },
2363
+ "keyframes": {
2364
+ "$value": "slide-up",
2365
+ "$type": "string"
2366
+ }
2367
+ },
2368
+ "slideDown": {
2369
+ "duration": {
2370
+ "$value": "{transitions.duration.reduced}",
2371
+ "$type": "string"
2372
+ },
2373
+ "easing": {
2374
+ "$value": "{transitions.easing.linear}",
2375
+ "$type": "string"
2376
+ },
2377
+ "keyframes": {
2378
+ "$value": "slide-down",
2379
+ "$type": "string"
2380
+ }
2381
+ },
2382
+ "scaleIn": {
2383
+ "duration": {
2384
+ "$value": "{transitions.duration.reduced}",
2385
+ "$type": "string"
2386
+ },
2387
+ "easing": {
2388
+ "$value": "{transitions.easing.linear}",
2389
+ "$type": "string"
2390
+ },
2391
+ "keyframes": {
2392
+ "$value": "scale-in",
2393
+ "$type": "string"
2394
+ }
2395
+ },
2396
+ "bounce": {
2397
+ "duration": {
2398
+ "$value": "{transitions.duration.reduced}",
2399
+ "$type": "string"
2400
+ },
2401
+ "easing": {
2402
+ "$value": "{transitions.easing.linear}",
2403
+ "$type": "string"
2404
+ },
2405
+ "keyframes": {
2406
+ "$value": "bounce",
2407
+ "$type": "string"
2408
+ }
2409
+ },
2410
+ "shake": {
2411
+ "duration": {
2412
+ "$value": "{transitions.duration.reduced}",
2413
+ "$type": "string"
2414
+ },
2415
+ "easing": {
2416
+ "$value": "{transitions.easing.linear}",
2417
+ "$type": "string"
2418
+ },
2419
+ "keyframes": {
2420
+ "$value": "shake",
2421
+ "$type": "string"
2422
+ }
2423
+ },
2424
+ "pulse": {
2425
+ "duration": {
2426
+ "$value": "{transitions.duration.reduced}",
2427
+ "$type": "string"
2428
+ },
2429
+ "easing": {
2430
+ "$value": "{transitions.easing.linear}",
2431
+ "$type": "string"
2432
+ },
2433
+ "keyframes": {
2434
+ "$value": "pulse",
2435
+ "$type": "string"
2436
+ }
2437
+ }
1804
2438
  }
1805
2439
  },
1806
2440
  "opacity": {
@@ -1908,6 +2542,14 @@
1908
2542
  "$type": "string"
1909
2543
  }
1910
2544
  },
2545
+ "reducedMotion": {
2546
+ "$value": "{transitions.duration.reduced}",
2547
+ "$type": "string"
2548
+ },
2549
+ "forcedColors": {
2550
+ "$value": "auto",
2551
+ "$type": "string"
2552
+ },
1911
2553
  "minTouchTarget": {
1912
2554
  "$value": "44px",
1913
2555
  "$type": "dimension"
@@ -1971,6 +2613,48 @@
1971
2613
  "$value": "{colors.black} / 0.6",
1972
2614
  "$type": "color",
1973
2615
  "$description": "modals, dropdowns, flyouts"
2616
+ },
2617
+ "hover": {
2618
+ "$value": "{colors.neutral.100}",
2619
+ "$type": "color",
2620
+ "$description": "background for hovered clickable rows, items, and menu entries"
2621
+ },
2622
+ "selected": {
2623
+ "$value": "{colors.info.50}",
2624
+ "$type": "color",
2625
+ "$description": "background for selected list items, rows, and menu entries"
2626
+ },
2627
+ "active": {
2628
+ "$value": "{colors.neutral.200}",
2629
+ "$type": "color",
2630
+ "$description": "background for pressed/active clickable rows, items, and menu entries"
2631
+ },
2632
+ "divider": {
2633
+ "$value": "{colors.neutral.200}",
2634
+ "$type": "color",
2635
+ "$description": "hairline color for <hr>, table borders, and section separators"
2636
+ }
2637
+ },
2638
+ "link": {
2639
+ "default": {
2640
+ "$value": "{colors.brand.600}",
2641
+ "$type": "color",
2642
+ "$description": "default inline link color"
2643
+ },
2644
+ "hover": {
2645
+ "$value": "{colors.brand.700}",
2646
+ "$type": "color",
2647
+ "$description": "link color on hover"
2648
+ },
2649
+ "active": {
2650
+ "$value": "{colors.brand.800}",
2651
+ "$type": "color",
2652
+ "$description": "link color while pressed"
2653
+ },
2654
+ "visited": {
2655
+ "$value": "{colors.accent.700}",
2656
+ "$type": "color",
2657
+ "$description": "link color after the destination has been visited"
1974
2658
  }
1975
2659
  },
1976
2660
  "text": {