[WIP]feat: Gradients

apps/mobile-app/scripts/utils/routes.mjs

@@ -270,6 +270,11 @@ export const routes = [
     key: 'Frontier',
     getComponent: () => require('@coinbase/cds-mobile/system/__stories__/Frontier.stories').default,
   },
+  {
+    key: 'GradientBox',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/layout/__stories__/GradientBox.stories').default,
+  },
   {
     key: 'Group',
     getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Group.stories').default,

apps/mobile-app/src/routes.ts

@@ -275,6 +275,11 @@ export const routes = [
     key: 'Frontier',
     getComponent: () => require('@coinbase/cds-mobile/system/__stories__/Frontier.stories').default,
   },
+  {
+    key: 'GradientBox',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/layout/__stories__/GradientBox.stories').default,
+  },
   {
     key: 'Group',
     getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Group.stories').default,

packages/common/src/core/theme.ts

@@ -219,6 +219,14 @@ export namespace ThemeVarsDefault {
     1: void;
     2: void;
   }
+
+  export interface Gradient {
+    primary: void;
+    positive: void;
+    negative: void;
+    brand: void;
+    premium: void;
+  }
 }
 
 declare module '@coinbase/cds-common/core/theme' {
@@ -251,6 +259,7 @@ declare module '@coinbase/cds-common/core/theme' {
     export interface Shadow {}
     export interface ControlSize {}
     export interface Elevation {}
+    export interface Gradient {}
   }
 }
 
@@ -328,4 +337,8 @@ export namespace ThemeVars {
   export type Elevation = Prettify<
     keyof ThemeVarsDefault.Elevation | keyof ThemeVarsExtended.Elevation
   >;
+
+  export type Gradient = Prettify<
+    keyof ThemeVarsDefault.Gradient | keyof ThemeVarsExtended.Gradient
+  >;
 }

packages/common/src/tokens/button.ts

@@ -10,6 +10,11 @@ type ButtonVariantStyles = {
 type ButtonVariantConfig = Record<ButtonVariant, ButtonVariantStyles>;
 
 export const variants = {
+  gradient: {
+    color: 'fgInverse',
+    background: 'transparent',
+    borderColor: 'transparent',
+  },
   primary: {
     color: 'fgInverse',
     background: 'bgPrimary',
@@ -43,6 +48,11 @@ export const variants = {
 } as const satisfies ButtonVariantConfig;
 
 export const transparentVariants = {
+  gradient: {
+    color: 'fgInverse',
+    background: 'transparent',
+    borderColor: 'transparent',
+  },
   primary: {
     color: 'fgPrimary',
     background: 'bg',

packages/common/src/types/ButtonBaseProps.ts

@@ -1,5 +1,6 @@
 export type ButtonVariant =
   | 'primary'
+  | 'gradient'
   | 'secondary'
   | 'tertiary'
   | 'positive'

packages/mobile/package.json

@@ -81,6 +81,10 @@
       "types": "./dts/controls/index.d.ts",
       "default": "./esm/controls/index.js"
     },
+    "./gradients": {
+      "types": "./dts/gradients/index.d.ts",
+      "default": "./esm/gradients/index.js"
+    },
     "./dates": {
       "types": "./dts/dates/index.d.ts",
       "default": "./esm/dates/index.js"

packages/mobile/src/buttons/Button.tsx

@@ -40,9 +40,18 @@ export const styles = StyleSheet.create({
 
 export type ButtonBaseProps = SharedProps &
   Pick<SharedAccessibilityProps, 'accessibilityLabel'> &
-  PressableBaseProps & {
+  Omit<PressableBaseProps, 'gradient' | 'gradientConfig' | 'gradientNode'> & {
     /**
      * Toggle design and visual variants.
+     *
+     * For gradient buttons, set `variant="gradient"` along with one of:
+     * - `gradient` prop with a theme preset name (e.g., "brand", "primary")
+     * - `gradientConfig` prop with a custom config object (e.g., `{ colors: ['#0052FF', '#7B3FE4'], angle: 90 }`)
+     * - `blendStyles.backgroundGradient` for state-based gradients (hover/pressed/disabled)
+     * - `gradientNode` prop with a custom node to render (e.g., `<RadialGradientFill />`)
+     *
+     * Note: gradient/gradientConfig props are ignored unless variant="gradient" is set.
+     *
      * @default primary
      */
     variant?: ButtonVariant;
@@ -84,6 +93,21 @@ export type ButtonBaseProps = SharedProps &
      * @default 1
      */
     numberOfLines?: number;
+    /**
+     * Theme gradient preset name. Only applied when `variant="gradient"`.
+     * @example gradient="brand"
+     */
+    gradient?: PressableBaseProps['gradient'];
+    /**
+     * Custom gradient configuration. Only applied when `variant="gradient"`.
+     * @example gradientConfig={{ colors: ['#0052FF', '#7B3FE4'], angle: 90 }}
+     */
+    gradientConfig?: PressableBaseProps['gradientConfig'];
+    /**
+     * Custom gradient node to render. Only applied when `variant="gradient"`.
+     * @example gradientNode={<RadialGradientFill colors={['#0052FF', '#7B3FE4']} />}
+     */
+    gradientNode?: PressableBaseProps['gradientNode'];
   };
 
 export type ButtonProps = ButtonBaseProps;
@@ -117,17 +141,22 @@ export const Button = memo(
       wrapperStyles,
       feedback = compact ? 'light' : 'normal',
       borderColor,
-      borderWidth = 100,
+      // TO DO: This is a hack to fix the anti-aliasing issue with gradients.
+      borderWidth = variant === 'gradient' ? 0 : 100,
       borderRadius = compact ? 700 : 900,
       accessibilityLabel,
       accessibilityHint,
+      gradient,
+      gradientConfig,
+      gradientNode,
       ...props
     }: ButtonProps,
     ref: React.ForwardedRef<View>,
   ) {
     const theme = useTheme();
     const iconSize = compact ? 's' : 'm';
     const hasIcon = Boolean(startIcon || endIcon);
+    const isGradientVariant = variant === 'gradient';
 
     const variantMap = transparent ? transparentVariants : variants;
 
@@ -191,6 +220,9 @@ export const Button = memo(
         borderRadius={borderRadius}
         borderWidth={borderWidth}
         feedback={feedback}
+        gradient={isGradientVariant ? gradient : undefined}
+        gradientConfig={isGradientVariant ? gradientConfig : undefined}
+        gradientNode={isGradientVariant ? gradientNode : undefined}
         loading={loading}
         marginEnd={marginEnd}
         marginStart={marginStart}

packages/mobile/src/buttons/IconButton.tsx

@@ -12,8 +12,18 @@ import { Pressable, type PressableBaseProps } from '../system/Pressable';
 import type { ButtonBaseProps } from './Button';
 
 export type IconButtonBaseProps = SharedProps &
-  Omit<PressableBaseProps, 'children'> &
-  Pick<ButtonBaseProps, 'disabled' | 'transparent' | 'compact' | 'flush' | 'loading'> & {
+  Omit<PressableBaseProps, 'children' | 'gradient' | 'gradientConfig' | 'gradientNode'> &
+  Pick<
+    ButtonBaseProps,
+    | 'disabled'
+    | 'transparent'
+    | 'compact'
+    | 'flush'
+    | 'loading'
+    | 'gradient'
+    | 'gradientConfig'
+    | 'gradientNode'
+  > & {
     /** Name of the icon, as defined in Figma. */
     name: IconName;
     /** Whether the icon is active */
@@ -36,18 +46,22 @@ export const IconButton = memo(function IconButton({
   background,
   color,
   borderColor,
-  borderWidth = 100,
+  borderWidth = variant === 'gradient' ? undefined : 100,
   borderRadius = 1000,
   feedback = compact ? 'light' : 'normal',
   flush,
   loading,
   style,
   accessibilityHint,
   accessibilityLabel,
+  gradient,
+  gradientConfig,
+  gradientNode,
   ...props
 }: IconButtonProps) {
   const theme = useTheme();
   const iconSize = compact ? 's' : 'm';
+  const isGradientVariant = variant === 'gradient';
 
   const variantMap = transparent ? transparentVariants : variants;
   const variantStyle = variantMap[variant];
@@ -88,6 +102,9 @@ export const IconButton = memo(function IconButton({
       borderRadius={borderRadius}
       borderWidth={borderWidth}
       feedback={feedback}
+      gradient={isGradientVariant ? gradient : undefined}
+      gradientConfig={isGradientVariant ? gradientConfig : undefined}
+      gradientNode={isGradientVariant ? gradientNode : undefined}
       loading={loading}
       marginEnd={marginEnd}
       marginStart={marginStart}