@coinbase/cds-mcp-server 9.0.0-rc.2 → 9.0.0

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

@@ -12,13 +12,13 @@ import { SpotIcon } from '@coinbase/cds-mobile/illustratations/SpotIcon'
 
 ## Examples
 
-### Basic example
+#### Basic example
 
 ```jsx
 <SpotIcon name="shield" dimension="32x32" />
 ```
 
-### `scaleMultiplier` prop
+#### `scaleMultiplier` prop
 
 If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
 
@@ -28,7 +28,7 @@ Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions
 <SpotIcon name="shield" scaleMultiplier={1.5} />
 ```
 
-### Scaling with dimension
+#### Scaling with dimension
 
 If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
 
@@ -36,11 +36,36 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
 <SpotIcon name="shield" dimension="24x24" scaleMultiplier={1.5} />
 ```
 
+### Theming
+
+Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is colored by the active `ThemeProvider`'s illustration palette instead of using the hardcoded light or dark variant.
+
+```jsx
+const customTheme = {
+  ...defaultTheme,
+  lightIllustrationColor: {
+    ...defaultTheme.lightIllustrationColor,
+    primary: 'rgb(220, 38, 38)',
+    accent1: 'rgb(124, 58, 237)',
+  },
+  darkIllustrationColor: {
+    ...defaultTheme.darkIllustrationColor,
+    primary: 'rgb(248, 113, 113)',
+    accent1: 'rgb(167, 139, 250)',
+  },
+};
+
+<ThemeProvider activeColorScheme="light" theme={customTheme}>
+  <SpotIcon applyTheme name="shield" dimension="32x32" />
+</ThemeProvider>;
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `name` | `done \| warning \| error \| advancedTradeProduct \| arrowsUpDown \| assetHubProduct \| assetManagementProduct \| bank \| base \| borrowProduct \| cloudProduct \| coinbase \| commerceProduct \| custodyProduct \| delegateProduct \| derivativesProduct \| email \| exchangeProduct \| helpCenterProduct \| institutionalProduct \| learningRewardsProduct \| nftProduct \| nodeProduct \| participateProduct \| privateClientProduct \| rewardsProduct \| rosettaProduct \| shield \| venturesProduct \| wallet \| walletLogo \| 2fa \| authenticator \| bonusFivePercent \| bonusTwoPercent \| businessProduct \| chat \| coinbaseOneEarn \| coinbaseOneProductInvestWeekly \| creditCard \| delegate \| fast \| idVerification \| instoDelegate \| outage \| pieChart \| recurringPurchases \| send \| layeredNetworks \| noFees \| assetEmptyStateAa \| assetEmptyStateAb \| assetEmptyStateAc \| assetEmptyStateAd \| assetEmptyStateAe \| assetEmptyStateBa \| assetEmptyStateBb \| assetEmptyStateBc \| assetEmptyStateBd \| assetEmptyStateBe \| assetEmptyStateCa \| assetEmptyStateCb \| assetEmptyStateCc \| assetEmptyStateCd \| assetEmptyStateCe \| assetEmptyStateDa \| assetEmptyStateDb \| assetEmptyStateDc \| assetEmptyStateDd \| assetEmptyStateDe \| assetEmptyStateEa \| assetEmptyStateEb \| assetEmptyStateEc \| assetEmptyStateEd \| assetEmptyStateEe \| cb1Cash \| coinbaseOneChart \| coinbaseOneProduct \| contract \| dataMarketplace \| instantAccess \| instoAdvancedTradeProduct \| instoAssetHubProduct \| instoAuthenticator \| instoBorrowProduct \| instoBusinessProduct \| instoChat \| instoCloudProduct \| instoCoinbaseOneEarn \| instoCommerceProduct \| instoCustodyProduct \| instoDataMarketplace \| instoDerivativesProduct \| instoFast \| instoHelpCenterProduct \| instoIdVerification \| instoLayeredNetworks \| instoLearningRewardsProduct \| instoMultiCoin \| instoPaySDKProduct \| instoPieChart \| instoPrimeProduct \| instoPrivateClientProduct \| instoProductCoinbaseCard \| instoProductCompliance \| instoProductPro \| instoProductWallet \| instoRecurringPurchases \| instoRewardsProduct \| instoShield \| instoSignInProduct \| instoStakingProduct \| instoWalletAsAServiceProduct \| internationalExchangeProduct \| multiCoin \| paySDKProduct \| primeProduct \| productCoinbaseCard \| productCompliance \| productEarn \| productPro \| productWallet \| signInProduct \| stakingProduct \| walletAsAServiceProduct` | Yes | `-` | Name of illustration as defined in Figma |
+| `applyTheme` | `boolean` | No | `-` | Apply the theme to the illustration |
 | `dimension` | `32x32 \| 24x24` | No | `-` | HeroSquare Default:  240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
 | `fallback` | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
 | `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |

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

