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

Build out storybook

Browse Source
This commit is contained in:
Eric Bailey
2024-01-01 17:23:44 -06:00
parent af5c0487fb
commit c32889208d
5 changed files with 508 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/alf/themes.ts
+23 -11
View File
@@ -25,13 +25,13 @@ export const light = {
palette: lightPalette,
atoms: {
text: {
color: tokens.color.gray_950,
color: tokens.color.gray_1000,
},
text_contrast_700: {
color: tokens.color.gray_600,
color: tokens.color.gray_700,
},
text_contrast_500: {
color: tokens.color.gray_400,
color: tokens.color.gray_500,
},
text_inverted: {
color: tokens.color.white,
@@ -40,19 +40,25 @@ export const light = {
backgroundColor: tokens.color.white,
},
bg_contrast_100: {
backgroundColor: tokens.color.gray_50,
},
bg_contrast_200: {
backgroundColor: tokens.color.gray_100,
},
bg_contrast_300: {
bg_contrast_200: {
backgroundColor: tokens.color.gray_200,
},
bg_contrast_300: {
backgroundColor: tokens.color.gray_300,
},
bg_positive: {
backgroundColor: tokens.color.green_500,
},
bg_negative: {
backgroundColor: tokens.color.red_400,
},
border: {
borderColor: tokens.color.gray_100,
borderColor: tokens.color.gray_200,
},
border_contrast_500: {
borderColor: tokens.color.gray_400,
borderColor: tokens.color.gray_500,
},
},
}
@@ -70,10 +76,10 @@ export const dark: Theme = {
color: tokens.color.gray_500,
},
text_inverted: {
color: tokens.color.gray_950,
color: tokens.color.gray_1000,
},
bg: {
backgroundColor: tokens.color.gray_950,
backgroundColor: tokens.color.gray_1000,
},
bg_contrast_100: {
backgroundColor: tokens.color.gray_900,
@@ -84,6 +90,12 @@ export const dark: Theme = {
bg_contrast_300: {
backgroundColor: tokens.color.gray_700,
},
bg_positive: {
backgroundColor: tokens.color.green_400,
},
bg_negative: {
backgroundColor: tokens.color.red_400,
},
border: {
borderColor: tokens.color.gray_800,
},
src/alf/tokens.ts
+35 -35
View File
@@ -4,19 +4,19 @@ const GRAYSCALE_SATURATION = 22
export const color = {
white: '#FFFFFF',
gray_50: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 95%)`,
gray_100: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 90%)`,
gray_200: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 80%)`,
gray_300: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 70%)`,
gray_400: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 60%)`,
gray_500: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 50%)`,
gray_600: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 40%)`,
gray_700: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 30%)`,
gray_800: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 20%)`,
gray_900: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 10%)`,
gray_950: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 5%)`,
gray_0: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 100%)`,
gray_100: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 95%)`,
gray_200: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 85%)`,
gray_300: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 75%)`,
gray_400: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 65%)`,
gray_500: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 55%)`,
gray_600: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 45%)`,
gray_700: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 35%)`,
gray_800: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 25%)`,
gray_900: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 15%)`,
gray_1000: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 5%)`,
blue_50: `hsl(${BLUE_HUE}, 99%, 98%)`,
blue_0: `hsl(${BLUE_HUE}, 99%, 100%)`,
blue_100: `hsl(${BLUE_HUE}, 99%, 93%)`,
blue_200: `hsl(${BLUE_HUE}, 99%, 83%)`,
blue_300: `hsl(${BLUE_HUE}, 99%, 73%)`,
@@ -26,31 +26,31 @@ export const color = {
blue_700: `hsl(${BLUE_HUE}, 99%, 33%)`,
blue_800: `hsl(${BLUE_HUE}, 99%, 23%)`,
blue_900: `hsl(${BLUE_HUE}, 99%, 13%)`,
blue_950: `hsl(${BLUE_HUE}, 99%, 8%)`,
blue_1000: `hsl(${BLUE_HUE}, 99%, 8%)`,
green_50: `hsl(130, 60%, 95%)`,
green_100: `hsl(130, 60%, 90%)`,
green_200: `hsl(130, 60%, 80%)`,
green_300: `hsl(130, 60%, 70%)`,
green_400: `hsl(130, 60%, 60%)`,
green_500: `hsl(130, 60%, 50%)`,
green_600: `hsl(130, 60%, 40%)`,
green_700: `hsl(130, 60%, 30%)`,
green_800: `hsl(130, 60%, 20%)`,
green_900: `hsl(130, 60%, 10%)`,
green_950: `hsl(130, 60%, 5%)`,
green_0: `hsl(130, 60%, 100%)`,
green_100: `hsl(130, 60%, 95%)`,
green_200: `hsl(130, 60%, 85%)`,
green_300: `hsl(130, 60%, 75%)`,
green_400: `hsl(130, 60%, 65%)`,
green_500: `hsl(130, 60%, 55%)`,
green_600: `hsl(130, 60%, 45%)`,
green_700: `hsl(130, 60%, 35%)`,
green_800: `hsl(130, 60%, 25%)`,
green_900: `hsl(130, 60%, 15%)`,
green_1000: `hsl(130, 60%, 5%)`,
red_50: `hsl(349, 96%, 95%)`,
red_100: `hsl(349, 96%, 90%)`,
red_200: `hsl(349, 96%, 80%)`,
red_300: `hsl(349, 96%, 70%)`,
red_400: `hsl(349, 96%, 60%)`,
red_500: `hsl(349, 96%, 50%)`,
red_600: `hsl(349, 96%, 40%)`,
red_700: `hsl(349, 96%, 30%)`,
red_800: `hsl(349, 96%, 20%)`,
red_900: `hsl(349, 96%, 10%)`,
red_950: `hsl(349, 96%, 5%)`,
red_0: `hsl(349, 96%, 100%)`,
red_100: `hsl(349, 96%, 95%)`,
red_200: `hsl(349, 96%, 85%)`,
red_300: `hsl(349, 96%, 75%)`,
red_400: `hsl(349, 96%, 65%)`,
red_500: `hsl(349, 96%, 55%)`,
red_600: `hsl(349, 96%, 45%)`,
red_700: `hsl(349, 96%, 35%)`,
red_800: `hsl(349, 96%, 25%)`,
red_900: `hsl(349, 96%, 15%)`,
red_1000: `hsl(349, 96%, 5%)`,
}
export const space = {
src/view/com/Button.tsx
+30 -24
View File
@@ -1,7 +1,7 @@
import React from 'react'
import {Pressable, Text, PressableProps, TextProps} from 'react-native'
import * as tokens from '#/alf/tokens'
import {useTheme, atoms} from '#/alf'
import {atoms} from '#/alf'
export type ButtonType =
| 'primary'
@@ -34,18 +34,23 @@ export type ButtonProps = Omit<PressableProps, 'children'> &
export type ButtonTextProps = TextProps & VariantProps
export function Button({children, style, type, size, ...rest}: ButtonProps) {
const t = useTheme()
const {baseStyles, hoverStyles} = React.useMemo(() => {
const baseStyles = []
const hoverStyles = []
switch (type) {
case 'primary':
baseStyles.push(t.atoms.backgroundColor.primary)
baseStyles.push({
backgroundColor: tokens.color.blue_500,
})
break
case 'secondary':
baseStyles.push(t.atoms.backgroundColor.l2)
hoverStyles.push(t.atoms.backgroundColor.l1)
baseStyles.push({
backgroundColor: tokens.color.gray_200,
})
hoverStyles.push({
backgroundColor: tokens.color.gray_100,
})
break
default:
}
@@ -53,18 +58,18 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
switch (size) {
case 'large':
baseStyles.push(
atoms.padding.py.m,
atoms.padding.px.xl,
atoms.radius.m,
atoms.flex.gap.s,
atoms.py_md,
atoms.px_xl,
atoms.rounded_md,
atoms.gap_sm,
)
break
case 'small':
baseStyles.push(
atoms.padding.py.s,
atoms.padding.px.m,
atoms.radius.s,
atoms.flex.gap.xs,
atoms.py_sm,
atoms.px_md,
atoms.rounded_sm,
atoms.gap_xs,
)
break
default:
@@ -74,7 +79,7 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
baseStyles,
hoverStyles,
}
}, [type, size, t])
}, [type, size])
const [state, setState] = React.useState({
pressed: false,
@@ -123,8 +128,8 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
<Pressable
{...rest}
style={state => [
atoms.flex.row,
atoms.flex.alignCenter,
atoms.flex_row,
atoms.align_center,
...baseStyles,
...(state.hovered ? hoverStyles : []),
typeof style === 'function' ? style(state) : style,
@@ -155,7 +160,6 @@ export function ButtonText({
size,
...rest
}: ButtonTextProps) {
const t = useTheme()
const textStyles = React.useMemo(() => {
const base = []
@@ -164,31 +168,33 @@ export function ButtonText({
base.push({color: tokens.color.white})
break
case 'secondary':
base.push(t.atoms.color.l5)
base.push({
color: tokens.color.gray_700,
})
break
default:
}
switch (size) {
case 'small':
base.push(atoms.font.s, {paddingBottom: 1})
base.push(atoms.text_sm, {paddingBottom: 1})
break
case 'large':
base.push(atoms.font.m, {paddingBottom: 1})
base.push(atoms.text_md, {paddingBottom: 1})
break
default:
}
return base
}, [type, size, t])
}, [type, size])
return (
<Text
{...rest}
style={[
atoms.flex.one,
atoms.font.semi,
atoms.font.center,
atoms.flex_1,
atoms.font_semibold,
atoms.text_center,
...textStyles,
style,
]}>
src/view/com/Typography.tsx
+7 -7
View File
@@ -4,7 +4,7 @@ import {useTheme, atoms, web} from '#/alf'
export function Text({style, ...rest}: TextProps) {
const t = useTheme()
return <RNText style={[atoms.font.s, t.atoms.color.l7, style]} {...rest} />
return <RNText style={[atoms.text_sm, t.atoms.text, style]} {...rest} />
}
export function H1({style, ...rest}: TextProps) {
@@ -18,7 +18,7 @@ export function H1({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[atoms.font.xxl, atoms.font.bold, t.atoms.color.l7, style]}
style={[atoms.text_xl, atoms.font_bold, t.atoms.text, style]}
/>
)
}
@@ -34,7 +34,7 @@ export function H2({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[atoms.font.l, atoms.font.bold, t.atoms.color.l7, style]}
style={[atoms.text_lg, atoms.font_bold, t.atoms.text, style]}
/>
)
}
@@ -50,7 +50,7 @@ export function H3({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[atoms.font.m, atoms.font.bold, t.atoms.color.l7, style]}
style={[atoms.text_md, atoms.font_bold, t.atoms.text, style]}
/>
)
}
@@ -66,7 +66,7 @@ export function H4({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[atoms.font.s, atoms.font.bold, t.atoms.color.l7, style]}
style={[atoms.text_sm, atoms.font_bold, t.atoms.text, style]}
/>
)
}
@@ -82,7 +82,7 @@ export function H5({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[atoms.font.xs, atoms.font.bold, t.atoms.color.l7, style]}
style={[atoms.text_xs, atoms.font_bold, t.atoms.text, style]}
/>
)
}
@@ -98,7 +98,7 @@ export function H6({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[atoms.font.xxs, atoms.font.bold, t.atoms.color.l7, style]}
style={[atoms.text_xxs, atoms.font_bold, t.atoms.text, style]}
/>
)
}
src/view/screens/DebugNew.tsx
+413 -48
View File
@@ -4,6 +4,7 @@ import {CenteredView, ScrollView} from '#/view/com/util/Views'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useSetColorMode} from '#/state/shell'
import * as tokens from '#/alf/tokens'
import {atoms as a, useTheme, useBreakpoints, ThemeProvider as Alf} from '#/alf'
import {Button, ButtonText} from '#/view/com/Button'
import {Text, H1, H2, H3, H4, H5, H6} from '#/view/com/Typography'
@@ -59,13 +60,83 @@ function ThemedSection() {
const t = useTheme()
return (
<View style={[t.atoms.bg, a.p_md]}>
<H3 style={[a.pb_md, a.font_bold]}>
Colors (this theme is always light)
<View style={[t.atoms.bg, a.gap_md, a.p_xl]}>
<H3 style={[a.font_bold]}>theme.atoms.text</H3>
<View style={[a.flex_1, t.atoms.border, a.border_t]} />
<H3 style={[a.font_bold, t.atoms.text_contrast_700]}>
theme.atoms.text_contrast_700
</H3>
<View style={[a.flex_1, t.atoms.border, a.border_t]} />
<H3 style={[a.font_bold, t.atoms.text_contrast_500]}>
theme.atoms.text_contrast_500
</H3>
<View style={[a.flex_1, t.atoms.border_contrast_500, a.border_t]} />
<View style={[a.flex_row, a.gap_md]}>
<View style={[a.flex_1, t.atoms.bg, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_100, {height: 60}]} />
<View
style={[
a.flex_1,
t.atoms.bg,
a.align_center,
a.justify_center,
{height: 60},
]}>
<Text>theme.bg</Text>
</View>
<View
style={[
a.flex_1,
t.atoms.bg_contrast_100,
a.align_center,
a.justify_center,
{height: 60},
]}>
<Text>theme.bg_contrast_100</Text>
</View>
</View>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[
a.flex_1,
t.atoms.bg_contrast_200,
a.align_center,
a.justify_center,
{height: 60},
]}>
<Text>theme.bg_contrast_200</Text>
</View>
<View
style={[
a.flex_1,
t.atoms.bg_contrast_300,
a.align_center,
a.justify_center,
{height: 60},
]}>
<Text>theme.bg_contrast_300</Text>
</View>
</View>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[
a.flex_1,
t.atoms.bg_positive,
a.align_center,
a.justify_center,
{height: 60},
]}>
<Text>theme.bg_positive</Text>
</View>
<View
style={[
a.flex_1,
t.atoms.bg_negative,
a.align_center,
a.justify_center,
{height: 60},
]}>
<Text>theme.bg_negative</Text>
</View>
</View>
</View>
)
@@ -80,54 +151,29 @@ export function DebugScreen() {
<View style={[a.p_xl, a.gap_xxl, {paddingBottom: 200}]}>
<ThemeSelector />
<BreakpointDebugger />
<View>
<H3 style={[a.pb_md, a.font_bold]}>Colors</H3>
<View style={[a.flex_row, a.gap_md]}>
<View style={[a.flex_1, t.atoms.bg, {height: 60}]} />
</View>
</View>
<View>
<H3 style={[a.pb_md, a.font_bold]}>Spacing</H3>
<View style={[a.gap_md]}>
<View style={[a.flex_row, a.text_center]}>
<Text style={{width: 80}}>xxs (2px)</Text>
<View style={[a.flex_1, a.pt_xxs, t.atoms.bg_contrast_300]} />
</View>
</View>
</View>
<View>
<H3 style={[a.p_md, a.font_bold]}>Typography</H3>
<View style={[a.gap_md, a.p_md, t.atoms.bg_contrast_100]}>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
<Text style={[a.text_xxl]}>H1 Size Text</Text>
<Text style={[a.text_xl]}>H2 Size Text</Text>
<Text style={[a.text_lg]}>H3 Size Text</Text>
<Text style={[a.text_md]}>H4 Size Text</Text>
<Text style={[a.text_sm]}>H5 Size Text</Text>
<Text style={[a.text_xs]}>H6 Size Text</Text>
<Text style={[a.text_xxs]}>Very Small Size Text</Text>
</View>
</View>
<Alf theme="light">
<ThemedSection />
</Alf>
<Alf theme="dark">
<ThemedSection />
</Alf>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
<Text style={[a.text_xxl]}>atoms.text_xxl</Text>
<Text style={[a.text_xl]}>atoms.text_xl</Text>
<Text style={[a.text_lg]}>atoms.text_lg</Text>
<Text style={[a.text_md]}>atoms.text_md</Text>
<Text style={[a.text_sm]}>atoms.text_sm</Text>
<Text style={[a.text_xs]}>atoms.text_xs</Text>
<Text style={[a.text_xxs]}>atoms.text_xxs</Text>
<View style={[a.gap_md, a.align_start]}>
<H3 style={[a.pb_md, a.font_bold]}>Buttons</H3>
<Button>
{({state}) => (
<View style={[a.p_md, a.rounded_full, t.atoms.bg_contrast_300]}>
@@ -169,6 +215,325 @@ export function DebugScreen() {
)}
</Button>
</View>
<View style={[a.gap_md]}>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_0},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_100},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_200},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_300},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_400},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_500},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_600},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_700},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_800},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_900},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_1000},
]}
/>
</View>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_0},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_100},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_200},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_300},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_400},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_500},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_600},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_700},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_800},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_900},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_1000},
]}
/>
</View>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_0},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_100},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_200},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_300},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_400},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_500},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_600},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_700},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_800},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_900},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_1000},
]}
/>
</View>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_0},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_100},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_200},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_300},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_400},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_500},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_600},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_700},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_800},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_900},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_1000},
]}
/>
</View>
</View>
<View>
<H3 style={[a.pb_md, a.font_bold]}>Spacing</H3>
<View style={[a.gap_md]}>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>xxs (2px)</Text>
<View style={[a.flex_1, a.pt_xxs, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>xs (4px)</Text>
<View style={[a.flex_1, a.pt_xs, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>sm (8px)</Text>
<View style={[a.flex_1, a.pt_sm, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>md (12px)</Text>
<View style={[a.flex_1, a.pt_md, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>lg (18px)</Text>
<View style={[a.flex_1, a.pt_lg, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>xl (24px)</Text>
<View style={[a.flex_1, a.pt_xl, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>xxl (32px)</Text>
<View style={[a.flex_1, a.pt_xxl, t.atoms.bg_contrast_300]} />
</View>
</View>
</View>
<BreakpointDebugger />
</View>
</CenteredView>
</ScrollView>