@coinbase/cds-mobile 8.69.1 → 8.71.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.71.0 (5/12/2026 PST)
+
+#### 🚀 Updates
+
+- Add icon glyph and progress circle styles to IconButton. [[#606](https://github.com/coinbase/cds/pull/606)]
+
+## 8.70.0 (5/8/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support active color on Tabs. [[#669](https://github.com/coinbase/cds/pull/669)]
+
 ## 8.69.1 (5/6/2026 PST)
 
 #### 🐞 Fixes

package/dts/buttons/IconButton.d.ts

@@ -1,4 +1,4 @@
-import { type View } from 'react-native';
+import { type StyleProp, type TextStyle, type View, type ViewStyle } from 'react-native';
 import type {
   IconButtonVariant,
   IconName,
@@ -27,6 +27,15 @@ export type IconButtonBaseProps = SharedProps &
      * @default primary
      */
     variant?: IconButtonVariant;
+    /** Custom styles for individual elements of the IconButton component */
+    styles?: {
+      /** Root Pressable element */
+      root?: StyleProp<ViewStyle>;
+      /** Inner icon glyph Text element */
+      icon?: StyleProp<TextStyle>;
+      /** Loading progress circle element */
+      progressCircle?: StyleProp<ViewStyle>;
+    };
   };
 export type IconButtonProps = IconButtonBaseProps;
 export declare const IconButton: import('react').MemoExoticComponent<
@@ -51,6 +60,15 @@ export declare const IconButton: import('react').MemoExoticComponent<
          * @default primary
          */
         variant?: IconButtonVariant;
+        /** Custom styles for individual elements of the IconButton component */
+        styles?: {
+          /** Root Pressable element */
+          root?: StyleProp<ViewStyle>;
+          /** Inner icon glyph Text element */
+          icon?: StyleProp<TextStyle>;
+          /** Loading progress circle element */
+          progressCircle?: StyleProp<ViewStyle>;
+        };
       } & import('react').RefAttributes<View>
   >
 >;

package/dts/buttons/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmC,KAAK,IAAI,EAAkB,MAAM,cAAc,CAAC;AAG1F,OAAO,KAAK,EACV,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAOpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GACpC,IAAI,CACF,eAAe,EACf,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,CACpF,GAAG;IACF,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU;IAlBnB,6CAA6C;UACvC,QAAQ;IACd;;;OAGG;eACQ,QAAQ;IACnB,iCAAiC;aACxB,OAAO;IAChB;;;OAGG;cACO,iBAAiB;yCAqG9B,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EACV,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAOpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GACpC,IAAI,CACF,eAAe,EACf,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,CACpF,GAAG;IACF,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,wEAAwE;IACxE,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,oCAAoC;QACpC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,sCAAsC;QACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACvC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU;IA3BnB,6CAA6C;UACvC,QAAQ;IACd;;;OAGG;eACQ,QAAQ;IACnB,iCAAiC;aACxB,OAAO;IAChB;;;OAGG;cACO,iBAAiB;IAC3B,wEAAwE;aAC/D;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,oCAAoC;QACpC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,sCAAsC;QACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACvC;yCAyGJ,CAAC"}

package/dts/controls/InputIconButton.d.ts

@@ -22,6 +22,11 @@ export declare const InputIconButton: React.MemoExoticComponent<
         iconSize?: import('@coinbase/cds-common').IconSize;
         active?: boolean;
         variant?: IconButtonVariant;
+        styles?: {
+          root?: import('react-native').StyleProp<import('react-native').ViewStyle>;
+          icon?: import('react-native').StyleProp<import('react-native').TextStyle>;
+          progressCircle?: import('react-native').StyleProp<import('react-native').ViewStyle>;
+        };
       } & {
         /**
          * If set to true, when parent input is focused, the icon will match the color of the focus state

package/dts/controls/InputIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputIconButton.d.ts","sourceRoot":"","sources":["../../src/controls/InputIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAElF,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAKzE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAOvE,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAAG;IACnD;;;SAGK;IACL,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;IAP1B;;;SAGK;+BACsB,OAAO;+BA+BnC,CAAC"}
+{"version":3,"file":"InputIconButton.d.ts","sourceRoot":"","sources":["../../src/controls/InputIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAElF,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAKzE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAOvE,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAAG;IACnD;;;SAGK;IACL,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;YA6BzB,CAAC;YAA6E,CAAC;sBAAyF,CAAC;;;IApC1K;;;SAGK;+BACsB,OAAO;+BA+BnC,CAAC"}

package/dts/tabs/DefaultTab.d.ts

@@ -15,7 +15,7 @@ export type DefaultTabLabelProps = Partial<Pick<DotCountBaseProps, 'count' | 'ma
   Pick<SharedAccessibilityProps, 'accessibilityLabel'>;
 export type DefaultTabProps<TabId extends string = string> = Omit<
   PressableProps,
-  'children' | 'onPress' | 'style'
+  'children' | 'onPress' | 'style' | 'color'
 > &
   TabComponentProps<TabId, TabValue<TabId> & DefaultTabLabelProps> & {
     /** Callback that is fired when the tab is pressed, after the active tab updates. */
@@ -29,7 +29,7 @@ type DefaultTabComponent = <TabId extends string = string>(
 ) => React.ReactElement;
 declare const DefaultTabComponent: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
-    Omit<PressableProps, 'children' | 'style' | 'onPress'> &
+    Omit<PressableProps, 'children' | 'color' | 'style' | 'onPress'> &
       Omit<
         TabValue<string> &
           Partial<Pick<DotCountBaseProps, 'max' | 'count'>> &
@@ -37,6 +37,8 @@ declare const DefaultTabComponent: React.MemoExoticComponent<
         'id' | 'Component'
       > & {
         id: string;
+        color?: import('@coinbase/cds-common').ThemeVars.Color;
+        activeColor?: import('@coinbase/cds-common').ThemeVars.Color;
         style?: StyleProp<ViewStyle>;
       } & {
         /** Callback that is fired when the tab is pressed, after the active tab updates. */

package/dts/tabs/DefaultTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultTab.d.ts","sourceRoot":"","sources":["../../src/tabs/DefaultTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EACL,KAAK,qBAAqB,EAE1B,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAErE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAGlE,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAKpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAEhD,qEAAqE;AACrE,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,KAAK,CAAC,CAAC,GAClF,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,CAAC;AAEvD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAC/D,cAAc,EACd,UAAU,GAAG,SAAS,GAAG,OAAO,CACjC,GACC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,oBAAoB,CAAC,GAAG;IACjE,oFAAoF;IACpF,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEJ,KAAK,mBAAmB,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACvD,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAC/D,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,mBAAmB;;;;IATrB,oFAAoF;mCACvD,qBAAqB,KAAK,IAAI;YACnD,SAAS,CAAC,SAAS,CAAC;+BA0E/B,CAAC;AAIF,eAAO,MAAM,UAAU,EAA0B,mBAAmB,CAAC"}
+{"version":3,"file":"DefaultTab.d.ts","sourceRoot":"","sources":["../../src/tabs/DefaultTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EACL,KAAK,qBAAqB,EAE1B,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAErE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAGlE,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAKpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAEhD,qEAAqE;AACrE,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,KAAK,CAAC,CAAC,GAClF,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,CAAC;AAEvD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAC/D,cAAc,EACd,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAC3C,GACC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,oBAAoB,CAAC,GAAG;IACjE,oFAAoF;IACpF,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEJ,KAAK,mBAAmB,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACvD,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAC/D,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,mBAAmB;;;;;;IATrB,oFAAoF;mCACvD,qBAAqB,KAAK,IAAI;YACnD,SAAS,CAAC,SAAS,CAAC;+BA4E/B,CAAC;AAIF,eAAO,MAAM,UAAU,EAA0B,mBAAmB,CAAC"}

package/dts/tabs/DefaultTabsActiveIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultTabsActiveIndicator.d.ts","sourceRoot":"","sources":["../../src/tabs/DefaultTabsActiveIndicator.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,wBAAwB,EAAoB,MAAM,QAAQ,CAAC;AAQzE,eAAO,MAAM,0BAA0B,+FAOlC,wBAAwB,oDAmC5B,CAAC"}
+{"version":3,"file":"DefaultTabsActiveIndicator.d.ts","sourceRoot":"","sources":["../../src/tabs/DefaultTabsActiveIndicator.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,wBAAwB,EAAoB,MAAM,QAAQ,CAAC;AAOzE,eAAO,MAAM,0BAA0B,+FAOlC,wBAAwB,oDAmC5B,CAAC"}

package/dts/tabs/SegmentedTab.d.ts

@@ -13,13 +13,13 @@ export type SegmentedTabBaseProps<TabId extends string = string> = TabValue<TabI
   Pick<TextBaseProps, 'font' | 'fontFamily' | 'fontSize' | 'fontWeight' | 'lineHeight'> &
   Omit<PressableBaseProps, 'children' | 'disabled' | 'onPress' | 'style'> & {
     /**
-     * Text color when the SegmentedTab is active.
-     * @default negativeForeground
+     * Text color when active.
+     * @default fgInverse
      */
     activeColor?: ThemeVars.Color;
     /**
-     * Text color when the SegmentedTab is inactive.
-     * @default foreground
+     * Text color when inactive.
+     * @default fg
      */
     color?: ThemeVars.Color;
   };

package/dts/tabs/Tabs.d.ts

@@ -18,6 +18,14 @@ export type TabComponentProps<
   TTab extends TabValue<TabId> = TabValue<TabId>,
 > = Omit<TTab, 'Component' | 'id'> & {
   id: TabId;
+  /**
+   * Color when a tab is inactive.
+   */
+  color?: ThemeVars.Color;
+  /**
+   * Color when a tab is active.
+   */
+  activeColor?: ThemeVars.Color;
   style?: StyleProp<ViewStyle>;
 };
 export type TabComponent<
@@ -29,7 +37,8 @@ export type TabsBaseProps<
   TabId extends string = string,
   TTab extends TabValue<TabId> = TabValue<TabId>,
 > = Omit<BoxBaseProps, 'onChange'> &
-  Omit<TabsOptions<TabId, TTab>, 'tabs'> & {
+  Omit<TabsOptions<TabId, TTab>, 'tabs'> &
+  Pick<TabComponentProps<TabId, TTab>, 'color' | 'activeColor'> & {
     /** The array of tabs data. Each tab may optionally define a custom Component to render. */
     tabs: (TTab & {
       Component?: TabComponent<TabId, TTab>;

package/dts/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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"}

package/esm/buttons/IconButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "height", "width", "feedback", "flush", "loading", "progressCircleSize", "style", "accessibilityHint", "accessibilityLabel"];
+const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "height", "width", "feedback", "flush", "loading", "progressCircleSize", "style", "styles", "accessibilityHint", "accessibilityLabel"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { forwardRef, memo, useCallback, useMemo } from 'react';
@@ -33,6 +33,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       loading,
       progressCircleSize,
       style,
+      styles,
       accessibilityHint,
       accessibilityLabel
     } = mergedProps,
@@ -58,7 +59,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
     flexDirection: 'column',
     justifyContent: 'center'
   }), [height, width]);
-  const pressableStyle = useCallback(state => [sizingStyle, typeof style === 'function' ? style(state) : style], [sizingStyle, style]);
+  const pressableStyle = useCallback(state => [sizingStyle, typeof style === 'function' ? style(state) : style, styles == null ? void 0 : styles.root], [sizingStyle, style, styles == null ? void 0 : styles.root]);
   return /*#__PURE__*/_jsx(Pressable, _extends({
     ref: ref,
     accessibilityHint: accessibilityHint,
@@ -83,6 +84,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
         indeterminate: true,
         color: colorValue,
         size: progressCircleSize != null ? progressCircleSize : iconSizeValue,
+        style: styles == null ? void 0 : styles.progressCircle,
         testID: props.testID ? props.testID + "-progress-circle" : undefined,
         weight: "thin"
       })
@@ -94,7 +96,10 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       color: colorValue,
       name: name,
       size: iconSize,
-      style: sizingStyle
+      style: sizingStyle,
+      styles: {
+        icon: styles == null ? void 0 : styles.icon
+      }
     })
   }));
 }));