@@ -12,13 +12,13 @@ import { SpotRectangle } from '@coinbase/cds-mobile/illustratations/SpotRectangl
 
 ## Examples
 
-### Basic example
+#### Basic example
 
 ```jsx
 <SpotRectangle name="creditCardExcitement" />
 ```
 
-### `scaleMultiplier` prop
+#### `scaleMultiplier` prop
 
 If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
 
@@ -28,7 +28,7 @@ Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions
 <SpotRectangle name="creditCardExcitement" scaleMultiplier={1.5} />
 ```
 
-### Scaling with dimension
+#### Scaling with dimension
 
 If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
 
@@ -36,11 +36,36 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
 <SpotRectangle name="creditCardExcitement" dimension="240x120" scaleMultiplier={1.5} />
 ```
 
+### Theming
+
+Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is colored by the active `ThemeProvider`'s illustration palette instead of using the hardcoded light or dark variant.
+
+```jsx
+const customTheme = {
+  ...defaultTheme,
+  lightIllustrationColor: {
+    ...defaultTheme.lightIllustrationColor,
+    primary: 'rgb(220, 38, 38)',
+    accent1: 'rgb(124, 58, 237)',
+  },
+  darkIllustrationColor: {
+    ...defaultTheme.darkIllustrationColor,
+    primary: 'rgb(248, 113, 113)',
+    accent1: 'rgb(167, 139, 250)',
+  },
+};
+
+<ThemeProvider activeColorScheme="light" theme={customTheme}>
+  <SpotRectangle applyTheme name="creditCardExcitement" />
+</ThemeProvider>;
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `name` | `margin \| blockchain \| bridging \| calendar \| coinbaseOneLogo \| concierge \| diamond \| earn \| login \| nft \| securityShield \| staking \| tokenSales \| cb1BankTransfers \| ethStakingRewards \| futures \| globalTransactions \| governance \| instoKey \| lightningNetworkSend \| startToday \| usdcLoan \| wrapEth \| phoneNumber \| accessToAdvancedCharts \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| appTrackingTransparency \| automaticPayments \| backedByUsDollar \| basedInUsa \| bigBtc \| borrowWallet \| browserExtension \| cardBoosted \| cbbtc \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseFees \| coinbaseOneDiscountedAmount \| coinbaseOnePhoneLightning \| coinbaseOneRewards \| coinbaseOneSavingFunds \| collectingNfts \| commerceAccounting \| commerceInvoices \| completeAQuiz \| congratulationsOnEarningCrypto \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiHow \| defiRisk \| didDecentralizedIdentity \| digitalCollectibles \| documentCertified \| documentSuccess \| earnInterest \| earnToLearn \| encryptedEverything \| estimatedAmount \| exploreDecentralizedApps \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gasFeesNetworkFees \| getStartedInMinutes \| graphChartTrading \| hardwareWallets \| holdCrypto \| holdingCrypto \| instoPrimeStaking \| instoStaking \| insuranceProtection \| invest \| layeredNetworks \| leverage \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferYellow \| marginWarning \| mining \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| noFees \| notificationsAlt \| onTheList \| openEmail \| optInPushNotificationsEmail \| p2pPayments \| portfolioPerformance \| poweredByEthereum \| primeDeFi \| primeEarn \| primeStaking \| quickAndSimple \| readyToTrade \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| retailUSDCRewards \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selfCustody \| semiCustodial \| sendCryptoFaster \| shareOnSocialMedia \| sidechain \| stableValue \| stayInControlSelfHostedWalletsStorage \| stressTestedColdStorage \| switchAdvancedToSimpleTrading \| taxesDetails \| tradeImmediately \| trendingHotAssets \| verifyEmail \| verifyInfo \| walletNotifications \| walletSecurity \| watchVideos \| addBank \| advancedTradeCharts \| apiKey \| appUpdate \| borrowLoan \| browserHistory \| cardWaitlist \| cbEth \| clawMachinePig \| coinGateway \| connectWalletTutorial \| creditCardExcitement \| creditCardExcitementCoinbaseOne \| cryptoEconomyCoin \| cryptoEconomyEurc \| cryptoEconomyUSDC \| currency \| derivativesLoop \| downloadCoinbaseWalletArrow \| downloadingStatement \| emptyNfts \| emptyTrading \| eth2SellSend \| eth2SendSell \| eth2SendSellTwo \| ethAddress \| ethStakeOrWrap \| ethStakeOrWrapTwo \| ethStakingMovement \| ethTrading \| ethTradingTwo \| ethWrappedStakingRewards \| faceId \| fiatInterest \| giftBoxRewards \| highFees \| insto \| instoAboutOnchain \| instoApiKey \| instoConsensusWaitingForApprovals \| instoCryptoAndMore \| instoCurrency \| instoDesignateSigner \| instoEmptyTrading \| instoEthStakingMovement \| instoGetStartedInMinutes \| instoMargin \| instoOnchainSetupInProgress \| instoQRCode \| instoRefreshKey \| instoSemiCustodial \| instoSetupComplete \| instoSetupOnchain \| leadingProtocol \| leadingProtocolMorpho \| ledgerFailed \| ledgerSignatureRejected \| lendGraph \| linkCoinbaseWallet \| loanValue \| noTransactions \| portfolioOverview \| portfolioOverviewRelaunch \| primeOrderConfirmation \| primePriceLadder \| primeTradePreferences \| protectedNotes \| ratDashboard \| ratFoundWallet \| ratMigration \| ratMigrationerror \| referralsBonus \| scanCode \| secureAccount \| sendingCrypto \| stakingUpgrade \| trade \| transferCoins \| transferEth \| transferFunds \| trustedContacts \| unauthorizedTransfers \| uob \| update \| uploadDocument \| usdcLoanEth \| walletReconnect \| walletReconnectSuccess \| wrapEthTwo \| yieldHolding` | Yes | `-` | Name of illustration as defined in Figma |
+| `applyTheme` | `boolean` | No | `-` | Apply the theme to the illustration |
 | `dimension` | `240x120` | No | `-` | HeroSquare Default:  240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
 | `fallback` | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
 | `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |

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

