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

Better naming, better code

Browse Source
This commit is contained in:
Eric Bailey
2023-12-21 16:58:27 -06:00
parent b3e19afd63
commit 3e11c11e59
7 changed files with 184 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/alf/README.md
+13 -24
View File
@@ -1,34 +1,23 @@
# Application Layout Framework (ALF) # Application Layout Framework (ALF)
```tsx ```tsx
import { View } from 'react-native' import {View} from 'react-native'
import { useAlf } from '#/alf' import {atoms, useTheme, useBreakpoints, web} from '#/alf'
import { H3 } from '#/view/com/Typography' import {H3, Text} from '#/view/com/Typography'
function App() { function App() {
const { styles, breakpoints } = useAlf() const theme = useAlf()
const breakpoints = useBreakpoints()
return ( return (
<View style={[styles.flex.row, styles.padding.pa.xl]}> <View style={[atoms.flex.row, atoms.padding.pa.xl, web({height: '100vh'})]}>
<H3 style={[styles.padding.pb.m, styles.color.primary]}>I'm the blue color</H3> <H3 style={[atoms.padding.pb.m, theme.atoms.color.primary]}>
</View> I'm the blue color
) </H3>
}
``` {breakpoints.gtMobile && (
<Text style={[theme.atoms.backgroundColor.l1]}>Only visible on tablet and above!</Text>
Is a little nicer than: )}
```tsx
import { View } from 'react-native'
import { useTheme, styles } from '#/alf'
import { H3 } from '#/view/com/Typography'
function App() {
const theme = useTheme()
return (
<View style={[styles.flex.row, styles.padding.pa.xl]}>
<H3 style={[styles.padding.pb.m, theme.color.primary]}>I'm the blue color</H3>
</View> </View>
) )
} }
src/alf/styles.ts → src/alf/atoms.ts
+1 -1
View File
@@ -252,7 +252,7 @@ const margin = Object.keys(tokens.space).reduce(
}, },
) )
export const styles = { export const atoms = {
radius, radius,
padding, padding,
margin, margin,
src/alf/index.tsx
+6 -7
View File
@@ -2,8 +2,7 @@ import React from 'react'
import {Dimensions} from 'react-native' import {Dimensions} from 'react-native'
import * as themes from '#/alf/themes' import * as themes from '#/alf/themes'
export * as tokens from '#/alf/tokens' export {atoms} from '#/alf/atoms'
export {styles} from '#/alf/styles'
export * from '#/alf/util/platform' export * from '#/alf/util/platform'
type BreakpointName = keyof typeof breakpoints type BreakpointName = keyof typeof breakpoints
@@ -34,7 +33,7 @@ function getActiveBreakpoints({width}: {width: number}) {
*/ */
export const Context = React.createContext<{ export const Context = React.createContext<{
themeName: themes.ThemeName themeName: themes.ThemeName
styles: themes.Theme theme: themes.Theme
breakpoints: { breakpoints: {
active: BreakpointName | undefined active: BreakpointName | undefined
gtMobile: boolean gtMobile: boolean
@@ -42,7 +41,7 @@ export const Context = React.createContext<{
} }
}>({ }>({
themeName: 'light', themeName: 'light',
styles: themes.light, theme: themes.light,
breakpoints: { breakpoints: {
active: undefined, active: undefined,
gtMobile: false, gtMobile: false,
@@ -73,7 +72,7 @@ export function ThemeProvider({
value={React.useMemo( value={React.useMemo(
() => ({ () => ({
themeName: themeName, themeName: themeName,
styles: theme, theme: theme,
breakpoints, breakpoints,
}), }),
[theme, themeName, breakpoints], [theme, themeName, breakpoints],
@@ -83,8 +82,8 @@ export function ThemeProvider({
) )
} }
export function useAlf() { export function useTheme() {
return React.useContext(Context) return React.useContext(Context).theme
} }
export function useBreakpoints() { export function useBreakpoints() {
src/alf/themes.ts
+35 -32
View File
@@ -1,5 +1,4 @@
import * as tokens from '#/alf/tokens' import * as tokens from '#/alf/tokens'
import {styles as sharedStyles} from '#/alf/styles'
export type ThemeName = 'light' | 'dark' export type ThemeName = 'light' | 'dark'
export type Theme = typeof light export type Theme = typeof light
@@ -47,37 +46,41 @@ export const darkPalette: Palette = {
} as const } as const
export const light = { export const light = {
...sharedStyles, palette: lightPalette,
color: Object.keys(lightPalette).reduce((acc, key) => { atoms: {
const k = key as keyof Palette color: Object.keys(lightPalette).reduce((acc, key) => {
acc[k] = { const k = key as keyof Palette
color: lightPalette[k], acc[k] = {
} color: lightPalette[k],
return acc }
}, {} as Record<keyof Palette, {color: string}>), return acc
backgroundColor: Object.keys(lightPalette).reduce((acc, key) => { }, {} as Record<keyof Palette, {color: string}>),
const k = key as keyof Palette backgroundColor: Object.keys(lightPalette).reduce((acc, key) => {
acc[k] = { const k = key as keyof Palette
backgroundColor: lightPalette[k], acc[k] = {
} backgroundColor: lightPalette[k],
return acc }
}, {} as Record<keyof Palette, {backgroundColor: string}>), return acc
}, {} as Record<keyof Palette, {backgroundColor: string}>),
},
} as const } as const
export const dark = { export const dark: Theme = {
...sharedStyles, palette: darkPalette,
color: Object.keys(darkPalette).reduce((acc, key) => { atoms: {
const k = key as keyof Palette color: Object.keys(darkPalette).reduce((acc, key) => {
acc[k] = { const k = key as keyof Palette
color: darkPalette[k], acc[k] = {
} color: darkPalette[k],
return acc }
}, {} as Record<keyof Palette, {color: string}>), return acc
backgroundColor: Object.keys(darkPalette).reduce((acc, key) => { }, {} as Record<keyof Palette, {color: string}>),
const k = key as keyof Palette backgroundColor: Object.keys(darkPalette).reduce((acc, key) => {
acc[k] = { const k = key as keyof Palette
backgroundColor: darkPalette[k], acc[k] = {
} backgroundColor: darkPalette[k],
return acc }
}, {} as Record<keyof Palette, {backgroundColor: string}>), return acc
}, {} as Record<keyof Palette, {backgroundColor: string}>),
},
} as const } as const
src/view/com/Button.tsx
+25 -26
View File
@@ -1,6 +1,7 @@
import React from 'react' import React from 'react'
import {Pressable, Text, PressableProps, TextProps} from 'react-native' import {Pressable, Text, PressableProps, TextProps} from 'react-native'
import {useAlf, tokens} from '#/alf' import * as tokens from '#/alf/tokens'
import {useTheme, atoms} from '#/alf'
export type ButtonType = export type ButtonType =
| 'primary' | 'primary'
@@ -33,18 +34,18 @@ export type ButtonProps = Omit<PressableProps, 'children'> &
export type ButtonTextProps = TextProps & VariantProps export type ButtonTextProps = TextProps & VariantProps
export function Button({children, style, type, size, ...rest}: ButtonProps) { export function Button({children, style, type, size, ...rest}: ButtonProps) {
const {styles} = useAlf() const t = useTheme()
const {baseStyles, hoverStyles} = React.useMemo(() => { const {baseStyles, hoverStyles} = React.useMemo(() => {
const baseStyles = [] const baseStyles = []
const hoverStyles = [] const hoverStyles = []
switch (type) { switch (type) {
case 'primary': case 'primary':
baseStyles.push(styles.backgroundColor.primary) baseStyles.push(t.atoms.backgroundColor.primary)
break break
case 'secondary': case 'secondary':
baseStyles.push(styles.backgroundColor.l2) baseStyles.push(t.atoms.backgroundColor.l2)
hoverStyles.push(styles.backgroundColor.l1) hoverStyles.push(t.atoms.backgroundColor.l1)
break break
default: default:
} }
@@ -52,18 +53,18 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
switch (size) { switch (size) {
case 'large': case 'large':
baseStyles.push( baseStyles.push(
styles.padding.py.m, atoms.padding.py.m,
styles.padding.px.xl, atoms.padding.px.xl,
styles.radius.m, atoms.radius.m,
styles.flex.gap.s, atoms.flex.gap.s,
) )
break break
case 'small': case 'small':
baseStyles.push( baseStyles.push(
styles.padding.py.s, atoms.padding.py.s,
styles.padding.px.m, atoms.padding.px.m,
styles.radius.s, atoms.radius.s,
styles.flex.gap.xs, atoms.flex.gap.xs,
) )
break break
default: default:
@@ -73,7 +74,7 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
baseStyles, baseStyles,
hoverStyles, hoverStyles,
} }
}, [type, size, styles]) }, [type, size, t])
const [state, setState] = React.useState({ const [state, setState] = React.useState({
pressed: false, pressed: false,
@@ -122,8 +123,8 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
<Pressable <Pressable
{...rest} {...rest}
style={state => [ style={state => [
styles.flex.row, atoms.flex.row,
styles.flex.alignCenter, atoms.flex.alignCenter,
...baseStyles, ...baseStyles,
...(state.hovered ? hoverStyles : []), ...(state.hovered ? hoverStyles : []),
typeof style === 'function' ? style(state) : style, typeof style === 'function' ? style(state) : style,
@@ -154,7 +155,7 @@ export function ButtonText({
size, size,
...rest ...rest
}: ButtonTextProps) { }: ButtonTextProps) {
const {styles} = useAlf() const t = useTheme()
const textStyles = React.useMemo(() => { const textStyles = React.useMemo(() => {
const base = [] const base = []
@@ -163,33 +164,31 @@ export function ButtonText({
base.push({color: tokens.color.white}) base.push({color: tokens.color.white})
break break
case 'secondary': case 'secondary':
base.push(styles.color.l5) base.push(t.atoms.color.l5)
break break
default: default:
} }
switch (size) { switch (size) {
case 'small': case 'small':
base.push(styles.font.s, {paddingBottom: 1}) base.push(atoms.font.s, {paddingBottom: 1})
break break
case 'large': case 'large':
base.push(styles.font.m, {paddingBottom: 1}) base.push(atoms.font.m, {paddingBottom: 1})
break break
default: default:
} }
return base return base
}, [type, size, styles]) }, [type, size, t])
console.log(textStyles)
return ( return (
<Text <Text
{...rest} {...rest}
style={[ style={[
styles.flex.one, atoms.flex.one,
styles.font.semi, atoms.font.semi,
styles.font.center, atoms.font.center,
...textStyles, ...textStyles,
style, style,
]}> ]}>
src/view/com/Typography.tsx
+15 -15
View File
@@ -1,14 +1,14 @@
import React from 'react' import React from 'react'
import {Text as RNText, TextProps} from 'react-native' import {Text as RNText, TextProps} from 'react-native'
import {useAlf, web} from '#/alf' import {useTheme, atoms, web} from '#/alf'
export function Text({style, ...rest}: TextProps) { export function Text({style, ...rest}: TextProps) {
const {styles} = useAlf() const t = useTheme()
return <RNText style={[styles.font.s, styles.color.l7, style]} {...rest} /> return <RNText style={[atoms.font.s, t.atoms.color.l7, style]} {...rest} />
} }
export function H1({style, ...rest}: TextProps) { export function H1({style, ...rest}: TextProps) {
const {styles} = useAlf() const t = useTheme()
const attr = const attr =
web({ web({
role: 'heading', role: 'heading',
@@ -18,13 +18,13 @@ export function H1({style, ...rest}: TextProps) {
<RNText <RNText
{...attr} {...attr}
{...rest} {...rest}
style={[styles.font.xxl, styles.font.bold, styles.color.l7, style]} style={[atoms.font.xxl, atoms.font.bold, t.atoms.color.l7, style]}
/> />
) )
} }
export function H2({style, ...rest}: TextProps) { export function H2({style, ...rest}: TextProps) {
const {styles} = useAlf() const t = useTheme()
const attr = const attr =
web({ web({
role: 'heading', role: 'heading',
@@ -34,13 +34,13 @@ export function H2({style, ...rest}: TextProps) {
<RNText <RNText
{...attr} {...attr}
{...rest} {...rest}
style={[styles.font.l, styles.font.bold, styles.color.l7, style]} style={[atoms.font.l, atoms.font.bold, t.atoms.color.l7, style]}
/> />
) )
} }
export function H3({style, ...rest}: TextProps) { export function H3({style, ...rest}: TextProps) {
const {styles} = useAlf() const t = useTheme()
const attr = const attr =
web({ web({
role: 'heading', role: 'heading',
@@ -50,13 +50,13 @@ export function H3({style, ...rest}: TextProps) {
<RNText <RNText
{...attr} {...attr}
{...rest} {...rest}
style={[styles.font.m, styles.font.bold, styles.color.l7, style]} style={[atoms.font.m, atoms.font.bold, t.atoms.color.l7, style]}
/> />
) )
} }
export function H4({style, ...rest}: TextProps) { export function H4({style, ...rest}: TextProps) {
const {styles} = useAlf() const t = useTheme()
const attr = const attr =
web({ web({
role: 'heading', role: 'heading',
@@ -66,13 +66,13 @@ export function H4({style, ...rest}: TextProps) {
<RNText <RNText
{...attr} {...attr}
{...rest} {...rest}
style={[styles.font.s, styles.font.bold, styles.color.l7, style]} style={[atoms.font.s, atoms.font.bold, t.atoms.color.l7, style]}
/> />
) )
} }
export function H5({style, ...rest}: TextProps) { export function H5({style, ...rest}: TextProps) {
const {styles} = useAlf() const t = useTheme()
const attr = const attr =
web({ web({
role: 'heading', role: 'heading',
@@ -82,13 +82,13 @@ export function H5({style, ...rest}: TextProps) {
<RNText <RNText
{...attr} {...attr}
{...rest} {...rest}
style={[styles.font.xs, styles.font.bold, styles.color.l7, style]} style={[atoms.font.xs, atoms.font.bold, t.atoms.color.l7, style]}
/> />
) )
} }
export function H6({style, ...rest}: TextProps) { export function H6({style, ...rest}: TextProps) {
const {styles} = useAlf() const t = useTheme()
const attr = const attr =
web({ web({
role: 'heading', role: 'heading',
@@ -98,7 +98,7 @@ export function H6({style, ...rest}: TextProps) {
<RNText <RNText
{...attr} {...attr}
{...rest} {...rest}
style={[styles.font.xxs, styles.font.bold, styles.color.l7, style]} style={[atoms.font.xxs, atoms.font.bold, t.atoms.color.l7, style]}
/> />
) )
} }
src/view/screens/DebugNew.tsx
+89 -89
View File
@@ -4,16 +4,15 @@ import {CenteredView, ScrollView} from '#/view/com/util/Views'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useSetColorMode} from '#/state/shell' import {useSetColorMode} from '#/state/shell'
import {useAlf, ThemeProvider as Alf} from '#/alf' import {atoms, useTheme, useBreakpoints, ThemeProvider as Alf} from '#/alf'
import {Button, ButtonText} from '#/view/com/Button' import {Button, ButtonText} from '#/view/com/Button'
import {Text, H1, H2, H3, H4, H5, H6} from '#/view/com/Typography' import {Text, H1, H2, H3, H4, H5, H6} from '#/view/com/Typography'
function ThemeSelector() { function ThemeSelector() {
const setColorMode = useSetColorMode() const setColorMode = useSetColorMode()
const {styles} = useAlf()
return ( return (
<View style={[styles.flex.row, styles.flex.gap.m]}> <View style={[atoms.flex.row, atoms.flex.gap.m]}>
<Button <Button
type="secondary" type="secondary"
size="small" size="small"
@@ -37,20 +36,21 @@ function ThemeSelector() {
} }
function BreakpointDebugger() { function BreakpointDebugger() {
const {styles, breakpoints} = useAlf() const t = useTheme()
const breakpoints = useBreakpoints()
return ( return (
<View> <View>
<H3 style={[styles.padding.pb.m]}>Breakpoint Debugger</H3> <H3 style={[atoms.padding.pb.m]}>Breakpoint Debugger</H3>
<Text style={[styles.padding.pb.m]}> <Text style={[atoms.padding.pb.m]}>
Current breakpoint: {!breakpoints.gtMobile && <Text>mobile</Text>} Current breakpoint: {!breakpoints.gtMobile && <Text>mobile</Text>}
{breakpoints.gtMobile && !breakpoints.gtTablet && <Text>tablet</Text>} {breakpoints.gtMobile && !breakpoints.gtTablet && <Text>tablet</Text>}
{breakpoints.gtTablet && <Text>desktop</Text>} {breakpoints.gtTablet && <Text>desktop</Text>}
</Text> </Text>
<Text <Text
style={[ style={[
styles.padding.pa.m, atoms.padding.pa.m,
styles.backgroundColor.l1, t.atoms.backgroundColor.l1,
{fontFamily: 'monospace'}, {fontFamily: 'monospace'},
]}> ]}>
{JSON.stringify(breakpoints, null, 2)} {JSON.stringify(breakpoints, null, 2)}
@@ -60,37 +60,37 @@ function BreakpointDebugger() {
} }
function ThemedSection() { function ThemedSection() {
const {styles} = useAlf() const t = useTheme()
return ( return (
<View style={[styles.backgroundColor.l0, styles.padding.pa.m]}> <View style={[t.atoms.backgroundColor.l0, atoms.padding.pa.m]}>
<H3 style={[styles.padding.pb.m, styles.font.bold]}> <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>
Colors (this theme is always light) Colors (this theme is always light)
</H3> </H3>
<View style={[styles.flex.row, styles.flex.gap.m]}> <View style={[atoms.flex.row, atoms.flex.gap.m]}>
<View <View
style={[styles.flex.one, styles.backgroundColor.l0, {height: 60}]} style={[atoms.flex.one, t.atoms.backgroundColor.l0, {height: 60}]}
/> />
<View <View
style={[styles.flex.one, styles.backgroundColor.l1, {height: 60}]} style={[atoms.flex.one, t.atoms.backgroundColor.l1, {height: 60}]}
/> />
<View <View
style={[styles.flex.one, styles.backgroundColor.l2, {height: 60}]} style={[atoms.flex.one, t.atoms.backgroundColor.l2, {height: 60}]}
/> />
<View <View
style={[styles.flex.one, styles.backgroundColor.l3, {height: 60}]} style={[atoms.flex.one, t.atoms.backgroundColor.l3, {height: 60}]}
/> />
<View <View
style={[styles.flex.one, styles.backgroundColor.l4, {height: 60}]} style={[atoms.flex.one, t.atoms.backgroundColor.l4, {height: 60}]}
/> />
<View <View
style={[styles.flex.one, styles.backgroundColor.l5, {height: 60}]} style={[atoms.flex.one, t.atoms.backgroundColor.l5, {height: 60}]}
/> />
<View <View
style={[styles.flex.one, styles.backgroundColor.l6, {height: 60}]} style={[atoms.flex.one, t.atoms.backgroundColor.l6, {height: 60}]}
/> />
<View <View
style={[styles.flex.one, styles.backgroundColor.l7, {height: 60}]} style={[atoms.flex.one, t.atoms.backgroundColor.l7, {height: 60}]}
/> />
</View> </View>
</View> </View>
@@ -98,15 +98,15 @@ function ThemedSection() {
} }
export function DebugScreen() { export function DebugScreen() {
const {styles} = useAlf() const t = useTheme()
return ( return (
<ScrollView> <ScrollView>
<CenteredView style={[styles.backgroundColor.l0]}> <CenteredView style={[t.atoms.backgroundColor.l0]}>
<View <View
style={[ style={[
styles.padding.pa.xl, atoms.padding.pa.xl,
styles.flex.gap.xxl, atoms.flex.gap.xxl,
{paddingBottom: 200}, {paddingBottom: 200},
]}> ]}>
<ThemeSelector /> <ThemeSelector />
@@ -114,61 +114,61 @@ export function DebugScreen() {
<BreakpointDebugger /> <BreakpointDebugger />
<View> <View>
<H3 style={[styles.padding.pb.m, styles.font.bold]}>Colors</H3> <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Colors</H3>
<View style={[styles.flex.row, styles.flex.gap.m]}> <View style={[atoms.flex.row, atoms.flex.gap.m]}>
<View <View
style={[ style={[
styles.flex.one, atoms.flex.one,
styles.backgroundColor.l0, t.atoms.backgroundColor.l0,
{height: 60}, {height: 60},
]} ]}
/> />
<View <View
style={[ style={[
styles.flex.one, atoms.flex.one,
styles.backgroundColor.l1, t.atoms.backgroundColor.l1,
{height: 60}, {height: 60},
]} ]}
/> />
<View <View
style={[ style={[
styles.flex.one, atoms.flex.one,
styles.backgroundColor.l2, t.atoms.backgroundColor.l2,
{height: 60}, {height: 60},
]} ]}
/> />
<View <View
style={[ style={[
styles.flex.one, atoms.flex.one,
styles.backgroundColor.l3, t.atoms.backgroundColor.l3,
{height: 60}, {height: 60},
]} ]}
/> />
<View <View
style={[ style={[
styles.flex.one, atoms.flex.one,
styles.backgroundColor.l4, t.atoms.backgroundColor.l4,
{height: 60}, {height: 60},
]} ]}
/> />
<View <View
style={[ style={[
styles.flex.one, atoms.flex.one,
styles.backgroundColor.l5, t.atoms.backgroundColor.l5,
{height: 60}, {height: 60},
]} ]}
/> />
<View <View
style={[ style={[
styles.flex.one, atoms.flex.one,
styles.backgroundColor.l6, t.atoms.backgroundColor.l6,
{height: 60}, {height: 60},
]} ]}
/> />
<View <View
style={[ style={[
styles.flex.one, atoms.flex.one,
styles.backgroundColor.l7, t.atoms.backgroundColor.l7,
{height: 60}, {height: 60},
]} ]}
/> />
@@ -176,76 +176,76 @@ export function DebugScreen() {
</View> </View>
<View> <View>
<H3 style={[styles.padding.pb.m, styles.font.bold]}>Spacing</H3> <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Spacing</H3>
<View style={[styles.flex.gap.m]}> <View style={[atoms.flex.gap.m]}>
<View style={[styles.flex.row, styles.flex.alignCenter]}> <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
<Text style={{width: 80}}>xxs (2px)</Text> <Text style={{width: 80}}>xxs (2px)</Text>
<View <View
style={[ style={[
styles.flex.one, atoms.flex.one,
styles.padding.pt.xxs, atoms.padding.pt.xxs,
styles.backgroundColor.l3, t.atoms.backgroundColor.l3,
]} ]}
/> />
</View> </View>
<View style={[styles.flex.row, styles.flex.alignCenter]}> <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
<Text style={{width: 80}}>xs (4px)</Text> <Text style={{width: 80}}>xs (4px)</Text>
<View <View
style={[ style={[
styles.flex.one, atoms.flex.one,
styles.padding.pt.xs, atoms.padding.pt.xs,
styles.backgroundColor.l3, t.atoms.backgroundColor.l3,
]} ]}
/> />
</View> </View>
<View style={[styles.flex.row, styles.flex.alignCenter]}> <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
<Text style={{width: 80}}>s (8px)</Text> <Text style={{width: 80}}>s (8px)</Text>
<View <View
style={[ style={[
styles.flex.one, atoms.flex.one,
styles.padding.pt.s, atoms.padding.pt.s,
styles.backgroundColor.l3, t.atoms.backgroundColor.l3,
]} ]}
/> />
</View> </View>
<View style={[styles.flex.row, styles.flex.alignCenter]}> <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
<Text style={{width: 80}}>m (12px)</Text> <Text style={{width: 80}}>m (12px)</Text>
<View <View
style={[ style={[
styles.flex.one, atoms.flex.one,
styles.padding.pt.m, atoms.padding.pt.m,
styles.backgroundColor.l3, t.atoms.backgroundColor.l3,
]} ]}
/> />
</View> </View>
<View style={[styles.flex.row, styles.flex.alignCenter]}> <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
<Text style={{width: 80}}>l (18px)</Text> <Text style={{width: 80}}>l (18px)</Text>
<View <View
style={[ style={[
styles.flex.one, atoms.flex.one,
styles.padding.pt.l, atoms.padding.pt.l,
styles.backgroundColor.l3, t.atoms.backgroundColor.l3,
]} ]}
/> />
</View> </View>
<View style={[styles.flex.row, styles.flex.alignCenter]}> <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
<Text style={{width: 80}}>xl (24px)</Text> <Text style={{width: 80}}>xl (24px)</Text>
<View <View
style={[ style={[
styles.flex.one, atoms.flex.one,
styles.padding.pt.xl, atoms.padding.pt.xl,
styles.backgroundColor.l3, t.atoms.backgroundColor.l3,
]} ]}
/> />
</View> </View>
<View style={[styles.flex.row, styles.flex.alignCenter]}> <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
<Text style={{width: 80}}>xxl (32px)</Text> <Text style={{width: 80}}>xxl (32px)</Text>
<View <View
style={[ style={[
styles.flex.one, atoms.flex.one,
styles.padding.pt.xxl, atoms.padding.pt.xxl,
styles.backgroundColor.l3, t.atoms.backgroundColor.l3,
]} ]}
/> />
</View> </View>
@@ -253,13 +253,13 @@ export function DebugScreen() {
</View> </View>
<View> <View>
<H3 style={[styles.padding.pb.m, styles.font.bold]}>Typography</H3> <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Typography</H3>
<View <View
style={[ style={[
styles.flex.gap.m, atoms.flex.gap.m,
styles.padding.pa.m, atoms.padding.pa.m,
styles.backgroundColor.l1, t.atoms.backgroundColor.l1,
]}> ]}>
<H1>Heading 1</H1> <H1>Heading 1</H1>
<H2>Heading 2</H2> <H2>Heading 2</H2>
@@ -268,34 +268,34 @@ export function DebugScreen() {
<H5>Heading 5</H5> <H5>Heading 5</H5>
<H6>Heading 6</H6> <H6>Heading 6</H6>
<Text style={[styles.font.xxl]}>H1 Size Text</Text> <Text style={[atoms.font.xxl]}>H1 Size Text</Text>
<Text style={[styles.font.xl]}>H2 Size Text</Text> <Text style={[atoms.font.xl]}>H2 Size Text</Text>
<Text style={[styles.font.l]}>H3 Size Text</Text> <Text style={[atoms.font.l]}>H3 Size Text</Text>
<Text style={[styles.font.m]}>H4 Size Text</Text> <Text style={[atoms.font.m]}>H4 Size Text</Text>
<Text style={[styles.font.s]}>H5 Size Text</Text> <Text style={[atoms.font.s]}>H5 Size Text</Text>
<Text style={[styles.font.xs]}>H6 Size Text</Text> <Text style={[atoms.font.xs]}>H6 Size Text</Text>
<Text style={[styles.font.xxs]}>Very Small Size Text</Text> <Text style={[atoms.font.xxs]}>Very Small Size Text</Text>
</View> </View>
</View> </View>
<View> <View>
<H3 style={[styles.padding.pb.m, styles.font.bold]}>Breakpoints</H3> <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Breakpoints</H3>
</View> </View>
<Alf theme="light"> <Alf theme="light">
<ThemedSection /> <ThemedSection />
</Alf> </Alf>
<View style={[styles.flex.gap.m, styles.flex.alignStart]}> <View style={[atoms.flex.gap.m, atoms.flex.alignStart]}>
<H3 style={[styles.padding.pb.m, styles.font.bold]}>Buttons</H3> <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Buttons</H3>
<Button> <Button>
{({state}) => ( {({state}) => (
<View <View
style={[ style={[
styles.padding.pa.m, atoms.padding.pa.m,
styles.radius.round, atoms.radius.round,
styles.backgroundColor.l2, t.atoms.backgroundColor.l2,
]}> ]}>
<Text>Unstyled button, state: {JSON.stringify(state)}</Text> <Text>Unstyled button, state: {JSON.stringify(state)}</Text>
</View> </View>