Migrate to @bsky.app/alf package (#9030)

* Add storybook shortcut in dev

* Migrate to alg pkg

* Migrate font_bold to new font_semi_bold

* Migrate font_heavy to font_bold

* Fix old theme refs

* Remove leading util

* Bump

* Revert "Add storybook shortcut in dev"

This reverts commit 7a86195c77fb5d449c7782e64ebabb6addfab919.

* Remove alf script

* Adjust font scale

* Bump

* Bump pkg

* Migrate values from conflicts

* Create default themes outside react

* Use built-in alf utils

* Migrate old font styles

* Remove unused tokens

* Move theme creation to more appropriate file

* Update button colors

* Adjust TextField colors, line heights

src/view/com/auth/SplashScreen.tsx

@@ -44,7 +44,7 @@ export const SplashScreen = ({
             <Text
               style={[
                 a.text_md,
-                a.font_bold,
+                a.font_semi_bold,
                 t.atoms.text_contrast_medium,
                 a.text_center,
               ]}>

src/view/com/auth/SplashScreen.web.tsx

@@ -95,7 +95,11 @@ export const SplashScreen = ({
               )}
 
               <Text
-                style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
+                style={[
+                  a.text_md,
+                  a.font_semi_bold,
+                  t.atoms.text_contrast_medium,
+                ]}>
                 <Trans>What's up?</Trans>
               </Text>
             </View>

src/view/com/auth/server-input/index.tsx

@@ -126,7 +126,7 @@ function DialogInner({
       accessibilityDescribedBy="dialog-description"
       accessibilityLabelledBy="dialog-title">
       <View style={[a.relative, a.gap_md, a.w_full]}>
-        <Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}>
+        <Text nativeID="dialog-title" style={[a.text_2xl, a.font_semi_bold]}>
           <Trans>Choose your account provider</Trans>
         </Text>
         <ToggleButton.Group

src/view/com/composer/Composer.tsx

@@ -1770,7 +1770,7 @@ function ErrorBanner({
             style={[
               {paddingLeft: 28},
               a.text_xs,
-              a.font_bold,
+              a.font_semi_bold,
               a.leading_snug,
               t.atoms.text_contrast_low,
             ]}>
@@ -1863,7 +1863,7 @@ function VideoUploadToolbar({state}: {state: VideoState}) {
           progress={wheelProgress}
         />
       </Animated.View>
-      <NewText style={[a.font_bold, a.ml_sm]}>{text}</NewText>
+      <NewText style={[a.font_semi_bold, a.ml_sm]}>{text}</NewText>
     </ToolbarWrapper>
   )
 }

src/view/com/composer/ComposerReplyTo.tsx

@@ -101,7 +101,7 @@ export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
       <View style={[a.flex_1, a.pl_md, a.pr_sm, a.gap_2xs]}>
         <View style={[a.flex_row, a.align_center, a.pr_xs]}>
           <Text
-            style={[a.font_bold, a.text_md, a.leading_snug, a.flex_shrink]}
+            style={[a.font_semi_bold, a.text_md, a.leading_snug, a.flex_shrink]}
             numberOfLines={1}
             emoji>
             {sanitizeDisplayName(

src/view/com/composer/GifAltText.tsx

@@ -95,7 +95,7 @@ export function GifAltTextDialogLoaded({
           <Plus size="sm" fill={t.palette.white} />
         )}
         <Text
-          style={[a.font_bold, {color: t.palette.white}]}
+          style={[a.font_semi_bold, {color: t.palette.white}]}
           accessible={false}>
           <Trans>ALT</Trans>
         </Text>
@@ -206,7 +206,8 @@ function AltTextInner({
         </View>
         {/* below the text input to force tab order */}
         <View>
-          <Text style={[a.text_2xl, a.font_bold, a.leading_tight, a.pb_sm]}>
+          <Text
+            style={[a.text_2xl, a.font_semi_bold, a.leading_tight, a.pb_sm]}>
             <Trans>Add alt text</Trans>
           </Text>
           <View style={[a.align_center]}>

src/view/com/composer/labels/LabelsBtn.tsx

@@ -108,7 +108,7 @@ function DialogInner({
       style={[{maxWidth: 500}, a.w_full]}>
       <View style={[a.flex_1]}>
         <View style={[a.gap_sm]}>
-          <Text style={[a.text_2xl, a.font_bold]}>
+          <Text style={[a.text_2xl, a.font_semi_bold]}>
             <Trans>Add a content warning</Trans>
           </Text>
           <Text style={[t.atoms.text_contrast_medium, a.leading_snug]}>
@@ -123,7 +123,7 @@ function DialogInner({
           <View>
             <View
               style={[a.flex_row, a.align_center, a.justify_between, a.pb_sm]}>
-              <Text style={[a.font_bold, a.text_lg]}>
+              <Text style={[a.font_semi_bold, a.text_lg]}>
                 <Trans>Adult Content</Trans>
               </Text>
             </View>
@@ -181,7 +181,7 @@ function DialogInner({
           <View>
             <View
               style={[a.flex_row, a.align_center, a.justify_between, a.pb_sm]}>
-              <Text style={[a.font_bold, a.text_lg]}>
+              <Text style={[a.font_semi_bold, a.text_lg]}>
                 <Trans>Other</Trans>
               </Text>
             </View>

src/view/com/composer/photos/ImageAltTextDialog.tsx

@@ -89,7 +89,7 @@ const ImageAltTextInner = ({
       <Dialog.Close />
 
       <View>
-        <Text style={[a.text_2xl, a.font_bold, a.leading_tight, a.pb_sm]}>
+        <Text style={[a.text_2xl, a.font_semi_bold, a.leading_tight, a.pb_sm]}>
           <Trans>Add alt text</Trans>
         </Text>
 

src/view/com/composer/select-language/PostLanguageSelect.tsx

@@ -111,7 +111,7 @@ function LanguageBtn(props: Omit<ButtonProps, 'label' | 'children'>) {
             <Text
               style={[
                 {color},
-                a.font_bold,
+                a.font_semi_bold,
                 a.text_sm,
                 a.leading_snug,
                 {maxWidth: 100},

src/view/com/composer/select-language/PostLanguageSelectDialog.tsx

@@ -155,7 +155,7 @@ export function DialogInner() {
             style={[
               t.atoms.text,
               a.text_left,
-              a.font_bold,
+              a.font_semi_bold,
               a.text_xl,
               a.mb_sm,
             ]}>
@@ -240,7 +240,7 @@ export function DialogInner() {
                 style={[
                   a.px_0,
                   a.py_md,
-                  a.font_bold,
+                  a.font_semi_bold,
                   a.text_xs,
                   t.atoms.text_contrast_low,
                   a.pt_3xl,

src/view/com/composer/select-language/SuggestedLanguage.tsx

@@ -88,7 +88,7 @@ export function SuggestedLanguage({
         <Text style={[a.flex_1]}>
           <Trans>
             Are you writing in{' '}
-            <Text style={[a.font_bold]}>{suggestedLanguageName}</Text>?
+            <Text style={[a.font_semi_bold]}>{suggestedLanguageName}</Text>?
           </Trans>
         </Text>
 

src/view/com/composer/text-input/TextInput.web.tsx

@@ -353,7 +353,7 @@ export function TextInput({
               <Text
                 style={[
                   a.text_lg,
-                  a.font_bold,
+                  a.font_semi_bold,
                   t.atoms.text_contrast_medium,
                   t.atoms.border_contrast_high,
                   styles.dropText,

src/view/com/composer/text-input/mobile/Autocomplete.tsx

@@ -110,7 +110,7 @@ function AutocompleteProfileCard({
               platform({ios: a.flex_1}),
             ]}>
             <Text
-              style={[a.text_md, a.font_bold, a.leading_snug]}
+              style={[a.text_md, a.font_semi_bold, a.leading_snug]}
               emoji
               numberOfLines={1}>
               {displayName}

src/view/com/composer/videos/SubtitleDialog.tsx

@@ -97,7 +97,7 @@ function SubtitleDialogInner({
   return (
     <Dialog.ScrollableInner label={_(msg`Video settings`)}>
       <View style={a.gap_md}>
-        <Text style={[a.text_xl, a.font_bold, a.leading_tight]}>
+        <Text style={[a.text_xl, a.font_semi_bold, a.leading_tight]}>
           <Trans>Alt text</Trans>
         </Text>
         <TextField.Root>
@@ -128,7 +128,7 @@ function SubtitleDialogInner({
                 a.my_md,
               ]}
             />
-            <Text style={[a.text_xl, a.font_bold, a.leading_tight]}>
+            <Text style={[a.text_xl, a.font_semi_bold, a.leading_tight]}>
               <Trans>Captions (.vtt)</Trans>
             </Text>
             <SubtitleFilePicker
@@ -235,7 +235,7 @@ function SubtitleFileRow({
             <PageTextIcon style={[t.atoms.text, a.flex_shrink_0]} size="sm" />
           )}
           <Text
-            style={[a.flex_1, a.leading_snug, a.font_bold, a.mb_2xs]}
+            style={[a.flex_1, a.leading_snug, a.font_semi_bold, a.mb_2xs]}
             numberOfLines={1}>
             {file.name}
           </Text>

src/view/com/feeds/FeedSourceCard.tsx

@@ -139,7 +139,7 @@ export function FeedSourceCardLoaded({
         <View style={[a.flex_1]}>
           <Text
             emoji
-            style={[a.text_sm, a.font_bold, a.leading_snug]}
+            style={[a.text_sm, a.font_semi_bold, a.leading_snug]}
             numberOfLines={1}>
             {feed.displayName}
           </Text>
@@ -165,7 +165,7 @@ export function FeedSourceCardLoaded({
         <Text
           style={[
             a.text_sm,
-            a.font_bold,
+            a.font_semi_bold,
             t.atoms.text_contrast_medium,
             a.leading_snug,
           ]}>

src/view/com/feeds/MissingFeed.tsx

@@ -67,7 +67,7 @@ export function MissingFeed({
           <View style={[a.flex_1]}>
             <Text
               emoji
-              style={[a.text_sm, a.font_bold, a.leading_snug, a.italic]}
+              style={[a.text_sm, a.font_semi_bold, a.leading_snug, a.italic]}
               numberOfLines={1}>
               {type === 'feed' ? (
                 <Trans>Feed unavailable</Trans>
@@ -128,7 +128,7 @@ function DialogInner({
       }
       style={web({maxWidth: 500})}>
       <View style={[a.gap_sm]}>
-        <Text style={[a.font_heavy, a.text_2xl]}>
+        <Text style={[a.font_bold, a.text_2xl]}>
           {type === 'feed' ? (
             <Trans>Could not connect to feed service</Trans>
           ) : (
@@ -147,7 +147,7 @@ function DialogInner({
           )}
         </Text>
         <Divider style={[a.my_md]} />
-        <Text style={[a.font_bold, t.atoms.text_contrast_high]}>
+        <Text style={[a.font_semi_bold, t.atoms.text_contrast_high]}>
           {type === 'feed' ? (
             <Trans>Feed creator</Trans>
           ) : (
@@ -184,7 +184,8 @@ function DialogInner({
         )}
         {type === 'feed' && (
           <>
-            <Text style={[a.font_bold, t.atoms.text_contrast_high, a.mt_md]}>
+            <Text
+              style={[a.font_semi_bold, t.atoms.text_contrast_high, a.mt_md]}>
               <Trans>Feed identifier</Trans>
             </Text>
             <Text style={[a.text_md, t.atoms.text_contrast_high, a.italic]}>
@@ -194,7 +195,8 @@ function DialogInner({
         )}
         {error instanceof Error && (
           <>
-            <Text style={[a.font_bold, t.atoms.text_contrast_high, a.mt_md]}>
+            <Text
+              style={[a.font_semi_bold, t.atoms.text_contrast_high, a.mt_md]}>
               <Trans>Error message</Trans>
             </Text>
             <Text style={[a.text_md, t.atoms.text_contrast_high, a.italic]}>

src/view/com/notifications/NotificationFeedItem.tsx

@@ -214,7 +214,7 @@ let NotificationFeedItem = ({
     <ProfileHoverCard did={firstAuthor.profile.did} inline>
       <InlineLinkText
         key={firstAuthor.href}
-        style={[t.atoms.text, a.font_bold, a.text_md, a.leading_tight]}
+        style={[t.atoms.text, a.font_semi_bold, a.text_md, a.leading_tight]}
         to={firstAuthor.href}
         disableMismatchWarning
         emoji
@@ -271,7 +271,7 @@ let NotificationFeedItem = ({
     notificationContent = hasMultipleAuthors ? (
       <Trans>
         {firstAuthorLink} and{' '}
-        <Text style={[a.text_md, a.font_bold, a.leading_snug]}>
+        <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
           <Plural
             value={additionalAuthorsCount}
             one={`${formattedAuthorsCount} other`}
@@ -295,7 +295,7 @@ let NotificationFeedItem = ({
     notificationContent = hasMultipleAuthors ? (
       <Trans>
         {firstAuthorLink} and{' '}
-        <Text style={[a.text_md, a.font_bold, a.leading_snug]}>
+        <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
           <Plural
             value={additionalAuthorsCount}
             one={`${formattedAuthorsCount} other`}
@@ -352,7 +352,7 @@ let NotificationFeedItem = ({
       notificationContent = hasMultipleAuthors ? (
         <Trans>
           {firstAuthorLink} and{' '}
-          <Text style={[a.text_md, a.font_bold, a.leading_snug]}>
+          <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
             <Plural
               value={additionalAuthorsCount}
               one={`${formattedAuthorsCount} other`}
@@ -378,7 +378,7 @@ let NotificationFeedItem = ({
     notificationContent = hasMultipleAuthors ? (
       <Trans>
         {firstAuthorLink} and{' '}
-        <Text style={[a.text_md, a.font_bold, a.leading_snug]}>
+        <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
           <Plural
             value={additionalAuthorsCount}
             one={`${formattedAuthorsCount} other`}
@@ -402,7 +402,7 @@ let NotificationFeedItem = ({
     notificationContent = hasMultipleAuthors ? (
       <Trans>
         {firstAuthorLink} and{' '}
-        <Text style={[a.text_md, a.font_bold, a.leading_snug]}>
+        <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
           <Plural
             value={additionalAuthorsCount}
             one={`${formattedAuthorsCount} other`}
@@ -483,7 +483,7 @@ let NotificationFeedItem = ({
     notificationContent = hasMultipleAuthors ? (
       <Trans>
         {firstAuthorLink} and{' '}
-        <Text style={[a.text_md, a.font_bold, a.leading_snug]}>
+        <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
           <Plural
             value={additionalAuthorsCount}
             one={`${formattedAuthorsCount} other`}
@@ -507,7 +507,7 @@ let NotificationFeedItem = ({
     notificationContent = hasMultipleAuthors ? (
       <Trans>
         {firstAuthorLink} and{' '}
-        <Text style={[a.text_md, a.font_bold, a.leading_snug]}>
+        <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
           <Plural
             value={additionalAuthorsCount}
             one={`${formattedAuthorsCount} other`}
@@ -541,7 +541,7 @@ let NotificationFeedItem = ({
     notificationContent = hasMultipleAuthors ? (
       <Trans>
         New posts from {firstAuthorLink} and{' '}
-        <Text style={[a.text_md, a.font_bold, a.leading_snug]}>
+        <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
           <Plural
             value={additionalAuthorsCount}
             one={`${formattedAuthorsCount} other`}
@@ -846,7 +846,7 @@ function CondensedAuthorsList({
         {authors.length > MAX_AUTHORS ? (
           <Text
             style={[
-              a.font_bold,
+              a.font_semi_bold,
               {paddingLeft: 6},
               t.atoms.text_contrast_medium,
             ]}>
@@ -926,7 +926,7 @@ function ExpandedAuthorCard({author}: {author: Author}) {
             emoji
             style={[
               a.text_md,
-              a.font_bold,
+              a.font_semi_bold,
               a.leading_tight,
               {maxWidth: '70%'},
             ]}>

src/view/com/pager/TabBar.tsx

@@ -431,7 +431,7 @@ function TabBarItem({
           <Text
             emoji
             testID={testID ? `${testID}-${item}` : undefined}
-            style={[styles.itemText, t.atoms.text, a.text_md, a.font_bold]}
+            style={[styles.itemText, t.atoms.text, a.text_md, a.font_semi_bold]}
             onLayout={handleTextLayout}>
             {item}
           </Text>

src/view/com/pager/TabBar.web.tsx

@@ -121,7 +121,7 @@ export function TabBar({
                     styles.itemText,
                     selected ? t.atoms.text : t.atoms.text_contrast_medium,
                     a.text_md,
-                    a.font_bold,
+                    a.font_semi_bold,
                     {lineHeight: 20},
                   ]}>
                   {item}

src/view/com/posts/FeedShutdownMsg.tsx

@@ -92,7 +92,7 @@ export function FeedShutdownMsg({feedUri}: {feedUri: string}) {
         t.atoms.border_contrast_low,
         a.border_t,
       ]}>
-      <Text style={[a.text_5xl, a.font_bold, t.atoms.text, a.text_center]}>
+      <Text style={[a.text_5xl, a.font_semi_bold, t.atoms.text, a.text_center]}>
         :(
       </Text>
       <Text style={[a.text_md, a.leading_snug, t.atoms.text, a.text_center]}>

src/view/com/util/PostMeta.tsx

@@ -92,7 +92,7 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
               onPress={onBeforePressAuthor}
               style={[
                 a.text_md,
-                a.font_bold,
+                a.font_semi_bold,
                 t.atoms.text,
                 a.leading_tight,
                 a.flex_shrink_0,

src/view/com/util/error/ErrorScreen.tsx

@@ -62,7 +62,7 @@ export function ErrorScreen({
             />
           </View>
         </View>
-        <Text style={[a.text_center, a.font_heavy, a.text_2xl, a.mb_md]}>
+        <Text style={[a.text_center, a.font_bold, a.text_2xl, a.mb_md]}>
           {title}
         </Text>
         <Text style={[a.text_center, a.text_md, a.mb_xl]}>{message}</Text>

src/view/com/util/images/AutoSizedImage.tsx

@@ -185,8 +185,7 @@ export function AutoSizedImage({
                   },
                 ],
               ]}>
-              <Text
-                style={[a.font_heavy, largeAlt ? a.text_xs : {fontSize: 8}]}>
+              <Text style={[a.font_bold, largeAlt ? a.text_xs : {fontSize: 8}]}>
                 ALT
               </Text>
             </View>

src/view/com/util/images/Gallery.tsx

@@ -109,7 +109,7 @@ export function GalleryItem({
             ],
           ]}>
           <Text
-            style={[a.font_heavy, largeAltBadge ? a.text_xs : {fontSize: 8}]}>
+            style={[a.font_bold, largeAltBadge ? a.text_xs : {fontSize: 8}]}>
             ALT
           </Text>
         </View>

src/view/screens/DebugMod.tsx

@@ -275,7 +275,7 @@ export const DebugModScreen = ({}: NativeStackScreenProps<
       <moderationOptsOverrideContext.Provider value={modOpts}>
         <ScrollView>
           <CenteredView style={[t.atoms.bg, a.px_lg, a.py_lg]}>
-            <H1 style={[a.text_5xl, a.font_bold, a.pb_lg]}>
+            <H1 style={[a.text_5xl, a.font_semi_bold, a.pb_lg]}>
               Moderation states
             </H1>
 
@@ -396,7 +396,7 @@ export const DebugModScreen = ({}: NativeStackScreenProps<
                       <View style={[a.mt_md]}>
                         <Text
                           style={[
-                            a.font_bold,
+                            a.font_semi_bold,
                             a.text_xs,
                             t.atoms.text,
                             a.pb_sm,
@@ -438,7 +438,7 @@ export const DebugModScreen = ({}: NativeStackScreenProps<
                   <View>
                     <Text
                       style={[
-                        a.font_bold,
+                        a.font_semi_bold,
                         a.text_xs,
                         t.atoms.text,
                         a.pl_md,
@@ -596,7 +596,7 @@ export const DebugModScreen = ({}: NativeStackScreenProps<
 function Heading({title, subtitle}: {title: string; subtitle?: string}) {
   const t = useTheme()
   return (
-    <H3 style={[a.text_3xl, a.font_bold, a.pb_md]}>
+    <H3 style={[a.text_3xl, a.font_semi_bold, a.pb_md]}>
       {title}{' '}
       {!!subtitle && (
         <H3 style={[t.atoms.text_contrast_medium, a.text_lg]}>{subtitle}</H3>
@@ -627,7 +627,8 @@ function CustomLabelForm({
         a.mt_md,
       ]}>
       <View>
-        <Text style={[a.font_bold, a.text_xs, t.atoms.text, a.pl_md, a.pb_xs]}>
+        <Text
+          style={[a.font_semi_bold, a.text_xs, t.atoms.text, a.pl_md, a.pb_xs]}>
           Blurs
         </Text>
         <View
@@ -662,7 +663,8 @@ function CustomLabelForm({
         </View>
       </View>
       <View>
-        <Text style={[a.font_bold, a.text_xs, t.atoms.text, a.pl_md, a.pb_xs]}>
+        <Text
+          style={[a.font_semi_bold, a.text_xs, t.atoms.text, a.pl_md, a.pb_xs]}>
           Severity
         </Text>
         <View
@@ -789,7 +791,7 @@ function ModerationUIView({
           const ui = mod.ui(key as keyof ModerationBehavior)
           return (
             <View key={key} style={[a.flex_row, a.gap_md]}>
-              <Text style={[a.font_bold, {width: 100}]}>{key}</Text>
+              <Text style={[a.font_semi_bold, {width: 100}]}>{key}</Text>
               <Flag v={ui.filter} label="Filter" />
               <Flag v={ui.blur} label="Blur" />
               <Flag v={ui.alert} label="Alert" />

src/view/screens/Feeds.tsx

@@ -700,7 +700,7 @@ function FeedsSavedHeader() {
       }>
       <IconCircle icon={ListSparkle_Stroke2_Corner0_Rounded} size="lg" />
       <View style={[a.flex_1, a.gap_xs]}>
-        <Text style={[a.flex_1, a.text_2xl, a.font_heavy, t.atoms.text]}>
+        <Text style={[a.flex_1, a.text_2xl, a.font_bold, t.atoms.text]}>
           <Trans>My Feeds</Trans>
         </Text>
         <Text style={[t.atoms.text_contrast_high]}>
@@ -726,7 +726,7 @@ function FeedsAboutHeader() {
         size="lg"
       />
       <View style={[a.flex_1, a.gap_sm]}>
-        <Text style={[a.flex_1, a.text_2xl, a.font_heavy, t.atoms.text]}>
+        <Text style={[a.flex_1, a.text_2xl, a.font_bold, t.atoms.text]}>
           <Trans>Discover New Feeds</Trans>
         </Text>
         <Text style={[t.atoms.text_contrast_high]}>

src/view/screens/Storybook/Buttons.tsx

@@ -16,7 +16,7 @@ import {Text} from '#/components/Typography'
 export function Buttons() {
   return (
     <View style={[a.gap_md]}>
-      <Text style={[a.font_heavy, a.text_5xl]}>Buttons</Text>
+      <Text style={[a.font_bold, a.text_5xl]}>Buttons</Text>
 
       {[
         'primary',
@@ -29,7 +29,7 @@ export function Buttons() {
         <Fragment key={color}>
           {['tiny', 'small', 'large'].map(size => (
             <Fragment key={size}>
-              <Text style={[a.font_heavy, a.text_2xl]}>
+              <Text style={[a.font_bold, a.text_2xl]}>
                 color={color} size={size}
               </Text>
               <View style={[a.flex_row, a.align_start, a.gap_md]}>

src/view/screens/Storybook/Settings.tsx

@@ -106,7 +106,7 @@ export function Settings() {
           color={t.palette.primary_500}
         />
         <SettingsList.ItemText
-          style={[{color: t.palette.primary_500}, a.font_bold]}>
+          style={[{color: t.palette.primary_500}, a.font_semi_bold]}>
           Protect your account
         </SettingsList.ItemText>
         <SettingsList.Chevron color={t.palette.primary_500} />

src/view/screens/Storybook/Theming.tsx

@@ -11,20 +11,20 @@ export function Theming() {
     <View style={[t.atoms.bg, a.gap_lg, a.p_xl]}>
       <Palette />
 
-      <Text style={[a.font_bold, a.pt_xl, a.px_md]}>theme.atoms.text</Text>
+      <Text style={[a.font_semi_bold, a.pt_xl, a.px_md]}>theme.atoms.text</Text>
 
       <View style={[a.flex_1, t.atoms.border_contrast_high, a.border_t]} />
-      <Text style={[a.font_bold, t.atoms.text_contrast_high, a.px_md]}>
+      <Text style={[a.font_semi_bold, t.atoms.text_contrast_high, a.px_md]}>
         theme.atoms.text_contrast_high
       </Text>
 
       <View style={[a.flex_1, t.atoms.border_contrast_medium, a.border_t]} />
-      <Text style={[a.font_bold, t.atoms.text_contrast_medium, a.px_md]}>
+      <Text style={[a.font_semi_bold, t.atoms.text_contrast_medium, a.px_md]}>
         theme.atoms.text_contrast_medium
       </Text>
 
       <View style={[a.flex_1, t.atoms.border_contrast_low, a.border_t]} />
-      <Text style={[a.font_bold, t.atoms.text_contrast_low, a.px_md]}>
+      <Text style={[a.font_semi_bold, t.atoms.text_contrast_low, a.px_md]}>
         theme.atoms.text_contrast_low
       </Text>
 

src/view/screens/Storybook/Typography.tsx

@@ -26,12 +26,12 @@ export function Typography() {
       <Text style={[a.text_xl, a.font_medium, a.italic]}>
         This is medium italic text
       </Text>
-      <Text style={[a.text_xl, a.font_bold]}>This is bold text</Text>
-      <Text style={[a.text_xl, a.font_bold, a.italic]}>
+      <Text style={[a.text_xl, a.font_semi_bold]}>This is bold text</Text>
+      <Text style={[a.text_xl, a.font_semi_bold, a.italic]}>
         This is bold italic text
       </Text>
-      <Text style={[a.text_xl, a.font_heavy]}>This is heavy text</Text>
-      <Text style={[a.text_xl, a.font_heavy, a.italic]}>
+      <Text style={[a.text_xl, a.font_bold]}>This is heavy text</Text>
+      <Text style={[a.text_xl, a.font_bold, a.italic]}>
         This is heavy italic text
       </Text>
 

src/view/shell/Drawer.tsx

@@ -90,7 +90,7 @@ let DrawerProfileCard = ({
         <View style={[a.flex_row, a.align_center, a.gap_xs, a.flex_1]}>
           <Text
             emoji
-            style={[a.font_heavy, a.text_xl, a.mt_2xs, a.leading_tight]}
+            style={[a.font_bold, a.text_xl, a.mt_2xs, a.leading_tight]}
             numberOfLines={1}>
             {profile?.displayName || account.handle}
           </Text>
@@ -115,7 +115,7 @@ let DrawerProfileCard = ({
       </View>
       <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
         <Trans>
-          <Text style={[a.text_md, a.font_bold]}>
+          <Text style={[a.text_md, a.font_semi_bold]}>
             {formatCount(i18n, profile?.followersCount ?? 0)}
           </Text>{' '}
           <Plural
@@ -126,7 +126,7 @@ let DrawerProfileCard = ({
         </Trans>{' '}
         &middot;{' '}
         <Trans>
-          <Text style={[a.text_md, a.font_bold]}>
+          <Text style={[a.text_md, a.font_semi_bold]}>
             {formatCount(i18n, profile?.followsCount ?? 0)}
           </Text>{' '}
           <Plural
@@ -656,7 +656,7 @@ function MenuItem({icon, label, count, bold, onPress}: MenuItemProps) {
                     style={[
                       a.text_xs,
                       a.leading_tight,
-                      a.font_bold,
+                      a.font_semi_bold,
                       {
                         fontVariant: ['tabular-nums'],
                         color: colors.white,
@@ -673,7 +673,7 @@ function MenuItem({icon, label, count, bold, onPress}: MenuItemProps) {
             style={[
               a.flex_1,
               a.text_2xl,
-              bold && a.font_heavy,
+              bold && a.font_bold,
               web(a.leading_snug),
             ]}
             numberOfLines={1}>

src/view/shell/NavSignupCard.tsx

@@ -36,7 +36,7 @@ let NavSignupCard = ({}: {}): React.ReactNode => {
 
       <View style={[a.pt_lg]}>
         <Text
-          style={[a.text_3xl, a.font_heavy, {lineHeight: a.text_3xl.fontSize}]}>
+          style={[a.text_3xl, a.font_bold, {lineHeight: a.text_3xl.fontSize}]}>
           <Trans>Join the conversation</Trans>
         </Text>
       </View>

src/view/shell/desktop/Feeds.tsx

@@ -90,7 +90,7 @@ export function DesktopFeeds() {
               a.text_md,
               a.leading_snug,
               current
-                ? [a.font_bold, t.atoms.text]
+                ? [a.font_semi_bold, t.atoms.text]
                 : [t.atoms.text_contrast_medium],
               web({
                 marginHorizontal: 2,

src/view/shell/desktop/LeftNav.tsx

@@ -161,7 +161,7 @@ function ProfileCard() {
                           },
                         ]}>
                         <Text
-                          style={[a.font_heavy, a.text_sm, a.leading_snug]}
+                          style={[a.font_bold, a.text_sm, a.leading_snug]}
                           numberOfLines={1}>
                           {sanitizeDisplayName(
                             profile.displayName || profile.handle,
@@ -462,7 +462,7 @@ function NavItem({count, hasNew, href, icon, iconFilled, label}: NavItemProps) {
               style={[
                 a.absolute,
                 a.text_xs,
-                a.font_bold,
+                a.font_semi_bold,
                 a.rounded_full,
                 a.text_center,
                 a.leading_tight,
@@ -509,7 +509,7 @@ function NavItem({count, hasNew, href, icon, iconFilled, label}: NavItemProps) {
         ) : null}
       </View>
       {!leftNavMinimal && (
-        <Text style={[a.text_xl, isCurrent ? a.font_heavy : a.font_normal]}>
+        <Text style={[a.text_xl, isCurrent ? a.font_bold : a.font_normal]}>
           {label}
         </Text>
       )}

src/view/shell/desktop/SidebarTrendingTopics.tsx

@@ -53,7 +53,7 @@ function Inner() {
             style={[
               a.flex_1,
               a.text_sm,
-              a.font_bold,
+              a.font_semi_bold,
               t.atoms.text_contrast_medium,
             ]}>
             <Trans>Trending</Trans>