@@ -12,13 +12,13 @@ import { SpotSquare } from '@coinbase/cds-mobile/illustratations/SpotSquare'
 
 ## Examples
 
-### Basic example
+#### Basic example
 
 ```jsx
 <SpotSquare name="yieldCenterUSDC" />
 ```
 
-### `scaleMultiplier` prop
+#### `scaleMultiplier` prop
 
 If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
 
@@ -28,7 +28,7 @@ Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions
 <SpotSquare name="yieldCenterUSDC" scaleMultiplier={1.5} />
 ```
 
-### Scaling with dimension
+#### Scaling with dimension
 
 If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
 
@@ -36,11 +36,36 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
 <SpotSquare name="yieldCenterUSDC" dimension="120x120" scaleMultiplier={1.5} />
 ```
 
+### Theming
+
+Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is colored by the active `ThemeProvider`'s illustration palette instead of using the hardcoded light or dark variant.
+
+```jsx
+const customTheme = {
+  ...defaultTheme,
+  lightIllustrationColor: {
+    ...defaultTheme.lightIllustrationColor,
+    primary: 'rgb(220, 38, 38)',
+    accent1: 'rgb(124, 58, 237)',
+  },
+  darkIllustrationColor: {
+    ...defaultTheme.darkIllustrationColor,
+    primary: 'rgb(248, 113, 113)',
+    accent1: 'rgb(167, 139, 250)',
+  },
+};
+
+<ThemeProvider activeColorScheme="light" theme={customTheme}>
+  <SpotSquare applyTheme name="yieldCenterUSDC" />
+</ThemeProvider>;
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `name` | `baseQuickBuy \| blockchain \| bridging \| coinbaseOneLogo \| earn \| nft \| options \| pieChartWithArrow \| priceAlerts \| refresh \| securityShield \| staking \| addCard \| baseCreatorCoin \| bonusFivePercent \| bonusTwoPercent \| cardBlocked \| cardDeclined \| coinbaseOneEarn \| coinbaseUnlockOffers \| ethStaking \| ethStakingRewards \| futures \| globalTransactions \| idError \| inrTrade \| instoAuthenticatorProgress \| lightningNetworkSend \| outage \| pieChartWithArrowBlue \| startToday \| wrapEth \| phoneNumber \| accessToAdvancedCharts \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| appTrackingTransparency \| automaticPayments \| backedByUsDollar \| basedInUsa \| bigBtc \| borrowWallet \| browserExtension \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseFees \| coinbaseOneDiscountedAmount \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneZeroPortal \| coinFifty \| collectingNfts \| commerceAccounting \| commerceInvoices \| completeAQuiz \| congratulationsOnEarningCrypto \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiHow \| defiRisk \| didDecentralizedIdentity \| digitalCollectibles \| documentCertified \| documentSuccess \| earnInterest \| earnToLearn \| encryptedEverything \| estimatedAmount \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gasFeesNetworkFees \| getStartedInMinutes \| hardwareWallets \| holdCrypto \| holdingCrypto \| instoEthStakingRewards \| instoPrimeStaking \| instoStaking \| insuranceProtection \| invest \| layeredNetworks \| layerThree \| linkingYourWalletToYourCoinbaseAccount \| mining \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| noFees \| notificationsAlt \| onTheList \| openEmail \| optInPushNotificationsEmail \| p2pPayments \| performance \| portfolioPerformance \| poweredByEthereum \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| quickAndSimple \| readyToTrade \| retailUSDCRewards \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selfCustody \| semiCustodial \| sendCryptoFaster \| shareOnSocialMedia \| sidechain \| stableValue \| stayInControlSelfHostedWalletsStorage \| stressTestedColdStorage \| switchAdvancedToSimpleTrading \| taxesDetails \| tradeImmediately \| trendingHotAssets \| verifyEmail \| verifyInfo \| walletNotifications \| walletSecurity \| watchVideos \| eth2SendSell \| ethStakeOrWrap \| ethStakeOrWrapTwo \| linkCoinbaseWallet \| addEth \| addMultipleCrypto \| addPasswordProtection \| announcementAdvancedTrading \| assetForward \| assetRefresh \| baseCautionMedium \| baseChartMedium \| baseCheckMedium \| baseCheckTrophyMedium \| baseCoinCryptoMedium \| baseCoinNetworkMedium \| baseConnectMedium \| baseDecentralizationMedium \| baseDiamondMedium \| baseEmptyMedium \| baseErrorButterflyMedium \| baseErrorMedium \| baseIdMedium \| baseLoadingMedium \| baseLocationMedium \| baseMintNftMedium \| baseNetworkMedium \| baseNftMedium \| basePaycoinMedium \| basePeopleMedium \| basePiechartMedium \| baseRewardChest \| baseRewardClam \| baseRewardPlate \| baseRewardPodium \| baseRewardSun \| baseRewardTrophyEmblem \| baseRewardTrophyStars \| baseSecurityMedium \| baseSendMedium \| baseSwitch \| baseTargetMedium \| baseUsdcMedium \| boostedCard \| borrowLimitsAddressed \| bullishCase \| cardAnnouncement \| cardAutoReload \| cardShipped \| cbEthWrappingUnavailable \| checkVerifacation \| coinbaseCardSparkle \| coinbaseLock \| coinbaseOneBoostedCard \| coinbaseOneBoostedCardCB1 \| coinbaseOneConcierge \| coinbaseOneStakeOrWrap \| coinbaseOneStaking \| coinbaseOneStarToken \| coinbaseOneUSDC \| coinbaseOneZero \| confirmAddress \| confirmEmail \| confirmIDCard \| confirmSocialSecurity \| cryptoEconomyArrows \| dappWallet \| darkModeIntroduction \| defiEarnAnnouncement \| defiNfts \| directDepositExcitement \| earnInterestOnCryptocurrency \| fileYourCryptoTaxesCheckOther \| fileYourCryptoTaxesOther \| frameEmpty \| giftBoxCrypto \| gifting \| goldSilverFutures \| guideBullCase \| guideCryptoBeginner \| guideFiveThings \| guideNftDefi \| guideStartInvesting \| instantUnstaking \| instoDappWallet \| instoEthStaking \| instoPixDeposits \| instoSecurityKey \| instoSideChainSide \| instoUbiKey \| instoWaiting \| interestForYou \| miniGift \| moneyRewards \| nftTag \| noPortfolio \| nuxChecklist \| nuxEarnCrypto \| nuxEarnYield \| nuxPopularAssets \| nuxRecurringBuys \| offersEmpty \| phoneNotifications \| pixBankDeposits \| pixDeposits \| recommendInvestments \| referralsPeople \| refreshMobileApp \| rewardExpiring \| saveTheDate \| sparkleToken \| starToken \| swapEth \| switchReward \| taxDocuments \| transferringCrypto \| unsupportedAsset \| waitlistSignup \| walletApp \| walletQuestsChest \| walletQuestsTrophy \| yieldCenter \| yieldCenterUSDC` | Yes | `-` | Name of illustration as defined in Figma |
+| `applyTheme` | `boolean` | No | `-` | Apply the theme to the illustration |
 | `dimension` | `96x96` | No | `-` | HeroSquare Default:  240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
 | `fallback` | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
 | `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |

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