package/esm/buttons/__stories__/IconButton.stories.js

@@ -182,6 +182,71 @@ const IconButtonScreen = () => {
           })]
         })
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Icon Glyph Styles",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsxs(Box, {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Custom color via styles.icon",
+            name: iconName,
+            styles: {
+              icon: {
+                color: 'dodgerblue'
+              }
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Custom color via styles.icon"
+          })]
+        }), /*#__PURE__*/_jsxs(Box, {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Rotated icon via styles.icon",
+            name: iconName,
+            styles: {
+              icon: {
+                transform: [{
+                  rotate: '45deg'
+                }]
+              }
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Rotated icon via styles.icon"
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Progress Circle Styles",
+      children: /*#__PURE__*/_jsx(VStack, {
+        gap: 2,
+        children: /*#__PURE__*/_jsxs(Box, {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            loading: true,
+            accessibilityLabel: "Reduced opacity progress circle",
+            name: iconName,
+            styles: {
+              progressCircle: {
+                opacity: 0.3
+              }
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Reduced opacity"
+          })]
+        })
+      })
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
       title: "Loading",

package/esm/system/__stories__/componentConfigStickerSheet/StickerSheet.js

@@ -16,6 +16,7 @@ import { SearchExample } from './examples/Search';
 import { SegmentedTabsExample } from './examples/SegmentedTabs';
 import { SelectExample } from './examples/Select';
 import { SelectChipExample } from './examples/SelectChip';
+import { TabsExample } from './examples/Tabs';
 import { TagExample } from './examples/Tag';
 import { TextInputExample } from './examples/TextInput';
 import { Container } from './Container';
@@ -38,6 +39,9 @@ export const StickerSheet = /*#__PURE__*/memo(() => {
         }), /*#__PURE__*/_jsx(Container, {
           title: "Segmented Tabs",
           children: /*#__PURE__*/_jsx(SegmentedTabsExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Tabs",
+          children: /*#__PURE__*/_jsx(TabsExample, {})
         }), /*#__PURE__*/_jsx(Container, {
           title: "Select Input (SelectOption)",
           children: /*#__PURE__*/_jsx(SelectExample, {})

package/esm/system/__stories__/componentConfigStickerSheet/customComponentConfig.js

@@ -119,5 +119,10 @@ export const customComponentConfig = {
     return _extends({}, spacingVariant === 'normal' ? {
       minHeight: 36
     } : {});
+  },
+  Tabs: {
+    activeColor: 'fg',
+    color: 'fgMuted',
+    activeBackground: 'fg'
   }
 };

package/esm/system/__stories__/componentConfigStickerSheet/examples/Tabs.js

@@ -0,0 +1,24 @@
+import React, { memo, useState } from 'react';
+import { Tabs } from '../../../../tabs/Tabs';
+import { jsx as _jsx } from "react/jsx-runtime";
+const tabs = [{
+  id: 'orderBook',
+  label: 'Order book'
+}, {
+  id: 'tradeHistory',
+  label: 'Trade history'
+}, {
+  id: 'orders',
+  label: 'Orders'
+}];
+export const TabsExample = /*#__PURE__*/memo(() => {
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return /*#__PURE__*/_jsx(Tabs, {
+    accessibilityLabel: "Market views",
+    activeTab: activeTab,
+    background: "bg",
+    gap: 4,
+    onChange: setActiveTab,
+    tabs: tabs
+  });
+});

package/esm/tabs/DefaultTab.js

@@ -1,4 +1,4 @@
-const _excluded = ["id", "label", "disabled", "onPress", "count", "max", "accessibilityLabel", "style", "testID"];
+const _excluded = ["id", "label", "disabled", "onPress", "count", "max", "accessibilityLabel", "style", "testID", "color", "activeColor"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo, useCallback, useMemo } from 'react';
@@ -22,7 +22,9 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
       max,
       accessibilityLabel,
       style,
-      testID
+      testID,
+      color = 'fg',
+      activeColor = 'fgPrimary'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -60,7 +62,7 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
       alignItems: "center",
       gap: 0.5,
       children: [/*#__PURE__*/_jsx(Text, {
-        color: isActive ? 'fgPrimary' : 'fg',
+        color: isActive ? activeColor : color,
         font: "headline",
         style: labelPaddingStyle,
         children: label

package/esm/tabs/DefaultTabsActiveIndicator.js

@@ -7,8 +7,7 @@ import { Box } from '../layout';
 import { tabsSpringConfig } from './Tabs';
 
 /**
- * Default underline-style indicator for mobile `Tabs`. Pass as
- * `TabsActiveIndicatorComponent={DefaultTabsActiveIndicator}` with `TabComponent={DefaultTab}`.
+ * Default underline-style indicator for mobile `Tabs`.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const AnimatedBox = Animated.createAnimatedComponent(Box);

package/esm/tabs/Tabs.js

@@ -1,5 +1,5 @@
 const _excluded = ["id", "registerRef"],
-  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "disabled", "onChange", "styles", "style", "role", "position", "alignSelf", "opacity", "onActiveTabElementChange", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "testID"],
+  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "color", "activeColor", "activeTab", "disabled", "onChange", "styles", "style", "role", "position", "alignSelf", "opacity", "onActiveTabElementChange", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "testID"],
   _excluded3 = ["id", "Component"],
   _excluded4 = ["activeTabRect", "position", "style", "testID"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -42,6 +42,8 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       TabComponent = DefaultTab,
       TabsActiveIndicatorComponent = DefaultTabsActiveIndicator,
       activeBackground,
+      color,
+      activeColor,
       activeTab,
       disabled,
       onChange,
@@ -100,6 +102,7 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     borderRadius: borderRadius,
     borderTopLeftRadius: borderTopLeftRadius,
     borderTopRightRadius: borderTopRightRadius,
+    color: color,
     onLayout: updateActiveTabRect,
     opacity: opacity != null ? opacity : disabled ? accessibleOpacityDisabled : 1,
     position: position,
@@ -119,20 +122,23 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
         borderTopRightRadius: borderTopRightRadius,
         style: styles == null ? void 0 : styles.activeIndicator,
         testID: testID ? testID + "-active-indicator" : undefined
-      }), tabs.map(_ref2 => {
-        let {
+      }), tabs.map(tabProps => {
+        const {
             id,
             Component: CustomTabComponent
-          } = _ref2,
-          props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+          } = tabProps,
+          tabRest = _objectWithoutPropertiesLoose(tabProps, _excluded3);
         const RenderedTab = CustomTabComponent != null ? CustomTabComponent : TabComponent;
+        const renderedTabProps = _extends({}, tabRest, {
+          activeColor,
+          color,
+          id,
+          style: styles == null ? void 0 : styles.tab
+        });
         return /*#__PURE__*/_jsx(TabContainer, {
           id: id,
           registerRef: registerRef,
-          children: /*#__PURE__*/_jsx(RenderedTab, _extends({
-            id: id,
-            style: styles == null ? void 0 : styles.tab
-          }, props))
+          children: /*#__PURE__*/_jsx(RenderedTab, _extends({}, renderedTabProps))
         }, id);
       })]
     })
@@ -140,14 +146,14 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
 }));
 TabsComponent.displayName = 'Tabs';
 export const Tabs = TabsComponent;
