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
This commit is contained in:
Eric Bailey
+4
-997
File diff suppressed because it is too large
Load Diff
+5
-5
@@ -7,11 +7,11 @@ const WEB_FONT_FAMILIES = `system-ui, -apple-system, BlinkMacSystemFont, "Segoe
|
||||
|
||||
const factor = 0.0625 // 1 - (15/16)
|
||||
const fontScaleMultipliers: Record<Device['fontScale'], number> = {
|
||||
'-2': 1 - factor * 3,
|
||||
'-1': 1 - factor * 2,
|
||||
'0': 1 - factor * 1, // default
|
||||
'1': 1,
|
||||
'2': 1 + factor * 1,
|
||||
'-2': 1 - factor * 1, // unused
|
||||
'-1': 1 - factor * 1,
|
||||
'0': 1, // default
|
||||
'1': 1 + factor * 1,
|
||||
'2': 1 + factor * 1, // unused
|
||||
}
|
||||
|
||||
export function computeFontScaleMultiplier(scale: Device['fontScale']) {
|
||||
|
||||
+13
-30
@@ -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,
|
||||
|
||||
+39
-580
@@ -1,585 +1,44 @@
|
||||
import {atoms} from '#/alf/atoms'
|
||||
import {type Palette, type Theme} from '#/alf/types'
|
||||
import {
|
||||
BLUE_HUE,
|
||||
defaultScale,
|
||||
dimScale,
|
||||
GREEN_HUE,
|
||||
RED_HUE,
|
||||
} from '#/alf/util/colorGeneration'
|
||||
createThemes,
|
||||
DEFAULT_PALETTE,
|
||||
DEFAULT_SUBDUED_PALETTE,
|
||||
} from '@bsky.app/alf'
|
||||
|
||||
const themes = createThemes({
|
||||
hues: {
|
||||
primary: BLUE_HUE,
|
||||
negative: RED_HUE,
|
||||
positive: GREEN_HUE,
|
||||
},
|
||||
const DEFAULT_THEMES = createThemes({
|
||||
defaultPalette: DEFAULT_PALETTE,
|
||||
subduedPalette: DEFAULT_SUBDUED_PALETTE,
|
||||
})
|
||||
|
||||
/**
|
||||
* @deprecated use ALF and access palette from `useTheme()`
|
||||
*/
|
||||
export const lightPalette = themes.lightPalette
|
||||
/**
|
||||
* @deprecated use ALF and access palette from `useTheme()`
|
||||
*/
|
||||
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
|
||||
|
||||
export const defaultTheme = themes.light
|
||||
|
||||
export function createThemes({
|
||||
hues,
|
||||
}: {
|
||||
hues: {
|
||||
primary: number
|
||||
negative: number
|
||||
positive: number
|
||||
}
|
||||
}): {
|
||||
lightPalette: Palette
|
||||
darkPalette: Palette
|
||||
dimPalette: Palette
|
||||
light: Theme
|
||||
dark: Theme
|
||||
dim: Theme
|
||||
} {
|
||||
const color = {
|
||||
like: '#ec4899',
|
||||
trueBlack: '#000000',
|
||||
|
||||
gray_0: `hsl(${hues.primary}, 20%, ${defaultScale[14]}%)`,
|
||||
gray_25: `hsl(${hues.primary}, 20%, ${defaultScale[13]}%)`,
|
||||
gray_50: `hsl(${hues.primary}, 20%, ${defaultScale[12]}%)`,
|
||||
gray_100: `hsl(${hues.primary}, 20%, ${defaultScale[11]}%)`,
|
||||
gray_200: `hsl(${hues.primary}, 20%, ${defaultScale[10]}%)`,
|
||||
gray_300: `hsl(${hues.primary}, 20%, ${defaultScale[9]}%)`,
|
||||
gray_400: `hsl(${hues.primary}, 20%, ${defaultScale[8]}%)`,
|
||||
gray_500: `hsl(${hues.primary}, 20%, ${defaultScale[7]}%)`,
|
||||
gray_600: `hsl(${hues.primary}, 24%, ${defaultScale[6]}%)`,
|
||||
gray_700: `hsl(${hues.primary}, 24%, ${defaultScale[5]}%)`,
|
||||
gray_800: `hsl(${hues.primary}, 28%, ${defaultScale[4]}%)`,
|
||||
gray_900: `hsl(${hues.primary}, 28%, ${defaultScale[3]}%)`,
|
||||
gray_950: `hsl(${hues.primary}, 28%, ${defaultScale[2]}%)`,
|
||||
gray_975: `hsl(${hues.primary}, 28%, ${defaultScale[1]}%)`,
|
||||
gray_1000: `hsl(${hues.primary}, 28%, ${defaultScale[0]}%)`,
|
||||
|
||||
primary_25: `hsl(${hues.primary}, 99%, 97%)`,
|
||||
primary_50: `hsl(${hues.primary}, 99%, 95%)`,
|
||||
primary_100: `hsl(${hues.primary}, 99%, 90%)`,
|
||||
primary_200: `hsl(${hues.primary}, 99%, 80%)`,
|
||||
primary_300: `hsl(${hues.primary}, 99%, 70%)`,
|
||||
primary_400: `hsl(${hues.primary}, 99%, 60%)`,
|
||||
primary_500: `hsl(${hues.primary}, 99%, 53%)`,
|
||||
primary_600: `hsl(${hues.primary}, 99%, 42%)`,
|
||||
primary_700: `hsl(${hues.primary}, 99%, 34%)`,
|
||||
primary_800: `hsl(${hues.primary}, 99%, 26%)`,
|
||||
primary_900: `hsl(${hues.primary}, 99%, 18%)`,
|
||||
primary_950: `hsl(${hues.primary}, 99%, 10%)`,
|
||||
primary_975: `hsl(${hues.primary}, 99%, 7%)`,
|
||||
|
||||
green_25: `hsl(${hues.positive}, 82%, 97%)`,
|
||||
green_50: `hsl(${hues.positive}, 82%, 95%)`,
|
||||
green_100: `hsl(${hues.positive}, 82%, 90%)`,
|
||||
green_200: `hsl(${hues.positive}, 82%, 80%)`,
|
||||
green_300: `hsl(${hues.positive}, 82%, 70%)`,
|
||||
green_400: `hsl(${hues.positive}, 82%, 60%)`,
|
||||
green_500: `hsl(${hues.positive}, 82%, 50%)`,
|
||||
green_600: `hsl(${hues.positive}, 82%, 42%)`,
|
||||
green_700: `hsl(${hues.positive}, 82%, 34%)`,
|
||||
green_800: `hsl(${hues.positive}, 82%, 26%)`,
|
||||
green_900: `hsl(${hues.positive}, 82%, 18%)`,
|
||||
green_950: `hsl(${hues.positive}, 82%, 10%)`,
|
||||
green_975: `hsl(${hues.positive}, 82%, 7%)`,
|
||||
|
||||
red_25: `hsl(${hues.negative}, 91%, 97%)`,
|
||||
red_50: `hsl(${hues.negative}, 91%, 95%)`,
|
||||
red_100: `hsl(${hues.negative}, 91%, 90%)`,
|
||||
red_200: `hsl(${hues.negative}, 91%, 80%)`,
|
||||
red_300: `hsl(${hues.negative}, 91%, 70%)`,
|
||||
red_400: `hsl(${hues.negative}, 91%, 60%)`,
|
||||
red_500: `hsl(${hues.negative}, 91%, 50%)`,
|
||||
red_600: `hsl(${hues.negative}, 91%, 42%)`,
|
||||
red_700: `hsl(${hues.negative}, 91%, 34%)`,
|
||||
red_800: `hsl(${hues.negative}, 91%, 26%)`,
|
||||
red_900: `hsl(${hues.negative}, 91%, 18%)`,
|
||||
red_950: `hsl(${hues.negative}, 91%, 10%)`,
|
||||
red_975: `hsl(${hues.negative}, 91%, 7%)`,
|
||||
} as const
|
||||
|
||||
const lightPalette = {
|
||||
white: color.gray_0,
|
||||
black: color.gray_1000,
|
||||
like: color.like,
|
||||
|
||||
contrast_25: color.gray_25,
|
||||
contrast_50: color.gray_50,
|
||||
contrast_100: color.gray_100,
|
||||
contrast_200: color.gray_200,
|
||||
contrast_300: color.gray_300,
|
||||
contrast_400: color.gray_400,
|
||||
contrast_500: color.gray_500,
|
||||
contrast_600: color.gray_600,
|
||||
contrast_700: color.gray_700,
|
||||
contrast_800: color.gray_800,
|
||||
contrast_900: color.gray_900,
|
||||
contrast_950: color.gray_950,
|
||||
contrast_975: color.gray_975,
|
||||
|
||||
primary_25: color.primary_25,
|
||||
primary_50: color.primary_50,
|
||||
primary_100: color.primary_100,
|
||||
primary_200: color.primary_200,
|
||||
primary_300: color.primary_300,
|
||||
primary_400: color.primary_400,
|
||||
primary_500: color.primary_500,
|
||||
primary_600: color.primary_600,
|
||||
primary_700: color.primary_700,
|
||||
primary_800: color.primary_800,
|
||||
primary_900: color.primary_900,
|
||||
primary_950: color.primary_950,
|
||||
primary_975: color.primary_975,
|
||||
|
||||
positive_25: color.green_25,
|
||||
positive_50: color.green_50,
|
||||
positive_100: color.green_100,
|
||||
positive_200: color.green_200,
|
||||
positive_300: color.green_300,
|
||||
positive_400: color.green_400,
|
||||
positive_500: color.green_500,
|
||||
positive_600: color.green_600,
|
||||
positive_700: color.green_700,
|
||||
positive_800: color.green_800,
|
||||
positive_900: color.green_900,
|
||||
positive_950: color.green_950,
|
||||
positive_975: color.green_975,
|
||||
|
||||
negative_25: color.red_25,
|
||||
negative_50: color.red_50,
|
||||
negative_100: color.red_100,
|
||||
negative_200: color.red_200,
|
||||
negative_300: color.red_300,
|
||||
negative_400: color.red_400,
|
||||
negative_500: color.red_500,
|
||||
negative_600: color.red_600,
|
||||
negative_700: color.red_700,
|
||||
negative_800: color.red_800,
|
||||
negative_900: color.red_900,
|
||||
negative_950: color.red_950,
|
||||
negative_975: color.red_975,
|
||||
} as const
|
||||
|
||||
const darkPalette: Palette = {
|
||||
white: color.gray_25,
|
||||
black: color.trueBlack,
|
||||
like: color.like,
|
||||
|
||||
contrast_25: color.gray_975,
|
||||
contrast_50: color.gray_950,
|
||||
contrast_100: color.gray_900,
|
||||
contrast_200: color.gray_800,
|
||||
contrast_300: color.gray_700,
|
||||
contrast_400: color.gray_600,
|
||||
contrast_500: color.gray_500,
|
||||
contrast_600: color.gray_400,
|
||||
contrast_700: color.gray_300,
|
||||
contrast_800: color.gray_200,
|
||||
contrast_900: color.gray_100,
|
||||
contrast_950: color.gray_50,
|
||||
contrast_975: color.gray_25,
|
||||
|
||||
primary_25: color.primary_975,
|
||||
primary_50: color.primary_950,
|
||||
primary_100: color.primary_900,
|
||||
primary_200: color.primary_800,
|
||||
primary_300: color.primary_700,
|
||||
primary_400: color.primary_600,
|
||||
primary_500: color.primary_500,
|
||||
primary_600: color.primary_400,
|
||||
primary_700: color.primary_300,
|
||||
primary_800: color.primary_200,
|
||||
primary_900: color.primary_100,
|
||||
primary_950: color.primary_50,
|
||||
primary_975: color.primary_25,
|
||||
|
||||
positive_25: color.green_975,
|
||||
positive_50: color.green_950,
|
||||
positive_100: color.green_900,
|
||||
positive_200: color.green_800,
|
||||
positive_300: color.green_700,
|
||||
positive_400: color.green_600,
|
||||
positive_500: color.green_500,
|
||||
positive_600: color.green_400,
|
||||
positive_700: color.green_300,
|
||||
positive_800: color.green_200,
|
||||
positive_900: color.green_100,
|
||||
positive_950: color.green_50,
|
||||
positive_975: color.green_25,
|
||||
|
||||
negative_25: color.red_975,
|
||||
negative_50: color.red_950,
|
||||
negative_100: color.red_900,
|
||||
negative_200: color.red_800,
|
||||
negative_300: color.red_700,
|
||||
negative_400: color.red_600,
|
||||
negative_500: color.red_500,
|
||||
negative_600: color.red_400,
|
||||
negative_700: color.red_300,
|
||||
negative_800: color.red_200,
|
||||
negative_900: color.red_100,
|
||||
negative_950: color.red_50,
|
||||
negative_975: color.red_25,
|
||||
} as const
|
||||
|
||||
const dimPalette: Palette = {
|
||||
...darkPalette,
|
||||
black: `hsl(${hues.primary}, 28%, ${dimScale[0]}%)`,
|
||||
like: color.like,
|
||||
|
||||
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}, 50%, ${dimScale[1]}%)`,
|
||||
primary_50: `hsl(${hues.primary}, 60%, ${dimScale[2]}%)`,
|
||||
primary_100: `hsl(${hues.primary}, 70%, ${dimScale[3]}%)`,
|
||||
primary_200: `hsl(${hues.primary}, 82%, ${dimScale[4]}%)`,
|
||||
primary_300: `hsl(${hues.primary}, 90%, ${dimScale[5]}%)`,
|
||||
primary_400: `hsl(${hues.primary}, 95%, ${dimScale[6]}%)`,
|
||||
primary_500: `hsl(${hues.primary}, 99%, ${dimScale[7]}%)`,
|
||||
primary_600: `hsl(${hues.primary}, 99%, ${dimScale[8]}%)`,
|
||||
primary_700: `hsl(${hues.primary}, 99%, ${dimScale[9]}%)`,
|
||||
primary_800: `hsl(${hues.primary}, 99%, ${dimScale[10]}%)`,
|
||||
primary_900: `hsl(${hues.primary}, 99%, ${dimScale[11]}%)`,
|
||||
primary_950: `hsl(${hues.primary}, 99%, ${dimScale[12]}%)`,
|
||||
primary_975: `hsl(${hues.primary}, 99%, ${dimScale[13]}%)`,
|
||||
|
||||
positive_25: `hsl(${hues.positive}, 50%, ${dimScale[1]}%)`,
|
||||
positive_50: `hsl(${hues.positive}, 60%, ${dimScale[2]}%)`,
|
||||
positive_100: `hsl(${hues.positive}, 70%, ${dimScale[3]}%)`,
|
||||
positive_200: `hsl(${hues.positive}, 82%, ${dimScale[4]}%)`,
|
||||
positive_300: `hsl(${hues.positive}, 82%, ${dimScale[5]}%)`,
|
||||
positive_400: `hsl(${hues.positive}, 82%, ${dimScale[6]}%)`,
|
||||
positive_500: `hsl(${hues.positive}, 82%, ${dimScale[7]}%)`,
|
||||
positive_600: `hsl(${hues.positive}, 82%, ${dimScale[8]}%)`,
|
||||
positive_700: `hsl(${hues.positive}, 82%, ${dimScale[9]}%)`,
|
||||
positive_800: `hsl(${hues.positive}, 82%, ${dimScale[10]}%)`,
|
||||
positive_900: `hsl(${hues.positive}, 82%, ${dimScale[11]}%)`,
|
||||
positive_950: `hsl(${hues.positive}, 82%, ${dimScale[12]}%)`,
|
||||
positive_975: `hsl(${hues.positive}, 82%, ${dimScale[13]}%)`,
|
||||
|
||||
negative_25: `hsl(${hues.negative}, 70%, ${dimScale[1]}%)`,
|
||||
negative_50: `hsl(${hues.negative}, 80%, ${dimScale[2]}%)`,
|
||||
negative_100: `hsl(${hues.negative}, 84%, ${dimScale[3]}%)`,
|
||||
negative_200: `hsl(${hues.negative}, 88%, ${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}, 91%, ${dimScale[10]}%)`,
|
||||
negative_900: `hsl(${hues.negative}, 91%, ${dimScale[11]}%)`,
|
||||
negative_950: `hsl(${hues.negative}, 91%, ${dimScale[12]}%)`,
|
||||
negative_975: `hsl(${hues.negative}, 91%, ${dimScale[13]}%)`,
|
||||
} as const
|
||||
|
||||
const light: Theme = {
|
||||
scheme: 'light',
|
||||
name: 'light',
|
||||
palette: lightPalette,
|
||||
atoms: {
|
||||
text: {
|
||||
color: lightPalette.black,
|
||||
},
|
||||
text_contrast_low: {
|
||||
color: lightPalette.contrast_400,
|
||||
},
|
||||
text_contrast_medium: {
|
||||
color: lightPalette.contrast_700,
|
||||
},
|
||||
text_contrast_high: {
|
||||
color: lightPalette.contrast_900,
|
||||
},
|
||||
text_inverted: {
|
||||
color: lightPalette.white,
|
||||
},
|
||||
bg: {
|
||||
backgroundColor: lightPalette.white,
|
||||
},
|
||||
bg_contrast_25: {
|
||||
backgroundColor: lightPalette.contrast_25,
|
||||
},
|
||||
bg_contrast_50: {
|
||||
backgroundColor: lightPalette.contrast_50,
|
||||
},
|
||||
bg_contrast_100: {
|
||||
backgroundColor: lightPalette.contrast_100,
|
||||
},
|
||||
bg_contrast_200: {
|
||||
backgroundColor: lightPalette.contrast_200,
|
||||
},
|
||||
bg_contrast_300: {
|
||||
backgroundColor: lightPalette.contrast_300,
|
||||
},
|
||||
bg_contrast_400: {
|
||||
backgroundColor: lightPalette.contrast_400,
|
||||
},
|
||||
bg_contrast_500: {
|
||||
backgroundColor: lightPalette.contrast_500,
|
||||
},
|
||||
bg_contrast_600: {
|
||||
backgroundColor: lightPalette.contrast_600,
|
||||
},
|
||||
bg_contrast_700: {
|
||||
backgroundColor: lightPalette.contrast_700,
|
||||
},
|
||||
bg_contrast_800: {
|
||||
backgroundColor: lightPalette.contrast_800,
|
||||
},
|
||||
bg_contrast_900: {
|
||||
backgroundColor: lightPalette.contrast_900,
|
||||
},
|
||||
bg_contrast_950: {
|
||||
backgroundColor: lightPalette.contrast_950,
|
||||
},
|
||||
bg_contrast_975: {
|
||||
backgroundColor: lightPalette.contrast_975,
|
||||
},
|
||||
border_contrast_low: {
|
||||
borderColor: lightPalette.contrast_100,
|
||||
},
|
||||
border_contrast_medium: {
|
||||
borderColor: lightPalette.contrast_200,
|
||||
},
|
||||
border_contrast_high: {
|
||||
borderColor: lightPalette.contrast_300,
|
||||
},
|
||||
shadow_sm: {
|
||||
...atoms.shadow_sm,
|
||||
shadowColor: lightPalette.black,
|
||||
},
|
||||
shadow_md: {
|
||||
...atoms.shadow_md,
|
||||
shadowColor: lightPalette.black,
|
||||
},
|
||||
shadow_lg: {
|
||||
...atoms.shadow_lg,
|
||||
shadowColor: lightPalette.black,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const dark: Theme = {
|
||||
scheme: 'dark',
|
||||
name: 'dark',
|
||||
palette: darkPalette,
|
||||
atoms: {
|
||||
text: {
|
||||
color: darkPalette.white,
|
||||
},
|
||||
text_contrast_low: {
|
||||
color: darkPalette.contrast_400,
|
||||
},
|
||||
text_contrast_medium: {
|
||||
color: darkPalette.contrast_600,
|
||||
},
|
||||
text_contrast_high: {
|
||||
color: darkPalette.contrast_900,
|
||||
},
|
||||
text_inverted: {
|
||||
color: darkPalette.black,
|
||||
},
|
||||
bg: {
|
||||
backgroundColor: darkPalette.black,
|
||||
},
|
||||
bg_contrast_25: {
|
||||
backgroundColor: darkPalette.contrast_25,
|
||||
},
|
||||
bg_contrast_50: {
|
||||
backgroundColor: darkPalette.contrast_50,
|
||||
},
|
||||
bg_contrast_100: {
|
||||
backgroundColor: darkPalette.contrast_100,
|
||||
},
|
||||
bg_contrast_200: {
|
||||
backgroundColor: darkPalette.contrast_200,
|
||||
},
|
||||
bg_contrast_300: {
|
||||
backgroundColor: darkPalette.contrast_300,
|
||||
},
|
||||
bg_contrast_400: {
|
||||
backgroundColor: darkPalette.contrast_400,
|
||||
},
|
||||
bg_contrast_500: {
|
||||
backgroundColor: darkPalette.contrast_500,
|
||||
},
|
||||
bg_contrast_600: {
|
||||
backgroundColor: darkPalette.contrast_600,
|
||||
},
|
||||
bg_contrast_700: {
|
||||
backgroundColor: darkPalette.contrast_700,
|
||||
},
|
||||
bg_contrast_800: {
|
||||
backgroundColor: darkPalette.contrast_800,
|
||||
},
|
||||
bg_contrast_900: {
|
||||
backgroundColor: darkPalette.contrast_900,
|
||||
},
|
||||
bg_contrast_950: {
|
||||
backgroundColor: darkPalette.contrast_950,
|
||||
},
|
||||
bg_contrast_975: {
|
||||
backgroundColor: darkPalette.contrast_975,
|
||||
},
|
||||
border_contrast_low: {
|
||||
borderColor: darkPalette.contrast_100,
|
||||
},
|
||||
border_contrast_medium: {
|
||||
borderColor: darkPalette.contrast_200,
|
||||
},
|
||||
border_contrast_high: {
|
||||
borderColor: darkPalette.contrast_300,
|
||||
},
|
||||
shadow_sm: {
|
||||
...atoms.shadow_sm,
|
||||
shadowOpacity: 0.7,
|
||||
shadowColor: color.trueBlack,
|
||||
},
|
||||
shadow_md: {
|
||||
...atoms.shadow_md,
|
||||
shadowOpacity: 0.7,
|
||||
shadowColor: color.trueBlack,
|
||||
},
|
||||
shadow_lg: {
|
||||
...atoms.shadow_lg,
|
||||
shadowOpacity: 0.7,
|
||||
shadowColor: color.trueBlack,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const dim: Theme = {
|
||||
...dark,
|
||||
scheme: 'dark',
|
||||
name: 'dim',
|
||||
palette: dimPalette,
|
||||
atoms: {
|
||||
...dark.atoms,
|
||||
text: {
|
||||
color: dimPalette.white,
|
||||
},
|
||||
text_contrast_low: {
|
||||
color: dimPalette.contrast_400,
|
||||
},
|
||||
text_contrast_medium: {
|
||||
color: dimPalette.contrast_600,
|
||||
},
|
||||
text_contrast_high: {
|
||||
color: dimPalette.contrast_900,
|
||||
},
|
||||
text_inverted: {
|
||||
color: dimPalette.black,
|
||||
},
|
||||
bg: {
|
||||
backgroundColor: dimPalette.black,
|
||||
},
|
||||
bg_contrast_25: {
|
||||
backgroundColor: dimPalette.contrast_25,
|
||||
},
|
||||
bg_contrast_50: {
|
||||
backgroundColor: dimPalette.contrast_50,
|
||||
},
|
||||
bg_contrast_100: {
|
||||
backgroundColor: dimPalette.contrast_100,
|
||||
},
|
||||
bg_contrast_200: {
|
||||
backgroundColor: dimPalette.contrast_200,
|
||||
},
|
||||
bg_contrast_300: {
|
||||
backgroundColor: dimPalette.contrast_300,
|
||||
},
|
||||
bg_contrast_400: {
|
||||
backgroundColor: dimPalette.contrast_400,
|
||||
},
|
||||
bg_contrast_500: {
|
||||
backgroundColor: dimPalette.contrast_500,
|
||||
},
|
||||
bg_contrast_600: {
|
||||
backgroundColor: dimPalette.contrast_600,
|
||||
},
|
||||
bg_contrast_700: {
|
||||
backgroundColor: dimPalette.contrast_700,
|
||||
},
|
||||
bg_contrast_800: {
|
||||
backgroundColor: dimPalette.contrast_800,
|
||||
},
|
||||
bg_contrast_900: {
|
||||
backgroundColor: dimPalette.contrast_900,
|
||||
},
|
||||
bg_contrast_950: {
|
||||
backgroundColor: dimPalette.contrast_950,
|
||||
},
|
||||
bg_contrast_975: {
|
||||
backgroundColor: dimPalette.contrast_975,
|
||||
},
|
||||
border_contrast_low: {
|
||||
borderColor: dimPalette.contrast_100,
|
||||
},
|
||||
border_contrast_medium: {
|
||||
borderColor: dimPalette.contrast_200,
|
||||
},
|
||||
border_contrast_high: {
|
||||
borderColor: dimPalette.contrast_300,
|
||||
},
|
||||
shadow_sm: {
|
||||
...atoms.shadow_sm,
|
||||
shadowOpacity: 0.7,
|
||||
shadowColor: `hsl(${hues.primary}, 28%, 6%)`,
|
||||
},
|
||||
shadow_md: {
|
||||
...atoms.shadow_md,
|
||||
shadowOpacity: 0.7,
|
||||
shadowColor: `hsl(${hues.primary}, 28%, 6%)`,
|
||||
},
|
||||
shadow_lg: {
|
||||
...atoms.shadow_lg,
|
||||
shadowOpacity: 0.7,
|
||||
shadowColor: `hsl(${hues.primary}, 28%, 6%)`,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
return {
|
||||
lightPalette,
|
||||
darkPalette,
|
||||
dimPalette,
|
||||
light,
|
||||
dark,
|
||||
dim,
|
||||
}
|
||||
export const themes = {
|
||||
lightPalette: DEFAULT_THEMES.light.palette,
|
||||
darkPalette: DEFAULT_THEMES.dark.palette,
|
||||
dimPalette: DEFAULT_THEMES.dim.palette,
|
||||
light: DEFAULT_THEMES.light,
|
||||
dark: DEFAULT_THEMES.dark,
|
||||
dim: DEFAULT_THEMES.dim,
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated use ALF and access palette from `useTheme()`
|
||||
*/
|
||||
export const lightPalette = DEFAULT_THEMES.light.palette
|
||||
/**
|
||||
* @deprecated use ALF and access palette from `useTheme()`
|
||||
*/
|
||||
export const darkPalette = DEFAULT_THEMES.dark.palette
|
||||
/**
|
||||
* @deprecated use ALF and access palette from `useTheme()`
|
||||
*/
|
||||
export const dimPalette = DEFAULT_THEMES.dim.palette
|
||||
/**
|
||||
* @deprecated use ALF and access theme from `useTheme()`
|
||||
*/
|
||||
export const light = DEFAULT_THEMES.light
|
||||
/**
|
||||
* @deprecated use ALF and access theme from `useTheme()`
|
||||
*/
|
||||
export const dark = DEFAULT_THEMES.dark
|
||||
/**
|
||||
* @deprecated use ALF and access theme from `useTheme()`
|
||||
*/
|
||||
export const dim = DEFAULT_THEMES.dim
|
||||
|
||||
+4
-55
@@ -1,61 +1,10 @@
|
||||
import {isAndroid} from '#/platform/detection'
|
||||
import {tokens} from '@bsky.app/alf'
|
||||
|
||||
export const TRACKING = isAndroid ? 0.1 : 0
|
||||
export * from '@bsky.app/alf/dist/tokens'
|
||||
|
||||
export const color = {
|
||||
temp_purple: 'rgb(105 0 255)',
|
||||
temp_purple_dark: 'rgb(83 0 202)',
|
||||
} as const
|
||||
|
||||
export const space = {
|
||||
_2xs: 2,
|
||||
xs: 4,
|
||||
sm: 8,
|
||||
md: 12,
|
||||
lg: 16,
|
||||
xl: 20,
|
||||
_2xl: 24,
|
||||
_3xl: 28,
|
||||
_4xl: 32,
|
||||
_5xl: 40,
|
||||
} as const
|
||||
|
||||
export const fontSize = {
|
||||
_2xs: 10,
|
||||
xs: 12,
|
||||
sm: 14,
|
||||
md: 16,
|
||||
lg: 18,
|
||||
xl: 20,
|
||||
_2xl: 22,
|
||||
_3xl: 26,
|
||||
_4xl: 32,
|
||||
_5xl: 40,
|
||||
} as const
|
||||
|
||||
export const lineHeight = {
|
||||
none: 1,
|
||||
normal: 1.5,
|
||||
relaxed: 1.625,
|
||||
} as const
|
||||
|
||||
export const borderRadius = {
|
||||
_2xs: 2,
|
||||
xs: 4,
|
||||
sm: 8,
|
||||
md: 12,
|
||||
lg: 16,
|
||||
full: 999,
|
||||
} as const
|
||||
|
||||
/**
|
||||
* These correspond to Inter font files we actually load.
|
||||
*/
|
||||
export const fontWeight = {
|
||||
normal: '400',
|
||||
medium: '500',
|
||||
bold: '600',
|
||||
heavy: '800',
|
||||
temp_purple: tokens.labelerColor.purple,
|
||||
temp_purple_dark: tokens.labelerColor.purple_dark,
|
||||
} as const
|
||||
|
||||
export const gradients = {
|
||||
|
||||
@@ -1,164 +0,0 @@
|
||||
import {type StyleProp, type TextStyle, type ViewStyle} from 'react-native'
|
||||
|
||||
export type TextStyleProp = {
|
||||
style?: StyleProp<TextStyle>
|
||||
}
|
||||
|
||||
export type ViewStyleProp = {
|
||||
style?: StyleProp<ViewStyle>
|
||||
}
|
||||
|
||||
export type ThemeName = 'light' | 'dim' | 'dark'
|
||||
export type Palette = {
|
||||
white: string
|
||||
black: string
|
||||
like: 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 = {
|
||||
scheme: 'light' | 'dark' // for library support
|
||||
name: ThemeName
|
||||
palette: Palette
|
||||
atoms: ThemedAtoms
|
||||
}
|
||||
@@ -8,21 +8,6 @@ import {isNative} from '#/platform/detection'
|
||||
import {isIOS} from '#/platform/detection'
|
||||
import {type Alf, applyFonts, atoms, flatten} from '#/alf'
|
||||
|
||||
/**
|
||||
* Util to calculate lineHeight from a text size atom and a leading atom
|
||||
*
|
||||
* Example:
|
||||
* `leading(atoms.text_md, atoms.leading_normal)` // => 24
|
||||
*/
|
||||
export function leading<
|
||||
Size extends {fontSize?: number},
|
||||
Leading extends {lineHeight?: number},
|
||||
>(textSize: Size, leading: Leading) {
|
||||
const size = textSize?.fontSize || atoms.text_md.fontSize
|
||||
const lineHeight = leading?.lineHeight || atoms.leading_normal.lineHeight
|
||||
return Math.round(size * lineHeight)
|
||||
}
|
||||
|
||||
/**
|
||||
* Ensures that `lineHeight` defaults to a relative value of `1`, or applies
|
||||
* other relative leading atoms.
|
||||
|
||||
@@ -1,12 +1,7 @@
|
||||
import {jest} from '@jest/globals'
|
||||
|
||||
import {logger} from '#/logger'
|
||||
import {transparentifyColor} from '../colorGeneration'
|
||||
|
||||
jest.mock('#/logger', () => ({
|
||||
logger: {warn: jest.fn()},
|
||||
}))
|
||||
|
||||
describe('transparentifyColor', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks()
|
||||
@@ -41,8 +36,5 @@ describe('transparentifyColor', () => {
|
||||
const unsupported = 'blue'
|
||||
const result = transparentifyColor(unsupported, 0.5)
|
||||
expect(result).toBe(unsupported)
|
||||
expect(logger.warn).toHaveBeenCalledWith(
|
||||
`Could not make '${unsupported}' transparent`,
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,49 +1,8 @@
|
||||
import {logger} from '#/logger'
|
||||
import {utils} from '@bsky.app/alf'
|
||||
|
||||
export const BLUE_HUE = 211
|
||||
export const RED_HUE = 346
|
||||
export const GREEN_HUE = 152
|
||||
|
||||
/**
|
||||
* Smooth progression of lightness "stops" for generating HSL colors.
|
||||
* @deprecated use `utils.alpha` from `@bsky.app/alf` instead
|
||||
*/
|
||||
export const COLOR_STOPS = [
|
||||
0, 0.05, 0.1, 0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.85, 0.9, 0.95, 1,
|
||||
]
|
||||
|
||||
export function generateScale(start: number, end: number) {
|
||||
const range = end - start
|
||||
return COLOR_STOPS.map(stop => {
|
||||
return start + range * stop
|
||||
})
|
||||
}
|
||||
|
||||
export const defaultScale = generateScale(6, 100)
|
||||
// dim shifted 6% lighter
|
||||
export const dimScale = generateScale(12, 100)
|
||||
|
||||
export function transparentifyColor(color: string, alpha: number) {
|
||||
if (color.startsWith('hsl(')) {
|
||||
return 'hsla(' + color.slice('hsl('.length, -1) + `, ${alpha})`
|
||||
} else if (color.startsWith('rgb(')) {
|
||||
return 'rgba(' + color.slice('rgb('.length, -1) + `, ${alpha})`
|
||||
} else if (color.startsWith('#')) {
|
||||
if (color.length === 7) {
|
||||
const alphaHex = Math.round(alpha * 255).toString(16)
|
||||
// Per MDN: If there is only one number, it is duplicated: e means ee
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color
|
||||
return color.slice(0, 7) + alphaHex.padStart(2, alphaHex)
|
||||
} else if (color.length === 4) {
|
||||
// convert to 6-digit hex before adding alpha
|
||||
const [r, g, b] = color.slice(1).split('')
|
||||
const alphaHex = Math.round(alpha * 255).toString(16)
|
||||
return `#${r.repeat(2)}${g.repeat(2)}${b.repeat(2)}${alphaHex.padStart(
|
||||
2,
|
||||
alphaHex,
|
||||
)}`
|
||||
}
|
||||
} else {
|
||||
logger.warn(`Could not make '${color}' transparent`)
|
||||
}
|
||||
return color
|
||||
}
|
||||
export const transparentifyColor = utils.alpha
|
||||
|
||||
@@ -1,62 +1 @@
|
||||
import {Platform} from 'react-native'
|
||||
|
||||
import {isAndroid, isIOS, isNative, isWeb} from '#/platform/detection'
|
||||
|
||||
/**
|
||||
* Identity function on web. Returns nothing on other platforms.
|
||||
*
|
||||
* Note: Platform splitting does not tree-shake away the other platforms,
|
||||
* so don't do stuff like e.g. rely on platform-specific imports. Use
|
||||
* platform-split files instead.
|
||||
*/
|
||||
export function web(value: any) {
|
||||
if (isWeb) {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Identity function on iOS. Returns nothing on other platforms.
|
||||
*
|
||||
* Note: Platform splitting does not tree-shake away the other platforms,
|
||||
* so don't do stuff like e.g. rely on platform-specific imports. Use
|
||||
* platform-split files instead.
|
||||
*/
|
||||
export function ios(value: any) {
|
||||
if (isIOS) {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Identity function on Android. Returns nothing on other platforms..
|
||||
*
|
||||
* Note: Platform splitting does not tree-shake away the other platforms,
|
||||
* so don't do stuff like e.g. rely on platform-specific imports. Use
|
||||
* platform-split files instead.
|
||||
*/
|
||||
export function android(value: any) {
|
||||
if (isAndroid) {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Identity function on iOS and Android. Returns nothing on web.
|
||||
*
|
||||
* Note: Platform splitting does not tree-shake away the other platforms,
|
||||
* so don't do stuff like e.g. rely on platform-specific imports. Use
|
||||
* platform-split files instead.
|
||||
*/
|
||||
export function native(value: any) {
|
||||
if (isNative) {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Note: Platform splitting does not tree-shake away the other platforms,
|
||||
* so don't do stuff like e.g. rely on platform-specific imports. Use
|
||||
* platform-split files instead.
|
||||
*/
|
||||
export const platform = Platform.select
|
||||
export {android, ios, native, platform, web} from '@bsky.app/alf'
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as SystemUI from 'expo-system-ui'
|
||||
import {type Theme} from '@bsky.app/alf'
|
||||
|
||||
import {isAndroid} from '#/platform/detection'
|
||||
import {type Theme} from '../types'
|
||||
|
||||
export function setSystemUITheme(themeType: 'theme' | 'lightbox', t: Theme) {
|
||||
if (isAndroid) {
|
||||
|
||||
@@ -1,14 +1,3 @@
|
||||
import {type ThemeName} from '#/alf/types'
|
||||
import {utils} from '@bsky.app/alf'
|
||||
|
||||
export function select<T>(name: ThemeName, options: Record<ThemeName, T>) {
|
||||
switch (name) {
|
||||
case 'light':
|
||||
return options.light
|
||||
case 'dark':
|
||||
return options.dark || options.dim
|
||||
case 'dim':
|
||||
return options.dim || options.dark
|
||||
default:
|
||||
throw new Error(`select(theme, options) received unknown theme ${name}`)
|
||||
}
|
||||
}
|
||||
export const select = utils.select
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import React from 'react'
|
||||
import {type ColorSchemeName, useColorScheme} from 'react-native'
|
||||
import {type ThemeName} from '@bsky.app/alf'
|
||||
|
||||
import {isWeb} from '#/platform/detection'
|
||||
import {useThemePrefs} from '#/state/shell'
|
||||
import {dark, dim, light} from '#/alf/themes'
|
||||
import {type ThemeName} from '#/alf/types'
|
||||
|
||||
export function useColorModeTheme(): ThemeName {
|
||||
const theme = useThemeName()
|
||||
|
||||
Reference in New Issue
Block a user