@@ -194,6 +194,7 @@ render(<Example />);
 | `tabs` | `TabbedChipProps<TabId>[]` | Yes | `-` | - |
 | `TabComponent` | `FC<TabbedChipProps<TabId>>` | No | `-` | - |
 | `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | - |
+| `activeColor` | `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 | `-` | Color when a tab is active. |
 | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
 | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
@@ -220,7 +221,7 @@ render(<Example />);
 | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
 | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
 | `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 | `-` | - |
+| `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 | `-` | Color when a tab is inactive. |
 | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
 | `compact` | `boolean` | No | `false` | Turn on to use a compact Chip component for each tab. |
 | `dangerouslySetBackground` | `string` | No | `-` | - |

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

@@ -12,11 +12,11 @@ import { Tabs, DefaultTabsActiveIndicator } from '@coinbase/cds-mobile/tabs'
 
 ## Examples
 
-Tabs manages which tab is active and positions the animated indicator. For the common **underline** pattern, pass **`TabsActiveIndicatorComponent={DefaultTabsActiveIndicator}`** and rely on the default **`TabComponent` (`DefaultTab`)**. Use a custom **`TabComponent`** when you need layout or content beyond what `DefaultTab` provides. For **pill / segmented** controls, use [SegmentedTabs](/components/navigation/SegmentedTabs/) instead.
+Tabs manages which tab is active and positions the animated indicator. For **pill / segmented** controls, use [SegmentedTabs](/components/navigation/SegmentedTabs/) instead.
 
 ### Basics
 
