Skip to content

fix: darken light-mode green0 to #F0FFF9 for stronger positiveWash contrast#691

Open
nicoledbelcher wants to merge 2 commits into
coinbase:cds-v9-masterfrom
nicoledbelcher:nicole/positive-wash-contrast
Open

fix: darken light-mode green0 to #F0FFF9 for stronger positiveWash contrast#691
nicoledbelcher wants to merge 2 commits into
coinbase:cds-v9-masterfrom
nicoledbelcher:nicole/positive-wash-contrast

Conversation

@nicoledbelcher

@nicoledbelcher nicoledbelcher commented May 18, 2026

Copy link
Copy Markdown
Contributor

Summary

Update the light-mode green0 spectrum value from #F5FFFB (rgb 245,255,251) to #F0FFF9 (rgb 240,255,249) so the positiveWash token has stronger contrast against the default light background, while still clearing WCAG AA contrast against green60 foreground.

Light-mode tokens that automatically pick up the slightly darker tint:

  • bgPositiveWash (consumer-facing wash, e.g. background="bgPositiveWash" on a Box/HStack/etc.)
  • accentSubtleGreen
  • Tag low-emphasis green tone (via packages/common/src/tokens/tags.ts -> low.green.background -> green0)

Linear: CDS-1583

WCAG AA contrast check (green60 #098551 foreground on green0 background)

green0 value Contrast ratio WCAG AA (>= 4.5)
#F5FFFB (previous on master) 4.588 passes
#F0FFF9 (this PR) 4.543 passes
#EBFFF7 (originally proposed in CDS-1583) 4.499 fails by 0.001

The originally aligned value #EBFFF7 was caught by axe in CI (Storybook A11y Tests failed on Tag.stories.tsx > All, ListCell.stories.tsx > CondensedListCell, and ComponentConfigProvider.stories.tsx > Default). #F0FFF9 is the slightly more conservative compromise that still meaningfully darkens the wash without regressing the Tag low-emphasis green tone.

Scope

Modified (7 files):

  • Default themes: packages/{web,mobile}/src/themes/defaultTheme.ts
  • Coinbase themes: packages/{web,mobile}/src/themes/coinbaseTheme.ts
  • Custom theme stories: packages/web/src/__stories__/componentConfigStickerSheet/customTheme.ts, packages/mobile/src/system/__stories__/componentConfigStickerSheet/customTheme.ts
  • vscode-plugin: packages/vscode-plugin/src/cds-next/styles/spectrum.ts

Intentionally NOT changed:

  • High-contrast themes (defaultHighContrastTheme.ts, coinbaseHighContrastTheme.ts on both web and mobile) remain at the previous green0 value #F5FFFB.
  • Dark spectrum is untouched everywhere.
  • No CDS component (Banner, MessagingCard, ContentCard, etc.) currently hardcodes bgPositiveWash in 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 - passes
  • yarn nx run mobile:typecheck - passes
  • yarn nx run vscode-plugin:typecheck - passes
  • yarn nx format:write on modified files
  • WCAG AA contrast check against green60 foreground (4.543 >= 4.5)
  • Visually verify in Storybook the new wash tint reads better in consumer-style surfaces that use <Box background="bgPositiveWash">.
  • CI Storybook A11y Tests now passes (was failing with #EBFFF7).

@cb-heimdall

cb-heimdall commented May 18, 2026

Copy link
Copy Markdown
Collaborator

✅ Heimdall Review Status

Requirement Status More Info
Reviews 1/1
Denominator calculation
Show calculation
1 if user is bot 0
1 if user is external 0
2 if repo is sensitive 0
From .codeflow.yml 1
Additional review requirements
Show calculation
Max 0
0
From CODEOWNERS 1
Global minimum 0
Max 1
1
1 if commit is unverified 0
Sum 1
CODEOWNERS ✅ See below

CODEOWNERS

Code Owner Status Calculation
ui-systems-eng-team 1/1
Denominator calculation
Additional CODEOWNERS Requirement
Show calculation
Sum 0
0
From CODEOWNERS 1
Sum 1

@nicoledbelcher nicoledbelcher changed the title fix: darken light-mode green0 for stronger positiveWash contrast fix: darken light-mode green0 to #F0FFF9 for stronger positiveWash contrast May 18, 2026
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>
@nicoledbelcher

Copy link
Copy Markdown
Contributor Author

Heads up on CI: the single Storybook A11y Tests failure on this PR is an unrelated flake, not a regression from the green0 change.

  • Failing test: packages/web/src/overlays/__stories__/TooltipContent.stories.tsx > Default
  • Reported colors: foreground #b7b7b8 on background #ffffff (that's gray60 text on white — no green tokens involved)
  • Story renders only a TooltipContent with the string "This is the tooltip Content" — no Banner, Card, or wash anywhere
  • The same baseline + only different code passed Storybook A11y cleanly on fix: use 8px gap between Alert action buttons #690, and the most recent master run was also green
  • 829 of 830 a11y assertions passed here; the new #F0FFF9green60 pair passed its WCAG-AA contrast check

A maintainer re-run of the A11y job from inside coinbase/cds should clear it. Same for the Percy Visreg Web/iOS jobs, which fail because PERCY_TOKEN isn't exposed to fork PRs.

adrienzheng-cb
adrienzheng-cb previously approved these changes May 20, 2026
nicoledbelcher and others added 2 commits May 21, 2026 11:48
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>
@cb-ekuersch

Copy link
Copy Markdown
Contributor

we will need to rebase this back onto master

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment