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/nuxs/ActivitySubscriptions.tsx

@@ -66,7 +66,7 @@ export function ActivitySubscriptionsNUX() {
             <SparkleIcon fill={t.palette.primary_800} size="sm" />
             <Text
               style={[
-                a.font_bold,
+                a.font_semi_bold,
                 {
                   color: t.palette.primary_800,
                 },
@@ -127,7 +127,7 @@ export function ActivitySubscriptionsNUX() {
               style={[
                 a.text_3xl,
                 a.leading_tight,
-                a.font_heavy,
+                a.font_bold,
                 a.text_center,
                 {
                   fontSize: isWeb ? 28 : 32,

src/components/dialogs/nuxs/BookmarksAnnouncement.tsx

@@ -65,7 +65,7 @@ export function BookmarksAnnouncement() {
             <SparkleIcon fill={t.palette.primary_800} size="sm" />
             <Text
               style={[
-                a.font_bold,
+                a.font_semi_bold,
                 {
                   color: t.palette.primary_800,
                 },
@@ -133,7 +133,7 @@ export function BookmarksAnnouncement() {
               style={[
                 a.text_3xl,
                 a.leading_tight,
-                a.font_heavy,
+                a.font_bold,
                 a.text_center,
                 {
                   fontSize: isWeb ? 28 : 32,

src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx

@@ -55,7 +55,7 @@ export function InitialVerificationAnnouncement() {
             <SparkleIcon fill={t.palette.primary_700} size="sm" />
             <Text
               style={[
-                a.font_bold,
+                a.font_semi_bold,
                 {
                   color: t.palette.primary_700,
                 },
@@ -87,7 +87,7 @@ export function InitialVerificationAnnouncement() {
           </View>
 
           <View style={[a.gap_xs]}>
-            <Text style={[a.text_2xl, a.font_bold, a.leading_snug]}>
+            <Text style={[a.text_2xl, a.font_semi_bold, a.leading_snug]}>
               <Trans>A new form of verification</Trans>
             </Text>
             <Text style={[a.leading_snug, a.text_md]}>
@@ -123,7 +123,7 @@ export function InitialVerificationAnnouncement() {
           <View style={[a.gap_sm]}>
             <View style={[a.flex_row, a.align_center, a.gap_xs]}>
               <VerifierCheck width={14} />
-              <Text style={[a.text_lg, a.font_bold, a.leading_snug]}>
+              <Text style={[a.text_lg, a.font_semi_bold, a.leading_snug]}>
                 <Trans>Who can verify?</Trans>
               </Text>
             </View>
@@ -138,7 +138,7 @@ export function InitialVerificationAnnouncement() {
                 <Trans>
                   Trust emerges from relationships, communities, and shared
                   context, so we’re also enabling{' '}
-                  <Span style={[a.font_bold]}>trusted verifiers</Span>:
+                  <Span style={[a.font_semi_bold]}>trusted verifiers</Span>:
                   organizations that can directly issue verification.
                 </Trans>
               </Text>