@common-origin/design-system 2.20.0 → 2.22.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 (103) hide show
  1. package/dist/client.js +1015 -499
  2. package/dist/client.js.map +1 -1
  3. package/dist/components/atoms/AILabel/AILabel.d.mts +30 -0
  4. package/dist/components/atoms/AILabel/AILabel.d.ts +30 -0
  5. package/dist/components/atoms/AILabel/AILabel.mjs +94 -0
  6. package/dist/components/atoms/AILabel/AILabel.mjs.map +1 -0
  7. package/dist/components/atoms/AILabel/index.d.mts +1 -0
  8. package/dist/components/atoms/AILabel/index.d.ts +1 -0
  9. package/dist/components/atoms/Badge/Badge.d.mts +16 -4
  10. package/dist/components/atoms/Badge/Badge.d.ts +16 -4
  11. package/dist/components/atoms/Badge/Badge.mjs +4 -5
  12. package/dist/components/atoms/Badge/index.d.mts +1 -1
  13. package/dist/components/atoms/Badge/index.d.ts +1 -1
  14. package/dist/components/atoms/Button/Button.mjs +1 -1
  15. package/dist/components/atoms/CategoryLabel/CategoryLabel.d.mts +23 -8
  16. package/dist/components/atoms/CategoryLabel/CategoryLabel.d.ts +23 -8
  17. package/dist/components/atoms/CategoryLabel/CategoryLabel.mjs +31 -18
  18. package/dist/components/atoms/CategoryLabel/index.d.mts +1 -1
  19. package/dist/components/atoms/CategoryLabel/index.d.ts +1 -1
  20. package/dist/components/atoms/Chip/SuggestionChip.d.mts +24 -0
  21. package/dist/components/atoms/Chip/SuggestionChip.d.ts +24 -0
  22. package/dist/components/atoms/Chip/SuggestionChip.mjs +61 -0
  23. package/dist/components/atoms/Chip/SuggestionChip.mjs.map +1 -0
  24. package/dist/components/atoms/Chip/index.d.mts +1 -0
  25. package/dist/components/atoms/Chip/index.d.ts +1 -0
  26. package/dist/components/atoms/Chip/shared/utils.mjs +1 -1
  27. package/dist/components/atoms/Chip/shared/utils.mjs.map +1 -1
  28. package/dist/components/atoms/Icon/Icon.mjs +1 -1
  29. package/dist/components/atoms/MoneyDisplay/MoneyDisplay.mjs +14 -60
  30. package/dist/components/atoms/StatusBadge/StatusBadge.d.mts +3 -2
  31. package/dist/components/atoms/StatusBadge/StatusBadge.d.ts +3 -2
  32. package/dist/components/atoms/StatusBadge/StatusBadge.mjs +1 -1
  33. package/dist/components/atoms/StatusBadge/StatusBadge.mjs.map +1 -1
  34. package/dist/components/atoms/StatusLabel/StatusLabel.d.mts +5 -2
  35. package/dist/components/atoms/StatusLabel/StatusLabel.d.ts +5 -2
  36. package/dist/components/atoms/StatusLabel/StatusLabel.mjs +5 -2
  37. package/dist/components/atoms/StatusLabel/StatusLabel.mjs.map +1 -1
  38. package/dist/components/atoms/StatusLabel/StatusLabelBase.d.mts +2 -2
  39. package/dist/components/atoms/StatusLabel/StatusLabelBase.d.ts +2 -2
  40. package/dist/components/atoms/StatusLabel/StatusLabelBase.mjs +19 -13
  41. package/dist/components/atoms/StatusLabel/StatusShape.d.mts +4 -0
  42. package/dist/components/atoms/StatusLabel/StatusShape.d.ts +4 -0
  43. package/dist/components/atoms/StatusLabel/StatusShape.mjs +31 -0
  44. package/dist/components/atoms/StatusLabel/StatusShape.mjs.map +1 -0
  45. package/dist/components/atoms/Typography/Typography.mjs +2 -2
  46. package/dist/components/atoms/index.d.mts +1 -0
  47. package/dist/components/atoms/index.d.ts +1 -0
  48. package/dist/components/molecules/AccountCard/AccountCard.mjs +21 -13
  49. package/dist/components/molecules/AgentInput/AgentInput.d.mts +63 -1
  50. package/dist/components/molecules/AgentInput/AgentInput.d.ts +63 -1
  51. package/dist/components/molecules/AgentInput/AgentInput.mjs +476 -112
  52. package/dist/components/molecules/AgentInput/agentInputSpeech.d.mts +2 -0
  53. package/dist/components/molecules/AgentInput/agentInputSpeech.d.ts +2 -0
  54. package/dist/components/molecules/AgentInput/agentInputSpeech.mjs +5 -1
  55. package/dist/components/molecules/AgentInput/agentInputSpeech.mjs.map +1 -1
  56. package/dist/components/molecules/AgentInput/index.d.mts +1 -1
  57. package/dist/components/molecules/AgentInput/index.d.ts +1 -1
  58. package/dist/components/molecules/Alert/Alert.d.mts +4 -4
  59. package/dist/components/molecules/Alert/Alert.d.ts +4 -4
  60. package/dist/components/molecules/Alert/Alert.mjs +5 -4
  61. package/dist/components/molecules/CardLarge/CardLarge.mjs +1 -0
  62. package/dist/components/molecules/ChipGroup/ChipGroup.mjs +2 -0
  63. package/dist/components/molecules/CodeBlock/CodeBlock.mjs +1 -1
  64. package/dist/components/molecules/Dropdown/Dropdown.mjs +2 -2
  65. package/dist/components/molecules/FeatureBlock/FeatureBlock.mjs +1 -0
  66. package/dist/components/molecules/InlineAlert/InlineAlert.mjs +15 -5
  67. package/dist/components/molecules/TabBar/TabBar.mjs +3 -3
  68. package/dist/components/molecules/TransactionListItem/TransactionListItem.d.mts +1 -1
  69. package/dist/components/molecules/TransactionListItem/TransactionListItem.d.ts +1 -1
  70. package/dist/components/molecules/TransactionListItem/TransactionListItem.mjs +15 -31
  71. package/dist/data.js +817 -294
  72. package/dist/data.js.map +1 -1
  73. package/dist/index.js +2 -0
  74. package/dist/index.js.map +1 -1
  75. package/dist/index.mjs +2 -0
  76. package/dist/index.mjs.map +1 -1
  77. package/dist/lib/statusShapes.d.mts +2 -0
  78. package/dist/lib/statusShapes.d.ts +2 -0
  79. package/dist/lib/statusShapes.mjs +16 -0
  80. package/dist/lib/statusShapes.mjs.map +1 -0
  81. package/dist/lib/styleUtils.mjs +2 -2
  82. package/dist/lib/styleUtils.mjs.map +1 -1
  83. package/dist/lib/tokenAliases.mjs +16 -10
  84. package/dist/lib/tokenAliases.mjs.map +1 -1
  85. package/dist/styles/icons.json +171 -1
  86. package/dist/styles/icons.json.mjs +185 -3
  87. package/dist/styles/icons.json.mjs.map +1 -1
  88. package/dist/styles/tokens.d.mts +957 -123
  89. package/dist/styles/tokens.d.ts +957 -123
  90. package/dist/styles/tokens.json +633 -292
  91. package/dist/styles/tokens.json.mjs +633 -292
  92. package/dist/styles/tokens.json.mjs.map +1 -1
  93. package/dist/tokens/index.js +633 -292
  94. package/dist/tokens/index.js.map +1 -1
  95. package/dist/tokens/index.mjs +633 -292
  96. package/dist/tokens/index.mjs.map +1 -1
  97. package/dist/tokens/styles/tokens.d.mts +957 -123
  98. package/dist/tokens/styles/tokens.d.ts +957 -123
  99. package/dist/tokens.css +499 -212
  100. package/dist/types/icons.d.mts +1 -1
  101. package/dist/types/icons.d.ts +1 -1
  102. package/dist/types/icons.mjs.map +1 -1
  103. package/package.json +1 -1
