Updated and reorged fonts and typography

apps/storybook-react-native/.storybook/FontLoader.js

@@ -8,12 +8,16 @@ const FontLoader = ({ children }) => {
   useEffect(() => {
     (async () => {
       await Font.loadAsync({
-        'CentraNo1-Book': require('../assets/fonts/CentraNo1/CentraNo1-Book.otf'),
-        'CentraNo1-BookItalic': require('../assets/fonts/CentraNo1/CentraNo1-BookItalic.otf'),
-        'CentraNo1-Medium': require('../assets/fonts/CentraNo1/CentraNo1-Medium.otf'),
-        'CentraNo1-MediumItalic': require('../assets/fonts/CentraNo1/CentraNo1-MediumItalic.otf'),
-        'CentraNo1-Bold': require('../assets/fonts/CentraNo1/CentraNo1-Bold.otf'),
-        'CentraNo1-BoldItalic': require('../assets/fonts/CentraNo1/CentraNo1-BoldItalic.otf'),
+        'CentraNo1-Book': require('@metamask/design-tokens/fonts/mobile/CentraNo1/CentraNo1-Book.otf'),
+        'CentraNo1-BookItalic': require('@metamask/design-tokens/fonts/mobile/CentraNo1/CentraNo1-BookItalic.otf'),
+        'CentraNo1-Medium': require('@metamask/design-tokens/fonts/mobile/CentraNo1/CentraNo1-Medium.otf'),
+        'CentraNo1-MediumItalic': require('@metamask/design-tokens/fonts/mobile/CentraNo1/CentraNo1-MediumItalic.otf'),
+        'CentraNo1-Bold': require('@metamask/design-tokens/fonts/mobile/CentraNo1/CentraNo1-Bold.otf'),
+        'CentraNo1-BoldItalic': require('@metamask/design-tokens/fonts/mobile/CentraNo1/CentraNo1-BoldItalic.otf'),
+        'MMPoly-Regular': require('@metamask/design-tokens/fonts/mobile/MMPoly/MMPoly-Regular.otf'),
+        'MMSans-Regular': require('@metamask/design-tokens/fonts/mobile/MMSans/MMSans-Regular.otf'),
+        'MMSans-Medium': require('@metamask/design-tokens/fonts/mobile/MMSans/MMSans-Medium.otf'),
+        'MMSans-Bold': require('@metamask/design-tokens/fonts/mobile/MMSans/MMSans-Bold.otf'),
       });
       setFontsLoaded(true);
     })();

apps/storybook-react/.storybook/main.ts

@@ -1,5 +1,4 @@
 import type { StorybookConfig } from '@storybook/react-vite';
-
 import path, { join, dirname } from 'path';
 
 /**
@@ -10,6 +9,7 @@ import path, { join, dirname } from 'path';
 function getAbsolutePath(value: string): any {
   return dirname(require.resolve(join(value, 'package.json')));
 }
+
 const config: StorybookConfig = {
   stories: [
     '../stories/Introduction.mdx',
@@ -19,7 +19,6 @@ const config: StorybookConfig = {
     '../../../packages/design-system-react/src/**/*.stories.@(js|jsx|ts|tsx)',
     '../../../packages/design-tokens/stories/**/*.stories.@(js|jsx|ts|tsx)',
   ],
-
   addons: [
     getAbsolutePath('@storybook/addon-onboarding'),
     getAbsolutePath('@storybook/addon-links'),
@@ -47,7 +46,12 @@ const config: StorybookConfig = {
         ),
       };
     }
+
+    // Add asset inclusion for font files so that Vite processes them correctly.
+    config.assetsInclude = ['**/*.woff2', '**/*.woff', '**/*.ttf', '**/*.otf'];
+
     return config;
   },
 };
+
 export default config;

apps/storybook-react/tailwind.css

