[Neue] Font weights (#5442)

* Align all font weights

* Only load necessary fonts

* Also comment out from hook

src/view/com/util/Html.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react'
 import {StyleSheet, View} from 'react-native'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useTheme} from 'lib/ThemeContext'
-import {Text} from './text/Text'
-import {TextLink} from './Link'
 import {
   H1 as ExpoH1,
   H2 as ExpoH2,
   H3 as ExpoH3,
   H4 as ExpoH4,
 } from '@expo/html-elements'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+
+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
@@ -166,7 +167,7 @@ const useStyles = () => {
     h4: {
       marginTop: 0,
       marginBottom: 10,
-      fontWeight: 'bold',
+      fontWeight: '600',
     },
     p: {
       marginBottom: 10,

src/view/com/util/ViewHeader.tsx

@@ -6,12 +6,12 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
+import {useAnalytics} from '#/lib/analytics/analytics'
+import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {NavigationProp} from '#/lib/routes/types'
 import {useSetDrawerOpen} from '#/state/shell'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {NavigationProp} from 'lib/routes/types'
 import {useTheme} from '#/alf'
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 import {Text} from './text/Text'
@@ -250,7 +250,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   title: {
-    fontWeight: 'bold',
+    fontWeight: '600',
   },
   subtitle: {
     fontSize: 13,

src/view/com/util/forms/Button.tsx

@@ -1,20 +1,21 @@
 import React from 'react'
 import {
+  ActivityIndicator,
   GestureResponderEvent,
+  NativeSyntheticEvent,
+  NativeTouchEvent,
+  Pressable,
+  PressableStateCallbackType,
   StyleProp,
   StyleSheet,
   TextStyle,
-  Pressable,
-  ViewStyle,
-  PressableStateCallbackType,
-  ActivityIndicator,
   View,
-  NativeSyntheticEvent,
-  NativeTouchEvent,
+  ViewStyle,
 } from 'react-native'
+
+import {choose} from '#/lib/functions'
+import {useTheme} from '#/lib/ThemeContext'
 import {Text} from '../text/Text'
-import {useTheme} from 'lib/ThemeContext'
-import {choose} from 'lib/functions'
 
 export type ButtonType =
   | 'primary'
@@ -112,7 +113,7 @@ export function Button({
       },
       secondary: {
         color: theme.palette.secondary.text,
-        fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+        fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
       },
       default: {
         color: theme.palette.default.text,
@@ -123,23 +124,23 @@ export function Button({
       },
       'primary-outline': {
         color: theme.palette.primary.textInverted,
-        fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+        fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
       },
       'secondary-outline': {
         color: theme.palette.secondary.textInverted,
-        fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+        fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
       },
       'primary-light': {
         color: theme.palette.primary.textInverted,
-        fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+        fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
       },
       'secondary-light': {
         color: theme.palette.secondary.textInverted,
-        fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+        fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
       },
       'default-light': {
         color: theme.palette.default.text,
-        fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
+        fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
       },
     },
   )

src/view/com/util/forms/DropdownButton.tsx

@@ -17,11 +17,11 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {HITSLOP_10} from 'lib/constants'
-import {usePalette} from 'lib/hooks/usePalette'
-import {colors} from 'lib/styles'
-import {useTheme} from 'lib/ThemeContext'
-import {isWeb} from 'platform/detection'
+import {HITSLOP_10} from '#/lib/constants'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {colors} from '#/lib/styles'
+import {useTheme} from '#/lib/ThemeContext'
+import {isWeb} from '#/platform/detection'
 import {native} from '#/alf'
 import {FullWindowOverlay} from '#/components/FullWindowOverlay'
 import {Text} from '../text/Text'
@@ -382,6 +382,6 @@ const styles = StyleSheet.create({
   },
   headingLabel: {
     fontSize: 18,
-    fontWeight: '500',
+    fontWeight: '600',
   },
 })

src/view/com/util/forms/NativeDropdown.web.tsx

@@ -5,9 +5,9 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import {MenuItemCommonProps} from 'zeego/lib/typescript/menu'
 
-import {HITSLOP_10} from 'lib/constants'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useTheme} from 'lib/ThemeContext'
+import {HITSLOP_10} from '#/lib/constants'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useTheme} from '#/lib/ThemeContext'
 
 // Custom Dropdown Menu Components
 // ==
@@ -267,7 +267,7 @@ const styles = StyleSheet.create({
   },
   itemTitle: {
     fontSize: 16,
-    fontWeight: '500',
+    fontWeight: '600',
     paddingRight: 10,
   },
 })

src/view/com/util/forms/RadioButton.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
 
