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/Profile/ErrorState.tsx

@@ -27,7 +27,7 @@ export function ErrorState({error}: {error: string}) {
     <View style={[a.px_xl]}>
       <CircleInfo width={48} style={[t.atoms.text_contrast_low]} />
 
-      <Text style={[a.text_xl, a.font_bold, a.pb_md, a.pt_xl]}>
+      <Text style={[a.text_xl, a.font_semi_bold, a.pb_md, a.pt_xl]}>
         <Trans>Hmmmm, we couldn't load that moderation service.</Trans>
       </Text>
       <Text

src/screens/Profile/Header/DisplayName.tsx

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

src/screens/Profile/Header/EditProfileDialog.tsx

@@ -326,7 +326,7 @@ function DialogInner({
               style={[
                 a.text_sm,
                 a.mt_xs,
-                a.font_bold,
+                a.font_semi_bold,
                 {color: t.palette.negative_400},
               ]}>
               <Plural
@@ -377,7 +377,7 @@ function DialogInner({
               style={[
                 a.text_sm,
                 a.mt_xs,
-                a.font_bold,
+                a.font_semi_bold,
                 {color: t.palette.negative_400},
               ]}>
               <Plural

src/screens/Profile/Header/Metrics.tsx

@@ -37,7 +37,7 @@ export function ProfileHeaderMetrics({
         style={[a.flex_row, t.atoms.text]}
         to={makeProfileLink(profile, 'followers')}
         label={`${profile.followersCount || 0} ${pluralizedFollowers}`}>
-        <Text style={[a.font_bold, a.text_md]}>{followers} </Text>
+        <Text style={[a.font_semi_bold, a.text_md]}>{followers} </Text>
         <Text style={[t.atoms.text_contrast_medium, a.text_md]}>
           {pluralizedFollowers}
         </Text>
@@ -47,12 +47,12 @@ export function ProfileHeaderMetrics({
         style={[a.flex_row, t.atoms.text]}
         to={makeProfileLink(profile, 'follows')}
         label={_(msg`${profile.followsCount || 0} following`)}>
-        <Text style={[a.font_bold, a.text_md]}>{following} </Text>
+        <Text style={[a.font_semi_bold, a.text_md]}>{following} </Text>
         <Text style={[t.atoms.text_contrast_medium, a.text_md]}>
           {pluralizedFollowings}
         </Text>
       </InlineLinkText>
-      <Text style={[a.font_bold, t.atoms.text, a.text_md]}>
+      <Text style={[a.font_semi_bold, t.atoms.text, a.text_md]}>
         {formatCount(i18n, profile.postsCount || 0)}{' '}
         <Text style={[t.atoms.text_contrast_medium, a.font_normal, a.text_md]}>
           {plural(profile.postsCount || 0, {one: 'post', other: 'posts'})}

src/screens/Profile/Header/ProfileHeaderLabeler.tsx

@@ -225,7 +225,7 @@ let ProfileHeaderLabeler = ({
                             ? t.palette.contrast_700
                             : t.palette.white,
                         },
-                        a.font_bold,
+                        a.font_semi_bold,
                         a.text_center,
                         a.leading_tight,
                       ]}>
@@ -297,7 +297,7 @@ let ProfileHeaderLabeler = ({
                     {({hovered, focused, pressed}) => (
                       <Text
                         style={[
-                          a.font_bold,
+                          a.font_semi_bold,
                           a.text_sm,
                           t.atoms.text_contrast_medium,
                           (hovered || focused || pressed) &&

src/screens/Profile/Header/ProfileHeaderStandard.tsx

@@ -267,7 +267,7 @@ let ProfileHeaderStandard = ({
                   t.atoms.text,
                   gtMobile ? a.text_4xl : a.text_3xl,
                   a.self_start,
-                  a.font_heavy,
+                  a.font_bold,
                   a.leading_tight,
                 ]}>
                 {sanitizeDisplayName(

src/screens/Profile/components/ProfileFeedHeader.tsx

@@ -234,7 +234,7 @@ export function ProfileFeedHeader({info}: {info: FeedSourceFeedInfo}) {
                       <Text
                         style={[
                           a.text_md,
-                          a.font_heavy,
+                          a.font_bold,
                           a.leading_tight,
                           gtMobile && a.text_lg,
                         ]}
@@ -441,7 +441,7 @@ function DialogInner({
 
         <View style={[a.flex_1, a.gap_2xs]}>
           <Text
-            style={[a.text_2xl, a.font_heavy, a.leading_tight]}
+            style={[a.text_2xl, a.font_bold, a.leading_tight]}
             numberOfLines={2}>
             {info.displayName}
           </Text>