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/screens/PostThread/components/ThreadError.tsx

@@ -58,7 +58,12 @@ export function ThreadError({
           ]}>
           <View style={[a.gap_xs]}>
             <Text
-              style={[a.text_center, a.text_lg, a.font_bold, a.leading_snug]}>
+              style={[
+                a.text_center,
+                a.text_lg,
+                a.font_semi_bold,
+                a.leading_snug,
+              ]}>
               {title}
             </Text>
             <Text

src/screens/PostThread/components/ThreadItemAnchor.tsx

@@ -129,7 +129,8 @@ function ThreadItemAnchorDeleted({isRoot}: {isRoot: boolean}) {
             ]}>
             <TrashIcon style={[t.atoms.text_contrast_medium]} />
           </View>
-          <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
+          <Text
+            style={[a.text_md, a.font_semi_bold, t.atoms.text_contrast_medium]}>
             <Trans>Post has been deleted</Trans>
           </Text>
         </View>
@@ -343,7 +344,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
                     style={[
                       a.flex_shrink,
                       a.text_lg,
-                      a.font_bold,
+                      a.font_semi_bold,
                       a.leading_snug,
                     ]}
                     numberOfLines={1}>
@@ -439,7 +440,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
                   <Text
                     testID="repostCount-expanded"
                     style={[a.text_md, t.atoms.text_contrast_medium]}>
-                    <Text style={[a.text_md, a.font_bold, t.atoms.text]}>
+                    <Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
                       {formatPostStatCount(post.repostCount)}
                     </Text>{' '}
                     <Plural
@@ -457,7 +458,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
                   <Text
                     testID="quoteCount-expanded"
                     style={[a.text_md, t.atoms.text_contrast_medium]}>
-                    <Text style={[a.text_md, a.font_bold, t.atoms.text]}>
+                    <Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
                       {formatPostStatCount(post.quoteCount)}
                     </Text>{' '}
                     <Plural
@@ -473,7 +474,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
                   <Text
                     testID="likeCount-expanded"
                     style={[a.text_md, t.atoms.text_contrast_medium]}>
-                    <Text style={[a.text_md, a.font_bold, t.atoms.text]}>
+                    <Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
                       {formatPostStatCount(post.likeCount)}
                     </Text>{' '}
                     <Plural value={post.likeCount} one="like" other="likes" />
@@ -484,7 +485,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
                 <Text
                   testID="bookmarkCount-expanded"
                   style={[a.text_md, t.atoms.text_contrast_medium]}>
-                  <Text style={[a.text_md, a.font_bold, t.atoms.text]}>
+                  <Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
                     {formatPostStatCount(post.bookmarkCount)}
                   </Text>{' '}
                   <Plural value={post.bookmarkCount} one="save" other="saves" />
@@ -652,7 +653,7 @@ function BackdatedPostIndicator({post}: {post: AppBskyFeedDefs.PostView}) {
             <Text
               style={[
                 a.text_xs,
-                a.font_bold,
+                a.font_semi_bold,
                 a.leading_tight,
                 t.atoms.text_contrast_medium,
               ]}>
@@ -669,9 +670,14 @@ function BackdatedPostIndicator({post}: {post: AppBskyFeedDefs.PostView}) {
         <Prompt.DescriptionText>
           <Trans>
             This post claims to have been created on{' '}
-            <RNText style={[a.font_bold]}>{niceDate(i18n, createdAt)}</RNText>,
-            but was first seen by Bluesky on{' '}
-            <RNText style={[a.font_bold]}>{niceDate(i18n, indexedAt)}</RNText>.
+            <RNText style={[a.font_semi_bold]}>
+              {niceDate(i18n, createdAt)}
+            </RNText>
+            , but was first seen by Bluesky on{' '}
+            <RNText style={[a.font_semi_bold]}>
+              {niceDate(i18n, indexedAt)}
+            </RNText>
+            .
           </Trans>
         </Prompt.DescriptionText>
         <Text

src/screens/PostThread/components/ThreadItemPost.tsx

@@ -106,7 +106,8 @@ function ThreadItemPostDeleted({
           ]}>
           <TrashIcon style={[t.atoms.text_contrast_medium]} />
         </View>
-        <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
+        <Text
+          style={[a.text_md, a.font_semi_bold, t.atoms.text_contrast_medium]}>
           <Trans>Post has been deleted</Trans>
         </Text>
       </View>

src/screens/PostThread/components/ThreadItemPostTombstone.tsx

@@ -46,7 +46,8 @@ export function ThreadItemPostTombstone({type}: ThreadItemPostTombstoneProps) {
         <View style={[a.flex_row, a.justify_center, {width: LINEAR_AVI_WIDTH}]}>
           <Icon style={[t.atoms.text_contrast_medium]} />
         </View>
-        <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
+        <Text
+          style={[a.text_md, a.font_semi_bold, t.atoms.text_contrast_medium]}>
           {copy}
         </Text>
       </View>