fix: darken light-mode green0 to #F0FFF9 for stronger positiveWash contrast#691
fix: darken light-mode green0 to #F0FFF9 for stronger positiveWash contrast#691nicoledbelcher wants to merge 2 commits into
Conversation
✅ Heimdall Review Status
✅
|
| Code Owner | Status | Calculation | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ui-systems-eng-team |
✅
1/1
|
Denominator calculation
|
Adds CHANGELOG entries for the light-mode green0 #F0FFF9 update and syncs common + mcp-server to 8.74.4 via yarn release. Co-authored-by: Cursor <cursoragent@cursor.com>
|
Heads up on CI: the single Storybook A11y Tests failure on this PR is an unrelated flake, not a regression from the
A maintainer re-run of the A11y job from inside |
480041a to
6042a1b
Compare
|
we will need to rebase this back onto master |
Update the light-mode green0 spectrum value from #F5FFFB (rgb 245,255,251) to #EBFFF7 (rgb 235,255,247) so the positiveWash token (and other light-mode green0 consumers such as accentSubtleGreen and Tag's low-emphasis green tone) is more visible against the default light background. Scope: - Updates default + coinbase themes (web and mobile) - Updates the customTheme story files (web and mobile) - Updates the vscode-plugin cds-next light spectrum - High-contrast themes (default + coinbase, web and mobile) are intentionally left at the previous value - Dark spectrum is untouched Co-authored-by: Cursor <cursoragent@cursor.com>
The previous proposed value #EBFFF7 (rgb 235,255,247) regressed the green60-on-green0 contrast to 4.499:1, just below the WCAG AA 4.5:1 threshold caught by axe in Storybook A11y Tests (failures in Tag, ListCell, and ComponentConfigProvider stories). #F0FFF9 (rgb 240,255,249) sits between current master (#F5FFFB, 4.588) and the Linear-aligned value (#EBFFF7, 4.499), achieving a perceived darker positive wash while keeping green60 text on green0 background at 4.5429:1 (passes WCAG AA). Co-authored-by: Cursor <cursoragent@cursor.com>
6042a1b to
9a324dc
Compare
The base branch was changed.
Status of remaining checks (all fork-PR / review mechanics, no code issues)I rebased this back onto The three still-pending Required checks can't be cleared from a fork branch:
To unblock, a maintainer would need to either run this from a branch inside For reference, the only change is the light-mode |
Summary
Update the light-mode
green0spectrum value from#F5FFFB(rgb245,255,251) to#F0FFF9(rgb240,255,249) so thepositiveWashtoken has stronger contrast against the default light background, while still clearing WCAG AA contrast againstgreen60foreground.Light-mode tokens that automatically pick up the slightly darker tint:
bgPositiveWash(consumer-facing wash, e.g.background="bgPositiveWash"on aBox/HStack/etc.)accentSubtleGreenTaglow-emphasis green tone (viapackages/common/src/tokens/tags.ts->low.green.background -> green0)Linear: CDS-1583
WCAG AA contrast check (green60 #098551 foreground on green0 background)
#F5FFFB(previous on master)#F0FFF9(this PR)#EBFFF7(originally proposed in CDS-1583)The originally aligned value
#EBFFF7was caught by axe in CI (Storybook A11y Testsfailed onTag.stories.tsx > All,ListCell.stories.tsx > CondensedListCell, andComponentConfigProvider.stories.tsx > Default).#F0FFF9is the slightly more conservative compromise that still meaningfully darkens the wash without regressing the Tag low-emphasis green tone.Scope
Modified (7 files):
packages/{web,mobile}/src/themes/defaultTheme.tspackages/{web,mobile}/src/themes/coinbaseTheme.tspackages/web/src/__stories__/componentConfigStickerSheet/customTheme.ts,packages/mobile/src/system/__stories__/componentConfigStickerSheet/customTheme.tspackages/vscode-plugin/src/cds-next/styles/spectrum.tsIntentionally NOT changed:
defaultHighContrastTheme.ts,coinbaseHighContrastTheme.tson both web and mobile) remain at the previousgreen0value#F5FFFB.bgPositiveWashin a built-in variant, so this change benefits consumer-side surfaces that opt into the token via style props.Test plan
yarn nx run web:typecheck- passesyarn nx run mobile:typecheck- passesyarn nx run vscode-plugin:typecheck- passesyarn nx format:writeon modified filesgreen60foreground (4.543 >= 4.5)<Box background="bgPositiveWash">.Storybook A11y Testsnow passes (was failing with#EBFFF7).