@coinbase/cds-mcp-server 8.47.1 → 8.47.2

package/CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.47.2 ((2/19/2026, 03:18 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.47.1 ((2/19/2026, 01:18 PM PST))
 
 This is an artificial version bump with no new change.

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

@@ -87,7 +87,12 @@ Use `mediaPlacement` to control the position of media content.
 
 ### Upsell Card Styles
 
-MessagingCard with `type="upsell"` supports various background colors to match different promotional purposes. Use the `background` prop for semantic tokens, or `dangerouslySetBackground` for custom spectrum colors.
+MessagingCard with `type="upsell"` supports various background colors to match different promotional purposes. Use the `background` prop for semantic tokens.
+
+For **custom background colors**, use the recommended approach:
+
+- **Non-interactive cards** (`renderAsPressable={false}` or omitted): set the background via `styles.root` (e.g. `styles={{ root: { backgroundColor: 'rgb(...)' } }}`).
+- **Interactive cards** (`renderAsPressable` with `onPress`): set the background via `blendStyles.background` (e.g. `blendStyles={{ background: 'rgb(...)' }}`) so press states are handled correctly.
 
 #### General Upsell
 
@@ -152,7 +157,7 @@ function FeatureUpsell() {
         <MessagingCard
           key={i}
           type="upsell"
-          dangerouslySetBackground={card.bg}
+          styles={{ root: { backgroundColor: card.bg } }}
           title={
             <Text color="fgInverse" font="headline">
               Up to 3.29% APR on ETH
@@ -194,7 +199,7 @@ function CommunityUpsell() {
         <MessagingCard
           key={i}
           type="upsell"
-          dangerouslySetBackground={card.bg}
+          styles={{ root: { backgroundColor: card.bg } }}
           title={
             <Text color="fgInverse" font="headline">
               Join the community
@@ -256,7 +261,7 @@ function ProductUpsell() {
         <MessagingCard
           key={card.title}
           type="upsell"
-          dangerouslySetBackground={card.bg}
+          styles={{ root: { backgroundColor: card.bg } }}
           title={
             <Text color="fgInverse" font="headline">
               {card.title}
@@ -303,7 +308,7 @@ function NewsUpsell() {
         <MessagingCard
           key={i}
           type="upsell"
-          dangerouslySetBackground={card.bg}
+          styles={{ root: { backgroundColor: card.bg } }}
           title={
             <Text color="fgInverse" font="headline">
               Help defend crypto in America
@@ -378,7 +383,7 @@ function DismissibleCards() {
     <VStack gap={2}>
       <MessagingCard
         type="upsell"
-        dangerouslySetBackground={`rgb(${spectrum.teal70})`}
+        styles={{ root: { backgroundColor: `rgb(${spectrum.teal70})` } }}
         title="Dismissible Upsell"
         description="Upsell card with dismiss button"
         width={320}
@@ -578,8 +583,10 @@ function DismissibleCardsList() {
           <MessagingCard
             key={card.id}
             type={card.type}
-            dangerouslySetBackground={
-              card.type === 'upsell' ? `rgb(${spectrum.gray100})` : undefined
+            styles={
+              card.type === 'upsell'
+                ? { root: { backgroundColor: `rgb(${spectrum.gray100})` } }
+                : undefined
             }
             title={card.title}
             description={card.description}
@@ -629,7 +636,7 @@ function InteractiveCards() {
         renderAsPressable
         onPress={() => console.log('Card pressed!')}
         type="upsell"
-        dangerouslySetBackground={`rgb(${spectrum.teal70})`}
+        blendStyles={{ background: `rgb(${spectrum.teal70})` }}
         title="Interactive Upsell"
         description="Tap to interact"
         width={320}
@@ -757,7 +764,7 @@ function MultipleCards() {
           renderAsPressable
           onPress={() => console.log('clicked')}
           type="upsell"
-          dangerouslySetBackground={`rgb(${spectrum.purple70})`}
+          blendStyles={{ background: `rgb(${spectrum.purple70})` }}
           title="Card 3"
           description="Card with onPress handler"
           tag="Action"
@@ -832,7 +839,7 @@ When you need both `onDismissButtonPress` and want the entire card to be pressab
 
 #### Color Contrast
 
-MessagingCard supports custom backgrounds via `background` and `dangerouslySetBackground` props. When using custom background colors, ensure sufficient color contrast between text and background:
+MessagingCard supports custom backgrounds via the `background` prop and, for custom colors, `styles.root` (non-interactive) or `blendStyles.background` (interactive). When using custom background colors, ensure sufficient color contrast between text and background:
 
 - Use `fgInverse` text color with dark backgrounds (e.g., `accentBoldPurple`, `bgInverse`)
 - Use `fg` text color with light backgrounds (e.g., `bgPrimaryWash`, `bgAlternate`)

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

@@ -87,7 +87,12 @@ Use `mediaPlacement` to control the position of media content.
 
 ### Upsell Card Styles
 
-MessagingCard with `type="upsell"` supports various background colors to match different promotional purposes. Use the `background` prop for semantic tokens, or `dangerouslySetBackground` for custom spectrum colors.
+MessagingCard with `type="upsell"` supports various background colors to match different promotional purposes. Use the `background` prop for semantic tokens.
+
+For **custom background colors**, use the recommended approach:
+
+- **Non-interactive cards** (default `as="article"` or `renderAsPressable={false}`): set the background via `styles.root` or `classNames.root` (e.g. `styles={{ root: { backgroundColor: 'rgb(var(--blue80))' } }}`).
+- **Interactive cards** (`renderAsPressable` with `as="a"` or `as="button"`): set the background via `blendStyles.background` (e.g. `blendStyles={{ background: 'rgb(var(--blue80))' }}`) so press states are handled correctly.
 
 #### General Upsell
 
@@ -142,7 +147,7 @@ function FeatureUpsell() {
         <MessagingCard
           key={card.label}
           type="upsell"
-          dangerouslySetBackground={card.bg}
+          styles={{ root: { backgroundColor: card.bg } }}
           title={
             <Text color="fgInverse" as="h3" font="headline">
               Up to 3.29% APR on ETH
@@ -191,7 +196,7 @@ function CommunityUpsell() {
         <MessagingCard
           key={i}
           type="upsell"
-          dangerouslySetBackground={card.bg}
+          styles={{ root: { backgroundColor: card.bg } }}
           title={
             <Text color="fgInverse" as="h3" font="headline">
               Join the community
@@ -252,7 +257,7 @@ function ProductUpsell() {
         <MessagingCard
           key={card.title}
           type="upsell"
-          dangerouslySetBackground={card.bg}
+          styles={{ root: { backgroundColor: card.bg } }}
           title={
             <Text color="fgInverse" as="h3" font="headline">
               {card.title}
@@ -298,7 +303,7 @@ function NewsUpsell() {
         <MessagingCard
           key={i}
           type="upsell"
-          dangerouslySetBackground={card.bg}
+          styles={{ root: { backgroundColor: card.bg } }}
           title={
             <Text color="fgInverse" as="h3" font="headline">
               Help defend crypto in America
@@ -385,7 +390,7 @@ Use `onDismissButtonClick` to add a dismiss button.
     mediaPlacement="end"
     onDismissButtonClick={() => alert('Card dismissed!')}
     dismissButtonAccessibilityLabel="Close card"
-    dangerouslySetBackground="rgb(var(--teal70))"
+    styles={{ root: { backgroundColor: 'rgb(var(--teal70))' } }}
   />
   <MessagingCard
     type="nudge"
@@ -567,7 +572,11 @@ function DismissibleCards() {
           <MessagingCard
             key={card.id}
             type={card.type}
-            dangerouslySetBackground={card.type === 'upsell' ? 'rgb(var(--gray100))' : undefined}
+            styles={
+              card.type === 'upsell'
+                ? { root: { backgroundColor: 'rgb(var(--gray100))' } }
+                : undefined
+            }
             title={card.title}
             description={card.description}
             width={360}
@@ -612,7 +621,7 @@ MessagingCard supports polymorphic rendering with `as` and can be made interacti
   <MessagingCard
     as="article"
     type="upsell"
-    dangerouslySetBackground="rgb(var(--teal70))"
+    styles={{ root: { backgroundColor: 'rgb(var(--teal70))' } }}
     title="Title"
     description="Description"
     width={320}
@@ -633,7 +642,7 @@ MessagingCard supports polymorphic rendering with `as` and can be made interacti
     href="https://www.coinbase.com"
     target="_blank"
     type="upsell"
-    dangerouslySetBackground="rgb(var(--purple70))"
+    blendStyles={{ background: 'rgb(var(--purple70))' }}
     title="Interactive Upsell"
     description="Clickable card with href"
     width={320}
@@ -665,7 +674,7 @@ MessagingCard supports polymorphic rendering with `as` and can be made interacti
     as="button"
     onClick={() => alert('Card clicked!')}
     type="upsell"
-    dangerouslySetBackground="rgb(var(--gray100))"
+    blendStyles={{ background: 'rgb(var(--gray100))' }}
     title="Interactive Card"
     description="Clickable card with onClick handler"
     width={320}
@@ -783,7 +792,7 @@ Display multiple cards in a carousel.
       as="button"
       onClick={() => console.log('clicked')}
       type="upsell"
-      dangerouslySetBackground="rgb(var(--purple70))"
+      blendStyles={{ background: 'rgb(var(--purple70))' }}
       title="Card 3"
       description="Card with onClick handler"
       tag="Action"
@@ -862,7 +871,7 @@ When you need both `onDismissButtonClick` and want the entire card to be clickab
 
 #### Color Contrast
 
-MessagingCard supports custom backgrounds via `background` and `dangerouslySetBackground` props. When using custom background colors, ensure sufficient color contrast between text and background:
+MessagingCard supports custom backgrounds via the `background` prop and, for custom colors, `styles.root` / `classNames.root` (non-interactive) or `blendStyles.background` (interactive). When using custom background colors, ensure sufficient color contrast between text and background:
 
 - Use `fgInverse` text color with dark backgrounds (e.g., `accentBoldPurple`, `bgInverse`)
 - Use `fg` text color with light backgrounds (e.g., `bgPrimaryWash`, `bgAlternate`)

package/package.json

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