@common-origin/design-system 2.16.0 → 2.18.0

package/dist/tokens.css

@@ -342,7 +342,7 @@
   --co-semantic-border-default: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-default); /** 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). */
   --co-semantic-border-subtle: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-subtle); /** 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). */
   --co-semantic-border-strong: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-strong); /** Hairline in near-black: a firm outline that must read as a boundary, such as a hovered or focused text input. 11.51:1 on white. */
-  --co-semantic-border-focus: var(--co-base-border-width-2) var(--co-base-border-style-solid) var(--co-semantic-color-border-strong); /** The standard focus ring: 2px solid near-black, used with border.focusOffset for visible keyboard focus (P2). Some components draw a blue ring instead, from border.width.thick and color.border.interactive (Box, ListItem, Slider, TransactionListItem). */
+  --co-semantic-border-focus: var(--co-base-border-width-2) var(--co-base-border-style-solid) var(--co-semantic-color-border-strong); /** The focus ring: 2px solid near-black, always used with border.focusOffset for visible keyboard focus (P2). Every component draws this ring; there is no blue focus ring (decision 0029). */
   --co-semantic-border-tooltip: var(--co-base-border-width-2) var(--co-base-border-style-dotted) var(--co-semantic-color-border-subtle); /** 2px dotted underline marking text that has a tooltip. */
   --co-semantic-border-width-thin: var(--co-base-border-width-1); /** 0.0625rem: default hairline borders and rings. */
   --co-semantic-border-width-thick: var(--co-base-border-width-2); /** 0.125rem: emphasised borders, focus outlines and selected states. */
@@ -419,7 +419,7 @@
   --co-semantic-spacing-layout-11xl: var(--co-base-spacing-24); /** 6rem: the largest layout gap (FeatureBlock at wide breakpoints). */
   --co-semantic-spacing-layout-auto: var(--co-base-spacing-auto); /** auto: lets the browser compute the space, such as margin: auto to centre or push an element. */
   --co-semantic-color-text-default: var(--co-base-color-neutral-900); /** Primary text: body copy, labels and headings. 15.43:1 on white, 14.63:1 on the page. */
-  --co-semantic-color-text-emphasis: var(--co-base-color-neutral-800); /** Slightly softer near-black text for emphasis without full weight. 11.51:1 on white. */
+  --co-semantic-color-text-emphasis: var(--co-base-color-neutral-1000); /** Emphasised text: one step darker than text.default, so it reads stronger (decision 0029). 17.65:1 on white. */
   --co-semantic-color-text-subdued: var(--co-base-color-neutral-700); /** Secondary text: helper text, metadata and supporting copy. 8.18:1 on white, 7.76:1 on the page. */
   --co-semantic-color-text-inverse: var(--co-base-color-neutral-000); /** 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. */
   --co-semantic-color-text-disabled: var(--co-base-color-neutral-500); /** 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. */
@@ -467,7 +467,7 @@
   --co-semantic-color-border-warning: var(--co-base-color-orange-900); /** Orange border for warning outlines, such as an outlined warning Alert. */
   --co-semantic-color-border-none: var(--co-base-color-transparent); /** 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). */
   --co-semantic-color-icon-default: var(--co-base-color-neutral-900); /** Default icon colour, matching text.default. 15.43:1 on white. */
-  --co-semantic-color-icon-emphasis: var(--co-base-color-neutral-800); /** Slightly softer near-black icon colour, matching text.emphasis. */
+  --co-semantic-color-icon-emphasis: var(--co-base-color-neutral-1000); /** Emphasised icons, matching text.emphasis: one step darker than icon.default (decision 0029). */
   --co-semantic-color-icon-subdued: var(--co-base-color-neutral-600); /** 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). */
   --co-semantic-color-icon-disabled: var(--co-base-color-neutral-500); /** 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. */
   --co-semantic-color-icon-inverse: var(--co-base-color-neutral-000); /** Icons on dark or coloured fills, matching text.inverse. */
@@ -484,28 +484,28 @@
   --co-semantic-color-financial-pending: var(--co-base-color-orange-600); /** Color for pending or processing financial transactions */
   --co-semantic-color-financial-neutral: var(--co-base-color-neutral-600); /** Neutral color for informational monetary amounts */
   --co-semantic-color-category-blue: var(--co-base-color-blue-700); /** Blue category color for general/miscellaneous */
