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/forms/FormError.tsx

@@ -20,7 +20,8 @@ export function FormError({error}: {error?: string}) {
       ]}>
       <Warning fill={t.palette.white} size="md" />
       <View style={[a.flex_1]}>
-        <Text style={[{color: t.palette.white}, a.font_bold, a.leading_snug]}>
+        <Text
+          style={[{color: t.palette.white}, a.font_semi_bold, a.leading_snug]}>
           {error}
         </Text>
       </View>

src/components/forms/TextField.tsx

@@ -15,7 +15,6 @@ import {
   android,
   applyFonts,
   atoms as a,
-  ios,
   platform,
   type TextStyleProp,
   tokens,
@@ -202,17 +201,23 @@ export function createInput(Component: typeof TextInput) {
       a.px_xs,
       {
         // paddingVertical doesn't work w/multiline - esb
-        lineHeight: a.text_md.fontSize * 1.1875,
+        lineHeight: a.text_md.fontSize * 1.2,
         textAlignVertical: rest.multiline ? 'top' : undefined,
         minHeight: rest.multiline ? 80 : undefined,
         minWidth: 0,
+        paddingTop: 13,
+        paddingBottom: 13,
       },
-      ios({paddingTop: 12, paddingBottom: 13}),
-      // Needs to be sm on Paper, md on Fabric for some godforsaken reason -sfn
-      android(a.py_sm),
-      // fix for autofill styles covering border
+      android({
+        paddingTop: 8,
+        paddingBottom: 9,
+      }),
+      /*
+       * Margins are needed here to avoid autofill background overlapping the
+       * top and bottom borders - esb
+       */
       web({
-        paddingTop: 10,
+        paddingTop: 11,
         paddingBottom: 11,
         marginTop: 2,
         marginBottom: 2,
@@ -262,7 +267,7 @@ export function createInput(Component: typeof TextInput) {
             a.absolute,
             a.inset_0,
             a.rounded_sm,
-            t.atoms.bg_contrast_25,
+            t.atoms.bg_contrast_50,
             {borderColor: 'transparent', borderWidth: 2},
             ctx.hovered ? chromeHover : {},
             ctx.focused ? chromeFocus : {},
@@ -287,7 +292,12 @@ export function LabelText({
   return (
     <Text
       nativeID={nativeID}
-      style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium, a.mb_sm]}>
+      style={[
+        a.text_sm,
+        a.font_semi_bold,
+        t.atoms.text_contrast_medium,
+        a.mb_sm,
+      ]}>
       {children}
     </Text>
   )

src/components/forms/Toggle.tsx

@@ -249,7 +249,7 @@ export function LabelText({
   return (
     <Text
       style={[
-        a.font_bold,
+        a.font_semi_bold,
         a.leading_tight,
         {
           userSelect: 'none',

src/components/forms/ToggleButton.tsx

@@ -133,7 +133,7 @@ export function ButtonText({children}: {children: React.ReactNode}) {
     <Text
       style={[
         a.text_center,
-        a.font_bold,
+        a.font_semi_bold,
         t.atoms.text_contrast_medium,
         textStyles,
       ]}>