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/screens/Messages/ChatList.tsx

@@ -265,7 +265,8 @@ export function MessagesScreenInner({navigation, route}: Props) {
                       width={48}
                       fill={t.atoms.text_contrast_low.color}
                     />
-                    <Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>
+                    <Text
+                      style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_semi_bold]}>
                       <Trans>Whoops!</Trans>
                     </Text>
                     <Text
@@ -298,7 +299,8 @@ export function MessagesScreenInner({navigation, route}: Props) {
                 <>
                   <View style={[a.pt_3xl, a.align_center]}>
                     <MessageIcon width={48} fill={t.palette.primary_500} />
-                    <Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>
+                    <Text
+                      style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_semi_bold]}>
                       <Trans>Nothing here</Trans>
                     </Text>
                     <Text

src/screens/Messages/Inbox.tsx

@@ -193,7 +193,8 @@ function RequestList({
                     width={48}
                     fill={t.atoms.text_contrast_low.color}
                   />
-                  <Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>
+                  <Text
+                    style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_semi_bold]}>
                     <Trans>Whoops!</Trans>
                   </Text>
                   <Text
@@ -225,7 +226,8 @@ function RequestList({
               <>
                 <View style={[a.pt_3xl, a.align_center]}>
                   <MessageIcon width={48} fill={t.palette.primary_500} />
-                  <Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>
+                  <Text
+                    style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_semi_bold]}>
                     <Trans comment="Title message shown in chat requests inbox when it's empty">
                       Inbox zero!
                     </Trans>

src/screens/Messages/Settings.tsx

@@ -71,7 +71,7 @@ export function MessagesSettingsScreenInner({}: Props) {
       </Layout.Header.Outer>
       <Layout.Content>
         <View style={[a.p_lg, a.gap_md]}>
-          <Text style={[a.text_lg, a.font_bold]}>
+          <Text style={[a.text_lg, a.font_semi_bold]}>
             <Trans>Allow new messages from</Trans>
           </Text>
           <Toggle.Group
@@ -121,7 +121,7 @@ export function MessagesSettingsScreenInner({}: Props) {
           {isNative && (
             <>
               <Divider style={a.my_md} />
-              <Text style={[a.text_lg, a.font_bold]}>
+              <Text style={[a.text_lg, a.font_semi_bold]}>
                 <Trans>Notification Sounds</Trans>
               </Text>
               <Toggle.Group

src/screens/Messages/components/ChatDisabled.tsx

@@ -22,7 +22,12 @@ export function ChatDisabled() {
       <View
         style={[a.align_start, a.p_xl, a.rounded_md, t.atoms.bg_contrast_25]}>
         <Text
-          style={[a.text_md, a.font_bold, a.pb_sm, t.atoms.text_contrast_high]}>
+          style={[
+            a.text_md,
+            a.font_semi_bold,
+            a.pb_sm,
+            t.atoms.text_contrast_high,
+          ]}>
           <Trans>Your chats have been disabled</Trans>
         </Text>
         <Text style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
@@ -104,7 +109,7 @@ function DialogInner() {
 
   return (
     <Dialog.ScrollableInner label={_(msg`Appeal this decision`)}>
-      <Text style={[a.text_2xl, a.font_bold, a.pb_xs, a.leading_tight]}>
+      <Text style={[a.text_2xl, a.font_semi_bold, a.pb_xs, a.leading_tight]}>
         <Trans>Appeal this decision</Trans>
       </Text>
       <Text style={[a.text_md, a.leading_snug]}>

src/screens/Messages/components/ChatListItem.tsx

@@ -397,7 +397,7 @@ function ChatListItemReady({
                       style={[
                         a.text_md,
                         t.atoms.text,
-                        a.font_bold,
+                        a.font_semi_bold,
                         {lineHeight: 21},
                         isDimStyle && t.atoms.text_contrast_medium,
                       ]}>
@@ -461,7 +461,7 @@ function ChatListItemReady({
                   style={[
                     a.text_sm,
                     a.leading_snug,
-                    hasUnread ? a.font_bold : t.atoms.text_contrast_high,
+                    hasUnread ? a.font_semi_bold : t.atoms.text_contrast_high,
                     isDimStyle && t.atoms.text_contrast_medium,
                   ]}>
                   {lastMessage}

src/screens/Messages/components/InboxPreview.tsx

@@ -57,7 +57,7 @@ export function InboxPreview({
         )}
       </View>
       <ButtonText
-        style={[a.flex_1, a.font_bold, a.text_left]}
+        style={[a.flex_1, a.font_semi_bold, a.text_left]}
         numberOfLines={1}>
         <Trans>Chat requests</Trans>
       </ButtonText>

src/screens/Messages/components/RequestListItem.tsx

@@ -38,7 +38,7 @@ export function RequestListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
         {/* spacer, since you can't nest pressables */}
         <View style={[a.pt_md, a.pb_xs, a.w_full, {opacity: 0}]} aria-hidden>
           {/* Placeholder text so that it responds to the font height */}
-          <Text style={[a.text_xs, a.leading_tight, a.font_bold]}>
+          <Text style={[a.text_xs, a.leading_tight, a.font_semi_bold]}>
             <Trans comment="Accept a chat request">Accept Request</Trans>
           </Text>
         </View>