@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.
Files changed (14) hide show
  1. package/README.md +4 -2
  2. package/dist/index.cjs +314 -8
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +96 -0
  5. package/dist/index.d.cts +278 -0
  6. package/dist/index.d.ts +278 -0
  7. package/dist/index.js +314 -8
  8. package/dist/index.js.map +1 -1
  9. package/dist/tokens.dtcg.json +680 -0
  10. package/package.json +9 -5
  11. package/tokens/components.json +167 -0
  12. package/tokens/modes.json +400 -0
  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": {
@@ -563,6 +723,22 @@
563
723
  "hero": {
564
724
  "$value": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)",
565
725
  "$type": "string"
726
+ },
727
+ "hover": {
728
+ "$value": "{colors.neutral.100}",
729
+ "$type": "color"
730
+ },
731
+ "selected": {
732
+ "$value": "{colors.info.50}",
733
+ "$type": "color"
734
+ },
735
+ "active": {
736
+ "$value": "{colors.neutral.200}",
737
+ "$type": "color"
738
+ },
739
+ "divider": {
740
+ "$value": "{colors.neutral.200}",
741
+ "$type": "color"
566
742
  }
567
743
  },
568
744
  "text": {
@@ -799,6 +975,166 @@
799
975
  "$value": "{colors.neutral.500}",
800
976
  "$type": "color"
801
977
  }
978
+ },
979
+ "nav": {
980
+ "bg": {
981
+ "$value": "{colors.white}",
982
+ "$type": "color"
983
+ },
984
+ "text": {
985
+ "$value": "{colors.neutral.900}",
986
+ "$type": "color"
987
+ },
988
+ "link": {
989
+ "$value": "{colors.neutral.700}",
990
+ "$type": "color"
991
+ },
992
+ "linkHover": {
993
+ "$value": "{colors.brand.600}",
994
+ "$type": "color"
995
+ },
996
+ "linkActive": {
997
+ "$value": "{colors.brand.700}",
998
+ "$type": "color"
999
+ },
1000
+ "border": {
1001
+ "$value": "{colors.neutral.200}",
1002
+ "$type": "color"
1003
+ }
1004
+ },
1005
+ "modal": {
1006
+ "bg": {
1007
+ "$value": "{colors.white}",
1008
+ "$type": "color"
1009
+ },
1010
+ "shadow": {
1011
+ "$value": "0 20px 48px -12px {colors.black} / 0.20",
1012
+ "$type": "string"
1013
+ },
1014
+ "border": {
1015
+ "$value": "{colors.neutral.200}",
1016
+ "$type": "color"
1017
+ },
1018
+ "overlay": {
1019
+ "$value": "{colors.black} / 0.6",
1020
+ "$type": "color"
1021
+ }
1022
+ },
1023
+ "toast": {
1024
+ "success": {
1025
+ "bg": {
1026
+ "$value": "{colors.success.50}",
1027
+ "$type": "color"
1028
+ },
1029
+ "text": {
1030
+ "$value": "{colors.success.800}",
1031
+ "$type": "color"
1032
+ },
1033
+ "border": {
1034
+ "$value": "{colors.success.200}",
1035
+ "$type": "color"
1036
+ },
1037
+ "icon": {
1038
+ "$value": "{colors.success.600}",
1039
+ "$type": "color"
1040
+ }
1041
+ },
1042
+ "warning": {
1043
+ "bg": {
1044
+ "$value": "{colors.warning.50}",
1045
+ "$type": "color"
1046
+ },
1047
+ "text": {
1048
+ "$value": "{colors.warning.800}",
1049
+ "$type": "color"
1050
+ },
1051
+ "border": {
1052
+ "$value": "{colors.warning.200}",
1053
+ "$type": "color"
1054
+ },
1055
+ "icon": {
1056
+ "$value": "{colors.warning.600}",
1057
+ "$type": "color"
1058
+ }
1059
+ },
1060
+ "danger": {
1061
+ "bg": {
1062
+ "$value": "{colors.error.50}",
1063
+ "$type": "color"
1064
+ },
1065
+ "text": {
1066
+ "$value": "{colors.error.800}",
1067
+ "$type": "color"
1068
+ },
1069
+ "border": {
1070
+ "$value": "{colors.error.200}",
1071
+ "$type": "color"
1072
+ },
1073
+ "icon": {
1074
+ "$value": "{colors.error.600}",
1075
+ "$type": "color"
1076
+ }
1077
+ },
1078
+ "info": {
1079
+ "bg": {
1080
+ "$value": "{colors.info.50}",
1081
+ "$type": "color"
1082
+ },
1083
+ "text": {
1084
+ "$value": "{colors.info.800}",
1085
+ "$type": "color"
1086
+ },
1087
+ "border": {
1088
+ "$value": "{colors.info.200}",
1089
+ "$type": "color"
1090
+ },
1091
+ "icon": {
1092
+ "$value": "{colors.info.600}",
1093
+ "$type": "color"
1094
+ }
1095
+ }
1096
+ },
1097
+ "tooltip": {
1098
+ "bg": {
1099
+ "$value": "{colors.neutral.900}",
1100
+ "$type": "color"
1101
+ },
1102
+ "text": {
1103
+ "$value": "{colors.white}",
1104
+ "$type": "color"
1105
+ },
1106
+ "border": {
1107
+ "$value": "{colors.neutral.700}",
1108
+ "$type": "color"
1109
+ }
1110
+ },
1111
+ "dropdown": {
1112
+ "bg": {
1113
+ "$value": "{colors.white}",
1114
+ "$type": "color"
1115
+ },
1116
+ "border": {
1117
+ "$value": "{colors.neutral.200}",
1118
+ "$type": "color"
1119
+ },
1120
+ "item": {
1121
+ "default": {
1122
+ "$value": "transparent",
1123
+ "$type": "string"
1124
+ },
1125
+ "hover": {
1126
+ "$value": "{colors.neutral.100}",
1127
+ "$type": "color"
1128
+ },
1129
+ "active": {
1130
+ "$value": "{colors.info.50}",
1131
+ "$type": "color"
1132
+ },
1133
+ "text": {
1134
+ "$value": "{colors.neutral.900}",
1135
+ "$type": "color"
1136
+ }
1137
+ }
802
1138
  }
