acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Cleanup

Browse Source
This commit is contained in:
Eric Bailey
2024-07-11 12:56:47 -05:00
parent f2d5cfcc13
commit 0991e58079
8 changed files with 245 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/alf/index.tsx
+4 -3
View File
@@ -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
theme: themes.Theme
themeName: ThemeName
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
+78 -226
View File
@@ -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'
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
}
import {generateScale} from '#/alf/util/colorGeneration'
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_25: `hsl(${hues.primary}, 20%, ${tokens.scale[13]}%)`,
gray_50: `hsl(${hues.primary}, 20%, ${tokens.scale[12]}%)`,
gray_100: `hsl(${hues.primary}, 20%, ${tokens.scale[11]}%)`,
gray_200: `hsl(${hues.primary}, 20%, ${tokens.scale[10]}%)`,
gray_300: `hsl(${hues.primary}, 20%, ${tokens.scale[9]}%)`,
gray_400: `hsl(${hues.primary}, 20%, ${tokens.scale[8]}%)`,
gray_500: `hsl(${hues.primary}, 20%, ${tokens.scale[7]}%)`,
gray_600: `hsl(${hues.primary}, 24%, ${tokens.scale[6]}%)`,
gray_700: `hsl(${hues.primary}, 24%, ${tokens.scale[5]}%)`,
gray_800: `hsl(${hues.primary}, 28%, ${tokens.scale[4]}%)`,
gray_900: `hsl(${hues.primary}, 28%, ${tokens.scale[3]}%)`,
gray_950: `hsl(${hues.primary}, 28%, ${tokens.scale[2]}%)`,
gray_975: `hsl(${hues.primary}, 28%, ${tokens.scale[1]}%)`,
gray_1000: `hsl(${hues.primary}, 28%, ${tokens.scale[0]}%)`,
gray_0: `hsl(${hues.primary}, 20%, ${scale[14]}%)`,
gray_25: `hsl(${hues.primary}, 20%, ${scale[13]}%)`,
gray_50: `hsl(${hues.primary}, 20%, ${scale[12]}%)`,
gray_100: `hsl(${hues.primary}, 20%, ${scale[11]}%)`,
gray_200: `hsl(${hues.primary}, 20%, ${scale[10]}%)`,
gray_300: `hsl(${hues.primary}, 20%, ${scale[9]}%)`,
gray_400: `hsl(${hues.primary}, 20%, ${scale[8]}%)`,
gray_500: `hsl(${hues.primary}, 20%, ${scale[7]}%)`,
gray_600: `hsl(${hues.primary}, 24%, ${scale[6]}%)`,
gray_700: `hsl(${hues.primary}, 24%, ${scale[5]}%)`,
gray_800: `hsl(${hues.primary}, 28%, ${scale[4]}%)`,
gray_900: `hsl(${hues.primary}, 28%, ${scale[3]}%)`,
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%)`,
@@ -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_50: `hsl(${hues.primary}, 28%, ${tokens.dimScale[2]}%)`,
contrast_100: `hsl(${hues.primary}, 28%, ${tokens.dimScale[3]}%)`,
contrast_200: `hsl(${hues.primary}, 28%, ${tokens.dimScale[4]}%)`,
contrast_300: `hsl(${hues.primary}, 24%, ${tokens.dimScale[5]}%)`,
contrast_400: `hsl(${hues.primary}, 24%, ${tokens.dimScale[6]}%)`,
contrast_500: `hsl(${hues.primary}, 20%, ${tokens.dimScale[7]}%)`,
contrast_600: `hsl(${hues.primary}, 20%, ${tokens.dimScale[8]}%)`,
contrast_700: `hsl(${hues.primary}, 20%, ${tokens.dimScale[9]}%)`,
contrast_800: `hsl(${hues.primary}, 20%, ${tokens.dimScale[10]}%)`,
contrast_900: `hsl(${hues.primary}, 20%, ${tokens.dimScale[11]}%)`,
contrast_950: `hsl(${hues.primary}, 20%, ${tokens.dimScale[12]}%)`,
contrast_975: `hsl(${hues.primary}, 20%, ${tokens.dimScale[13]}%)`,
contrast_25: `hsl(${hues.primary}, 28%, ${dimScale[1]}%)`,
contrast_50: `hsl(${hues.primary}, 28%, ${dimScale[2]}%)`,
contrast_100: `hsl(${hues.primary}, 28%, ${dimScale[3]}%)`,
contrast_200: `hsl(${hues.primary}, 28%, ${dimScale[4]}%)`,
contrast_300: `hsl(${hues.primary}, 24%, ${dimScale[5]}%)`,
contrast_400: `hsl(${hues.primary}, 24%, ${dimScale[6]}%)`,
contrast_500: `hsl(${hues.primary}, 20%, ${dimScale[7]}%)`,
contrast_600: `hsl(${hues.primary}, 20%, ${dimScale[8]}%)`,
contrast_700: `hsl(${hues.primary}, 20%, ${dimScale[9]}%)`,
contrast_800: `hsl(${hues.primary}, 20%, ${dimScale[10]}%)`,
contrast_900: `hsl(${hues.primary}, 20%, ${dimScale[11]}%)`,
contrast_950: `hsl(${hues.primary}, 20%, ${dimScale[12]}%)`,
contrast_975: `hsl(${hues.primary}, 20%, ${dimScale[13]}%)`,
primary_25: `hsl(${hues.primary}, 99%, ${tokens.dimScale[1]}%)`,
primary_50: `hsl(${hues.primary}, 99%, ${tokens.dimScale[2]}%)`,
primary_100: `hsl(${hues.primary}, 99%, ${tokens.dimScale[3]}%)`,
primary_200: `hsl(${hues.primary}, 99%, ${tokens.dimScale[4]}%)`,
primary_300: `hsl(${hues.primary}, 99%, ${tokens.dimScale[5]}%)`,
primary_400: `hsl(${hues.primary}, 99%, ${tokens.dimScale[6]}%)`,
primary_500: `hsl(${hues.primary}, 99%, ${tokens.dimScale[7]}%)`,
primary_600: `hsl(${hues.primary}, 95%, ${tokens.dimScale[8]}%)`,
primary_700: `hsl(${hues.primary}, 90%, ${tokens.dimScale[9]}%)`,
primary_800: `hsl(${hues.primary}, 82%, ${tokens.dimScale[10]}%)`,
primary_900: `hsl(${hues.primary}, 70%, ${tokens.dimScale[11]}%)`,
primary_950: `hsl(${hues.primary}, 60%, ${tokens.dimScale[12]}%)`,
primary_975: `hsl(${hues.primary}, 50%, ${tokens.dimScale[13]}%)`,
primary_25: `hsl(${hues.primary}, 99%, ${dimScale[1]}%)`,
primary_50: `hsl(${hues.primary}, 99%, ${dimScale[2]}%)`,
primary_100: `hsl(${hues.primary}, 99%, ${dimScale[3]}%)`,
primary_200: `hsl(${hues.primary}, 99%, ${dimScale[4]}%)`,
primary_300: `hsl(${hues.primary}, 99%, ${dimScale[5]}%)`,
primary_400: `hsl(${hues.primary}, 99%, ${dimScale[6]}%)`,
primary_500: `hsl(${hues.primary}, 99%, ${dimScale[7]}%)`,
primary_600: `hsl(${hues.primary}, 95%, ${dimScale[8]}%)`,
primary_700: `hsl(${hues.primary}, 90%, ${dimScale[9]}%)`,
primary_800: `hsl(${hues.primary}, 82%, ${dimScale[10]}%)`,
primary_900: `hsl(${hues.primary}, 70%, ${dimScale[11]}%)`,
primary_950: `hsl(${hues.primary}, 60%, ${dimScale[12]}%)`,
primary_975: `hsl(${hues.primary}, 50%, ${dimScale[13]}%)`,
positive_25: `hsl(${hues.positive}, 82%, ${tokens.dimScale[13]}%)`,
positive_50: `hsl(${hues.positive}, 82%, ${tokens.dimScale[12]}%)`,
positive_100: `hsl(${hues.positive}, 82%, ${tokens.dimScale[11]}%)`,
positive_200: `hsl(${hues.positive}, 82%, ${tokens.dimScale[10]}%)`,
positive_300: `hsl(${hues.positive}, 82%, ${tokens.dimScale[9]}%)`,
positive_400: `hsl(${hues.positive}, 82%, ${tokens.dimScale[8]}%)`,
positive_500: `hsl(${hues.positive}, 82%, ${tokens.dimScale[7]}%)`,
positive_600: `hsl(${hues.positive}, 82%, ${tokens.dimScale[6]}%)`,
positive_700: `hsl(${hues.positive}, 82%, ${tokens.dimScale[5]}%)`,
positive_800: `hsl(${hues.positive}, 82%, ${tokens.dimScale[4]}%)`,
positive_900: `hsl(${hues.positive}, 70%, ${tokens.dimScale[3]}%)`,
positive_950: `hsl(${hues.positive}, 60%, ${tokens.dimScale[2]}%)`,
positive_975: `hsl(${hues.positive}, 50%, ${tokens.dimScale[1]}%)`,
positive_25: `hsl(${hues.positive}, 82%, ${dimScale[13]}%)`,
positive_50: `hsl(${hues.positive}, 82%, ${dimScale[12]}%)`,
positive_100: `hsl(${hues.positive}, 82%, ${dimScale[11]}%)`,
positive_200: `hsl(${hues.positive}, 82%, ${dimScale[10]}%)`,
positive_300: `hsl(${hues.positive}, 82%, ${dimScale[9]}%)`,
positive_400: `hsl(${hues.positive}, 82%, ${dimScale[8]}%)`,
positive_500: `hsl(${hues.positive}, 82%, ${dimScale[7]}%)`,
positive_600: `hsl(${hues.positive}, 82%, ${dimScale[6]}%)`,
positive_700: `hsl(${hues.positive}, 82%, ${dimScale[5]}%)`,
positive_800: `hsl(${hues.positive}, 82%, ${dimScale[4]}%)`,
positive_900: `hsl(${hues.positive}, 70%, ${dimScale[3]}%)`,
positive_950: `hsl(${hues.positive}, 60%, ${dimScale[2]}%)`,
positive_975: `hsl(${hues.positive}, 50%, ${dimScale[1]}%)`,
negative_25: `hsl(${hues.negative}, 91%, ${tokens.dimScale[1]}%)`,
negative_50: `hsl(${hues.negative}, 91%, ${tokens.dimScale[2]}%)`,
negative_100: `hsl(${hues.negative}, 91%, ${tokens.dimScale[3]}%)`,
negative_200: `hsl(${hues.negative}, 91%, ${tokens.dimScale[4]}%)`,
negative_300: `hsl(${hues.negative}, 91%, ${tokens.dimScale[5]}%)`,
negative_400: `hsl(${hues.negative}, 91%, ${tokens.dimScale[6]}%)`,
negative_500: `hsl(${hues.negative}, 91%, ${tokens.dimScale[7]}%)`,
negative_600: `hsl(${hues.negative}, 91%, ${tokens.dimScale[8]}%)`,
negative_700: `hsl(${hues.negative}, 91%, ${tokens.dimScale[9]}%)`,
negative_800: `hsl(${hues.negative}, 88%, ${tokens.dimScale[10]}%)`,
negative_900: `hsl(${hues.negative}, 84%, ${tokens.dimScale[11]}%)`,
negative_950: `hsl(${hues.negative}, 80%, ${tokens.dimScale[12]}%)`,
negative_975: `hsl(${hues.negative}, 70%, ${tokens.dimScale[13]}%)`,
negative_25: `hsl(${hues.negative}, 91%, ${dimScale[1]}%)`,
negative_50: `hsl(${hues.negative}, 91%, ${dimScale[2]}%)`,
negative_100: `hsl(${hues.negative}, 91%, ${dimScale[3]}%)`,
negative_200: `hsl(${hues.negative}, 91%, ${dimScale[4]}%)`,
negative_300: `hsl(${hues.negative}, 91%, ${dimScale[5]}%)`,
negative_400: `hsl(${hues.negative}, 91%, ${dimScale[6]}%)`,
negative_500: `hsl(${hues.negative}, 91%, ${dimScale[7]}%)`,
negative_600: `hsl(${hues.negative}, 91%, ${dimScale[8]}%)`,
negative_700: `hsl(${hues.negative}, 91%, ${dimScale[9]}%)`,
negative_800: `hsl(${hues.negative}, 88%, ${dimScale[10]}%)`,
negative_900: `hsl(${hues.negative}, 84%, ${dimScale[11]}%)`,
negative_950: `hsl(${hues.negative}, 80%, ${dimScale[12]}%)`,
negative_975: `hsl(${hues.negative}, 70%, ${dimScale[13]}%)`,
} as const
const light: Theme = {
src/alf/tokens.ts
-78
View File
@@ -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
+154 -18
View File
@@ -1,21 +1,4 @@
import {StyleProp, ViewStyle, TextStyle} 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]>
}
import {StyleProp, TextStyle, ViewStyle} from 'react-native'
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 -1
View File
@@ -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
+2 -1
View File
@@ -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
+3 -2
View File
@@ -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
+3 -2
View File
@@ -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'