@@ -60,7 +60,9 @@ export type Tokens = {
60
60
  opacity: {
61
61
  '0': string;
62
62
  '5': string;
63
+ '8': string;
63
64
  '10': string;
65
+ '12': string;
64
66
  '20': string;
65
67
  '25': string;
66
68
  '30': string;
@@ -256,7 +258,7 @@ export type Tokens = {
256
258
  max: string;
257
259
  fit: string;
258
260
  };
259
- /** Colour palette: the grey ramp and its alpha twins (decision 0040), the older neutral ramp, seven hue ramps, and transparent. */
261
+ /** Colour palette: the grey ramp, six role ramps (accent, success, warning, serious, danger, ai) and four display ramps (olive, periwinkle, rose, magenta), each with alpha twins (decisions 0040, 0043 and 0044); the older neutral ramp and seven older hue ramps, removed in 3.0; and transparent. */
260
262
  color: {
261
263
  /** Fully transparent. For colour values that must not show, such as a border that keeps its width (semantic.color.border.none). */
262
264
  transparent: string;
@@ -314,6 +316,546 @@ export type Tokens = {
314
316
  /** Primary text, and the darkest step. Composites to gray.1200 over white. */
315
317
  '1200': string;
316
318
  };
319
+ /** Accent role (decision 0043): links, selected and active states, the accent action, neutral information, in progress. Defined in OKLCH at hue 255°: 100 (lightest) to 1200 (darkest), each step at the gray step's contrast with white, with its contrast in its description (decisions 0040 and 0044). */
320
+ accent: {
321
+ /** Page background. oklch(0.991 0.002 248), 1.03:1 on white. */
322
+ '100': string;
323
+ /** Subtle background. oklch(0.981 0.005 258), 1.05:1 on white. */
324
+ '200': string;
325
+ /** Component fill at rest. oklch(0.962 0.011 252), 1.12:1 on white. */
326
+ '300': string;
327
+ /** Component fill on hover. oklch(0.940 0.019 256), 1.19:1 on white. */
328
+ '400': string;
329
+ /** Component fill pressed or selected. oklch(0.917 0.027 255), 1.28:1 on white. */
330
+ '500': string;
331
+ /** Subtle border. oklch(0.894 0.040 255), 1.37:1 on white. */
332
+ '600': string;
333
+ /** Default border, for dividers and decorative outlines. oklch(0.859 0.055 255), 1.53:1 on white. */
334
+ '700': string;
335
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.655 0.185 255), 3.21:1 on white. */
336
+ '800': string;
337
+ /** Solid fill. oklch(0.617 0.205 255), 3.75:1 on white. */
338
+ '900': string;
339
+ /** Solid fill on hover. oklch(0.581 0.190 255), 4.34:1 on white. */
340
+ '1000': string;
341
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.504 0.165 255), 6.00:1 on white. */
342
+ '1100': string;
343
+ /** Primary text, and the darkest step. oklch(0.252 0.049 252), 15.91:1 on white. */
344
+ '1200': string;
345
+ };
346
+ /** Alpha twins of accent: each is the smallest opacity that composites over white to the solid step (decision 0044). */
347
+ 'accent-alpha': {
348
+ /** Page background. Composites to accent.100 over white. */
349
+ '100': string;
350
+ /** Subtle background. Composites to accent.200 over white. */
351
+ '200': string;
352
+ /** Component fill at rest. Composites to accent.300 over white. */
353
+ '300': string;
354
+ /** Component fill on hover. Composites to accent.400 over white. */
355
+ '400': string;
356
+ /** Component fill pressed or selected. Composites to accent.500 over white. */
357
+ '500': string;
358
+ /** Subtle border. Composites to accent.600 over white. */
359
+ '600': string;
360
+ /** Default border, for dividers and decorative outlines. Composites to accent.700 over white. */
361
+ '700': string;
362
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to accent.800 over white. */
363
+ '800': string;
364
+ /** Solid fill. Composites to accent.900 over white. */
365
+ '900': string;
366
+ /** Solid fill on hover. Composites to accent.1000 over white. */
367
+ '1000': string;
368
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to accent.1100 over white. */
369
+ '1100': string;
370
+ /** Primary text, and the darkest step. Composites to accent.1200 over white. */
371
+ '1200': string;
372
+ };
373
+ /** Success role (decision 0043): success, positive values, money in. Defined in OKLCH at hue 160°: 100 (lightest) to 1200 (darkest), each step at the gray step's contrast with white, with its contrast in its description (decisions 0040 and 0044). */
374
+ success: {
375
+ /** Page background. oklch(0.990 0.006 154), 1.03:1 on white. */
376
+ '100': string;
377
+ /** Subtle background. oklch(0.980 0.016 161), 1.05:1 on white. */
378
+ '200': string;
379
+ /** Component fill at rest. oklch(0.956 0.039 161), 1.12:1 on white. */
380
+ '300': string;
381
+ /** Component fill on hover. oklch(0.933 0.065 160), 1.19:1 on white. */
382
+ '400': string;
383
+ /** Component fill pressed or selected. oklch(0.909 0.085 160), 1.27:1 on white. */
384
+ '500': string;
385
+ /** Subtle border. oklch(0.882 0.106 160), 1.37:1 on white. */
386
+ '600': string;
387
+ /** Default border, for dividers and decorative outlines. oklch(0.844 0.130 160), 1.53:1 on white. */
388
+ '700': string;
389
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.637 0.144 160), 3.18:1 on white. */
390
+ '800': string;
391
+ /** Solid fill. oklch(0.597 0.136 160), 3.75:1 on white. */
392
+ '900': string;
393
+ /** Solid fill on hover. oklch(0.562 0.127 160), 4.34:1 on white. */
394
+ '1000': string;
395
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.487 0.110 160), 5.99:1 on white. */
396
+ '1100': string;
397
+ /** Primary text, and the darkest step. oklch(0.248 0.034 159), 15.92:1 on white. */
398
+ '1200': string;
399
+ };
400
+ /** Alpha twins of success: each is the smallest opacity that composites over white to the solid step (decision 0044). */
401
+ 'success-alpha': {
402
+ /** Page background. Composites to success.100 over white. */
403
+ '100': string;
404
+ /** Subtle background. Composites to success.200 over white. */
405
+ '200': string;
406
+ /** Component fill at rest. Composites to success.300 over white. */
407
+ '300': string;
408
+ /** Component fill on hover. Composites to success.400 over white. */
409
+ '400': string;
410
+ /** Component fill pressed or selected. Composites to success.500 over white. */
411
+ '500': string;
412
+ /** Subtle border. Composites to success.600 over white. */
413
+ '600': string;
414
+ /** Default border, for dividers and decorative outlines. Composites to success.700 over white. */
415
+ '700': string;
416
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to success.800 over white. */
417
+ '800': string;
418
+ /** Solid fill. Composites to success.900 over white. */
419
+ '900': string;
420
+ /** Solid fill on hover. Composites to success.1000 over white. */
421
+ '1000': string;
422
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to success.1100 over white. */
423
+ '1100': string;
424
+ /** Primary text, and the darkest step. Composites to success.1200 over white. */
425
+ '1200': string;
426
+ };
427
+ /** Warning role (decision 0043): attention, a regular warning. Defined in OKLCH at hue 80°: 100 (lightest) to 1200 (darkest), each step at the gray step's contrast with white, with its contrast in its description (decisions 0040 and 0044). */
428
+ warning: {
429
+ /** Page background. oklch(0.991 0.003 85), 1.03:1 on white. */
430
+ '100': string;
431
+ /** Subtle background. oklch(0.983 0.007 81), 1.05:1 on white. */
432
+ '200': string;
433
+ /** Component fill at rest. oklch(0.961 0.021 79), 1.12:1 on white. */
434
+ '300': string;
435
+ /** Component fill on hover. oklch(0.940 0.036 80), 1.20:1 on white. */
436
+ '400': string;
437
+ /** Component fill pressed or selected. oklch(0.919 0.052 79), 1.28:1 on white. */
438
+ '500': string;
439
+ /** Subtle border. oklch(0.896 0.074 80), 1.37:1 on white. */
440
+ '600': string;
441
+ /** Default border, for dividers and decorative outlines. oklch(0.864 0.106 80), 1.52:1 on white. */
442
+ '700': string;
443
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.658 0.136 80), 3.19:1 on white. */
444
+ '800': string;
445
+ /** Solid fill. oklch(0.617 0.128 80), 3.74:1 on white. */
446
+ '900': string;
447
+ /** Solid fill on hover. oklch(0.580 0.120 80), 4.34:1 on white. */
448
+ '1000': string;
449
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.503 0.104 80), 6.01:1 on white. */
450
+ '1100': string;
451
+ /** Primary text, and the darkest step. oklch(0.252 0.030 84), 15.91:1 on white. */
452
+ '1200': string;
453
+ };
454
+ /** Alpha twins of warning: each is the smallest opacity that composites over white to the solid step (decision 0044). */
455
+ 'warning-alpha': {
456
+ /** Page background. Composites to warning.100 over white. */
457
+ '100': string;
458
+ /** Subtle background. Composites to warning.200 over white. */
459
+ '200': string;
460
+ /** Component fill at rest. Composites to warning.300 over white. */
461
+ '300': string;
462
+ /** Component fill on hover. Composites to warning.400 over white. */
463
+ '400': string;
464
+ /** Component fill pressed or selected. Composites to warning.500 over white. */
465
+ '500': string;
466
+ /** Subtle border. Composites to warning.600 over white. */
467
+ '600': string;
468
+ /** Default border, for dividers and decorative outlines. Composites to warning.700 over white. */
469
+ '700': string;
470
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to warning.800 over white. */
471
+ '800': string;
472
+ /** Solid fill. Composites to warning.900 over white. */
473
+ '900': string;
474
+ /** Solid fill on hover. Composites to warning.1000 over white. */
475
+ '1000': string;
476
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to warning.1100 over white. */
477
+ '1100': string;
478
+ /** Primary text, and the darkest step. Composites to warning.1200 over white. */
479
+ '1200': string;
480
+ };
481
+ /** Serious role (decision 0043): a serious warning, between warning and danger. Defined in OKLCH at hue 47°: 100 (lightest) to 1200 (darkest), each step at the gray step's contrast with white, with its contrast in its description (decisions 0040 and 0044). */
482
+ serious: {
483
+ /** Page background. oklch(0.992 0.003 49), 1.02:1 on white. */
484
+ '100': string;
485
+ /** Subtle background. oklch(0.982 0.005 49), 1.06:1 on white. */
486
+ '200': string;
487
+ /** Component fill at rest. oklch(0.962 0.013 49), 1.12:1 on white. */
488
+ '300': string;
489
+ /** Component fill on hover. oklch(0.942 0.021 48), 1.19:1 on white. */
490
+ '400': string;
491
+ /** Component fill pressed or selected. oklch(0.920 0.030 46), 1.28:1 on white. */
492
+ '500': string;
493
+ /** Subtle border. oklch(0.896 0.043 47), 1.38:1 on white. */
494
+ '600': string;
495
+ /** Default border, for dividers and decorative outlines. oklch(0.866 0.063 47), 1.53:1 on white. */
496
+ '700': string;
497
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.671 0.186 47), 3.19:1 on white. */
498
+ '800': string;
499
+ /** Solid fill. oklch(0.630 0.175 47), 3.74:1 on white. */
500
+ '900': string;
501
+ /** Solid fill on hover. oklch(0.592 0.163 47), 4.36:1 on white. */
502
+ '1000': string;
503
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.514 0.141 47), 6.00:1 on white. */
504
+ '1100': string;
505
+ /** Primary text, and the darkest step. oklch(0.256 0.043 47), 15.91:1 on white. */
506
+ '1200': string;
507
+ };
508
+ /** Alpha twins of serious: each is the smallest opacity that composites over white to the solid step (decision 0044). */
509
+ 'serious-alpha': {
510
+ /** Page background. Composites to serious.100 over white. */
511
+ '100': string;
512
+ /** Subtle background. Composites to serious.200 over white. */
513
+ '200': string;
514
+ /** Component fill at rest. Composites to serious.300 over white. */
515
+ '300': string;
516
+ /** Component fill on hover. Composites to serious.400 over white. */
517
+ '400': string;
518
+ /** Component fill pressed or selected. Composites to serious.500 over white. */
519
+ '500': string;
520
+ /** Subtle border. Composites to serious.600 over white. */
521
+ '600': string;
522
+ /** Default border, for dividers and decorative outlines. Composites to serious.700 over white. */
523
+ '700': string;
524
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to serious.800 over white. */
525
+ '800': string;
526
+ /** Solid fill. Composites to serious.900 over white. */
527
+ '900': string;
528
+ /** Solid fill on hover. Composites to serious.1000 over white. */
529
+ '1000': string;
530
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to serious.1100 over white. */
531
+ '1100': string;
532
+ /** Primary text, and the darkest step. Composites to serious.1200 over white. */
533
+ '1200': string;
534
+ };
535
+ /** Danger role (decision 0043): errors, destructive actions, negative values, money out. Defined in OKLCH at hue 29°: 100 (lightest) to 1200 (darkest), each step at the gray step's contrast with white, with its contrast in its description (decisions 0040 and 0044). */
536
+ danger: {
537
+ /** Page background. oklch(0.993 0.002 17), 1.02:1 on white. */
538
+ '100': string;
539
+ /** Subtle background. oklch(0.982 0.004 34), 1.05:1 on white. */
540
+ '200': string;
541
+ /** Component fill at rest. oklch(0.962 0.011 31), 1.12:1 on white. */
542
+ '300': string;
543
+ /** Component fill on hover. oklch(0.941 0.019 30), 1.20:1 on white. */
544
+ '400': string;
545
+ /** Component fill pressed or selected. oklch(0.923 0.028 29), 1.27:1 on white. */
546
+ '500': string;
547
+ /** Subtle border. oklch(0.898 0.040 29), 1.38:1 on white. */
548
+ '600': string;
549
+ /** Default border, for dividers and decorative outlines. oklch(0.867 0.057 29), 1.52:1 on white. */
550
+ '700': string;
551
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.679 0.210 29), 3.18:1 on white. */
552
+ '800': string;
553
+ /** Solid fill. oklch(0.643 0.243 29), 3.74:1 on white. */
554
+ '900': string;
555
+ /** Solid fill on hover. oklch(0.606 0.248 29), 4.36:1 on white. */
556
+ '1000': string;
557
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.525 0.215 29), 6.03:1 on white. */
558
+ '1100': string;
559
+ /** Primary text, and the darkest step. oklch(0.259 0.063 29), 15.89:1 on white. */
560
+ '1200': string;
561
+ };
562
+ /** Alpha twins of danger: each is the smallest opacity that composites over white to the solid step (decision 0044). */
563
+ 'danger-alpha': {
564
+ /** Page background. Composites to danger.100 over white. */
565
+ '100': string;
566
+ /** Subtle background. Composites to danger.200 over white. */
567
+ '200': string;
568
+ /** Component fill at rest. Composites to danger.300 over white. */
569
+ '300': string;
570
+ /** Component fill on hover. Composites to danger.400 over white. */
571
+ '400': string;
572
+ /** Component fill pressed or selected. Composites to danger.500 over white. */
573
+ '500': string;
574
+ /** Subtle border. Composites to danger.600 over white. */
575
+ '600': string;
576
+ /** Default border, for dividers and decorative outlines. Composites to danger.700 over white. */
577
+ '700': string;
578
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to danger.800 over white. */
579
+ '800': string;
580
+ /** Solid fill. Composites to danger.900 over white. */
581
+ '900': string;
582
+ /** Solid fill on hover. Composites to danger.1000 over white. */
583
+ '1000': string;
584
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to danger.1100 over white. */
585
+ '1100': string;
586
+ /** Primary text, and the darkest step. Composites to danger.1200 over white. */
587
+ '1200': string;
588
+ };
589
+ /** AI role (decision 0043): AI-generated content, agent actions, working states. Defined in OKLCH at hue 305°: 100 (lightest) to 1200 (darkest), each step at the gray step's contrast with white, with its contrast in its description (decisions 0040 and 0044). */
590
+ ai: {
591
+ /** Page background. oklch(0.992 0.003 308), 1.02:1 on white. */
592
+ '100': string;
593
+ /** Subtle background. oklch(0.982 0.006 308), 1.06:1 on white. */
594
+ '200': string;
595
+ /** Component fill at rest. oklch(0.961 0.014 304), 1.12:1 on white. */
596
+ '300': string;
597
+ /** Component fill on hover. oklch(0.941 0.023 306), 1.20:1 on white. */
598
+ '400': string;
599
+ /** Component fill pressed or selected. oklch(0.921 0.033 305), 1.27:1 on white. */
600
+ '500': string;
601
+ /** Subtle border. oklch(0.897 0.046 305), 1.38:1 on white. */
602
+ '600': string;
603
+ /** Default border, for dividers and decorative outlines. oklch(0.867 0.066 305), 1.52:1 on white. */
604
+ '700': string;
605
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.677 0.215 305), 3.20:1 on white. */
606
+ '800': string;
607
+ /** Solid fill. oklch(0.642 0.241 305), 3.74:1 on white. */
608
+ '900': string;
609
+ /** Solid fill on hover. oklch(0.610 0.267 305), 4.36:1 on white. */
610
+ '1000': string;
611
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.539 0.279 305), 5.99:1 on white. */
612
+ '1100': string;
613
+ /** Primary text, and the darkest step. oklch(0.261 0.082 306), 15.91:1 on white. */
614
+ '1200': string;
615
+ };
616
+ /** Alpha twins of ai: each is the smallest opacity that composites over white to the solid step (decision 0044). */
617
+ 'ai-alpha': {
618
+ /** Page background. Composites to ai.100 over white. */
619
+ '100': string;
620
+ /** Subtle background. Composites to ai.200 over white. */
621
+ '200': string;
622
+ /** Component fill at rest. Composites to ai.300 over white. */
623
+ '300': string;
624
+ /** Component fill on hover. Composites to ai.400 over white. */
625
+ '400': string;
626
+ /** Component fill pressed or selected. Composites to ai.500 over white. */
627
+ '500': string;
628
+ /** Subtle border. Composites to ai.600 over white. */
629
+ '600': string;
630
+ /** Default border, for dividers and decorative outlines. Composites to ai.700 over white. */
631
+ '700': string;
632
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to ai.800 over white. */
633
+ '800': string;
634
+ /** Solid fill. Composites to ai.900 over white. */
635
+ '900': string;
636
+ /** Solid fill on hover. Composites to ai.1000 over white. */
637
+ '1000': string;
638
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to ai.1100 over white. */
639
+ '1100': string;
640
+ /** Primary text, and the darkest step. Composites to ai.1200 over white. */
641
+ '1200': string;
642
+ };
643
+ /** Olive display ramp (decision 0043): no meaning; category labels and chart categories. Defined in OKLCH at hue 117°: 100 (lightest) to 1200 (darkest), each step at the gray step's contrast with white, with its contrast in its description (decisions 0040 and 0044). */
644
+ olive: {
645
+ /** Page background. oklch(0.990 0.012 117), 1.03:1 on white. */
646
+ '100': string;
647
+ /** Subtle background. oklch(0.980 0.025 117), 1.05:1 on white. */
648
+ '200': string;
649
+ /** Component fill at rest. oklch(0.959 0.045 117), 1.12:1 on white. */
650
+ '300': string;
651
+ /** Component fill on hover. oklch(0.935 0.065 117), 1.19:1 on white. */
652
+ '400': string;
653
+ /** Component fill pressed or selected. oklch(0.915 0.085 117), 1.27:1 on white. */
654
+ '500': string;
655
+ /** Subtle border. oklch(0.889 0.105 117), 1.37:1 on white. */
656
+ '600': string;
657
+ /** Default border, for dividers and decorative outlines. oklch(0.854 0.130 117), 1.53:1 on white. */
658
+ '700': string;
659
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.647 0.149 117), 3.18:1 on white. */
660
+ '800': string;
661
+ /** Solid fill. oklch(0.607 0.139 117), 3.73:1 on white. */
662
+ '900': string;
663
+ /** Solid fill on hover. oklch(0.569 0.131 117), 4.36:1 on white. */
664
+ '1000': string;
665
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.493 0.114 117), 6.02:1 on white. */
666
+ '1100': string;
667
+ /** Primary text, and the darkest step. oklch(0.250 0.035 118), 15.89:1 on white. */
668
+ '1200': string;
669
+ };
670
+ /** Alpha twins of olive: each is the smallest opacity that composites over white to the solid step (decision 0044). */
671
+ 'olive-alpha': {
672
+ /** Page background. Composites to olive.100 over white. */
673
+ '100': string;
674
+ /** Subtle background. Composites to olive.200 over white. */
675
+ '200': string;
676
+ /** Component fill at rest. Composites to olive.300 over white. */
677
+ '300': string;
678
+ /** Component fill on hover. Composites to olive.400 over white. */
679
+ '400': string;
680
+ /** Component fill pressed or selected. Composites to olive.500 over white. */
681
+ '500': string;
682
+ /** Subtle border. Composites to olive.600 over white. */
683
+ '600': string;
684
+ /** Default border, for dividers and decorative outlines. Composites to olive.700 over white. */
685
+ '700': string;
686
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to olive.800 over white. */
687
+ '800': string;
688
+ /** Solid fill. Composites to olive.900 over white. */
689
+ '900': string;
690
+ /** Solid fill on hover. Composites to olive.1000 over white. */
691
+ '1000': string;
692
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to olive.1100 over white. */
693
+ '1100': string;
694
+ /** Primary text, and the darkest step. Composites to olive.1200 over white. */
695
+ '1200': string;
696
+ };
697
+ /** Periwinkle display ramp (decision 0043): no meaning; category labels and chart categories. Defined in OKLCH at hue 277°: 100 (lightest) to 1200 (darkest), each step at the gray step's contrast with white, with its contrast in its description (decisions 0040 and 0044). */
698
+ periwinkle: {
699
+ /** Page background. oklch(0.991 0.001 286), 1.03:1 on white. */
700
+ '100': string;
701
+ /** Subtle background. oklch(0.982 0.004 271), 1.05:1 on white. */
702
+ '200': string;
703
+ /** Component fill at rest. oklch(0.962 0.011 275), 1.12:1 on white. */
704
+ '300': string;
705
+ /** Component fill on hover. oklch(0.942 0.019 276), 1.19:1 on white. */
706
+ '400': string;
707
+ /** Component fill pressed or selected. oklch(0.919 0.027 277), 1.28:1 on white. */
708
+ '500': string;
709
+ /** Subtle border. oklch(0.896 0.039 278), 1.37:1 on white. */
710
+ '600': string;
711
+ /** Default border, for dividers and decorative outlines. oklch(0.862 0.055 277), 1.53:1 on white. */
712
+ '700': string;
713
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.665 0.180 277), 3.20:1 on white. */
714
+ '800': string;
715
+ /** Solid fill. oklch(0.627 0.201 277), 3.76:1 on white. */
716
+ '900': string;
717
+ /** Solid fill on hover. oklch(0.593 0.224 277), 4.37:1 on white. */
718
+ '1000': string;
719
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.528 0.267 277), 6.00:1 on white. */
720
+ '1100': string;
721
+ /** Primary text, and the darkest step. oklch(0.259 0.096 277), 15.91:1 on white. */
722
+ '1200': string;
723
+ };
724
+ /** Alpha twins of periwinkle: each is the smallest opacity that composites over white to the solid step (decision 0044). */
725
+ 'periwinkle-alpha': {
726
+ /** Page background. Composites to periwinkle.100 over white. */
727
+ '100': string;
728
+ /** Subtle background. Composites to periwinkle.200 over white. */
729
+ '200': string;
730
+ /** Component fill at rest. Composites to periwinkle.300 over white. */
731
+ '300': string;
732
+ /** Component fill on hover. Composites to periwinkle.400 over white. */
733
+ '400': string;
734
+ /** Component fill pressed or selected. Composites to periwinkle.500 over white. */
735
+ '500': string;
736
+ /** Subtle border. Composites to periwinkle.600 over white. */
737
+ '600': string;
738
+ /** Default border, for dividers and decorative outlines. Composites to periwinkle.700 over white. */
739
+ '700': string;
740
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to periwinkle.800 over white. */
741
+ '800': string;
742
+ /** Solid fill. Composites to periwinkle.900 over white. */
743
+ '900': string;
744
+ /** Solid fill on hover. Composites to periwinkle.1000 over white. */
745
+ '1000': string;
746
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to periwinkle.1100 over white. */
747
+ '1100': string;
748
+ /** Primary text, and the darkest step. Composites to periwinkle.1200 over white. */
749
+ '1200': string;
750
+ };
751
+ /** Rose display ramp (decision 0043): no meaning; category labels and chart categories. Defined in OKLCH at hue 4°: 100 (lightest) to 1200 (darkest), each step at the gray step's contrast with white, with its contrast in its description (decisions 0040 and 0044). */
752
+ rose: {
753
+ /** Page background. oklch(0.993 0.002 17), 1.02:1 on white. */
754
+ '100': string;
755
+ /** Subtle background. oklch(0.982 0.004 360), 1.05:1 on white. */
756
+ '200': string;
757
+ /** Component fill at rest. oklch(0.961 0.012 5), 1.12:1 on white. */
758
+ '300': string;
759
+ /** Component fill on hover. oklch(0.942 0.019 5), 1.19:1 on white. */
760
+ '400': string;
761
+ /** Component fill pressed or selected. oklch(0.923 0.029 5), 1.27:1 on white. */
762
+ '500': string;
763
+ /** Subtle border. oklch(0.899 0.041 5), 1.37:1 on white. */
764
+ '600': string;
765
+ /** Default border, for dividers and decorative outlines. oklch(0.868 0.060 4), 1.53:1 on white. */
766
+ '700': string;
767
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.682 0.221 4), 3.20:1 on white. */
768
+ '800': string;
769
+ /** Solid fill. oklch(0.647 0.256 4), 3.74:1 on white. */
770
+ '900': string;
771
+ /** Solid fill on hover. oklch(0.607 0.244 4), 4.37:1 on white. */
772
+ '1000': string;
773
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.528 0.213 4), 5.99:1 on white. */
774
+ '1100': string;
775
+ /** Primary text, and the darkest step. oklch(0.260 0.063 5), 15.91:1 on white. */
776
+ '1200': string;
777
+ };
778
+ /** Alpha twins of rose: each is the smallest opacity that composites over white to the solid step (decision 0044). */
779
+ 'rose-alpha': {
780
+ /** Page background. Composites to rose.100 over white. */
781
+ '100': string;
782
+ /** Subtle background. Composites to rose.200 over white. */
783
+ '200': string;
784
+ /** Component fill at rest. Composites to rose.300 over white. */
785
+ '300': string;
786
+ /** Component fill on hover. Composites to rose.400 over white. */
787
+ '400': string;
788
+ /** Component fill pressed or selected. Composites to rose.500 over white. */
789
+ '500': string;
790
+ /** Subtle border. Composites to rose.600 over white. */
791
+ '600': string;
792
+ /** Default border, for dividers and decorative outlines. Composites to rose.700 over white. */
793
+ '700': string;
794
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to rose.800 over white. */
795
+ '800': string;
796
+ /** Solid fill. Composites to rose.900 over white. */
797
+ '900': string;
798
+ /** Solid fill on hover. Composites to rose.1000 over white. */
799
+ '1000': string;
800
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to rose.1100 over white. */
801
+ '1100': string;
802
+ /** Primary text, and the darkest step. Composites to rose.1200 over white. */
803
+ '1200': string;
804
+ };
805
+ /** Magenta display ramp (decision 0043): no meaning; category labels and chart categories. Defined in OKLCH at hue 329°: 100 (lightest) to 1200 (darkest), each step at the gray step's contrast with white, with its contrast in its description (decisions 0040 and 0044). */
806
+ magenta: {
807
+ /** Page background. oklch(0.990 0.003 326), 1.03:1 on white. */
808
+ '100': string;
809
+ /** Subtle background. oklch(0.984 0.007 332), 1.05:1 on white. */
810
+ '200': string;
811
+ /** Component fill at rest. oklch(0.964 0.018 328), 1.12:1 on white. */
812
+ '300': string;
813
+ /** Component fill on hover. oklch(0.945 0.030 329), 1.19:1 on white. */
814
+ '400': string;
815
+ /** Component fill pressed or selected. oklch(0.925 0.045 329), 1.27:1 on white. */
816
+ '500': string;
817
+ /** Subtle border. oklch(0.901 0.063 329), 1.38:1 on white. */
818
+ '600': string;
819
+ /** Default border, for dividers and decorative outlines. oklch(0.870 0.092 329), 1.53:1 on white. */
820
+ '700': string;
821
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.696 0.319 329), 3.20:1 on white. */
822
+ '800': string;
823
+ /** Solid fill. oklch(0.654 0.299 329), 3.75:1 on white. */
824
+ '900': string;
825
+ /** Solid fill on hover. oklch(0.615 0.282 329), 4.34:1 on white. */
826
+ '1000': string;
827
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.532 0.244 329), 6.02:1 on white. */
828
+ '1100': string;
829
+ /** Primary text, and the darkest step. oklch(0.262 0.073 330), 15.90:1 on white. */
830
+ '1200': string;
831
+ };
832
+ /** Alpha twins of magenta: each is the smallest opacity that composites over white to the solid step (decision 0044). */
833
+ 'magenta-alpha': {
834
+ /** Page background. Composites to magenta.100 over white. */
835
+ '100': string;
836
+ /** Subtle background. Composites to magenta.200 over white. */
837
+ '200': string;
838
+ /** Component fill at rest. Composites to magenta.300 over white. */
839
+ '300': string;
840
+ /** Component fill on hover. Composites to magenta.400 over white. */
841
+ '400': string;
842
+ /** Component fill pressed or selected. Composites to magenta.500 over white. */
843
+ '500': string;
844
+ /** Subtle border. Composites to magenta.600 over white. */
845
+ '600': string;
846
+ /** Default border, for dividers and decorative outlines. Composites to magenta.700 over white. */
847
+ '700': string;
848
+ /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to magenta.800 over white. */
849
+ '800': string;
850
+ /** Solid fill. Composites to magenta.900 over white. */
851
+ '900': string;
852
+ /** Solid fill on hover. Composites to magenta.1000 over white. */
853
+ '1000': string;
854
+ /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to magenta.1100 over white. */
855
+ '1100': string;
856
+ /** Primary text, and the darkest step. Composites to magenta.1200 over white. */
857
+ '1200': string;
858
+ };
317
859
  /** Neutral grey ramp: 000 is white, then 100 (lightest grey) to 1000 (near-black). */
