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/components/StarterPack/ProfileStarterPacks.tsx

@@ -255,7 +255,7 @@ function Empty() {
         {marginTop: a.border.borderWidth},
       ]}>
       <View style={[a.gap_xs]}>
-        <Text style={[a.font_bold, a.text_lg, {color: 'white'}]}>
+        <Text style={[a.font_semi_bold, a.text_lg, {color: 'white'}]}>
           <Trans>You haven't created a starter pack yet!</Trans>
         </Text>
         <Text style={[a.text_md, {color: 'white'}]}>

src/components/StarterPack/QrCode.tsx

@@ -54,14 +54,19 @@ export function QrCode({
         ]}>
         <View style={[a.gap_sm]}>
           <Text
-            style={[a.font_bold, a.text_3xl, a.text_center, {color: 'white'}]}>
+            style={[
+              a.font_semi_bold,
+              a.text_3xl,
+              a.text_center,
+              {color: 'white'},
+            ]}>
             {record.name}
           </Text>
         </View>
         <View style={[a.gap_xl, a.align_center]}>
           <Text
             style={[
-              a.font_bold,
+              a.font_semi_bold,
               a.text_center,
               {color: 'white', fontSize: 18},
             ]}>
@@ -76,7 +81,7 @@ export function QrCode({
               a.flex,
               a.flex_row,
               a.align_center,
-              a.font_bold,
+              a.font_semi_bold,
               {color: 'white', fontSize: 18, gap: 6},
             ]}>
             <Trans>

src/components/StarterPack/ShareDialog.tsx

@@ -77,7 +77,7 @@ function ShareDialogInner({
         ) : (
           <View style={[!gtMobile && a.gap_lg]}>
             <View style={[a.gap_sm, gtMobile && a.pb_lg]}>
-              <Text style={[a.font_bold, a.text_2xl]}>
+              <Text style={[a.font_semi_bold, a.text_2xl]}>
                 <Trans>Invite people to this starter pack!</Trans>
               </Text>
               <Text style={[a.text_md, t.atoms.text_contrast_medium]}>

src/components/StarterPack/StarterPackCard.tsx

@@ -77,7 +77,7 @@ export function Card({
         <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={2}>
             {record.name}
           </Text>
@@ -97,7 +97,7 @@ export function Card({
         </Text>
       ) : null}
       {!!joinedAllTimeCount && joinedAllTimeCount >= 50 && (
-        <Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
+        <Text style={[a.font_semi_bold, t.atoms.text_contrast_medium]}>
           <Trans comment="Number of users (always at least 50) who have joined Bluesky using a specific starter pack">
             <Plural value={joinedAllTimeCount} other="# users have" /> joined!
           </Trans>

src/components/StarterPack/Wizard/WizardEditListDialog.tsx

@@ -105,7 +105,7 @@ export function WizardEditListDialog({
                 : [a.pb_sm, a.align_end],
             ]}>
             <View style={{width: 60}} />
-            <Text style={[a.font_bold, a.text_xl]}>
+            <Text style={[a.font_semi_bold, a.text_xl]}>
               {state.currentStep === 'Profiles' ? (
                 <Trans>Edit People</Trans>
               ) : (

src/components/StarterPack/Wizard/WizardListCard.tsx

@@ -83,7 +83,7 @@ function WizardListCard({
           emoji
           style={[
             a.flex_1,
-            a.font_bold,
+            a.font_semi_bold,
             a.text_md,
             a.leading_tight,
             a.self_start,