Skip to content

feat: Updating the active states for chips + bgTertiary Light Mode #585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chrislkaufman wants to merge 4 commits into
base: master
Choose a base branch
from
Open

feat: Updating the active states for chips + bgTertiary Light Mode #585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
297d72d
feat: Updating the active states for all chips to use bgTertiary inst…
chrislkaufman Apr 3, 2026
9db48bb
undo them changes for high contrast and advanced themes
chrislkaufman Apr 14, 2026
079c101
bump version
chrislkaufman Apr 14, 2026
ef84c9d
Merge upstream/master (coinbase/cds)
chrislkaufman Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/common/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.

<!-- template-start -->

## 8.65.0 ((4/14/2026, 12:54 PM PST))

This is an artificial version bump with no new change.

## 8.64.4 ((4/10/2026, 01:20 PM PST))

This is an artificial version bump with no new change.
Expand Down
2 changes: 1 addition & 1 deletion packages/common/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@coinbase/cds-common",
"version": "8.64.4",
"version": "8.65.0",
"description": "Coinbase Design System - Common",
"repository": {
"type": "git",
Expand Down
4 changes: 4 additions & 0 deletions packages/mcp-server/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.

<!-- template-start -->

## 8.65.0 ((4/14/2026, 12:54 PM PST))

This is an artificial version bump with no new change.

## 8.64.4 ((4/10/2026, 01:20 PM PST))

This is an artificial version bump with no new change.
Expand Down
2 changes: 1 addition & 1 deletion packages/mcp-server/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@coinbase/cds-mcp-server",
"version": "8.64.4",
"version": "8.65.0",
"description": "Coinbase Design System - MCP Server",
"repository": {
"type": "git",
Expand Down
6 changes: 6 additions & 0 deletions packages/mobile/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,12 @@ All notable changes to this project will be documented in this file.

- Undo test refactors from #568. [[#611](https://github.com/coinbase/cds/pull/611)]

## 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.4 ((4/10/2026, 01:20 PM PST))

This is an artificial version bump with no new change.
Expand Down
2 changes: 1 addition & 1 deletion packages/mobile/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@coinbase/cds-mobile",
"version": "8.64.4",
"version": "8.65.0",
"description": "Coinbase Design System - Mobile",
"repository": {
"type": "git",
Expand Down
19 changes: 4 additions & 15 deletions packages/mobile/src/alpha/select-chip/SelectChipControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,23 +123,12 @@ const SelectChipControlComponent = memo(

const endNode = useMemo(() => {
return (
customEndNode ?? (
<AnimatedCaret
active
color={hasValue ? 'fgInverse' : 'fg'}
rotate={open ? 0 : 180}
size="xs"
/>
)
customEndNode ?? <AnimatedCaret active color="fg" rotate={open ? 0 : 180} size="xs" />
);
}, [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 (
Expand All @@ -148,7 +137,7 @@ const SelectChipControlComponent = memo(
accessibilityHint={accessibilityHint}
accessibilityLabel={accessibilityLabel}
background={background}
color={color}
color="fg"
compact={compact}
disabled={disabled}
end={endNode}
Expand Down
3 changes: 2 additions & 1 deletion packages/mobile/src/alpha/tabbed-chips/TabbedChips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ const DefaultTabComponent = <TabId extends string = string>({
return (
<MediaChip
accessibilityState={{ selected: isActive }}
invertColorScheme={isActive}
background={isActive ? 'bgTertiary' : 'bgSecondary'}
invertColorScheme={false}
Copy link
Copy Markdown
Contributor

@hcopp hcopp Apr 15, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you ask Cursor to "remove invertColorScheme={false} (and double check that it is safe to do so)"? Looks good to me to remove

onPress={handlePress}
{...tabProps}
>
Expand Down
3 changes: 2 additions & 1 deletion packages/mobile/src/chips/InputChip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,15 @@ export const InputChip = memo(
value,
children = value,
accessibilityLabel = typeof children === 'string' ? `Remove ${children}` : 'Remove option',
invertColorScheme = true,
invertColorScheme = false,
Copy link
Copy Markdown
Contributor

@hcopp hcopp Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: can you ask Cursor to "drop the destructuring of this invertColorScheme prop"

testID = 'input-chip',
...props
} = mergedProps;
return (
<MediaChip
ref={ref}
accessibilityLabel={accessibilityLabel}
background="bgTertiary"
end={
<Icon
active
Expand Down
3 changes: 2 additions & 1 deletion packages/mobile/src/chips/SelectChip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ export const SelectChip = memo(
accessibilityLabel={accessibilityLabel ?? value}
accessibilityRole="menu"
accessibilityState={{ disabled }}
background={active ? 'bgTertiary' : 'bgSecondary'}
disabled={disabled}
end={
end ?? (
Expand All @@ -140,7 +141,7 @@ export const SelectChip = memo(
/>
)
}
inverted={active}
inverted={false}
Copy link
Copy Markdown
Contributor

@hcopp hcopp Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you also remove this inverted? It defaults to false for MediaChip so we don't need to explicitly set it to false.

onPress={handleChipPress}
testID={testID}
{...props}
Expand Down
3 changes: 2 additions & 1 deletion packages/mobile/src/chips/TabbedChips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ const TabComponent = <TabId extends string = string>({
return (
<MediaChip
accessibilityState={{ selected: isActive }}
inverted={isActive}
background={isActive ? 'bgTertiary' : 'bgSecondary'}
inverted={false}
Copy link
Copy Markdown
Contributor

@hcopp hcopp Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here

onPress={handleClick}
{...tabProps}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/mobile/src/themes/coinbaseTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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})`,
Expand Down
2 changes: 1 addition & 1 deletion packages/mobile/src/themes/defaultTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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})`,
Expand Down
6 changes: 6 additions & 0 deletions packages/web/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.

<!-- template-start -->

## 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.4 (4/10/2026 PST)

#### 🐞 Fixes
Expand Down
2 changes: 1 addition & 1 deletion packages/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@coinbase/cds-web",
"version": "8.64.4",
"version": "8.65.0",
"description": "Coinbase Design System - Web",
"repository": {
"type": "git",
Expand Down
19 changes: 4 additions & 15 deletions packages/web/src/alpha/select-chip/SelectChipControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,23 +124,12 @@ const SelectChipControlComponent = memo(

const endNode = useMemo(() => {
return (
customEndNode ?? (
<AnimatedCaret
active
color={hasValue ? 'fgInverse' : 'fg'}
rotate={open ? 0 : 180}
size="xs"
/>
)
customEndNode ?? <AnimatedCaret active color="fg" rotate={open ? 0 : 180} size="xs" />
);
}, [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 (
Expand All @@ -151,7 +140,7 @@ const SelectChipControlComponent = memo(
aria-haspopup={ariaHaspopup}
background={background}
className={className}
color={color}
color="fg"
compact={compact}
disabled={disabled}
end={endNode}
Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/alpha/tabbed-chips/TabbedChips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,8 @@ const DefaultTabComponent = <TabId extends string = string>({
<MediaChip
ref={chipRef}
aria-selected={isActive}
invertColorScheme={isActive}
background={isActive ? 'bgTertiary' : 'bgSecondary'}
invertColorScheme={false}
Copy link
Copy Markdown
Contributor

@hcopp hcopp Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lets ask Cursor to "check this in all places, including removing the destructuring invertColorScheme" where no longer necessary.

onClick={handleClick}
role="tab"
width="max-content"
Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/chips/InputChip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,15 @@ export const InputChip = memo(
value,
children = value,
accessibilityLabel = typeof children === 'string' ? `Remove ${children}` : 'Remove option',
invertColorScheme = true,
invertColorScheme = false,
testID = 'input-chip',
...props
} = mergedProps;
return (
<MediaChip
ref={ref}
accessibilityLabel={accessibilityLabel}
background="bgTertiary"
end={
<Icon
active
Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/chips/SelectChip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,10 @@ export const SelectChip = memo(
<MediaChip
ref={mergedRefs}
noScaleOnPress
background={active ? 'bgTertiary' : 'bgSecondary'}
disabled={disabled}
end={end ?? <AnimatedCaret active color="fg" rotate={isOpen ? 0 : 180} size="xs" />}
inverted={active}
inverted={false}
onClick={handleOpenMenu}
testID={testID}
{...props}
Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/chips/TabbedChips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ const TabComponent = <TabId extends string = string>({
<MediaChip
ref={chipRef}
aria-selected={isActive}
inverted={isActive}
background={isActive ? 'bgTertiary' : 'bgSecondary'}
inverted={false}
onClick={handleClick}
role="tab"
width="max-content"
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/themes/coinbaseTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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})`,
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/themes/defaultTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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})`,
Expand Down
Loading