coinbase · chrislkaufman · Apr 3, 2026 · Apr 14, 2026 · Apr 14, 2026 · Apr 14, 2026
diff --git 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.
 
 <!-- template-start -->
 
+## 8.67.0 ((4/17/2026, 12:00 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.66.0 ((4/16/2026, 01:57 PM PST))
 
 This is an artificial version bump with no new change.

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-common",
-  "version": "8.66.0",
+  "version": "8.67.0",
   "description": "Coinbase Design System - Common",
   "repository": {
     "type": "git",

diff --git 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.
 
 <!-- template-start -->
 
+## 8.67.0 ((4/17/2026, 12:00 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.66.0 ((4/16/2026, 01:57 PM 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
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.66.0",
+  "version": "8.67.0",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",

diff --git 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.
 
 <!-- template-start -->
 
+## 8.67.0 (4/17/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: Updating the active states for chips + bgTertiary Light Mode. [[#585](https://github.com/chrislkaufman/cds/pull/585)]
+
 ## 8.66.0 ((4/16/2026, 01:57 PM PST))
 
 This is an artificial version bump with no new change.

diff --git a/packages/mobile/package.json b/packages/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.66.0",
+  "version": "8.67.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",

diff --git a/packages/mobile/src/alpha/select-chip/SelectChipControl.tsx b/packages/mobile/src/alpha/select-chip/SelectChipControl.tsx
@@ -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 (
@@ -148,7 +137,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/select/DefaultSelectControl.tsx b/packages/mobile/src/alpha/select/DefaultSelectControl.tsx
@@ -244,7 +244,6 @@ export const DefaultSelectControlComponent = memo(
                     accessibilityLabel={`${removeSelectedOptionAccessibilityLabel} ${accessibilityLabel}`}
                     borderWidth={0}
                     disabled={disabled || option.disabled}
-                    invertColorScheme={false}
                     maxWidth={200}
                     onPress={(event) => {
                       event?.stopPropagation();
@@ -256,7 +255,7 @@ export const DefaultSelectControlComponent = memo(
                 );
               })}
               {value.length - maxSelectedOptionsToShow > 0 && (
-                <InputChip compact borderWidth={0} end={null} invertColorScheme={false}>
+                <InputChip compact borderWidth={0} end={null}>
                   {`+${value.length - maxSelectedOptionsToShow} ${hiddenSelectedOptionsLabel}`}
                 </InputChip>
               )}

diff --git a/packages/mobile/src/alpha/tabbed-chips/TabbedChips.tsx b/packages/mobile/src/alpha/tabbed-chips/TabbedChips.tsx
@@ -22,7 +22,7 @@ const DefaultTabComponent = <TabId extends string = string>({
   return (
     <MediaChip
       accessibilityState={{ selected: isActive }}
-      invertColorScheme={isActive}
+      background={isActive ? 'bgTertiary' : 'bgSecondary'}
       onPress={handlePress}
       {...tabProps}
     >

diff --git a/packages/mobile/src/chips/InputChip.tsx b/packages/mobile/src/chips/InputChip.tsx
@@ -14,14 +14,14 @@ export const InputChip = memo(
       value,
       children = value,
       accessibilityLabel = typeof children === 'string' ? `Remove ${children}` : 'Remove option',
-      invertColorScheme = true,
       testID = 'input-chip',
       ...props
     } = mergedProps;
     return (
       <MediaChip
         ref={ref}
         accessibilityLabel={accessibilityLabel}
+        background="bgTertiary"
         end={
           <Icon
             active
@@ -31,7 +31,6 @@ export const InputChip = memo(
             testID={testID ? `${testID}-close-icon` : 'input-chip-close-icon'}
           />
         }
-        invertColorScheme={invertColorScheme}
         {...props}
       >
         {children}

diff --git a/packages/mobile/src/chips/SelectChip.tsx b/packages/mobile/src/chips/SelectChip.tsx
@@ -127,6 +127,7 @@ export const SelectChip = memo(
             accessibilityLabel={accessibilityLabel ?? value}
             accessibilityRole="menu"
             accessibilityState={{ disabled }}
+            background={active ? 'bgTertiary' : 'bgSecondary'}
             disabled={disabled}
             end={
               end ?? (
@@ -140,7 +141,6 @@ export const SelectChip = memo(
                 />
               )
             }
-            inverted={active}
             onPress={handleChipPress}
             testID={testID}
             {...props}

diff --git a/packages/mobile/src/chips/TabbedChips.tsx b/packages/mobile/src/chips/TabbedChips.tsx
@@ -22,7 +22,7 @@ const TabComponent = <TabId extends string = string>({
   return (
     <MediaChip
       accessibilityState={{ selected: isActive }}
-      inverted={isActive}
+      background={isActive ? 'bgTertiary' : 'bgSecondary'}
       onPress={handleClick}
       {...tabProps}
     >

diff --git 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/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/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.67.0 (4/17/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: Updating the active states for chips + bgTertiary Light Mode. [[#585](https://github.com/chrislkaufman/cds/pull/585)]
+
 ## 8.66.0 (4/16/2026 PST)
 
 #### 🚀 Updates

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.66.0",
+  "version": "8.67.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",

diff --git a/packages/web/src/alpha/select-chip/SelectChipControl.tsx b/packages/web/src/alpha/select-chip/SelectChipControl.tsx
@@ -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 (
@@ -151,7 +140,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/select/DefaultSelectControl.tsx b/packages/web/src/alpha/select/DefaultSelectControl.tsx
@@ -295,7 +295,6 @@ const DefaultSelectControlComponent = memo(
                     borderWidth={0}
                     classNames={{ content: selectedOptionChipContentCss }}
                     disabled={option.disabled}
-                    invertColorScheme={false}
                     maxWidth={200}
                     onClick={(event) => handleUnselectValue(event, index)}
                   >
@@ -306,7 +305,7 @@ const DefaultSelectControlComponent = memo(
                 );
               })}
               {value.length - maxSelectedOptionsToShow > 0 && (
-                <InputChip compact borderWidth={0} end={null} invertColorScheme={false}>
+                <InputChip compact borderWidth={0} end={null}>
                   {`+${value.length - maxSelectedOptionsToShow} ${hiddenSelectedOptionsLabel}`}
                 </InputChip>
               )}

diff --git a/packages/web/src/alpha/tabbed-chips/TabbedChips.tsx b/packages/web/src/alpha/tabbed-chips/TabbedChips.tsx
@@ -56,7 +56,7 @@ const DefaultTabComponent = <TabId extends string = string>({
     <MediaChip
       ref={chipRef}
       aria-selected={isActive}
-      invertColorScheme={isActive}
+      background={isActive ? 'bgTertiary' : 'bgSecondary'}
       onClick={handleClick}
       role="tab"
       width="max-content"

diff --git a/packages/web/src/chips/InputChip.tsx b/packages/web/src/chips/InputChip.tsx
@@ -13,14 +13,14 @@ export const InputChip = memo(
       value,
       children = value,
       accessibilityLabel = typeof children === 'string' ? `Remove ${children}` : 'Remove option',
-      invertColorScheme = true,
       testID = 'input-chip',
       ...props
     } = mergedProps;
     return (
       <MediaChip
         ref={ref}
         accessibilityLabel={accessibilityLabel}
+        background="bgTertiary"
         end={
           <Icon
             active
@@ -30,7 +30,6 @@ export const InputChip = memo(
             testID={testID ? `${testID}-close-icon` : 'input-chip-close-icon'}
           />
         }
-        invertColorScheme={invertColorScheme}
         {...props}
       >
         {children}

diff --git a/packages/web/src/chips/SelectChip.tsx b/packages/web/src/chips/SelectChip.tsx
@@ -106,9 +106,9 @@ 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}
           onClick={handleOpenMenu}
           testID={testID}
           {...props}

diff --git a/packages/web/src/chips/TabbedChips.tsx b/packages/web/src/chips/TabbedChips.tsx
@@ -38,7 +38,7 @@ const TabComponent = <TabId extends string = string>({
     <MediaChip
       ref={chipRef}
       aria-selected={isActive}
-      inverted={isActive}
+      background={isActive ? 'bgTertiary' : 'bgSecondary'}
       onClick={handleClick}
       role="tab"
       width="max-content"

diff --git a/packages/web/src/themes/coinbaseTheme.ts b/packages/web/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/web/src/themes/defaultTheme.ts b/packages/web/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})`,