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/ReportDialog/SelectLabelerView.tsx

@@ -24,7 +24,7 @@ export function SelectLabelerView({
   return (
     <View style={[a.gap_lg]}>
       <View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
-        <Text style={[a.text_2xl, a.font_bold]}>
+        <Text style={[a.text_2xl, a.font_semi_bold]}>
           <Trans>Select moderator</Trans>
         </Text>
         <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
@@ -75,7 +75,8 @@ function LabelerButton({
             handle: labeler.creator.handle,
           })}
         />
-        <Text style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}>
+        <Text
+          style={[t.atoms.text_contrast_medium, a.text_sm, a.font_semi_bold]}>
           @{labeler.creator.handle}
         </Text>
       </LabelingServiceCard.Content>

src/components/ReportDialog/SelectReportOptionView.tsx

@@ -85,7 +85,7 @@ export function SelectReportOptionView(props: {
       ) : null}
 
       <View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
-        <Text style={[a.text_2xl, a.font_bold]}>{i18n.title}</Text>
+        <Text style={[a.text_2xl, a.font_semi_bold]}>{i18n.title}</Text>
         <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
           {i18n.description}
         </Text>
@@ -173,7 +173,8 @@ function ReportOptionButton({
         interacted && t.atoms.bg_contrast_50,
       ]}>
       <View style={[a.flex_1, a.gap_xs]}>
-        <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
+        <Text
+          style={[a.text_md, a.font_semi_bold, t.atoms.text_contrast_medium]}>
           {title}
         </Text>
         <Text style={[a.leading_tight, {maxWidth: 400}]}>{description}</Text>

src/components/ReportDialog/SubmitView.tsx

@@ -125,7 +125,7 @@ export function SubmitView({
           t.atoms.border_contrast_low,
         ]}>
         <View style={[a.flex_1, a.gap_xs]}>
-          <Text style={[a.text_md, a.font_bold]}>
+          <Text style={[a.text_md, a.font_semi_bold]}>
             {selectedReportOption.title}
           </Text>
           <Text style={[a.leading_tight, {maxWidth: 400}]}>