-Out of the box, **`Tabs`** uses **`DefaultTab`** for each row (headline text, optional [DotCount](/components/other/DotCount/) via `count` / `max` on each tab) and **`DefaultTabsActiveIndicator`** for the animated underline. **`activeBackground`** sets the **underline color** (it is forwarded to the indicator as its `background` token).
+Out of the box, **`Tabs`** uses **`DefaultTab`** for each row (headline text, optional [DotCount](/components/other/DotCount/) via `count` / `max` on each tab) and **`DefaultTabsActiveIndicator`** for the animated underline. Set **`color`** / **`activeColor`** on **`Tabs`** for inactive / active label tokens, and **`activeBackground`** for the underline (forwarded to the indicator as its **`background`** token).
 
 ```jsx
 function Example() {
@@ -29,23 +29,15 @@ function Example() {
   return (
     <Tabs
       accessibilityLabel="Example tabs"
-      activeBackground="bgPrimary"
       activeTab={activeTab}
-      background="bg"
       gap={4}
       onChange={setActiveTab}
-      // default value; can be omitted.
-      TabComponent={DefaultTab}
       tabs={tabs}
-      // default value; can be omitted.
-      TabsActiveIndicatorComponent={DefaultTabsActiveIndicator}
     />
   );
 }
 ```
 
