From 297d72d70f049405922497eda218e1c5555a6126 Mon Sep 17 00:00:00 2001 From: Chris Kaufman Date: Fri, 3 Apr 2026 11:31:09 -0700 Subject: [PATCH 1/3] feat: Updating the active states for all chips to use bgTertiary instead of bgInverse. Also updated bgTertiary dark mode value to use gray30 --- .../src/alpha/select-chip/SelectChipControl.tsx | 17 ++++------------- .../src/alpha/tabbed-chips/TabbedChips.tsx | 3 ++- packages/mobile/src/chips/InputChip.tsx | 3 ++- packages/mobile/src/chips/SelectChip.tsx | 3 ++- packages/mobile/src/chips/TabbedChips.tsx | 3 ++- .../src/themes/coinbaseHighContrastTheme.ts | 2 +- packages/mobile/src/themes/coinbaseTheme.ts | 2 +- .../src/themes/defaultHighContrastTheme.ts | 2 +- packages/mobile/src/themes/defaultTheme.ts | 2 +- .../src/alpha/select-chip/SelectChipControl.tsx | 17 ++++------------- .../web/src/alpha/tabbed-chips/TabbedChips.tsx | 3 ++- packages/web/src/chips/InputChip.tsx | 3 ++- packages/web/src/chips/SelectChip.tsx | 3 ++- packages/web/src/chips/TabbedChips.tsx | 3 ++- .../web/src/themes/coinbaseHighContrastTheme.ts | 2 +- packages/web/src/themes/coinbaseTheme.ts | 2 +- .../web/src/themes/defaultHighContrastTheme.ts | 2 +- packages/web/src/themes/defaultTheme.ts | 2 +- 18 files changed, 32 insertions(+), 42 deletions(-) diff --git a/packages/mobile/src/alpha/select-chip/SelectChipControl.tsx b/packages/mobile/src/alpha/select-chip/SelectChipControl.tsx index 1ab5d6300c..6eb31fce1b 100644 --- a/packages/mobile/src/alpha/select-chip/SelectChipControl.tsx +++ b/packages/mobile/src/alpha/select-chip/SelectChipControl.tsx @@ -124,22 +124,13 @@ const SelectChipControlComponent = memo( const endNode = useMemo(() => { return ( customEndNode ?? ( - + ) ); - }, [customEndNode, open, hasValue]); - - const color = useMemo(() => { - return hasValue ? 'fgInverse' : 'fg'; - }, [hasValue]); + }, [customEndNode, open]); const background = useMemo(() => { - return hasValue ? 'bgInverse' : 'bgSecondary'; + return hasValue ? 'bgTertiary' : 'bgSecondary'; }, [hasValue]); return ( @@ -148,7 +139,7 @@ const SelectChipControlComponent = memo( accessibilityHint={accessibilityHint} accessibilityLabel={accessibilityLabel} background={background} - color={color} + color="fg" compact={compact} disabled={disabled} end={endNode} diff --git a/packages/mobile/src/alpha/tabbed-chips/TabbedChips.tsx b/packages/mobile/src/alpha/tabbed-chips/TabbedChips.tsx index e87d31e63c..23e3c678db 100644 --- a/packages/mobile/src/alpha/tabbed-chips/TabbedChips.tsx +++ b/packages/mobile/src/alpha/tabbed-chips/TabbedChips.tsx @@ -22,7 +22,8 @@ const DefaultTabComponent = ({ return ( diff --git a/packages/mobile/src/chips/InputChip.tsx b/packages/mobile/src/chips/InputChip.tsx index 821a75546a..5ed17a6968 100644 --- a/packages/mobile/src/chips/InputChip.tsx +++ b/packages/mobile/src/chips/InputChip.tsx @@ -14,7 +14,7 @@ export const InputChip = memo( value, children = value, accessibilityLabel = typeof children === 'string' ? `Remove ${children}` : 'Remove option', - invertColorScheme = true, + invertColorScheme = false, testID = 'input-chip', ...props } = mergedProps; @@ -22,6 +22,7 @@ export const InputChip = memo( ) } - inverted={active} + inverted={false} onPress={handleChipPress} testID={testID} {...props} diff --git a/packages/mobile/src/chips/TabbedChips.tsx b/packages/mobile/src/chips/TabbedChips.tsx index d9cc6156e7..8aeeefbbaa 100644 --- a/packages/mobile/src/chips/TabbedChips.tsx +++ b/packages/mobile/src/chips/TabbedChips.tsx @@ -22,7 +22,8 @@ const TabComponent = ({ return ( diff --git a/packages/mobile/src/themes/coinbaseHighContrastTheme.ts b/packages/mobile/src/themes/coinbaseHighContrastTheme.ts index c060a6450a..fd43735e00 100644 --- a/packages/mobile/src/themes/coinbaseHighContrastTheme.ts +++ b/packages/mobile/src/themes/coinbaseHighContrastTheme.ts @@ -367,7 +367,7 @@ export const coinbaseHighContrastTheme = { bgPrimaryWash: `rgb(${darkSpectrum.blue5})`, bgSecondary: `rgb(${darkSpectrum.gray15})`, bgSecondaryWash: `rgb(${darkSpectrum.gray10})`, - bgTertiary: `rgb(${darkSpectrum.gray20})`, + bgTertiary: `rgb(${darkSpectrum.gray30})`, bgNegative: `rgb(${darkSpectrum.red80})`, bgNegativeWash: `rgb(${darkSpectrum.red5})`, bgPositive: `rgb(${darkSpectrum.green80})`, diff --git a/packages/mobile/src/themes/coinbaseTheme.ts b/packages/mobile/src/themes/coinbaseTheme.ts index 990d85f3dd..46a297dddd 100644 --- a/packages/mobile/src/themes/coinbaseTheme.ts +++ b/packages/mobile/src/themes/coinbaseTheme.ts @@ -366,7 +366,7 @@ export const coinbaseTheme = { bgPrimary: `rgb(${darkSpectrum.blue70})`, bgPrimaryWash: `rgb(${darkSpectrum.blue0})`, bgSecondary: `rgb(${darkSpectrum.gray15})`, - bgTertiary: `rgb(${darkSpectrum.gray20})`, + bgTertiary: `rgb(${darkSpectrum.gray30})`, bgSecondaryWash: `rgb(${darkSpectrum.gray5})`, bgNegative: `rgb(${darkSpectrum.red60})`, bgNegativeWash: `rgb(${darkSpectrum.red0})`, diff --git a/packages/mobile/src/themes/defaultHighContrastTheme.ts b/packages/mobile/src/themes/defaultHighContrastTheme.ts index f164bef438..b85659c52f 100644 --- a/packages/mobile/src/themes/defaultHighContrastTheme.ts +++ b/packages/mobile/src/themes/defaultHighContrastTheme.ts @@ -367,7 +367,7 @@ export const defaultHighContrastTheme = { bgPrimaryWash: `rgb(${darkSpectrum.blue5})`, bgSecondary: `rgb(${darkSpectrum.gray15})`, bgSecondaryWash: `rgb(${darkSpectrum.gray10})`, - bgTertiary: `rgb(${darkSpectrum.gray20})`, + bgTertiary: `rgb(${darkSpectrum.gray30})`, bgNegative: `rgb(${darkSpectrum.red80})`, bgNegativeWash: `rgb(${darkSpectrum.red5})`, bgPositive: `rgb(${darkSpectrum.green80})`, diff --git a/packages/mobile/src/themes/defaultTheme.ts b/packages/mobile/src/themes/defaultTheme.ts index 81c795824f..178632ea10 100644 --- a/packages/mobile/src/themes/defaultTheme.ts +++ b/packages/mobile/src/themes/defaultTheme.ts @@ -366,7 +366,7 @@ export const defaultTheme = { bgPrimary: `rgb(${darkSpectrum.blue70})`, bgPrimaryWash: `rgb(${darkSpectrum.blue0})`, bgSecondary: `rgb(${darkSpectrum.gray15})`, - bgTertiary: `rgb(${darkSpectrum.gray20})`, + bgTertiary: `rgb(${darkSpectrum.gray30})`, bgSecondaryWash: `rgb(${darkSpectrum.gray5})`, bgNegative: `rgb(${darkSpectrum.red60})`, bgNegativeWash: `rgb(${darkSpectrum.red0})`, diff --git a/packages/web/src/alpha/select-chip/SelectChipControl.tsx b/packages/web/src/alpha/select-chip/SelectChipControl.tsx index 8a24c94073..61cec3921b 100644 --- a/packages/web/src/alpha/select-chip/SelectChipControl.tsx +++ b/packages/web/src/alpha/select-chip/SelectChipControl.tsx @@ -125,22 +125,13 @@ const SelectChipControlComponent = memo( const endNode = useMemo(() => { return ( customEndNode ?? ( - + ) ); - }, [customEndNode, hasValue, open]); - - const color = useMemo(() => { - return hasValue ? 'fgInverse' : 'fg'; - }, [hasValue]); + }, [customEndNode, open]); const background = useMemo(() => { - return hasValue ? 'bgInverse' : 'bgSecondary'; + return hasValue ? 'bgTertiary' : 'bgSecondary'; }, [hasValue]); return ( @@ -151,7 +142,7 @@ const SelectChipControlComponent = memo( aria-haspopup={ariaHaspopup} background={background} className={className} - color={color} + color="fg" compact={compact} disabled={disabled} end={endNode} diff --git a/packages/web/src/alpha/tabbed-chips/TabbedChips.tsx b/packages/web/src/alpha/tabbed-chips/TabbedChips.tsx index 4bb4a67b41..8f92b8d662 100644 --- a/packages/web/src/alpha/tabbed-chips/TabbedChips.tsx +++ b/packages/web/src/alpha/tabbed-chips/TabbedChips.tsx @@ -56,7 +56,8 @@ const DefaultTabComponent = ({ } - inverted={active} + inverted={false} onClick={handleOpenMenu} testID={testID} {...props} diff --git a/packages/web/src/chips/TabbedChips.tsx b/packages/web/src/chips/TabbedChips.tsx index 98ccd62958..6a028fd12b 100644 --- a/packages/web/src/chips/TabbedChips.tsx +++ b/packages/web/src/chips/TabbedChips.tsx @@ -38,7 +38,8 @@ const TabComponent = ({ Date: Tue, 14 Apr 2026 12:50:32 -0700 Subject: [PATCH 2/3] undo them changes for high contrast and advanced themes --- packages/mobile/src/themes/coinbaseHighContrastTheme.ts | 2 +- packages/mobile/src/themes/defaultHighContrastTheme.ts | 2 +- packages/web/src/themes/coinbaseHighContrastTheme.ts | 2 +- packages/web/src/themes/defaultHighContrastTheme.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mobile/src/themes/coinbaseHighContrastTheme.ts b/packages/mobile/src/themes/coinbaseHighContrastTheme.ts index fd43735e00..c060a6450a 100644 --- a/packages/mobile/src/themes/coinbaseHighContrastTheme.ts +++ b/packages/mobile/src/themes/coinbaseHighContrastTheme.ts @@ -367,7 +367,7 @@ export const coinbaseHighContrastTheme = { bgPrimaryWash: `rgb(${darkSpectrum.blue5})`, bgSecondary: `rgb(${darkSpectrum.gray15})`, bgSecondaryWash: `rgb(${darkSpectrum.gray10})`, - bgTertiary: `rgb(${darkSpectrum.gray30})`, + bgTertiary: `rgb(${darkSpectrum.gray20})`, bgNegative: `rgb(${darkSpectrum.red80})`, bgNegativeWash: `rgb(${darkSpectrum.red5})`, bgPositive: `rgb(${darkSpectrum.green80})`, diff --git a/packages/mobile/src/themes/defaultHighContrastTheme.ts b/packages/mobile/src/themes/defaultHighContrastTheme.ts index b85659c52f..f164bef438 100644 --- a/packages/mobile/src/themes/defaultHighContrastTheme.ts +++ b/packages/mobile/src/themes/defaultHighContrastTheme.ts @@ -367,7 +367,7 @@ export const defaultHighContrastTheme = { bgPrimaryWash: `rgb(${darkSpectrum.blue5})`, bgSecondary: `rgb(${darkSpectrum.gray15})`, bgSecondaryWash: `rgb(${darkSpectrum.gray10})`, - bgTertiary: `rgb(${darkSpectrum.gray30})`, + bgTertiary: `rgb(${darkSpectrum.gray20})`, bgNegative: `rgb(${darkSpectrum.red80})`, bgNegativeWash: `rgb(${darkSpectrum.red5})`, bgPositive: `rgb(${darkSpectrum.green80})`, diff --git a/packages/web/src/themes/coinbaseHighContrastTheme.ts b/packages/web/src/themes/coinbaseHighContrastTheme.ts index 3d9bd03568..9cf54ce46f 100644 --- a/packages/web/src/themes/coinbaseHighContrastTheme.ts +++ b/packages/web/src/themes/coinbaseHighContrastTheme.ts @@ -367,7 +367,7 @@ export const coinbaseHighContrastTheme = { bgPrimaryWash: `rgb(${darkSpectrum.blue5})`, bgSecondary: `rgb(${darkSpectrum.gray15})`, bgSecondaryWash: `rgb(${darkSpectrum.gray10})`, - bgTertiary: `rgb(${darkSpectrum.gray30})`, + bgTertiary: `rgb(${darkSpectrum.gray20})`, bgNegative: `rgb(${darkSpectrum.red80})`, bgNegativeWash: `rgb(${darkSpectrum.red5})`, bgPositive: `rgb(${darkSpectrum.green80})`, diff --git a/packages/web/src/themes/defaultHighContrastTheme.ts b/packages/web/src/themes/defaultHighContrastTheme.ts index 8d5ec63352..62aef394b5 100644 --- a/packages/web/src/themes/defaultHighContrastTheme.ts +++ b/packages/web/src/themes/defaultHighContrastTheme.ts @@ -367,7 +367,7 @@ export const defaultHighContrastTheme = { bgPrimaryWash: `rgb(${darkSpectrum.blue5})`, bgSecondary: `rgb(${darkSpectrum.gray15})`, bgSecondaryWash: `rgb(${darkSpectrum.gray10})`, - bgTertiary: `rgb(${darkSpectrum.gray30})`, + bgTertiary: `rgb(${darkSpectrum.gray20})`, bgNegative: `rgb(${darkSpectrum.red80})`, bgNegativeWash: `rgb(${darkSpectrum.red5})`, bgPositive: `rgb(${darkSpectrum.green80})`, From 079c101f9fde345ce1ea6af04276f7a861433a45 Mon Sep 17 00:00:00 2001 From: Chris Kaufman Date: Tue, 14 Apr 2026 12:54:54 -0700 Subject: [PATCH 3/3] bump version --- packages/common/CHANGELOG.md | 4 ++++ packages/common/package.json | 2 +- packages/mcp-server/CHANGELOG.md | 4 ++++ packages/mcp-server/package.json | 2 +- packages/mobile/CHANGELOG.md | 6 ++++++ packages/mobile/package.json | 2 +- packages/web/CHANGELOG.md | 6 ++++++ packages/web/package.json | 2 +- 8 files changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/common/CHANGELOG.md b/packages/common/CHANGELOG.md index fe69471111..66a89e4f56 100644 --- a/packages/common/CHANGELOG.md +++ b/packages/common/CHANGELOG.md @@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file. +## 8.65.0 ((4/14/2026, 12:54 PM PST)) + +This is an artificial version bump with no new change. + ## 8.64.0 (4/2/2026 PST) #### 🚀 Updates diff --git a/packages/common/package.json b/packages/common/package.json index a5100a0fdd..a6e2ac5391 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -1,6 +1,6 @@ { "name": "@coinbase/cds-common", - "version": "8.64.0", + "version": "8.65.0", "description": "Coinbase Design System - Common", "repository": { "type": "git", diff --git a/packages/mcp-server/CHANGELOG.md b/packages/mcp-server/CHANGELOG.md index 26f599eb75..9a9ecbcf6c 100644 --- a/packages/mcp-server/CHANGELOG.md +++ b/packages/mcp-server/CHANGELOG.md @@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file. +## 8.65.0 ((4/14/2026, 12:54 PM PST)) + +This is an artificial version bump with no new change. + ## 8.64.0 ((4/2/2026, 07:51 AM PST)) This is an artificial version bump with no new change. diff --git a/packages/mcp-server/package.json b/packages/mcp-server/package.json index d63fb6ac71..175645427c 100644 --- a/packages/mcp-server/package.json +++ b/packages/mcp-server/package.json @@ -1,6 +1,6 @@ { "name": "@coinbase/cds-mcp-server", - "version": "8.64.0", + "version": "8.65.0", "description": "Coinbase Design System - MCP Server", "repository": { "type": "git", diff --git a/packages/mobile/CHANGELOG.md b/packages/mobile/CHANGELOG.md index a24da1c14e..ab7f68fefd 100644 --- a/packages/mobile/CHANGELOG.md +++ b/packages/mobile/CHANGELOG.md @@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file. +## 8.65.0 (4/14/2026 PST) + +#### 🚀 Updates + +- Feat: Updating the active states for chips + bgTertiary Light Mode. [[#585](https://github.com/chrislkaufman/cds/pull/585)] + ## 8.64.0 (4/2/2026 PST) #### 🚀 Updates diff --git a/packages/mobile/package.json b/packages/mobile/package.json index e4340a638e..e3483ced52 100644 --- a/packages/mobile/package.json +++ b/packages/mobile/package.json @@ -1,6 +1,6 @@ { "name": "@coinbase/cds-mobile", - "version": "8.64.0", + "version": "8.65.0", "description": "Coinbase Design System - Mobile", "repository": { "type": "git", diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md index 3c394c4bf0..da2db64aab 100644 --- a/packages/web/CHANGELOG.md +++ b/packages/web/CHANGELOG.md @@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file. +## 8.65.0 (4/14/2026 PST) + +#### 🚀 Updates + +- Feat: Updating the active states for chips + bgTertiary Light Mode. [[#585](https://github.com/chrislkaufman/cds/pull/585)] + ## 8.64.0 (4/2/2026 PST) #### 🚀 Updates diff --git a/packages/web/package.json b/packages/web/package.json index c9dd2da71b..17d0c67414 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -1,6 +1,6 @@ { "name": "@coinbase/cds-web", - "version": "8.64.0", + "version": "8.65.0", "description": "Coinbase Design System - Web", "repository": { "type": "git",