-export const TabsActiveIndicator = _ref3 => {
+export const TabsActiveIndicator = _ref2 => {
   let {
       activeTabRect,
       position = 'absolute',
       style,
       testID = 'tabs-active-indicator'
-    } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded4);
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded4);
   const previousActiveTabRect = useRef(activeTabRect);
   const newActiveTabRect = {
     x: activeTabRect.x,

package/esm/tabs/__stories__/SegmentedTabs.stories.js

@@ -292,7 +292,14 @@ const SegmentedTabsScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
     defaultActiveTab: basicSegments[0],
     tabs: basicSegments,
     title: "Border Radius"
-  }), /*#__PURE__*/_jsx(CustomStylesExample, {}), /*#__PURE__*/_jsx(IconLabelsExample, {})]
+  }), /*#__PURE__*/_jsx(CustomStylesExample, {}), /*#__PURE__*/_jsx(IconLabelsExample, {}), /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    activeBackground: "bgPositiveWash",
+    activeColor: "bgPositive",
+    color: "fgMuted",
+    defaultActiveTab: basicSegments[0],
+    tabs: basicSegments,
+    title: "Label Colors"
+  })]
 });
 const CustomStylesExample = () => {
   const theme = useTheme();

package/esm/tabs/__stories__/Tabs.stories.js

@@ -97,7 +97,6 @@ const TabsWithPanelsExample = () => {
         children: "Pair tab buttons with content regions that follow the active tab (see panel below)."
       }), /*#__PURE__*/_jsx(Tabs, {
         TabComponent: DefaultTab,
-        TabsActiveIndicatorComponent: DefaultTabsActiveIndicator,
         accessibilityLabel: "Content sections",
         activeBackground: "bg",
         activeTab: activeTab,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.69.1",
+  "version": "8.71.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -196,7 +196,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.69.1",
+    "@coinbase/cds-common": "^8.71.0",
     "@coinbase/cds-icons": "^5.16.0",
     "@coinbase/cds-illustrations": "^4.38.0",
     "@coinbase/cds-lottie-files": "^3.3.4",