From 232c028cbf57d02d119aec8bb85cba2df971cbfe Mon Sep 17 00:00:00 2001 From: Talisson Costa Date: Thu, 6 Aug 2026 09:14:31 -0300 Subject: [PATCH 1/2] fix(ds): make status text readable on its own surface text-warning, text-success and text-danger all failed WCAG AA against the tinted surfaces they are used on: 1.93:1, 2.64:1 and 3.25:1 against 4.5:1 for body text. text-warning is 2.04:1 on plain white, so it failed as body text on any light background, not only in a badge. Light mode now uses darker steps that already exist in the palette: red-700, green-600 and orange-800, giving 5.86:1, 4.85:1 and 5.38:1. Dark mode keeps the brand 500s, since those surfaces are dark tints and darkening the text there would make it worse. Border and icon tokens are untouched. Non-text contrast only needs 3:1, so the brand red, teal and orange stay wherever they are decorative. Closes #8235 Co-Authored-By: Claude Opus 5 (1M context) --- frontend/common/theme/tokens.json | 6 +++--- frontend/common/theme/tokens.ts | 6 +++--- .../documentation/TokenReference.generated.stories.tsx | 6 +++--- frontend/web/styles/_tokens.scss | 9 ++++++--- 4 files changed, 15 insertions(+), 12 deletions(-) diff --git a/frontend/common/theme/tokens.json b/frontend/common/theme/tokens.json index fcad1cb37f7d..1f3be412fc5d 100644 --- a/frontend/common/theme/tokens.json +++ b/frontend/common/theme/tokens.json @@ -105,9 +105,9 @@ "tertiary": { "cssVar": "--color-text-tertiary", "light": "#9da4ae", "dark": "rgba(255, 255, 255, 0.48)" }, "disabled": { "cssVar": "--color-text-disabled", "light": "#9da4ae", "dark": "rgba(255, 255, 255, 0.32)" }, "action": { "cssVar": "--color-text-action", "light": "#6837fc", "dark": "#906af6" }, - "danger": { "cssVar": "--color-text-danger", "light": "#ef4d56", "dark": "#ef4d56" }, - "success": { "cssVar": "--color-text-success", "light": "#27ab95", "dark": "#27ab95" }, - "warning": { "cssVar": "--color-text-warning", "light": "#ff9f43", "dark": "#ff9f43" }, + "danger": { "cssVar": "--color-text-danger", "light": "#bb1720", "dark": "#ef4d56", "description": "Darker than border/icon danger to clear 4.5:1 on the tint." }, + "success": { "cssVar": "--color-text-success", "light": "#13787b", "dark": "#27ab95", "description": "Darker than border/icon success to clear 4.5:1 on the tint." }, + "warning": { "cssVar": "--color-text-warning", "light": "#9f5208", "dark": "#ff9f43", "description": "Darker than border/icon warning to clear 4.5:1 on the tint." }, "info": { "cssVar": "--color-text-info", "light": "#0aaddf", "dark": "#0aaddf" } }, "code": { diff --git a/frontend/common/theme/tokens.ts b/frontend/common/theme/tokens.ts index 7397d1972cfa..d9e244ea0838 100644 --- a/frontend/common/theme/tokens.ts +++ b/frontend/common/theme/tokens.ts @@ -198,14 +198,14 @@ export const colorSurfaceWarning = // Text export const colorTextAction = 'var(--color-text-action, #6837fc)' -export const colorTextDanger = 'var(--color-text-danger, #ef4d56)' +export const colorTextDanger = 'var(--color-text-danger, #bb1720)' export const colorTextDefault = 'var(--color-text-default, #1a2634)' export const colorTextDisabled = 'var(--color-text-disabled, #9da4ae)' export const colorTextInfo = 'var(--color-text-info, #0aaddf)' export const colorTextSecondary = 'var(--color-text-secondary, #656d7b)' -export const colorTextSuccess = 'var(--color-text-success, #27ab95)' +export const colorTextSuccess = 'var(--color-text-success, #13787b)' export const colorTextTertiary = 'var(--color-text-tertiary, #9da4ae)' -export const colorTextWarning = 'var(--color-text-warning, #ff9f43)' +export const colorTextWarning = 'var(--color-text-warning, #9f5208)' // Chart export const colorChart1 = 'var(--color-chart-1, #0aaddf)' diff --git a/frontend/documentation/TokenReference.generated.stories.tsx b/frontend/documentation/TokenReference.generated.stories.tsx index 97c711495103..8a8326e98877 100644 --- a/frontend/documentation/TokenReference.generated.stories.tsx +++ b/frontend/documentation/TokenReference.generated.stories.tsx @@ -205,7 +205,7 @@ export const AllTokens: StoryObj = { --color-text-danger - var(--red-500) + var(--red-700) @@ -213,7 +213,7 @@ export const AllTokens: StoryObj = { --color-text-success - var(--green-500) + var(--green-600) @@ -221,7 +221,7 @@ export const AllTokens: StoryObj = { --color-text-warning - var(--orange-500) + var(--orange-800) diff --git a/frontend/web/styles/_tokens.scss b/frontend/web/styles/_tokens.scss index c5b653e2c50b..cb2b8066d444 100644 --- a/frontend/web/styles/_tokens.scss +++ b/frontend/web/styles/_tokens.scss @@ -105,14 +105,14 @@ // Text --color-text-action: var(--purple-600); - --color-text-danger: var(--red-500); + --color-text-danger: var(--red-700); --color-text-default: var(--slate-600); --color-text-disabled: var(--slate-300); --color-text-info: var(--blue-500); --color-text-secondary: var(--slate-500); - --color-text-success: var(--green-500); + --color-text-success: var(--green-600); --color-text-tertiary: var(--slate-300); - --color-text-warning: var(--orange-500); + --color-text-warning: var(--orange-800); // Code --color-code-builtin: var(--gold-700); @@ -208,10 +208,13 @@ --color-surface-success: oklch(from var(--green-500) 0.18 0.02 h); --color-surface-warning: oklch(from var(--orange-500) 0.18 0.02 h); --color-text-action: var(--purple-400); + --color-text-danger: var(--red-500); --color-text-default: var(--slate-0); --color-text-disabled: oklch(from var(--slate-0) l c h / 0.32); --color-text-secondary: var(--slate-300); + --color-text-success: var(--green-500); --color-text-tertiary: oklch(from var(--slate-0) l c h / 0.48); + --color-text-warning: var(--orange-500); --color-code-builtin: var(--gold-400); --color-code-comment: var(--slate-500); --color-code-keyword: var(--purple-400); From e3e858c47a94a143438b450889afe4601c5286b8 Mon Sep 17 00:00:00 2001 From: Talisson Costa Date: Fri, 7 Aug 2026 10:07:02 -0300 Subject: [PATCH 2/2] docs(ds): scope the token descriptions to light mode Text is only darker than border and icon in light mode. In dark mode all three resolve to the same brand primitive, so the note read as wrong for half the cases. Co-Authored-By: Claude Opus 5 (1M context) --- frontend/common/theme/tokens.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/common/theme/tokens.json b/frontend/common/theme/tokens.json index 1f3be412fc5d..4e2312aad725 100644 --- a/frontend/common/theme/tokens.json +++ b/frontend/common/theme/tokens.json @@ -105,9 +105,9 @@ "tertiary": { "cssVar": "--color-text-tertiary", "light": "#9da4ae", "dark": "rgba(255, 255, 255, 0.48)" }, "disabled": { "cssVar": "--color-text-disabled", "light": "#9da4ae", "dark": "rgba(255, 255, 255, 0.32)" }, "action": { "cssVar": "--color-text-action", "light": "#6837fc", "dark": "#906af6" }, - "danger": { "cssVar": "--color-text-danger", "light": "#bb1720", "dark": "#ef4d56", "description": "Darker than border/icon danger to clear 4.5:1 on the tint." }, - "success": { "cssVar": "--color-text-success", "light": "#13787b", "dark": "#27ab95", "description": "Darker than border/icon success to clear 4.5:1 on the tint." }, - "warning": { "cssVar": "--color-text-warning", "light": "#9f5208", "dark": "#ff9f43", "description": "Darker than border/icon warning to clear 4.5:1 on the tint." }, + "danger": { "cssVar": "--color-text-danger", "light": "#bb1720", "dark": "#ef4d56", "description": "In light mode, darker than border/icon danger to clear 4.5:1 on the tint." }, + "success": { "cssVar": "--color-text-success", "light": "#13787b", "dark": "#27ab95", "description": "In light mode, darker than border/icon success to clear 4.5:1 on the tint." }, + "warning": { "cssVar": "--color-text-warning", "light": "#9f5208", "dark": "#ff9f43", "description": "In light mode, darker than border/icon warning to clear 4.5:1 on the tint." }, "info": { "cssVar": "--color-text-info", "light": "#0aaddf", "dark": "#0aaddf" } }, "code": {