fix: darken light-mode green0 to #F0FFF9 for stronger positiveWash contrast#691
Open
nicoledbelcher wants to merge 2 commits into
Open
fix: darken light-mode green0 to #F0FFF9 for stronger positiveWash contrast#691nicoledbelcher wants to merge 2 commits into
nicoledbelcher wants to merge 2 commits into
Conversation
Collaborator
✅ Heimdall Review Status
✅
|
| Code Owner | Status | Calculation | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ui-systems-eng-team |
✅
1/1
|
Denominator calculation
|
nicoledbelcher
added a commit
to nicoledbelcher/cds
that referenced
this pull request
May 18, 2026
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>
Contributor
Author
|
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 |
adrienzheng-cb
previously approved these changes
May 20, 2026
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>
480041a to
6042a1b
Compare
adrienzheng-cb
approved these changes
May 21, 2026
Contributor
|
we will need to rebase this back onto master |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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).