feat: added body font (#124)

animo · Jul 15, 2024 · 7cec06c · 7cec06c
1 parent 60cbfda
commit 7cec06c
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 12 deletions.
diff --git a/apps/funke/app.config.js b/apps/funke/app.config.js
@@ -57,6 +57,10 @@ const config = {
       'expo-font',
       {
         fonts: [
+          '../../node_modules/@expo-google-fonts/open-sans/OpenSans_400Regular.ttf',
+          '../../node_modules/@expo-google-fonts/open-sans/OpenSans_500Medium.ttf',
+          '../../node_modules/@expo-google-fonts/open-sans/OpenSans_600SemiBold.ttf',
+          '../../node_modules/@expo-google-fonts/open-sans/OpenSans_700Bold.ttf',
           '../../node_modules/@expo-google-fonts/raleway/Raleway_400Regular.ttf',
           '../../node_modules/@expo-google-fonts/raleway/Raleway_500Medium.ttf',
           '../../node_modules/@expo-google-fonts/raleway/Raleway_600SemiBold.ttf',

diff --git a/apps/funke/package.json b/apps/funke/package.json
@@ -10,6 +10,7 @@
 		"prebuild": "APP_VARIANT=development expo prebuild --no-install"
 	},
 	"dependencies": {
+		"@expo-google-fonts/open-sans": "^0.2.3",
 		"@expo-google-fonts/raleway": "^0.2.3",
 		"@gorhom/bottom-sheet": "^4.6.3",
 		"@hyperledger/anoncreds-react-native": "^0.2.2",

diff --git a/apps/funke/tamagui.config.ts b/apps/funke/tamagui.config.ts
@@ -2,7 +2,7 @@
 // instead this is just setting types for this folder
 import { radius, size, space, zIndex } from '@tamagui/themes'
 
-import { configInput, fontRaleway, hexColors } from '@package/ui/src/config/tamagui.config'
+import { configInput, fontOpenSans, fontRaleway, hexColors } from '@package/ui/src/config/tamagui.config'
 import { createTamagui, createTokens } from 'tamagui'
 
 export const tokensInput = {
@@ -43,7 +43,8 @@ const config = createTamagui({
   ...configInput,
   tokens,
   fonts: {
-    default: fontRaleway,
+    default: fontOpenSans,
+    heading: fontRaleway,
   },
   themes: {
     dark: {

diff --git a/apps/storybook/.storybook/preview-head.html b/apps/storybook/.storybook/preview-head.html
@@ -1,4 +1,5 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:slnt,[email protected],100..900&display=swap" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css2?family=Raleway:[email protected]&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Raleway:[email protected]&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected]&display=swap" rel="stylesheet">
diff --git a/apps/storybook/app.json b/apps/storybook/app.json
@@ -18,7 +18,11 @@
 					"../../node_modules/@expo-google-fonts/raleway/Raleway_400Regular.ttf",
 					"../../node_modules/@expo-google-fonts/raleway/Raleway_500Medium.ttf",
 					"../../node_modules/@expo-google-fonts/raleway/Raleway_600SemiBold.ttf",
-					"../../node_modules/@expo-google-fonts/raleway/Raleway_700Bold.ttf"
+					"../../node_modules/@expo-google-fonts/raleway/Raleway_700Bold.ttf",
+					"../../node_modules/@expo-google-fonts/open-sans/OpenSans_400Regular.ttf",
+					"../../node_modules/@expo-google-fonts/open-sans/OpenSans_500Medium.ttf",
+					"../../node_modules/@expo-google-fonts/open-sans/OpenSans_600SemiBold.ttf",
+					"../../node_modules/@expo-google-fonts/open-sans/OpenSans_700Bold.ttf"
 				]
 			}
 		]

diff --git a/packages/ui/src/base/Headings.tsx b/packages/ui/src/base/Headings.tsx
@@ -5,7 +5,7 @@ import { Heading as THeading, styled } from 'tamagui'
 export const Heading = styled(THeading, {
   name: 'Heading',
   tag: 'span',
-  fontFamily: '$default',
+  fontFamily: '$heading',
   fontWeight: '$medium',
   userSelect: 'auto',
   accessibilityRole: 'header',

diff --git a/packages/ui/src/config/font.ts b/packages/ui/src/config/font.ts
@@ -2,6 +2,43 @@ import { createInterFont } from '@tamagui/font-inter'
 import { Platform } from 'react-native'
 import { createFont } from 'tamagui'
 
+export const fontOpenSans = createFont({
+  family: 'OpenSans',
+  weight: {
+    regular: '400',
+    1: '400',
+
+    medium: '500',
+    3: '500',
+
+    semiBold: '600',
+    5: '600',
+
+    bold: '700',
+    7: '700',
+  },
+  size: {
+    1: 12, // Annotation
+    2: 14, // Sub text
+    3: 16, // Body text
+    true: 16,
+    4: 18, // Heading 3
+    5: 20, // Heading 2
+    6: 24, // Heading 1
+    7: 38, // Page Title
+  },
+  letterSpacing: {
+    4: 0,
+  },
+  face: {
+    // Android uses filename, iOS uses PostScript name (configured in app.config.js with expo-font plugin)
+    '400': { normal: Platform.select({ ios: 'OpenSans-Regular', android: 'OpenSans_400Regular' }) },
+    '500': { normal: Platform.select({ ios: 'OpenSans-Medium', android: 'OpenSans_500Medium' }) },
+    '600': { normal: Platform.select({ ios: 'OpenSans-SemiBold', android: 'OpenSans_600SemiBold' }) },
+    '700': { normal: Platform.select({ ios: 'OpenSans-Bold', android: 'OpenSans_700Bold' }) },
+  },
+})
+
 export const fontRaleway = createFont({
   family: 'Raleway',
   weight: {
@@ -31,11 +68,12 @@ export const fontRaleway = createFont({
     4: 0,
   },
   face: {
+    // Raleway is a lighter font in terms of weight, so we move all the weights one step up.
     // Android uses filename, iOS uses PostScript name (configured in app.config.js with expo-font plugin)
-    '400': { normal: Platform.select({ ios: 'Raleway-Regular', android: 'Raleway_400Regular' }) },
-    '500': { normal: Platform.select({ ios: 'Raleway-Medium', android: 'Raleway_500Medium' }) },
-    '600': { normal: Platform.select({ ios: 'Raleway-SemiBold', android: 'Raleway_600SemiBold' }) },
-    '700': { normal: Platform.select({ ios: 'Raleway-Bold', android: 'Raleway_700Bold' }) },
+    '300': { normal: Platform.select({ ios: 'Raleway-Regular', android: 'Raleway_400Regular' }) },
+    '400': { normal: Platform.select({ ios: 'Raleway-Medium', android: 'Raleway_500Medium' }) },
+    '500': { normal: Platform.select({ ios: 'Raleway-SemiBold', android: 'Raleway_600SemiBold' }) },
+    '600': { normal: Platform.select({ ios: 'Raleway-Bold', android: 'Raleway_700Bold' }) },
   },
 })
 

diff --git a/packages/ui/src/config/tamagui.config.ts b/packages/ui/src/config/tamagui.config.ts
@@ -4,8 +4,8 @@ import { type CreateTamaguiProps, createTamagui, createTokens } from 'tamagui'
 
 import { animations } from '../animations'
 
-import { fontInter, fontRaleway } from './font'
-export { fontInter, fontRaleway }
+import { fontInter, fontOpenSans, fontRaleway } from './font'
+export { fontInter, fontOpenSans, fontRaleway }
 
 export const absoluteFill = {
   position: 'absolute',
@@ -79,7 +79,9 @@ export const configInput = {
   themeClassNameOnRoot: true,
   shorthands,
   fonts: {
+    // By default we use the same font for headings and body
     default: fontInter,
+    heading: fontInter,
   },
   tokens,
   themes: {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml