@common-origin/design-system 2.21.0 → 2.22.0

package/dist/styles/tokens.d.ts

@@ -60,7 +60,9 @@ export type Tokens = {
         opacity: {
             '0': string;
             '5': string;
+            '8': string;
             '10': string;
+            '12': string;
             '20': string;
             '25': string;
             '30': string;
@@ -1337,8 +1339,10 @@ export type Tokens = {
                      * @deprecated No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .md. Removed in 3.0.
                      */
                     padding: string;
-                    /** Small Button label typography. */
+                    /** Small Button text: the caption style, with button.sizes.small.fontWeight after it. */
                     font: string;
+                    /** Weight of small Button text, set after the font: medium, as the other sizes. */
+                    fontWeight: string;
                 };
                 medium: {
                     /**
@@ -2106,7 +2110,7 @@ export type Tokens = {
                     /** Slider thumb while dragging: deepest. */
                     active: string;
                 };
-                /** Fill of Slider's thumb: white, so it reads on both the track and the fill. */
+                /** Fill of the Slider thumb: the raised surface, white. */
                 background: string;
             };
         };
@@ -2123,7 +2127,11 @@ export type Tokens = {
                 /** Width at which a long Breadcrumbs label truncates with an ellipsis. */
                 maxWidth: string;
             };
