From 289157f8632f0e9791dcc80f7d2a8ff13a1b635c Mon Sep 17 00:00:00 2001 From: Zohar Manor-Abel Date: Thu, 23 Jul 2026 14:11:18 +0100 Subject: [PATCH 1/2] Updated docs theme colours and add reference to highlight and tertiary --- .storybook/storybook.css | 104 ++++++++- .../foundation/1.1. theme-colours.mdx | 216 +++++++++++++++--- 2 files changed, 286 insertions(+), 34 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 3c2f3c54..c995ee29 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -410,7 +410,7 @@ pre .language-tsx:not(.MuiTypography-root) { .ds-intent-grid { display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @@ -575,6 +575,28 @@ section.ds-mode-panel section { background: var(--ds-on-tertiary-solid); } +.ds-bg-highlight-main { + background: var(--ds-highlight); +} +.ds-bg-highlight-dark { + background: var(--ds-highlight-emphasis); +} +.ds-bg-highlight-light { + background: var(--ds-highlight-accent); +} +.ds-bg-highlight-container { + background: var(--ds-highlight-container); +} +.ds-bg-highlight-on-container { + background: var(--ds-on-highlight-container); +} +.ds-bg-highlight-solid { + background: var(--ds-highlight-solid); +} +.ds-bg-highlight-on-solid { + background: var(--ds-on-highlight-solid); +} + .ds-bg-brand-main { background: var(--ds-brand); } @@ -694,6 +716,36 @@ section.ds-mode-panel section { background: var(--ds-on-info-solid); } +/* Contrast text (onPrimary, onDanger, etc.) shown as its own swatch */ + +.ds-bg-on-primary { + background: var(--ds-on-primary); +} +.ds-bg-on-secondary { + background: var(--ds-on-secondary); +} +.ds-bg-on-tertiary { + background: var(--ds-on-tertiary); +} +.ds-bg-on-brand { + background: var(--ds-on-brand); +} +.ds-bg-on-danger { + background: var(--ds-on-danger); +} +.ds-bg-on-warning { + background: var(--ds-on-warning); +} +.ds-bg-on-success { + background: var(--ds-on-success); +} +.ds-bg-on-info { + background: var(--ds-on-info); +} +.ds-bg-on-highlight { + background: var(--ds-on-highlight); +} + /* Foregrounds */ .ds-fg-primary-contrast, @@ -703,7 +755,8 @@ section.ds-mode-panel section { .ds-fg-danger-contrast, .ds-fg-warning-contrast, .ds-fg-success-contrast, -.ds-fg-info-contrast { +.ds-fg-info-contrast, +.ds-fg-highlight-contrast { color: var(--ds-on-solid); } @@ -739,6 +792,40 @@ section.ds-mode-panel section { color: var(--ds-on-info); } +.ds-fg-highlight-contrast { + color: var(--ds-on-highlight); +} + +/* Paired with the on-X backgrounds above so contrastText swatches stay legible */ + +.ds-fg-primary-main { + color: var(--ds-primary); +} +.ds-fg-secondary-main { + color: var(--ds-secondary); +} +.ds-fg-tertiary-main { + color: var(--ds-tertiary); +} +.ds-fg-brand-main { + color: var(--ds-brand); +} +.ds-fg-danger-main { + color: var(--ds-danger); +} +.ds-fg-warning-main { + color: var(--ds-warning); +} +.ds-fg-success-main { + color: var(--ds-success); +} +.ds-fg-info-main { + color: var(--ds-info); +} +.ds-fg-highlight-main { + color: var(--ds-highlight); +} + .ds-fg-primary-container { color: var(--ds-primary-container); } @@ -796,6 +883,19 @@ section.ds-mode-panel section { color: var(--ds-on-tertiary-fixed); } +.ds-fg-highlight-container { + color: var(--ds-highlight-container); +} +.ds-fg-highlight-on-container { + color: var(--ds-on-highlight-container); +} +.ds-fg-highlight-solid { + color: var(--ds-highlight-solid); +} +.ds-fg-highlight-on-solid { + color: var(--ds-on-highlight-solid); +} + .ds-fg-brand-container { color: var(--ds-brand-container); } diff --git a/src/storybook/foundation/1.1. theme-colours.mdx b/src/storybook/foundation/1.1. theme-colours.mdx index ee482831..e653cda6 100644 --- a/src/storybook/foundation/1.1. theme-colours.mdx +++ b/src/storybook/foundation/1.1. theme-colours.mdx @@ -21,16 +21,18 @@ This page is a token reference. If you're deciding which colour role to use, rea

Intent colours

+

+ Exposed as MUI palette roles (e.g. theme.palette.primary.main + ). +

{[ ["primary", "Primary", false], ["secondary", "Secondary", false], - ["tertiary", "Tertiary", false], - ["brand", "Brand", true], + ["info", "Info", false], ["danger", "Danger", false], ["warning", "Warning", false], ["success", "Success", false], - ["info", "Info", false], ].map(([key, label, hasFixed]) => (
@@ -38,6 +40,79 @@ This page is a token reference. If you're deciding which colour role to use, rea {label} main
+
+ {label} Contrast Text + contrastText +
+
+ {label} Emphasis + dark +
+
+ {label} Accent + light +
+
+ {label} Container + container +
+
+ {label} On Container + onContainer +
+
+ {label} Solid + solid +
+
+ {label} On Solid + onSolid +
+
+ {hasFixed && ( +
+
+ {label} Fixed + fixed +
+
+ {label} Fixed Dim + fixedDim +
+
+ {label} On Fixed + onFixed +
+
+ )} +
+ ))} + + +
+
+

Core brand colours

+

+ Brand is exposed as a MUI palette role. Tertiary{" "} + and Highlight are available as token families via CSS + variables, but are not currently exposed as MUI palette roles. +

+
+ {[ + ["brand", "Brand", true], + ["tertiary", "Tertiary", false], + ["highlight", "Highlight", false], + ].map(([key, label, hasFixed]) => ( +
+
+
+ {label} + main +
+
+ {label} Contrast Text + contrastText +
{label} Emphasis dark @@ -90,60 +165,60 @@ This page is a token reference. If you're deciding which colour role to use, rea
Background - background + background.default
Surface - surface + background.paper
Surface Container - surface.container + surface.subtle
Surface Container High - surface.containerHigh + surface.strong
Surface Disabled - surface.disabled + action.disabledBackground
On Surface - onSurface + text.primary
On Surface Variant - onSurfaceVariant + text.secondary
On Surface Subtle - onSurfaceSubtle + text.tertiary
On Surface Muted - onSurfaceMuted + text.muted
Action Disabled - action.disabled + --ds-action-disabled
Placeholder - placeholder + text.placeholder
Placeholder Focus - placeholder.focus + text.placeholderFocus
On Solid - onSolid + text.onSolid
@@ -170,16 +245,18 @@ This page is a token reference. If you're deciding which colour role to use, rea

Intent colours

+

+ Exposed as MUI palette roles (e.g. theme.palette.primary.main + ). +

{[ ["primary", "Primary", false], ["secondary", "Secondary", false], - ["tertiary", "Tertiary", false], - ["brand", "Brand", true], + ["info", "Info", false], ["danger", "Danger", false], ["warning", "Warning", false], ["success", "Success", false], - ["info", "Info", false], ].map(([key, label, hasFixed]) => (
@@ -187,6 +264,81 @@ This page is a token reference. If you're deciding which colour role to use, rea {label} main
+
+ {label} Contrast Text + contrastText +
+
+ {label} Emphasis + dark +
+
+ {label} Accent + light +
+
+ {label} Container + container +
+
+ {label} On Container + onContainer +
+
+ {label} Solid + solid +
+
+ {label} On Solid + onSolid +
+
+ {hasFixed && ( +
+
+ {label} Fixed + fixed +
+ +
+ {label} Fixed Dim + fixedDim +
+ +
+ {label} On Fixed + onFixed +
+
+ )} +
+ ))} + +
+
+
+

Core brand colours

+

+ Brand is exposed as a MUI palette role. Tertiary{" "} + and Highlight are available as token families via CSS + variables, but are not currently exposed as MUI palette roles. +

+
+ {[ + ["brand", "Brand", true], + ["tertiary", "Tertiary", false], + ["highlight", "Highlight", false], + ].map(([key, label, hasFixed]) => ( +
+
+
+ {label} + main +
+
+ {label} Contrast Text + contrastText +
{label} Emphasis dark @@ -241,60 +393,60 @@ This page is a token reference. If you're deciding which colour role to use, rea
Background - background + background.default
Surface - surface + background.paper
Surface Container - surface.container + surface.subtle
Surface Container High - surface.containerHigh + surface.strong
Surface Disabled - surface.disabled + action.disabledBackground
On Surface - onSurface + text.primary
On Surface Variant - onSurfaceVariant + text.secondary
On Surface Subtle - onSurfaceSubtle + text.tertiary
On Surface Muted - onSurfaceMuted + text.muted
Action Disabled - action.disabled + --ds-action-disabled
Placeholder - placeholder + text.placeholder
Placeholder Focus - placeholder.focus + text.placeholderFocus
On Solid - onSolid + text.onSolid
From b746534ba18c649bf58547f05d3984bd545df93e Mon Sep 17 00:00:00 2001 From: Zohar Manor-Abel Date: Thu, 13 Aug 2026 17:33:43 +0100 Subject: [PATCH 2/2] Rename `--ds-action-disabled` to `--ds-control-disabled` and fix disabled-state docs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - `--ds-action-disabled` was only used for disabled Checkbox/Radio icons, so rename it to `--ds-control-disabled` to better reflect its scope. - Document `--ds-on-surface-disabled` as backing both `text.disabled` and `action.disabled` - Document `--ds-surface-disabled` as `action.disabledBackground` - Fix the incorrect “On Surface Disabled” swatch - Show actual MUI palette paths on intent/brand swatches (for example, `primary.main` and `error.main`) - Rename “{role} Contrast Text” to “On {role}” for consistency --- .storybook/storybook.css | 8 +- src/storybook/PracticalGuidance.mdx | 16 +- src/storybook/foundation/1. colour.mdx | 14 +- .../foundation/1.1. theme-colours.mdx | 152 +++++++++--------- src/styles/diamondDS/DiamondDSTokens.css | 4 +- src/themes/DiamondDSTheme.test.ts | 6 +- src/themes/DiamondDSTheme.ts | 4 +- 7 files changed, 104 insertions(+), 100 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index c995ee29..8315f7ed 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -1030,8 +1030,12 @@ section.ds-mode-panel section { background: var(--ds-on-surface-muted); } -.ds-bg-action-disabled { - background: var(--ds-action-disabled); +.ds-bg-on-surface-disabled { + background: var(--ds-on-surface-disabled); +} + +.ds-bg-control-disabled { + background: var(--ds-control-disabled); } .ds-bg-placeholder { diff --git a/src/storybook/PracticalGuidance.mdx b/src/storybook/PracticalGuidance.mdx index ff1230b1..285cf968 100644 --- a/src/storybook/PracticalGuidance.mdx +++ b/src/storybook/PracticalGuidance.mdx @@ -399,7 +399,7 @@ They should be the default choice for layout, surfaces, borders, text, and dense --ds-surface-disabled - surface.disabled + action.disabledBackground Disabled surface treatment Disabled filled controls and inactive regions @@ -429,20 +429,20 @@ They should be the default choice for layout, surfaces, borders, text, and dense --ds-on-surface-disabled - text.disabled + text.disabled / action.disabled Disabled foreground colour - Disabled text and icons + Disabled text, icons, and interactive controls (buttons, tabs, inputs) - --ds-action-disabled + --ds-control-disabled - action.disabled + Checkbox / Radio (Mui-disabled) - Disabled interactive colour - Disabled buttons, controls, and actions + Disabled control icon colour + Disabled checkbox and radio icons @@ -539,7 +539,7 @@ Prefer layered surfaces and borders over heavy shadows. --ds-surface-disabled - surface.disabled + action.disabledBackground Disabled surface treatment diff --git a/src/storybook/foundation/1. colour.mdx b/src/storybook/foundation/1. colour.mdx index f2644e68..0969dd4e 100644 --- a/src/storybook/foundation/1. colour.mdx +++ b/src/storybook/foundation/1. colour.mdx @@ -928,7 +928,7 @@ Neutral tokens create the structure of the interface. They should be the default --ds-surface-disabled - surface.disabled + action.disabledBackground Disabled surface treatment Disabled filled controls and inactive regions @@ -958,20 +958,20 @@ Neutral tokens create the structure of the interface. They should be the default --ds-on-surface-disabled - text.disabled + text.disabled / action.disabled Disabled foreground colour - Disabled text and icons + Disabled text, icons, and interactive controls (buttons, tabs, inputs) - --ds-action-disabled + --ds-control-disabled - action.disabled + Checkbox / Radio (Mui-disabled) - Disabled interactive colour - Disabled buttons, controls, and actions + Disabled control icon colour + Disabled checkbox and radio icons diff --git a/src/storybook/foundation/1.1. theme-colours.mdx b/src/storybook/foundation/1.1. theme-colours.mdx index e653cda6..58facf6f 100644 --- a/src/storybook/foundation/1.1. theme-colours.mdx +++ b/src/storybook/foundation/1.1. theme-colours.mdx @@ -27,61 +27,61 @@ This page is a token reference. If you're deciding which colour role to use, rea

{[ - ["primary", "Primary", false], - ["secondary", "Secondary", false], - ["info", "Info", false], - ["danger", "Danger", false], - ["warning", "Warning", false], - ["success", "Success", false], - ].map(([key, label, hasFixed]) => ( + ["primary", "Primary", false, "primary"], + ["secondary", "Secondary", false, "secondary"], + ["info", "Info", false, "info"], + ["danger", "Danger", false, "error"], + ["warning", "Warning", false, "warning"], + ["success", "Success", false, "success"], + ].map(([key, label, hasFixed, muiRole]) => (
{label} - main + {muiRole ? `${muiRole}.main` : "main"}
- {label} Contrast Text - contrastText + On {label} + {muiRole ? `${muiRole}.contrastText` : "contrastText"}
{label} Emphasis - dark + {muiRole ? `${muiRole}.dark` : "dark"}
{label} Accent - light + {muiRole ? `${muiRole}.light` : "light"}
{label} Container - container + {muiRole ? `${muiRole}.container` : "container"}
{label} On Container - onContainer + {muiRole ? `${muiRole}.onContainer` : "onContainer"}
{label} Solid - solid + {muiRole ? `${muiRole}.solid` : "solid"}
{label} On Solid - onSolid + {muiRole ? `${muiRole}.onSolid` : "onSolid"}
{hasFixed && (
{label} Fixed - fixed + {muiRole ? `${muiRole}.fixed` : "fixed"}
{label} Fixed Dim - fixedDim + {muiRole ? `${muiRole}.fixedDim` : "fixedDim"}
{label} On Fixed - onFixed + {muiRole ? `${muiRole}.onFixed` : "onFixed"}
)} @@ -99,58 +99,58 @@ This page is a token reference. If you're deciding which colour role to use, rea

{[ - ["brand", "Brand", true], - ["tertiary", "Tertiary", false], - ["highlight", "Highlight", false], - ].map(([key, label, hasFixed]) => ( + ["brand", "Brand", true, "brand"], + ["tertiary", "Tertiary", false, null], + ["highlight", "Highlight", false, null], + ].map(([key, label, hasFixed, muiRole]) => (
{label} - main + {muiRole ? `${muiRole}.main` : "main"}
- {label} Contrast Text - contrastText + On {label} + {muiRole ? `${muiRole}.contrastText` : "contrastText"}
{label} Emphasis - dark + {muiRole ? `${muiRole}.dark` : "dark"}
{label} Accent - light + {muiRole ? `${muiRole}.light` : "light"}
{label} Container - container + {muiRole ? `${muiRole}.container` : "container"}
{label} On Container - onContainer + {muiRole ? `${muiRole}.onContainer` : "onContainer"}
{label} Solid - solid + {muiRole ? `${muiRole}.solid` : "solid"}
{label} On Solid - onSolid + {muiRole ? `${muiRole}.onSolid` : "onSolid"}
{hasFixed && (
{label} Fixed - fixed + {muiRole ? `${muiRole}.fixed` : "fixed"}
{label} Fixed Dim - fixedDim + {muiRole ? `${muiRole}.fixedDim` : "fixedDim"}
{label} On Fixed - onFixed + {muiRole ? `${muiRole}.onFixed` : "onFixed"}
)} @@ -201,9 +201,9 @@ This page is a token reference. If you're deciding which colour role to use, rea On Surface Muted text.muted
-
- Action Disabled - --ds-action-disabled +
+ On Surface Disabled + text.disabled / action.disabled
@@ -251,63 +251,63 @@ This page is a token reference. If you're deciding which colour role to use, rea

{[ - ["primary", "Primary", false], - ["secondary", "Secondary", false], - ["info", "Info", false], - ["danger", "Danger", false], - ["warning", "Warning", false], - ["success", "Success", false], - ].map(([key, label, hasFixed]) => ( + ["primary", "Primary", false, "primary"], + ["secondary", "Secondary", false, "secondary"], + ["info", "Info", false, "info"], + ["danger", "Danger", false, "error"], + ["warning", "Warning", false, "warning"], + ["success", "Success", false, "success"], + ].map(([key, label, hasFixed, muiRole]) => (
{label} - main + {muiRole ? `${muiRole}.main` : "main"}
- {label} Contrast Text - contrastText + On {label} + {muiRole ? `${muiRole}.contrastText` : "contrastText"}
{label} Emphasis - dark + {muiRole ? `${muiRole}.dark` : "dark"}
{label} Accent - light + {muiRole ? `${muiRole}.light` : "light"}
{label} Container - container + {muiRole ? `${muiRole}.container` : "container"}
{label} On Container - onContainer + {muiRole ? `${muiRole}.onContainer` : "onContainer"}
{label} Solid - solid + {muiRole ? `${muiRole}.solid` : "solid"}
{label} On Solid - onSolid + {muiRole ? `${muiRole}.onSolid` : "onSolid"}
{hasFixed && (
{label} Fixed - fixed + {muiRole ? `${muiRole}.fixed` : "fixed"}
{label} Fixed Dim - fixedDim + {muiRole ? `${muiRole}.fixedDim` : "fixedDim"}
{label} On Fixed - onFixed + {muiRole ? `${muiRole}.onFixed` : "onFixed"}
)} @@ -325,60 +325,60 @@ This page is a token reference. If you're deciding which colour role to use, rea

{[ - ["brand", "Brand", true], - ["tertiary", "Tertiary", false], - ["highlight", "Highlight", false], - ].map(([key, label, hasFixed]) => ( + ["brand", "Brand", true, "brand"], + ["tertiary", "Tertiary", false, null], + ["highlight", "Highlight", false, null], + ].map(([key, label, hasFixed, muiRole]) => (
{label} - main + {muiRole ? `${muiRole}.main` : "main"}
- {label} Contrast Text - contrastText + On {label} + {muiRole ? `${muiRole}.contrastText` : "contrastText"}
{label} Emphasis - dark + {muiRole ? `${muiRole}.dark` : "dark"}
{label} Accent - light + {muiRole ? `${muiRole}.light` : "light"}
{label} Container - container + {muiRole ? `${muiRole}.container` : "container"}
{label} On Container - onContainer + {muiRole ? `${muiRole}.onContainer` : "onContainer"}
{label} Solid - solid + {muiRole ? `${muiRole}.solid` : "solid"}
{label} On Solid - onSolid + {muiRole ? `${muiRole}.onSolid` : "onSolid"}
{hasFixed && (
{label} Fixed - fixed + {muiRole ? `${muiRole}.fixed` : "fixed"}
{label} Fixed Dim - fixedDim + {muiRole ? `${muiRole}.fixedDim` : "fixedDim"}
{label} On Fixed - onFixed + {muiRole ? `${muiRole}.onFixed` : "onFixed"}
)} @@ -429,9 +429,9 @@ This page is a token reference. If you're deciding which colour role to use, rea On Surface Muted text.muted
-
- Action Disabled - --ds-action-disabled +
+ On Surface Disabled + text.disabled / action.disabled
diff --git a/src/styles/diamondDS/DiamondDSTokens.css b/src/styles/diamondDS/DiamondDSTokens.css index cd16fd10..d4b5983b 100644 --- a/src/styles/diamondDS/DiamondDSTokens.css +++ b/src/styles/diamondDS/DiamondDSTokens.css @@ -49,7 +49,7 @@ --ds-on-surface-subtle: #6c7484; --ds-on-surface-muted: #8a90a0; --ds-on-surface-disabled: rgba(26, 28, 35, 0.36); - --ds-action-disabled: rgba(26, 28, 35, 0.3); + --ds-control-disabled: rgba(26, 28, 35, 0.3); --ds-on-solid: #ffffff; --ds-on-surface-channel: 26 28 35; @@ -291,7 +291,7 @@ --ds-on-surface-subtle: #979eae; --ds-on-surface-muted: #7c8394; --ds-on-surface-disabled: rgba(232, 234, 240, 0.36); - --ds-action-disabled: rgba(232, 234, 240, 0.3); + --ds-control-disabled: rgba(232, 234, 240, 0.3); --ds-on-solid: #ffffff; --ds-on-surface-channel: 232 234 240; diff --git a/src/themes/DiamondDSTheme.test.ts b/src/themes/DiamondDSTheme.test.ts index 3f61072c..99754eb5 100644 --- a/src/themes/DiamondDSTheme.test.ts +++ b/src/themes/DiamondDSTheme.test.ts @@ -980,7 +980,7 @@ describe("DiamondDS component overrides", () => { expect(styles["&.Mui-disabled"]).toEqual( expect.objectContaining({ - color: "var(--ds-action-disabled)", + color: "var(--ds-control-disabled)", }), ); }); @@ -1035,7 +1035,7 @@ describe("DiamondDS component overrides", () => { expect(styles["&.Mui-disabled"]).toEqual( expect.objectContaining({ - color: "var(--ds-action-disabled)", + color: "var(--ds-control-disabled)", }), ); }); @@ -1141,7 +1141,7 @@ describe("DiamondDS tokens", () => { expect(tokensCss).toContain("--ds-on-surface-subtle:"); expect(tokensCss).toContain("--ds-on-surface-muted:"); expect(tokensCss).toContain("--ds-on-surface-disabled:"); - expect(tokensCss).toContain("--ds-action-disabled:"); + expect(tokensCss).toContain("--ds-control-disabled:"); expect(tokensCss).toContain("--ds-on-solid:"); }); diff --git a/src/themes/DiamondDSTheme.ts b/src/themes/DiamondDSTheme.ts index 38daf1a6..76efc7af 100644 --- a/src/themes/DiamondDSTheme.ts +++ b/src/themes/DiamondDSTheme.ts @@ -1587,7 +1587,7 @@ const DiamondDSTheme = extendTheme({ }, "&.Mui-disabled": { - color: "var(--ds-action-disabled)", + color: "var(--ds-control-disabled)", }, }; }, @@ -1623,7 +1623,7 @@ const DiamondDSTheme = extendTheme({ }, "&.Mui-disabled": { - color: "var(--ds-action-disabled)", + color: "var(--ds-control-disabled)", }, }; },