feat: add theme.shapes and cornersToStyle

adrcotfas · adrcotfas · commit 96a042c5e4df · 2026-05-12T14:21:27.000+03:00
diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx
@@ -672,7 +672,7 @@ const TextInputExample = () => {
               <TextInput
                 mode="outlined"
                 theme={{
-                  roundness: 25,
+                  shapes: { corner: { extraSmall: 25 } },
                 }}
                 label="Outlined text input with custom roundness"
               />
@@ -681,7 +681,7 @@ const TextInputExample = () => {
               <TextInput
                 mode="outlined"
                 label="Outlined text input without roundness"
-                theme={{ roundness: 0 }}
+                theme={{ shapes: { corner: { extraSmall: 0 } } }}
               />
             </View>
             <View style={styles.inputContainerStyle}>
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -210,7 +210,7 @@ const Button = (
     },
     [mode]
   );
-  const { roundness, animation } = theme;
+  const { animation } = theme;
   const uppercase = uppercaseProp ?? false;
   const isWeb = Platform.OS === 'web';
 
@@ -271,7 +271,7 @@ const Button = (
     (style) => style.startsWith('border') && style.endsWith('Radius')
   );
 
-  const borderRadius = 5 * roundness;
+  const borderRadius = theme.shapes.corner.largeIncreased;
   const iconSize = 18;
 
   const {
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -181,7 +181,7 @@ const Card = (
   const { current: elevationDarkAdaptive } = React.useRef<Animated.Value>(
     new Animated.Value(cardElevation)
   );
-  const { animation, dark, mode, roundness } = theme;
+  const { animation, dark, mode } = theme;
 
   const prevDarkRef = React.useRef<boolean>(dark);
   React.useEffect(() => {
@@ -267,7 +267,7 @@ const Card = (
   );
 
   const borderRadiusCombinedStyles = {
-    borderRadius: 3 * roundness,
+    borderRadius: theme.shapes.corner.medium,
     ...borderRadiusStyles,
   };
 
diff --git a/src/components/Card/utils.tsx b/src/components/Card/utils.tsx
@@ -26,17 +26,15 @@ export const getCardCoverStyle = ({
   index?: number;
   total?: number;
 }) => {
-  const { roundness } = theme;
-
   if (Object.keys(borderRadiusStyles).length > 0) {
     return {
-      borderRadius: 3 * roundness,
+      borderRadius: theme.shapes.corner.medium,
       ...borderRadiusStyles,
     };
   }
 
   return {
-    borderRadius: 3 * roundness,
+    borderRadius: theme.shapes.corner.medium,
   };
 };
 
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
@@ -205,7 +205,6 @@ const Chip = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { roundness } = theme;
   const isWeb = Platform.OS === 'web';
 
   const { current: elevation } = React.useRef<Animated.Value>(
@@ -244,7 +243,7 @@ const Chip = ({
   });
 
   const opacity = 0.38;
-  const defaultBorderRadius = roundness * 2;
+  const defaultBorderRadius = theme.shapes.corner.small;
   const iconSize = 18;
 
   const {
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
@@ -105,8 +105,7 @@ const Dialog = ({
 }: Props) => {
   const { right, left } = useSafeAreaInsets();
   const theme = useInternalTheme(themeOverrides);
-  const { roundness } = theme as Theme;
-  const borderRadius = 7 * roundness;
+  const borderRadius = (theme as Theme).shapes.corner.extraLarge;
 
   const backgroundColor = theme.colors.surfaceContainerHigh;
 
diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx
@@ -100,15 +100,14 @@ const DrawerItem = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { roundness } = theme;
 
   const backgroundColor = active ? theme.colors.secondaryContainer : undefined;
   const contentColor = active
     ? theme.colors.onSecondaryContainer
     : theme.colors.onSurfaceVariant;
 
   const labelMargin = icon ? 12 : 0;
-  const borderRadius = 7 * roundness;
+  const borderRadius = theme.shapes.corner.extraLarge;
   const font = theme.fonts.labelLarge;
 
   return (
diff --git a/src/components/FAB/utils.ts b/src/components/FAB/utils.ts
@@ -284,10 +284,10 @@ const v3LargeSize = {
   width: 96,
 };
 
-const getCustomFabSize = (customSize: number, roundness: number) => ({
+const getCustomFabSize = (customSize: number) => ({
   height: customSize,
   width: customSize,
-  borderRadius: roundness === 0 ? 0 : customSize / roundness,
+  borderRadius: customSize / 4,
 });
 
 export const getFabStyle = ({
@@ -299,17 +299,15 @@ export const getFabStyle = ({
   size: 'small' | 'medium' | 'large';
   theme: InternalTheme;
 }) => {
-  const { roundness } = theme;
-
-  if (customSize) return getCustomFabSize(customSize, roundness);
+  if (customSize) return getCustomFabSize(customSize);
 
   switch (size) {
     case 'small':
-      return { ...v3SmallSize, borderRadius: 3 * roundness };
+      return { ...v3SmallSize, borderRadius: theme.shapes.corner.medium };
     case 'medium':
-      return { ...v3MediumSize, borderRadius: 4 * roundness };
+      return { ...v3MediumSize, borderRadius: theme.shapes.corner.large };
     case 'large':
-      return { ...v3LargeSize, borderRadius: 7 * roundness };
+      return { ...v3LargeSize, borderRadius: theme.shapes.corner.extraLarge };
   }
 };
 
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -622,7 +622,7 @@ const Menu = ({
         }),
       },
     ],
-    borderRadius: theme.roundness,
+    borderRadius: theme.shapes.corner.extraSmall,
     ...(scrollableMenuHeight ? { height: scrollableMenuHeight } : {}),
   };
 
diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx
@@ -20,6 +20,7 @@ import IconButton from './IconButton/IconButton';
 import MaterialCommunityIcon from './MaterialCommunityIcon';
 import Surface from './Surface';
 import { useInternalTheme } from '../core/theming';
+import { cornerNone } from '../theme/tokens/sys/shape';
 import type { Theme, ThemeProp } from '../types';
 import { forwardRef } from '../utils/forwardRef';
 
@@ -213,7 +214,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
       onClearIconPress?.(e);
     };
 
-    const { roundness, dark } = theme;
+    const { dark } = theme;
 
     const placeholderTextColor = theme.colors.onSurface;
     const textColor = theme.colors.onSurfaceVariant;
@@ -237,10 +238,12 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
     return (
       <Surface
         style={[
-          { borderRadius: roundness },
+          { borderRadius: theme.shapes.corner.extraSmall },
           {
             backgroundColor: theme.colors.surfaceContainerHigh,
-            borderRadius: roundness * (isBarMode ? 7 : 0),
+            borderRadius: isBarMode
+              ? theme.shapes.corner.extraLarge
+              : cornerNone,
           },
           styles.container,
           style,
diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -145,7 +145,6 @@ const SegmentedButtonItem = ({
     }
   }, [checked, checkScale, showSelectedCheck]);
 
-  const { roundness } = theme;
   const { borderColor, textColor, textOpacity, borderWidth, backgroundColor } =
     getSegmentedButtonColors({
       checked,
@@ -155,7 +154,7 @@ const SegmentedButtonItem = ({
       uncheckedColor,
     });
 
-  const borderRadius = 5 * roundness;
+  const borderRadius = theme.shapes.corner.largeIncreased;
   const segmentBorderRadius = getSegmentedButtonBorderRadius({
     theme,
     segment,
diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx
@@ -235,7 +235,7 @@ const Snackbar = ({
     }
   }, [visible, handleOnVisible, handleOnHidden]);
 
-  const { colors, roundness } = theme as Theme;
+  const { colors } = theme as Theme;
 
   if (hidden) {
     return null;
@@ -295,7 +295,7 @@ const Snackbar = ({
           styles.container,
           {
             backgroundColor,
-            borderRadius: roundness,
+            borderRadius: (theme as Theme).shapes.corner.extraSmall,
             opacity: opacity,
             transform: [
               {
diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
@@ -78,7 +78,8 @@ const TextInputFlat = ({
   ...rest
 }: ChildTextInputProps) => {
   const isAndroid = Platform.OS === 'android';
-  const { colors, roundness } = theme;
+  const { colors } = theme;
+  const roundness = theme.shapes.corner.extraSmall;
   const font = theme.fonts.bodyLarge;
   const hasActiveOutline = parentState.focused || error;
 
@@ -156,8 +157,8 @@ const TextInputFlat = ({
 
   const containerStyle = {
     backgroundColor,
-    borderTopLeftRadius: theme.roundness,
-    borderTopRightRadius: theme.roundness,
+    borderTopLeftRadius: roundness,
+    borderTopRightRadius: roundness,
   };
 
   const labelScale = MINIMIZED_LABEL_FONT_SIZE / fontSize;
diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
@@ -81,7 +81,8 @@ const TextInputOutlined = ({
 }: ChildTextInputProps) => {
   const adornmentConfig = getAdornmentConfig({ left, right });
 
-  const { colors, roundness } = theme;
+  const { colors } = theme;
+  const roundness = theme.shapes.corner.extraSmall;
   const font = theme.fonts.bodyLarge;
   const hasActiveOutline = parentState.focused || error;
 
diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx
@@ -108,7 +108,7 @@ const ToggleButton = forwardRef<View, Props>(
     ref
   ) => {
     const theme = useInternalTheme(themeOverrides);
-    const borderRadius = theme.roundness;
+    const borderRadius = theme.shapes.corner.extraSmall;
 
     return (
       <ToggleButtonGroupContext.Consumer>
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -209,7 +209,7 @@ const Tooltip = ({
                   measurement as Measurement,
                   children as React.ReactElement<TooltipChildProps>
                 ),
-                borderRadius: theme.roundness,
+                borderRadius: theme.shapes.corner.extraSmall,
                 ...(measurement.measured ? styles.visible : styles.hidden),
               },
             ]}
diff --git a/src/components/__tests__/Card/Card.test.tsx b/src/components/__tests__/Card/Card.test.tsx
@@ -220,7 +220,7 @@ describe('getCardCoverStyle - border radius', () => {
         theme: getTheme(),
         borderRadiusStyles: {},
       })
-    ).toMatchObject({ borderRadius: 3 * getTheme().roundness });
+    ).toMatchObject({ borderRadius: getTheme().shapes.corner.medium });
   });
 });
 
diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx
@@ -83,7 +83,7 @@ it('renders active chip if only onLongPress handler is passed', () => {
 
 it('renders chip with zero border radius', () => {
   const { getByTestId } = render(
-    <Chip testID="active-chip" theme={{ roundness: 0 }}>
+    <Chip testID="active-chip" theme={{ shapes: { corner: { small: 0 } } }}>
       Active chip
     </Chip>
   );
diff --git a/src/components/__tests__/FAB.test.tsx b/src/components/__tests__/FAB.test.tsx
@@ -131,7 +131,12 @@ it('renders FAB with custom border radius', () => {
 
 it('renders FAB with zero border radius', () => {
   const { getByTestId } = render(
-    <FAB theme={{ roundness: 0 }} onPress={() => {}} icon="plus" testID="fab" />
+    <FAB
+      theme={{ shapes: { corner: { large: 0 } } }}
+      onPress={() => {}}
+      icon="plus"
+      testID="fab"
+    />
   );
 
   expect(getByTestId('fab-container')).toHaveStyle({ borderRadius: 0 });
diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
@@ -187,7 +187,18 @@ exports[`renders list section with custom title style 1`] = `
           "lineHeight": 20,
         },
       },
-      "roundness": 4,
+      "shapes": {
+        "corner": {
+          "extraExtraLarge": 48,
+          "extraLarge": 28,
+          "extraLargeIncreased": 32,
+          "extraSmall": 4,
+          "large": 16,
+          "largeIncreased": 20,
+          "medium": 12,
+          "small": 8,
+        },
+      },
     }
   }
 >
@@ -729,7 +740,18 @@ exports[`renders list section with subheader 1`] = `
           "lineHeight": 20,
         },
       },
-      "roundness": 4,
+      "shapes": {
+        "corner": {
+          "extraExtraLarge": 48,
+          "extraLarge": 28,
+          "extraLargeIncreased": 32,
+          "extraSmall": 4,
+          "large": 16,
+          "largeIncreased": 20,
+          "medium": 12,
+          "small": 8,
+        },
+      },
     }
   }
 >
@@ -1269,7 +1291,18 @@ exports[`renders list section without subheader 1`] = `
           "lineHeight": 20,
         },
       },
-      "roundness": 4,
+      "shapes": {
+        "corner": {
+          "extraExtraLarge": 48,
+          "extraLarge": 28,
+          "extraLargeIncreased": 32,
+          "extraSmall": 4,
+          "large": 16,
+          "largeIncreased": 20,
+          "medium": 12,
+          "small": 8,
+        },
+      },
     }
   }
 >
diff --git a/src/theme/schemes/DarkTheme.tsx b/src/theme/schemes/DarkTheme.tsx
@@ -1,11 +1,13 @@
 import { baseTheme } from './base';
 import { tokens } from '../tokens';
 import { buildScheme } from '../tokens/sys/color/roles';
+import { defaultShapes } from '../tokens/sys/shape';
 import type { Theme } from '../types';
 
 export const DarkTheme: Theme = {
   ...baseTheme,
   dark: true,
   mode: 'adaptive',
   colors: buildScheme(tokens.md.ref.palette, tokens.md.ref, { mode: 'dark' }),
+  shapes: defaultShapes,
 };
diff --git a/src/theme/schemes/LightTheme.tsx b/src/theme/schemes/LightTheme.tsx
@@ -1,10 +1,12 @@
 import { baseTheme } from './base';
 import { tokens } from '../tokens';
 import { buildScheme } from '../tokens/sys/color/roles';
+import { defaultShapes } from '../tokens/sys/shape';
 import type { Theme } from '../types';
 
 export const LightTheme: Theme = {
   ...baseTheme,
   dark: false,
   colors: buildScheme(tokens.md.ref.palette, tokens.md.ref, { mode: 'light' }),
+  shapes: defaultShapes,
 };
diff --git a/src/theme/schemes/base.ts b/src/theme/schemes/base.ts
diff --git a/src/theme/tokens/sys/shape.ts b/src/theme/tokens/sys/shape.ts
diff --git a/src/theme/types/index.ts b/src/theme/types/index.ts
diff --git a/src/theme/types/shape.ts b/src/theme/types/shape.ts
diff --git a/src/theme/types/theme.ts b/src/theme/types/theme.ts
