Cleanup

src/alf/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {Dimensions} from 'react-native'
 
 import * as themes from '#/alf/themes'
+import {Theme, ThemeName} from '#/alf/types'
 
 export {atoms} from '#/alf/atoms'
 export * as tokens from '#/alf/tokens'
@@ -39,8 +40,8 @@ function getActiveBreakpoints({width}: {width: number}) {
  * Context
  */
 export const Context = React.createContext<{
-  themeName: themes.ThemeName
+  themeName: ThemeName
-  theme: themes.Theme
+  theme: Theme
   breakpoints: {
     active: BreakpointName | undefined
     gtPhone: boolean
@@ -61,7 +62,7 @@ export const Context = React.createContext<{
 export function ThemeProvider({
   children,
   theme: themeName,
-}: React.PropsWithChildren<{theme: themes.ThemeName}>) {
+}: React.PropsWithChildren<{theme: ThemeName}>) {
   const theme = themes[themeName]
   const [breakpoints, setBreakpoints] = React.useState(() =>
     getActiveBreakpoints({width: Dimensions.get('window').width}),

src/alf/themes.ts

@@ -1,159 +1,7 @@
 import {atoms} from '#/alf/atoms'
-import * as tokens from '#/alf/tokens'
+import {Palette, Theme} from '#/alf/types'
 import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
-
+import {generateScale} from '#/alf/util/colorGeneration'
-export type ThemeName = 'light' | 'dim' | 'dark'
-export type Palette = {
-  white: string
-  black: string
-
-  contrast_25: string
-  contrast_50: string
-  contrast_100: string
-  contrast_200: string
-  contrast_300: string
-  contrast_400: string
-  contrast_500: string
-  contrast_600: string
-  contrast_700: string
-  contrast_800: string
-  contrast_900: string
-  contrast_950: string
-  contrast_975: string
-
-  primary_25: string
-  primary_50: string
-  primary_100: string
-  primary_200: string
-  primary_300: string
-  primary_400: string
-  primary_500: string
-  primary_600: string
-  primary_700: string
-  primary_800: string
-  primary_900: string
-  primary_950: string
-  primary_975: string
-
-  positive_25: string
-  positive_50: string
-  positive_100: string
-  positive_200: string
-  positive_300: string
-  positive_400: string
-  positive_500: string
-  positive_600: string
-  positive_700: string
-  positive_800: string
-  positive_900: string
-  positive_950: string
-  positive_975: string
-
-  negative_25: string
-  negative_50: string
-  negative_100: string
-  negative_200: string
-  negative_300: string
-  negative_400: string
-  negative_500: string
-  negative_600: string
-  negative_700: string
-  negative_800: string
-  negative_900: string
-  negative_950: string
-  negative_975: string
-}
-export type ThemedAtoms = {
-  text: {
-    color: string
-  }
-  text_contrast_low: {
-    color: string
-  }
-  text_contrast_medium: {
-    color: string
-  }
-  text_contrast_high: {
-    color: string
-  }
-  text_inverted: {
-    color: string
-  }
-  bg: {
-    backgroundColor: string
-  }
-  bg_contrast_25: {
-    backgroundColor: string
-  }
-  bg_contrast_50: {
-    backgroundColor: string
-  }
-  bg_contrast_100: {
-    backgroundColor: string
-  }
-  bg_contrast_200: {
-    backgroundColor: string
-  }
-  bg_contrast_300: {
-    backgroundColor: string
-  }
-  bg_contrast_400: {
-    backgroundColor: string
-  }
-  bg_contrast_500: {
-    backgroundColor: string
-  }
-  bg_contrast_600: {
-    backgroundColor: string
-  }
-  bg_contrast_700: {
-    backgroundColor: string
-  }
-  bg_contrast_800: {
-    backgroundColor: string
-  }
-  bg_contrast_900: {
-    backgroundColor: string
-  }
-  bg_contrast_950: {
-    backgroundColor: string
-  }
-  bg_contrast_975: {
-    backgroundColor: string
-  }
-  border_contrast_low: {
-    borderColor: string
-  }
-  border_contrast_medium: {
-    borderColor: string
-  }
-  border_contrast_high: {
-    borderColor: string
-  }
-  shadow_sm: {
-    shadowRadius: number
-    shadowOpacity: number
-    elevation: number
-    shadowColor: string
-  }
-  shadow_md: {
-    shadowRadius: number
-    shadowOpacity: number
-    elevation: number
-    shadowColor: string
-  }
-  shadow_lg: {
-    shadowRadius: number
-    shadowOpacity: number
-    elevation: number
-    shadowColor: string
-  }
-}
-export type Theme = {
-  name: ThemeName
-  palette: Palette
-  atoms: ThemedAtoms
-}
 
 const themes = createThemes({
   hues: {
@@ -163,10 +11,6 @@ const themes = createThemes({
   },
 })
 
-export const light = themes.light
-export const dark = themes.dark
-export const dim = themes.dim
-
 /**
  * @deprecated use ALF and access palette from `useTheme()`
  */
@@ -180,6 +24,14 @@ export const darkPalette = themes.darkPalette
  */
 export const dimPalette = themes.dimPalette
 
+export const light = themes.light
+export const dark = themes.dark
+export const dim = themes.dim
+
+const scale = generateScale(6, 100)
+// dim shifted 6% lighter
+const dimScale = generateScale(12, 100)
+
 export function createThemes({
   hues,
 }: {
@@ -202,21 +54,21 @@ export function createThemes({
     temp_purple: 'rgb(105 0 255)',
     temp_purple_dark: 'rgb(83 0 202)',
 
-    gray_0: `hsl(${hues.primary}, 20%, ${tokens.scale[14]}%)`,
+    gray_0: `hsl(${hues.primary}, 20%, ${scale[14]}%)`,
-    gray_25: `hsl(${hues.primary}, 20%, ${tokens.scale[13]}%)`,
+    gray_25: `hsl(${hues.primary}, 20%, ${scale[13]}%)`,
-    gray_50: `hsl(${hues.primary}, 20%, ${tokens.scale[12]}%)`,
+    gray_50: `hsl(${hues.primary}, 20%, ${scale[12]}%)`,
-    gray_100: `hsl(${hues.primary}, 20%, ${tokens.scale[11]}%)`,
+    gray_100: `hsl(${hues.primary}, 20%, ${scale[11]}%)`,
-    gray_200: `hsl(${hues.primary}, 20%, ${tokens.scale[10]}%)`,
+    gray_200: `hsl(${hues.primary}, 20%, ${scale[10]}%)`,
-    gray_300: `hsl(${hues.primary}, 20%, ${tokens.scale[9]}%)`,
+    gray_300: `hsl(${hues.primary}, 20%, ${scale[9]}%)`,
-    gray_400: `hsl(${hues.primary}, 20%, ${tokens.scale[8]}%)`,
+    gray_400: `hsl(${hues.primary}, 20%, ${scale[8]}%)`,
-    gray_500: `hsl(${hues.primary}, 20%, ${tokens.scale[7]}%)`,
+    gray_500: `hsl(${hues.primary}, 20%, ${scale[7]}%)`,
-    gray_600: `hsl(${hues.primary}, 24%, ${tokens.scale[6]}%)`,
+    gray_600: `hsl(${hues.primary}, 24%, ${scale[6]}%)`,
-    gray_700: `hsl(${hues.primary}, 24%, ${tokens.scale[5]}%)`,
+    gray_700: `hsl(${hues.primary}, 24%, ${scale[5]}%)`,
-    gray_800: `hsl(${hues.primary}, 28%, ${tokens.scale[4]}%)`,
+    gray_800: `hsl(${hues.primary}, 28%, ${scale[4]}%)`,
-    gray_900: `hsl(${hues.primary}, 28%, ${tokens.scale[3]}%)`,
+    gray_900: `hsl(${hues.primary}, 28%, ${scale[3]}%)`,
-    gray_950: `hsl(${hues.primary}, 28%, ${tokens.scale[2]}%)`,
+    gray_950: `hsl(${hues.primary}, 28%, ${scale[2]}%)`,
-    gray_975: `hsl(${hues.primary}, 28%, ${tokens.scale[1]}%)`,
+    gray_975: `hsl(${hues.primary}, 28%, ${scale[1]}%)`,
-    gray_1000: `hsl(${hues.primary}, 28%, ${tokens.scale[0]}%)`,
+    gray_1000: `hsl(${hues.primary}, 28%, ${scale[0]}%)`,
 
     primary_25: `hsl(${hues.primary}, 99%, 97%)`,
     primary_50: `hsl(${hues.primary}, 99%, 95%)`,
@@ -385,63 +237,63 @@ export function createThemes({
 
   const dimPalette: Palette = {
     ...darkPalette,
-    black: `hsl(${hues.primary}, 28%, ${tokens.dimScale[0]}%)`,
+    black: `hsl(${hues.primary}, 28%, ${dimScale[0]}%)`,
 
-    contrast_25: `hsl(${hues.primary}, 28%, ${tokens.dimScale[1]}%)`,
+    contrast_25: `hsl(${hues.primary}, 28%, ${dimScale[1]}%)`,
-    contrast_50: `hsl(${hues.primary}, 28%, ${tokens.dimScale[2]}%)`,
+    contrast_50: `hsl(${hues.primary}, 28%, ${dimScale[2]}%)`,
-    contrast_100: `hsl(${hues.primary}, 28%, ${tokens.dimScale[3]}%)`,
+    contrast_100: `hsl(${hues.primary}, 28%, ${dimScale[3]}%)`,
-    contrast_200: `hsl(${hues.primary}, 28%, ${tokens.dimScale[4]}%)`,
+    contrast_200: `hsl(${hues.primary}, 28%, ${dimScale[4]}%)`,
-    contrast_300: `hsl(${hues.primary}, 24%, ${tokens.dimScale[5]}%)`,
+    contrast_300: `hsl(${hues.primary}, 24%, ${dimScale[5]}%)`,
-    contrast_400: `hsl(${hues.primary}, 24%, ${tokens.dimScale[6]}%)`,
+    contrast_400: `hsl(${hues.primary}, 24%, ${dimScale[6]}%)`,
-    contrast_500: `hsl(${hues.primary}, 20%, ${tokens.dimScale[7]}%)`,
+    contrast_500: `hsl(${hues.primary}, 20%, ${dimScale[7]}%)`,
-    contrast_600: `hsl(${hues.primary}, 20%, ${tokens.dimScale[8]}%)`,
+    contrast_600: `hsl(${hues.primary}, 20%, ${dimScale[8]}%)`,
-    contrast_700: `hsl(${hues.primary}, 20%, ${tokens.dimScale[9]}%)`,
+    contrast_700: `hsl(${hues.primary}, 20%, ${dimScale[9]}%)`,
-    contrast_800: `hsl(${hues.primary}, 20%, ${tokens.dimScale[10]}%)`,
+    contrast_800: `hsl(${hues.primary}, 20%, ${dimScale[10]}%)`,
-    contrast_900: `hsl(${hues.primary}, 20%, ${tokens.dimScale[11]}%)`,
+    contrast_900: `hsl(${hues.primary}, 20%, ${dimScale[11]}%)`,
-    contrast_950: `hsl(${hues.primary}, 20%, ${tokens.dimScale[12]}%)`,
+    contrast_950: `hsl(${hues.primary}, 20%, ${dimScale[12]}%)`,
-    contrast_975: `hsl(${hues.primary}, 20%, ${tokens.dimScale[13]}%)`,
+    contrast_975: `hsl(${hues.primary}, 20%, ${dimScale[13]}%)`,
 
-    primary_25: `hsl(${hues.primary}, 99%, ${tokens.dimScale[1]}%)`,
+    primary_25: `hsl(${hues.primary}, 99%, ${dimScale[1]}%)`,
-    primary_50: `hsl(${hues.primary}, 99%, ${tokens.dimScale[2]}%)`,
+    primary_50: `hsl(${hues.primary}, 99%, ${dimScale[2]}%)`,
-    primary_100: `hsl(${hues.primary}, 99%, ${tokens.dimScale[3]}%)`,
+    primary_100: `hsl(${hues.primary}, 99%, ${dimScale[3]}%)`,
-    primary_200: `hsl(${hues.primary}, 99%, ${tokens.dimScale[4]}%)`,
+    primary_200: `hsl(${hues.primary}, 99%, ${dimScale[4]}%)`,
-    primary_300: `hsl(${hues.primary}, 99%, ${tokens.dimScale[5]}%)`,
+    primary_300: `hsl(${hues.primary}, 99%, ${dimScale[5]}%)`,
-    primary_400: `hsl(${hues.primary}, 99%, ${tokens.dimScale[6]}%)`,
+    primary_400: `hsl(${hues.primary}, 99%, ${dimScale[6]}%)`,
-    primary_500: `hsl(${hues.primary}, 99%, ${tokens.dimScale[7]}%)`,
+    primary_500: `hsl(${hues.primary}, 99%, ${dimScale[7]}%)`,
-    primary_600: `hsl(${hues.primary}, 95%, ${tokens.dimScale[8]}%)`,
+    primary_600: `hsl(${hues.primary}, 95%, ${dimScale[8]}%)`,
-    primary_700: `hsl(${hues.primary}, 90%, ${tokens.dimScale[9]}%)`,
+    primary_700: `hsl(${hues.primary}, 90%, ${dimScale[9]}%)`,
-    primary_800: `hsl(${hues.primary}, 82%, ${tokens.dimScale[10]}%)`,
+    primary_800: `hsl(${hues.primary}, 82%, ${dimScale[10]}%)`,
-    primary_900: `hsl(${hues.primary}, 70%, ${tokens.dimScale[11]}%)`,
+    primary_900: `hsl(${hues.primary}, 70%, ${dimScale[11]}%)`,
-    primary_950: `hsl(${hues.primary}, 60%, ${tokens.dimScale[12]}%)`,
+    primary_950: `hsl(${hues.primary}, 60%, ${dimScale[12]}%)`,
-    primary_975: `hsl(${hues.primary}, 50%, ${tokens.dimScale[13]}%)`,
+    primary_975: `hsl(${hues.primary}, 50%, ${dimScale[13]}%)`,
 
-    positive_25: `hsl(${hues.positive}, 82%, ${tokens.dimScale[13]}%)`,
+    positive_25: `hsl(${hues.positive}, 82%, ${dimScale[13]}%)`,
-    positive_50: `hsl(${hues.positive}, 82%, ${tokens.dimScale[12]}%)`,
+    positive_50: `hsl(${hues.positive}, 82%, ${dimScale[12]}%)`,
-    positive_100: `hsl(${hues.positive}, 82%, ${tokens.dimScale[11]}%)`,
+    positive_100: `hsl(${hues.positive}, 82%, ${dimScale[11]}%)`,
-    positive_200: `hsl(${hues.positive}, 82%, ${tokens.dimScale[10]}%)`,
+    positive_200: `hsl(${hues.positive}, 82%, ${dimScale[10]}%)`,
-    positive_300: `hsl(${hues.positive}, 82%, ${tokens.dimScale[9]}%)`,
+    positive_300: `hsl(${hues.positive}, 82%, ${dimScale[9]}%)`,
-    positive_400: `hsl(${hues.positive}, 82%, ${tokens.dimScale[8]}%)`,
+    positive_400: `hsl(${hues.positive}, 82%, ${dimScale[8]}%)`,
-    positive_500: `hsl(${hues.positive}, 82%, ${tokens.dimScale[7]}%)`,
+    positive_500: `hsl(${hues.positive}, 82%, ${dimScale[7]}%)`,
-    positive_600: `hsl(${hues.positive}, 82%, ${tokens.dimScale[6]}%)`,
+    positive_600: `hsl(${hues.positive}, 82%, ${dimScale[6]}%)`,
-    positive_700: `hsl(${hues.positive}, 82%, ${tokens.dimScale[5]}%)`,
+    positive_700: `hsl(${hues.positive}, 82%, ${dimScale[5]}%)`,
-    positive_800: `hsl(${hues.positive}, 82%, ${tokens.dimScale[4]}%)`,
+    positive_800: `hsl(${hues.positive}, 82%, ${dimScale[4]}%)`,
-    positive_900: `hsl(${hues.positive}, 70%, ${tokens.dimScale[3]}%)`,
+    positive_900: `hsl(${hues.positive}, 70%, ${dimScale[3]}%)`,
-    positive_950: `hsl(${hues.positive}, 60%, ${tokens.dimScale[2]}%)`,
+    positive_950: `hsl(${hues.positive}, 60%, ${dimScale[2]}%)`,
-    positive_975: `hsl(${hues.positive}, 50%, ${tokens.dimScale[1]}%)`,
+    positive_975: `hsl(${hues.positive}, 50%, ${dimScale[1]}%)`,
 
-    negative_25: `hsl(${hues.negative}, 91%, ${tokens.dimScale[1]}%)`,
+    negative_25: `hsl(${hues.negative}, 91%, ${dimScale[1]}%)`,
-    negative_50: `hsl(${hues.negative}, 91%, ${tokens.dimScale[2]}%)`,
+    negative_50: `hsl(${hues.negative}, 91%, ${dimScale[2]}%)`,
-    negative_100: `hsl(${hues.negative}, 91%, ${tokens.dimScale[3]}%)`,
+    negative_100: `hsl(${hues.negative}, 91%, ${dimScale[3]}%)`,
-    negative_200: `hsl(${hues.negative}, 91%, ${tokens.dimScale[4]}%)`,
+    negative_200: `hsl(${hues.negative}, 91%, ${dimScale[4]}%)`,
-    negative_300: `hsl(${hues.negative}, 91%, ${tokens.dimScale[5]}%)`,
+    negative_300: `hsl(${hues.negative}, 91%, ${dimScale[5]}%)`,
-    negative_400: `hsl(${hues.negative}, 91%, ${tokens.dimScale[6]}%)`,
+    negative_400: `hsl(${hues.negative}, 91%, ${dimScale[6]}%)`,
-    negative_500: `hsl(${hues.negative}, 91%, ${tokens.dimScale[7]}%)`,
+    negative_500: `hsl(${hues.negative}, 91%, ${dimScale[7]}%)`,
-    negative_600: `hsl(${hues.negative}, 91%, ${tokens.dimScale[8]}%)`,
+    negative_600: `hsl(${hues.negative}, 91%, ${dimScale[8]}%)`,
-    negative_700: `hsl(${hues.negative}, 91%, ${tokens.dimScale[9]}%)`,
+    negative_700: `hsl(${hues.negative}, 91%, ${dimScale[9]}%)`,
-    negative_800: `hsl(${hues.negative}, 88%, ${tokens.dimScale[10]}%)`,
+    negative_800: `hsl(${hues.negative}, 88%, ${dimScale[10]}%)`,
-    negative_900: `hsl(${hues.negative}, 84%, ${tokens.dimScale[11]}%)`,
+    negative_900: `hsl(${hues.negative}, 84%, ${dimScale[11]}%)`,
-    negative_950: `hsl(${hues.negative}, 80%, ${tokens.dimScale[12]}%)`,
+    negative_950: `hsl(${hues.negative}, 80%, ${dimScale[12]}%)`,
-    negative_975: `hsl(${hues.negative}, 70%, ${tokens.dimScale[13]}%)`,
+    negative_975: `hsl(${hues.negative}, 70%, ${dimScale[13]}%)`,
   } as const
 
   const light: Theme = {

src/alf/tokens.ts

@@ -1,77 +1,6 @@
-import {
-  BLUE_HUE,
-  generateScale,
-  GREEN_HUE,
-  RED_HUE,
-} from '#/alf/util/colorGeneration'
-
-export const scale = generateScale(6, 100)
-// dim shifted 6% lighter
-export const dimScale = generateScale(12, 100)
-
 export const color = {
-  trueBlack: '#000000',
-
   temp_purple: 'rgb(105 0 255)',
   temp_purple_dark: 'rgb(83 0 202)',
-
-  gray_0: `hsl(${BLUE_HUE}, 20%, ${scale[14]}%)`,
-  gray_25: `hsl(${BLUE_HUE}, 20%, ${scale[13]}%)`,
-  gray_50: `hsl(${BLUE_HUE}, 20%, ${scale[12]}%)`,
-  gray_100: `hsl(${BLUE_HUE}, 20%, ${scale[11]}%)`,
-  gray_200: `hsl(${BLUE_HUE}, 20%, ${scale[10]}%)`,
-  gray_300: `hsl(${BLUE_HUE}, 20%, ${scale[9]}%)`,
-  gray_400: `hsl(${BLUE_HUE}, 20%, ${scale[8]}%)`,
-  gray_500: `hsl(${BLUE_HUE}, 20%, ${scale[7]}%)`,
-  gray_600: `hsl(${BLUE_HUE}, 24%, ${scale[6]}%)`,
-  gray_700: `hsl(${BLUE_HUE}, 24%, ${scale[5]}%)`,
-  gray_800: `hsl(${BLUE_HUE}, 28%, ${scale[4]}%)`,
-  gray_900: `hsl(${BLUE_HUE}, 28%, ${scale[3]}%)`,
-  gray_950: `hsl(${BLUE_HUE}, 28%, ${scale[2]}%)`,
-  gray_975: `hsl(${BLUE_HUE}, 28%, ${scale[1]}%)`,
-  gray_1000: `hsl(${BLUE_HUE}, 28%, ${scale[0]}%)`,
-
-  blue_25: `hsl(${BLUE_HUE}, 99%, 97%)`,
-  blue_50: `hsl(${BLUE_HUE}, 99%, 95%)`,
-  blue_100: `hsl(${BLUE_HUE}, 99%, 90%)`,
-  blue_200: `hsl(${BLUE_HUE}, 99%, 80%)`,
-  blue_300: `hsl(${BLUE_HUE}, 99%, 70%)`,
-  blue_400: `hsl(${BLUE_HUE}, 99%, 60%)`,
-  blue_500: `hsl(${BLUE_HUE}, 99%, 53%)`,
-  blue_600: `hsl(${BLUE_HUE}, 99%, 42%)`,
-  blue_700: `hsl(${BLUE_HUE}, 99%, 34%)`,
-  blue_800: `hsl(${BLUE_HUE}, 99%, 26%)`,
-  blue_900: `hsl(${BLUE_HUE}, 99%, 18%)`,
-  blue_950: `hsl(${BLUE_HUE}, 99%, 10%)`,
-  blue_975: `hsl(${BLUE_HUE}, 99%, 7%)`,
-
-  green_25: `hsl(${GREEN_HUE}, 82%, 97%)`,
-  green_50: `hsl(${GREEN_HUE}, 82%, 95%)`,
-  green_100: `hsl(${GREEN_HUE}, 82%, 90%)`,
-  green_200: `hsl(${GREEN_HUE}, 82%, 80%)`,
-  green_300: `hsl(${GREEN_HUE}, 82%, 70%)`,
-  green_400: `hsl(${GREEN_HUE}, 82%, 60%)`,
-  green_500: `hsl(${GREEN_HUE}, 82%, 50%)`,
-  green_600: `hsl(${GREEN_HUE}, 82%, 42%)`,
-  green_700: `hsl(${GREEN_HUE}, 82%, 34%)`,
-  green_800: `hsl(${GREEN_HUE}, 82%, 26%)`,
-  green_900: `hsl(${GREEN_HUE}, 82%, 18%)`,
-  green_950: `hsl(${GREEN_HUE}, 82%, 10%)`,
-  green_975: `hsl(${GREEN_HUE}, 82%, 7%)`,
-
-  red_25: `hsl(${RED_HUE}, 91%, 97%)`,
-  red_50: `hsl(${RED_HUE}, 91%, 95%)`,
-  red_100: `hsl(${RED_HUE}, 91%, 90%)`,
-  red_200: `hsl(${RED_HUE}, 91%, 80%)`,
-  red_300: `hsl(${RED_HUE}, 91%, 70%)`,
-  red_400: `hsl(${RED_HUE}, 91%, 60%)`,
-  red_500: `hsl(${RED_HUE}, 91%, 50%)`,
-  red_600: `hsl(${RED_HUE}, 91%, 42%)`,
-  red_700: `hsl(${RED_HUE}, 91%, 34%)`,
-  red_800: `hsl(${RED_HUE}, 91%, 26%)`,
-  red_900: `hsl(${RED_HUE}, 91%, 18%)`,
-  red_950: `hsl(${RED_HUE}, 91%, 10%)`,
-  red_975: `hsl(${RED_HUE}, 91%, 7%)`,
 } as const
 
 export const space = {
@@ -178,10 +107,3 @@ export const gradients = {
     hover_value: '#755B62',
   },
 } as const
-
-export type Color = keyof typeof color
-export type Space = keyof typeof space
-export type FontSize = keyof typeof fontSize
-export type LineHeight = keyof typeof lineHeight
-export type BorderRadius = keyof typeof borderRadius
-export type FontWeight = keyof typeof fontWeight

src/alf/types.ts

@@ -1,21 +1,4 @@
-import {StyleProp, ViewStyle, TextStyle} from 'react-native'
+import {StyleProp, TextStyle, ViewStyle} from 'react-native'
-
-type LiteralToCommon<T extends PropertyKey> = T extends number
-  ? number
-  : T extends string
-  ? string
-  : T extends symbol
-  ? symbol
-  : never
-
-/**
- * @see https://stackoverflow.com/questions/68249999/use-as-const-in-typescript-without-adding-readonly-modifiers
- */
-export type Mutable<T> = {
-  -readonly [K in keyof T]: T[K] extends PropertyKey
-    ? LiteralToCommon<T[K]>
-    : Mutable<T[K]>
-}
 
 export type TextStyleProp = {
   style?: StyleProp<TextStyle>
@@ -24,3 +7,156 @@ export type TextStyleProp = {
 export type ViewStyleProp = {
   style?: StyleProp<ViewStyle>
 }
+
+export type ThemeName = 'light' | 'dim' | 'dark'
+export type Palette = {
+  white: string
+  black: string
+
+  contrast_25: string
+  contrast_50: string
+  contrast_100: string
+  contrast_200: string
+  contrast_300: string
+  contrast_400: string
+  contrast_500: string
+  contrast_600: string
+  contrast_700: string
+  contrast_800: string
+  contrast_900: string
+  contrast_950: string
+  contrast_975: string
+
+  primary_25: string
+  primary_50: string
+  primary_100: string
+  primary_200: string
+  primary_300: string
+  primary_400: string
+  primary_500: string
+  primary_600: string
+  primary_700: string
+  primary_800: string
+  primary_900: string
+  primary_950: string
+  primary_975: string
+
+  positive_25: string
+  positive_50: string
+  positive_100: string
+  positive_200: string
+  positive_300: string
+  positive_400: string
+  positive_500: string
+  positive_600: string
+  positive_700: string
+  positive_800: string
+  positive_900: string
+  positive_950: string
+  positive_975: string
+
+  negative_25: string
+  negative_50: string
+  negative_100: string
+  negative_200: string
+  negative_300: string
+  negative_400: string
+  negative_500: string
+  negative_600: string
+  negative_700: string
+  negative_800: string
+  negative_900: string
+  negative_950: string
+  negative_975: string
+}
+export type ThemedAtoms = {
+  text: {
+    color: string
+  }
+  text_contrast_low: {
+    color: string
+  }
+  text_contrast_medium: {
+    color: string
+  }
+  text_contrast_high: {
+    color: string
+  }
+  text_inverted: {
+    color: string
+  }
+  bg: {
+    backgroundColor: string
+  }
+  bg_contrast_25: {
+    backgroundColor: string
+  }
+  bg_contrast_50: {
+    backgroundColor: string
+  }
+  bg_contrast_100: {
+    backgroundColor: string
+  }
+  bg_contrast_200: {
+    backgroundColor: string
+  }
+  bg_contrast_300: {
+    backgroundColor: string
+  }
+  bg_contrast_400: {
+    backgroundColor: string
+  }
+  bg_contrast_500: {
+    backgroundColor: string
+  }
+  bg_contrast_600: {
+    backgroundColor: string
+  }
+  bg_contrast_700: {
+    backgroundColor: string
+  }
+  bg_contrast_800: {
+    backgroundColor: string
+  }
+  bg_contrast_900: {
+    backgroundColor: string
+  }
+  bg_contrast_950: {
+    backgroundColor: string
+  }
+  bg_contrast_975: {
+    backgroundColor: string
+  }
+  border_contrast_low: {
+    borderColor: string
+  }
+  border_contrast_medium: {
+    borderColor: string
+  }
+  border_contrast_high: {
+    borderColor: string
+  }
+  shadow_sm: {
+    shadowRadius: number
+    shadowOpacity: number
+    elevation: number
+    shadowColor: string
+  }
+  shadow_md: {
+    shadowRadius: number
+    shadowOpacity: number
+    elevation: number
+    shadowColor: string
+  }
+  shadow_lg: {
+    shadowRadius: number
+    shadowOpacity: number
+    elevation: number
+    shadowColor: string
+  }
+}
+export type Theme = {
+  name: ThemeName
+  palette: Palette
+  atoms: ThemedAtoms
+}

src/alf/util/themeSelector.ts

@@ -1,4 +1,4 @@
-import {ThemeName} from '#/alf/themes'
+import {ThemeName} from '#/alf/types'
 
 export function select<T>(name: ThemeName, options: Record<ThemeName, T>) {
   switch (name) {

src/alf/util/useColorModeTheme.ts

@@ -4,7 +4,8 @@ import * as SystemUI from 'expo-system-ui'
 
 import {isWeb} from 'platform/detection'
 import {useThemePrefs} from 'state/shell'
-import {dark, dim, light, ThemeName} from '#/alf/themes'
+import {dark, dim, light} from '#/alf/themes'
+import {ThemeName} from '#/alf/types'
 
 export function useColorModeTheme(): ThemeName {
   const theme = useThemeName()

src/components/icons/common.tsx

@@ -4,7 +4,7 @@ import type {PathProps, SvgProps} from 'react-native-svg'
 import {Defs, LinearGradient, Stop} from 'react-native-svg'
 import {nanoid} from 'nanoid/non-secure'
 
-import {tokens} from '#/alf'
+import {tokens, useTheme} from '#/alf'
 
 export type Props = {
   fill?: PathProps['fill']
@@ -22,10 +22,11 @@ export const sizes = {
 }
 
 export function useCommonSVGProps(props: Props) {
+  const t = useTheme()
   const {fill, size, gradient, ...rest} = props
   const style = StyleSheet.flatten(rest.style)
   const _size = Number(size ? sizes[size] : rest.width || sizes.md)
-  let _fill = fill || style?.color || tokens.color.blue_500
+  let _fill = fill || style?.color || t.palette.primary_500
   let gradientDef = null
 
   if (gradient && tokens.gradients[gradient]) {

src/lib/ThemeContext.tsx

@@ -1,7 +1,8 @@
-import React, {ReactNode, createContext, useContext} from 'react'
+import React, {createContext, ReactNode, useContext} from 'react'
 import {TextStyle, ViewStyle} from 'react-native'
+
+import {ThemeName} from '#/alf/types'
 import {darkTheme, defaultTheme, dimTheme} from './themes'
-import {ThemeName} from '#/alf/themes'
 
 export type ColorScheme = 'light' | 'dark'