Font tweaks (#5597)

* Increase fontWeight on android

* Use atoms for a couple stray fontWeights

* Rm unused file

src/alf/atoms.ts

@@ -276,13 +276,13 @@ export const atoms = {
     letterSpacing: tokens.TRACKING,
   },
   font_normal: {
-    fontWeight: tokens.fontWeight.regular,
+    fontWeight: tokens.fontWeight.normal,
   },
   font_bold: {
-    fontWeight: tokens.fontWeight.semibold,
+    fontWeight: tokens.fontWeight.bold,
   },
   font_heavy: {
-    fontWeight: tokens.fontWeight.extrabold,
+    fontWeight: tokens.fontWeight.heavy,
   },
   italic: {
     fontStyle: 'italic',

src/alf/tokens.ts

@@ -1,6 +1,6 @@
-import {Platform} from 'react-native'
+import {isAndroid} from '#/platform/detection'
 
-export const TRACKING = Platform.OS === 'android' ? 0.1 : 0
+export const TRACKING = isAndroid ? 0.1 : 0
 
 export const color = {
   temp_purple: 'rgb(105 0 255)',
@@ -51,12 +51,9 @@ export const borderRadius = {
  * These correspond to Inter font files we actually load.
  */
 export const fontWeight = {
-  regular: '400',
-  // medium: '500',
-  semibold: '600',
-  // bold: '700',
-  extrabold: '800',
-  // black: '900',
+  normal: '400',
+  bold: isAndroid ? '700' : '600',
+  heavy: isAndroid ? '900' : '800',
 } as const
 
 export const gradients = {

src/lib/themes.ts

@@ -2,6 +2,7 @@ import {Platform} from 'react-native'
 
 import {tokens} from '#/alf'
 import {darkPalette, dimPalette, lightPalette} from '#/alf/themes'
+import {fontWeight} from '#/alf/tokens'
 import {colors} from './styles'
 import type {Theme} from './ThemeContext'
 
@@ -90,195 +91,195 @@ export const defaultTheme: Theme = {
     '2xl-thin': {
       fontSize: 18,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '400',
+      fontWeight: fontWeight.normal,
     },
     '2xl': {
       fontSize: 18,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '400',
+      fontWeight: fontWeight.normal,
     },
     '2xl-medium': {
       fontSize: 18,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
     },
     '2xl-bold': {
       fontSize: 18,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
     },
     '2xl-heavy': {
       fontSize: 18,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '800',
+      fontWeight: fontWeight.heavy,
     },
     'xl-thin': {
       fontSize: 17,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '400',
+      fontWeight: fontWeight.normal,
     },
     xl: {
       fontSize: 17,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '400',
+      fontWeight: fontWeight.normal,
     },
     'xl-medium': {
       fontSize: 17,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
     },
     'xl-bold': {
       fontSize: 17,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
     },
     'xl-heavy': {
       fontSize: 17,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '800',
+      fontWeight: fontWeight.heavy,
     },
     'lg-thin': {
       fontSize: 16,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '400',
+      fontWeight: fontWeight.normal,
     },
     lg: {
       fontSize: 16,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '400',
+      fontWeight: fontWeight.normal,
     },
     'lg-medium': {
       fontSize: 16,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
     },
     'lg-bold': {
       fontSize: 16,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
     },
     'lg-heavy': {
       fontSize: 16,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '800',
+      fontWeight: fontWeight.heavy,
     },
     'md-thin': {
       fontSize: 15,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '400',
+      fontWeight: fontWeight.normal,
     },
     md: {
       fontSize: 15,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '400',
+      fontWeight: fontWeight.normal,
     },
     'md-medium': {
       fontSize: 15,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
     },
     'md-bold': {
       fontSize: 15,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
     },
     'md-heavy': {
       fontSize: 15,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '800',
+      fontWeight: fontWeight.heavy,
     },
     'sm-thin': {
       fontSize: 14,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '400',
+      fontWeight: fontWeight.normal,
     },
     sm: {
       fontSize: 14,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '400',
+      fontWeight: fontWeight.normal,
     },
     'sm-medium': {
       fontSize: 14,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
     },
     'sm-bold': {
       fontSize: 14,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
     },
     'sm-heavy': {
       fontSize: 14,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '800',
+      fontWeight: fontWeight.heavy,
     },
     'xs-thin': {
       fontSize: 13,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '400',
+      fontWeight: fontWeight.normal,
     },
     xs: {
       fontSize: 13,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '400',
+      fontWeight: fontWeight.normal,
     },
     'xs-medium': {
       fontSize: 13,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
     },
     'xs-bold': {
       fontSize: 13,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
     },
     'xs-heavy': {
       fontSize: 13,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '800',
+      fontWeight: fontWeight.heavy,
     },
 
     'title-2xl': {
       fontSize: 34,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
     },
     'title-xl': {
       fontSize: 28,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
     },
     'title-lg': {
       fontSize: 22,
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
     },
     title: {
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
       fontSize: 20,
       letterSpacing: tokens.TRACKING,
     },
     'title-sm': {
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
       fontSize: 17,
       letterSpacing: tokens.TRACKING,
     },
     'post-text': {
       fontSize: 16,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '400',
+      fontWeight: fontWeight.normal,
     },
     'post-text-lg': {
       fontSize: 20,
       letterSpacing: tokens.TRACKING,
-      fontWeight: '400',
+      fontWeight: fontWeight.normal,
     },
     'button-lg': {
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
       fontSize: 18,
       letterSpacing: tokens.TRACKING,
     },
     button: {
-      fontWeight: '600',
+      fontWeight: fontWeight.bold,
       fontSize: 14,
       letterSpacing: tokens.TRACKING,
     },

src/screens/Profile/Header/DisplayName.tsx

@@ -27,7 +27,7 @@ export function ProfileHeaderDisplayName({
           t.atoms.text,
           gtMobile ? a.text_4xl : a.text_3xl,
           a.self_start,
-          {fontWeight: '600'},
+          a.font_heavy,
         ]}>
         {sanitizeDisplayName(
           profile.displayName || sanitizeHandle(profile.handle),

src/view/com/util/Html.tsx

@@ -1,207 +0,0 @@
-import * as React from 'react'
-import {StyleSheet, View} from 'react-native'
-import {
-  H1 as ExpoH1,
-  H2 as ExpoH2,
-  H3 as ExpoH3,
-  H4 as ExpoH4,
-} from '@expo/html-elements'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {useTheme} from '#/lib/ThemeContext'
-import {TextLink} from './Link'
-import {Text} from './text/Text'
-
-/**
- * These utilities are used to define long documents in an html-like
- * DSL. See for instance /locale/en/privacy-policy.tsx
- */
-
-interface IsChildProps {
-  isChild?: boolean
-}
-
-// type ReactNodeWithIsChildProp =
-//   | React.ReactElement<IsChildProps>
-//   | React.ReactElement<IsChildProps>[]
-//   | React.ReactNode
-
-export function H1({children}: React.PropsWithChildren<{}>) {
-  const styles = useStyles()
-  const pal = usePalette('default')
-  const typography = useTheme().typography['title-xl']
-  // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf
-  return <ExpoH1 style={[typography, pal.text, styles.h1]}>{children}</ExpoH1>
-}
-
-export function H2({children}: React.PropsWithChildren<{}>) {
-  const styles = useStyles()
-  const pal = usePalette('default')
-  const typography = useTheme().typography['title-lg']
-  // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf
-  return <ExpoH2 style={[typography, pal.text, styles.h2]}>{children}</ExpoH2>
-}
-
-export function H3({children}: React.PropsWithChildren<{}>) {
-  const styles = useStyles()
-  const pal = usePalette('default')
-  const typography = useTheme().typography.title
-  // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf
-  return <ExpoH3 style={[typography, pal.text, styles.h3]}>{children}</ExpoH3>
-}
-
-export function H4({children}: React.PropsWithChildren<{}>) {
-  const styles = useStyles()
-  const pal = usePalette('default')
-  const typography = useTheme().typography['title-sm']
-  // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf
-  return <ExpoH4 style={[typography, pal.text, styles.h4]}>{children}</ExpoH4>
-}
-
-export function P({children}: React.PropsWithChildren<{}>) {
-  const styles = useStyles()
-  const pal = usePalette('default')
-  return (
-    <Text type="md" style={[pal.text, styles.p]}>
-      {children}
-    </Text>
-  )
-}
-
-export function UL({children, isChild}: React.PropsWithChildren<IsChildProps>) {
-  const styles = useStyles()
-  return (
-    <View style={[styles.ul, isChild && styles.ulChild]}>
-      {markChildProps(children)}
-    </View>
-  )
-}
-
-export function OL({children, isChild}: React.PropsWithChildren<IsChildProps>) {
-  const styles = useStyles()
-  return (
-    <View style={[styles.ol, isChild && styles.olChild]}>
-      {markChildProps(children)}
-    </View>
-  )
-}
-
-export function LI({
-  children,
-  value,
-}: React.PropsWithChildren<{value?: string}>) {
-  const styles = useStyles()
-  const pal = usePalette('default')
-  return (
-    <View style={styles.li}>
-      <Text style={[pal.text, styles.liBullet]}>{value || <>&bull;</>}</Text>
-      <Text type="md" style={[pal.text, styles.liText]}>
-        {markChildProps(children)}
-      </Text>
-    </View>
-  )
-}
-
-export function A({children, href}: React.PropsWithChildren<{href: string}>) {
-  const styles = useStyles()
-  const pal = usePalette('default')
-  return (
-    <TextLink
-      type="md"
-      style={[pal.link, styles.a]}
-      text={children}
-      href={href}
-    />
-  )
-}
-
-export function STRONG({children}: React.PropsWithChildren<{}>) {
-  const pal = usePalette('default')
-  return (
-    <Text type="md-medium" style={[pal.text]}>
-      {children}
-    </Text>
-  )
-}
-
-export function EM({children}: React.PropsWithChildren<{}>) {
-  const styles = useStyles()
-  const pal = usePalette('default')
-  return (
-    <Text type="md" style={[pal.text, styles.em]}>
-      {children}
-    </Text>
-  )
-}
-
-function markChildProps(children: React.ReactNode) {
-  return React.Children.map(children, child => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement<IsChildProps>(
-        child as React.ReactElement<IsChildProps>,
-        {isChild: true},
-      )
-    }
-    return child
-  })
-}
-
-const useStyles = () => {
-  const {isDesktop} = useWebMediaQueries()
-  return StyleSheet.create({
-    h1: {
-      marginTop: 20,
-      marginBottom: 10,
-      letterSpacing: 0.8,
-    },
-    h2: {
-      marginTop: 20,
-      marginBottom: 10,
-      letterSpacing: 0.8,
-    },
-    h3: {
-      marginTop: 0,
-      marginBottom: 10,
-    },
-    h4: {
-      marginTop: 0,
-      marginBottom: 10,
-      fontWeight: '600',
-    },
-    p: {
-      marginBottom: 10,
-    },
-    ul: {
-      marginBottom: 10,
-      paddingLeft: isDesktop ? 18 : 4,
-    },
-    ulChild: {
-      paddingTop: 10,
-      marginBottom: 0,
-    },
-    ol: {
-      marginBottom: 10,
-      paddingLeft: isDesktop ? 18 : 4,
-    },
-    olChild: {
-      paddingTop: 10,
-      marginBottom: 0,
-    },
-    li: {
-      flexDirection: 'row',
-      paddingRight: 20,
-      marginBottom: 10,
-    },
-    liBullet: {
-      paddingRight: 10,
-    },
-    liText: {},
-    a: {
-      marginBottom: 10,
-    },
-    em: {
-      fontStyle: 'italic',
-    },
-  })
-}

src/view/shell/Drawer.tsx

@@ -590,7 +590,9 @@ function MenuItem({
                 ? styles.menuItemCountTens
                 : undefined,
             ]}>
-            <Text style={styles.menuItemCountLabel} numberOfLines={1}>
+            <Text
+              style={[styles.menuItemCountLabel, a.font_bold]}
+              numberOfLines={1}>
               {count}
             </Text>
           </View>
@@ -666,7 +668,6 @@ const styles = StyleSheet.create({
   },
   menuItemCountLabel: {
     fontSize: 12,
-    fontWeight: '600',
     fontVariant: ['tabular-nums'],
     color: colors.white,
   },