@@ -1,45 +1,5 @@
+@import url('@metamask/design-tokens/src/css/fonts.css');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@font-face {
-  font-family: 'CentraNo1';
-  font-style: normal;
-  font-weight: 400;
-  src: url('fonts/CentraNo1/CentraNo1-Book.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'CentraNo1';
-  font-style: italic;
-  font-weight: 400;
-  src: url('fonts/CentraNo1/CentraNo1-BookItalic.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'CentraNo1';
-  font-style: normal;
-  font-weight: 500;
-  src: url('fonts/CentraNo1/CentraNo1-Medium.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'CentraNo1';
-  font-style: italic;
-  font-weight: 500;
-  src: url('fonts/CentraNo1/CentraNo1-MediumItalic.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'CentraNo1';
-  font-style: normal;
-  font-weight: 700;
-  src: url('fonts/CentraNo1/CentraNo1-Bold.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'CentraNo1';
-  font-style: italic;
-  font-weight: 700;
-  src: url('fonts/CentraNo1/CentraNo1-BoldItalic.woff2') format('woff2');
-}

packages/design-system-react-native/src/components/Text/Text.constants.ts

@@ -11,14 +11,7 @@ export const DEFAULT_TEXT_COLOR = TextColor.TextDefault;
 export const MAPPING_FONTWEIGHT_TO_FONTFAMILYSTYLECLASSNAME: {
   [key in FontWeight]: string;
 } = {
-  [FontWeight.Regular]: '',
+  [FontWeight.Regular]: '-regular',
   [FontWeight.Medium]: '-medium',
   [FontWeight.Bold]: '-bold',
 };
-
-// Sample consts
-export const SAMPLE_TEXT_PROPS: TextProps = {
-  variant: DEFAULT_TEXT_VARIANT,
-  children: 'Sample Text',
-  color: DEFAULT_TEXT_COLOR,
-};

packages/design-system-react-native/src/components/Text/Text.stories.tsx

@@ -5,19 +5,17 @@ import { View, ScrollView } from 'react-native';
 
 import Text from './Text';
 import type { TextProps } from './Text.types';
-import { TextVariant, FontWeight, FontStyle, TextColor } from './Text.types';
+import {
+  TextVariant,
+  FontWeight,
+  FontStyle,
+  TextColor,
+  FontFamily,
+} from './Text.types';
 
 const meta: Meta<TextProps> = {
   title: 'Components/Text',
   component: Text,
-  args: {
-    variant: TextVariant.BodyMd,
-    color: TextColor.TextDefault,
-    fontWeight: FontWeight.Regular,
-    fontStyle: FontStyle.Normal,
-    children: 'The quick orange fox jumped over the lazy dog.',
-    twClassName: '',
-  },
   argTypes: {
     variant: {
       control: 'select',
@@ -31,6 +29,10 @@ const meta: Meta<TextProps> = {
       control: 'select',
       options: FontWeight,
     },
+    fontFamily: {
+      control: 'select',
+      options: FontFamily,
+    },
     fontStyle: {
       control: 'select',
       options: FontStyle,
@@ -69,14 +71,15 @@ export const Default: Story = {
     variant: TextVariant.BodyMd,
     color: TextColor.TextDefault,
     fontWeight: FontWeight.Regular,
+    fontFamily: FontFamily.Default,
     fontStyle: FontStyle.Normal,
     children: 'The quick orange fox jumped over the lazy dog.',
     twClassName: '',
   },
-  render: (args) => <Text {...args} />,
+  render: (args) => <TextStory {...args} />,
 };
 
-export const Variants: Story = {
+export const Variant: Story = {
   render: () => (
     <ScrollView>
       {Object.keys(TextVariant).map((variantKey) => (
@@ -91,7 +94,7 @@ export const Variants: Story = {
   ),
 };
 
-export const Colors: Story = {
+export const Color: Story = {
   render: () => (
     <ScrollView>
       {Object.keys(TextColor).map((colorKey) => (
@@ -117,6 +120,17 @@ export const FontWeightStory: Story = {
   name: 'Font Weight',
 };
 
+export const FontFamilyStory: Story = {
+  render: () => (
+    <View>
+      <Text fontFamily={FontFamily.Default}>Default (Centra No 1)</Text>
+      <Text fontFamily={FontFamily.Accent}>Accent (MM Sans)</Text>
+      <Text fontFamily={FontFamily.Hero}>Hero (MM Poly)</Text>
+    </View>
+  ),
+  name: 'Font Family',
+};
+
 export const FontStyleStory: Story = {
   render: () => (
     <View>

packages/design-system-react-native/src/components/Text/Text.test.tsx

@@ -4,24 +4,35 @@ import { render } from '@testing-library/react-native';
 import React from 'react';
 
 import Text from './Text';
-import { DEFAULT_TEXT_COLOR, DEFAULT_TEXT_VARIANT } from './Text.constants';
-import { TextVariant, TextColor, FontWeight, FontStyle } from './Text.types';
+import {
+  DEFAULT_TEXT_COLOR,
+  DEFAULT_TEXT_VARIANT,
+  MAPPING_FONTWEIGHT_TO_FONTFAMILYSTYLECLASSNAME,
+} from './Text.constants';
+import {
+  TextVariant,
+  TextColor,
+  FontWeight,
+  FontStyle,
+  FontFamily,
+} from './Text.types';
 import { generateTextClassNames } from './Text.utilities';
 
 describe('Text', () => {
   describe('generateTextClassNames', () => {
-    it('returns default class names when no props are provided', () => {
+    it('returns correct default class names when no props are provided', () => {
       const classNames = generateTextClassNames({});
-      expect(classNames).toBe(
-        `text-${DEFAULT_TEXT_VARIANT} font-${DEFAULT_TEXT_VARIANT} ${DEFAULT_TEXT_COLOR}`,
+      expect(classNames).toContain(`text-${DEFAULT_TEXT_VARIANT}`);
+      expect(classNames).toContain(
+        `font-${FontFamily.Default}${MAPPING_FONTWEIGHT_TO_FONTFAMILYSTYLECLASSNAME[FontWeight.Regular]}`,
       );
+      expect(classNames).toContain(DEFAULT_TEXT_COLOR);
     });
 
     it('generates class names correctly for each variant', () => {
       Object.values(TextVariant).forEach((variant) => {
         const classNames = generateTextClassNames({ variant });
         expect(classNames).toContain(`text-${variant}`);
-        expect(classNames).toContain(`font-${variant}`);
       });
     });
 
@@ -37,15 +48,15 @@ describe('Text', () => {
         fontWeight: FontWeight.Bold,
         variant: TextVariant.BodyMd,
       });
-      expect(classNames).toContain(`font-body-md-bold`);
+      expect(classNames).toContain(`font-default-bold`);
     });
 
     it('includes italic in class names when fontStyle is Italic', () => {
       const classNames = generateTextClassNames({
         fontStyle: FontStyle.Italic,
         variant: TextVariant.BodyMd,
       });
-      expect(classNames).toContain(`font-body-md-italic`);
+      expect(classNames).toContain(`font-default-regular-italic`);
     });
 
     it('combines bold and italic correctly', () => {
@@ -54,7 +65,7 @@ describe('Text', () => {
         fontStyle: FontStyle.Italic,
         variant: TextVariant.BodyMd,
       });
-      expect(classNames).toContain(`font-body-md-bold-italic`);
+      expect(classNames).toContain(`font-default-bold-italic`);
     });
 
     it('includes twClassName', () => {

packages/design-system-react-native/src/components/Text/Text.tsx

@@ -1,10 +1,10 @@
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Text as RNText } from 'react-native';
 
 import { DEFAULT_TEXT_COLOR, DEFAULT_TEXT_VARIANT } from './Text.constants';
 import type { TextProps } from './Text.types';
-import { FontWeight, FontStyle } from './Text.types';
+import { FontWeight, FontStyle, FontFamily } from './Text.types';
 import { generateTextClassNames } from './Text.utilities';
 
 const Text: React.FC<TextProps> = ({
@@ -13,18 +13,23 @@ const Text: React.FC<TextProps> = ({
   style,
   children,
   fontWeight = FontWeight.Regular,
+  fontFamily = FontFamily.Default,
   fontStyle = FontStyle.Normal,
   twClassName = '',
   ...props
 }) => {
   const tw = useTailwind();
-  const mergedClassnames = generateTextClassNames({
-    variant,
-    color,
-    fontWeight,
-    fontStyle,
-    twClassName,
-  });
+
+  const mergedClassnames = useMemo(() => {
+    return generateTextClassNames({
+      variant,
+      color,
+      fontWeight,
+      fontFamily,
+      fontStyle,
+      twClassName,
+    });
+  }, [variant, color, fontWeight, fontFamily, fontStyle, twClassName]);
 
   return (
     <RNText

packages/design-system-react-native/src/components/Text/Text.types.ts

@@ -88,6 +88,12 @@ export enum FontStyle {
   Italic = 'italic',
   Normal = 'normal',
 }
+
+export enum FontFamily {
+  Default = 'default',
+  Accent = 'accent',
+  Hero = 'hero',
+}
 /**
  * Text component props.
  */
@@ -106,9 +112,19 @@ export type TextProps = {
    */
   color?: TextColor;
   /**
-   * Optional prop to adjust the weight of the font.
+   * Optional prop to control the font weight of the text.
+   * - Normal: 400
+   * - Medium: 500
+   * - Bold: 700
    */
   fontWeight?: FontWeight;
+  /**
+   * Optional prop to adjust the font family.
+   *  - Default: CentraNo1
+   *  - Accent: MMSans
+   *  - Hero: MMPoly
+   */
+  fontFamily?: FontFamily;
   /**
    * Optional prop to adjust the style of the font.
    */