@coinbase/cds-web 9.0.2 → 9.1.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.1.0 (5/26/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support DotCount theming. [[#723](https://github.com/coinbase/cds/pull/723)]
+
 ## 9.0.2 (5/22/2026 PST)
 
 #### 🐞 Fixes

package/dts/dots/DotCount.d.ts

@@ -6,11 +6,13 @@ import type {
   SharedAccessibilityProps,
   SharedProps,
 } from '@coinbase/cds-common/types';
+import { type BoxBaseProps } from '../layout/Box';
 export type DotCountBaseProps = SharedProps &
   Pick<
     SharedAccessibilityProps,
     'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'
-  > & {
+  > &
+  Omit<BoxBaseProps, 'children' | 'color' | 'background' | 'pin' | 'height'> & {
     /**
      * The number value to be shown in the dot. If count is <= 0, dot will not show up.
      *  */
@@ -32,21 +34,16 @@ export type DotCountBaseProps = SharedProps &
     /** Indicates what shape Dot is overlapping */
     overlap?: DotOverlap;
     /**
-     * An optional fixed height of the DotCount component.
-     * Width grows based on content length.
+     * Fixed height of the DotCount badge container. Width grows based on content length.
      * @default 24
-     * */
-    height?: number;
-    /**
-     * An optional fixed width of the DotCount component.
-     * By default, width grows based on content length.
-     * @default auto
-     * */
-    width?: number;
+     */
+    height?: BoxBaseProps['height'];
   };
 export type DotCountProps = DotCountBaseProps & {
+  /** Class name for the root element */
   className?: string;
-  style?: React.CSSProperties;
+  /** Color token for the count label */
+  color?: BoxBaseProps['color'];
   /** Custom class names for individual elements of the DotCount component */
   classNames?: {
     /** Root element */

package/dts/dots/DotCount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DotCount.d.ts","sourceRoot":"","sources":["../../src/dots/DotCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAS7C,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EAChB,UAAU,EACV,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAmCpC,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GAAG;IACF;;UAEM;IACN,KAAK,EAAE,MAAM,CAAC;IACd;;;UAGM;IACN,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;SAGK;IACL,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;;SAIK;IACL,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;SAIK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,2EAA2E;IAC3E,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,wBAAwB;QACxB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,sEAAsE;IACtE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,wBAAwB;QACxB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,QAAQ,qCAAiB,aAAa,6CAqFjD,CAAC"}
+{"version":3,"file":"DotCount.d.ts","sourceRoot":"","sources":["../../src/dots/DotCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAS7C,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EAChB,UAAU,EACV,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAQpC,OAAO,EAAO,KAAK,YAAY,EAAyC,MAAM,eAAe,CAAC;AAkB9F,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,KAAK,GAAG,QAAQ,CAAC,GAAG;IAC3E;;UAEM;IACN,KAAK,EAAE,MAAM,CAAC;IACd;;;UAGM;IACN,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;SAGK;IACL,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;CACjC,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC9C,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B,2EAA2E;IAC3E,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,wBAAwB;QACxB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,sEAAsE;IACtE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,wBAAwB;QACxB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,QAAQ,qCAAiB,aAAa,6CA6GjD,CAAC"}

package/esm/dots/DotCount.css

@@ -1,2 +1 @@
-@layer cds{.baseCss-b1qqkfau{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;position:relative;}
-.dotCountContentCss-dqpqhs5{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-style:solid;border-width:var(--borderWidth-100);border-radius:var(--borderRadius-400);padding-inline-start:var(--space-0_75);padding-inline-end:var(--space-0_75);}}
+@layer cds{.baseCss-b1qqkfau{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;position:relative;}}

package/esm/dots/DotCount.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "pin", "variant", "count", "max", "height", "width", "testID", "accessibilityLabel", "overlap", "className", "classNames", "style", "styles"];
+const _excluded = ["children", "pin", "variant", "count", "max", "height", "width", "testID", "accessibilityLabel", "overlap", "className", "classNames", "style", "styles", "alignItems", "justifyContent", "display", "paddingX", "borderWidth", "borderRadius", "borderColor", "font", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -14,13 +14,13 @@ import { m as motion } from 'framer-motion';
 import { NewAnimatePresence } from '../animation/NewAnimatePresence';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout/Box';
 import { useMotionProps } from '../motion/useMotionProps';
 import { Text } from '../typography/Text';
 import { getTransform } from './dotStyles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MotionBox = motion(Box);
 const baseCss = "baseCss-b1qqkfau";
-const dotCountContentCss = "dotCountContentCss-dqpqhs5";
 const variantColorMap = {
   negative: 'fgNegative'
 };
@@ -34,62 +34,78 @@ export const DotCount = /*#__PURE__*/memo(_props => {
       max,
       height = dotCountSize,
       width,
-      testID,
+      testID = 'dot-count',
       accessibilityLabel,
       overlap,
       className,
       classNames,
       style,
-      styles
+      styles,
+      alignItems = 'center',
+      justifyContent = 'center',
+      display = 'flex',
+      paddingX = 0.75,
+      borderWidth = 100,
+      borderRadius = 400,
+      borderColor = 'bgSecondary',
+      font = 'caption',
+      color = 'fgInverse',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
-  const {
-    color
-  } = useTheme();
   const pinStyles = getTransform(pin, overlap);
-  const containerStyles = useMemo(() => {
-    const variantColor = variantColorMap[variant];
-    return _objectSpread(_objectSpread({
-      height,
-      minWidth: height,
-      width,
-      backgroundColor: color[variantColor],
-      borderColor: color.bgSecondary
-    }, pinStyles), styles === null || styles === void 0 ? void 0 : styles.container);
-  }, [height, width, color, pinStyles, styles === null || styles === void 0 ? void 0 : styles.container, variant]);
+  const containerStyle = useMemo(() => _objectSpread(_objectSpread({}, pinStyles), styles === null || styles === void 0 ? void 0 : styles.container), [pinStyles, styles === null || styles === void 0 ? void 0 : styles.container]);
   const motionProps = useMotionProps({
     enterConfigs: [dotOpacityEnterConfig, dotScaleEnterConfig],
     exitConfigs: [dotOpacityExitConfig, dotScaleExitConfig],
     exit: 'exit'
   });
   const rootStyles = useMemo(() => _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root), [styles === null || styles === void 0 ? void 0 : styles.root, style]);
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+  const displayCount = useMemo(() => parseDotCountMaxOverflow(count, max), [count, max]);
+  return /*#__PURE__*/_jsxs("div", {
     "aria-label": accessibilityLabel,
     className: cx(baseCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     "data-testid": testID,
-    style: rootStyles
-  }, props), {}, {
+    style: rootStyles,
     children: [children, /*#__PURE__*/_jsx(NewAnimatePresence, {
       children: count > 0 &&
       /*#__PURE__*/
       // TODO: Remove type assertion after upgrading framer-motion to v11+ for React 19 compatibility
-      _jsx(motion.div, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, motionProps), {}, {
-        className: cx(dotCountContentCss, classNames === null || classNames === void 0 ? void 0 : classNames.container),
+      _jsx(MotionBox, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, motionProps), {}, {
+        alignItems,
+        background: variantColorMap[variant],
+        borderColor,
+        borderRadius,
+        borderWidth,
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.container,
         'data-testid': 'dotcount-container',
-        style: containerStyles
-      })), {}, {
+        display,
+        height,
+        justifyContent,
+        minWidth: height,
+        paddingX,
+        style: containerStyle,
+        width
+      }, props)), {}, {
         children: /*#__PURE__*/_jsx(Text, {
           as: "p",
           className: classNames === null || classNames === void 0 ? void 0 : classNames.text,
-          color: "fgInverse",
+          color: color,
           display: "block",
-          font: "caption",
+          font: font,
+          fontFamily: fontFamily,
+          fontSize: fontSize,
+          fontWeight: fontWeight,
+          lineHeight: lineHeight,
           style: styles === null || styles === void 0 ? void 0 : styles.text,
           textAlign: "center",
-          children: parseDotCountMaxOverflow(count, max)
+          children: displayCount
         })
       }))
     })]
-  }));
+  });
 });
 import "./DotCount.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.0.2",
+  "version": "9.1.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -215,7 +215,7 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.0.2",
+    "@coinbase/cds-common": "^9.1.0",
     "@coinbase/cds-icons": "^5.17.0",
     "@coinbase/cds-illustrations": "^4.40.1",
     "@coinbase/cds-lottie-files": "^3.3.4",