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/alf/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import {type Theme, type ThemeName} from '@bsky.app/alf'
 
 import {
   computeFontScaleMultiplier,
@@ -7,16 +8,14 @@ import {
   setFontFamily as persistFontFamily,
   setFontScale as persistFontScale,
 } from '#/alf/fonts'
-import {createThemes, defaultTheme} from '#/alf/themes'
-import {type Theme, type ThemeName} from '#/alf/types'
-import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
+import {themes} from '#/alf/themes'
 import {type Device} from '#/storage'
 
+export {type TextStyleProp, type Theme, type ViewStyleProp} from '@bsky.app/alf'
 export {atoms} from '#/alf/atoms'
 export * from '#/alf/breakpoints'
 export * from '#/alf/fonts'
 export * as tokens from '#/alf/tokens'
-export * from '#/alf/types'
 export * from '#/alf/util/flatten'
 export * from '#/alf/util/platform'
 export * from '#/alf/util/themeSelector'
@@ -25,7 +24,7 @@ export * from '#/alf/util/useGutters'
 export type Alf = {
   themeName: ThemeName
   theme: Theme
-  themes: ReturnType<typeof createThemes>
+  themes: typeof themes
   fonts: {
     scale: Exclude<Device['fontScale'], undefined>
     scaleMultiplier: number
@@ -44,14 +43,8 @@ export type Alf = {
  */
 export const Context = React.createContext<Alf>({
   themeName: 'light',
-  theme: defaultTheme,
-  themes: createThemes({
-    hues: {
-      primary: BLUE_HUE,
-      negative: RED_HUE,
-      positive: GREEN_HUE,
-    },
-  }),
+  theme: themes.light,
+  themes,
   fonts: {
     scale: getFontScale(),
     scaleMultiplier: computeFontScaleMultiplier(getFontScale()),
@@ -76,10 +69,10 @@ export function ThemeProvider({
   const setFontScaleAndPersist = React.useCallback<
     Alf['fonts']['setFontScale']
   >(
-    fontScale => {
-      setFontScale(fontScale)
-      persistFontScale(fontScale)
-      setFontScaleMultiplier(computeFontScaleMultiplier(fontScale))
+    fs => {
+      setFontScale(fs)
+      persistFontScale(fs)
+      setFontScaleMultiplier(computeFontScaleMultiplier(fs))
     },
     [setFontScale],
   )
@@ -89,21 +82,12 @@ export function ThemeProvider({
   const setFontFamilyAndPersist = React.useCallback<
     Alf['fonts']['setFontFamily']
   >(
-    fontFamily => {
-      setFontFamily(fontFamily)
-      persistFontFamily(fontFamily)
+    ff => {
+      setFontFamily(ff)
+      persistFontFamily(ff)
     },
     [setFontFamily],
   )
-  const themes = React.useMemo(() => {
-    return createThemes({
-      hues: {
-        primary: BLUE_HUE,
-        negative: RED_HUE,
-        positive: GREEN_HUE,
-      },
-    })
-  }, [])
 
   const value = React.useMemo<Alf>(
     () => ({
@@ -121,7 +105,6 @@ export function ThemeProvider({
     }),
     [
       themeName,
-      themes,
       fontScale,
       setFontScaleAndPersist,
       fontFamily,