refactor: rename typescale to font for consistency

docs/pages/2.theming.md

@@ -132,7 +132,7 @@ A theme usually contains the following properties:
     - `inversePrimary`
     - `backdrop`
 
-- `typescale` (`object`): various fonts styling properties under the text variant key used in component.
+- `fonts` (`object`): various fonts styling properties under the text variant key used in component.
   - [`variant` e.g. `labelMedium`] (`object`):
     - `fontFamily`
     - `letterSpacing`
@@ -313,7 +313,7 @@ function MyComponent(props) {
 
 ## Customizing all instances of a component
 
-Sometimes you want to style a component in a different way everywhere, but don't want to change the properties in the theme, so that other components are not affected. For example, say you want to change the font for all your buttons, but don't want to change `theme.typescale.labelLarge` because it affects other components.
+Sometimes you want to style a component in a different way everywhere, but don't want to change the properties in the theme, so that other components are not affected. For example, say you want to change the font for all your buttons, but don't want to change `theme.fonts.labelLarge` because it affects other components.
 
 We don't have an API to do this, because you can already do it with components:
 
@@ -322,7 +322,7 @@ import * as React from 'react';
 import { Button } from 'react-native-paper';
 
 export default function FancyButton(props) {
-  return <Button theme={{ typescale: { labelLarge: {letterSpacing: 1 } } }} {...props} />;
+  return <Button theme={{ fonts: { labelLarge: {letterSpacing: 1 } } }} {...props} />;
 }
 ```
 

src/components/Appbar/AppbarContent.tsx

@@ -127,7 +127,7 @@ const AppbarContent = ({
             {
               color: titleTextColor,
               ...(isV3
-                ? theme.typescale[variant]
+                ? theme.fonts[variant]
                 : Platform.OS === 'ios'
                 ? theme.fonts.regular
                 : theme.fonts.medium),

src/components/Button/Button.tsx

@@ -260,10 +260,13 @@ const Button = ({
   const { color: customLabelColor, fontSize: customLabelSize } =
     StyleSheet.flatten(labelStyle) || {};
 
+  const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
+
   const textStyle = {
     color: textColor,
-    ...(isV3 ? theme.typescale.labelLarge : theme.fonts.medium),
+    ...font,
   };
+
   const iconStyle =
     StyleSheet.flatten(contentStyle)?.flexDirection === 'row-reverse'
       ? [

src/components/Drawer/DrawerItem.tsx

@@ -98,6 +98,7 @@ const DrawerItem = ({
         .rgb()
         .toString()
     : undefined;
+  const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
 
   return (
     <View {...rest}>
@@ -130,7 +131,7 @@ const DrawerItem = ({
                 {
                   color: contentColor,
                   marginLeft: labelMargin,
-                  ...(isV3 ? theme.typescale.labelLarge : theme.fonts.medium),
+                  ...font,
                 },
               ]}
             >

src/components/Drawer/DrawerSection.tsx

@@ -65,6 +65,8 @@ const DrawerSection = ({ children, title, theme, style, ...rest }: Props) => {
     ? theme.colors.onSurfaceVariant
     : color(theme.colors.text).alpha(0.54).rgb().string();
   const titleMargin = isV3 ? 28 : 16;
+  const font = isV3 ? theme.fonts.titleSmall : theme.fonts.medium;
+
   return (
     <View style={[styles.container, style]} {...rest}>
       {title && (
@@ -77,7 +79,7 @@ const DrawerSection = ({ children, title, theme, style, ...rest }: Props) => {
                 {
                   color: titleColor,
                   marginLeft: titleMargin,
-                  ...(isV3 ? theme.typescale.titleSmall : theme.fonts.medium),
+                  ...font,
                 },
               ]}
             >

src/components/FAB/AnimatedFAB.tsx

@@ -291,9 +291,11 @@ const AnimatedFAB = ({
     animFAB,
   });
 
+  const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
+
   const textStyle = {
     color: foregroundColor,
-    ...(isV3 ? theme.typescale.labelLarge : theme.fonts.medium),
+    ...font,
   };
 
   const md2Elevation = disabled || !isIOS ? 0 : 6;

src/components/FAB/FAB.tsx

@@ -207,12 +207,13 @@ const FAB = ({
   const isFlatMode = mode === 'flat';
   const iconSize = isLargeSize ? 36 : 24;
   const loadingIndicatorSize = isLargeSize ? 24 : 18;
+  const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
 
   const fabStyle = getFabStyle({ customSize, size, theme });
   const extendedStyle = getExtendedFabStyle({ customSize, theme });
   const textStyle = {
     color: foregroundColor,
-    ...(isV3 ? theme.typescale.labelLarge : theme.fonts.medium),
+    ...font,
   };
 
   const { borderRadius = fabStyle.borderRadius } = (StyleSheet.flatten(style) ||

src/components/List/ListSubheader.tsx

@@ -36,6 +36,8 @@ const ListSubheader = ({ style, theme: overrideTheme, ...rest }: Props) => {
     ? theme.colors.onSurfaceVariant
     : color(theme.colors.text).alpha(0.54).rgb().string();
 
+  const font = theme.isV3 ? theme.fonts.bodyMedium : theme.fonts.medium;
+
   return (
     <Text
       variant="bodyMedium"
@@ -45,7 +47,7 @@ const ListSubheader = ({ style, theme: overrideTheme, ...rest }: Props) => {
         styles.container,
         {
           color: textColor,
-          ...(theme.isV3 ? theme.typescale.bodyMedium : theme.fonts.medium),
+          ...font,
         },
         style,
       ]}

src/components/TextInput/TextInputFlat.tsx

@@ -74,7 +74,7 @@ const TextInputFlat = ({
 }: ChildTextInputProps) => {
   const isAndroid = Platform.OS === 'android';
   const { colors, isV3, roundness } = theme;
-  const font = isV3 ? theme.typescale.bodyLarge : theme.fonts.regular;
+  const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.regular;
   const hasActiveOutline = parentState.focused || error;
 
   const { LABEL_PADDING_TOP, FLAT_INPUT_OFFSET, MIN_HEIGHT } =

src/components/TextInput/TextInputOutlined.tsx

@@ -74,7 +74,7 @@ const TextInputOutlined = ({
   const adornmentConfig = getAdornmentConfig({ left, right });
 
   const { colors, isV3, roundness } = theme;
-  const font = isV3 ? theme.typescale.bodyLarge : theme.fonts.regular;
+  const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.regular;
   const hasActiveOutline = parentState.focused || error;
 
   const { INPUT_PADDING_HORIZONTAL, MIN_HEIGHT, ADORNMENT_OFFSET } =

src/components/Typography/AnimatedText.tsx

@@ -5,7 +5,6 @@ import {
   I18nManager,
   StyleProp,
   StyleSheet,
-  Platform,
 } from 'react-native';
 import { withTheme } from '../../core/theming';
 import { Font, MD3TypescaleKey, Theme } from '../../types';
@@ -45,12 +44,12 @@ function AnimatedText({ style, theme, variant, ...rest }: Props) {
     const stylesByVariant = Object.keys(MD3TypescaleKey).reduce(
       (acc, key) => {
         const { fontSize, fontWeight, lineHeight, letterSpacing, fontFamily } =
-          theme.typescale[key as keyof typeof MD3TypescaleKey];
+          theme.fonts[key as keyof typeof MD3TypescaleKey];
 
         return {
           ...acc,
           [key]: {
-            ...(Platform.OS === 'android' && { fontFamily }),
+            fontFamily,
             fontSize,
             fontWeight,
             lineHeight: lineHeight,

src/components/Typography/Text.tsx

@@ -93,7 +93,7 @@ const Text: React.ForwardRefRenderFunction<{}, Props> = (
     const stylesByVariant = Object.keys(MD3TypescaleKey).reduce(
       (acc, key) => {
         const { fontSize, fontWeight, lineHeight, letterSpacing, fontFamily } =
-          theme.typescale[key as keyof typeof MD3TypescaleKey];
+          theme.fonts[key as keyof typeof MD3TypescaleKey];
 
         return {
           ...acc,

src/components/__tests__/__snapshots__/ListSection.test.js.snap

@@ -55,9 +55,7 @@ exports[`renders list section with custom title style 1`] = `
         "tertiaryContainer": "rgba(255, 216, 228, 1)",
       },
       "dark": false,
