@boostdev/design-system-react-native 0.5.1 → 0.6.0

package/src/native/ThemeContext.tsx

@@ -1,12 +1,28 @@
 import { createContext, ReactNode, useContext, useMemo } from 'react';
 import { useColorScheme } from 'react-native';
-import { colors } from './tokens';
+import { border, colors } from './tokens';
 
 export type ThemeColorName = keyof typeof colors.light;
 
 /** Semantic theme colors, widened to `string` so brand overrides typecheck. */
 export type ThemeColors = Readonly<Record<ThemeColorName, string>>;
 
+/** Corner radii of the controls, in points. */
+export interface ThemeRadius {
+  /** Buttons with a text label. */
+  button: number;
+  /** Icon-only buttons (`isIconOnly`). */
+  iconButton: number;
+  /** Input fields: FormInput, Select, Combobox, Textarea, FileInput, NumberInput. */
+  field: number;
+}
+
+const defaultRadius: ThemeRadius = {
+  button: border.radius.m,
+  iconButton: border.radius.full,
+  field: border.radius.m,
+};
+
 /**
  * Per-scheme token overrides, merged over the foundation colors.
  * The React Native equivalent of overriding tokens in the web
@@ -15,11 +31,18 @@ export type ThemeColors = Readonly<Record<ThemeColorName, string>>;
 export interface ThemeTokenOverrides {
   light?: Partial<Record<ThemeColorName, string>>;
   dark?: Partial<Record<ThemeColorName, string>>;
+  /**
+   * Radius overrides, the same in light and dark. The native equivalent of the
+   * web `--button_radius` custom property. Merged over the parent provider's
+   * radii, so a nested provider that only overrides colors keeps the app's radii.
+   */
+  radius?: Partial<ThemeRadius>;
 }
 
 interface ThemeContextValue {
   colors: ThemeColors;
   isDark: boolean;
+  radius: ThemeRadius;
 }
 
 const ThemeContext = createContext<ThemeContextValue | null>(null);
@@ -33,11 +56,17 @@ interface ThemeProviderProps {
 export function ThemeProvider({ children, colorScheme, tokens }: ThemeProviderProps) {
   const systemScheme = useColorScheme();
   const isDark = (colorScheme ?? systemScheme) === 'dark';
+  // Colors merge over the foundation; radii merge over the parent provider's.
+  const parentRadius = useContext(ThemeContext)?.radius ?? defaultRadius;
   const value = useMemo<ThemeContextValue>(() => {
     const base = isDark ? colors.dark : colors.light;
     const overrides = isDark ? tokens?.dark : tokens?.light;
-    return { colors: { ...base, ...overrides }, isDark };
-  }, [isDark, tokens]);
+    return {
+      colors: { ...base, ...overrides },
+      isDark,
+      radius: { ...parentRadius, ...tokens?.radius },
+    };
+  }, [isDark, tokens, parentRadius]);
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
 }