feat: Update web ThemeProvider to only inject CSS Variables that are different than the parent theme

packages/common/src/overlays/useAlert.ts

@@ -1,7 +1,7 @@
 import { useOverlay } from './useOverlay';
 
 /**
- * @deprecated Use the visible and onRequestClose props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started
+ * @deprecated Use the `visible` and `onRequestClose` props as outlined in the docs here https://cds.coinbase.com/components/overlay/Modal
  */
 export const useAlert = () => {
   return useOverlay('alert_');

packages/common/src/overlays/useModal.ts

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { useOverlay } from './useOverlay';
 
 /**
- * @deprecated Use the visible and onRequestClose props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started
+ * @deprecated Use the `visible` and `onRequestClose` props as outlined in the docs here https://cds.coinbase.com/components/overlay/Modal
  */
 export const useModal = () => {
   const { open, close } = useOverlay('modal_');

packages/mobile/src/buttons/IconCounterButton.tsx

@@ -14,7 +14,7 @@ import { Text } from '../typography/Text';
 export type IconCounterButtonBaseProps = {
   /** Name of the icon or a ReactNode */
   icon: Exclude<React.ReactNode, 'string'> | IconName;
-  /** @deprecated Use `size` instead. */
+  /** @deprecated Use `size` instead. This prop will be removed in a future version. */
   iconSize?: IconSize;
   /** Size for given icon. */
   size?: IconSize;

packages/mobile/src/cards/AnnouncementCard.tsx

@@ -4,7 +4,7 @@ import { Card, type CardBaseProps } from './Card';
 import { CardBody, type CardBodyBaseProps, type CardBodyProps } from './CardBody';
 
 export type AnnouncementCardBaseProps = CardBaseProps & CardBodyBaseProps;
-/** @deprecated will be removed in v7.0.0 use NudgeCard or UpsellCard instead */
+/** @deprecated This component will be removed in a future version. Use NudgeCard or UpsellCard instead. */
 export type AnnouncementCardProps = AnnouncementCardBaseProps;
 
 /** @deprecated This component will be removed in a future version. Use NudgeCard or UpsellCard instead. */

packages/mobile/src/cards/FeatureEntryCard.tsx

@@ -5,10 +5,10 @@ import { CardBody, type CardBodyBaseProps } from './CardBody';
 
 export type FeatureEntryCardBaseProps = CardBaseProps & CardBodyBaseProps;
 
-/** @deprecated will be removed in v7.0.0 use NudgeCard or UpsellCard instead */
+/** @deprecated This component will be removed in a future version. Use NudgeCard or UpsellCard instead. */
 export type FeatureEntryCardProps = FeatureEntryCardBaseProps;
 
-/** @deprecated will be removed in v7.0.0 use NudgeCard or UpsellCard instead */
+/** @deprecated This component will be removed in a future version. Use NudgeCard or UpsellCard instead. */
 export const FeatureEntryCard = memo(function FeatureEntryCard({
   onPress,
   testID = 'feature-entry-card',

packages/mobile/src/cells/Cell.tsx

@@ -44,7 +44,7 @@ export type CellBaseProps = SharedProps &
      */
     end?: React.ReactNode;
     /**
-     * @deprecated Use `end` instead. `detail` will be removed in a release.
+     * @deprecated Use `end` instead. This prop will be removed in a future version.
      */
     detail?: React.ReactNode;
     /** Middle content between main content and detail. */
@@ -53,7 +53,7 @@ export type CellBaseProps = SharedProps &
     media?: React.ReactElement;
     borderRadius?: ThemeVars.BorderRadius;
     /**
-     * @deprecated Use `styles.end` instead. `detailWidth` will be removed in a release.
+     * @deprecated Use `styles.end` instead. This prop will be removed in a future version.
      */
     detailWidth?: number | string;
     /** Is the cell disabled? Will apply opacity and disable interaction. */

packages/mobile/src/cells/CellMedia.tsx

@@ -27,7 +27,7 @@ export type CellMediaPictogramProps = {
 type CellMediaOtherProps = {
   type: Exclude<CellMediaType, 'icon' | 'pictogram'>;
   /**
-   * @deprecated This prop will be removed in v6.0.0
+   * @deprecated This prop will be removed in a future version.
    * If required, use `accessibilityLabel` and `accessibilityHint` instead to set accessible labels.
    * Refer to https://cds.coinbase.com/components/cell-media/ for updated accessibility guidance.
    */

packages/mobile/src/cells/ListCell.tsx

@@ -33,11 +33,11 @@ export type ListCellBaseProps = CellDetailProps &
      */
     end?: React.ReactNode;
     /**
-     * @deprecated Use `end` instead. `action` will be removed in a release.
+     * @deprecated Use `end` instead. This prop will be removed in a future version.
      */
     action?: React.ReactNode;
     /**
-     * @deprecated Use `spacingVariant="compact"`. `compact` will be removed in a release.
+     * @deprecated Use `spacingVariant="compact"`. This prop will be removed in a future version.
      */
     compact?: boolean;
     /**

packages/mobile/src/gradients/LinearGradient.tsx

@@ -46,7 +46,7 @@ type LinearGradientProps = {
    */
   colors: NonNullable<string>[];
   /**
-   * @deprecated This prop will be removed in a future version. Please use the elevated prop instead.
+   * @deprecated Use the `elevated` prop instead. This prop will be removed in a future version.
    * Sets layout position between SVG and children. Set it to false when gradient should overlay children content.
    * @default true
    */

packages/mobile/src/media/RemoteImage.tsx

@@ -43,7 +43,7 @@ type BaseRemoteImageProps = Omit<ImageProps, 'style' | 'width' | 'height' | 'sou
   /** Adds a custom border color */
   borderColor?: ThemeVars.Color;
   /**
-   * @deprecated This prop will be removed in a future version. Use darkModeEnhancementsApplied instead.
+   * @deprecated Use `darkModeEnhancementsApplied` instead. This prop will be removed in a future version.
    * Fill in transparent background with inverted background color and add border. This solves issue of transparent, stamped out asset icons not being visible on dark backgrounds.
    */
   shouldApplyDarkModeEnhacements?: boolean;

packages/mobile/src/overlays/useModal.ts

@@ -1,6 +1,6 @@
 import { useModal } from '@coinbase/cds-common/overlays/useModal';
 
 /**
- * @deprecated Use the visible and onRequestClose props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started
+ * @deprecated Use the `visible` and `onRequestClose` props as outlined in the docs here https://cds.coinbase.com/components/overlay/Modal
  */
 export { useModal };

packages/mobile/src/sticky-footer/StickyFooter.tsx

@@ -6,7 +6,7 @@ import { Box, type BoxProps } from '../layout';
 export type StickyFooterProps = BoxProps & {
   /**
    * Whether to apply a box shadow to the StickyFooter element.
-   * @deprecated Use elevation instead.
+   * @deprecated Use elevation instead. This prop will be removed in a future version.
    */
   elevated?: boolean;
 };

packages/mobile/src/system/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, memo, useContext, useMemo } from 'react';
 import type { ColorScheme } from '@coinbase/cds-common/core/theme';
 
 import type { Theme, ThemeConfig } from '../core/theme';
@@ -7,17 +7,34 @@ export type ThemeContextValue = Theme;
 
 export const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
 
-// export type ThemeProviderProps = SystemProviderProps &
-//   ThemeManagerProps &
-//   FramerMotionProviderProps;
+/**
+ * Diff two themes and return a new partial theme with only the differences.
+ */
+export const diffThemes = (theme: Theme, parentTheme?: Theme) => {
+  if (!parentTheme) return theme;
+  const themeDiff = {
+    id: theme.id,
+    activeColorScheme: theme.activeColorScheme,
+  } as Record<keyof Theme, any>;
+  (Object.keys(theme) as (keyof Theme)[]).forEach((key) => {
+    if (key === 'id' || key === 'activeColorScheme') return;
+    themeDiff[key] = {};
+    Object.keys(theme[key] ?? {}).forEach((value) => {
+      if ((theme[key] as any)?.[value] !== (parentTheme[key] as any)?.[value]) {
+        themeDiff[key][value] = (theme[key] as any)[value];
+      }
+    });
+  });
+  return themeDiff as Partial<Theme>;
+};
 
 export type ThemeProviderProps = {
   theme: ThemeConfig;
   activeColorScheme: ColorScheme;
   children?: React.ReactNode;
 };
 
-export const ThemeProvider = ({ theme, activeColorScheme, children }: ThemeProviderProps) => {
+export const ThemeProvider = memo(({ theme, activeColorScheme, children }: ThemeProviderProps) => {
   const themeApi = useMemo(() => {
     const activeSpectrumKey = activeColorScheme === 'dark' ? 'darkSpectrum' : 'lightSpectrum';
     const activeColorKey = activeColorScheme === 'dark' ? 'darkColor' : 'lightColor';
@@ -26,22 +43,22 @@ export const ThemeProvider = ({ theme, activeColorScheme, children }: ThemeProvi
 
     if (!theme[activeColorKey])
       throw Error(
-        `ThemeProvider activeColorScheme is ${activeColorScheme} but no ${activeColorScheme} colors are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme`,
+        `ThemeProvider activeColorScheme is ${activeColorScheme} but no ${activeColorScheme} colors are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming`,
       );
 
     if (!theme[activeSpectrumKey])
       throw Error(
-        `ThemeProvider activeColorScheme is ${activeColorScheme} but no ${activeSpectrumKey} values are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme`,
+        `ThemeProvider activeColorScheme is ${activeColorScheme} but no ${activeSpectrumKey} values are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming`,
       );
 
     if (theme[inverseSpectrumKey] && !theme[inverseColorKey])
       throw Error(
-        `ThemeProvider theme has ${inverseSpectrumKey} values defined but no ${inverseColorKey} colors are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme`,
+        `ThemeProvider theme has ${inverseSpectrumKey} values defined but no ${inverseColorKey} colors are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming`,
       );
 
     if (theme[inverseColorKey] && !theme[inverseSpectrumKey])
       throw Error(
-        `ThemeProvider theme has ${inverseColorKey} colors defined but no ${inverseSpectrumKey} values are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme`,
+        `ThemeProvider theme has ${inverseColorKey} colors defined but no ${inverseSpectrumKey} values are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming`,
       );
 
     return {
@@ -53,14 +70,14 @@ export const ThemeProvider = ({ theme, activeColorScheme, children }: ThemeProvi
   }, [theme, activeColorScheme]);
 
   return <ThemeContext.Provider value={themeApi}>{children}</ThemeContext.Provider>;
-};
+});
 
 export type InvertedThemeProviderProps = {
   children?: React.ReactNode;
 };
 
 /** Falls back to the currently active colorScheme if the inverse colors are not defined in the theme.  */
-export const InvertedThemeProvider = ({ children }: InvertedThemeProviderProps) => {
+export const InvertedThemeProvider = memo(({ children }: InvertedThemeProviderProps) => {
   const context = useContext(ThemeContext);
   if (!context) throw Error('InvertedThemeProvider must be used within a ThemeProvider');
   const inverseColorScheme = context.activeColorScheme === 'dark' ? 'light' : 'dark';
@@ -72,4 +89,4 @@ export const InvertedThemeProvider = ({ children }: InvertedThemeProviderProps)
       {children}
     </ThemeProvider>
   );
-};
+});

packages/web/src/cards/AnnouncementCard.tsx

@@ -5,7 +5,7 @@ import { CardBody, type CardBodyBaseProps } from './CardBody';
 
 export type AnnouncementCardBaseProps = CardBaseProps & CardBodyBaseProps;
 export type AnnouncementCardProps = AnnouncementCardBaseProps;
-/** @deprecated will be removed in v7.0.0 use NudgeCard or UpsellCard instead */
+/** @deprecated This component will be removed in a future version. Use NudgeCard or UpsellCard instead. */
 export const AnnouncementCard = memo(function AnnouncementCard({
   width,
   title,

packages/web/src/cards/FeatureEntryCard.tsx

@@ -5,7 +5,7 @@ import { CardBody, type CardBodyBaseProps } from './CardBody';
 
 export type FeatureEntryCardBaseProps = CardBaseProps & CardBodyBaseProps;
 
-/** @deprecated will be removed in v7.0.0 use NudgeCard or UpsellCard instead */
+/** @deprecated This component will be removed in a future version. Use NudgeCard or UpsellCard instead. */
 export type FeatureEntryCardProps = FeatureEntryCardBaseProps;
 
 /** @deprecated This component will be removed in a future version. Use NudgeCard or UpsellCard instead. */

packages/web/src/cells/CellMedia.tsx

@@ -26,7 +26,7 @@ export type CellMediaPictogramProps = {
 type CellMediaOtherProps = {
   type: Exclude<CellMediaType, 'icon' | 'pictogram'>;
   /**
-   * @deprecated This prop will be removed in v6.0.0
+   * @deprecated This prop will be removed in a future version.
    * If required, use `accessibilityLabel` and `accessibilityHint` instead to set accessible labels.
    * Refer to https://cds.coinbase.com/components/cell-media/ for updated accessibility guidance.
    */

packages/web/src/overlays/Portal.tsx

@@ -29,7 +29,7 @@ export const Portal = memo(function Portal({
   }
 
   return createPortal(
-    <ThemeProvider activeColorScheme={theme.activeColorScheme} theme={theme}>
+    <ThemeProvider forceInjectThemeCss activeColorScheme={theme.activeColorScheme} theme={theme}>
       {children}
     </ThemeProvider>,
     document.getElementById(containerId) as HTMLElement,

packages/web/src/overlays/useModal.ts

@@ -1,6 +1,6 @@
 import { useModal } from '@coinbase/cds-common/overlays/useModal';
 
 /**
- * @deprecated Use the visible and onRequestClose props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started
+ * @deprecated Use the `visible` and `onRequestClose` props as outlined in the docs here https://cds.coinbase.com/components/overlay/Modal
  */
 export { useModal };