318
860
  neutral: {
319
861
  '100': string;
@@ -797,8 +1339,10 @@ export type Tokens = {
797
1339
  * @deprecated No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .md. Removed in 3.0.
798
1340
  */
799
1341
  padding: string;
800
- /** Small Button label typography. */
1342
+ /** Small Button text: the caption style, with button.sizes.small.fontWeight after it. */
801
1343
  font: string;
1344
+ /** Weight of small Button text, set after the font: medium, as the other sizes. */
1345
+ fontWeight: string;
802
1346
  };
803
1347
  medium: {
804
1348
  /**
@@ -1566,7 +2110,7 @@ export type Tokens = {
1566
2110
  /** Slider thumb while dragging: deepest. */
1567
2111
  active: string;
1568
2112
  };
1569
- /** Fill of Slider's thumb: white, so it reads on both the track and the fill. */
2113
+ /** Fill of the Slider thumb: the raised surface, white. */
1570
2114
  background: string;
1571
2115
  };
1572
2116
  };
@@ -1583,7 +2127,11 @@ export type Tokens = {
1583
2127
  /** Width at which a long Breadcrumbs label truncates with an ellipsis. */
1584
2128
  maxWidth: string;
1585
2129
  };
1586
- /** Breadcrumb-sized text; Breadcrumbs uses typography.caption for its links today. */
2130
+ /**
2131
+ * Breadcrumb-sized text; Breadcrumbs uses typography.caption for its links today.
2132
+ *
2133
+ * @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.typography.caption`.
2134
+ */
1587
2135
  font: string;
