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

@@ -69,7 +69,7 @@ function Invalid() {
   const {_} = useLingui()
   return (
     <Dialog.ScrollableInner label={_(msg`Report dialog`)}>
-      <Text style={[a.font_heavy, a.text_xl, a.leading_snug, a.pb_xs]}>
+      <Text style={[a.font_bold, a.text_xl, a.leading_snug, a.pb_xs]}>
         <Trans>Invalid report subject</Trans>
       </Text>
       <Text style={[a.text_md, a.leading_snug]}>
@@ -393,7 +393,7 @@ function Inner(props: ReportDialogProps) {
                 <Text style={[a.leading_snug, a.pb_xs]}>
                   <Trans>
                     Your report will be sent to{' '}
-                    <Text style={[a.font_bold, a.leading_snug]}>
+                    <Text style={[a.font_semi_bold, a.leading_snug]}>
                       {state.selectedLabeler?.creator.displayName}
                     </Text>
                     .
@@ -529,7 +529,7 @@ function StepTitle({
         ) : (
           <Text
             style={[
-              a.font_heavy,
+              a.font_bold,
               a.text_center,
               t.atoms.text,
               {
@@ -552,7 +552,7 @@ function StepTitle({
       <Text
         style={[
           a.flex_1,
-          a.font_heavy,
+          a.font_bold,
           a.text_lg,
           a.leading_snug,
           active ? t.atoms.text : t.atoms.text_contrast_medium,
@@ -598,7 +598,7 @@ function OptionCard({
               ? [t.atoms.border_contrast_high]
               : [t.atoms.border_contrast_low],
           ]}>
-          <Text style={[a.text_md, a.font_bold, a.leading_snug]}>
+          <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
             {option.title}
           </Text>
           <Text
@@ -670,7 +670,7 @@ function LabelerCard({
             avatar={labeler.creator.avatar}
           />
           <View style={[a.flex_1]}>
-            <Text style={[a.text_md, a.font_bold, a.leading_snug]}>
+            <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
               {title}
             </Text>
             <Text