feat(javascript): add border radius overrides for Field component and update related styles

Author: brionmario

packages/javascript/src/theme/createTheme.ts

@@ -459,6 +459,11 @@ const toCssVariables = (theme: ThemeConfig): Record<string, string> => {
       theme.components.Button.styleOverrides.root.borderRadius;
   }
 
+  // Field Overrides (Parent of `TextField`, `DatePicker`, `OtpField`, `Select`, etc.)
+  if (theme.components?.Field?.styleOverrides?.root?.borderRadius) {
+    cssVars[`--${prefix}-component-field-root-borderRadius`] = theme.components.Field.styleOverrides.root.borderRadius;
+  }
+
   return cssVars;
 };
 
@@ -473,6 +478,13 @@ const toThemeVars = (theme: ThemeConfig): ThemeVars => {
       },
     };
   }
+  if (theme.components?.Field?.styleOverrides?.root?.borderRadius) {
+    componentVars.Field = {
+      root: {
+        borderRadius: `var(--${prefix}-component-field-root-borderRadius)`,
+      },
+    };
+  }
 
   const themeVars: ThemeVars = {
     colors: {

packages/javascript/src/theme/types.ts

@@ -122,6 +122,17 @@ export interface ThemeComponents {
     defaultProps?: Record<string, any>;
     variants?: Array<Record<string, any>>;
   };
+  Field?: {
+    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;
@@ -192,6 +203,13 @@ export interface ThemeComponentVars {
     };
     [slot: string]: Record<string, any> | undefined;
   };
+  Field?: {
+    root?: {
+      borderRadius?: string;
+      [key: string]: any;
+    };
+    [slot: string]: Record<string, any> | undefined;
+  };
   [componentName: string]:
     | {
         [slot: string]: Record<string, any> | undefined;

packages/javascript/src/utils/transformBrandingPreferenceToTheme.ts

@@ -129,17 +129,33 @@ const transformThemeVariant = (themeVariant: ThemeVariant, isDark = false): Part
     },
   };
 
-  // --- COMPONENT OVERRIDES: Button borderRadius ---
+  /* |---------------------------------------------------------------| */
+  /* |                       Components                              | */
+  /* |---------------------------------------------------------------| */
+
   const buttonBorderRadius = buttons?.primary?.base?.border?.borderRadius;
-  if (buttonBorderRadius) {
+  const fieldBorderRadius = inputs?.base?.border?.borderRadius;
+
+  if (buttonBorderRadius || fieldBorderRadius) {
     config.components = {
-      Button: {
-        styleOverrides: {
-          root: {
-            borderRadius: buttonBorderRadius,
+      ...(buttonBorderRadius && {
+        Button: {
+          styleOverrides: {
+            root: {
+              borderRadius: buttonBorderRadius,
+            },
           },
         },
-      },
+      }),
+      ...(fieldBorderRadius && {
+        Field: {
+          styleOverrides: {
+            root: {
+              borderRadius: fieldBorderRadius,
+            },
+          },
+        },
+      }),
     };
   }
 

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

@@ -34,7 +34,7 @@ const useStyles = (theme: Theme, colorScheme: string, hasError: boolean, disable
       width: 100%;
       padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
       border: 1px solid ${theme.vars.colors.border};
-      border-radius: ${theme.vars.borderRadius.medium};
+      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
       font-size: 1rem;
       color: ${theme.vars.colors.text.primary};
       background-color: ${theme.vars.colors.background.surface};

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

@@ -54,7 +54,7 @@ const useStyles = (
       font-size: ${theme.vars.typography.fontSizes.xl};
       font-weight: 500;
       border: 2px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};
-      border-radius: ${theme.vars.borderRadius.medium};
+      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
       color: ${theme.vars.colors.text.primary};
       background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};
       outline: none;

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

@@ -37,7 +37,7 @@ const useStyles = (theme: Theme, colorScheme: string, disabled: boolean, hasErro
       width: 100%;
       padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
       border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};
-      border-radius: ${theme.vars.borderRadius.medium};
+      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
       font-size: ${theme.vars.typography.fontSizes.md};
       color: ${theme.vars.colors.text.primary};
       background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};

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

@@ -54,7 +54,7 @@ const useStyles = (
       width: 100%;
       padding: ${theme.vars.spacing.unit} ${rightPadding} ${theme.vars.spacing.unit} ${leftPadding};
       border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};
-      border-radius: ${theme.vars.borderRadius.medium};
+      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
       font-size: ${theme.vars.typography.fontSizes.md};
       color: ${theme.vars.colors.text.primary};
       background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};