-  --co-semantic-color-category-blue-emphasis: var(--co-base-color-blue-900); /** Emphasized blue for filled variants */
+  --co-semantic-color-category-blue-strong: var(--co-base-color-blue-900); /** Strong step of the blue category: the fill of a filled CategoryLabel, with white text (decision 0029). */
   --co-semantic-color-category-blue-subtle: var(--co-base-color-blue-100); /** Subtle blue background */
   --co-semantic-color-category-purple: var(--co-base-color-purple-700); /** Purple category color for entertainment */
-  --co-semantic-color-category-purple-emphasis: var(--co-base-color-purple-900); /** Emphasized purple for filled variants */
+  --co-semantic-color-category-purple-strong: var(--co-base-color-purple-900); /** Strong step of the purple category: the fill of a filled CategoryLabel, with white text (decision 0029). */
   --co-semantic-color-category-purple-subtle: var(--co-base-color-purple-100); /** Subtle purple background */
   --co-semantic-color-category-pink: var(--co-base-color-pink-700); /** Pink category color for health/wellness */
-  --co-semantic-color-category-pink-emphasis: var(--co-base-color-pink-900); /** Emphasized pink for filled variants */
+  --co-semantic-color-category-pink-strong: var(--co-base-color-pink-900); /** Strong step of the pink category: the fill of a filled CategoryLabel, with white text (decision 0029). */
   --co-semantic-color-category-pink-subtle: var(--co-base-color-pink-100); /** Subtle pink background */
   --co-semantic-color-category-yellow: var(--co-base-color-yellow-700); /** Yellow category color for utilities */
-  --co-semantic-color-category-yellow-emphasis: var(--co-base-color-yellow-900); /** Emphasized yellow for filled variants */
+  --co-semantic-color-category-yellow-strong: var(--co-base-color-yellow-900); /** Strong step of the yellow category: the fill of a filled CategoryLabel, with white text (decision 0029). */
   --co-semantic-color-category-yellow-subtle: var(--co-base-color-yellow-100); /** Subtle yellow background */
   --co-semantic-color-category-green: var(--co-base-color-green-700); /** Green category color for income */
-  --co-semantic-color-category-green-emphasis: var(--co-base-color-green-900); /** Emphasized green for filled variants */
+  --co-semantic-color-category-green-strong: var(--co-base-color-green-900); /** Strong step of the green category: the fill of a filled CategoryLabel, with white text (decision 0029). */
   --co-semantic-color-category-green-subtle: var(--co-base-color-green-100); /** Subtle green background */
   --co-semantic-color-category-red: var(--co-base-color-red-700); /** Red category color for expenses */
-  --co-semantic-color-category-red-emphasis: var(--co-base-color-red-900); /** Emphasized red for filled variants */
+  --co-semantic-color-category-red-strong: var(--co-base-color-red-900); /** Strong step of the red category: the fill of a filled CategoryLabel, with white text (decision 0029). */
   --co-semantic-color-category-red-subtle: var(--co-base-color-red-100); /** Subtle red background */
   --co-semantic-color-category-orange: var(--co-base-color-orange-700); /** Orange category color for food & dining */
-  --co-semantic-color-category-orange-emphasis: var(--co-base-color-orange-900); /** Emphasized orange for filled variants */
+  --co-semantic-color-category-orange-strong: var(--co-base-color-orange-900); /** Strong step of the orange category: the fill of a filled CategoryLabel, with white text (decision 0029). */
   --co-semantic-color-category-orange-subtle: var(--co-base-color-orange-100); /** Subtle orange background */
   --co-semantic-color-category-gray: var(--co-base-color-neutral-700); /** Gray category color for uncategorized */
-  --co-semantic-color-category-gray-emphasis: var(--co-base-color-neutral-900); /** Emphasized gray for filled variants */
+  --co-semantic-color-category-gray-strong: var(--co-base-color-neutral-900); /** Strong step of the gray category: the fill of a filled CategoryLabel, with white text (decision 0029). */
   --co-semantic-color-category-gray-subtle: var(--co-base-color-neutral-200); /** Subtle gray background */
   --co-semantic-color-category-blue-text: var(--co-base-color-blue-900); /** Blue category text and icon on white or blue-subtle (outlined and minimal labels), at least 4.5:1. Decision on #115. */
   --co-semantic-color-category-purple-text: var(--co-base-color-purple-900); /** Purple category text and icon on white or purple-subtle (outlined and minimal labels), at least 4.5:1. Decision on #115. */
