@coinbase/cds-mcp-server 9.6.4 → 9.6.6

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.6.6 (7/14/2026 PST)
+
+This is an artificial version bump with no new change.
+
+## 9.6.5 (7/13/2026 PST)
+
+This is an artificial version bump with no new change.
+
 ## 9.6.4 ((7/13/2026, 07:14 AM PST))
 
 This is an artificial version bump with no new change.

package/mcp-docs/mobile/components/RollingNumber.txt

@@ -276,6 +276,28 @@ function ColorAndTransition() {
 }
 ```
 
+### Custom, Non-Token Color
+
+To apply a non-token color (e.g. a hex string), set `color` via `styles.text`.
+
+```tsx
+function CustomColor() {
+  const price = 12345.67;
+  return (
+    <RollingNumber
+      font="title1"
+      format={{ style: 'currency', currency: 'USD' }}
+      styles={{ text: { color: '#6366f1' } }}
+      value={price}
+    />
+  );
+}
+```
+
+:::warning
+`colorPulseOnUpdate` will not work when a custom color is set.
+:::
+
 ### Digit Transition Variants
 
 RollingNumber supports two digit transition styles via the `digitTransitionVariant` prop:
@@ -729,8 +751,8 @@ ValueSection
 | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
 | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
 | `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
-| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `'fg'` | Base text color token. When {@link colorPulseOnUpdate } is true, the color briefly pulses to a positive or negative mid color before returning to this base color. |
-| `colorPulseOnUpdate` | `boolean` | No | `-` | Enables color pulsing on positive or negative changes. |
+| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `'fg'` | Base text color token. When {@link colorPulseOnUpdate } is true, the color briefly pulses to a positive or negative mid color before returning to this base color.  Only CDS design token colors are accepted here. To apply a non-token color (e.g. a hex string), use styles={{ text: { color: #FF0000 } }} instead. |
+| `colorPulseOnUpdate` | `boolean` | No | `-` | Enables color pulsing on positive or negative changes. Overriding the default color using styles.text nullifies the effect. |
 | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
 | `dangerouslySetBackground` | `string \| OpaqueColorValue` | No | `-` | - |
 | `dangerouslySetColor` | `string \| OpaqueColorValue` | No | `-` | - |
@@ -831,15 +853,15 @@ ValueSection
 
 | Selector | Static class name | Description |
 | --- | --- | --- |
-| `root` | `-` | Outer container element |
-| `visibleContent` | `-` | Animated visible content wrapper |
-| `formattedValueSection` | `-` | Formatted numeric value wrapper |
-| `prefix` | `-` | Prefix section (from props) |
-| `suffix` | `-` | Suffix section (from props) |
-| `i18nPrefix` | `-` | Prefix from Intl.NumberFormat (e.g. $ in $1,000) |
-| `i18nSuffix` | `-` | Suffix from Intl.NumberFormat (e.g. K in 100K) |
-| `integer` | `-` | Integer portion of formatted value |
-| `fraction` | `-` | Fractional portion of formatted value |
-| `text` | `-` | Text element for digits and symbols |
+| `root` | `-` | Outer container element. |
+| `visibleContent` | `-` | Wrapper around the visible number (prefix, value, and suffix). |
+| `formattedValueSection` | `-` | Wrapper around the formatted numeric value (the four i18n sections). |
+| `prefix` | `-` | Container for the prefix prop content. |
+| `suffix` | `-` | Container for the suffix prop content. |
+| `i18nPrefix` | `-` | Container for the Intl.NumberFormat-generated prefix (e.g. $ in $1,000). |
+| `i18nSuffix` | `-` | Container for the Intl.NumberFormat-generated suffix (e.g. K in 100K). |
+| `integer` | `-` | Container for the integer portion of the value. |
+| `fraction` | `-` | Container for the fractional portion of the value. |
+| `text` | `-` | Style applied to every text element — digits, symbols, prefix text, and suffix text. Set color here to apply a custom (non-token) text color. |
 
 

package/mcp-docs/web/components/RollingNumber.txt

@@ -336,6 +336,27 @@ function Example() {
 }
 ```
 
+### Custom, Non-Token Color
+
+To apply a non-token color (e.g. a hex string) to the whole number, set `color` via the `style` prop. To color individual parts (prefix, suffix, integer, fraction, etc.), set `color` on the corresponding key of the `styles` object.
+
+```tsx live
+function Example() {
+  return (
+    <RollingNumber
+      font="title1"
+      format={{ style: 'currency', currency: 'USD' }}
+      style={{ color: '#6366f1' }}
+      value={12345.67}
+    />
+  );
+}
+```
+
+:::warning
+`colorPulseOnUpdate` will not work when a custom color is set.
+:::
+
 ### Digit Transition Variants
 
 RollingNumber supports two digit transition styles via the `digitTransitionVariant` prop:
@@ -1036,8 +1057,8 @@ ValueSection
 | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
 | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
 | `classNames` | `{ root?: string; visibleContent?: string \| undefined; formattedValueSection?: string \| undefined; prefix?: string \| undefined; suffix?: string \| undefined; i18nPrefix?: string \| undefined; i18nSuffix?: string \| undefined; integer?: string \| undefined; fraction?: string \| undefined; text?: string \| undefined; } \| undefined` | No | `-` | Custom class names for individual elements of the RollingNumber component |
-| `color` | `((Color \| ResponsiveValue<Color>) & Color) \| undefined` | No | `'fg'` | Base text color token. When {@link colorPulseOnUpdate } is true, the color briefly pulses to a positive or negative mid color before returning to this base color. |
-| `colorPulseOnUpdate` | `boolean` | No | `-` | Enables color pulsing on positive or negative changes. |
+| `color` | `((Color \| ResponsiveValue<Color>) & Color) \| undefined` | No | `'fg'` | Base text color token. When {@link colorPulseOnUpdate } is true, the color briefly pulses to a positive or negative mid color before returning to this base color.  To apply a non-token color (e.g. a hex string), set color via an inline style or className instead (style, styles.root, styles.visibleContent, styles.text, or classNames). A custom color is not compatible with {@link colorPulseOnUpdate }. |
+| `colorPulseOnUpdate` | `boolean` | No | `-` | Enables color pulsing on positive or negative changes. Only works with the token-driven {@link color } prop — it will not work if a custom color is applied via an inline style or className. |
 | `columnGap` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
 | `dangerouslySetBackground` | `string` | No | `-` | - |
 | `dangerouslySetColor` | `string` | No | `-` | - |
@@ -1133,15 +1154,15 @@ ValueSection
 
 | Selector | Static class name | Description |
 | --- | --- | --- |
-| `root` | `-` | Outer container element |
-| `visibleContent` | `-` | Animated visible content wrapper |
-| `formattedValueSection` | `-` | Formatted numeric value wrapper |
-| `prefix` | `-` | Prefix section (from props) |
-| `suffix` | `-` | Suffix section (from props) |
-| `i18nPrefix` | `-` | Prefix from Intl.NumberFormat (e.g. $ in $1,000) |
-| `i18nSuffix` | `-` | Suffix from Intl.NumberFormat (e.g. K in 100K) |
-| `integer` | `-` | Integer portion of formatted value |
-| `fraction` | `-` | Fractional portion of formatted value |
-| `text` | `-` | Text element for digits and symbols |
+| `root` | `-` | Outer container element. |
+| `visibleContent` | `-` | Wrapper around the visible number (prefix, value, and suffix). |
+| `formattedValueSection` | `-` | Wrapper around the formatted numeric value (the four i18n sections). |
+| `prefix` | `-` | Container for the prefix prop content. |
+| `suffix` | `-` | Container for the suffix prop content. |
+| `i18nPrefix` | `-` | Container for the Intl.NumberFormat-generated prefix (e.g. $ in $1,000). |
+| `i18nSuffix` | `-` | Container for the Intl.NumberFormat-generated suffix (e.g. K in 100K). |
+| `integer` | `-` | Container for the integer portion of the value. |
+| `fraction` | `-` | Container for the fractional portion of the value. |
+| `text` | `-` | Style applied to every text element — digits, symbols, prefix text, and suffix text. |
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "9.6.4",
+  "version": "9.6.6",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",