Skip to content

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

Open
nicoledbelcher wants to merge 2 commits into
coinbase: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: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
adrienzheng-cb
adrienzheng-cb previously approved these changes May 21, 2026
@cb-ekuersch

Copy link
Copy Markdown
Contributor

we will need to rebase this back onto master

nicoledbelcher and others added 2 commits June 24, 2026 13:51
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>
@nicoledbelcher nicoledbelcher force-pushed the nicole/positive-wash-contrast branch from 6042a1b to 9a324dc Compare June 24, 2026 20:52
@nicoledbelcher nicoledbelcher changed the base branch from cds-v9-master to master June 24, 2026 20:52
@nicoledbelcher nicoledbelcher dismissed adrienzheng-cb’s stale review June 24, 2026 20:52

The base branch was changed.

@nicoledbelcher

Copy link
Copy Markdown
Contributor Author

Status of remaining checks (all fork-PR / review mechanics, no code issues)

I rebased this back onto master (per @cb-ekuersch's request) and switched the PR base accordingly. The full CI suite is green on the rebased commit — Typecheck, Build, Test, Lint, Lint Styles, Format, Storybook A11y Tests, Validate, and all dry-run-publish jobs pass. The earlier A11y failure was a flaky Vitest/Storybook harness error (Failed to fetch dynamically imported module ... axe-*.js), not a contrast regression.

The three still-pending Required checks can't be cleared from a fork branch:

  • Validate Code Connect (Web) and Validate Code Connect (Mobile) — these jobs are gated by github.event.pull_request.head.repo.full_name == github.repository in .github/workflows/figma.yml, so they're skipped for fork PRs. Because they're required on master, GitHub leaves them stuck as "Expected — Waiting for status to be reported." This change touches zero Figma/Code Connect files (only 7 theme/spectrum files), so there's nothing for them to validate.
  • Heimdall Review Status — the rebase force-push dismissed the prior approval, so it's waiting on a fresh approving review.

To unblock, a maintainer would need to either run this from a branch inside coinbase/cds (so the Code Connect jobs actually execute) or re-approve + admin-merge past the fork-only Code Connect checks.

For reference, the only change is the light-mode green0 spectrum value 245,255,251 -> 240,255,249 across the 7 theme/spectrum files.

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