-      "isV3": true,
-      "roundness": 4,
-      "typescale": Object {
+      "fonts": Object {
         "bodyLarge": Object {
           "fontFamily": "System",
           "fontSize": 16,
@@ -164,6 +162,8 @@ exports[`renders list section with custom title style 1`] = `
           "lineHeight": 20,
         },
       },
+      "isV3": true,
+      "roundness": 4,
       "version": 3,
     }
   }
@@ -496,9 +496,7 @@ exports[`renders list section with subheader 1`] = `
         "tertiaryContainer": "rgba(255, 216, 228, 1)",
       },
       "dark": false,
-      "isV3": true,
-      "roundness": 4,
-      "typescale": Object {
+      "fonts": Object {
         "bodyLarge": Object {
           "fontFamily": "System",
           "fontSize": 16,
@@ -605,6 +603,8 @@ exports[`renders list section with subheader 1`] = `
           "lineHeight": 20,
         },
       },
+      "isV3": true,
+      "roundness": 4,
       "version": 3,
     }
   }
@@ -935,9 +935,7 @@ exports[`renders list section without subheader 1`] = `
         "tertiaryContainer": "rgba(255, 216, 228, 1)",
       },
       "dark": false,
-      "isV3": true,
-      "roundness": 4,
-      "typescale": Object {
+      "fonts": Object {
         "bodyLarge": Object {
           "fontFamily": "System",
           "fontSize": 16,
@@ -1044,6 +1042,8 @@ exports[`renders list section without subheader 1`] = `
           "lineHeight": 20,
         },
       },
+      "isV3": true,
+      "roundness": 4,
       "version": 3,
     }
   }

src/styles/__tests__/fonts.test.js

@@ -0,0 +1,63 @@
+import configureFonts, { fontConfig } from '../fonts';
+
+const mockPlatform = (OS) => {
+  jest.resetModules();
+  jest.doMock('react-native/Libraries/Utilities/Platform', () => ({
+    OS,
+    select: (objs) => objs[OS],
+  }));
+};
+
+const customFont = {
+  custom: {
+    fontFamily: 'sans-serif',
+    fontWeight: 'bold',
+  },
+};
+
+describe('configureFonts', () => {
+  it('adds custom fonts to the iOS config', () => {
+    mockPlatform('ios');
+    expect(
+      configureFonts({
+        ios: {
+          ...fontConfig.ios,
+          customFont,
+        },
+      })
+    ).toEqual({
+      ...fontConfig.ios,
+      customFont,
+    });
+  });
+
+  it('adds custom fonts to the Android config', () => {
+    mockPlatform('android');
+    expect(
+      configureFonts({
+        android: {
+          ...fontConfig.android,
+          customFont,
+        },
+      })
+    ).toEqual({
+      ...fontConfig.android,
+      customFont,
+    });
+  });
+
+  it('adds custom fonts to the Web config', () => {
+    mockPlatform('web');
+    expect(
+      configureFonts({
+        web: {
+          ...fontConfig.web,
+          customFont,
+        },
+      })
+    ).toEqual({
+      ...fontConfig.web,
+      customFont,
+    });
+  });
+});

src/styles/fonts.tsx

@@ -1,7 +1,7 @@
 import { Platform, PlatformOSType } from 'react-native';
 import type { Fonts } from '../types';
 
-const fontConfig = {
+export const fontConfig = {
   web: {
     regular: {
       fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',

src/styles/themes/v3/LightTheme.tsx

@@ -57,7 +57,7 @@ export const MD3LightTheme: MD3Theme = {
       level5: 'rgb(233, 227, 241)', // palette.primary40, alpha 0.14
     },
   },
-  typescale,
+  fonts: typescale,
   animation: {
     scale: 1.0,
   },

src/types.tsx

@@ -90,7 +90,7 @@ export type MD3Theme = ThemeBase & {
   version: 3;
   isV3: true;
   colors: MD3Colors;
-  typescale: MD3Typescale;
+  fonts: MD3Typescale;
 };
 
 export type MD2Theme = ThemeBase & {