@@ -726,6 +726,14 @@
   --co-component-list-item-expanded-indent-compact: var(--co-semantic-size-dimension-12); /** Left indent of expanded content in compact rows, aligning it with the label (48px). */
   --co-component-list-item-expanded-indent-comfortable: var(--co-semantic-size-dimension-15); /** Left indent of expanded content in comfortable rows (60px). */
   --co-component-transaction-list-item-min-height: var(--co-semantic-size-dimension-18); /** Minimum row height (72px). */
+  --co-semantic-color-category-blue-emphasis: var(--co-semantic-color-category-blue-strong); /** Deprecated (decision 0029): "emphasis" means near-black, so use semantic.color.category.blue-strong. Removed in 3.0. */
+  --co-semantic-color-category-purple-emphasis: var(--co-semantic-color-category-purple-strong); /** Deprecated (decision 0029): "emphasis" means near-black, so use semantic.color.category.purple-strong. Removed in 3.0. */
+  --co-semantic-color-category-pink-emphasis: var(--co-semantic-color-category-pink-strong); /** Deprecated (decision 0029): "emphasis" means near-black, so use semantic.color.category.pink-strong. Removed in 3.0. */
+  --co-semantic-color-category-yellow-emphasis: var(--co-semantic-color-category-yellow-strong); /** Deprecated (decision 0029): "emphasis" means near-black, so use semantic.color.category.yellow-strong. Removed in 3.0. */
+  --co-semantic-color-category-green-emphasis: var(--co-semantic-color-category-green-strong); /** Deprecated (decision 0029): "emphasis" means near-black, so use semantic.color.category.green-strong. Removed in 3.0. */
+  --co-semantic-color-category-red-emphasis: var(--co-semantic-color-category-red-strong); /** Deprecated (decision 0029): "emphasis" means near-black, so use semantic.color.category.red-strong. Removed in 3.0. */
+  --co-semantic-color-category-orange-emphasis: var(--co-semantic-color-category-orange-strong); /** Deprecated (decision 0029): "emphasis" means near-black, so use semantic.color.category.orange-strong. Removed in 3.0. */
+  --co-semantic-color-category-gray-emphasis: var(--co-semantic-color-category-gray-strong); /** Deprecated (decision 0029): "emphasis" means near-black, so use semantic.color.category.gray-strong. Removed in 3.0. */
   --co-semantic-typography-display: var(--co-semantic-font-weight-bold) var(--co-base-font-size-10)/var(--co-base-line-height-10) var(--co-base-font-family-heading); /** Display text: 5rem, weight 700. The largest heading, for hero titles. */
   --co-semantic-typography-h1: var(--co-semantic-font-weight-bold) var(--co-base-font-size-9)/var(--co-base-line-height-9) var(--co-base-font-family-heading); /** Heading 1: 3rem, weight 700. The page title. */
   --co-semantic-typography-h2: var(--co-semantic-font-weight-bold) var(--co-base-font-size-8)/var(--co-base-line-height-8) var(--co-base-font-family-heading); /** Heading 2: 2rem, weight 700. Major sections. */

package/dist/types/tokens.d.ts

@@ -1106,27 +1106,35 @@ export declare const tokens: {
             };
             category: {
                 blue: string;
+                "blue-strong": string;
                 "blue-emphasis": string;
                 "blue-subtle": string;
                 purple: string;
+                "purple-strong": string;
                 "purple-emphasis": string;
                 "purple-subtle": string;
                 pink: string;
+                "pink-strong": string;
                 "pink-emphasis": string;
                 "pink-subtle": string;
                 yellow: string;
+                "yellow-strong": string;
                 "yellow-emphasis": string;
                 "yellow-subtle": string;
                 green: string;
+                "green-strong": string;
                 "green-emphasis": string;
                 "green-subtle": string;
                 red: string;
+                "red-strong": string;
                 "red-emphasis": string;
                 "red-subtle": string;
                 orange: string;
+                "orange-strong": string;
                 "orange-emphasis": string;
                 "orange-subtle": string;
                 gray: string;
+                "gray-strong": string;
                 "gray-emphasis": string;
                 "gray-subtle": string;
                 "blue-text": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@common-origin/design-system",
-  "version": "2.16.0",
+  "version": "2.18.0",
   "description": "Common Origin Design System - Framework-agnostic atomic design components with comprehensive WCAG 2.2 AA testing",
   "private": false,
   "main": "dist/index.js",