diff --git a/assets/fonts/inter/Inter-Black.otf b/assets/fonts/inter/Inter-Black.otf new file mode 100644 index 0000000000..44d1779af6 Binary files /dev/null and b/assets/fonts/inter/Inter-Black.otf differ diff --git a/assets/fonts/inter/Inter-BlackItalic.otf b/assets/fonts/inter/Inter-BlackItalic.otf new file mode 100644 index 0000000000..6fc475e415 Binary files /dev/null and b/assets/fonts/inter/Inter-BlackItalic.otf differ diff --git a/assets/fonts/inter/Inter-Bold.otf b/assets/fonts/inter/Inter-Bold.otf new file mode 100644 index 0000000000..58a38073e8 Binary files /dev/null and b/assets/fonts/inter/Inter-Bold.otf differ diff --git a/assets/fonts/inter/Inter-BoldItalic.otf b/assets/fonts/inter/Inter-BoldItalic.otf new file mode 100644 index 0000000000..e67935aa5a Binary files /dev/null and b/assets/fonts/inter/Inter-BoldItalic.otf differ diff --git a/assets/fonts/inter/Inter-ExtraBold.otf b/assets/fonts/inter/Inter-ExtraBold.otf new file mode 100644 index 0000000000..66cd95228c Binary files /dev/null and b/assets/fonts/inter/Inter-ExtraBold.otf differ diff --git a/assets/fonts/inter/Inter-ExtraBoldItalic.otf b/assets/fonts/inter/Inter-ExtraBoldItalic.otf new file mode 100644 index 0000000000..f269814a64 Binary files /dev/null and b/assets/fonts/inter/Inter-ExtraBoldItalic.otf differ diff --git a/assets/fonts/inter/Inter-ExtraLight.otf b/assets/fonts/inter/Inter-ExtraLight.otf new file mode 100644 index 0000000000..b603db3c77 Binary files /dev/null and b/assets/fonts/inter/Inter-ExtraLight.otf differ diff --git a/assets/fonts/inter/Inter-ExtraLightItalic.otf b/assets/fonts/inter/Inter-ExtraLightItalic.otf new file mode 100644 index 0000000000..f65051941c Binary files /dev/null and b/assets/fonts/inter/Inter-ExtraLightItalic.otf differ diff --git a/assets/fonts/inter/Inter-Italic.otf b/assets/fonts/inter/Inter-Italic.otf new file mode 100644 index 0000000000..f78848b987 Binary files /dev/null and b/assets/fonts/inter/Inter-Italic.otf differ diff --git a/assets/fonts/inter/Inter-Light.otf b/assets/fonts/inter/Inter-Light.otf new file mode 100644 index 0000000000..7da794bd3b Binary files /dev/null and b/assets/fonts/inter/Inter-Light.otf differ diff --git a/assets/fonts/inter/Inter-LightItalic.otf b/assets/fonts/inter/Inter-LightItalic.otf new file mode 100644 index 0000000000..32ef937c52 Binary files /dev/null and b/assets/fonts/inter/Inter-LightItalic.otf differ diff --git a/assets/fonts/inter/Inter-Medium.otf b/assets/fonts/inter/Inter-Medium.otf new file mode 100644 index 0000000000..f44f89adac Binary files /dev/null and b/assets/fonts/inter/Inter-Medium.otf differ diff --git a/assets/fonts/inter/Inter-MediumItalic.otf b/assets/fonts/inter/Inter-MediumItalic.otf new file mode 100644 index 0000000000..1970f57214 Binary files /dev/null and b/assets/fonts/inter/Inter-MediumItalic.otf differ diff --git a/assets/fonts/inter/Inter-Regular.otf b/assets/fonts/inter/Inter-Regular.otf new file mode 100644 index 0000000000..2d0bd1d645 Binary files /dev/null and b/assets/fonts/inter/Inter-Regular.otf differ diff --git a/assets/fonts/inter/Inter-SemiBold.otf b/assets/fonts/inter/Inter-SemiBold.otf new file mode 100644 index 0000000000..52c84550ba Binary files /dev/null and b/assets/fonts/inter/Inter-SemiBold.otf differ diff --git a/assets/fonts/inter/Inter-SemiBoldItalic.otf b/assets/fonts/inter/Inter-SemiBoldItalic.otf new file mode 100644 index 0000000000..b725bfc883 Binary files /dev/null and b/assets/fonts/inter/Inter-SemiBoldItalic.otf differ diff --git a/assets/fonts/inter/Inter-Thin.otf b/assets/fonts/inter/Inter-Thin.otf new file mode 100644 index 0000000000..568a18560c Binary files /dev/null and b/assets/fonts/inter/Inter-Thin.otf differ diff --git a/assets/fonts/inter/Inter-ThinItalic.otf b/assets/fonts/inter/Inter-ThinItalic.otf new file mode 100644 index 0000000000..c5ed37c358 Binary files /dev/null and b/assets/fonts/inter/Inter-ThinItalic.otf differ diff --git a/package.json b/package.json index 92b6cfe151..5764d97a15 100644 --- a/package.json +++ b/package.json @@ -123,6 +123,7 @@ "expo-dev-client": "^4.0.14", "expo-device": "~6.0.2", "expo-file-system": "^17.0.1", + "expo-font": "~12.0.10", "expo-haptics": "^13.0.1", "expo-image": "~1.12.9", "expo-image-manipulator": "^12.0.5", diff --git a/src/App.native.tsx b/src/App.native.tsx index b488c5fe88..8c51775154 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -55,7 +55,7 @@ import {TestCtrls} from '#/view/com/testing/TestCtrls' import {Provider as ActiveVideoProvider} from '#/view/com/util/post-embeds/ActiveVideoNativeContext' import * as Toast from '#/view/com/util/Toast' import {Shell} from '#/view/shell' -import {ThemeProvider as Alf} from '#/alf' +import {ThemeProvider as Alf, useFonts} from '#/alf' import {useColorModeTheme} from '#/alf/util/useColorModeTheme' import {NuxDialogs} from '#/components/dialogs/nuxs' import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry' @@ -73,6 +73,7 @@ function InnerApp() { const {resumeSession} = useSessionApi() const theme = useColorModeTheme() const {_} = useLingui() + const [fontsLoaded] = useFonts() useIntentHandler() const hasCheckedReferrer = useStarterPackEntry() @@ -110,7 +111,7 @@ function InnerApp() { - + diff --git a/src/App.web.tsx b/src/App.web.tsx index a7a99ed3eb..f5b4bbc4f5 100644 --- a/src/App.web.tsx +++ b/src/App.web.tsx @@ -44,7 +44,7 @@ import {Provider as ActiveVideoProvider} from '#/view/com/util/post-embeds/Activ import * as Toast from '#/view/com/util/Toast' import {ToastContainer} from '#/view/com/util/Toast.web' import {Shell} from '#/view/shell/index' -import {ThemeProvider as Alf} from '#/alf' +import {ThemeProvider as Alf, useFonts} from '#/alf' import {useColorModeTheme} from '#/alf/util/useColorModeTheme' import {NuxDialogs} from '#/components/dialogs/nuxs' import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry' @@ -60,6 +60,7 @@ function InnerApp() { const {_} = useLingui() useIntentHandler() const hasCheckedReferrer = useStarterPackEntry() + const [fontsLoaded] = useFonts() // init useEffect(() => { @@ -88,7 +89,7 @@ function InnerApp() { }, [_]) // wait for session to resume - if (!isReady || !hasCheckedReferrer) return null + if (!isReady || !hasCheckedReferrer || !fontsLoaded) return null return ( diff --git a/src/alf/fonts.ts b/src/alf/fonts.ts new file mode 100644 index 0000000000..5438408dc9 --- /dev/null +++ b/src/alf/fonts.ts @@ -0,0 +1,43 @@ +import {useFonts as defaultUseFonts} from 'expo-font' + +export function useFonts() { + return defaultUseFonts({ + 'Inter-Thin': require('../../assets/fonts/inter/Inter-Thin.otf'), + 'Inter-ThinItalic': require('../../assets/fonts/inter/Inter-ThinItalic.otf'), + 'Inter-ExtraLight': require('../../assets/fonts/inter/Inter-ExtraLight.otf'), + 'Inter-ExtraLightItalic': require('../../assets/fonts/inter/Inter-ExtraLightItalic.otf'), + 'Inter-Light': require('../../assets/fonts/inter/Inter-Light.otf'), + 'Inter-LightItalic': require('../../assets/fonts/inter/Inter-LightItalic.otf'), + 'Inter-Regular': require('../../assets/fonts/inter/Inter-Regular.otf'), + 'Inter-Italic': require('../../assets/fonts/inter/Inter-Italic.otf'), + 'Inter-Medium': require('../../assets/fonts/inter/Inter-Medium.otf'), + 'Inter-MediumItalic': require('../../assets/fonts/inter/Inter-MediumItalic.otf'), + 'Inter-SemiBold': require('../../assets/fonts/inter/Inter-SemiBold.otf'), + 'Inter-SemiBoldItalic': require('../../assets/fonts/inter/Inter-SemiBoldItalic.otf'), + 'Inter-Bold': require('../../assets/fonts/inter/Inter-Bold.otf'), + 'Inter-BoldItalic': require('../../assets/fonts/inter/Inter-BoldItalic.otf'), + 'Inter-ExtraBold': require('../../assets/fonts/inter/Inter-ExtraBold.otf'), + 'Inter-ExtraBoldItalic': require('../../assets/fonts/inter/Inter-ExtraBoldItalic.otf'), + 'Inter-Black': require('../../assets/fonts/inter/Inter-Black.otf'), + 'Inter-BlackItalic': require('../../assets/fonts/inter/Inter-BlackItalic.otf'), + }) +} + +export function applyFonts(style: Record) { + style.fontFamily = + { + '100': 'Inter-Thin', + '200': 'Inter-ExtraLight', + '300': 'Inter-Light', + '400': 'Inter-Regular', + '500': 'Inter-Medium', + '600': 'Inter-SemiBold', + '700': 'Inter-Bold', + '800': 'Inter-ExtraBold', + '900': 'Inter-Black', + }[style.fontWeight as string] || 'Inter-Regular' + + if (style.fontStyle === 'italic') { + style.fontFamily += 'Italic' + } +} diff --git a/src/alf/index.tsx b/src/alf/index.tsx index 963daab2a7..d1d85e37bb 100644 --- a/src/alf/index.tsx +++ b/src/alf/index.tsx @@ -8,6 +8,7 @@ import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration' import * as fontScaling from '#/alf/util/fontScaling' export {atoms} from '#/alf/atoms' +export * from '#/alf/fonts' export * as tokens from '#/alf/tokens' export * from '#/alf/types' export * from '#/alf/util/flatten' @@ -51,7 +52,10 @@ export function ThemeProvider({ }: React.PropsWithChildren<{theme: ThemeName}>) { const gate = useGate() const [neue] = React.useState(() => gate('typography_neue')) - const [fontScale, setFontScale] = React.useState(() => fontScaling.get()) + const [fontScale, setFontScale] = React.useState(() => { + if (!neue) return 1 + return fontScaling.get() + }) const setFontScaleAndPersist = React.useCallback( (fontScale: number) => { setFontScale(fontScale) diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx index 5cdcd7d7c2..3d7c32ce6b 100644 --- a/src/components/Typography.tsx +++ b/src/components/Typography.tsx @@ -3,7 +3,7 @@ import {StyleProp, TextProps as RNTextProps, TextStyle} from 'react-native' import {UITextView} from 'react-native-uitextview' import {isNative} from '#/platform/detection' -import {atoms, flatten, useAlf, useTheme, web} from '#/alf' +import {applyFonts, atoms, flatten, useAlf, useTheme, web} from '#/alf' export type TextProps = RNTextProps & { /** @@ -36,7 +36,7 @@ export function leading< */ export function normalizeTextStyles( styles: StyleProp, - {fontScale}: {fontScale: number}, + {fontScale, flags}: {fontScale: number; flags: {neue: boolean}}, ) { const s = flatten(styles) // should always be defined on these components @@ -50,6 +50,10 @@ export function normalizeTextStyles( s.lineHeight = s.fontSize } + if (flags.neue) { + applyFonts(s) + } + return s } @@ -57,10 +61,11 @@ export function normalizeTextStyles( * Our main text component. Use this most of the time. */ export function Text({style, selectable, ...rest}: TextProps) { - const {fontScale} = useAlf() + const {fontScale, flags} = useAlf() const t = useTheme() const s = normalizeTextStyles([atoms.text_sm, t.atoms.text, flatten(style)], { fontScale, + flags, }) return diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx index fe449fcdbc..6770a96d9f 100644 --- a/src/view/screens/Settings/index.tsx +++ b/src/view/screens/Settings/index.tsx @@ -54,7 +54,7 @@ import * as Toast from 'view/com/util/Toast' import {UserAvatar} from 'view/com/util/UserAvatar' import {ScrollView} from 'view/com/util/Views' import {DeactivateAccountDialog} from '#/screens/Settings/components/DeactivateAccountDialog' -import {atoms as a, useTheme} from '#/alf' +import {atoms as a, useAlf, useTheme} from '#/alf' import {useDialogControl} from '#/components/Dialog' import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings' import {Email2FAToggle} from './Email2FAToggle' @@ -133,6 +133,7 @@ function SettingsAccountCard({ type Props = NativeStackScreenProps export function SettingsScreen({}: Props) { + const {setFontScale} = useAlf() const queryClient = useQueryClient() const pal = usePalette('default') const {_} = useLingui() @@ -819,6 +820,16 @@ export function SettingsScreen({}: Props) { {__DEV__ ? ( <> + setFontScale(0.9375)} + accessibilityRole="button" + accessibilityLabel={_(msg`Set test font scale`)} + accessibilityHint={_(msg`Set test font scale`)}> + + Enable neue font scale + +