diff --git a/apps/funke/app.config.js b/apps/funke/app.config.js index d253cf17..5527fb3c 100644 --- 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 index 25d81aba..ef098d13 100644 --- 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 index 40970c7c..d3d9d72b 100644 --- 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 index 6bbc0a1d..b5774375 100644 --- a/apps/storybook/.storybook/preview-head.html +++ b/apps/storybook/.storybook/preview-head.html @@ -1,4 +1,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/apps/storybook/app.json b/apps/storybook/app.json index 8479f09e..09eb8cb0 100644 --- 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 index 7475db5a..e2333e7a 100644 --- 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 index 7532aa37..cbdddb3d 100644 --- 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 index 3bca8529..396d6074 100644 --- 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 index 45d0bd76..cf101305 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -33,6 +33,9 @@ importers: apps/funke: dependencies: + '@expo-google-fonts/open-sans': + specifier: ^0.2.3 + version: 0.2.3 '@expo-google-fonts/raleway': specifier: ^0.2.3 version: 0.2.3 @@ -2214,6 +2217,9 @@ packages: cpu: [x64] os: [win32] + '@expo-google-fonts/open-sans@0.2.3': + resolution: {integrity: sha512-HjEue5908n2yTtNSo47lAN3UFi2sAp00u6E3tx9nSEr0P2SDFDjYgsA89nPaAYOyxDN0EPGtNTa2K/VUe3jgmA==} + '@expo-google-fonts/raleway@0.2.3': resolution: {integrity: sha512-31D87kwraBhf59VPXEUQxRQjMCIUqNrvmWmfcyRremnwjdvSyu7LAjT6KmTZB/kAuRHJRGY4KFPQDhnPhxkZ7A==} @@ -11368,6 +11374,8 @@ snapshots: '@esbuild/win32-x64@0.23.0': optional: true + '@expo-google-fonts/open-sans@0.2.3': {} + '@expo-google-fonts/raleway@0.2.3': {} '@expo/bunyan@4.0.0': @@ -12811,7 +12819,7 @@ snapshots: '@rnx-kit/chromium-edge-launcher@1.0.0': dependencies: - '@types/node': 18.19.34 + '@types/node': 20.14.2 escape-string-regexp: 4.0.0 is-wsl: 2.2.0 lighthouse-logger: 1.4.2