1588
2136
  };
1589
2137
  cardLarge: {
@@ -1634,9 +2182,9 @@ export type Tokens = {
1634
2182
  };
1635
2183
  status: {
1636
2184
  pending: {
1637
- /** Text and icon of a pending StatusLabel, on its pending background. */
2185
+ /** Text and icon of a pending StatusLabel: neutral, because waiting needs no attention (decision 0045). 6.01:1 on white. */
1638
2186
  text: string;
1639
- /** Fill of a pending StatusLabel, behind its pending text. */
2187
+ /** Fill of a pending StatusLabel (decision 0045). */
1640
2188
  background: string;
1641
2189
  };
1642
2190
  completed: {
@@ -1658,38 +2206,66 @@ export type Tokens = {
1658
2206
  background: string;
1659
2207
  };
1660
2208
  processing: {
1661
- /** Text and icon of a processing StatusLabel, on its processing background. */
2209
+ /** Text and icon of a processing StatusLabel: in progress is accent (decisions 0043, 0045). 6.00:1 on white. */
1662
2210
  text: string;
1663
- /** Fill of a processing StatusLabel, behind its processing text. */
2211
+ /** Fill of a processing StatusLabel (decision 0045). */
1664
2212
  background: string;
1665
2213
  };
1666
2214
  scheduled: {
1667
- /** Text and icon of a scheduled StatusLabel, on its scheduled background. */
2215
+ /** Text and icon of a scheduled StatusLabel: neutral, because a future item needs no attention (decision 0045). 6.01:1 on white. */
1668
2216
  text: string;
1669
- /** Fill of a scheduled StatusLabel, behind its scheduled text. */
2217
+ /** Fill of a scheduled StatusLabel (decision 0045). */
1670
2218
  background: string;
1671
2219
  };
1672
2220
  };
1673
2221
  transaction: {
1674
- /** Positive amounts and credits in MoneyDisplay and TransactionListItem. */
2222
+ /**
2223
+ * Positive amounts and credits in MoneyDisplay and TransactionListItem.
2224
+ *
2225
+ * @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.data.positive`.
2226
+ */
1675
2227
  credit: string;
1676
- /** A credit amount on a hovered interactive row. */
2228
+ /**
2229
+ * A credit amount on a hovered interactive row.
2230
+ *
2231
+ * @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.data.positive`.
2232
+ */
1677
2233
  'credit-hover': string;
1678
- /** Negative amounts and debits in MoneyDisplay and TransactionListItem. */
2234
+ /**
2235
+ * Negative amounts and debits in MoneyDisplay and TransactionListItem.
2236
+ *
2237
+ * @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.data.negative`.
2238
+ */
1679
2239
  debit: string;
1680
- /** A debit amount on a hovered interactive row. */
2240
+ /**
2241
+ * A debit amount on a hovered interactive row.
2242
+ *
2243
+ * @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.data.negative`.
2244
+ */
1681
2245
  'debit-hover': string;
1682
- /** Amounts of pending or processing transactions. */
2246
+ /**
2247
+ * Amounts of pending or processing transactions.
2248
+ *
2249
+ * @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.text.muted`.
2250
+ */
1683
2251
  pending: string;
1684
- /** Informational amounts that are neither credit nor debit. */
2252
+ /**
2253
+ * Informational amounts that are neither credit nor debit.
2254
+ *
2255
+ * @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.text.muted`.
2256
+ */
1685
2257
  neutral: string;
1686
2258
  };
1687
2259
  track: {
1688
- /** Unfilled track of ProgressBar and Slider; the fill and thumb show the value (decision 0026). */
2260
+ /** Unfilled track of ProgressBar and Slider: light, so the fill and thumb show the value (decision 0026). The resting fill step, 1.12:1 on white. */
1689
2261
  background: string;
1690
2262
  };
1691
2263
  tooltip: {
1692
- /** Dotted underline marking text that has a tooltip. */
2264
+ /**
2265
+ * Dotted underline marking text that has a tooltip.
2266
+ *
2267
+ * @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.border.default`.
2268
+ */
1693
2269
  border: string;
1694
2270
  };
1695
2271
  };
@@ -1731,6 +2307,12 @@ export type Tokens = {
1731
2307
  hover: string;
1732
2308
  /** Content that fades while pressed, one step further than hover. */
1733
2309
  pressed: string;
2310
+ state: {
2311
+ /** State layer for a hovered solid fill: its content colour mixed in at 8%, as in Material 3 (decision 0048). */
2312
+ hover: string;
2313
+ /** State layer for a pressed solid fill: its content colour mixed in at 12% (decision 0048). */
2314
+ pressed: string;
2315
+ };
1734
2316
  };
1735
2317
  fontFamily: {
1736
2318
  /** UI text (Inter). Use a typography style where one fits; this is for components that set the family on its own. */
@@ -1805,12 +2387,12 @@ export type Tokens = {
1805
2387
  modal: string;
1806
2388
  };
1807
2389
  border: {
1808
- /** Hairline in the default border colour: dividers that separate content, such as Breadcrumbs. 1.19:1 on white, so never a control's edge (decision 0025). */
2390
+ /** Hairline in the default border colour: dividers and decorative outlines, such as Breadcrumbs, CodeBlock and Divider. 1.53:1 on white, so never a control edge (decision 0025). */
1809
2391
  default: string;
1810
2392
  /**
1811
2393
  * Hairline in the subtle border colour: dividers and decorative outlines, such as CodeBlock and Separator. 1.30:1 on white, so never a control's edge (decision 0025).
1812
2394
  *
1813
- * @deprecated Renamed to semantic.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0.
2395
+ * @deprecated Renamed to semantic.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.border.default`.
1814
2396
  */
1815
2397
  subtle: string;
1816
2398
  /**
@@ -1824,7 +2406,7 @@ export type Tokens = {
1824
2406
  /**
1825
2407
  * Dotted underline marking text that has a tooltip.
1826
2408
  *
1827
- * @deprecated Moved to the component tier as component.tooltip.border (decision 0031 §6). Removed in 3.0.
2409
+ * @deprecated Moved to the component tier as component.tooltip.border (decision 0031 §6). Removed in 3.0. Use `semantic.border.default`.
1828
2410
  */
1829
2411
  tooltip: string;
1830
2412
  width: {
@@ -1891,7 +2473,11 @@ export type Tokens = {
1891
2473
  */
1892
2474
  circle: string;
1893
2475
  };
1894
- /** Hairline for dividers and decorative outlines, such as CodeBlock and Divider; never a control edge. */
2476
+ /**
2477
+ * Hairline for dividers and decorative outlines, such as CodeBlock and Divider; never a control edge.
2478
+ *
2479
+ * @deprecated Dividers have one border (decision 0048). Removed in 3.0. Use `semantic.border.default`.
2480
+ */
1895
2481
  emphasis: string;
1896
2482
  /** Firm hairline that must read as a boundary, such as a hovered text input. */
1897
2483
  'input-hover': string;
@@ -2262,9 +2848,13 @@ export type Tokens = {
2262
2848
  };
2263
2849
  color: {
2264
2850
  text: {
2265
- /** Primary text: body copy, labels and headings. 15.43:1 on white, 14.63:1 on the page. */
2851
+ /** Primary text: body copy, labels and headings. 15.91:1 on white, 15.51:1 on the page. */
2266
2852
  default: string;
2267
- /** Emphasised text: one step darker than text.default, so it reads stronger (decision 0029). 17.65:1 on white. */
2853
+ /**
2854
+ * Emphasised text.
2855
+ *
2856
+ * @deprecated Emphasis comes from weight and scale, not a darker colour (decision 0048). Removed in 3.0. Use `semantic.color.text.default`.
2857
+ */
2268
2858
  emphasis: string;
2269
2859
  /**
2270
2860
  * Secondary text: helper text, metadata and supporting copy. 8.18:1 on white, 7.76:1 on the page.
@@ -2272,9 +2862,9 @@ export type Tokens = {
2272
2862
  * @deprecated Renamed to semantic.color.text.muted by the semantic grammar (decision 0031). Removed in 3.0.
2273
2863
  */
2274
2864
  subdued: string;
2275
- /** Text on dark or coloured fills, such as the primary, accent and danger Buttons. 15.43:1 on background.emphasis, 5.39:1 on background.interactive. */
2865
+ /** Text on dark or coloured fills, such as the primary, accent and danger Buttons. 15.91:1 on fill.emphasis. */
2276
2866
  inverse: string;
2277
- /** Text of disabled controls. 2.07:1 on white: disabled text is exempt from the contrast minimum (WCAG 1.4.3), so never use it for text people need to read, including placeholders. */
2867
+ /** Text of disabled controls, translucent so it stays right on tinted surfaces. 1.53:1 on white: disabled text is exempt from the contrast minimum (WCAG 1.4.3), so never use it for text people need to read, including placeholders. */
2278
2868
  disabled: string;
2279
2869
  /**
2280
2870
  * Blue text for links and selected items (decision 0003). 5.39:1 on white, 5.11:1 on the page.
@@ -2300,20 +2890,32 @@ export type Tokens = {
2300
2890
  * @deprecated Renamed to semantic.color.text.danger by the semantic grammar (decision 0031). Removed in 3.0.
2301
2891
  */
2302
2892
  error: string;
2303
- /** Success text, such as InlineAlert success messages. 5.40:1 on white, 5.12:1 on the page. */
2893
+ /** Success text, such as InlineAlert success messages. 5.99:1 on white. */
2304
2894
  success: string;
2305
- /** Warning text, such as InlineAlert warnings. 5.38:1 on white, 5.10:1 on the page. */
2895
+ /** Warning text, such as InlineAlert warnings (0043: warning is yellow). 6.01:1 on white. */
2306
2896
  warning: string;
2307
- /** Secondary text: helper text, metadata, timestamps. */
2897
+ /** Secondary text: helper text, metadata, timestamps. 6.01:1 on white, and at least 4.5:1 on every background and fill step (decision 0040). */
2308
2898
  muted: string;
2309
- /** Blue text for links and selected items; never decoration, see 0003. */
2899
+ /** Blue text for links and selected items, in every state: the fill shows hover and pressed. Never decoration (0003). 6.00:1 on white. */
2310
2900
  accent: string;
2311
- /** Text of a hovered selected item, on the accent-muted-hover fill. */
2901
+ /**
2902
+ * Text of a hovered selected item, on the accent-muted-hover fill.
2903
+ *
2904
+ * @deprecated Accent text keeps one colour in every state; the fill shows hover and pressed (#190). Removed in 3.0. Use `semantic.color.text.accent`.
2905
+ */
2312
2906
  'accent-hover': string;
2313
- /** Text of a pressed selected item, on the accent-muted-pressed fill. */
2907
+ /**
2908
+ * Text of a pressed selected item, on the accent-muted-pressed fill.
2909
+ *
2910
+ * @deprecated Accent text keeps one colour in every state; the fill shows hover and pressed (#190). Removed in 3.0. Use `semantic.color.text.accent`.
2911
+ */
2314
2912
  'accent-pressed': string;
2315
- /** Error text: field error messages, InlineAlert errors. */
2913
+ /** Error text: field error messages, InlineAlert errors. 6.03:1 on white. */
2316
2914
  danger: string;
2915
+ /** AI-generated content and agent actions, such as the label on proposed content (0046); always with the AI icon and a label, never colour alone (0043). 5.99:1 on white, 5.68:1 on the page. */
2916
+ ai: string;
2917
+ /** Serious-warning text: between warning and danger (decisions 0043, 0045). 6.04:1 on white. */
2918
+ serious: string;
2317
2919
  };
2318
2920
  background: {
2319
2921
  /**
@@ -2510,12 +3112,12 @@ export type Tokens = {
2510
3112
  'inverse-overlay': string;
2511
3113
  };
2512
3114
  border: {
2513
- /** Default border colour for dividers and decorative outlines only. 1.19:1 on white, below the 3:1 a control's edge needs (WCAG 1.4.11); use color.border.control for that (decision 0025). */
3115
+ /** Default border colour for dividers and decorative outlines only (decision 0040). 1.53:1 on white, below the 3:1 a control edge needs; use color.border.input for that (decision 0025). */
2514
3116
  default: string;
2515
3117
  /**
2516
3118
  * Subtle border colour for dividers and decorative outlines, and for the borders of disabled controls, which WCAG 1.4.11 exempts. 1.30:1 on white, below the 3:1 a control's edge needs; use color.border.control for that (decision 0025).
2517
3119
  *
2518
- * @deprecated Renamed to semantic.color.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0.
3120
+ * @deprecated Renamed to semantic.color.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.border.default`.
2519
3121
  */
2520
3122
  subtle: string;
2521
3123
  /**
@@ -2542,29 +3144,41 @@ export type Tokens = {
2542
3144
  * @deprecated Renamed to semantic.color.border.danger by the semantic grammar (decision 0031). Removed in 3.0.
2543
3145
  */
2544
3146
  error: string;
2545
- /** Green border for success outlines, such as an outlined success Alert. */
3147
+ /** Green border for success outlines, such as an outlined success Alert. 3.18:1 on white (decision 0025). */
2546
3148
  success: string;
2547
- /** Orange border for warning outlines, such as an outlined warning Alert. */
3149
+ /** Yellow border for warning outlines, such as an outlined warning Alert. 3.19:1 on white (decision 0025). */
2548
3150
  warning: string;
2549
3151
  /** An invisible border that keeps its width, so a borderless state takes the same space as a bordered one (for example Alert's borderless appearance, decision 0019). */
2550
3152
  none: string;
2551
- /** Border for dividers, decorative outlines and disabled controls; never a resting control edge. */
3153
+ /**
3154
+ * Border for dividers, decorative outlines and disabled controls.
3155
+ *
3156
+ * @deprecated Dividers have one border colour (decision 0048). Removed in 3.0. Use `semantic.color.border.default`.
3157
+ */
2552
3158
  emphasis: string;
2553
- /** Resting edge of a control that must show where it is: text inputs, Dropdown, Checkbox. */
3159
+ /** Resting edge of a control that must show where it is: text inputs, Dropdown, Checkbox. 3.19:1 on white and the page (decision 0025). */
2554
3160
  input: string;
2555
- /** Edge of a hovered control, such as a hovered text input or Dropdown. */
3161
+ /** Edge of a hovered control, such as a hovered text input or Dropdown. 6.01:1 on white, a clear step from rest that stays apart from the focus ring. */
2556
3162
  'input-hover': string;
2557
- /** The focus ring, and rings that mark the current item, such as on CardSmall (0029). */
3163
+ /** The focus ring, and rings that mark the current item, such as on CardSmall (0029). 15.91:1 on white. */
2558
3164
  focus: string;
2559
- /** Blue border for selected items; never decoration, see 0003. */
3165
+ /** Blue border for selected items; never decoration (0003). 3.21:1 on white (decision 0025). */
2560
3166
  accent: string;
2561
- /** Border of an invalid field and other error outlines. */
3167
+ /** Border of an invalid field and other error outlines. 3.18:1 on white (decision 0025). */
2562
3168
  danger: string;
3169
+ /** Orange border for serious-warning outlines. 3.21:1 on white (decision 0025). */
3170
+ serious: string;
3171
+ /** Purple border for AI-generated content and agent actions, always with the AI icon and a label (0043). 3.20:1 on white. */
3172
+ ai: string;
2563
3173
  };
2564
3174
  icon: {
2565
- /** Default icon colour, matching text.default. 15.43:1 on white. */
3175
+ /** Default icon colour, matching text.default. 15.91:1 on white. */
2566
3176
  default: string;
2567
- /** Emphasised icons, matching text.emphasis: one step darker than icon.default (decision 0029). */
3177
+ /**
3178
+ * Emphasised icons.
3179
+ *
3180
+ * @deprecated Emphasis comes from weight and scale, not a darker colour (decision 0048). Removed in 3.0. Use `semantic.color.icon.default`.
3181
+ */
2568
3182
  emphasis: string;
2569
3183
  /**
2570
3184
  * Secondary icons, such as list item and empty-state icons. 4.69:1 on white, 4.45:1 on the page (icons need 3:1).
@@ -2572,7 +3186,7 @@ export type Tokens = {
2572
3186
  * @deprecated Renamed to semantic.color.icon.muted by the semantic grammar (decision 0031). Removed in 3.0.
2573
3187
  */
2574
3188
  subdued: string;
2575
- /** Icons and other foreground marks in disabled controls, such as a disabled Slider's fill and thumb ring. Exempt from the contrast minimum, like text.disabled. */
3189
+ /** Icons and other foreground marks in disabled controls, matching text.disabled. 1.53:1 on white. */
2576
3190
  disabled: string;
2577
3191
  /** Icons on dark or coloured fills, matching text.inverse. */
2578
3192
  inverse: string;
@@ -2600,175 +3214,243 @@ export type Tokens = {
2600
3214
  * @deprecated Renamed to semantic.color.icon.danger by the semantic grammar (decision 0031). Removed in 3.0.
2601
3215
  */
2602
3216
  error: string;
2603
- /** Success icons, such as in Alert and EmptyState. 5.40:1 on white. (InlineAlert's icon takes the text colour instead.) */
3217
+ /** Success icons, such as in Alert and EmptyState. 5.99:1 on white. (InlineAlert’s icon takes the text colour instead.) */
2604
3218
  success: string;
2605
- /** Warning icons, such as in Alert. 5.38:1 on white. (InlineAlert's icon takes the text colour instead.) */
3219
+ /** Warning icons, such as in Alert. 6.01:1 on white. (InlineAlert’s icon takes the text colour instead.) */
2606
3220
  warning: string;
2607
- /** Secondary icons, such as list item and empty-state icons. */
3221
+ /** Secondary icons, such as list item and empty-state icons, matching text.muted. 6.01:1 on white. */
2608
3222
  muted: string;
2609
- /** Blue icons in links and selected items, matching color.text.accent. */
3223
+ /** Blue icons in links and selected items, in every state, matching color.text.accent. 6.00:1 on white. */
2610
3224
  accent: string;
2611
- /** Icon of a hovered selected item, matching color.text.accent-hover. */
3225
+ /**
3226
+ * Icon of a hovered selected item, matching color.text.accent-hover.
3227
+ *
3228
+ * @deprecated Accent icons keeps one colour in every state; the fill shows hover and pressed (#190). Removed in 3.0. Use `semantic.color.icon.accent`.
3229
+ */
2612
3230
  'accent-hover': string;
2613
- /** Icon of a pressed selected item, matching color.text.accent-pressed. */
3231
+ /**
3232
+ * Icon of a pressed selected item, matching color.text.accent-pressed.
3233
+ *
3234
+ * @deprecated Accent icons keeps one colour in every state; the fill shows hover and pressed (#190). Removed in 3.0. Use `semantic.color.icon.accent`.
3235
+ */
2614
3236
  'accent-pressed': string;
2615
- /** Error icons, such as in Alert and EmptyState. */
3237
+ /** Error icons, such as in Alert and EmptyState. 6.03:1 on white. */
2616
3238
  danger: string;
3239
+ /** The AI icon on AI-generated content and agent actions (0043, 0046), next to its label. 5.99:1 on white, 5.68:1 on the page. */
3240
+ ai: string;
3241
+ /** Serious-warning icons, matching color.text.serious. 6.04:1 on white. */
3242
+ serious: string;
2617
3243
  };
2618
3244
  financial: {
2619
3245
  /**
2620
3246
  * Color for positive monetary values, credits, income
2621
3247
  *
2622
- * @deprecated Moved to the component tier as component.transaction.credit (decision 0031 §6). Removed in 3.0.
3248
+ * @deprecated Moved to the component tier as component.transaction.credit (decision 0031 §6). Removed in 3.0. Use `semantic.color.data.positive`.
2623
3249
  */
2624
3250
  credit: string;
2625
3251
  /**
2626
3252
  * Hover state for credit-colored interactive elements
2627
3253
  *
2628
- * @deprecated Moved to the component tier as component.transaction.credit-hover (decision 0031 §6). Removed in 3.0.
3254
+ * @deprecated Moved to the component tier as component.transaction.credit-hover (decision 0031 §6). Removed in 3.0. Use `semantic.color.data.positive`.
2629
3255
  */
2630
3256
  'credit-hover': string;
2631
3257
  /**
2632
3258
  * Color for negative monetary values, debits, expenses
2633
3259
  *
2634
- * @deprecated Moved to the component tier as component.transaction.debit (decision 0031 §6). Removed in 3.0.
3260
+ * @deprecated Moved to the component tier as component.transaction.debit (decision 0031 §6). Removed in 3.0. Use `semantic.color.data.negative`.
2635
3261
  */
2636
3262
  debit: string;
2637
3263
  /**
2638
3264
  * Hover state for debit-colored interactive elements
2639
3265
  *
2640
- * @deprecated Moved to the component tier as component.transaction.debit-hover (decision 0031 §6). Removed in 3.0.
3266
+ * @deprecated Moved to the component tier as component.transaction.debit-hover (decision 0031 §6). Removed in 3.0. Use `semantic.color.data.negative`.
2641
3267
  */
2642
3268
  'debit-hover': string;
2643
3269
  /**
2644
3270
  * Color for pending or processing financial transactions
2645
3271
  *
2646
- * @deprecated Moved to the component tier as component.transaction.pending (decision 0031 §6). Removed in 3.0.
3272
+ * @deprecated Moved to the component tier as component.transaction.pending (decision 0031 §6). Removed in 3.0. Use `semantic.color.text.muted`.
2647
3273
  */
2648
3274
  pending: string;
2649
3275
  /**
2650
3276
  * Neutral color for informational monetary amounts
2651
3277
  *
2652
- * @deprecated Moved to the component tier as component.transaction.neutral (decision 0031 §6). Removed in 3.0.
3278
+ * @deprecated Moved to the component tier as component.transaction.neutral (decision 0031 §6). Removed in 3.0. Use `semantic.color.text.muted`.
2653
3279
  */
2654
3280
  neutral: string;
2655
3281
  };
2656
3282
  category: {
2657
- /** Blue category color for general/miscellaneous */
3283
+ /**
3284
+ * Blue category color for general/miscellaneous
3285
+ *
3286
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Blue is now periwinkle. Removed in 3.0. Use `semantic.color.category.periwinkle`.
3287
+ */
2658
3288
  blue: string;
2659
- /** Strong step of the blue category: the fill of a filled CategoryLabel, with white text (decision 0029). */
3289
+ /**
3290
+ * Strong step of the blue category: the fill of a filled CategoryLabel, with white text (decision 0029).
3291
+ *
3292
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Blue is now periwinkle. Removed in 3.0. Use `semantic.color.category.periwinkle-strong`.
3293
+ */
2660
3294
  'blue-strong': string;
2661
3295
  /**
2662
3296
  * Strong step of the blue category: the fill of a filled CategoryLabel, with white text (decision 0029).
2663
3297
  *
2664
- * @deprecated "emphasis" means near-black, so use semantic.color.category.blue-strong (decision 0029). Removed in 3.0.
3298
+ * @deprecated "emphasis" means near-black, so use semantic.color.category.blue-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.periwinkle-strong`.
2665
3299
  */
2666
3300
  'blue-emphasis': string;
2667
3301
  /**
2668
3302
  * Subtle blue background
2669
3303
  *
2670
- * @deprecated Renamed to semantic.color.category.blue-muted by the semantic grammar (decision 0031). Removed in 3.0.
3304
+ * @deprecated Renamed to semantic.color.category.blue-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.periwinkle-muted`.
2671
3305
  */
2672
3306
  'blue-subtle': string;
2673
- /** Purple category color for entertainment */
3307
+ /**
3308
+ * Purple category color for entertainment
3309
+ *
3310
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Purple is now magenta. Removed in 3.0. Use `semantic.color.category.magenta`.
3311
+ */
2674
3312
  purple: string;
2675
- /** Strong step of the purple category: the fill of a filled CategoryLabel, with white text (decision 0029). */
3313
+ /**
3314
+ * Strong step of the purple category: the fill of a filled CategoryLabel, with white text (decision 0029).
3315
+ *
3316
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Purple is now magenta. Removed in 3.0. Use `semantic.color.category.magenta-strong`.
3317
+ */
2676
3318
  'purple-strong': string;
2677
3319
  /**
2678
3320
  * Strong step of the purple category: the fill of a filled CategoryLabel, with white text (decision 0029).
2679
3321
  *
2680
- * @deprecated "emphasis" means near-black, so use semantic.color.category.purple-strong (decision 0029). Removed in 3.0.
3322
+ * @deprecated "emphasis" means near-black, so use semantic.color.category.purple-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.magenta-strong`.
2681
3323
  */
2682
3324
  'purple-emphasis': string;
2683
3325
  /**
2684
3326
  * Subtle purple background
2685
3327
  *
2686
- * @deprecated Renamed to semantic.color.category.purple-muted by the semantic grammar (decision 0031). Removed in 3.0.
3328
+ * @deprecated Renamed to semantic.color.category.purple-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.magenta-muted`.
2687
3329
  */
2688
3330
  'purple-subtle': string;
2689
- /** Pink category color for health/wellness */
3331
+ /**
3332
+ * Pink category color for health/wellness
3333
+ *
3334
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Pink is now rose. Removed in 3.0. Use `semantic.color.category.rose`.
3335
+ */
2690
3336
  pink: string;
2691
- /** Strong step of the pink category: the fill of a filled CategoryLabel, with white text (decision 0029). */
3337
+ /**
3338
+ * Strong step of the pink category: the fill of a filled CategoryLabel, with white text (decision 0029).
3339
+ *
3340
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Pink is now rose. Removed in 3.0. Use `semantic.color.category.rose-strong`.
3341
+ */
2692
3342
  'pink-strong': string;
2693
3343
  /**
2694
3344
  * Strong step of the pink category: the fill of a filled CategoryLabel, with white text (decision 0029).
2695
3345
  *
2696
- * @deprecated "emphasis" means near-black, so use semantic.color.category.pink-strong (decision 0029). Removed in 3.0.
3346
+ * @deprecated "emphasis" means near-black, so use semantic.color.category.pink-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.rose-strong`.
2697
3347
  */
2698
3348
  'pink-emphasis': string;
2699
3349
  /**
2700
3350
  * Subtle pink background
2701
3351
  *
2702
- * @deprecated Renamed to semantic.color.category.pink-muted by the semantic grammar (decision 0031). Removed in 3.0.
3352
+ * @deprecated Renamed to semantic.color.category.pink-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.rose-muted`.
2703
3353
  */
2704
3354
  'pink-subtle': string;
2705
- /** Yellow category color for utilities */
3355
+ /**
3356
+ * Yellow category color for utilities
3357
+ *
3358
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Yellow is now olive. Removed in 3.0. Use `semantic.color.category.olive`.
3359
+ */
2706
3360
  yellow: string;
2707
- /** Strong step of the yellow category: the fill of a filled CategoryLabel, with white text (decision 0029). */
3361
+ /**
3362
+ * Strong step of the yellow category: the fill of a filled CategoryLabel, with white text (decision 0029).
3363
+ *
3364
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Yellow is now olive. Removed in 3.0. Use `semantic.color.category.olive-strong`.
3365
+ */
2708
3366
  'yellow-strong': string;
2709
3367
  /**
2710
3368
  * Strong step of the yellow category: the fill of a filled CategoryLabel, with white text (decision 0029).
2711
3369
  *
2712
- * @deprecated "emphasis" means near-black, so use semantic.color.category.yellow-strong (decision 0029). Removed in 3.0.
3370
+ * @deprecated "emphasis" means near-black, so use semantic.color.category.yellow-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.olive-strong`.
2713
3371
  */
2714
3372
  'yellow-emphasis': string;
2715
3373
  /**
2716
3374
  * Subtle yellow background
2717
3375
  *
2718
- * @deprecated Renamed to semantic.color.category.yellow-muted by the semantic grammar (decision 0031). Removed in 3.0.
3376
+ * @deprecated Renamed to semantic.color.category.yellow-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.olive-muted`.
2719
3377
  */
2720
3378
  'yellow-subtle': string;
2721
- /** Green category color for income */
3379
+ /**
3380
+ * Green category color for income
3381
+ *
3382
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Green is now olive. Removed in 3.0. Use `semantic.color.category.olive`.
3383
+ */
2722
3384
  green: string;
2723
- /** Strong step of the green category: the fill of a filled CategoryLabel, with white text (decision 0029). */
3385
+ /**
3386
+ * Strong step of the green category: the fill of a filled CategoryLabel, with white text (decision 0029).
3387
+ *
3388
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Green is now olive. Removed in 3.0. Use `semantic.color.category.olive-strong`.
3389
+ */
2724
3390
  'green-strong': string;
2725
3391
  /**
2726
3392
  * Strong step of the green category: the fill of a filled CategoryLabel, with white text (decision 0029).
2727
3393
  *
2728
- * @deprecated "emphasis" means near-black, so use semantic.color.category.green-strong (decision 0029). Removed in 3.0.
3394
+ * @deprecated "emphasis" means near-black, so use semantic.color.category.green-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.olive-strong`.
2729
3395
  */
2730
3396
  'green-emphasis': string;
2731
3397
  /**
2732
3398
  * Subtle green background
2733
3399
  *
2734
- * @deprecated Renamed to semantic.color.category.green-muted by the semantic grammar (decision 0031). Removed in 3.0.
3400
+ * @deprecated Renamed to semantic.color.category.green-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.olive-muted`.
2735
3401
  */
2736
3402
  'green-subtle': string;
2737
- /** Red category color for expenses */
3403
+ /**
3404
+ * Red category color for expenses
3405
+ *
3406
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Red is now rose. Removed in 3.0. Use `semantic.color.category.rose`.
3407
+ */
2738
3408
  red: string;
2739
- /** Strong step of the red category: the fill of a filled CategoryLabel, with white text (decision 0029). */
3409
+ /**
3410
+ * Strong step of the red category: the fill of a filled CategoryLabel, with white text (decision 0029).
3411
+ *
3412
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Red is now rose. Removed in 3.0. Use `semantic.color.category.rose-strong`.
3413
+ */
2740
3414
  'red-strong': string;
2741
3415
  /**
2742
3416
  * Strong step of the red category: the fill of a filled CategoryLabel, with white text (decision 0029).
2743
3417
  *
2744
- * @deprecated "emphasis" means near-black, so use semantic.color.category.red-strong (decision 0029). Removed in 3.0.
3418
+ * @deprecated "emphasis" means near-black, so use semantic.color.category.red-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.rose-strong`.
2745
3419
  */
2746
3420
  'red-emphasis': string;
2747
3421
  /**
2748
3422
  * Subtle red background
2749
3423
  *
2750
- * @deprecated Renamed to semantic.color.category.red-muted by the semantic grammar (decision 0031). Removed in 3.0.
3424
+ * @deprecated Renamed to semantic.color.category.red-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.rose-muted`.
2751
3425
  */
2752
3426
  'red-subtle': string;
2753
- /** Orange category color for food & dining */
3427
+ /**
3428
+ * Orange category color for food & dining
3429
+ *
3430
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Orange is now rose. Removed in 3.0. Use `semantic.color.category.rose`.
3431
+ */
2754
3432
  orange: string;
2755
- /** Strong step of the orange category: the fill of a filled CategoryLabel, with white text (decision 0029). */
3433
+ /**
3434
+ * Strong step of the orange category: the fill of a filled CategoryLabel, with white text (decision 0029).
3435
+ *
3436
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Orange is now rose. Removed in 3.0. Use `semantic.color.category.rose-strong`.
3437
+ */
2756
3438
  'orange-strong': string;
2757
3439
  /**
2758
3440
  * Strong step of the orange category: the fill of a filled CategoryLabel, with white text (decision 0029).
2759
3441
  *
2760
- * @deprecated "emphasis" means near-black, so use semantic.color.category.orange-strong (decision 0029). Removed in 3.0.
3442
+ * @deprecated "emphasis" means near-black, so use semantic.color.category.orange-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.rose-strong`.
2761
3443
  */
2762
3444
  'orange-emphasis': string;
2763
3445
  /**
2764
3446
  * Subtle orange background
2765
3447
  *
2766
- * @deprecated Renamed to semantic.color.category.orange-muted by the semantic grammar (decision 0031). Removed in 3.0.
3448
+ * @deprecated Renamed to semantic.color.category.orange-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.rose-muted`.
2767
3449
  */
2768
3450
  'orange-subtle': string;
2769
- /** Gray category color for uncategorized */
3451
+ /** Gray category (decision 0043: neutral, for uncategorised or "other"): the outline of an outlined CategoryLabel. 3.19:1 on white. */
2770
3452
  gray: string;
2771
- /** Strong step of the gray category: the fill of a filled CategoryLabel, with white text (decision 0029). */
3453
+ /** Strong step of the gray category: the fill of a filled CategoryLabel, with white text at 6.01:1. */
2772
3454
  'gray-strong': string;
2773
3455
  /**
2774
3456
  * Strong step of the gray category: the fill of a filled CategoryLabel, with white text (decision 0029).
@@ -2782,38 +3464,126 @@ export type Tokens = {
2782
3464
  * @deprecated Renamed to semantic.color.category.gray-muted by the semantic grammar (decision 0031). Removed in 3.0.
2783
3465
  */
2784
3466
  'gray-subtle': string;
2785
- /** Text and icons of an outlined or minimal blue CategoryLabel, on white or blue-muted. */
3467
+ /**
3468
+ * Text and icons of an outlined or minimal blue CategoryLabel, on white or blue-muted.
3469
+ *
3470
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Blue is now periwinkle. Removed in 3.0. Use `semantic.color.category.periwinkle-text`.
3471
+ */
2786
3472
  'blue-text': string;
2787
- /** Text and icons of an outlined or minimal purple CategoryLabel, on white or purple-muted. */
3473
+ /**
3474
+ * Text and icons of an outlined or minimal purple CategoryLabel, on white or purple-muted.
3475
+ *
3476
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Purple is now magenta. Removed in 3.0. Use `semantic.color.category.magenta-text`.
3477
+ */
2788
3478
  'purple-text': string;
2789
- /** Text and icons of an outlined or minimal pink CategoryLabel, on white or pink-muted. */
3479
+ /**
3480
+ * Text and icons of an outlined or minimal pink CategoryLabel, on white or pink-muted.
3481
+ *
3482
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Pink is now rose. Removed in 3.0. Use `semantic.color.category.rose-text`.
3483
+ */
2790
3484
  'pink-text': string;
2791
- /** Text and icons of an outlined or minimal yellow CategoryLabel, on white or yellow-muted. */
3485
+ /**
3486
+ * Text and icons of an outlined or minimal yellow CategoryLabel, on white or yellow-muted.
3487
+ *
3488
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Yellow is now olive. Removed in 3.0. Use `semantic.color.category.olive-text`.
3489
+ */
2792
3490
  'yellow-text': string;
2793
- /** Text and icons of an outlined or minimal green CategoryLabel, on white or green-muted. */
3491
+ /**
3492
+ * Text and icons of an outlined or minimal green CategoryLabel, on white or green-muted.
3493
+ *
3494
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Green is now olive. Removed in 3.0. Use `semantic.color.category.olive-text`.
3495
+ */
2794
3496
  'green-text': string;
2795
- /** Text and icons of an outlined or minimal red CategoryLabel, on white or red-muted. */
3497
+ /**
3498
+ * Text and icons of an outlined or minimal red CategoryLabel, on white or red-muted.
3499
+ *
3500
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Red is now rose. Removed in 3.0. Use `semantic.color.category.rose-text`.
3501
+ */
2796
3502
  'red-text': string;
2797
- /** Text and icons of an outlined or minimal orange CategoryLabel, on white or orange-muted. */
3503
+ /**
3504
+ * Text and icons of an outlined or minimal orange CategoryLabel, on white or orange-muted.
3505
+ *
3506
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Orange is now rose. Removed in 3.0. Use `semantic.color.category.rose-text`.
3507
+ */
2798
3508
  'orange-text': string;
2799
- /** Text and icons of an outlined or minimal gray CategoryLabel, on white or gray-muted. */
3509
+ /** Text and icons of an outlined or minimal gray CategoryLabel. 6.01:1 on white, 5.37:1 on gray-muted. */
2800
3510
  'gray-text': string;
2801
- /** Light blue fill of a blue CategoryLabel, behind the blue-text colour. */
3511
+ /**
3512
+ * Light blue fill of a blue CategoryLabel, behind the blue-text colour.
3513
+ *
3514
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Blue is now periwinkle. Removed in 3.0. Use `semantic.color.category.periwinkle-muted`.
3515
+ */
2802
3516
  'blue-muted': string;
2803
- /** Light purple fill of a purple CategoryLabel, behind the purple-text colour. */
3517
+ /**
3518
+ * Light purple fill of a purple CategoryLabel, behind the purple-text colour.
3519
+ *
3520
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Purple is now magenta. Removed in 3.0. Use `semantic.color.category.magenta-muted`.
3521
+ */
2804
3522
  'purple-muted': string;
2805
- /** Light pink fill of a pink CategoryLabel, behind the pink-text colour. */
3523
+ /**
3524
+ * Light pink fill of a pink CategoryLabel, behind the pink-text colour.
3525
+ *
3526
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Pink is now rose. Removed in 3.0. Use `semantic.color.category.rose-muted`.
3527
+ */
2806
3528
  'pink-muted': string;
2807
- /** Light yellow fill of a yellow CategoryLabel, behind the yellow-text colour. */
3529
+ /**
3530
+ * Light yellow fill of a yellow CategoryLabel, behind the yellow-text colour.
3531
+ *
3532
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Yellow is now olive. Removed in 3.0. Use `semantic.color.category.olive-muted`.
3533
+ */
2808
3534
  'yellow-muted': string;
2809
- /** Light green fill of a green CategoryLabel, behind the green-text colour. */
3535
+ /**
3536
+ * Light green fill of a green CategoryLabel, behind the green-text colour.
3537
+ *
3538
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Green is now olive. Removed in 3.0. Use `semantic.color.category.olive-muted`.
3539
+ */
2810
3540
  'green-muted': string;
2811
- /** Light red fill of a red CategoryLabel, behind the red-text colour. */
3541
+ /**
3542
+ * Light red fill of a red CategoryLabel, behind the red-text colour.
3543
+ *
3544
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Red is now rose. Removed in 3.0. Use `semantic.color.category.rose-muted`.
3545
+ */
2812
3546
  'red-muted': string;
2813
- /** Light orange fill of a orange CategoryLabel, behind the orange-text colour. */
3547
+ /**
3548
+ * Light orange fill of a orange CategoryLabel, behind the orange-text colour.
3549
+ *
3550
+ * @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Orange is now rose. Removed in 3.0. Use `semantic.color.category.rose-muted`.
3551
+ */
2814
3552
  'orange-muted': string;
2815
- /** Light gray fill of a gray CategoryLabel, behind the gray-text colour. */
3553
+ /** Light gray fill of a minimal CategoryLabel, behind the gray-text colour. */
2816
3554
  'gray-muted': string;
3555
+ /** Olive category (decision 0043: no meaning): the outline of an outlined CategoryLabel. 3.18:1 on white. */
3556
+ olive: string;
3557
+ /** Strong step of the olive category: the fill of a filled CategoryLabel, with white text at 6.02:1. */
3558
+ 'olive-strong': string;
3559
+ /** Text and icons of an outlined or minimal olive CategoryLabel. 6.02:1 on white, 5.39:1 on olive-muted. */
3560
+ 'olive-text': string;
3561
+ /** Light olive fill of a minimal CategoryLabel, behind the olive-text colour. */
3562
+ 'olive-muted': string;
3563
+ /** Periwinkle category (decision 0043: no meaning): the outline of an outlined CategoryLabel. 3.20:1 on white. */
3564
+ periwinkle: string;
3565
+ /** Strong step of the periwinkle category: the fill of a filled CategoryLabel, with white text at 6.00:1. */
3566
+ 'periwinkle-strong': string;
3567
+ /** Text and icons of an outlined or minimal periwinkle CategoryLabel. 6.00:1 on white, 5.37:1 on periwinkle-muted. */
3568
+ 'periwinkle-text': string;
3569
+ /** Light periwinkle fill of a minimal CategoryLabel, behind the periwinkle-text colour. */
3570
+ 'periwinkle-muted': string;
3571
+ /** Rose category (decision 0043: no meaning): the outline of an outlined CategoryLabel. 3.20:1 on white. */
3572
+ rose: string;
3573
+ /** Strong step of the rose category: the fill of a filled CategoryLabel, with white text at 5.99:1. */
3574
+ 'rose-strong': string;
3575
+ /** Text and icons of an outlined or minimal rose CategoryLabel. 5.99:1 on white, 5.33:1 on rose-muted. */
3576
+ 'rose-text': string;
3577
+ /** Light rose fill of a minimal CategoryLabel, behind the rose-text colour. */
3578
+ 'rose-muted': string;
3579
+ /** Magenta category (decision 0043: no meaning): the outline of an outlined CategoryLabel. 3.20:1 on white. */
3580
+ magenta: string;
3581
+ /** Strong step of the magenta category: the fill of a filled CategoryLabel, with white text at 6.02:1. */
3582
+ 'magenta-strong': string;
3583
+ /** Text and icons of an outlined or minimal magenta CategoryLabel. 6.02:1 on white, 5.38:1 on magenta-muted. */
3584
+ 'magenta-text': string;
3585
+ /** Light magenta fill of a minimal CategoryLabel, behind the magenta-text colour. */
3586
+ 'magenta-muted': string;
2817
3587
  };
2818
3588
  status: {
2819
3589
  /**
@@ -2890,47 +3660,55 @@ export type Tokens = {
2890
3660
  'scheduled-bg': string;
2891
3661
  };
2892
3662
  fill: {
2893
- /** Near-black fill for emphasis controls, such as the primary Button and IconButton. */
3663
+ /** Strong near-black fill for the primary Button and IconButton and the emphasis Chip, with text.inverse on it (15.91:1). Hover and pressed mix in text.inverse at opacity.state (decision 0048). */
2894
3664
  emphasis: string;
2895
- /** Fill of a hovered emphasis control, such as the primary Button. */
3665
+ /**
3666
+ * Fill of a hovered emphasis control, such as the primary Button.
3667
+ *
3668
+ * @deprecated Strong-fill states mix text.inverse into fill.emphasis at opacity.state.hover and opacity.state.pressed (decision 0048). Removed in 3.0.
3669
+ */
2896
3670
  'emphasis-hover': string;
2897
- /** Fill of a pressed emphasis control, such as the primary Button. */
3671
+ /**
3672
+ * Fill of a pressed emphasis control, such as the primary Button.
3673
+ *
3674
+ * @deprecated Strong-fill states mix text.inverse into fill.emphasis at opacity.state.hover and opacity.state.pressed (decision 0048). Removed in 3.0.
3675
+ */
2898
3676
  'emphasis-pressed': string;
2899
- /** Light grey fill for quiet grouped content, such as the default Chip. */
3677
+ /** Light grey fill for quiet grouped content, such as the default Chip. The resting fill step, so it shows on the page. */
2900
3678
  muted: string;
2901
3679
  /** Dark fill for inverse elements: a checked Checkbox, Modal and Sheet drag handles. */
2902
3680
  inverse: string;
2903
- /** Blue fill for the accent Button and other deliberate highlights; see 0003. */
3681
+ /** Blue fill for the accent Button and other deliberate highlights (0003), with text.inverse on it at 6.00:1. */
2904
3682
  accent: string;
2905
- /** Light blue fill for selected items: a selected chip, tab or row; see 0016. */
3683
+ /** Light blue fill for selected items: a selected chip, tab or row (0016). Accent text on it is 5.37:1. */
2906
3684
  'accent-muted': string;
2907
3685
  /** Fill of a hovered selected item, such as a selected filter chip. */
2908
3686
  'accent-muted-hover': string;
2909
3687
  /** Fill of a pressed selected item, such as a selected filter chip. */
2910
3688
  'accent-muted-pressed': string;
2911
- /** Blue fill of a hovered accent control, such as the accent Button. */
3689
+ /** Blue fill of a hovered accent control: fill.accent with text.inverse mixed in at opacity.state.hover (decision 0048). */
2912
3690
  'accent-hover': string;
2913
- /** Blue fill of a pressed accent control, such as the accent Button. */
3691
+ /** Blue fill of a pressed accent control: fill.accent with text.inverse mixed in at opacity.state.pressed (decision 0048). */
2914
3692
  'accent-pressed': string;
2915
- /** Strong red fill for destructive actions, such as the danger Button. */
3693
+ /** Strong red fill for destructive actions, such as the danger Button, with text.inverse on it at 6.03:1. */
2916
3694
  danger: string;
2917
- /** Fill of a hovered destructive control, such as the danger Button. */
3695
+ /** Fill of a hovered destructive control: fill.danger with text.inverse mixed in at opacity.state.hover (decision 0048). */
2918
3696
  'danger-hover': string;
2919
- /** Fill of a pressed destructive control, such as the danger Button. */
3697
+ /** Fill of a pressed destructive control: fill.danger with text.inverse mixed in at opacity.state.pressed (decision 0048). */
2920
3698
  'danger-pressed': string;
2921
- /** Light red tint behind error messages, such as an error Alert. */
3699
+ /** Light red tint behind error messages, such as an error Alert. Danger text on it is 5.39:1. */
2922
3700
  'danger-muted': string;
2923
- /** Strong green fill for success states, such as a success indicator. */
3701
+ /** Strong green fill for success states, such as a success indicator, with text.inverse on it at 5.99:1. */
2924
3702
  success: string;
2925
- /** Light green tint behind success messages, such as a success Alert. */
3703
+ /** Light green tint behind success messages, such as a success Alert. Success text on it is 5.34:1. */
2926
3704
  'success-muted': string;
2927
- /** Strong orange fill for warning states, such as a warning indicator. */
3705
+ /** Strong yellow fill for warning states, such as a warning indicator, with text.inverse on it at 6.01:1. */
2928
3706
  warning: string;
2929
- /** Light orange tint behind warning messages, such as a warning Alert. */
3707
+ /** Light yellow tint behind warning messages, such as a warning Alert. Warning text on it is 5.37:1. */
2930
3708
  'warning-muted': string;
2931
3709
  /** Fill of a disabled control, such as a disabled Button or Switch. */
2932
3710
  disabled: string;
2933
- /** Fill of a neutral control at rest, such as the secondary Button. */
3711
+ /** Fill of a neutral control at rest, such as the secondary Button (decision 0040). */
2934
3712
  default: string;
2935
3713
  /** Fill of a hovered neutral control, such as the secondary Button. */
2936
3714
  'default-hover': string;
@@ -2944,6 +3722,62 @@ export type Tokens = {
2944
3722
  'none-pressed': string;
2945
3723
  /** Hover tint for a fill-less element on a dark background, such as a count on a dark tab. */
2946
3724
  'inverse-none-hover': string;
3725
+ /** Strong orange fill for serious-warning states, with text.inverse on it at 6.04:1. */
3726
+ serious: string;
3727
+ /** Light orange tint behind serious-warning messages. */
3728
+ 'serious-muted': string;
3729
+ /** Light purple tint behind AI-generated content and agent proposals, always with the AI icon and a label (0043). */
3730
+ 'ai-muted': string;
3731
+ };
3732
+ /** Colours for charts and other data display (decision 0043). Each chart type has its own set; a chart never mixes them, and every value or series also carries a label, sign or legend. */
3733
+ data: {
3734
+ /** Good values and money in: gains, rises, credits. Always with a sign or arrow. 3.75:1 on white, the same step as negative so neither looks heavier. */
3735
+ positive: string;
3736
+ /** Bad values and money out: losses, falls, debits. Always with a sign or arrow. 3.74:1 on white, 0.118 apart from positive under every kind of colour vision. */
3737
+ negative: string;
3738
+ /** Category series, in order, with no meaning; group more than four coloured series into other, or label them directly. */
3739
+ categorical: {
3740
+ /** Category series 1 (olive). 6.02:1 on white. */
3741
+ '1': string;
3742
+ /** Category series 2 (periwinkle). 3.20:1 on white. */
3743
+ '2': string;
3744
+ /** Category series 3 (rose). 3.20:1 on white. */
3745
+ '3': string;
3746
+ /** Category series 4 (magenta). 6.02:1 on white. */
3747
+ '4': string;
3748
+ /** The other or remaining series, always last and labelled. 3.19:1 on white. */
3749
+ other: string;
3750
+ };
3751
+ diverging: {
3752
+ /** A comparison with no good or bad, from olive through neutral grey to magenta. */
3753
+ balance: {
3754
+ /** Diverging step 1 of 5. The strongest olive end. 6.02:1 on white. */
3755
+ '1': string;
3756
+ /** Diverging step 2 of 5. The lighter olive side. 3.18:1 on white. */
3757
+ '2': string;
3758
+ /** Diverging step 3 of 5. The neutral centre: no difference. */
3759
+ '3': string;
3760
+ /** Diverging step 4 of 5. The lighter magenta side. 3.20:1 on white. */
3761
+ '4': string;
3762
+ /** Diverging step 5 of 5. The strongest magenta end. 6.02:1 on white. */
3763
+ '5': string;
3764
+ };
3765
+ };
3766
+ sequential: {
3767
+ /** Magnitude, from the lowest value (1) to the highest (5), in periwinkle. */
3768
+ periwinkle: {
3769
+ /** Sequential step 1 of 5. 1.12:1 on white. */
3770
+ '1': string;
3771
+ /** Sequential step 2 of 5. 1.37:1 on white. */
3772
+ '2': string;
3773
+ /** Sequential step 3 of 5. 3.20:1 on white. */
3774
+ '3': string;
3775
+ /** Sequential step 4 of 5. 4.37:1 on white. */
3776
+ '4': string;
3777
+ /** Sequential step 5 of 5. 15.91:1 on white. */
3778
+ '5': string;
3779
+ };
3780
+ };
2947
3781
  };
2948
3782
  };
2949
3783
  typography: {
@@ -2994,7 +3828,7 @@ export type Tokens = {
2994
3828
  /**
2995
3829
  * Breadcrumb-sized text; not used today, as Breadcrumbs uses typography.caption.
2996
3830
  *
2997
- * @deprecated Moved to the component tier as component.breadcrumbs.font (decision 0031 §6). Removed in 3.0.
3831
+ * @deprecated Moved to the component tier as component.breadcrumbs.font (decision 0031 §6). Removed in 3.0. Use `semantic.typography.caption`.
2998
3832
  */
2999
3833
  breadcrumb: string;
3000
3834
  };