-You can omit `TabComponent` explicitly: **`Tabs`** defaults it to **`DefaultTab`**.
-
 #### No initial selection
 
 ```jsx
@@ -59,9 +51,7 @@ function Example() {
   return (
     <Tabs
       accessibilityLabel="Example tabs"
-      activeBackground="bgPrimary"
       activeTab={activeTab}
-      background="bg"
       gap={4}
       onChange={setActiveTab}
       tabs={tabs}
@@ -82,9 +72,7 @@ function Example() {
   return (
     <Tabs
       accessibilityLabel="Mail folders"
-      activeBackground="bgPrimary"
       activeTab={activeTab}
-      background="bg"
       gap={4}
       onChange={setActiveTab}
       tabs={tabs}
@@ -106,9 +94,40 @@ function Example() {
   return (
     <Tabs
       accessibilityLabel="Example tabs"
-      activeBackground="bgPrimary"
       activeTab={activeTab}
-      background="bg"
+      gap={4}
+      onChange={setActiveTab}
+      tabs={tabs}
+    />
+  );
+}
+```
+
+### Accessibility
+
+Set **`accessibilityLabel`** on **`Tabs`**. **`DefaultTab`** wires `accessibilityRole="tab"` and selection state; keep tab panels in sync in your screen content.
+
+### Styling
+
+#### Colors
+
+You can set **`color`** and **`activeColor`** for label tokens, and **`activeBackground`** for the underline.
+
+```jsx
+function Example() {
+  const tabs = [
+    { id: 'tab1', label: 'Tab 1' },
+    { id: 'tab2', label: 'Tab 2' },
+    { id: 'tab3', label: 'Tab 3' },
+  ];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return (
+    <Tabs
+      accessibilityLabel="Example tabs"
+      activeBackground="fg"
+      activeColor="fg"
+      activeTab={activeTab}
+      color="fgMuted"
       gap={4}
       onChange={setActiveTab}
       tabs={tabs}
@@ -147,7 +166,7 @@ function Example() {
   }, []);
 
   const ActiveIndicator = useCallback(
-    (props) => <TabsActiveIndicator {...props} background="bgPrimary" bottom={0} height={2} />,
+    (props) => <TabsActiveIndicator {...props} background="bgPositive" bottom={0} height={2} />,
     [],
   );
 
@@ -214,10 +233,6 @@ function Example() {
 }
 ```
 
-### Accessibility
-
-Set **`accessibilityLabel`** on **`Tabs`**. **`DefaultTab`** wires `accessibilityRole="tab"` and selection state; keep tab panels in sync in your screen content.
-
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -228,6 +243,7 @@ Set **`accessibilityLabel`** on **`Tabs`**. **`DefaultTab`** wires `accessibilit
 | `TabComponent` | `TabComponent<TabId, TTab>` | No | `-` | The default Component to render each tab. |
 | `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | The default Component to render the tabs active indicator. |
 | `activeBackground` | `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 | `-` | Background color passed to the TabsActiveIndicatorComponent. |
+| `activeColor` | `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 | `-` | Color when a tab is active. |
 | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
 | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
@@ -253,7 +269,7 @@ Set **`accessibilityLabel`** on **`Tabs`**. **`DefaultTab`** wires `accessibilit
 | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
 | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
 | `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 | `-` | - |
+| `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 | `-` | Color when a tab is inactive. |
 | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
 | `dangerouslySetBackground` | `string` | No | `-` | - |
 | `disabled` | `boolean` | No | `-` | Disable interactions on all the tabs. |

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

@@ -716,6 +716,8 @@ function TextInputKeyboardExample() {
 | `keyboardAppearance` | `light \| default \| dark` | No | `-` | Determines the color of the keyboard. |
 | `keyboardType` | `default \| url \| number-pad \| decimal-pad \| numeric \| email-address \| phone-pad \| visible-password \| ascii-capable \| numbers-and-punctuation \| name-phone-pad \| twitter \| web-search` | No | `-` | enum(default, numeric, email-address, ascii-capable, numbers-and-punctuation, url, number-pad, phone-pad, name-phone-pad, decimal-pad, twitter, web-search, visible-password) Determines which keyboard to open, e.g.numeric. The following values work across platforms: - default - numeric - email-address - phone-pad The following values work on iOS: - ascii-capable - numbers-and-punctuation - url - number-pad - name-phone-pad - decimal-pad - twitter - web-search The following values work on Android: - visible-password |
 | `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
+| `labelColor` | `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 | `-` | Color token for the field label. |
+| `labelFont` | `display1 \| display2 \| display3 \| title1 \| title2 \| title3 \| title4 \| headline \| body \| label1 \| label2 \| caption \| legal` | No | `-` | Typography token for the field label. |
 | `labelNode` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | React node to render label. Takes precedence over label. |
 | `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
 | `lineBreakModeIOS` | `middle \| wordWrapping \| char \| clip \| head \| tail` | No | `-` | Set line break mode on iOS. |
