[ALF] Theme & palette cleanup (#4769)

* Invert primary scale

* Invert negative palette

* Replace theme specific styles in Toggle

* Remove theme specific colors from Button, improves secondary solid on dark mode

* TextField

* Remove from MessageItem

* Threadgate editor

* IconCircle

* Muted words

* Generate themes from hues

* Cleanup

* Deprecate more values, fix circular import

* Invert positive too, hardly use

* Button tweaks, some theme diffs

* Match disabled state for negative button

* Fix unread noty bg

1 files changed, 16 insertions, 5 deletions

diff --git a/src/alf/index.tsx b/src/alf/index.tsx
index 75ea28eb0..ade2ce145 100644
--- a/src/alf/index.tsx
+++ b/src/alf/index.tsx
@@ -1,7 +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'
@@ -39,8 +41,8 @@ function getActiveBreakpoints({width}: {width: number}) {
  * Context
  */
 export const Context = React.createContext<{
-  themeName: themes.ThemeName
-  theme: themes.Theme
+  themeName: ThemeName
+  theme: Theme
   breakpoints: {
     active: BreakpointName | undefined
     gtPhone: boolean
@@ -49,7 +51,7 @@ export const Context = React.createContext<{
   }
 }>({
   themeName: 'light',
-  theme: themes.light,
+  theme: defaultTheme,
   breakpoints: {
     active: undefined,
     gtPhone: false,
@@ -61,7 +63,16 @@ export const Context = React.createContext<{
 export function ThemeProvider({
   children,
   theme: themeName,
-}: React.PropsWithChildren<{theme: themes.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}),