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/Settings/AccountSettings.tsx

@@ -97,7 +97,7 @@ export function AccountSettingsScreen({}: Props) {
                 color={t.palette.primary_500}
               />
               <SettingsList.ItemText
-                style={[{color: t.palette.primary_500}, a.font_bold]}>
+                style={[{color: t.palette.primary_500}, a.font_semi_bold]}>
                 <Trans>Verify your email</Trans>
               </SettingsList.ItemText>
               <SettingsList.Chevron color={t.palette.primary_500} />

src/screens/Settings/AppIconSettings/index.tsx

@@ -93,7 +93,7 @@ export function AppIconSettingsScreen({}: Props) {
                 a.text_md,
                 a.mt_xl,
                 a.mb_sm,
-                a.font_bold,
+                a.font_semi_bold,
                 t.atoms.text_contrast_medium,
               ]}>
               <Trans>Bluesky+</Trans>
@@ -201,7 +201,12 @@ function RowText({children}: {children: React.ReactNode}) {
   const t = useTheme()
   return (
     <Text
-      style={[a.text_md, a.font_bold, a.flex_1, t.atoms.text_contrast_medium]}
+      style={[
+        a.text_md,
+        a.font_semi_bold,
+        a.flex_1,
+        t.atoms.text_contrast_medium,
+      ]}
       emoji>
       {children}
     </Text>

src/screens/Settings/AppPasswords.tsx

@@ -167,7 +167,7 @@ function AppPasswordCard({
           a.gap_sm,
         ]}>
         <View style={[a.gap_xs]}>
-          <Text style={[t.atoms.text, a.text_md, a.font_bold]}>
+          <Text style={[t.atoms.text, a.text_md, a.font_semi_bold]}>
             {appPassword.name}
           </Text>
           <Text style={[t.atoms.text_contrast_medium]}>

src/screens/Settings/InterestsSettings.tsx

@@ -222,7 +222,7 @@ export function InterestButton({interest}: {interest: string}) {
           {
             color: t.palette.contrast_900,
           },
-          a.font_bold,
+          a.font_semi_bold,
           ctx.selected ? styles.textSelected : {},
         ]}>
         {interestsDisplayNames[interest]}

src/screens/Settings/NotificationSettings/ActivityNotificationSettings.tsx

@@ -140,7 +140,10 @@ export function ActivityNotificationSettingsScreen({}: Props) {
                           Enable notifications for an account by visiting their
                           profile and pressing the{' '}
                           <RNText
-                            style={[a.font_bold, t.atoms.text_contrast_high]}>
+                            style={[
+                              a.font_semi_bold,
+                              t.atoms.text_contrast_high,
+                            ]}>
                             bell icon
                           </RNText>{' '}
                           <BellRingingFilledIcon
@@ -157,7 +160,7 @@ export function ActivityNotificationSettingsScreen({}: Props) {
                           <InlineLinkText
                             label={_(msg`Privacy and Security settings`)}
                             to={{screen: 'ActivityPrivacySettings'}}
-                            style={[a.font_bold]}>
+                            style={[a.font_semi_bold]}>
                             Settings &rarr; Privacy and Security
                           </InlineLinkText>
                           .

src/screens/Settings/NotificationSettings/components/ItemTextWithSubtitle.tsx

@@ -19,7 +19,7 @@ export function ItemTextWithSubtitle({
   const t = useTheme()
   return (
     <View style={[a.flex_1, bold ? a.gap_xs : a.gap_2xs]}>
-      <SettingsList.ItemText style={bold && [a.font_bold, a.text_lg]}>
+      <SettingsList.ItemText style={bold && [a.font_semi_bold, a.text_lg]}>
         {titleText}
       </SettingsList.ItemText>
       {showSkeleton ? (

src/screens/Settings/NotificationSettings/components/PreferenceControls.tsx

@@ -150,7 +150,7 @@ export function Inner({
       {'include' in preference && (
         <>
           <Divider />
-          <Text style={[a.font_bold, a.text_md]}>
+          <Text style={[a.font_semi_bold, a.text_md]}>
             <Trans>From</Trans>
           </Text>
           <Toggle.Group

src/screens/Settings/Settings.tsx

@@ -343,7 +343,7 @@ function ProfilePreview({
             a.pt_sm,
             t.atoms.text,
             gtMobile ? a.text_4xl : a.text_3xl,
-            a.font_heavy,
+            a.font_bold,
           ]}>
           {displayName}
         </Text>
@@ -513,7 +513,9 @@ function DevOptions() {
 
       <SettingsList.Divider />
       <View style={[a.p_xl, a.gap_md]}>
-        <Text style={[a.text_lg, a.font_bold]}>PolicyUpdate202508 Debug</Text>
+        <Text style={[a.text_lg, a.font_semi_bold]}>
+          PolicyUpdate202508 Debug
+        </Text>
 
         <View style={[a.flex_row, a.align_center, a.justify_between, a.gap_md]}>
           <Button

src/screens/Settings/components/AddAppPasswordDialog.tsx

@@ -107,7 +107,7 @@ function CreateDialogInner({passwords}: {passwords: string[]}) {
               style={[a.gap_lg]}
               exiting={native(SlideOutLeft)}
               key={0}>
-              <Text style={[a.text_2xl, a.font_bold]}>
+              <Text style={[a.text_2xl, a.font_semi_bold]}>
                 <Trans>Add App Password</Trans>
               </Text>
               <Text style={[a.text_md, a.leading_snug]}>
@@ -183,7 +183,7 @@ function CreateDialogInner({passwords}: {passwords: string[]}) {
               style={[a.gap_lg]}
               entering={isWeb ? FadeIn.delay(200) : SlideInRight}
               key={1}>
-              <Text style={[a.text_2xl, a.font_bold]}>
+              <Text style={[a.text_2xl, a.font_semi_bold]}>
                 <Trans>Here is your app password!</Trans>
               </Text>
               <Text style={[a.text_md, a.leading_snug]}>

src/screens/Settings/components/ChangeHandleDialog.tsx

@@ -244,7 +244,7 @@ function ProvidedHandlePage({
           <Text>
             <Trans>
               Your full handle will be{' '}
-              <Text style={[a.font_bold]}>
+              <Text style={[a.font_semi_bold]}>
                 @{createFullHandle(subdomain, host)}
               </Text>
             </Trans>
@@ -280,7 +280,7 @@ function ProvidedHandlePage({
                   }),
                 )}
                 to="https://bsky.social/about/blog/4-28-2023-domain-handle-tutorial"
-                style={[a.font_bold]}
+                style={[a.font_semi_bold]}
                 disableMismatchWarning>
                 Learn more here.
               </InlineLinkText>
@@ -522,7 +522,7 @@ function OwnHandlePage({goToServiceHandle}: {goToServiceHandle: () => void}) {
           <Admonition type="info" style={[a.mb_md]}>
             <Trans>
               Your current handle{' '}
-              <Text style={[a.font_bold]}>
+              <Text style={[a.font_semi_bold]}>
                 {sanitizeHandle(currentAccount?.handle || '', '@')}
               </Text>{' '}
               will automatically remain reserved for you. You can switch back to

src/screens/Settings/components/ChangePasswordDialog.tsx

@@ -165,7 +165,7 @@ function Inner() {
       style={web({maxWidth: 400})}>
       <View style={[a.gap_xl]}>
         <View style={[a.gap_sm]}>
-          <Text style={[a.font_heavy, a.text_2xl]}>
+          <Text style={[a.font_bold, a.text_2xl]}>
             {uiStrings[stage].title}
           </Text>
           {error ? (

src/screens/Settings/components/CopyButton.tsx

@@ -58,7 +58,7 @@ export function CopyButton({
           pointerEvents="none">
           <Text
             style={[
-              a.font_bold,
+              a.font_semi_bold,
               a.text_right,
               a.text_md,
               t.atoms.text_contrast_high,

src/screens/Settings/components/DisableEmail2FADialog.tsx

@@ -85,7 +85,7 @@ export function DisableEmail2FADialog({
         <View style={[a.relative, a.gap_md, a.w_full]}>
           <Text
             nativeID="dialog-title"
-            style={[a.text_2xl, a.font_bold, t.atoms.text]}>
+            style={[a.text_2xl, a.font_semi_bold, t.atoms.text]}>
             <Trans>Disable Email 2FA</Trans>
           </Text>
           <P nativeID="dialog-description">

src/screens/Settings/components/ExportCarDialog.tsx

@@ -58,7 +58,7 @@ export function ExportCarDialog({
         accessibilityDescribedBy="dialog-description"
         accessibilityLabelledBy="dialog-title">
         <View style={[a.relative, a.gap_lg, a.w_full]}>
-          <Text nativeID="dialog-title" style={[a.text_2xl, a.font_heavy]}>
+          <Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}>
             <Trans>Export My Data</Trans>
           </Text>
           <Text