esb.lol
Bluesky's "Application Layout Framework"
1import {type StyleProp, type TextStyle, type ViewStyle} from 'react-native'
2import {createContext, useContext, useMemo} from 'react'
3
4import {themes, type Theme} from './themes'
5
6export * from './atoms'
7export * from './palette'
8export * from './themes'
9export * from './platform'
10export * as tokens from './tokens'
11export * as utils from './utils'
12
13export type TextStyleProp = {
14 style?: StyleProp<TextStyle>
15}
16
17export type ViewStyleProp = {
18 style?: StyleProp<ViewStyle>
19}
20
21export const Context = createContext({
22 theme: themes.light,
23})
24Context.displayName = 'AlfContext'
25
26export function Provider<T extends string, A extends Record<T, Theme>>({
27 children,
28 activeTheme,
29 themes,
30}: React.PropsWithChildren<{
31 activeTheme: T
32 themes: A
33}>) {
34 const value = useMemo(
35 () => ({
36 theme: themes[activeTheme],
37 }),
38 [activeTheme, themes],
39 )
40
41 return <Context.Provider value={value}>{children}</Context.Provider>
42}
43
44export function useTheme() {
45 return useContext(Context).theme
46}