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/dms/ChatEmptyPill.tsx

@@ -89,7 +89,9 @@ export function ChatEmptyPill() {
         onPress={onPress}
         onPressIn={onPressIn}
         onPressOut={onPressOut}>
-        <Text style={[a.font_bold, a.pointer_events_none]} selectable={false}>
+        <Text
+          style={[a.font_semi_bold, a.pointer_events_none]}
+          selectable={false}>
           {prompts[promptIndex]}
         </Text>
       </AnimatedPressable>

src/components/dms/DateDivider.tsx

@@ -67,7 +67,8 @@ let DateDivider = ({date: dateStr}: {date: string}): React.ReactNode => {
           a.px_md,
         ]}>
         <Trans>
-          <Text style={[a.text_xs, t.atoms.text_contrast_medium, a.font_bold]}>
+          <Text
+            style={[a.text_xs, t.atoms.text_contrast_medium, a.font_semi_bold]}>
             {date}
           </Text>{' '}
           at {time}

src/components/dms/EmojiPopup.android.tsx

@@ -51,7 +51,7 @@ export function EmojiPopup({
               a.border_b,
               t.atoms.border_contrast_low,
             ]}>
-            <Text style={[a.font_bold, a.text_md]}>
+            <Text style={[a.font_semi_bold, a.text_md]}>
               <Trans>Add Reaction</Trans>
             </Text>
             <Button

src/components/dms/MessagesListBlockedFooter.tsx

@@ -61,7 +61,7 @@ export function MessagesListBlockedFooter({
   return (
     <View style={[hasMessages && a.pt_md, a.pb_xl, a.gap_lg]}>
       <Divider />
-      <Text style={[a.text_md, a.font_bold, a.text_center]}>
+      <Text style={[a.text_md, a.font_semi_bold, a.text_center]}>
         {isBlocking ? (
           <Trans>You have blocked this user</Trans>
         ) : (

src/components/dms/MessagesListHeader.tsx

@@ -154,7 +154,7 @@ function HeaderReady({
                 emoji
                 style={[
                   a.text_md,
-                  a.font_bold,
+                  a.font_semi_bold,
                   a.self_start,
                   web(a.leading_normal),
                 ]}

src/components/dms/NewMessagesPill.tsx

@@ -88,7 +88,7 @@ export function NewMessagesPill({
         onPress={onPress}
         onPressIn={onPressIn}
         onPressOut={onPressOut}>
-        <Text style={[a.font_bold]}>
+        <Text style={[a.font_semi_bold]}>
           <Trans>New messages</Trans>
         </Text>
       </AnimatedPressable>

src/components/dms/ReportDialog.tsx

@@ -200,7 +200,7 @@ function SubmitStep({
       </Button>
 
       <View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
-        <Text style={[a.text_2xl, a.font_bold]}>{copy.title}</Text>
+        <Text style={[a.text_2xl, a.font_semi_bold]}>{copy.title}</Text>
         <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
           <Trans>
             Your report will be sent to the Bluesky Moderation Service
@@ -213,10 +213,11 @@ function SubmitStep({
       )}
 
       <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
-        <Text style={[a.font_bold, a.text_md, t.atoms.text_contrast_medium]}>
+        <Text
+          style={[a.font_semi_bold, a.text_md, t.atoms.text_contrast_medium]}>
           <Trans>Reason:</Trans>
         </Text>{' '}
-        <Text style={[a.font_bold, a.text_md]}>{reportOption.title}</Text>
+        <Text style={[a.font_semi_bold, a.text_md]}>{reportOption.title}</Text>
       </Text>
 
       <Divider />
@@ -346,7 +347,7 @@ function DoneStep({
   return (
     <View style={a.gap_2xl}>
       <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>Report submitted</Trans>
         </Text>
         <Text style={[a.text_md, t.atoms.text_contrast_medium]}>