-import {choose} from 'lib/functions'
-import {useTheme} from 'lib/ThemeContext'
+import {choose} from '#/lib/functions'
+import {useTheme} from '#/lib/ThemeContext'
 import {Text} from '../text/Text'
 import {Button, ButtonType} from './Button'
 
@@ -86,39 +86,39 @@ export function RadioButton({
   const labelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, {
     primary: {
       color: theme.palette.primary.text,
-      fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
     },
     secondary: {
       color: theme.palette.secondary.text,
-      fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
     },
     inverted: {
       color: theme.palette.inverted.text,
-      fontWeight: theme.palette.inverted.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.inverted.isLowContrast ? '600' : undefined,
     },
     'primary-outline': {
       color: theme.palette.primary.textInverted,
-      fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
     },
     'secondary-outline': {
       color: theme.palette.secondary.textInverted,
-      fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
     },
     'primary-light': {
       color: theme.palette.primary.textInverted,
-      fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
     },
     'secondary-light': {
       color: theme.palette.secondary.textInverted,
-      fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
     },
     default: {
       color: theme.palette.default.text,
-      fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
     },
     'default-light': {
       color: theme.palette.default.text,
-      fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
     },
   })
   return (

src/view/com/util/forms/ToggleButton.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
+
+import {choose} from '#/lib/functions'
+import {colors} from '#/lib/styles'
+import {useTheme} from '#/lib/ThemeContext'
+import {TypographyVariant} from '#/lib/ThemeContext'
 import {Text} from '../text/Text'
 import {Button, ButtonType} from './Button'
-import {useTheme} from 'lib/ThemeContext'
-import {choose} from 'lib/functions'
-import {colors} from 'lib/styles'
-import {TypographyVariant} from 'lib/ThemeContext'
 
 export function ToggleButton({
   testID,
@@ -100,39 +101,39 @@ export function ToggleButton({
   const labelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, {
     primary: {
       color: theme.palette.primary.text,
-      fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
     },
     secondary: {
       color: theme.palette.secondary.text,
-      fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
     },
     inverted: {
       color: theme.palette.inverted.text,
-      fontWeight: theme.palette.inverted.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.inverted.isLowContrast ? '600' : undefined,
     },
     'primary-outline': {
       color: theme.palette.primary.textInverted,
-      fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
     },
     'secondary-outline': {
       color: theme.palette.secondary.textInverted,
-      fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
     },
     'primary-light': {
       color: theme.palette.primary.textInverted,
-      fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
     },
     'secondary-light': {
       color: theme.palette.secondary.textInverted,
-      fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
     },
     default: {
       color: theme.palette.default.text,
-      fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
     },
     'default-light': {
       color: theme.palette.default.text,
-      fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
     },
   })
   return (

src/view/com/util/post-embeds/GifEmbed.tsx

@@ -13,10 +13,10 @@ import {useLingui} from '@lingui/react'
 
 import {HITSLOP_20} from '#/lib/constants'
 import {parseAltFromGIFDescription} from '#/lib/gif-alt-text'
+import {EmbedPlayerParams} from '#/lib/strings/embed-player'
 import {isWeb} from '#/platform/detection'
+import {useAutoplayDisabled} from '#/state/preferences'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
-import {EmbedPlayerParams} from 'lib/strings/embed-player'
-import {useAutoplayDisabled} from 'state/preferences'
 import {atoms as a, useTheme} from '#/alf'
 import {Fill} from '#/components/Fill'
 import {Loader} from '#/components/Loader'
@@ -210,6 +210,6 @@ const styles = StyleSheet.create({
   alt: {
     color: 'white',
     fontSize: isWeb ? 10 : 7,
-    fontWeight: 'bold',
+    fontWeight: '600',
   },
 })

src/view/com/util/post-embeds/index.tsx

@@ -20,10 +20,10 @@ import {
   ModerationDecision,
 } from '@atproto/api'
 
+import {usePalette} from '#/lib/hooks/usePalette'
 import {ImagesLightbox, useLightboxControls} from '#/state/lightbox'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {usePalette} from 'lib/hooks/usePalette'
-import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
+import {FeedSourceCard} from '#/view/com/feeds/FeedSourceCard'
 import {atoms as a, useTheme} from '#/alf'
 import * as ListCard from '#/components/ListCard'
 import {Embed as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
@@ -259,7 +259,7 @@ const styles = StyleSheet.create({
   alt: {
     color: 'white',
     fontSize: 7,
-    fontWeight: 'bold',
+    fontWeight: '600',
   },
   customFeedOuter: {
     borderWidth: StyleSheet.hairlineWidth,