zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Design system tweaks (#2822)

Browse source 
* Tweak palette, theme naming, update usages

* Update Typography, replace the few usages
This commit is contained in:
Eric Bailey 2024-02-09 11:52:32 -06:00 • committed by GitHub
parent 43b447e5f4
commit d6235453c9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 276 additions and 234 deletions
Download patch file Download diff file Expand all files Collapse all files

152
src/components/Typography.tsx
View file

@ -41,138 +41,42 @@ function normalizeTextStyles(styles: TextStyle[]) {
return s
}
/**
* Our main text component. Use this most of the time.
*/
export function Text({style, ...rest}: TextProps) {
const t = useTheme()
const s = normalizeTextStyles([atoms.text_sm, t.atoms.text, flatten(style)])
return <RNText style={s} {...rest} />
}
export function H1({style, ...rest}: TextProps) {
const t = useTheme()
const attr =
web({
role: 'heading',
'aria-level': 1,
}) || {}
return (
<RNText
{...attr}
{...rest}
style={normalizeTextStyles([
atoms.text_5xl,
atoms.font_bold,
t.atoms.text,
flatten(style),
])}
/>
)
}
export function H2({style, ...rest}: TextProps) {
const t = useTheme()
const attr =
web({
role: 'heading',
'aria-level': 2,
}) || {}
return (
<RNText
{...attr}
{...rest}
style={normalizeTextStyles([
atoms.text_4xl,
atoms.font_bold,
t.atoms.text,
flatten(style),
])}
/>
)
}
export function H3({style, ...rest}: TextProps) {
const t = useTheme()
const attr =
web({
role: 'heading',
'aria-level': 3,
}) || {}
return (
<RNText
{...attr}
{...rest}
style={normalizeTextStyles([
atoms.text_3xl,
atoms.font_bold,
t.atoms.text,
flatten(style),
])}
/>
)
}
export function H4({style, ...rest}: TextProps) {
const t = useTheme()
const attr =
web({
role: 'heading',
'aria-level': 4,
}) || {}
return (
<RNText
{...attr}
{...rest}
style={normalizeTextStyles([
atoms.text_2xl,
atoms.font_bold,
t.atoms.text,
flatten(style),
])}
/>
)
}
export function H5({style, ...rest}: TextProps) {
const t = useTheme()
const attr =
web({
role: 'heading',
'aria-level': 5,
}) || {}
return (
<RNText
{...attr}
{...rest}
style={normalizeTextStyles([
atoms.text_xl,
atoms.font_bold,
t.atoms.text,
flatten(style),
])}
/>
)
}
export function H6({style, ...rest}: TextProps) {
const t = useTheme()
const attr =
web({
role: 'heading',
'aria-level': 6,
}) || {}
return (
<RNText
{...attr}
{...rest}
style={normalizeTextStyles([
atoms.text_lg,
atoms.font_bold,
t.atoms.text,
flatten(style),
])}
/>
)
export function createHeadingElement({level}: {level: number}) {
return function HeadingElement({style, ...rest}: TextProps) {
const t = useTheme()
const attr =
web({
role: 'heading',
'aria-level': level,
}) || {}
return (
<RNText
{...attr}
{...rest}
style={normalizeTextStyles([t.atoms.text, flatten(style)])}
/>
)
}
}
/*
* Use semantic components when it's beneficial to the user or to a web scraper
*/
export const H1 = createHeadingElement({level: 1})
export const H2 = createHeadingElement({level: 2})
export const H3 = createHeadingElement({level: 3})
export const H4 = createHeadingElement({level: 4})
export const H5 = createHeadingElement({level: 5})
export const H6 = createHeadingElement({level: 6})
export function P({style, ...rest}: TextProps) {
const t = useTheme()
const attr =