@coinbase/cds-mobile 9.2.2 → 9.3.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.3.0 (6/11/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support tooltip theming. [[#753](https://github.com/coinbase/cds/pull/753)]
+
 ## 9.2.2 (6/10/2026 PST)
 
 #### 🐞 Fixes

package/dts/overlays/tooltip/InternalTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InternalTooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/InternalTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAahE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAG3D,eAAO,MAAM,eAAe,kDAmF1B,CAAC"}
+{"version":3,"file":"InternalTooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/InternalTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAahE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAG3D,eAAO,MAAM,eAAe,kDAqG1B,CAAC"}

package/dts/overlays/tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4E,MAAM,OAAO,CAAC;AACjG,OAAO,EAAE,KAAK,kBAAkB,EAA4C,MAAM,cAAc,CAAC;AAMjG,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGtE,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAEjC,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG;IAC5C;;OAEG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,OAAO,qCAAiB,YAAY,6CA8K/C,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4E,MAAM,OAAO,CAAC;AACjG,OAAO,EAAE,KAAK,kBAAkB,EAA4C,MAAM,cAAc,CAAC;AAWjG,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGtE,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAEjC,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG;IAC5C;;OAEG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,OAAO,qCAAiB,YAAY,6CAsM/C,CAAC"}

package/dts/overlays/tooltip/TooltipProps.d.ts

@@ -6,9 +6,11 @@ import type {
   SharedAccessibilityProps,
   SharedProps,
 } from '@coinbase/cds-common/types';
+import type { BoxBaseProps } from '../../layout/Box';
 export type TooltipPlacement = Extract<BaseTooltipPlacement, 'bottom' | 'top'>;
 export type TooltipBaseProps = SharedProps &
-  ElevationProps & {
+  ElevationProps &
+  Omit<BoxBaseProps, 'children' | 'gap' | 'opacity' | 'pin'> & {
     /** Position of tooltip in relation to the subject. */
     placement?: TooltipPlacement;
     children: React.ReactElement;
@@ -91,7 +93,8 @@ export type InternalTooltipProps = SharedAccessibilityProps &
     | 'yShiftByStatusBarHeight'
     | 'invertColorScheme'
     | 'elevation'
-  > & {
+  > &
+  Omit<BoxBaseProps, 'children' | 'gap' | 'opacity' | 'pin'> & {
     subjectLayout: SubjectLayout | undefined;
     opacity: Animated.Value;
     animateIn: Animated.CompositeAnimation;

package/dts/overlays/tooltip/TooltipProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipProps.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EACV,oBAAoB,EACpB,cAAc,EACd,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,oBAAoB,EAAE,QAAQ,GAAG,KAAK,CAAC,CAAC;AAE/E,MAAM,MAAM,gBAAgB,GAAG,WAAW,GACxC,cAAc,GAAG;IACf,sDAAsD;IACtD,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,gDAAgD;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iIAAiI;IACjI,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;;;OAKG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IACpE;;;;OAIG;IACH,4BAA4B,CAAC,EAAE,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IAC9E;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;IAC5E;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;CACnE,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C,kEAAkE;AAClE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,GACzD,IAAI,CACF,YAAY,EACV,SAAS,GACT,WAAW,GACX,KAAK,GACL,QAAQ,GACR,yBAAyB,GACzB,mBAAmB,GACnB,WAAW,CACd,GAAG;IACF,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;IACzC,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC;IACxB,SAAS,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IACvC,UAAU,EAAE,QAAQ,CAAC,KAAK,CAAC;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAC3D,kBAAkB,CAAC,EAAE,SAAS,CAAC,oBAAoB,CAAC,CAAC;CACtD,CAAC;AAEJ,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;IACzC,aAAa,EAAE,eAAe,CAAC;CAChC,GAAG,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,yBAAyB,CAAC,CAAC"}
+{"version":3,"file":"TooltipProps.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipProps.ts"],"names":[],"mappings":"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"}

package/esm/overlays/tooltip/InternalTooltip.js

@@ -1,4 +1,4 @@
-const _excluded = ["subjectLayout", "content", "placement", "opacity", "animateIn", "translateY", "gap", "yShiftByStatusBarHeight", "testID", "onAccessibilityEscape", "onAccessibilityTap", "elevation"];
+const _excluded = ["subjectLayout", "content", "placement", "opacity", "animateIn", "translateY", "gap", "yShiftByStatusBarHeight", "testID", "onAccessibilityEscape", "onAccessibilityTap", "elevation", "background", "borderRadius", "maxWidth", "paddingX", "paddingY", "color", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight"];
 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, { memo, useEffect, useMemo, useRef } from 'react';
@@ -23,7 +23,18 @@ export const InternalTooltip = /*#__PURE__*/memo(function InternalTooltip(_ref)
       testID,
       onAccessibilityEscape,
       onAccessibilityTap,
-      elevation
+      elevation,
+      background = 'bg',
+      borderRadius = 200,
+      maxWidth = tooltipMaxWidth,
+      paddingX = tooltipPaddingX,
+      paddingY = tooltipPaddingY,
+      color = 'fg',
+      font = 'label2',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -61,13 +72,13 @@ export const InternalTooltip = /*#__PURE__*/memo(function InternalTooltip(_ref)
     style: outerTooltipStyles,
     children: /*#__PURE__*/_jsx(Box, _extends({
       animated: true,
-      background: "bg",
-      borderRadius: 200,
+      background: background,
+      borderRadius: borderRadius,
       elevation: elevation,
-      maxWidth: tooltipMaxWidth,
+      maxWidth: maxWidth,
       opacity: opacity,
-      paddingX: tooltipPaddingX,
-      paddingY: tooltipPaddingY,
+      paddingX: paddingX,
+      paddingY: paddingY,
       style: {
         transform: [{
           translateY
@@ -76,8 +87,12 @@ export const InternalTooltip = /*#__PURE__*/memo(function InternalTooltip(_ref)
       testID: testID
     }, props, {
       children: typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
-        color: "fg",
-        font: "label2",
+        color: color,
+        font: font,
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        lineHeight: lineHeight,
         children: content
       }) : content
     }))

package/esm/overlays/tooltip/Tooltip.js

@@ -1,6 +1,9 @@
+const _excluded = ["children", "content", "placement", "onCloseTooltip", "onOpenTooltip", "gap", "yShiftByStatusBarHeight", "testID", "accessibilityLabel", "accessibilityHint", "accessibilityLabelForContent", "accessibilityHintForContent", "accessibilityState", "visible", "invertColorScheme", "elevation", "openDelay", "closeDelay", "background", "borderRadius", "maxWidth", "paddingX", "paddingY", "color", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight"];
 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, { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Modal as RNModal, TouchableOpacity, View } from 'react-native';
+import { tooltipMaxWidth, tooltipPaddingX, tooltipPaddingY } from '@coinbase/cds-common/tokens/tooltip';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { InvertedThemeProvider } from '../../system/ThemeProvider';
 import { InternalTooltip } from './InternalTooltip';
@@ -9,25 +12,37 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Tooltip = /*#__PURE__*/memo(_props => {
   const mergedProps = useComponentConfig('Tooltip', _props);
   const {
-    children,
-    content,
-    placement = 'top',
-    onCloseTooltip,
-    onOpenTooltip,
-    gap = 1,
-    yShiftByStatusBarHeight,
-    testID,
-    accessibilityLabel,
-    accessibilityHint,
-    accessibilityLabelForContent,
-    accessibilityHintForContent,
-    accessibilityState,
-    visible,
-    invertColorScheme = true,
-    elevation,
-    openDelay,
-    closeDelay
-  } = mergedProps;
+      children,
+      content,
+      placement = 'top',
+      onCloseTooltip,
+      onOpenTooltip,
+      gap = 1,
+      yShiftByStatusBarHeight,
+      testID,
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityLabelForContent,
+      accessibilityHintForContent,
+      accessibilityState,
+      visible,
+      invertColorScheme = true,
+      elevation,
+      openDelay,
+      closeDelay,
+      background = 'bg',
+      borderRadius = 200,
+      maxWidth = tooltipMaxWidth,
+      paddingX = tooltipPaddingX,
+      paddingY = tooltipPaddingY,
+      color = 'fg',
+      font = 'label2',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const subjectRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const isVisible = visible !== false && isOpen;
@@ -138,16 +153,27 @@ export const Tooltip = /*#__PURE__*/memo(_props => {
       }), /*#__PURE__*/_jsx(WrapperComponent, {
         children: /*#__PURE__*/_jsx(InternalTooltip, _extends({
           animateIn: animateIn,
+          background: background,
+          borderRadius: borderRadius,
+          color: color,
           content: content,
           elevation: elevation,
+          font: font,
+          fontFamily: fontFamily,
+          fontSize: fontSize,
+          fontWeight: fontWeight,
           gap: gap,
+          lineHeight: lineHeight,
+          maxWidth: maxWidth,
           opacity: opacity,
+          paddingX: paddingX,
+          paddingY: paddingY,
           placement: placement,
           subjectLayout: subjectLayout,
           testID: testID,
           translateY: translateY,
           yShiftByStatusBarHeight: yShiftByStatusBarHeight
-        }, accessibilityPropsForContent))
+        }, props, accessibilityPropsForContent))
       })]
     })]
   });

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

@@ -19,6 +19,7 @@ import { SelectChipExample } from './examples/SelectChip';
 import { TabsExample } from './examples/Tabs';
 import { TagExample } from './examples/Tag';
 import { TextInputExample } from './examples/TextInput';
+import { TooltipExample } from './examples/Tooltip';
 import { Container } from './Container';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const StickerSheet = /*#__PURE__*/memo(() => {
@@ -91,6 +92,9 @@ export const StickerSheet = /*#__PURE__*/memo(() => {
         }), /*#__PURE__*/_jsx(Container, {
           title: "Coachmark",
           children: /*#__PURE__*/_jsx(CoachmarkExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Tooltip",
+          children: /*#__PURE__*/_jsx(TooltipExample, {})
         })]
       })]
     })

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

@@ -48,6 +48,8 @@ export const customComponentConfig = {
     controlColor: props.checked ? 'bgAlternate' : 'fg'
   }),
   Tooltip: {
+    background: 'bgSecondary',
+    font: 'body',
     invertColorScheme: false
   },
   Radio: props => ({

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

@@ -0,0 +1,20 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import { Button } from '../../../../buttons/Button';
+import { Tooltip } from '../../../../overlays/tooltip/Tooltip';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TooltipExample = /*#__PURE__*/memo(() => {
+  return /*#__PURE__*/_jsx(Tooltip, {
+    accessibilityHint: "Additional information about this action",
+    accessibilityLabel: "Show tooltip",
+    content: "Additional information about this action",
+    children: /*#__PURE__*/_jsx(View, {
+      accessibilityElementsHidden: true,
+      pointerEvents: "none",
+      children: /*#__PURE__*/_jsx(Button, {
+        variant: "secondary",
+        children: "Show Tooltip"
+      })
+    })
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.2.2",
+  "version": "9.3.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -206,7 +206,7 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.2.2",
+    "@coinbase/cds-common": "^9.3.0",
     "@coinbase/cds-icons": "^5.19.0",
     "@coinbase/cds-illustrations": "^4.41.0",
     "@coinbase/cds-lottie-files": "^3.3.4",