Add inter, integrate

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",

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() {
     <StatsigProvider key={currentAccount?.did}>
       <Alf theme={theme}>
         <ThemeProvider theme={theme}>
-          <Splash isReady={isReady && hasCheckedReferrer}>
+          <Splash isReady={isReady && hasCheckedReferrer && fontsLoaded}>
             <ActiveVideoProvider>
               <RootSiblingParent>
                 <QueryProvider currentDid={currentAccount?.did}>

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 (
     <KeyboardProvider enabled={false}>

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<string, any>) {
+  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'
+  }
+}

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)

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<TextStyle>,
-  {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 <UITextView selectable={selectable} uiTextView style={s} {...rest} />

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<CommonNavigatorParams, 'Settings'>
 export function SettingsScreen({}: Props) {
+  const {setFontScale} = useAlf()
   const queryClient = useQueryClient()
   const pal = usePalette('default')
   const {_} = useLingui()
@@ -819,6 +820,16 @@ export function SettingsScreen({}: Props) {
         </TouchableOpacity>
         {__DEV__ ? (
           <>
+            <TouchableOpacity
+              style={[pal.view, styles.linkCardNoIcon]}
+              onPress={() => setFontScale(0.9375)}
+              accessibilityRole="button"
+              accessibilityLabel={_(msg`Set test font scale`)}
+              accessibilityHint={_(msg`Set test font scale`)}>
+              <Text type="lg" style={pal.text}>
+                <Trans>Enable neue font scale</Trans>
+              </Text>
+            </TouchableOpacity>
             <TouchableOpacity
               style={[pal.view, styles.linkCardNoIcon]}
               onPress={onPressStorybook}

yarn.lock

@@ -12221,6 +12221,13 @@ expo-file-system@^17.0.1, expo-file-system@~17.0.1:
   resolved "https://registry.yarnpkg.com/expo-file-system/-/expo-file-system-17.0.1.tgz#b9f8af8c1c06ec71d96fd7a0d2567fa9e1c88f15"
   integrity sha512-dYpnZJqTGj6HCYJyXAgpFkQWsiCH3HY1ek2cFZVHFoEc5tLz9gmdEgTF6nFHurvmvfmXqxi7a5CXyVm0aFYJBw==
 
+expo-font@~12.0.10:
+  version "12.0.10"
+  resolved "https://registry.yarnpkg.com/expo-font/-/expo-font-12.0.10.tgz#62deaf1f46159d7839f01305f44079268781b1db"
+  integrity sha512-Q1i2NuYri3jy32zdnBaHHCya1wH1yMAsI+3CCmj9zlQzlhsS9Bdwcj2W3c5eU5FvH2hsNQy4O+O1NnM6o/pDaQ==
+  dependencies:
+    fontfaceobserver "^2.1.0"
+
 expo-font@~12.0.5:
   version "12.0.5"
   resolved "https://registry.yarnpkg.com/expo-font/-/expo-font-12.0.5.tgz#3451c2bd3f98859b127a6484d3474a292889b93f"