@@ -753,7 +755,7 @@ function TextInputKeyboardExample() {
 | `passwordRules` | `string \| null` | No | `-` | Provide rules for your password. For example, say you want to require a password with at least eight characters consisting of a mix of uppercase and lowercase letters, at least one number, and at most two consecutive characters. required: upper; required: lower; required: digit; max-consecutive: 2; minlength: 8; |
 | `placeholder` | `string` | No | `-` | Placeholder text displayed inside of the input. Will be replaced if there is a value. The string that will be rendered before text input has been entered |
 | `placeholderTextColor` | `string \| OpaqueColorValue` | No | `-` | The text color of the placeholder string |
-| `readOnly` | `boolean` | No | `-` | If true, text is not editable. The default value is false. |
+| `readOnly` | `boolean` | No | `-` | When true, the value cannot be edited but the control may remain focusable (unlike disabled). If true, text is not editable. The default value is false. |
 | `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
 | `rejectResponderTermination` | `boolean \| null` | No | `-` | If true, allows TextInput to pass touch events to the parent component. This allows components to be swipeable from the TextInput on iOS, as is the case on Android by default. If false, TextInput always asks to handle the input (except when disabled). |
 | `returnKeyLabel` | `string` | No | `-` | Sets the return key to the label. Use it instead of returnKeyType. |
@@ -762,7 +764,6 @@ function TextInputKeyboardExample() {
 | `secureTextEntry` | `boolean` | No | `-` | If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. |
 | `selectTextOnFocus` | `boolean` | No | `-` | If true, all text will automatically be selected on focus |
 | `selection` | `{ start: number; end?: number; } \| undefined` | No | `-` | The start and end of the text inputs selection. Set start and end to the same value to position the cursor. |
-| `selectionColor` | `string \| OpaqueColorValue` | No | `-` | The highlight (and cursor on ios) color of the text input |
 | `selectionHandleColor` | `ColorValue \| null` | No | `-` | When provided it will set the color of the selection handles when highlighting text. Unlike the behavior of selectionColor the handle color will be set independently from the color of the text selection box. |
 | `selectionState` | `DocumentSelectionState` | No | `-` | See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document |
 | `showSoftInputOnFocus` | `boolean` | No | `-` | When false, it will prevent the soft keyboard from showing when the field is focused. The default value is true |

package/mcp-docs/mobile/guides/_v9MobileInstallCommands.txt

@@ -0,0 +1,9 @@
+**📖 Live documentation:** https://cds.coinbase.com/guides/_v9MobileInstallCommands/
+
+```bash
+# npm
+npm install @coinbase/cds-common@9.0.0-rc.2 @coinbase/cds-mobile@9.0.0-rc.2
+
+# yarn
+yarn add @coinbase/cds-common@9.0.0-rc.2 @coinbase/cds-mobile@9.0.0-rc.2
+```

package/mcp-docs/mobile/guides/_v9MobilePeerDependencies.txt

@@ -0,0 +1,15 @@
+**📖 Live documentation:** https://cds.coinbase.com/guides/_v9MobilePeerDependencies/
+
+<br />
+
+| Package                          | Previous range | Required range |
+| -------------------------------- | -------------- | -------------- |
+| `react`                          | `^18.3.1`      | `~19.1.2`      |
+| `react-native`                   | `^0.74.5`      | `~0.81.5`      |
+| `lottie-react-native`            | `^6.7.0`       | `7.3.1`        |
+| `react-native-gesture-handler`   | `^2.16.2`      | `2.28.0`       |
+| `react-native-reanimated`        | `^3.14.0`      | `4.1.1`        |
+| `react-native-safe-area-context` | `^4.10.5`      | `5.6.0`        |
+| `react-native-svg`               | `^14.1.0`      | `15.12.1`      |
+| `@shopify/react-native-skia`     | -              | `2.2.12`       |
+| `react-native-worklets`          | -              | `0.5.2`        |

package/mcp-docs/mobile/guides/_v9WebInstallCommands.txt

@@ -0,0 +1,9 @@
+**📖 Live documentation:** https://cds.coinbase.com/guides/_v9WebInstallCommands/
+
+```bash
+# npm
+npm install @coinbase/cds-common@9.0.0-rc.2 @coinbase/cds-web@9.0.0-rc.2
+
+# yarn
+yarn add @coinbase/cds-common@9.0.0-rc.2 @coinbase/cds-web@9.0.0-rc.2
+```

package/mcp-docs/mobile/guides/_v9WebPeerDependencies.txt

@@ -0,0 +1,5 @@
+**📖 Live documentation:** https://cds.coinbase.com/guides/_v9WebPeerDependencies/
+
+<br />
+
+No required peer dependency changes for web.