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/Search/Explore.tsx

@@ -885,7 +885,7 @@ export function Explore({
                 ]}>
                 <CircleInfo size="md" fill={t.palette.negative_400} />
                 <View style={[a.flex_1, a.gap_sm]}>
-                  <Text style={[a.font_bold, a.leading_snug]}>
+                  <Text style={[a.font_semi_bold, a.leading_snug]}>
                     {item.message}
                   </Text>
                   <Text

src/screens/Search/Shell.tsx

@@ -460,7 +460,7 @@ let SearchScreenInner = ({
               a.pt_sm,
               a.pb_lg,
             ]}>
-            <Text style={[a.text_2xl, a.font_heavy]}>
+            <Text style={[a.text_2xl, a.font_bold]}>
               <Trans>Search</Trans>
             </Text>
           </View>

src/screens/Search/components/ModuleHeader.tsx

@@ -93,7 +93,11 @@ export function Icon({
 
 export function TitleText({style, ...props}: TextProps) {
   return (
-    <Text style={[a.font_bold, a.flex_1, a.text_xl, style]} emoji {...props} />
+    <Text
+      style={[a.font_semi_bold, a.flex_1, a.text_xl, style]}
+      emoji
+      {...props}
+    />
   )
 }
 

src/screens/Search/components/SearchHistory.tsx

@@ -45,7 +45,7 @@ export function SearchHistory({
       <View style={[a.w_full, a.gap_md]}>
         {(searchHistory.length > 0 || selectedProfiles.length > 0) && (
           <View style={[a.px_lg, a.pt_sm]}>
-            <Text style={[a.text_md, a.font_bold]}>
+            <Text style={[a.text_md, a.font_semi_bold]}>
               <Trans>Recent Searches</Trans>
             </Text>
           </View>

src/screens/Search/components/StarterPackCard.tsx

@@ -89,7 +89,7 @@ export function StarterPackCard({
               <View style={[a.flex_1]}>
                 <Text
                   emoji
-                  style={[a.text_md, a.font_bold, a.leading_snug]}
+                  style={[a.text_md, a.font_semi_bold, a.leading_snug]}
                   numberOfLines={1}>
                   {record.name}
                 </Text>
@@ -242,7 +242,7 @@ export function AvatarStack({
                 <Text
                   style={[
                     gtPhone ? a.text_md : a.text_xs,
-                    a.font_bold,
+                    a.font_semi_bold,
                     a.leading_snug,
                     {color: 'white'},
                   ]}>

src/screens/Search/modules/ExploreInterestsCard.tsx

@@ -63,7 +63,7 @@ export function ExploreInterestsCard() {
           ]}>
           <View style={[a.flex_row, a.gap_sm, a.align_center]}>
             <Shapes />
-            <Text style={[a.text_xl, a.font_bold, a.leading_tight]}>
+            <Text style={[a.text_xl, a.font_semi_bold, a.leading_tight]}>
               <Trans>Your interests</Trans>
             </Text>
           </View>

src/screens/Search/modules/ExploreRecommendations.tsx

@@ -50,7 +50,7 @@ function Inner() {
               fill={t.palette.primary_500}
               style={{marginLeft: -2}}
             />
-            <Text style={[a.text_2xl, a.font_heavy, t.atoms.text]}>
+            <Text style={[a.text_2xl, a.font_bold, t.atoms.text]}>
               <Trans>Recommended</Trans>
             </Text>
           </View>

src/screens/Search/modules/ExploreTrendingTopics.tsx

@@ -104,7 +104,7 @@ export function TrendRow({
                 <Text
                   style={[
                     a.text_md,
-                    a.font_bold,
+                    a.font_semi_bold,
                     a.leading_tight,
                     {width: 20},
                   ]}>
@@ -113,7 +113,7 @@ export function TrendRow({
                   </Trans>
                 </Text>
                 <Text
-                  style={[a.text_md, a.font_bold, a.leading_tight]}
+                  style={[a.text_md, a.font_semi_bold, a.leading_tight]}
                   numberOfLines={1}>
                   {trend.displayName}
                 </Text>