From 05ac6e6b0f5870d87aef3a06e2f1cc7011dbc23e Mon Sep 17 00:00:00 2001 From: Nicole Belcher Date: Sun, 17 May 2026 19:10:23 -0700 Subject: [PATCH 1/2] fix: darken light-mode green0 for stronger positiveWash contrast 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 --- .../__stories__/componentConfigStickerSheet/customTheme.ts | 2 +- packages/mobile/src/themes/coinbaseTheme.ts | 2 +- packages/mobile/src/themes/defaultTheme.ts | 2 +- packages/vscode-plugin/src/cds-next/styles/spectrum.ts | 2 +- .../src/__stories__/componentConfigStickerSheet/customTheme.ts | 2 +- packages/web/src/themes/coinbaseTheme.ts | 2 +- packages/web/src/themes/defaultTheme.ts | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/mobile/src/system/__stories__/componentConfigStickerSheet/customTheme.ts b/packages/mobile/src/system/__stories__/componentConfigStickerSheet/customTheme.ts index 72cc55c4eb..cb7d6f83de 100644 --- a/packages/mobile/src/system/__stories__/componentConfigStickerSheet/customTheme.ts +++ b/packages/mobile/src/system/__stories__/componentConfigStickerSheet/customTheme.ts @@ -17,7 +17,7 @@ const lightSpectrum = { blue80: '0,62,193', blue90: '0,41,130', blue100: '0,24,77', - green0: '245,255,251', + green0: '235,255,247', green5: '203,245,227', green10: '171,230,206', green15: '131,224,186', diff --git a/packages/mobile/src/themes/coinbaseTheme.ts b/packages/mobile/src/themes/coinbaseTheme.ts index 9640f386ff..07fdd6f303 100644 --- a/packages/mobile/src/themes/coinbaseTheme.ts +++ b/packages/mobile/src/themes/coinbaseTheme.ts @@ -16,7 +16,7 @@ const lightSpectrum = { blue80: '0,62,193', blue90: '0,41,130', blue100: '0,24,77', - green0: '245,255,251', + green0: '235,255,247', green5: '203,245,227', green10: '163,235,205', green15: '131,224,186', diff --git a/packages/mobile/src/themes/defaultTheme.ts b/packages/mobile/src/themes/defaultTheme.ts index e642952678..96819e80f5 100644 --- a/packages/mobile/src/themes/defaultTheme.ts +++ b/packages/mobile/src/themes/defaultTheme.ts @@ -16,7 +16,7 @@ const lightSpectrum = { blue80: '0,62,193', blue90: '0,41,130', blue100: '0,24,77', - green0: '245,255,251', + green0: '235,255,247', green5: '203,245,227', green10: '163,235,205', green15: '131,224,186', diff --git a/packages/vscode-plugin/src/cds-next/styles/spectrum.ts b/packages/vscode-plugin/src/cds-next/styles/spectrum.ts index c4b0fa655a..16b74412bb 100644 --- a/packages/vscode-plugin/src/cds-next/styles/spectrum.ts +++ b/packages/vscode-plugin/src/cds-next/styles/spectrum.ts @@ -172,7 +172,7 @@ export const light = { blue80: '0,62,193', blue90: '0,41,130', blue100: '0,24,77', - green0: '245,255,251', + green0: '235,255,247', green5: '203,245,227', green10: '163,235,205', green15: '131,224,186', diff --git a/packages/web/src/__stories__/componentConfigStickerSheet/customTheme.ts b/packages/web/src/__stories__/componentConfigStickerSheet/customTheme.ts index c1d068fe93..3e4502b831 100644 --- a/packages/web/src/__stories__/componentConfigStickerSheet/customTheme.ts +++ b/packages/web/src/__stories__/componentConfigStickerSheet/customTheme.ts @@ -17,7 +17,7 @@ const lightSpectrum = { blue80: '0,62,193', blue90: '0,41,130', blue100: '0,24,77', - green0: '245,255,251', + green0: '235,255,247', green5: '203,245,227', green10: '171,230,206', green15: '131,224,186', diff --git a/packages/web/src/themes/coinbaseTheme.ts b/packages/web/src/themes/coinbaseTheme.ts index 9367d973a1..7e7a90b86e 100644 --- a/packages/web/src/themes/coinbaseTheme.ts +++ b/packages/web/src/themes/coinbaseTheme.ts @@ -16,7 +16,7 @@ const lightSpectrum = { blue80: '0,62,193', blue90: '0,41,130', blue100: '0,24,77', - green0: '245,255,251', + green0: '235,255,247', green5: '203,245,227', green10: '163,235,205', green15: '131,224,186', diff --git a/packages/web/src/themes/defaultTheme.ts b/packages/web/src/themes/defaultTheme.ts index 4e26052f86..d64edee4e5 100644 --- a/packages/web/src/themes/defaultTheme.ts +++ b/packages/web/src/themes/defaultTheme.ts @@ -16,7 +16,7 @@ const lightSpectrum = { blue80: '0,62,193', blue90: '0,41,130', blue100: '0,24,77', - green0: '245,255,251', + green0: '235,255,247', green5: '203,245,227', green10: '163,235,205', green15: '131,224,186', From 6042a1b481c30b663997462a8be39ce7b514225d Mon Sep 17 00:00:00 2001 From: Nicole Belcher Date: Sun, 17 May 2026 19:39:41 -0700 Subject: [PATCH 2/2] fix: adjust light-mode green0 to #F0FFF9 to clear WCAG AA on Tag 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 --- .../__stories__/componentConfigStickerSheet/customTheme.ts | 2 +- packages/mobile/src/themes/coinbaseTheme.ts | 2 +- packages/mobile/src/themes/defaultTheme.ts | 2 +- packages/vscode-plugin/src/cds-next/styles/spectrum.ts | 2 +- .../src/__stories__/componentConfigStickerSheet/customTheme.ts | 2 +- packages/web/src/themes/coinbaseTheme.ts | 2 +- packages/web/src/themes/defaultTheme.ts | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/mobile/src/system/__stories__/componentConfigStickerSheet/customTheme.ts b/packages/mobile/src/system/__stories__/componentConfigStickerSheet/customTheme.ts index cb7d6f83de..ee650ddb29 100644 --- a/packages/mobile/src/system/__stories__/componentConfigStickerSheet/customTheme.ts +++ b/packages/mobile/src/system/__stories__/componentConfigStickerSheet/customTheme.ts @@ -17,7 +17,7 @@ const lightSpectrum = { blue80: '0,62,193', blue90: '0,41,130', blue100: '0,24,77', - green0: '235,255,247', + green0: '240,255,249', green5: '203,245,227', green10: '171,230,206', green15: '131,224,186', diff --git a/packages/mobile/src/themes/coinbaseTheme.ts b/packages/mobile/src/themes/coinbaseTheme.ts index 07fdd6f303..460ae29faa 100644 --- a/packages/mobile/src/themes/coinbaseTheme.ts +++ b/packages/mobile/src/themes/coinbaseTheme.ts @@ -16,7 +16,7 @@ const lightSpectrum = { blue80: '0,62,193', blue90: '0,41,130', blue100: '0,24,77', - green0: '235,255,247', + green0: '240,255,249', green5: '203,245,227', green10: '163,235,205', green15: '131,224,186', diff --git a/packages/mobile/src/themes/defaultTheme.ts b/packages/mobile/src/themes/defaultTheme.ts index 96819e80f5..d5724f10f8 100644 --- a/packages/mobile/src/themes/defaultTheme.ts +++ b/packages/mobile/src/themes/defaultTheme.ts @@ -16,7 +16,7 @@ const lightSpectrum = { blue80: '0,62,193', blue90: '0,41,130', blue100: '0,24,77', - green0: '235,255,247', + green0: '240,255,249', green5: '203,245,227', green10: '163,235,205', green15: '131,224,186', diff --git a/packages/vscode-plugin/src/cds-next/styles/spectrum.ts b/packages/vscode-plugin/src/cds-next/styles/spectrum.ts index 16b74412bb..d28f08d853 100644 --- a/packages/vscode-plugin/src/cds-next/styles/spectrum.ts +++ b/packages/vscode-plugin/src/cds-next/styles/spectrum.ts @@ -172,7 +172,7 @@ export const light = { blue80: '0,62,193', blue90: '0,41,130', blue100: '0,24,77', - green0: '235,255,247', + green0: '240,255,249', green5: '203,245,227', green10: '163,235,205', green15: '131,224,186', diff --git a/packages/web/src/__stories__/componentConfigStickerSheet/customTheme.ts b/packages/web/src/__stories__/componentConfigStickerSheet/customTheme.ts index 3e4502b831..ef460310f5 100644 --- a/packages/web/src/__stories__/componentConfigStickerSheet/customTheme.ts +++ b/packages/web/src/__stories__/componentConfigStickerSheet/customTheme.ts @@ -17,7 +17,7 @@ const lightSpectrum = { blue80: '0,62,193', blue90: '0,41,130', blue100: '0,24,77', - green0: '235,255,247', + green0: '240,255,249', green5: '203,245,227', green10: '171,230,206', green15: '131,224,186', diff --git a/packages/web/src/themes/coinbaseTheme.ts b/packages/web/src/themes/coinbaseTheme.ts index 7e7a90b86e..4003091444 100644 --- a/packages/web/src/themes/coinbaseTheme.ts +++ b/packages/web/src/themes/coinbaseTheme.ts @@ -16,7 +16,7 @@ const lightSpectrum = { blue80: '0,62,193', blue90: '0,41,130', blue100: '0,24,77', - green0: '235,255,247', + green0: '240,255,249', green5: '203,245,227', green10: '163,235,205', green15: '131,224,186', diff --git a/packages/web/src/themes/defaultTheme.ts b/packages/web/src/themes/defaultTheme.ts index d64edee4e5..4241b14f15 100644 --- a/packages/web/src/themes/defaultTheme.ts +++ b/packages/web/src/themes/defaultTheme.ts @@ -16,7 +16,7 @@ const lightSpectrum = { blue80: '0,62,193', blue90: '0,41,130', blue100: '0,24,77', - green0: '235,255,247', + green0: '240,255,249', green5: '203,245,227', green10: '163,235,205', green15: '131,224,186',