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/Onboarding/Layout.tsx

@@ -17,7 +17,6 @@ import {
   useTheme,
   web,
 } from '#/alf'
-import {leading} from '#/alf/typography'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow'
 import {HEADER_SLOT_SIZE} from '#/components/Layout'
@@ -234,10 +233,8 @@ export function TitleText({
       style={[
         a.pb_sm,
         a.text_4xl,
-        a.font_bold,
-        {
-          lineHeight: leading(a.text_4xl, a.leading_tight),
-        },
+        a.font_semi_bold,
+        a.leading_tight,
         flatten(style),
       ]}>
       {children}

src/screens/Onboarding/StepFinished.tsx

@@ -432,7 +432,7 @@ function ValueProposition({
             </View>
 
             <View style={[a.gap_sm]}>
-              <Text style={[a.font_heavy, a.text_3xl, a.text_center]}>
+              <Text style={[a.font_bold, a.text_3xl, a.text_center]}>
                 {title}
               </Text>
               <Text
@@ -537,7 +537,7 @@ function LegacyFinalStep({
         <View style={[a.flex_row, a.align_center, a.w_full, a.gap_lg]}>
           <IconCircle icon={Growth} size="lg" style={{width: 48, height: 48}} />
           <View style={[a.flex_1, a.gap_xs]}>
-            <Text style={[a.font_bold, a.text_lg]}>
+            <Text style={[a.font_semi_bold, a.text_lg]}>
               <Trans>Public</Trans>
             </Text>
             <Text
@@ -551,7 +551,7 @@ function LegacyFinalStep({
         <View style={[a.flex_row, a.align_center, a.w_full, a.gap_lg]}>
           <IconCircle icon={News} size="lg" style={{width: 48, height: 48}} />
           <View style={[a.flex_1, a.gap_xs]}>
-            <Text style={[a.font_bold, a.text_lg]}>
+            <Text style={[a.font_semi_bold, a.text_lg]}>
               <Trans>Open</Trans>
             </Text>
             <Text
@@ -567,7 +567,7 @@ function LegacyFinalStep({
             style={{width: 48, height: 48}}
           />
           <View style={[a.flex_1, a.gap_xs]}>
-            <Text style={[a.font_bold, a.text_lg]}>
+            <Text style={[a.font_semi_bold, a.text_lg]}>
               <Trans>Flexible</Trans>
             </Text>
             <Text

src/screens/Onboarding/StepInterests/InterestButton.tsx

@@ -69,7 +69,7 @@ export function InterestButton({interest}: {interest: string}) {
           {
             color: t.palette.contrast_900,
           },
-          a.font_bold,
+          a.font_semi_bold,
           native({paddingTop: 2}),
           ctx.selected ? styles.textSelected : {},
         ]}>

src/screens/Onboarding/StepInterests/index.tsx

@@ -184,7 +184,7 @@ export function StepInterests() {
               <Text
                 style={[
                   a.text_md,
-                  a.font_bold,
+                  a.font_semi_bold,
                   {
                     color: t.palette.negative_900,
                   },

src/screens/Onboarding/StepSuggestedAccounts/index.tsx

@@ -133,7 +133,7 @@ export function StepSuggestedAccounts() {
 
   return (
     <View style={[a.align_start]} testID="onboardingInterests">
-      <Text style={[a.font_heavy, a.text_3xl]}>
+      <Text style={[a.font_bold, a.text_3xl]}>
         <Trans comment="Accounts suggested to the user for them to follow">
           Suggested for you
         </Trans>