803
1139
  }
804
1140
  },
@@ -827,6 +1163,22 @@
827
1163
  "hero": {
828
1164
  "$value": "linear-gradient(135deg, {colors.accent.700} 0%, {colors.accent.900} 100%)",
829
1165
  "$type": "string"
1166
+ },
1167
+ "hover": {
1168
+ "$value": "{colors.neutral.700}",
1169
+ "$type": "color"
1170
+ },
1171
+ "selected": {
1172
+ "$value": "{colors.info.900}",
1173
+ "$type": "color"
1174
+ },
1175
+ "active": {
1176
+ "$value": "{colors.neutral.600}",
1177
+ "$type": "color"
1178
+ },
1179
+ "divider": {
1180
+ "$value": "{colors.neutral.700}",
1181
+ "$type": "color"
830
1182
  }
831
1183
  },
832
1184
  "text": {
@@ -1075,6 +1427,166 @@
1075
1427
  "$value": "{colors.neutral.400}",
1076
1428
  "$type": "color"
1077
1429
  }
1430
+ },
1431
+ "nav": {
1432
+ "bg": {
1433
+ "$value": "{colors.neutral.900}",
1434
+ "$type": "color"
1435
+ },
1436
+ "text": {
1437
+ "$value": "{colors.neutral.50}",
1438
+ "$type": "color"
1439
+ },
1440
+ "link": {
1441
+ "$value": "{colors.neutral.300}",
1442
+ "$type": "color"
1443
+ },
1444
+ "linkHover": {
1445
+ "$value": "{colors.brand.400}",
1446
+ "$type": "color"
1447
+ },
1448
+ "linkActive": {
1449
+ "$value": "{colors.brand.300}",
1450
+ "$type": "color"
1451
+ },
1452
+ "border": {
1453
+ "$value": "{colors.neutral.700}",
1454
+ "$type": "color"
1455
+ }
1456
+ },
1457
+ "modal": {
1458
+ "bg": {
1459
+ "$value": "{colors.neutral.800}",
1460
+ "$type": "color"
1461
+ },
1462
+ "shadow": {
1463
+ "$value": "0 20px 48px -12px {colors.black} / 0.20",
1464
+ "$type": "string"
1465
+ },
1466
+ "border": {
1467
+ "$value": "{colors.neutral.700}",
1468
+ "$type": "color"
1469
+ },
1470
+ "overlay": {
1471
+ "$value": "{colors.black} / 0.6",
1472
+ "$type": "color"
1473
+ }
1474
+ },
1475
+ "toast": {
1476
+ "success": {
1477
+ "bg": {
1478
+ "$value": "{colors.success.900}",
1479
+ "$type": "color"
1480
+ },
1481
+ "text": {
1482
+ "$value": "{colors.success.100}",
1483
+ "$type": "color"
1484
+ },
1485
+ "border": {
1486
+ "$value": "{colors.success.700}",
1487
+ "$type": "color"
1488
+ },
1489
+ "icon": {
1490
+ "$value": "{colors.success.400}",
1491
+ "$type": "color"
1492
+ }
1493
+ },
1494
+ "warning": {
1495
+ "bg": {
1496
+ "$value": "{colors.warning.900}",
1497
+ "$type": "color"
1498
+ },
1499
+ "text": {
1500
+ "$value": "{colors.warning.100}",
1501
+ "$type": "color"
1502
+ },
1503
+ "border": {
1504
+ "$value": "{colors.warning.700}",
1505
+ "$type": "color"
1506
+ },
1507
+ "icon": {
1508
+ "$value": "{colors.warning.400}",
1509
+ "$type": "color"
1510
+ }
1511
+ },
1512
+ "danger": {
1513
+ "bg": {
1514
+ "$value": "{colors.error.900}",
1515
+ "$type": "color"
1516
+ },
1517
+ "text": {
1518
+ "$value": "{colors.error.100}",
1519
+ "$type": "color"
1520
+ },
1521
+ "border": {
1522
+ "$value": "{colors.error.700}",
1523
+ "$type": "color"
1524
+ },
1525
+ "icon": {
1526
+ "$value": "{colors.error.400}",
1527
+ "$type": "color"
1528
+ }
1529
+ },
1530
+ "info": {
1531
+ "bg": {
1532
+ "$value": "{colors.info.900}",
1533
+ "$type": "color"
1534
+ },
1535
+ "text": {
1536
+ "$value": "{colors.info.100}",
1537
+ "$type": "color"
1538
+ },
1539
+ "border": {
1540
+ "$value": "{colors.info.700}",
1541
+ "$type": "color"
1542
+ },
1543
+ "icon": {
1544
+ "$value": "{colors.info.400}",
1545
+ "$type": "color"
1546
+ }
1547
+ }
1548
+ },
1549
+ "tooltip": {
1550
+ "bg": {
1551
+ "$value": "{colors.neutral.50}",
1552
+ "$type": "color"
1553
+ },
1554
+ "text": {
1555
+ "$value": "{colors.neutral.900}",
1556
+ "$type": "color"
1557
+ },
1558
+ "border": {
1559
+ "$value": "{colors.neutral.300}",
1560
+ "$type": "color"
1561
+ }
1562
+ },
1563
+ "dropdown": {
1564
+ "bg": {
1565
+ "$value": "{colors.neutral.800}",
1566
+ "$type": "color"
1567
+ },
1568
+ "border": {
1569
+ "$value": "{colors.neutral.700}",
1570
+ "$type": "color"
1571
+ },
1572
+ "item": {
1573
+ "default": {
1574
+ "$value": "transparent",
1575
+ "$type": "string"
1576
+ },
1577
+ "hover": {
1578
+ "$value": "{colors.neutral.700}",
1579
+ "$type": "color"
1580
+ },
1581
+ "active": {
1582
+ "$value": "{colors.info.900}",
1583
+ "$type": "color"
1584
+ },
1585
+ "text": {
1586
+ "$value": "{colors.neutral.100}",
1587
+ "$type": "color"
1588
+ }
1589
+ }
1078
1590
  }
