Deprecate more values, fix circular import

src/alf/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import {Dimensions} from 'react-native'
 
-import * as themes from '#/alf/themes'
+import {createThemes, defaultTheme} from '#/alf/themes'
 import {Theme, ThemeName} from '#/alf/types'
+import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
 
 export {atoms} from '#/alf/atoms'
 export * as tokens from '#/alf/tokens'
@@ -50,7 +51,7 @@ export const Context = React.createContext<{
   }
 }>({
   themeName: 'light',
-  theme: themes.light,
+  theme: defaultTheme,
   breakpoints: {
     active: undefined,
     gtPhone: false,
@@ -63,6 +64,15 @@ export function ThemeProvider({
   children,
   theme: themeName,
 }: React.PropsWithChildren<{theme: ThemeName}>) {
+  const themes = React.useMemo(() => {
+    return createThemes({
+      hues: {
+        primary: BLUE_HUE,
+        negative: RED_HUE,
+        positive: GREEN_HUE,
+      },
+    })
+  }, [])
   const theme = themes[themeName]
   const [breakpoints, setBreakpoints] = React.useState(() =>
     getActiveBreakpoints({width: Dimensions.get('window').width}),

src/alf/themes.ts

@@ -1,7 +1,12 @@
 import {atoms} from '#/alf/atoms'
 import {Palette, Theme} from '#/alf/types'
-import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
+import {
-import {generateScale} from '#/alf/util/colorGeneration'
+  BLUE_HUE,
+  defaultScale,
+  dimScale,
+  GREEN_HUE,
+  RED_HUE,
+} from '#/alf/util/colorGeneration'
 
 const themes = createThemes({
   hues: {
@@ -23,14 +28,20 @@ export const darkPalette = themes.darkPalette
  * @deprecated use ALF and access palette from `useTheme()`
  */
 export const dimPalette = themes.dimPalette
-
+/**
+ * @deprecated use ALF and access theme from `useTheme()`
+ */
 export const light = themes.light
+/**
+ * @deprecated use ALF and access theme from `useTheme()`
+ */
 export const dark = themes.dark
+/**
+ * @deprecated use ALF and access theme from `useTheme()`
+ */
 export const dim = themes.dim
 
-const scale = generateScale(6, 100)
+export const defaultTheme = themes.light
-// dim shifted 6% lighter
-const dimScale = generateScale(12, 100)
 
 export function createThemes({
   hues,
@@ -51,24 +62,21 @@ export function createThemes({
   const color = {
     trueBlack: '#000000',
 
-    temp_purple: 'rgb(105 0 255)',
+    gray_0: `hsl(${hues.primary}, 20%, ${defaultScale[14]}%)`,
-    temp_purple_dark: 'rgb(83 0 202)',
+    gray_25: `hsl(${hues.primary}, 20%, ${defaultScale[13]}%)`,
-
+    gray_50: `hsl(${hues.primary}, 20%, ${defaultScale[12]}%)`,
-    gray_0: `hsl(${hues.primary}, 20%, ${scale[14]}%)`,
+    gray_100: `hsl(${hues.primary}, 20%, ${defaultScale[11]}%)`,
-    gray_25: `hsl(${hues.primary}, 20%, ${scale[13]}%)`,
+    gray_200: `hsl(${hues.primary}, 20%, ${defaultScale[10]}%)`,
-    gray_50: `hsl(${hues.primary}, 20%, ${scale[12]}%)`,
+    gray_300: `hsl(${hues.primary}, 20%, ${defaultScale[9]}%)`,
-    gray_100: `hsl(${hues.primary}, 20%, ${scale[11]}%)`,
+    gray_400: `hsl(${hues.primary}, 20%, ${defaultScale[8]}%)`,
-    gray_200: `hsl(${hues.primary}, 20%, ${scale[10]}%)`,
+    gray_500: `hsl(${hues.primary}, 20%, ${defaultScale[7]}%)`,
-    gray_300: `hsl(${hues.primary}, 20%, ${scale[9]}%)`,
+    gray_600: `hsl(${hues.primary}, 24%, ${defaultScale[6]}%)`,
-    gray_400: `hsl(${hues.primary}, 20%, ${scale[8]}%)`,
+    gray_700: `hsl(${hues.primary}, 24%, ${defaultScale[5]}%)`,
-    gray_500: `hsl(${hues.primary}, 20%, ${scale[7]}%)`,
+    gray_800: `hsl(${hues.primary}, 28%, ${defaultScale[4]}%)`,
-    gray_600: `hsl(${hues.primary}, 24%, ${scale[6]}%)`,
+    gray_900: `hsl(${hues.primary}, 28%, ${defaultScale[3]}%)`,
-    gray_700: `hsl(${hues.primary}, 24%, ${scale[5]}%)`,
+    gray_950: `hsl(${hues.primary}, 28%, ${defaultScale[2]}%)`,
-    gray_800: `hsl(${hues.primary}, 28%, ${scale[4]}%)`,
+    gray_975: `hsl(${hues.primary}, 28%, ${defaultScale[1]}%)`,
-    gray_900: `hsl(${hues.primary}, 28%, ${scale[3]}%)`,
+    gray_1000: `hsl(${hues.primary}, 28%, ${defaultScale[0]}%)`,
-    gray_950: `hsl(${hues.primary}, 28%, ${scale[2]}%)`,
-    gray_975: `hsl(${hues.primary}, 28%, ${scale[1]}%)`,
-    gray_1000: `hsl(${hues.primary}, 28%, ${scale[0]}%)`,
 
     primary_25: `hsl(${hues.primary}, 99%, 97%)`,
     primary_50: `hsl(${hues.primary}, 99%, 95%)`,

src/alf/util/colorGeneration.ts

@@ -15,3 +15,7 @@ export function generateScale(start: number, end: number) {
     return start + range * stop
   })
 }
+
+export const defaultScale = generateScale(6, 100)
+// dim shifted 6% lighter
+export const dimScale = generateScale(12, 100)