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/dialogs/PostInteractionSettingsDialog.tsx

@@ -84,7 +84,7 @@ export function PostInteractionSettingsControlledDialog({
             ]}>
             <Trans>
               You can set default interaction settings in{' '}
-              <Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
+              <Text style={[a.font_semi_bold, t.atoms.text_contrast_medium]}>
                 Settings &rarr; Moderation &rarr; Interaction settings
               </Text>
               .
@@ -100,7 +100,7 @@ export function PostInteractionSettingsControlledDialog({
 export function Header() {
   return (
     <View style={[a.gap_md, a.pb_sm]}>
-      <Text style={[a.text_2xl, a.font_bold]}>
+      <Text style={[a.text_2xl, a.font_semi_bold]}>
         <Trans>Post interaction settings</Trans>
       </Text>
       <Text style={[a.text_md, a.pb_xs]}>
@@ -329,7 +329,7 @@ export function PostInteractionSettingsForm({
       <View style={[a.flex_1, a.gap_md]}>
         <View style={[a.gap_lg]}>
           <View style={[a.gap_sm]}>
-            <Text style={[a.font_bold, a.text_lg]}>
+            <Text style={[a.font_semi_bold, a.text_lg]}>
               <Trans>Quote settings</Trans>
             </Text>
 
@@ -385,7 +385,7 @@ export function PostInteractionSettingsForm({
                 opacity: replySettingsDisabled ? 0.3 : 1,
               },
             ]}>
-            <Text style={[a.font_bold, a.text_lg]}>
+            <Text style={[a.font_semi_bold, a.text_lg]}>
               <Trans>Reply settings</Trans>
             </Text>
 
@@ -535,7 +535,9 @@ function Selectable({
             },
             style,
           ]}>
-          <Text style={[a.text_sm, isSelected && a.font_bold]}>{label}</Text>
+          <Text style={[a.text_sm, isSelected && a.font_semi_bold]}>
+            {label}
+          </Text>
           {isSelected ? (
             <Check size="sm" fill={t.palette.primary_500} />
           ) : (