feat(javascript): add button border radius overrides and update theme components

Author: brionmario

packages/javascript/src/theme/createTheme.ts

@@ -449,12 +449,31 @@ const toCssVariables = (theme: ThemeConfig): Record<string, string> => {
     });
   }
 
+  /* |---------------------------------------------------------------| */
+  /* |                       Components                              | */
+  /* |---------------------------------------------------------------| */
+
+  // Button Overrides
+  if (theme.components?.Button?.styleOverrides?.root?.borderRadius) {
+    cssVars[`--${prefix}-component-button-root-borderRadius`] =
+      theme.components.Button.styleOverrides.root.borderRadius;
+  }
+
   return cssVars;
 };
 
 const toThemeVars = (theme: ThemeConfig): ThemeVars => {
   const prefix = theme.cssVarPrefix || VendorConstants.VENDOR_PREFIX;
 
+  const componentVars: ThemeVars['components'] = {};
+  if (theme.components?.Button?.styleOverrides?.root?.borderRadius) {
+    componentVars.Button = {
+      root: {
+        borderRadius: `var(--${prefix}-component-button-root-borderRadius)`,
+      },
+    };
+  }
+
   const themeVars: ThemeVars = {
     colors: {
       action: {
@@ -558,6 +577,10 @@ const toThemeVars = (theme: ThemeConfig): ThemeVars => {
     });
   }
 
+  if (Object.keys(componentVars).length > 0) {
+    themeVars.components = componentVars;
+  }
+
   return themeVars;
 };
 

packages/javascript/src/theme/types.ts

@@ -101,6 +101,36 @@ export interface ThemeColors {
   };
 }
 
+export interface ThemeComponentStyleOverrides {
+  /**
+   * Style overrides for the root element or slots.
+   * Example: { root: { borderRadius: '8px' } }
+   */
+  root?: Record<string, any>;
+  [slot: string]: Record<string, any> | undefined;
+}
+
+export interface ThemeComponents {
+  Button?: {
+    styleOverrides?: {
+      root?: {
+        borderRadius?: string;
+        [key: string]: any;
+      };
+      [slot: string]: Record<string, any> | undefined;
+    };
+    defaultProps?: Record<string, any>;
+    variants?: Array<Record<string, any>>;
+  };
+  [componentName: string]:
+    | {
+        styleOverrides?: ThemeComponentStyleOverrides;
+        defaultProps?: Record<string, any>;
+        variants?: Array<Record<string, any>>;
+      }
+    | undefined;
+}
+
 export interface ThemeConfig {
   borderRadius: {
     large: string;
@@ -148,6 +178,25 @@ export interface ThemeConfig {
    * @default 'asgardeo' (from VendorConstants.VENDOR_PREFIX)
    */
   cssVarPrefix?: string;
+  /**
+   * Component style overrides
+   */
+  components?: ThemeComponents;
+}
+
+export interface ThemeComponentVars {
+  Button?: {
+    root?: {
+      borderRadius?: string;
+      [key: string]: any;
+    };
+    [slot: string]: Record<string, any> | undefined;
+  };
+  [componentName: string]:
+    | {
+        [slot: string]: Record<string, any> | undefined;
+      }
+    | undefined;
 }
 
 export interface ThemeVars {
@@ -266,6 +315,10 @@ export interface ThemeVars {
         }
       | undefined;
   };
+  /**
+   * Component CSS variable references (e.g., for overrides)
+   */
+  components?: ThemeComponentVars;
 }
 
 export interface Theme extends ThemeConfig {

packages/javascript/src/utils/transformBrandingPreferenceToTheme.ts

@@ -49,7 +49,7 @@ const transformThemeVariant = (themeVariant: ThemeVariant, isDark = false): Part
   const inputs = themeVariant.inputs;
   const images = themeVariant.images;
 
-  return {
+  const config: Partial<ThemeConfig> = {
     colors: {
       action: {
         active: isDark ? 'rgba(255, 255, 255, 0.70)' : 'rgba(0, 0, 0, 0.54)',
@@ -111,13 +111,6 @@ const transformThemeVariant = (themeVariant: ThemeVariant, isDark = false): Part
         dark: (colors?.alerts?.warning as ColorVariant)?.dark || (colors?.alerts?.warning as ColorVariant)?.main,
       },
     },
-    // Extract border radius from buttons or inputs
-    borderRadius: {
-      small: buttons?.primary?.base?.border?.borderRadius || inputs?.base?.border?.borderRadius,
-      medium: buttons?.secondary?.base?.border?.borderRadius,
-      large: buttons?.externalConnection?.base?.border?.borderRadius,
-    },
-    // Extract and transform images
     images: {
       favicon: images?.favicon
         ? {
@@ -135,6 +128,22 @@ const transformThemeVariant = (themeVariant: ThemeVariant, isDark = false): Part
         : undefined,
     },
   };
+
+  // --- COMPONENT OVERRIDES: Button borderRadius ---
+  const buttonBorderRadius = buttons?.primary?.base?.border?.borderRadius;
+  if (buttonBorderRadius) {
+    config.components = {
+      Button: {
+        styleOverrides: {
+          root: {
+            borderRadius: buttonBorderRadius,
+          },
+        },
+      },
+    };
+  }
+
+  return config;
 };
 
 /**

packages/react/src/components/primitives/Button/Button.styles.ts

@@ -53,7 +53,9 @@ const useStyles = (
       align-items: center;
       justify-content: center;
       gap: calc(${theme.vars.spacing.unit} * 1);
-      border-radius: ${shape === 'round' ? '50%' : theme.vars.borderRadius.medium};
+      border-radius: ${shape === 'round'
+        ? '50%'
+        : theme.vars.components?.Button?.root?.borderRadius || theme.vars.borderRadius.medium};
       font-weight: 500;
       cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};
       outline: none;

packages/react/src/contexts/Theme/ThemeProvider.tsx

@@ -175,6 +175,7 @@ const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
       shadows: brandingTheme.shadows,
       spacing: brandingTheme.spacing,
       images: brandingTheme.images,
+      components: brandingTheme.components,
     };
 
     // Merge branding theme with user-provided theme config
@@ -202,6 +203,10 @@ const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
         ...brandingThemeConfig.images,
         ...themeConfig?.images,
       },
+      components: {
+        ...brandingThemeConfig.components,
+        ...themeConfig?.components,
+      },
     };
   }, [inheritFromBranding, brandingTheme, themeConfig]);