[WIP] feat: add component config in ThemeProvider

packages/mobile/src/buttons/Button.tsx

@@ -20,6 +20,7 @@ import { Icon } from '../icons/Icon';
 import { HStack } from '../layout/HStack';
 import { Pressable, type PressableBaseProps } from '../system/Pressable';
 import { Text } from '../typography/Text';
+import { mergeComponentProps } from '../utils/mergeComponentProps';
 
 export const styles = StyleSheet.create({
   inline: {
@@ -89,8 +90,14 @@ export type ButtonBaseProps = SharedProps &
 export type ButtonProps = ButtonBaseProps;
 
 export const Button = memo(
-  forwardRef(function Button(
-    {
+  forwardRef(function Button(_props: ButtonProps, ref: React.ForwardedRef<View>) {
+    const theme = useTheme();
+    const mergedProps = mergeComponentProps(
+      theme?.components?.Button,
+      _props,
+      theme?.components?.mergeStyleProps,
+    );
+    const {
       variant = 'primary',
       loading,
       transparent,
@@ -117,10 +124,7 @@ export const Button = memo(
       accessibilityLabel,
       accessibilityHint,
       ...props
-    }: ButtonProps,
-    ref: React.ForwardedRef<View>,
-  ) {
-    const theme = useTheme();
+    } = mergedProps;
     const iconSize = compact ? 's' : 'm';
     const hasIcon = Boolean(startIcon || endIcon);
 

packages/mobile/src/buttons/IconButton.tsx

@@ -8,6 +8,7 @@ import { getButtonSpacingProps } from '@coinbase/cds-common/utils/getButtonSpaci
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
 import { Pressable, type PressableBaseProps } from '../system/Pressable';
+import { mergeComponentProps } from '../utils/mergeComponentProps';
 
 import type { ButtonBaseProps } from './Button';
 
@@ -27,26 +28,32 @@ export type IconButtonBaseProps = SharedProps &
 
 export type IconButtonProps = IconButtonBaseProps;
 
-export const IconButton = memo(function IconButton({
-  name,
-  active,
-  variant = 'secondary',
-  transparent,
-  compact = true,
-  background,
-  color,
-  borderColor,
-  borderWidth = 100,
-  borderRadius = 1000,
-  feedback = compact ? 'light' : 'normal',
-  flush,
-  loading,
-  style,
-  accessibilityHint,
-  accessibilityLabel,
-  ...props
-}: IconButtonProps) {
+export const IconButton = memo(function IconButton(_props: IconButtonProps) {
   const theme = useTheme();
+  const mergedProps = mergeComponentProps(
+    theme?.components?.IconButton,
+    _props,
+    theme?.components?.mergeStyleProps,
+  );
+  const {
+    name,
+    active,
+    variant = 'secondary',
+    transparent,
+    compact = true,
+    background,
+    color,
+    borderColor,
+    borderWidth = 100,
+    borderRadius = 1000,
+    feedback = compact ? 'light' : 'normal',
+    flush,
+    loading,
+    style,
+    accessibilityHint,
+    accessibilityLabel,
+    ...props
+  } = mergedProps;
   const iconSize = compact ? 's' : 'm';
 
   const variantMap = transparent ? transparentVariants : variants;

packages/mobile/src/core/theme.ts

@@ -1,13 +1,35 @@
 import type { TextStyle, ViewStyle } from 'react-native';
 import type { ColorScheme, ThemeVars } from '@coinbase/cds-common/core/theme';
 
+import type { ButtonBaseProps } from '../buttons/Button';
+import type { IconButtonBaseProps } from '../buttons/IconButton';
+
 type Shadow = {
   shadowColor?: ViewStyle['shadowColor'];
   shadowOpacity?: ViewStyle['shadowOpacity'];
   shadowOffset?: ViewStyle['shadowOffset'];
   shadowRadius?: ViewStyle['shadowRadius'];
 };
 
+export type ComponentTheme = {
+  Button: Partial<ButtonBaseProps>;
+  IconButton: Partial<IconButtonBaseProps>;
+  /**
+   * Controls how component props from theme config are merged with local component props.
+   * @default false
+   *
+   * - When `false` (default): Local props simply override theme config props (standard object spread behavior).
+   * - When `true`: Special merging behavior for styling props:
+   *   - `style`: Shallow merge (local props override theme config)
+   *   - `styles`: Object keys merged, each value shallow merged
+   *   - All other props: Local props override theme config
+   */
+  mergeStyleProps?: boolean;
+};
+export type ComponentsConfig<Components = ComponentTheme> = {
+  [Key in keyof Components]?: Components[Key];
+};
+
 export type ThemeConfig = {
   /** A unique identifier for the theme. */
   id?: string;
@@ -48,6 +70,13 @@ export type ThemeConfig = {
 };
 
 export type Theme = ThemeConfig & {
+  /**
+   * Optional component configs at theme level.
+   * Allows configuring default props for specific components throughout the theme.
+   * These are merged with props passed directly to components, with local props taking precedence.
+   * Supports nested ThemeProvider inheritance with shallow merge.
+   */
+  components?: ComponentsConfig;
   /** The currently active color scheme for the parent ThemeProvider, either "light" or "dark". */
   activeColorScheme: ColorScheme;
   /** The light or dark spectrum color values, as appropriate based on the activeColorScheme. */

packages/mobile/src/system/ThemeProvider.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useMemo } from 'react';
 import type { ColorScheme } from '@coinbase/cds-common/core/theme';
 
-import type { Theme, ThemeConfig } from '../core/theme';
+import type { ComponentsConfig, Theme, ThemeConfig } from '../core/theme';
 
 export type ThemeContextValue = Theme;
 
@@ -15,9 +15,21 @@ export type ThemeProviderProps = {
   theme: ThemeConfig;
   activeColorScheme: ColorScheme;
   children?: React.ReactNode;
+  components?: ComponentsConfig;
 };
 
-export const ThemeProvider = ({ theme, activeColorScheme, children }: ThemeProviderProps) => {
+export const ThemeProvider = ({
+  theme,
+  activeColorScheme,
+  children,
+  components,
+}: ThemeProviderProps) => {
+  const parentTheme = useContext(ThemeContext);
+  const resolvedComponents = useMemo(
+    () => ({ ...parentTheme?.components, ...components }),
+    [parentTheme?.components, components],
+  );
+
   const themeApi = useMemo(() => {
     const activeSpectrumKey = activeColorScheme === 'dark' ? 'darkSpectrum' : 'lightSpectrum';
     const activeColorKey = activeColorScheme === 'dark' ? 'darkColor' : 'lightColor';
@@ -52,7 +64,15 @@ export const ThemeProvider = ({ theme, activeColorScheme, children }: ThemeProvi
     };
   }, [theme, activeColorScheme]);
 
-  return <ThemeContext.Provider value={themeApi}>{children}</ThemeContext.Provider>;
+  const themeContextValue = useMemo(
+    () => ({
+      ...themeApi,
+      components: resolvedComponents,
+    }),
+    [themeApi, resolvedComponents],
+  );
+
+  return <ThemeContext.Provider value={themeContextValue}>{children}</ThemeContext.Provider>;
 };
 
 export type InvertedThemeProviderProps = {
@@ -63,12 +83,13 @@ export type InvertedThemeProviderProps = {
 export const InvertedThemeProvider = ({ children }: InvertedThemeProviderProps) => {
   const context = useContext(ThemeContext);
   if (!context) throw Error('InvertedThemeProvider must be used within a ThemeProvider');
+  const { components, ...theme } = context;
   const inverseColorScheme = context.activeColorScheme === 'dark' ? 'light' : 'dark';
   const inverseColorKey = context.activeColorScheme === 'dark' ? 'lightColor' : 'darkColor';
   const newColorScheme = context[inverseColorKey] ? inverseColorScheme : context.activeColorScheme;
 
   return (
-    <ThemeProvider activeColorScheme={newColorScheme} theme={context}>
+    <ThemeProvider activeColorScheme={newColorScheme} components={components} theme={theme}>
       {children}
     </ThemeProvider>
   );