[Neue] Base (#5395)

* Add fontScale, gate it, fix some computes

* Add inter, integrate

* Clean up

* Apply to old Text component

* Use numeric weight

* Cleanup

* Clean up appearance settings

* Global tracking

* Fix regular italic variant

* Refactor settings and fontScale values

* Remove flags

* Get rid of lower weight font usage

* Remove gate from settings

* Refactor appearance settings for reuse

* Add neue type nux

* Update defaults

* Load fonts, add fallback families

* Load fonts via plugin in production

* Fixes

* Fix for web

* Nits

---------

Co-authored-by: Hailey <me@haileyok.com>

1 files changed, 38 insertions, 9 deletions

diff --git a/src/view/com/util/text/Text.tsx b/src/view/com/util/text/Text.tsx
index 2ea9586ee..52a45b0e2 100644
--- a/src/view/com/util/text/Text.tsx
+++ b/src/view/com/util/text/Text.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
-import {Text as RNText, TextProps} from 'react-native'
+import {StyleSheet, Text as RNText, TextProps} from 'react-native'
 import {UITextView} from 'react-native-uitextview'
 
 import {lh, s} from 'lib/styles'
 import {TypographyVariant, useTheme} from 'lib/ThemeContext'
 import {isIOS, isWeb} from 'platform/detection'
+import {applyFonts, useAlf} from '#/alf'
 
 export type CustomTextProps = TextProps & {
   type?: TypographyVariant
@@ -32,11 +33,28 @@ export function Text({
   const theme = useTheme()
   const typography = theme.typography[type]
   const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined
+  const {fonts} = useAlf()
 
   if (selectable && isIOS) {
+    const flattened = StyleSheet.flatten([
+      s.black,
+      typography,
+      lineHeightStyle,
+      style,
+    ])
+
+    applyFonts(flattened, fonts.family)
+
+    // should always be defined on `typography`
+    // @ts-ignore
+    if (flattened.fontSize) {
+      // @ts-ignore
+      flattened.fontSize = flattened.fontSize * fonts.scaleMultiplier
+    }
+
     return (
       <UITextView
-        style={[s.black, typography, lineHeightStyle, style]}
+        style={flattened}
         selectable={selectable}
         uiTextView
         {...props}>
@@ -45,15 +63,26 @@ export function Text({
     )
   }
 
+  const flattened = StyleSheet.flatten([
+    s.black,
+    typography,
+    isWeb && fontFamilyStyle,
+    lineHeightStyle,
+    style,
+  ])
+
+  applyFonts(flattened, fonts.family)
+
+  // should always be defined on `typography`
+  // @ts-ignore
+  if (flattened.fontSize) {
+    // @ts-ignore
+    flattened.fontSize = flattened.fontSize * fonts.scaleMultiplier
+  }
+
   return (
     <RNText
-      style={[
-        s.black,
-        typography,
-        isWeb && fontFamilyStyle,
-        lineHeightStyle,
-        style,
-      ]}
+      style={flattened}
       // @ts-ignore web only -esb
       dataSet={Object.assign({tooltip: title}, dataSet || {})}
       selectable={selectable}