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

Some cleanup

Browse Source
This commit is contained in:
Eric Bailey
2023-12-13 17:33:02 -06:00
parent 09ce02cc7d
commit e8042f2afc
12 changed files with 204 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/nova/components/Box.tsx
+3
View File
@@ -0,0 +1,3 @@
import {View} from 'react-native'
import {styled} from '#/view/nova/system'
export const Box = styled(View)
src/view/nova/components/Button.tsx
+9
View File
@@ -0,0 +1,9 @@
import {Pressable} from 'react-native'
import {styled} from '#/view/nova/system'
export const Button = styled(Pressable, {
px: 'l',
py: 's',
bg: 'l3',
radius: 40,
})
src/view/nova/components/Typography.tsx
+74
View File
@@ -0,0 +1,74 @@
import {Text as RNText} from 'react-native'
import {styled} from '#/view/nova/system'
import {web} from '#/view/nova/util/platform'
export const Text = styled(RNText, {
color: 'l8',
fontSize: 's',
})
/**
* @see https://necolas.github.io/react-native-web/docs/accessibility/#semantic-html
* @see https://docs.expo.dev/develop/user-interface/fonts/
*/
export const H1 = styled(RNText, {
color: 'l8',
fontSize: 'l',
gtMobile: {
fontSize: 'xl',
},
...web({
role: 'heading',
'aria-level': 1,
}),
})
export const H2 = styled(RNText, {
color: 'l8',
fontSize: 'm',
gtMobile: {
fontSize: 'l',
},
...web({
role: 'heading',
'aria-level': 2,
}),
})
export const H3 = styled(RNText, {
color: 'l8',
fontSize: 'm',
...web({
role: 'heading',
'aria-level': 3,
}),
})
export const H4 = styled(RNText, {
color: 'l8',
fontSize: 's',
...web({
role: 'heading',
'aria-level': 4,
}),
})
export const H5 = styled(RNText, {
color: 'l8',
fontSize: 'xs',
...web({
role: 'heading',
'aria-level': 5,
}),
})
export const H6 = styled(RNText, {
color: 'l8',
fontSize: 'xxs',
...web({
role: 'heading',
'aria-level': 6,
}),
})
export const P = styled(RNText, {
color: 'l8',
fontSize: 's',
...web({
role: 'paragraph',
}),
})
src/view/nova/index.tsx
+4 -102
View File
@@ -1,102 +1,4 @@
import {View, Text as RNText} from 'react-native'
import {createSystem} from './lib/system'
import {light, dark} from './themes'
import {web} from './lib/utils'
export * from './lib/utils'
const {
ThemeProvider,
useTheme,
useTokens,
useBreakpoints,
useStyle,
useStyles,
styled,
} = createSystem({
light,
dark,
})
export {
ThemeProvider,
useTheme,
useTokens,
useBreakpoints,
useStyle,
useStyles,
styled,
}
export const Box = styled(View)
export const Text = styled(RNText, {
color: 'l8',
fontSize: 's',
})
/**
* @see https://necolas.github.io/react-native-web/docs/accessibility/#semantic-html
* @see https://docs.expo.dev/develop/user-interface/fonts/
*/
export const H1 = styled(RNText, {
color: 'l8',
fontSize: 'l',
gtMobile: {
fontSize: 'xl',
},
...web({
role: 'heading',
'aria-level': 1,
}),
})
export const H2 = styled(RNText, {
color: 'l8',
fontSize: 'm',
gtMobile: {
fontSize: 'l',
},
...web({
role: 'heading',
'aria-level': 2,
}),
})
export const H3 = styled(RNText, {
color: 'l8',
fontSize: 'm',
...web({
role: 'heading',
'aria-level': 3,
}),
})
export const H4 = styled(RNText, {
color: 'l8',
fontSize: 's',
...web({
role: 'heading',
'aria-level': 4,
}),
})
export const H5 = styled(RNText, {
color: 'l8',
fontSize: 'xs',
...web({
role: 'heading',
'aria-level': 5,
}),
})
export const H6 = styled(RNText, {
color: 'l8',
fontSize: 'xxs',
...web({
role: 'heading',
'aria-level': 6,
}),
})
export const P = styled(RNText, {
color: 'l8',
fontSize: 's',
...web({
role: 'paragraph',
}),
})
export * from '#/view/nova/system'
export * from '#/view/nova/components/Box'
export * from '#/view/nova/components/Typography'
export * from '#/view/nova/components/Button'
src/view/nova/lib/system.tsx
+9 -6
View File
@@ -55,11 +55,14 @@ export function createSystem<
theme,
}: React.PropsWithChildren<{theme: ThemeName}>) => (
<Context.Provider
value={{
themeName: theme,
theme: themes[theme],
themes,
}}>
value={React.useMemo(
() => ({
themeName: theme,
theme: themes[theme],
themes,
}),
[theme],
)}>
{children}
</Context.Provider>
)
@@ -74,7 +77,7 @@ export function createSystem<
function useBreakpoints() {
const {theme} = useTheme()
const [breakpoints, setBreakpoints] = React.useState(
const [breakpoints, setBreakpoints] = React.useState(() =>
theme.getActiveBreakpoints({width: Dimensions.get('window').width}),
)
src/view/nova/system.ts
+28
View File
@@ -0,0 +1,28 @@
/**
* Library imports
*/
import {createSystem} from './lib/system'
import {light, dark} from './themes'
const {
ThemeProvider,
useTheme,
useTokens,
useBreakpoints,
useStyle,
useStyles,
styled,
} = createSystem({
light,
dark,
})
export {
ThemeProvider,
useTheme,
useTokens,
useBreakpoints,
useStyle,
useStyles,
styled,
}
src/view/nova/themes.ts
+10 -1
View File
@@ -16,6 +16,15 @@ const palette = {
export const light = createTheme({
tokens: {
space: {
xxs: 2,
xs: 4,
s: 8,
m: 12,
l: 18,
xl: 24,
xxl: 32,
},
color: {
primary: palette.blue,
l1: palette.white,
@@ -118,7 +127,7 @@ export const light = createTheme({
/**
* Shorthand for applying `fontSize` and `fontHeight`, according to our type scale.
*/
fontSize(value: 'xs' | 's' | 'm' | 'l' | 'xl', tokens) {
fontSize(value: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl', tokens) {
return {
fontSize: tokens.fontSize[value],
lineHeight: tokens.lineHeight[value],
src/view/nova/lib/utils.ts → src/view/nova/util/platform.ts
View File
src/view/nova/util/useColorModeTheme.ts
+9
View File
@@ -0,0 +1,9 @@
import * as persisted from '#/state/persisted'
import {useColorScheme_FIXED} from '#/lib/hooks/useColorScheme_FIXED'
export function useColorModeTheme(
theme: persisted.Schema['colorMode'],
): 'light' | 'dark' {
const colorScheme = useColorScheme_FIXED()
return (theme === 'system' ? colorScheme : theme) || 'light'
}