1079
1591
  }
1080
1592
  }
@@ -1625,6 +2137,10 @@
1625
2137
  },
1626
2138
  "transitions": {
1627
2139
  "duration": {
2140
+ "reduced": {
2141
+ "$value": "0.01ms",
2142
+ "$type": "duration"
2143
+ },
1628
2144
  "instant": {
1629
2145
  "$value": "75ms",
1630
2146
  "$type": "duration"
@@ -1801,6 +2317,120 @@
1801
2317
  "$value": "pulse",
1802
2318
  "$type": "string"
1803
2319
  }
2320
+ },
2321
+ "reducedMotion": {
2322
+ "fadeIn": {
2323
+ "duration": {
2324
+ "$value": "{transitions.duration.reduced}",
2325
+ "$type": "string"
2326
+ },
2327
+ "easing": {
2328
+ "$value": "{transitions.easing.linear}",
2329
+ "$type": "string"
2330
+ },
2331
+ "keyframes": {
2332
+ "$value": "fade-in",
2333
+ "$type": "string"
2334
+ }
2335
+ },
2336
+ "fadeOut": {
2337
+ "duration": {
2338
+ "$value": "{transitions.duration.reduced}",
2339
+ "$type": "string"
2340
+ },
2341
+ "easing": {
2342
+ "$value": "{transitions.easing.linear}",
2343
+ "$type": "string"
2344
+ },
2345
+ "keyframes": {
2346
+ "$value": "fade-out",
2347
+ "$type": "string"
2348
+ }
2349
+ },
2350
+ "slideUp": {
2351
+ "duration": {
2352
+ "$value": "{transitions.duration.reduced}",
2353
+ "$type": "string"
2354
+ },
2355
+ "easing": {
2356
+ "$value": "{transitions.easing.linear}",
2357
+ "$type": "string"
2358
+ },
2359
+ "keyframes": {
2360
+ "$value": "slide-up",
2361
+ "$type": "string"
2362
+ }
2363
+ },
2364
+ "slideDown": {
2365
+ "duration": {
2366
+ "$value": "{transitions.duration.reduced}",
2367
+ "$type": "string"
2368
+ },
2369
+ "easing": {
2370
+ "$value": "{transitions.easing.linear}",
2371
+ "$type": "string"
2372
+ },
2373
+ "keyframes": {
2374
+ "$value": "slide-down",
2375
+ "$type": "string"
2376
+ }
2377
+ },
2378
+ "scaleIn": {
2379
+ "duration": {
2380
+ "$value": "{transitions.duration.reduced}",
2381
+ "$type": "string"
2382
+ },
2383
+ "easing": {
2384
+ "$value": "{transitions.easing.linear}",
2385
+ "$type": "string"
2386
+ },
2387
+ "keyframes": {
2388
+ "$value": "scale-in",
2389
+ "$type": "string"
2390
+ }
2391
+ },
2392
+ "bounce": {
2393
+ "duration": {
2394
+ "$value": "{transitions.duration.reduced}",
2395
+ "$type": "string"
2396
+ },
2397
+ "easing": {
2398
+ "$value": "{transitions.easing.linear}",
2399
+ "$type": "string"
2400
+ },
2401
+ "keyframes": {
2402
+ "$value": "bounce",
2403
+ "$type": "string"
2404
+ }
2405
+ },
2406
+ "shake": {
2407
+ "duration": {
2408
+ "$value": "{transitions.duration.reduced}",
2409
+ "$type": "string"
2410
+ },
2411
+ "easing": {
2412
+ "$value": "{transitions.easing.linear}",
2413
+ "$type": "string"
2414
+ },
2415
+ "keyframes": {
2416
+ "$value": "shake",
2417
+ "$type": "string"
2418
+ }
2419
+ },
2420
+ "pulse": {
2421
+ "duration": {
2422
+ "$value": "{transitions.duration.reduced}",
2423
+ "$type": "string"
2424
+ },
2425
+ "easing": {
2426
+ "$value": "{transitions.easing.linear}",
2427
+ "$type": "string"
2428
+ },
2429
+ "keyframes": {
2430
+ "$value": "pulse",
2431
+ "$type": "string"
2432
+ }
2433
+ }
1804
2434
  }
1805
2435
  },
