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/ageAssurance/AgeAssuranceAdmonition.tsx

@@ -82,13 +82,13 @@ function Inner({
           </View>
           <View style={[a.flex_1, a.gap_xs, a.pr_4xl]}>
             <Text style={[a.text_sm, a.leading_snug]}>{children}</Text>
-            <Text style={[a.text_sm, a.leading_snug, a.font_bold]}>
+            <Text style={[a.text_sm, a.leading_snug, a.font_semi_bold]}>
               <Trans>
                 Learn more in your{' '}
                 <InlineLinkText
                   label={_(msg`Go to account settings`)}
                   to={'/settings/account'}
-                  style={[a.text_sm, a.leading_snug, a.font_bold]}
+                  style={[a.text_sm, a.leading_snug, a.font_semi_bold]}
                   onPress={() => {
                     logger.metric('ageAssurance:navigateToSettings', {})
                   }}>

src/components/ageAssurance/AgeAssuranceAppealDialog.tsx

@@ -89,7 +89,7 @@ function Inner({control}: {control: Dialog.DialogControlProps}) {
         <AgeAssuranceBadge />
       </View>
 
-      <Text style={[a.text_2xl, a.font_heavy, a.pt_md, a.leading_tight]}>
+      <Text style={[a.text_2xl, a.font_bold, a.pt_md, a.leading_tight]}>
         <Trans>Contact us</Trans>
       </Text>
 

src/components/ageAssurance/AgeAssuranceBadge.tsx

@@ -29,7 +29,7 @@ export function AgeAssuranceBadge() {
       <Shield size="sm" />
       <Text
         style={[
-          a.font_bold,
+          a.font_semi_bold,
           a.leading_snug,
           {
             color: select(t.name, {

src/components/ageAssurance/AgeAssuranceInitDialog.tsx

@@ -178,7 +178,7 @@ function Inner() {
       <View style={[a.align_start]}>
         <AgeAssuranceBadge />
 
-        <Text style={[a.text_xl, a.font_heavy, a.pt_xl, a.pb_md]}>
+        <Text style={[a.text_xl, a.font_bold, a.pt_xl, a.pb_md]}>
           {success ? <Trans>Success!</Trans> : <Trans>Verify your age</Trans>}
         </Text>
 

src/components/ageAssurance/AgeAssuranceRedirectDialog.tsx

@@ -160,7 +160,7 @@ export function Inner({}: {optimisticState?: AgeAssuranceRedirectDialogState}) {
               a.pb_md,
             ]}>
             <SuccessIcon size="sm" fill={t.palette.positive_600} />
-            <Text style={[a.text_xl, a.font_heavy]}>
+            <Text style={[a.text_xl, a.font_bold]}>
               <Trans>Success</Trans>
             </Text>
           </View>
@@ -209,7 +209,7 @@ export function Inner({}: {optimisticState?: AgeAssuranceRedirectDialogState}) {
           ]}>
           {error && <ErrorIcon size="md" fill={t.palette.negative_500} />}
 
-          <Text style={[a.text_xl, a.font_heavy]}>
+          <Text style={[a.text_xl, a.font_bold]}>
             {error ? <Trans>Connection issue</Trans> : <Trans>Verifying</Trans>}
           </Text>
 

src/components/ageAssurance/AgeRestrictedScreen.tsx

@@ -62,7 +62,7 @@ export function AgeRestrictedScreen({
           </View>
 
           <View style={[a.gap_sm, a.pb_lg]}>
-            <Text style={[a.text_xl, a.leading_snug, a.font_heavy]}>
+            <Text style={[a.text_xl, a.leading_snug, a.font_bold]}>
               <Trans>
                 You must complete age assurance in order to access this screen.
               </Trans>