@hero-design/rn 7.1.3-alpha → 7.1.3-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.1.3-alpha",
+  "version": "7.1.3-alpha2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/playground/components/Card.tsx

@@ -245,7 +245,7 @@ const MyLeaveCard = (props: ViewProps) => {
 };
 
 const CardPlayground = () => (
-  <ScrollView style={{ padding: theme.space.medium }}>
+  <ScrollView contentContainerStyle={{ padding: theme.space.medium }}>
     <View style={{ flexDirection: 'row', height: scale(216) }}>
       <View style={{ flex: 1, marginRight: theme.space.medium }}>
         <InductionCard

package/playground/components/Typography.tsx

@@ -12,9 +12,9 @@ const TypographyPlayground = () => {
       </Typography.Text>
       <Typography.Text fontSize="large">This is a subtitle</Typography.Text>
       <Typography.Text>This is a 2nd subtitle</Typography.Text>
-      <Typography.Text>This is body text</Typography.Text>
+      <Typography.Text fontWeight="light">This is body text</Typography.Text>
       <Typography.Text intent="subdued" fontWeight="light">
-        This is body text
+        This is subdued text
       </Typography.Text>
     </View>
   );

package/playground/index.tsx

@@ -6,8 +6,8 @@ import {
   NativeStackScreenProps,
 } from '@react-navigation/native-stack';
 import { useFonts } from 'expo-font';
-import { SafeAreaView, FlatList, Text } from 'react-native';
-import { ThemeProvider, theme, useTheme } from '../src/index';
+import { SafeAreaView, FlatList } from 'react-native';
+import { ThemeProvider, theme, useTheme, Typography } from '../src/index';
 import BadgePlayground from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import CardPlayground from './components/Card';
@@ -17,6 +17,9 @@ import TypographyPlayground from './components/Typography';
 import FABPlayground from './components/FAB';
 
 const heroIconFontPath = require('../assets/fonts/hero-icons.ttf');
+const beVietnamProLightFont = require('../assets/fonts/be-vietnam-pro-light.ttf');
+const beVietnamProRegularFont = require('../assets/fonts/be-vietnam-pro-regular.ttf');
+const beVietnamProSemiBoldFont = require('../assets/fonts/be-vietnam-pro-semibold.ttf');
 
 type RootStackParamList = {
   Home: undefined;
@@ -52,15 +55,15 @@ const ComponentItem = ({
 }) => {
   const hdTheme = useTheme();
   return (
-    <Text
+    <Typography.Text
+      fontSize="large"
       onPress={onPress}
       style={{
-        marginTop: hdTheme.space.large,
-        fontSize: hdTheme.fontSizes.large,
+        marginTop: hdTheme.space.medium,
       }}
     >
       {name}
-    </Text>
+    </Typography.Text>
   );
 };
 
@@ -93,7 +96,11 @@ const App = () => {
 
   const [fontsLoaded] = useFonts({
     'hero-icons': heroIconFontPath,
+    'Be Vietnam Pro Light': beVietnamProLightFont,
+    'Be Vietnam Pro Regular': beVietnamProRegularFont,
+    'Be Vietnam Pro SemiBold': beVietnamProSemiBoldFont,
   });
+
   if (!fontsLoaded) {
     return null;
   }

package/src/components/Badge/StyledBadge.tsx

@@ -23,7 +23,7 @@ const StyledView = styled(View)<{ themeIntent: ThemeIntent }>`
 `;
 
 const StyledText = styled(Text)<{ themeIntent: ThemeIntent }>`
-  font-weight: ${({ theme }) => theme.__hd__.badge.fontWeights.default};
+  font-family: ${({ theme }) => theme.__hd__.badge.fonts.default};
   font-size: ${({ theme }) => theme.__hd__.badge.fontSizes.default};
 
   ${({ themeIntent }) => css`

package/src/components/Badge/__tests__/__snapshots__/Badge.spec.tsx.snap

@@ -29,8 +29,8 @@ exports[`Badge has danger style when intent is danger 1`] = `
     style={
       Object {
         "color": "#de350b",
+        "fontFamily": "Be Vietnam Pro SemiBold",
         "fontSize": 12,
-        "fontWeight": "600",
       }
     }
     themeIntent="danger"
@@ -69,8 +69,8 @@ exports[`Badge has info style when intent is info 1`] = `
     style={
       Object {
         "color": "#4568fb",
+        "fontFamily": "Be Vietnam Pro SemiBold",
         "fontSize": 12,
-        "fontWeight": "600",
       }
     }
     themeIntent="info"
@@ -109,8 +109,8 @@ exports[`Badge has success style when intent is success 1`] = `
     style={
       Object {
         "color": "#017d6d",
+        "fontFamily": "Be Vietnam Pro SemiBold",
         "fontSize": 12,
-        "fontWeight": "600",
       }
     }
     themeIntent="success"
@@ -149,8 +149,8 @@ exports[`Badge has warning style when intent is warning 1`] = `
     style={
       Object {
         "color": "#d98a2c",
+        "fontFamily": "Be Vietnam Pro SemiBold",
         "fontSize": 12,
-        "fontWeight": "600",
       }
     }
     themeIntent="warning"

package/src/components/BottomNavigation/__tests__/__snapshots__/BottomNavigation.spec.tsx.snap

@@ -129,8 +129,8 @@ exports[`BottomNavigation renders correctly 1`] = `
               Array [
                 Object {
                   "color": "#7622d7",
+                  "fontFamily": "Be Vietnam Pro SemiBold",
                   "fontSize": 12,
-                  "fontWeight": "600",
                   "letterSpacing": 0.36,
                   "lineHeight": 20,
                 },
@@ -183,8 +183,8 @@ exports[`BottomNavigation renders correctly 1`] = `
               Array [
                 Object {
                   "color": "#292a2b",
+                  "fontFamily": "Be Vietnam Pro SemiBold",
                   "fontSize": 12,
-                  "fontWeight": "600",
                   "letterSpacing": 0.36,
                   "lineHeight": 20,
                 },
@@ -237,8 +237,8 @@ exports[`BottomNavigation renders correctly 1`] = `
               Array [
                 Object {
                   "color": "#292a2b",
+                  "fontFamily": "Be Vietnam Pro SemiBold",
                   "fontSize": 12,
-                  "fontWeight": "600",
                   "letterSpacing": 0.36,
                   "lineHeight": 20,
                 },
@@ -291,8 +291,8 @@ exports[`BottomNavigation renders correctly 1`] = `
               Array [
                 Object {
                   "color": "#292a2b",
+                  "fontFamily": "Be Vietnam Pro SemiBold",
                   "fontSize": 12,
-                  "fontWeight": "600",
                   "letterSpacing": 0.36,
                   "lineHeight": 20,
                 },

package/src/components/FAB/ActionGroup/StyledActionGroup.tsx

@@ -43,7 +43,7 @@ const StyledBackdrop = styled(Animated.View)<
 const StyledHeaderText = styled(Typography.Text)<TextProps>`
   font-size: ${({ theme }) => theme.__hd__.fab.fontSizes.header};
   line-height: ${({ theme }) => theme.__hd__.fab.lineHeights.header};
-  font-weight: ${({ theme }) => theme.__hd__.fab.fontWeights.header};
+  font-family: ${({ theme }) => theme.__hd__.fab.fonts.header};
   margin-right: ${({ theme }) => theme.__hd__.fab.space.headerTextMarginRight};
   margin-bottom: ${({ theme }) =>
     theme.__hd__.fab.space.headerTextMarginBottom};

package/src/components/FAB/ActionGroup/StyledActionItem.tsx

@@ -24,6 +24,6 @@ const StyledActionItemText = styled(Typography.Text)<TouchableOpacityProps>`
     theme.__hd__.fab.space.actionItemTextPaddingLeft};
   font-size: ${({ theme }) => theme.__hd__.fab.fontSizes.actionItemText};
   line-height: ${({ theme }) => theme.__hd__.fab.lineHeights.actionItemText};
-  font-weight: ${({ theme }) => theme.__hd__.fab.fontWeights.actionItemText};
+  font-family: ${({ theme }) => theme.__hd__.fab.fonts.actionItemText};
 `;
 export { StyledActionItem, StyledActionItemText };

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -54,14 +54,14 @@ exports[`ActionGroup has active false 1`] = `
         Array [
           Object {
             "color": "#292a2b",
+            "fontFamily": "Be Vietnam Pro Regular",
             "fontSize": 14,
-            "fontWeight": "400",
             "letterSpacing": 0.42,
             "lineHeight": 22,
           },
           Object {
+            "fontFamily": "Be Vietnam Pro SemiBold",
             "fontSize": 24,
-            "fontWeight": "600",
             "lineHeight": 32,
             "marginBottom": 24,
             "marginRight": 24,
@@ -129,14 +129,14 @@ exports[`ActionGroup has active false 1`] = `
             Array [
               Object {
                 "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "letterSpacing": 0.42,
                 "lineHeight": 22,
               },
               Object {
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "lineHeight": 22,
                 "paddingLeft": 8,
               },
@@ -201,14 +201,14 @@ exports[`ActionGroup has active false 1`] = `
             Array [
               Object {
                 "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "letterSpacing": 0.42,
                 "lineHeight": 22,
               },
               Object {
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "lineHeight": 22,
                 "paddingLeft": 8,
               },
@@ -273,14 +273,14 @@ exports[`ActionGroup has active false 1`] = `
             Array [
               Object {
                 "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "letterSpacing": 0.42,
                 "lineHeight": 22,
               },
               Object {
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "lineHeight": 22,
                 "paddingLeft": 8,
               },
@@ -345,14 +345,14 @@ exports[`ActionGroup has active false 1`] = `
             Array [
               Object {
                 "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "letterSpacing": 0.42,
                 "lineHeight": 22,
               },
               Object {
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "lineHeight": 22,
                 "paddingLeft": 8,
               },
@@ -417,14 +417,14 @@ exports[`ActionGroup has active false 1`] = `
             Array [
               Object {
                 "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "letterSpacing": 0.42,
                 "lineHeight": 22,
               },
               Object {
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "lineHeight": 22,
                 "paddingLeft": 8,
               },
@@ -563,14 +563,14 @@ exports[`ActionGroup has active true 1`] = `
         Array [
           Object {
             "color": "#292a2b",
+            "fontFamily": "Be Vietnam Pro Regular",
             "fontSize": 14,
-            "fontWeight": "400",
             "letterSpacing": 0.42,
             "lineHeight": 22,
           },
           Object {
+            "fontFamily": "Be Vietnam Pro SemiBold",
             "fontSize": 24,
-            "fontWeight": "600",
             "lineHeight": 32,
             "marginBottom": 24,
             "marginRight": 24,
@@ -638,14 +638,14 @@ exports[`ActionGroup has active true 1`] = `
             Array [
               Object {
                 "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "letterSpacing": 0.42,
                 "lineHeight": 22,
               },
               Object {
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "lineHeight": 22,
                 "paddingLeft": 8,
               },
@@ -710,14 +710,14 @@ exports[`ActionGroup has active true 1`] = `
             Array [
               Object {
                 "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "letterSpacing": 0.42,
                 "lineHeight": 22,
               },
               Object {
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "lineHeight": 22,
                 "paddingLeft": 8,
               },
@@ -782,14 +782,14 @@ exports[`ActionGroup has active true 1`] = `
             Array [
               Object {
                 "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "letterSpacing": 0.42,
                 "lineHeight": 22,
               },
               Object {
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "lineHeight": 22,
                 "paddingLeft": 8,
               },
@@ -854,14 +854,14 @@ exports[`ActionGroup has active true 1`] = `
             Array [
               Object {
                 "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "letterSpacing": 0.42,
                 "lineHeight": 22,
               },
               Object {
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "lineHeight": 22,
                 "paddingLeft": 8,
               },
@@ -926,14 +926,14 @@ exports[`ActionGroup has active true 1`] = `
             Array [
               Object {
                 "color": "#292a2b",
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "letterSpacing": 0.42,
                 "lineHeight": 22,
               },
               Object {
+                "fontFamily": "Be Vietnam Pro Regular",
                 "fontSize": 14,
-                "fontWeight": "400",
                 "lineHeight": 22,
                 "paddingLeft": 8,
               },

package/src/components/FAB/ActionGroup/index.tsx

@@ -83,7 +83,7 @@ const ActionGroup = ({
   );
   const interpolatedOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 0.5],
+    outputRange: [0, 0.9],
   });
 
   return (

package/src/components/FAB/__tests__/__snapshots__/StyledFABContainer.spec.tsx.snap

@@ -30,8 +30,8 @@ exports[`StyledFABContainer renders correctly 1`] = `
     style={
       Object {
         "color": "#292a2b",
+        "fontFamily": "Be Vietnam Pro Regular",
         "fontSize": 14,
-        "fontWeight": "400",
         "letterSpacing": 0.42,
         "lineHeight": 22,
       }

package/src/components/Typography/Text/StyledText.tsx

@@ -39,15 +39,15 @@ const StyledText = styled(Text)<{
     switch (themeFontWeight) {
       case 'light':
         return css`
-          font-weight: ${theme.__hd__.typography.fontWeights.light};
+          font-family: ${theme.__hd__.typography.fonts.light};
         `;
       case 'regular':
         return css`
-          font-weight: ${theme.__hd__.typography.fontWeights.regular};
+          font-family: ${theme.__hd__.typography.fonts.regular};
         `;
       case 'semi-bold':
         return css`
-          font-weight: ${theme.__hd__.typography.fontWeights.semiBold};
+          font-family: ${theme.__hd__.typography.fonts.semiBold};
         `;
     }
   }}

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -5,8 +5,8 @@ exports[`StyledText has body intent style 1`] = `
   style={
     Object {
       "color": "#292a2b",
+      "fontFamily": "Be Vietnam Pro Regular",
       "fontSize": 14,
-      "fontWeight": "400",
       "letterSpacing": 0.42,
       "lineHeight": 22,
     }
@@ -24,8 +24,8 @@ exports[`StyledText has large fontSize style 1`] = `
   style={
     Object {
       "color": "#292a2b",
+      "fontFamily": "Be Vietnam Pro Regular",
       "fontSize": 16,
-      "fontWeight": "400",
       "letterSpacing": 0.48,
       "lineHeight": 24,
     }
@@ -43,8 +43,8 @@ exports[`StyledText has light fontWeight style 1`] = `
   style={
     Object {
       "color": "#292a2b",
+      "fontFamily": "Be Vietnam Pro Light",
       "fontSize": 14,
-      "fontWeight": "200",
       "letterSpacing": 0.42,
       "lineHeight": 22,
     }
@@ -62,8 +62,8 @@ exports[`StyledText has medium fontSize style 1`] = `
   style={
     Object {
       "color": "#292a2b",
+      "fontFamily": "Be Vietnam Pro Regular",
       "fontSize": 14,
-      "fontWeight": "400",
       "letterSpacing": 0.42,
       "lineHeight": 22,
     }
@@ -81,8 +81,8 @@ exports[`StyledText has regular fontWeight style 1`] = `
   style={
     Object {
       "color": "#292a2b",
+      "fontFamily": "Be Vietnam Pro Regular",
       "fontSize": 14,
-      "fontWeight": "400",
       "letterSpacing": 0.42,
       "lineHeight": 22,
     }
@@ -100,8 +100,8 @@ exports[`StyledText has semi-bold fontWeight style 1`] = `
   style={
     Object {
       "color": "#292a2b",
+      "fontFamily": "Be Vietnam Pro SemiBold",
       "fontSize": 14,
-      "fontWeight": "600",
       "letterSpacing": 0.42,
       "lineHeight": 22,
     }
@@ -119,8 +119,8 @@ exports[`StyledText has small fontSize style 1`] = `
   style={
     Object {
       "color": "#292a2b",
+      "fontFamily": "Be Vietnam Pro Regular",
       "fontSize": 12,
-      "fontWeight": "400",
       "letterSpacing": 0.36,
       "lineHeight": 20,
     }
@@ -138,8 +138,8 @@ exports[`StyledText has subdued intent style 1`] = `
   style={
     Object {
       "color": "#8b8d92",
+      "fontFamily": "Be Vietnam Pro Regular",
       "fontSize": 14,
-      "fontWeight": "400",
       "letterSpacing": 0.42,
       "lineHeight": 22,
     }
@@ -157,8 +157,8 @@ exports[`StyledText has xlarge fontSize style 1`] = `
   style={
     Object {
       "color": "#292a2b",
+      "fontFamily": "Be Vietnam Pro Regular",
       "fontSize": 18,
-      "fontWeight": "400",
       "letterSpacing": 0.54,
       "lineHeight": 26,
     }

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -20,8 +20,8 @@ Object {
       "fontSizes": Object {
         "default": "12px",
       },
-      "fontWeights": Object {
-        "default": 600,
+      "fonts": Object {
+        "default": "Be Vietnam Pro SemiBold",
       },
       "padding": Object {
         "default": "4px 8px",
@@ -81,9 +81,9 @@ Object {
         "buttonIcon": "24px",
         "header": "24px",
       },
-      "fontWeights": Object {
-        "actionItemText": "400",
-        "header": "600",
+      "fonts": Object {
+        "actionItemText": "Be Vietnam Pro Regular",
+        "header": "Be Vietnam Pro SemiBold",
       },
       "lineHeights": Object {
         "actionItemText": "22px",
@@ -137,10 +137,10 @@ Object {
         "small": 12,
         "xlarge": 18,
       },
-      "fontWeights": Object {
-        "light": 200,
-        "regular": 400,
-        "semiBold": 600,
+      "fonts": Object {
+        "light": "Be Vietnam Pro Light",
+        "regular": "Be Vietnam Pro Regular",
+        "semiBold": "Be Vietnam Pro SemiBold",
       },
       "lineHeights": Object {
         "large": "24px",
@@ -188,11 +188,10 @@ Object {
     "xxxxlarge": 28,
     "xxxxxlarge": 32,
   },
-  "fontWeights": Object {
-    "bold": 700,
-    "light": 200,
-    "regular": 400,
-    "semiBold": 600,
+  "fonts": Object {
+    "light": "Be Vietnam Pro Light",
+    "regular": "Be Vietnam Pro Regular",
+    "semiBold": "Be Vietnam Pro SemiBold",
   },
   "lineHeights": Object {
     "large": 24,

package/src/theme/components/badge.ts

@@ -20,19 +20,19 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     default: `${theme.space.xsmall}px ${theme.space.small}px`,
   };
 
-  const fontSizes = {
-    default: `${theme.fontSizes.small}px`,
+  const fonts = {
+    default: theme.fonts.semiBold,
   };
 
-  const fontWeights = {
-    default: theme.fontWeights.semiBold,
+  const fontSizes = {
+    default: `${theme.fontSizes.small}px`,
   };
 
   const radii = {
     default: `4px`,
   };
 
-  return { borderWidths, colors, padding, fontSizes, fontWeights, radii };
+  return { borderWidths, colors, padding, fonts, fontSizes, radii };
 };
 
 export default getBadgeTheme;

package/src/theme/components/fab.ts

@@ -14,17 +14,17 @@ const getFABTheme = (theme: GlobalTheme) => {
     height: '64px',
   };
 
+  const fonts = {
+    header: theme.fonts.semiBold,
+    actionItemText: theme.fonts.regular,
+  };
+
   const fontSizes = {
     header: `${theme.fontSizes.xxxlarge}px`,
     buttonIcon: `${theme.fontSizes.xxxlarge}px`,
     actionItemText: `${theme.fontSizes.medium}px`,
   };
 
-  const fontWeights = {
-    header: `${theme.fontWeights.semiBold}`,
-    actionItemText: `${theme.fontWeights.regular}`,
-  };
-
   const lineHeights = {
     header: `${theme.lineHeights.xxxlarge}px`,
     actionItemText: `${theme.lineHeights.medium}px`,
@@ -46,7 +46,7 @@ const getFABTheme = (theme: GlobalTheme) => {
     actionItem: `999px`,
   };
 
-  return { radii, fontSizes, colors, sizes, lineHeights, fontWeights, space };
+  return { radii, fonts, fontSizes, colors, sizes, lineHeights, space };
 };
 
 export default getFABTheme;

package/src/theme/components/typography.ts

@@ -7,6 +7,12 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     primary: theme.colors.primary,
   };
 
+  const fonts = {
+    light: theme.fonts.light,
+    regular: theme.fonts.regular,
+    semiBold: theme.fonts.semiBold,
+  };
+
   const fontSizes = {
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
@@ -14,12 +20,6 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xlarge: theme.fontSizes.xlarge,
   };
 
-  const fontWeights = {
-    light: theme.fontWeights.light,
-    regular: theme.fontWeights.regular,
-    semiBold: theme.fontWeights.semiBold,
-  };
-
   const lineHeights = {
     small: `${theme.lineHeights.small}px`,
     medium: `${theme.lineHeights.medium}px`,
@@ -27,7 +27,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xlarge: `${theme.lineHeights.xlarge}px`,
   };
 
-  return { colors, fontSizes, fontWeights, lineHeights };
+  return { colors, fonts, fontSizes, lineHeights };
 };
 
 export default getTypographyTheme;

package/src/theme/global/index.ts

@@ -1,6 +1,6 @@
 import { systemPalette } from './colors';
 import { space } from './space';
-import { fontSizes, fontWeights, lineHeights } from './typography';
+import { fonts, fontSizes, lineHeights } from './typography';
 import { borderWidths } from './borders';
 
 const globalTheme = {
@@ -8,8 +8,8 @@ const globalTheme = {
     ...systemPalette,
   },
   space,
+  fonts,
   fontSizes,
-  fontWeights,
   lineHeights,
   borderWidths,
 };

package/src/theme/global/typography.ts

@@ -2,6 +2,12 @@ import { scale } from '../../utils/scale';
 
 const BASE = 16;
 
+const fonts = {
+  light: 'Be Vietnam Pro Light',
+  regular: 'Be Vietnam Pro Regular',
+  semiBold: 'Be Vietnam Pro SemiBold',
+};
+
 const fontSizes = {
   xxxxxlarge: scale(BASE * 2), //      32
   xxxxlarge: scale(BASE * 1.75), //    28
@@ -14,13 +20,6 @@ const fontSizes = {
   xsmall: scale(BASE * 0.625), //      10
 };
 
-const fontWeights = {
-  light: 200,
-  regular: 400,
-  semiBold: 600,
-  bold: 700,
-};
-
 const lineHeights = {
   xxxxxlarge: fontSizes.xxxxxlarge + 8,
   xxxxlarge: fontSizes.xxxxlarge + 8,
@@ -33,4 +32,4 @@ const lineHeights = {
   xsmall: fontSizes.xsmall + 8,
 };
 
-export { fontSizes, fontWeights, lineHeights };
+export { fonts, fontSizes, lineHeights };