1806
2436
  "opacity": {
@@ -1908,6 +2538,14 @@
1908
2538
  "$type": "string"
1909
2539
  }
1910
2540
  },
2541
+ "reducedMotion": {
2542
+ "$value": "{transitions.duration.reduced}",
2543
+ "$type": "string"
2544
+ },
2545
+ "forcedColors": {
2546
+ "$value": "auto",
2547
+ "$type": "string"
2548
+ },
1911
2549
  "minTouchTarget": {
1912
2550
  "$value": "44px",
1913
2551
  "$type": "dimension"
@@ -1971,6 +2609,48 @@
1971
2609
  "$value": "{colors.black} / 0.6",
1972
2610
  "$type": "color",
1973
2611
  "$description": "modals, dropdowns, flyouts"
2612
+ },
2613
+ "hover": {
2614
+ "$value": "{colors.neutral.100}",
2615
+ "$type": "color",
2616
+ "$description": "background for hovered clickable rows, items, and menu entries"
2617
+ },
2618
+ "selected": {
2619
+ "$value": "{colors.info.50}",
2620
+ "$type": "color",
2621
+ "$description": "background for selected list items, rows, and menu entries"
2622
+ },
2623
+ "active": {
2624
+ "$value": "{colors.neutral.200}",
2625
+ "$type": "color",
2626
+ "$description": "background for pressed/active clickable rows, items, and menu entries"
2627
+ },
2628
+ "divider": {
2629
+ "$value": "{colors.neutral.200}",
2630
+ "$type": "color",
2631
+ "$description": "hairline color for <hr>, table borders, and section separators"
2632
+ }
2633
+ },
2634
+ "link": {
2635
+ "default": {
2636
+ "$value": "{colors.brand.600}",
2637
+ "$type": "color",
2638
+ "$description": "default inline link color"
2639
+ },
2640
+ "hover": {
2641
+ "$value": "{colors.brand.700}",
2642
+ "$type": "color",
2643
+ "$description": "link color on hover"
2644
+ },
2645
+ "active": {
2646
+ "$value": "{colors.brand.800}",
2647
+ "$type": "color",
2648
+ "$description": "link color while pressed"
2649
+ },
2650
+ "visited": {
2651
+ "$value": "{colors.accent.700}",
2652
+ "$type": "color",
2653
+ "$description": "link color after the destination has been visited"
1974
2654
  }
1975
2655
  },
1976
2656
  "text": {