-            /** Breadcrumb-sized text; Breadcrumbs uses typography.caption for its links today. */
+            /**
+             * Breadcrumb-sized text; Breadcrumbs uses typography.caption for its links today.
+             *
+             * @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.typography.caption`.
+             */
             font: string;
         };
         cardLarge: {
@@ -2174,9 +2182,9 @@ export type Tokens = {
         };
         status: {
             pending: {
-                /** Text and icon of a pending StatusLabel, on its pending background. */
+                /** Text and icon of a pending StatusLabel: neutral, because waiting needs no attention (decision 0045). 6.01:1 on white. */
                 text: string;
-                /** Fill of a pending StatusLabel, behind its pending text. */
+                /** Fill of a pending StatusLabel (decision 0045). */
                 background: string;
             };
             completed: {
@@ -2198,38 +2206,66 @@ export type Tokens = {
                 background: string;
             };
             processing: {
-                /** Text and icon of a processing StatusLabel, on its processing background. */
+                /** Text and icon of a processing StatusLabel: in progress is accent (decisions 0043, 0045). 6.00:1 on white. */
                 text: string;
-                /** Fill of a processing StatusLabel, behind its processing text. */
+                /** Fill of a processing StatusLabel (decision 0045). */
                 background: string;
             };
             scheduled: {
-                /** Text and icon of a scheduled StatusLabel, on its scheduled background. */
+                /** Text and icon of a scheduled StatusLabel: neutral, because a future item needs no attention (decision 0045). 6.01:1 on white. */
                 text: string;
-                /** Fill of a scheduled StatusLabel, behind its scheduled text. */
+                /** Fill of a scheduled StatusLabel (decision 0045). */
                 background: string;
             };
         };
         transaction: {
-            /** Positive amounts and credits in MoneyDisplay and TransactionListItem. */
+            /**
+             * Positive amounts and credits in MoneyDisplay and TransactionListItem.
+             *
+             * @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.data.positive`.
+             */
             credit: string;
-            /** A credit amount on a hovered interactive row. */
+            /**
+             * A credit amount on a hovered interactive row.
+             *
+             * @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.data.positive`.
+             */
             'credit-hover': string;
-            /** Negative amounts and debits in MoneyDisplay and TransactionListItem. */
+            /**
+             * Negative amounts and debits in MoneyDisplay and TransactionListItem.
+             *
+             * @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.data.negative`.
+             */
             debit: string;
-            /** A debit amount on a hovered interactive row. */
+            /**
+             * A debit amount on a hovered interactive row.
+             *
+             * @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.data.negative`.
+             */
             'debit-hover': string;
-            /** Amounts of pending or processing transactions. */
+            /**
+             * Amounts of pending or processing transactions.
+             *
+             * @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.text.muted`.
+             */
             pending: string;
-            /** Informational amounts that are neither credit nor debit. */
+            /**
+             * Informational amounts that are neither credit nor debit.
+             *
+             * @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.text.muted`.
+             */
             neutral: string;
         };
         track: {
-            /** Unfilled track of ProgressBar and Slider; the fill and thumb show the value (decision 0026). */
+            /** 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. */
             background: string;
         };
         tooltip: {
-            /** Dotted underline marking text that has a tooltip. */
+            /**
+             * Dotted underline marking text that has a tooltip.
+             *
+             * @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.border.default`.
+             */
             border: string;
         };
     };
@@ -2271,6 +2307,12 @@ export type Tokens = {
             hover: string;
             /** Content that fades while pressed, one step further than hover. */
             pressed: string;
+            state: {
+                /** State layer for a hovered solid fill: its content colour mixed in at 8%, as in Material 3 (decision 0048). */
+                hover: string;
+                /** State layer for a pressed solid fill: its content colour mixed in at 12% (decision 0048). */
+                pressed: string;
+            };
         };
         fontFamily: {
             /** UI text (Inter). Use a typography style where one fits; this is for components that set the family on its own. */
@@ -2345,12 +2387,12 @@ export type Tokens = {
             modal: string;
         };
         border: {
-            /** 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). */
+            /** 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). */
             default: string;
             /**
              * 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).
              *
-             * @deprecated Renamed to semantic.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0.
+             * @deprecated Renamed to semantic.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.border.default`.
              */
             subtle: string;
             /**
@@ -2364,7 +2406,7 @@ export type Tokens = {
             /**
              * Dotted underline marking text that has a tooltip.
              *
-             * @deprecated Moved to the component tier as component.tooltip.border (decision 0031 §6). Removed in 3.0.
+             * @deprecated Moved to the component tier as component.tooltip.border (decision 0031 §6). Removed in 3.0. Use `semantic.border.default`.
              */
             tooltip: string;
             width: {
@@ -2431,7 +2473,11 @@ export type Tokens = {
                  */
                 circle: string;
             };
-            /** Hairline for dividers and decorative outlines, such as CodeBlock and Divider; never a control edge. */
+            /**
+             * Hairline for dividers and decorative outlines, such as CodeBlock and Divider; never a control edge.
+             *
+             * @deprecated Dividers have one border (decision 0048). Removed in 3.0. Use `semantic.border.default`.
+             */
             emphasis: string;
             /** Firm hairline that must read as a boundary, such as a hovered text input. */
             'input-hover': string;
@@ -2802,9 +2848,13 @@ export type Tokens = {
         };
         color: {
             text: {
-                /** Primary text: body copy, labels and headings. 15.43:1 on white, 14.63:1 on the page. */
+                /** Primary text: body copy, labels and headings. 15.91:1 on white, 15.51:1 on the page. */
                 default: string;
-                /** Emphasised text: one step darker than text.default, so it reads stronger (decision 0029). 17.65:1 on white. */
+                /**
+                 * Emphasised text.
+                 *
+                 * @deprecated Emphasis comes from weight and scale, not a darker colour (decision 0048). Removed in 3.0. Use `semantic.color.text.default`.
+                 */
                 emphasis: string;
                 /**
                  * Secondary text: helper text, metadata and supporting copy. 8.18:1 on white, 7.76:1 on the page.
@@ -2812,9 +2862,9 @@ export type Tokens = {
                  * @deprecated Renamed to semantic.color.text.muted by the semantic grammar (decision 0031). Removed in 3.0.
                  */
                 subdued: string;
-                /** 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. */
+                /** Text on dark or coloured fills, such as the primary, accent and danger Buttons. 15.91:1 on fill.emphasis. */
                 inverse: string;
-                /** 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. */
+                /** 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. */
                 disabled: string;
                 /**
                  * Blue text for links and selected items (decision 0003). 5.39:1 on white, 5.11:1 on the page.
@@ -2840,22 +2890,32 @@ export type Tokens = {
                  * @deprecated Renamed to semantic.color.text.danger by the semantic grammar (decision 0031). Removed in 3.0.
                  */
                 error: string;
-                /** Success text, such as InlineAlert success messages. 5.40:1 on white, 5.12:1 on the page. */
+                /** Success text, such as InlineAlert success messages. 5.99:1 on white. */
                 success: string;
-                /** Warning text, such as InlineAlert warnings. 5.38:1 on white, 5.10:1 on the page. */
+                /** Warning text, such as InlineAlert warnings (0043: warning is yellow). 6.01:1 on white. */
                 warning: string;
-                /** Secondary text: helper text, metadata, timestamps. */
+                /** 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). */
                 muted: string;
-                /** Blue text for links and selected items; never decoration, see 0003. */
+                /** Blue text for links and selected items, in every state: the fill shows hover and pressed. Never decoration (0003). 6.00:1 on white. */
                 accent: string;
-                /** Text of a hovered selected item, on the accent-muted-hover fill. */
+                /**
+                 * Text of a hovered selected item, on the accent-muted-hover fill.
+                 *
+                 * @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`.
+                 */
                 'accent-hover': string;
-                /** Text of a pressed selected item, on the accent-muted-pressed fill. */
+                /**
+                 * Text of a pressed selected item, on the accent-muted-pressed fill.
+                 *
+                 * @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`.
+                 */
                 'accent-pressed': string;
-                /** Error text: field error messages, InlineAlert errors. */
+                /** Error text: field error messages, InlineAlert errors. 6.03:1 on white. */
                 danger: string;
                 /** 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. */
                 ai: string;
+                /** Serious-warning text: between warning and danger (decisions 0043, 0045). 6.04:1 on white. */
+                serious: string;
             };
             background: {
                 /**
@@ -3052,12 +3112,12 @@ export type Tokens = {
                 'inverse-overlay': string;
             };
             border: {
-                /** 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). */
+                /** 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). */
                 default: string;
                 /**
                  * 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).
                  *
-                 * @deprecated Renamed to semantic.color.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0.
+                 * @deprecated Renamed to semantic.color.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.border.default`.
                  */
                 subtle: string;
                 /**
@@ -3084,29 +3144,41 @@ export type Tokens = {
                  * @deprecated Renamed to semantic.color.border.danger by the semantic grammar (decision 0031). Removed in 3.0.
                  */
                 error: string;
-                /** Green border for success outlines, such as an outlined success Alert. */
+                /** Green border for success outlines, such as an outlined success Alert. 3.18:1 on white (decision 0025). */
                 success: string;
-                /** Orange border for warning outlines, such as an outlined warning Alert. */
+                /** Yellow border for warning outlines, such as an outlined warning Alert. 3.19:1 on white (decision 0025). */
                 warning: string;
                 /** 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). */
                 none: string;
-                /** Border for dividers, decorative outlines and disabled controls; never a resting control edge. */
+                /**
+                 * Border for dividers, decorative outlines and disabled controls.
+                 *
+                 * @deprecated Dividers have one border colour (decision 0048). Removed in 3.0. Use `semantic.color.border.default`.
+                 */
                 emphasis: string;
-                /** Resting edge of a control that must show where it is: text inputs, Dropdown, Checkbox. */
+                /** 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). */
                 input: string;
-                /** Edge of a hovered control, such as a hovered text input or Dropdown. */
+                /** 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. */
                 'input-hover': string;
-                /** The focus ring, and rings that mark the current item, such as on CardSmall (0029). */
+                /** The focus ring, and rings that mark the current item, such as on CardSmall (0029). 15.91:1 on white. */
                 focus: string;
-                /** Blue border for selected items; never decoration, see 0003. */
+                /** Blue border for selected items; never decoration (0003). 3.21:1 on white (decision 0025). */
                 accent: string;
-                /** Border of an invalid field and other error outlines. */
+                /** Border of an invalid field and other error outlines. 3.18:1 on white (decision 0025). */
                 danger: string;
+                /** Orange border for serious-warning outlines. 3.21:1 on white (decision 0025). */
+                serious: string;
+                /** Purple border for AI-generated content and agent actions, always with the AI icon and a label (0043). 3.20:1 on white. */
+                ai: string;
             };
             icon: {
-                /** Default icon colour, matching text.default. 15.43:1 on white. */
+                /** Default icon colour, matching text.default. 15.91:1 on white. */
                 default: string;
-                /** Emphasised icons, matching text.emphasis: one step darker than icon.default (decision 0029). */
+                /**
+                 * Emphasised icons.
+                 *
+                 * @deprecated Emphasis comes from weight and scale, not a darker colour (decision 0048). Removed in 3.0. Use `semantic.color.icon.default`.
+                 */
                 emphasis: string;
                 /**
                  * 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).
@@ -3114,7 +3186,7 @@ export type Tokens = {
                  * @deprecated Renamed to semantic.color.icon.muted by the semantic grammar (decision 0031). Removed in 3.0.
                  */
                 subdued: string;
-                /** 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. */
+                /** Icons and other foreground marks in disabled controls, matching text.disabled. 1.53:1 on white. */
                 disabled: string;
                 /** Icons on dark or coloured fills, matching text.inverse. */
                 inverse: string;
@@ -3142,177 +3214,243 @@ export type Tokens = {
                  * @deprecated Renamed to semantic.color.icon.danger by the semantic grammar (decision 0031). Removed in 3.0.
                  */
                 error: string;
-                /** Success icons, such as in Alert and EmptyState. 5.40:1 on white. (InlineAlert's icon takes the text colour instead.) */
+                /** Success icons, such as in Alert and EmptyState. 5.99:1 on white. (InlineAlert’s icon takes the text colour instead.) */
                 success: string;
-                /** Warning icons, such as in Alert. 5.38:1 on white. (InlineAlert's icon takes the text colour instead.) */
+                /** Warning icons, such as in Alert. 6.01:1 on white. (InlineAlert’s icon takes the text colour instead.) */
                 warning: string;
-                /** Secondary icons, such as list item and empty-state icons. */
+                /** Secondary icons, such as list item and empty-state icons, matching text.muted. 6.01:1 on white. */
                 muted: string;
-                /** Blue icons in links and selected items, matching color.text.accent. */
+                /** Blue icons in links and selected items, in every state, matching color.text.accent. 6.00:1 on white. */
                 accent: string;
-                /** Icon of a hovered selected item, matching color.text.accent-hover. */
+                /**
+                 * Icon of a hovered selected item, matching color.text.accent-hover.
+                 *
+                 * @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`.
+                 */
                 'accent-hover': string;
-                /** Icon of a pressed selected item, matching color.text.accent-pressed. */
+                /**
+                 * Icon of a pressed selected item, matching color.text.accent-pressed.
+                 *
+                 * @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`.
+                 */
                 'accent-pressed': string;
-                /** Error icons, such as in Alert and EmptyState. */
+                /** Error icons, such as in Alert and EmptyState. 6.03:1 on white. */
                 danger: string;
                 /** 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. */
                 ai: string;
+                /** Serious-warning icons, matching color.text.serious. 6.04:1 on white. */
+                serious: string;
             };
             financial: {
                 /**
                  * Color for positive monetary values, credits, income
                  *
-                 * @deprecated Moved to the component tier as component.transaction.credit (decision 0031 §6). Removed in 3.0.
+                 * @deprecated Moved to the component tier as component.transaction.credit (decision 0031 §6). Removed in 3.0. Use `semantic.color.data.positive`.
                  */
                 credit: string;
                 /**
                  * Hover state for credit-colored interactive elements
                  *
-                 * @deprecated Moved to the component tier as component.transaction.credit-hover (decision 0031 §6). Removed in 3.0.
+                 * @deprecated Moved to the component tier as component.transaction.credit-hover (decision 0031 §6). Removed in 3.0. Use `semantic.color.data.positive`.
                  */
                 'credit-hover': string;
                 /**
                  * Color for negative monetary values, debits, expenses
                  *
-                 * @deprecated Moved to the component tier as component.transaction.debit (decision 0031 §6). Removed in 3.0.
+                 * @deprecated Moved to the component tier as component.transaction.debit (decision 0031 §6). Removed in 3.0. Use `semantic.color.data.negative`.
                  */
                 debit: string;
                 /**
                  * Hover state for debit-colored interactive elements
                  *
-                 * @deprecated Moved to the component tier as component.transaction.debit-hover (decision 0031 §6). Removed in 3.0.
+                 * @deprecated Moved to the component tier as component.transaction.debit-hover (decision 0031 §6). Removed in 3.0. Use `semantic.color.data.negative`.
                  */
                 'debit-hover': string;
                 /**
                  * Color for pending or processing financial transactions
                  *
-                 * @deprecated Moved to the component tier as component.transaction.pending (decision 0031 §6). Removed in 3.0.
+                 * @deprecated Moved to the component tier as component.transaction.pending (decision 0031 §6). Removed in 3.0. Use `semantic.color.text.muted`.
                  */
                 pending: string;
                 /**
                  * Neutral color for informational monetary amounts
                  *
-                 * @deprecated Moved to the component tier as component.transaction.neutral (decision 0031 §6). Removed in 3.0.
+                 * @deprecated Moved to the component tier as component.transaction.neutral (decision 0031 §6). Removed in 3.0. Use `semantic.color.text.muted`.
                  */
                 neutral: string;
             };
             category: {
-                /** Blue category color for general/miscellaneous */
+                /**
+                 * Blue category color for general/miscellaneous
+                 *
+                 * @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`.
+                 */
                 blue: string;
-                /** Strong step of the blue category: the fill of a filled CategoryLabel, with white text (decision 0029). */
+                /**
+                 * Strong step of the blue category: the fill of a filled CategoryLabel, with white text (decision 0029).
+                 *
+                 * @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`.
+                 */
                 'blue-strong': string;
                 /**
                  * Strong step of the blue category: the fill of a filled CategoryLabel, with white text (decision 0029).
                  *
-                 * @deprecated "emphasis" means near-black, so use semantic.color.category.blue-strong (decision 0029). Removed in 3.0.
+                 * @deprecated "emphasis" means near-black, so use semantic.color.category.blue-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.periwinkle-strong`.
                  */
                 'blue-emphasis': string;
                 /**
                  * Subtle blue background
                  *
-                 * @deprecated Renamed to semantic.color.category.blue-muted by the semantic grammar (decision 0031). Removed in 3.0.
+                 * @deprecated Renamed to semantic.color.category.blue-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.periwinkle-muted`.
                  */
                 'blue-subtle': string;
-                /** Purple category color for entertainment */
+                /**
+                 * Purple category color for entertainment
+                 *
+                 * @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`.
+                 */
                 purple: string;
-                /** Strong step of the purple category: the fill of a filled CategoryLabel, with white text (decision 0029). */
+                /**
+                 * Strong step of the purple category: the fill of a filled CategoryLabel, with white text (decision 0029).
+                 *
+                 * @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`.
+                 */
                 'purple-strong': string;
                 /**
                  * Strong step of the purple category: the fill of a filled CategoryLabel, with white text (decision 0029).
                  *
-                 * @deprecated "emphasis" means near-black, so use semantic.color.category.purple-strong (decision 0029). Removed in 3.0.
+                 * @deprecated "emphasis" means near-black, so use semantic.color.category.purple-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.magenta-strong`.
                  */
                 'purple-emphasis': string;
                 /**
                  * Subtle purple background
                  *
-                 * @deprecated Renamed to semantic.color.category.purple-muted by the semantic grammar (decision 0031). Removed in 3.0.
+                 * @deprecated Renamed to semantic.color.category.purple-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.magenta-muted`.
                  */
                 'purple-subtle': string;
-                /** Pink category color for health/wellness */
+                /**
+                 * Pink category color for health/wellness
+                 *
+                 * @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`.
+                 */
                 pink: string;
-                /** Strong step of the pink category: the fill of a filled CategoryLabel, with white text (decision 0029). */
+                /**
+                 * Strong step of the pink category: the fill of a filled CategoryLabel, with white text (decision 0029).
+                 *
+                 * @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`.
+                 */
                 'pink-strong': string;
                 /**
                  * Strong step of the pink category: the fill of a filled CategoryLabel, with white text (decision 0029).
                  *
-                 * @deprecated "emphasis" means near-black, so use semantic.color.category.pink-strong (decision 0029). Removed in 3.0.
+                 * @deprecated "emphasis" means near-black, so use semantic.color.category.pink-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.rose-strong`.
                  */
                 'pink-emphasis': string;
                 /**
                  * Subtle pink background
                  *
-                 * @deprecated Renamed to semantic.color.category.pink-muted by the semantic grammar (decision 0031). Removed in 3.0.
+                 * @deprecated Renamed to semantic.color.category.pink-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.rose-muted`.
                  */
                 'pink-subtle': string;
-                /** Yellow category color for utilities */
+                /**
+                 * Yellow category color for utilities
+                 *
+                 * @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`.
+                 */
                 yellow: string;
-                /** Strong step of the yellow category: the fill of a filled CategoryLabel, with white text (decision 0029). */
+                /**
+                 * Strong step of the yellow category: the fill of a filled CategoryLabel, with white text (decision 0029).
+                 *
+                 * @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`.
+                 */
                 'yellow-strong': string;
                 /**
                  * Strong step of the yellow category: the fill of a filled CategoryLabel, with white text (decision 0029).
                  *
-                 * @deprecated "emphasis" means near-black, so use semantic.color.category.yellow-strong (decision 0029). Removed in 3.0.
+                 * @deprecated "emphasis" means near-black, so use semantic.color.category.yellow-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.olive-strong`.
                  */
                 'yellow-emphasis': string;
                 /**
                  * Subtle yellow background
                  *
-                 * @deprecated Renamed to semantic.color.category.yellow-muted by the semantic grammar (decision 0031). Removed in 3.0.
+                 * @deprecated Renamed to semantic.color.category.yellow-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.olive-muted`.
                  */
                 'yellow-subtle': string;
-                /** Green category color for income */
+                /**
+                 * Green category color for income
+                 *
+                 * @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`.
+                 */
                 green: string;
-                /** Strong step of the green category: the fill of a filled CategoryLabel, with white text (decision 0029). */
+                /**
+                 * Strong step of the green category: the fill of a filled CategoryLabel, with white text (decision 0029).
+                 *
+                 * @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`.
+                 */
                 'green-strong': string;
                 /**
                  * Strong step of the green category: the fill of a filled CategoryLabel, with white text (decision 0029).
                  *
-                 * @deprecated "emphasis" means near-black, so use semantic.color.category.green-strong (decision 0029). Removed in 3.0.
+                 * @deprecated "emphasis" means near-black, so use semantic.color.category.green-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.olive-strong`.
                  */
                 'green-emphasis': string;
                 /**
                  * Subtle green background
                  *
-                 * @deprecated Renamed to semantic.color.category.green-muted by the semantic grammar (decision 0031). Removed in 3.0.
+                 * @deprecated Renamed to semantic.color.category.green-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.olive-muted`.
                  */
                 'green-subtle': string;
-                /** Red category color for expenses */
+                /**
+                 * Red category color for expenses
+                 *
+                 * @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`.
+                 */
                 red: string;
-                /** Strong step of the red category: the fill of a filled CategoryLabel, with white text (decision 0029). */
+                /**
+                 * Strong step of the red category: the fill of a filled CategoryLabel, with white text (decision 0029).
+                 *
+                 * @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`.
+                 */
                 'red-strong': string;
                 /**
                  * Strong step of the red category: the fill of a filled CategoryLabel, with white text (decision 0029).
                  *
-                 * @deprecated "emphasis" means near-black, so use semantic.color.category.red-strong (decision 0029). Removed in 3.0.
+                 * @deprecated "emphasis" means near-black, so use semantic.color.category.red-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.rose-strong`.
                  */
                 'red-emphasis': string;
                 /**
                  * Subtle red background
                  *
-                 * @deprecated Renamed to semantic.color.category.red-muted by the semantic grammar (decision 0031). Removed in 3.0.
+                 * @deprecated Renamed to semantic.color.category.red-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.rose-muted`.
                  */
                 'red-subtle': string;
-                /** Orange category color for food & dining */
+                /**
+                 * Orange category color for food & dining
+                 *
+                 * @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`.
+                 */
                 orange: string;
-                /** Strong step of the orange category: the fill of a filled CategoryLabel, with white text (decision 0029). */
+                /**
+                 * Strong step of the orange category: the fill of a filled CategoryLabel, with white text (decision 0029).
+                 *
+                 * @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`.
+                 */
                 'orange-strong': string;
                 /**
                  * Strong step of the orange category: the fill of a filled CategoryLabel, with white text (decision 0029).
                  *
-                 * @deprecated "emphasis" means near-black, so use semantic.color.category.orange-strong (decision 0029). Removed in 3.0.
+                 * @deprecated "emphasis" means near-black, so use semantic.color.category.orange-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.rose-strong`.
                  */
                 'orange-emphasis': string;
                 /**
                  * Subtle orange background
                  *
-                 * @deprecated Renamed to semantic.color.category.orange-muted by the semantic grammar (decision 0031). Removed in 3.0.
+                 * @deprecated Renamed to semantic.color.category.orange-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.rose-muted`.
                  */
                 'orange-subtle': string;
-                /** Gray category color for uncategorized */
+                /** Gray category (decision 0043: neutral, for uncategorised or "other"): the outline of an outlined CategoryLabel. 3.19:1 on white. */
                 gray: string;
-                /** Strong step of the gray category: the fill of a filled CategoryLabel, with white text (decision 0029). */
+                /** Strong step of the gray category: the fill of a filled CategoryLabel, with white text at 6.01:1. */
                 'gray-strong': string;
                 /**
                  * Strong step of the gray category: the fill of a filled CategoryLabel, with white text (decision 0029).
@@ -3326,38 +3464,126 @@ export type Tokens = {
                  * @deprecated Renamed to semantic.color.category.gray-muted by the semantic grammar (decision 0031). Removed in 3.0.
                  */
                 'gray-subtle': string;
-                /** Text and icons of an outlined or minimal blue CategoryLabel, on white or blue-muted. */
+                /**
+                 * Text and icons of an outlined or minimal blue CategoryLabel, on white or blue-muted.
+                 *
+                 * @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`.
+                 */
                 'blue-text': string;
-                /** Text and icons of an outlined or minimal purple CategoryLabel, on white or purple-muted. */
+                /**
+                 * Text and icons of an outlined or minimal purple CategoryLabel, on white or purple-muted.
+                 *
+                 * @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`.
+                 */
                 'purple-text': string;
-                /** Text and icons of an outlined or minimal pink CategoryLabel, on white or pink-muted. */
+                /**
+                 * Text and icons of an outlined or minimal pink CategoryLabel, on white or pink-muted.
+                 *
+                 * @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`.
+                 */
                 'pink-text': string;
-                /** Text and icons of an outlined or minimal yellow CategoryLabel, on white or yellow-muted. */
+                /**
+                 * Text and icons of an outlined or minimal yellow CategoryLabel, on white or yellow-muted.
+                 *
+                 * @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`.
+                 */
                 'yellow-text': string;
-                /** Text and icons of an outlined or minimal green CategoryLabel, on white or green-muted. */
+                /**
+                 * Text and icons of an outlined or minimal green CategoryLabel, on white or green-muted.
+                 *
+                 * @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`.
+                 */
                 'green-text': string;
-                /** Text and icons of an outlined or minimal red CategoryLabel, on white or red-muted. */
+                /**
+                 * Text and icons of an outlined or minimal red CategoryLabel, on white or red-muted.
+                 *
+                 * @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`.
+                 */
                 'red-text': string;
-                /** Text and icons of an outlined or minimal orange CategoryLabel, on white or orange-muted. */
+                /**
+                 * Text and icons of an outlined or minimal orange CategoryLabel, on white or orange-muted.
+                 *
+                 * @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`.
+                 */
                 'orange-text': string;
-                /** Text and icons of an outlined or minimal gray CategoryLabel, on white or gray-muted. */
+                /** Text and icons of an outlined or minimal gray CategoryLabel. 6.01:1 on white, 5.37:1 on gray-muted. */
                 'gray-text': string;
-                /** Light blue fill of a blue CategoryLabel, behind the blue-text colour. */
+                /**
+                 * Light blue fill of a blue CategoryLabel, behind the blue-text colour.
+                 *
+                 * @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`.
+                 */
                 'blue-muted': string;
-                /** Light purple fill of a purple CategoryLabel, behind the purple-text colour. */
+                /**
+                 * Light purple fill of a purple CategoryLabel, behind the purple-text colour.
+                 *
+                 * @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`.
+                 */
                 'purple-muted': string;
-                /** Light pink fill of a pink CategoryLabel, behind the pink-text colour. */
+                /**
+                 * Light pink fill of a pink CategoryLabel, behind the pink-text colour.
+                 *
+                 * @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`.
+                 */
                 'pink-muted': string;
-                /** Light yellow fill of a yellow CategoryLabel, behind the yellow-text colour. */
+                /**
+                 * Light yellow fill of a yellow CategoryLabel, behind the yellow-text colour.
+                 *
+                 * @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`.
+                 */
                 'yellow-muted': string;
-                /** Light green fill of a green CategoryLabel, behind the green-text colour. */
+                /**
+                 * Light green fill of a green CategoryLabel, behind the green-text colour.
+                 *
+                 * @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`.
+                 */
                 'green-muted': string;
-                /** Light red fill of a red CategoryLabel, behind the red-text colour. */
+                /**
+                 * Light red fill of a red CategoryLabel, behind the red-text colour.
+                 *
+                 * @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`.
+                 */
                 'red-muted': string;
-                /** Light orange fill of a orange CategoryLabel, behind the orange-text colour. */
+                /**
+                 * Light orange fill of a orange CategoryLabel, behind the orange-text colour.
+                 *
+                 * @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`.
+                 */
                 'orange-muted': string;
-                /** Light gray fill of a gray CategoryLabel, behind the gray-text colour. */
+                /** Light gray fill of a minimal CategoryLabel, behind the gray-text colour. */
                 'gray-muted': string;
+                /** Olive category (decision 0043: no meaning): the outline of an outlined CategoryLabel. 3.18:1 on white. */
+                olive: string;
+                /** Strong step of the olive category: the fill of a filled CategoryLabel, with white text at 6.02:1. */
+                'olive-strong': string;
+                /** Text and icons of an outlined or minimal olive CategoryLabel. 6.02:1 on white, 5.39:1 on olive-muted. */
+                'olive-text': string;
+                /** Light olive fill of a minimal CategoryLabel, behind the olive-text colour. */
+                'olive-muted': string;
+                /** Periwinkle category (decision 0043: no meaning): the outline of an outlined CategoryLabel. 3.20:1 on white. */
+                periwinkle: string;
+                /** Strong step of the periwinkle category: the fill of a filled CategoryLabel, with white text at 6.00:1. */
+                'periwinkle-strong': string;
+                /** Text and icons of an outlined or minimal periwinkle CategoryLabel. 6.00:1 on white, 5.37:1 on periwinkle-muted. */
+                'periwinkle-text': string;
+                /** Light periwinkle fill of a minimal CategoryLabel, behind the periwinkle-text colour. */
+                'periwinkle-muted': string;
+                /** Rose category (decision 0043: no meaning): the outline of an outlined CategoryLabel. 3.20:1 on white. */
+                rose: string;
+                /** Strong step of the rose category: the fill of a filled CategoryLabel, with white text at 5.99:1. */
+                'rose-strong': string;
+                /** Text and icons of an outlined or minimal rose CategoryLabel. 5.99:1 on white, 5.33:1 on rose-muted. */
+                'rose-text': string;
+                /** Light rose fill of a minimal CategoryLabel, behind the rose-text colour. */
+                'rose-muted': string;
+                /** Magenta category (decision 0043: no meaning): the outline of an outlined CategoryLabel. 3.20:1 on white. */
+                magenta: string;
+                /** Strong step of the magenta category: the fill of a filled CategoryLabel, with white text at 6.02:1. */
+                'magenta-strong': string;
+                /** Text and icons of an outlined or minimal magenta CategoryLabel. 6.02:1 on white, 5.38:1 on magenta-muted. */
+                'magenta-text': string;
+                /** Light magenta fill of a minimal CategoryLabel, behind the magenta-text colour. */
+                'magenta-muted': string;
             };
             status: {
                 /**
@@ -3434,47 +3660,55 @@ export type Tokens = {
                 'scheduled-bg': string;
             };
             fill: {
-                /** Near-black fill for emphasis controls, such as the primary Button and IconButton. */
+                /** 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). */
                 emphasis: string;
-                /** Fill of a hovered emphasis control, such as the primary Button. */
+                /**
+                 * Fill of a hovered emphasis control, such as the primary Button.
+                 *
+                 * @deprecated Strong-fill states mix text.inverse into fill.emphasis at opacity.state.hover and opacity.state.pressed (decision 0048). Removed in 3.0.
+                 */
                 'emphasis-hover': string;
-                /** Fill of a pressed emphasis control, such as the primary Button. */
+                /**
+                 * Fill of a pressed emphasis control, such as the primary Button.
+                 *
+                 * @deprecated Strong-fill states mix text.inverse into fill.emphasis at opacity.state.hover and opacity.state.pressed (decision 0048). Removed in 3.0.
+                 */
                 'emphasis-pressed': string;
-                /** Light grey fill for quiet grouped content, such as the default Chip. */
+                /** Light grey fill for quiet grouped content, such as the default Chip. The resting fill step, so it shows on the page. */
                 muted: string;
                 /** Dark fill for inverse elements: a checked Checkbox, Modal and Sheet drag handles. */
                 inverse: string;
-                /** Blue fill for the accent Button and other deliberate highlights; see 0003. */
+                /** Blue fill for the accent Button and other deliberate highlights (0003), with text.inverse on it at 6.00:1. */
                 accent: string;
-                /** Light blue fill for selected items: a selected chip, tab or row; see 0016. */
+                /** Light blue fill for selected items: a selected chip, tab or row (0016). Accent text on it is 5.37:1. */
                 'accent-muted': string;
                 /** Fill of a hovered selected item, such as a selected filter chip. */
                 'accent-muted-hover': string;
                 /** Fill of a pressed selected item, such as a selected filter chip. */
                 'accent-muted-pressed': string;
-                /** Blue fill of a hovered accent control, such as the accent Button. */
+                /** Blue fill of a hovered accent control: fill.accent with text.inverse mixed in at opacity.state.hover (decision 0048). */
                 'accent-hover': string;
-                /** Blue fill of a pressed accent control, such as the accent Button. */
+                /** Blue fill of a pressed accent control: fill.accent with text.inverse mixed in at opacity.state.pressed (decision 0048). */
                 'accent-pressed': string;
-                /** Strong red fill for destructive actions, such as the danger Button. */
+                /** Strong red fill for destructive actions, such as the danger Button, with text.inverse on it at 6.03:1. */
                 danger: string;
-                /** Fill of a hovered destructive control, such as the danger Button. */
+                /** Fill of a hovered destructive control: fill.danger with text.inverse mixed in at opacity.state.hover (decision 0048). */
                 'danger-hover': string;
-                /** Fill of a pressed destructive control, such as the danger Button. */
+                /** Fill of a pressed destructive control: fill.danger with text.inverse mixed in at opacity.state.pressed (decision 0048). */
                 'danger-pressed': string;
-                /** Light red tint behind error messages, such as an error Alert. */
+                /** Light red tint behind error messages, such as an error Alert. Danger text on it is 5.39:1. */
                 'danger-muted': string;
-                /** Strong green fill for success states, such as a success indicator. */
+                /** Strong green fill for success states, such as a success indicator, with text.inverse on it at 5.99:1. */
                 success: string;
-                /** Light green tint behind success messages, such as a success Alert. */
+                /** Light green tint behind success messages, such as a success Alert. Success text on it is 5.34:1. */
                 'success-muted': string;
-                /** Strong orange fill for warning states, such as a warning indicator. */
+                /** Strong yellow fill for warning states, such as a warning indicator, with text.inverse on it at 6.01:1. */
                 warning: string;
-                /** Light orange tint behind warning messages, such as a warning Alert. */
+                /** Light yellow tint behind warning messages, such as a warning Alert. Warning text on it is 5.37:1. */
                 'warning-muted': string;
                 /** Fill of a disabled control, such as a disabled Button or Switch. */
                 disabled: string;
-                /** Fill of a neutral control at rest, such as the secondary Button. */
+                /** Fill of a neutral control at rest, such as the secondary Button (decision 0040). */
                 default: string;
                 /** Fill of a hovered neutral control, such as the secondary Button. */
                 'default-hover': string;
@@ -3488,6 +3722,62 @@ export type Tokens = {
                 'none-pressed': string;
                 /** Hover tint for a fill-less element on a dark background, such as a count on a dark tab. */
                 'inverse-none-hover': string;
+                /** Strong orange fill for serious-warning states, with text.inverse on it at 6.04:1. */
+                serious: string;
+                /** Light orange tint behind serious-warning messages. */
+                'serious-muted': string;
+                /** Light purple tint behind AI-generated content and agent proposals, always with the AI icon and a label (0043). */
+                'ai-muted': string;
+            };
+            /** 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. */
+            data: {
+                /** 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. */
+                positive: string;
+                /** 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. */
+                negative: string;
+                /** Category series, in order, with no meaning; group more than four coloured series into other, or label them directly. */
+                categorical: {
+                    /** Category series 1 (olive). 6.02:1 on white. */
+                    '1': string;
+                    /** Category series 2 (periwinkle). 3.20:1 on white. */
+                    '2': string;
+                    /** Category series 3 (rose). 3.20:1 on white. */
+                    '3': string;
+                    /** Category series 4 (magenta). 6.02:1 on white. */
+                    '4': string;
+                    /** The other or remaining series, always last and labelled. 3.19:1 on white. */
+                    other: string;
+                };
+                diverging: {
+                    /** A comparison with no good or bad, from olive through neutral grey to magenta. */
+                    balance: {
+                        /** Diverging step 1 of 5. The strongest olive end. 6.02:1 on white. */
+                        '1': string;
+                        /** Diverging step 2 of 5. The lighter olive side. 3.18:1 on white. */
+                        '2': string;
+                        /** Diverging step 3 of 5. The neutral centre: no difference. */
+                        '3': string;
+                        /** Diverging step 4 of 5. The lighter magenta side. 3.20:1 on white. */
+                        '4': string;
+                        /** Diverging step 5 of 5. The strongest magenta end. 6.02:1 on white. */
+                        '5': string;
+                    };
+                };
+                sequential: {
+                    /** Magnitude, from the lowest value (1) to the highest (5), in periwinkle. */
+                    periwinkle: {
+                        /** Sequential step 1 of 5. 1.12:1 on white. */
+                        '1': string;
+                        /** Sequential step 2 of 5. 1.37:1 on white. */
+                        '2': string;
+                        /** Sequential step 3 of 5. 3.20:1 on white. */
+                        '3': string;
+                        /** Sequential step 4 of 5. 4.37:1 on white. */
+                        '4': string;
+                        /** Sequential step 5 of 5. 15.91:1 on white. */
+                        '5': string;
+                    };
+                };
             };
         };
         typography: {
@@ -3538,7 +3828,7 @@ export type Tokens = {
             /**
              * Breadcrumb-sized text; not used today, as Breadcrumbs uses typography.caption.
              *
-             * @deprecated Moved to the component tier as component.breadcrumbs.font (decision 0031 §6). Removed in 3.0.
+             * @deprecated Moved to the component tier as component.breadcrumbs.font (decision 0031 §6). Removed in 3.0. Use `semantic.typography.caption`.
              */
             breadcrumb: string;
         };