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

Design system tweaks (#2822) 

* Tweak palette, theme naming, update usages

* Update Typography, replace the few usages
zio/stable
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
src/alf/themes.ts
View File

@ -73,19 +73,19 @@ export const darkPalette: Palette = {
white: tokens.color.gray_0,
black: tokens.color.trueBlack,
contrast_25: tokens.color.gray_975,
contrast_50: tokens.color.gray_950,
contrast_100: tokens.color.gray_900,
contrast_200: tokens.color.gray_800,
contrast_300: tokens.color.gray_700,
contrast_400: tokens.color.gray_600,
contrast_500: tokens.color.gray_500,
contrast_600: tokens.color.gray_400,
contrast_700: tokens.color.gray_300,
contrast_800: tokens.color.gray_200,
contrast_900: tokens.color.gray_100,
contrast_950: tokens.color.gray_50,
contrast_975: tokens.color.gray_25,
contrast_25: tokens.color.gray_1000,
contrast_50: tokens.color.gray_975,
contrast_100: tokens.color.gray_950,
contrast_200: tokens.color.gray_900,
contrast_300: tokens.color.gray_800,
contrast_400: tokens.color.gray_700,
contrast_500: tokens.color.gray_600,
contrast_600: tokens.color.gray_500,
contrast_700: tokens.color.gray_400,
contrast_800: tokens.color.gray_300,
contrast_900: tokens.color.gray_200,
contrast_950: tokens.color.gray_100,
contrast_975: tokens.color.gray_50,
primary_25: tokens.color.blue_25,
primary_50: tokens.color.blue_50,
@ -133,6 +133,20 @@ export const darkPalette: Palette = {
export const dimPalette: Palette = {
...darkPalette,
black: tokens.color.gray_1000,
contrast_25: tokens.color.gray_975,
contrast_50: tokens.color.gray_950,
contrast_100: tokens.color.gray_900,
contrast_200: tokens.color.gray_800,
contrast_300: tokens.color.gray_700,
contrast_400: tokens.color.gray_600,
contrast_500: tokens.color.gray_500,
contrast_600: tokens.color.gray_400,
contrast_700: tokens.color.gray_300,
contrast_800: tokens.color.gray_200,
contrast_900: tokens.color.gray_100,
contrast_950: tokens.color.gray_50,
contrast_975: tokens.color.gray_25,
} as const
export const light = {
@ -142,17 +156,14 @@ export const light = {
text: {
color: lightPalette.black,
},
text_contrast_700: {
text_contrast_low: {
color: lightPalette.contrast_400,
},
text_contrast_medium: {
color: lightPalette.contrast_700,
},
text_contrast_600: {
color: lightPalette.contrast_600,
},
text_contrast_500: {
color: lightPalette.contrast_500,
},
text_contrast_400: {
color: lightPalette.contrast_400,
text_contrast_high: {
color: lightPalette.contrast_900,
},
text_inverted: {
color: lightPalette.white,
@ -175,11 +186,38 @@ export const light = {
bg_contrast_300: {
backgroundColor: lightPalette.contrast_300,
},
border: {
bg_contrast_400: {
backgroundColor: lightPalette.contrast_400,
},
bg_contrast_500: {
backgroundColor: lightPalette.contrast_500,
},
bg_contrast_600: {
backgroundColor: lightPalette.contrast_600,
},
bg_contrast_700: {
backgroundColor: lightPalette.contrast_700,
},
bg_contrast_800: {
backgroundColor: lightPalette.contrast_800,
},
bg_contrast_900: {
backgroundColor: lightPalette.contrast_900,
},
bg_contrast_950: {
backgroundColor: lightPalette.contrast_950,
},
bg_contrast_975: {
backgroundColor: lightPalette.contrast_975,
},
border_contrast_low: {
borderColor: lightPalette.contrast_100,
},
border_contrast: {
borderColor: lightPalette.contrast_400,
border_contrast_medium: {
borderColor: lightPalette.contrast_200,
},
border_contrast_high: {
borderColor: lightPalette.contrast_300,
},
shadow_sm: {
...atoms.shadow_sm,
@ -203,17 +241,14 @@ export const dark: Theme = {
text: {
color: darkPalette.white,
},
text_contrast_700: {
text_contrast_low: {
color: darkPalette.contrast_400,
},
text_contrast_medium: {
color: darkPalette.contrast_700,
},
text_contrast_600: {
color: darkPalette.contrast_600,
},
text_contrast_500: {
color: darkPalette.contrast_500,
},
text_contrast_400: {
color: darkPalette.contrast_400,
text_contrast_high: {
color: darkPalette.contrast_900,
},
text_inverted: {
color: darkPalette.black,
@ -222,24 +257,51 @@ export const dark: Theme = {
backgroundColor: darkPalette.black,
},
bg_contrast_25: {
backgroundColor: darkPalette.contrast_50,
backgroundColor: darkPalette.contrast_25,
},
bg_contrast_50: {
backgroundColor: darkPalette.contrast_100,
backgroundColor: darkPalette.contrast_50,
},
bg_contrast_100: {
backgroundColor: darkPalette.contrast_200,
backgroundColor: darkPalette.contrast_100,
},
bg_contrast_200: {
backgroundColor: darkPalette.contrast_300,
backgroundColor: darkPalette.contrast_200,
},
bg_contrast_300: {
backgroundColor: darkPalette.contrast_300,
},
bg_contrast_400: {
backgroundColor: darkPalette.contrast_400,
},
border: {
bg_contrast_500: {
backgroundColor: darkPalette.contrast_500,
},
bg_contrast_600: {
backgroundColor: darkPalette.contrast_600,
},
bg_contrast_700: {
backgroundColor: darkPalette.contrast_700,
},
bg_contrast_800: {
backgroundColor: darkPalette.contrast_800,
},
bg_contrast_900: {
backgroundColor: darkPalette.contrast_900,
},
bg_contrast_950: {
backgroundColor: darkPalette.contrast_950,
},
bg_contrast_975: {
backgroundColor: darkPalette.contrast_975,
},
border_contrast_low: {
borderColor: darkPalette.contrast_100,
},
border_contrast: {
border_contrast_medium: {
borderColor: darkPalette.contrast_200,
},
border_contrast_high: {
borderColor: darkPalette.contrast_300,
},
shadow_sm: {
@ -265,11 +327,71 @@ export const dim: Theme = {
name: 'dim',
atoms: {
...dark.atoms,
text: {
color: dimPalette.white,
},
text_contrast_low: {
color: dimPalette.contrast_400,
},
text_contrast_medium: {
color: dimPalette.contrast_700,
},
text_contrast_high: {
color: dimPalette.contrast_900,
},
text_inverted: {
color: dimPalette.black,
},
bg: {
backgroundColor: dimPalette.black,
},
bg_contrast_25: {
backgroundColor: dimPalette.contrast_25,
},
bg_contrast_50: {
backgroundColor: dimPalette.contrast_50,
},
bg_contrast_100: {
backgroundColor: dimPalette.contrast_100,
},
bg_contrast_200: {
backgroundColor: dimPalette.contrast_200,
},
bg_contrast_300: {
backgroundColor: dimPalette.contrast_300,
},
bg_contrast_400: {
backgroundColor: dimPalette.contrast_400,
},
bg_contrast_500: {
backgroundColor: dimPalette.contrast_500,
},
bg_contrast_600: {
backgroundColor: dimPalette.contrast_600,
},
bg_contrast_700: {
backgroundColor: dimPalette.contrast_700,
},
bg_contrast_800: {
backgroundColor: dimPalette.contrast_800,
},
bg_contrast_900: {
backgroundColor: dimPalette.contrast_900,
},
bg_contrast_950: {
backgroundColor: dimPalette.contrast_950,
},
bg_contrast_975: {
backgroundColor: dimPalette.contrast_975,
},
border_contrast_low: {
borderColor: dimPalette.contrast_100,
},
border_contrast_medium: {
borderColor: dimPalette.contrast_200,
},
border_contrast_high: {
borderColor: dimPalette.contrast_300,
},
},
}

14
src/alf/tokens.ts
View File

@ -13,13 +13,13 @@ export const color = {
gray_300: `hsl(${BLUE_HUE}, 20%, 70%)`,
gray_400: `hsl(${BLUE_HUE}, 20%, 60%)`,
gray_500: `hsl(${BLUE_HUE}, 20%, 50%)`,
gray_600: `hsl(${BLUE_HUE}, 20%, 42%)`,
gray_700: `hsl(${BLUE_HUE}, 20%, 34%)`,
gray_800: `hsl(${BLUE_HUE}, 20%, 26%)`,
gray_900: `hsl(${BLUE_HUE}, 20%, 18%)`,
gray_950: `hsl(${BLUE_HUE}, 20%, 10%)`,
gray_975: `hsl(${BLUE_HUE}, 20%, 7%)`,
gray_1000: `hsl(${BLUE_HUE}, 20%, 4%)`,
gray_600: `hsl(${BLUE_HUE}, 24%, 42%)`,
gray_700: `hsl(${BLUE_HUE}, 24%, 34%)`,
gray_800: `hsl(${BLUE_HUE}, 28%, 26%)`,
gray_900: `hsl(${BLUE_HUE}, 28%, 18%)`,
gray_950: `hsl(${BLUE_HUE}, 28%, 10%)`,
gray_975: `hsl(${BLUE_HUE}, 28%, 7%)`,
gray_1000: `hsl(${BLUE_HUE}, 28%, 4%)`,
blue_25: `hsl(${BLUE_HUE}, 99%, 97%)`,
blue_50: `hsl(${BLUE_HUE}, 99%, 95%)`,

14
src/components/Divider.tsx
View File

@ -1,10 +1,18 @@
import React from 'react'
import {View} from 'react-native'
import {atoms as a, useTheme} from '#/alf'
import {ViewStyleProp} from '#/alf'
import {atoms as a, useTheme, ViewStyleProp, flatten} from '#/alf'
export function Divider({style}: ViewStyleProp) {
const t = useTheme()
return <View style={[a.w_full, a.border_t, t.atoms.border, style]} />
return (
<View
style={[
a.w_full,
a.border_t,
t.atoms.border_contrast_low,
flatten(style),
]}
/>
)
}

15
src/components/Prompt.tsx
View File

@ -4,7 +4,7 @@ import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useTheme, atoms as a} from '#/alf'
import {H4, P} from '#/components/Typography'
import {Text} from '#/components/Typography'
import {Button} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
@ -50,14 +50,11 @@ export function Outer({
}
export function Title({children}: React.PropsWithChildren<{}>) {
const t = useTheme()
const {titleId} = React.useContext(Context)
return (
<H4
nativeID={titleId}
style={[a.font_bold, t.atoms.text_contrast_700, a.pb_sm]}>
<Text nativeID={titleId} style={[a.text_2xl, a.font_bold, a.pb_sm]}>
{children}
</H4>
</Text>
)
}
@ -65,9 +62,11 @@ export function Description({children}: React.PropsWithChildren<{}>) {
const t = useTheme()
const {descriptionId} = React.useContext(Context)
return (
<P nativeID={descriptionId} style={[t.atoms.text, a.pb_lg]}>
<Text
nativeID={descriptionId}
style={[a.text_md, a.leading_snug, t.atoms.text_contrast_high, a.pb_lg]}>
{children}
</P>
</Text>
)
}

128
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) {
export function createHeadingElement({level}: {level: number}) {
return function HeadingElement({style, ...rest}: TextProps) {
const t = useTheme()
const attr =
web({
role: 'heading',
'aria-level': 1,
'aria-level': level,
}) || {}
return (
<RNText
{...attr}
{...rest}
style={normalizeTextStyles([
atoms.text_5xl,
atoms.font_bold,
t.atoms.text,
flatten(style),
])}
style={normalizeTextStyles([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),
])}
/>
)
}
/*
* 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 =

5
src/components/forms/TextField.tsx
View File

@ -241,7 +241,8 @@ export const Input = createInput(TextInput)
export function Label({children}: React.PropsWithChildren<{}>) {
const t = useTheme()
return (
<Text style={[a.text_sm, a.font_bold, t.atoms.text_contrast_600, a.mb_sm]}>
<Text
style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium, a.mb_sm]}>
{children}
</Text>
)
@ -315,7 +316,7 @@ export function Suffix({
a.z_20,
a.pr_sm,
a.text_md,
t.atoms.text_contrast_400,
t.atoms.text_contrast_medium,
{
pointerEvents: 'none',
},

6
src/components/forms/Toggle.tsx
View File

@ -347,7 +347,7 @@ export function Checkbox() {
a.align_center,
a.border,
a.rounded_xs,
t.atoms.border_contrast,
t.atoms.border_contrast_high,
{
height: 20,
width: 20,
@ -393,7 +393,7 @@ export function Switch() {
a.border,
a.rounded_full,
t.atoms.bg,
t.atoms.border_contrast,
t.atoms.border_contrast_high,
{
height: 20,
width: 30,
@ -445,7 +445,7 @@ export function Radio() {
a.align_center,
a.border,
a.rounded_full,
t.atoms.border_contrast,
t.atoms.border_contrast_high,
{
height: 20,
width: 20,

6
src/components/forms/ToggleButton.tsx
View File

@ -25,7 +25,7 @@ export function Group({children, multiple, ...props}: GroupProps) {
a.border,
a.rounded_sm,
a.overflow_hidden,
t.atoms.border,
t.atoms.border_contrast_low,
]}>
{children}
</View>
@ -103,7 +103,7 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
}),
a.px_sm,
t.atoms.bg,
t.atoms.border,
t.atoms.border_contrast_low,
baseStyles,
activeStyles,
(state.hovered || state.focused || state.pressed) && hoverStyles,
@ -113,7 +113,7 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
style={[
a.text_center,
a.font_bold,
t.atoms.text_contrast_500,
t.atoms.text_contrast_medium,
textStyles,
]}>
{children}

9
src/screens/Deactivated.tsx
View File

@ -10,9 +10,8 @@ import {pluralize} from '#/lib/strings/helpers'
import {atoms as a, useTheme, useBreakpoints} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {Text} from '#/components/Typography'
import {Text, P} from '#/components/Typography'
import {isWeb} from '#/platform/detection'
import {H2, P} from '#/components/Typography'
import {ScrollView} from '#/view/com/util/Views'
import {Loader} from '#/components/Loader'
import {Logo} from '#/view/icons/Logo'
@ -100,10 +99,10 @@ export function Deactivated() {
<Logo width={120} />
</View>
<H2 style={[a.pb_sm]}>
<Text style={[a.text_4xl, a.font_bold, a.pb_sm]}>
<Trans>You're in line</Trans>
</H2>
<P style={[t.atoms.text_contrast_700]}>
</Text>
<P style={[t.atoms.text_contrast_medium]}>
<Trans>
There's been a rush of new users to Bluesky! We'll activate your
account as soon as we can.

6
src/screens/Onboarding/Layout.tsx
View File

@ -165,7 +165,7 @@ export function Layout({children}: React.PropsWithChildren<{}>) {
isWeb ? a.fixed : a.absolute,
{bottom: 0, left: 0, right: 0},
t.atoms.bg,
t.atoms.border,
t.atoms.border_contrast_low,
a.border_t,
a.align_center,
gtMobile ? a.px_5xl : a.px_xl,
@ -227,5 +227,7 @@ export function Description({
style,
}: React.PropsWithChildren<TextStyleProp>) {
const t = useTheme()
return <P style={[t.atoms.text_contrast_700, flatten(style)]}>{children}</P>
return (
<P style={[t.atoms.text_contrast_medium, flatten(style)]}>{children}</P>
)
}

16
src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx
View File

@ -8,7 +8,7 @@ import {msg} from '@lingui/macro'
import {useTheme, atoms as a} from '#/alf'
import * as Toggle from '#/components/forms/Toggle'
import {useFeedSourceInfoQuery, FeedSourceInfo} from '#/state/queries/feed'
import {Text, H3} from '#/components/Typography'
import {Text} from '#/components/Typography'
import {RichText} from '#/components/RichText'
import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
@ -94,14 +94,14 @@ function PrimaryFeedCardInner({
</View>
<View style={[a.pt_xs, a.flex_grow]}>
<H3
<Text
style={[
a.text_lg,
a.font_bold,
ctx.selected && styles.textSelected,
]}>
{feed.displayName}
</H3>
</Text>
<Text
style={[
@ -137,7 +137,7 @@ function PrimaryFeedCardInner({
},
a.mt_md,
a.w_full,
t.name === 'light' ? t.atoms.border : t.atoms.border_contrast,
t.atoms.border_contrast_low,
ctx.selected && {
borderTopColor: t.palette.white,
},
@ -239,14 +239,14 @@ function FeedCardInner({feed}: {feed: FeedSourceInfo; config: FeedConfig}) {
</View>
<View style={[a.pt_2xs, a.flex_grow]}>
<H3
<Text
style={[
a.text_md,
a.font_bold,
ctx.selected && styles.textSelected,
]}>
{feed.displayName}
</H3>
</Text>
<Text
style={[
{opacity: 0.8},
@ -281,7 +281,7 @@ function FeedCardInner({feed}: {feed: FeedSourceInfo; config: FeedConfig}) {
},
a.mt_md,
a.w_full,
t.name === 'light' ? t.atoms.border : t.atoms.border_contrast,
t.atoms.border_contrast_low,
ctx.selected && {
borderTopColor: t.palette.primary_200,
},
@ -360,7 +360,7 @@ export function FeedCardPlaceholder({primary}: {primary?: boolean}) {
},
a.mt_md,
a.w_full,
t.atoms.border,
t.atoms.border_contrast_low,
]}
/>

21
src/screens/Onboarding/StepAlgoFeeds/index.tsx
View File

@ -115,12 +115,22 @@ export function StepAlgoFeeds() {
onChange={setPrimaryFeedUris}
label={_(msg`Select your primary algorithmic feeds`)}>
<Text
style={[a.text_md, a.pt_4xl, a.pb_md, t.atoms.text_contrast_700]}>
style={[
a.text_md,
a.pt_4xl,
a.pb_md,
t.atoms.text_contrast_medium,
]}>
<Trans>We recommend our "Discover" feed:</Trans>
</Text>
<FeedCard config={PRIMARY_FEEDS[0]} />
<Text
style={[a.text_md, a.pt_4xl, a.pb_lg, t.atoms.text_contrast_700]}>
style={[
a.text_md,
a.pt_4xl,
a.pb_lg,
t.atoms.text_contrast_medium,
]}>
<Trans>We also think you'll like "For You" by Skygaze:</Trans>
</Text>
<FeedCard config={PRIMARY_FEEDS[1]} />
@ -131,7 +141,12 @@ export function StepAlgoFeeds() {
onChange={setSeconaryFeedUris}
label={_(msg`Select your secondary algorithmic feeds`)}>
<Text
style={[a.text_md, a.pt_4xl, a.pb_lg, t.atoms.text_contrast_700]}>
style={[
a.text_md,
a.pt_4xl,
a.pb_lg,
t.atoms.text_contrast_medium,
]}>
<Trans>There are many feeds to try:</Trans>
</Text>
<View style={[a.gap_md]}>

6
src/screens/Onboarding/StepFinished.tsx
View File

@ -101,7 +101,7 @@ export function StepFinished() {
<Trans>Public</Trans>
</Text>
<Text
style={[t.atoms.text_contrast_500, a.text_md, a.leading_snug]}>
style={[t.atoms.text_contrast_medium, a.text_md, a.leading_snug]}>
<Trans>
Your posts, likes, and blocks are public. Mutes are private.
</Trans>
@ -115,7 +115,7 @@ export function StepFinished() {
<Trans>Open</Trans>
</Text>
<Text
style={[t.atoms.text_contrast_500, a.text_md, a.leading_snug]}>
style={[t.atoms.text_contrast_medium, a.text_md, a.leading_snug]}>
<Trans>Never lose access to your followers or data.</Trans>
</Text>
</View>
@ -131,7 +131,7 @@ export function StepFinished() {
<Trans>Flexible</Trans>
</Text>
<Text
style={[t.atoms.text_contrast_500, a.text_md, a.leading_snug]}>
style={[t.atoms.text_contrast_medium, a.text_md, a.leading_snug]}>
<Trans>Choose the algorithms that power your custom feeds.</Trans>
</Text>
</View>

2
src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx
View File

@ -96,7 +96,7 @@ export function AdultContentEnabledPref({
<Text
style={[
a.flex_1,
t.atoms.text_contrast_700,
t.atoms.text_contrast_medium,
a.leading_snug,
{paddingTop: 1},
]}>

2
src/screens/Onboarding/StepModeration/ModerationOption.tsx
View File

@ -57,7 +57,7 @@ export function ModerationOption({
entering={isMounted.current ? FadeIn : undefined}>
<View style={[a.gap_xs, {width: '50%'}]}>
<Text style={[a.font_bold]}>{groupInfo.title}</Text>
<Text style={[t.atoms.text_contrast_700, a.leading_snug]}>
<Text style={[t.atoms.text_contrast_medium, a.leading_snug]}>
{groupInfo.subtitle}
</Text>
</View>

4
src/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard.tsx
View File

@ -95,7 +95,7 @@ export function SuggestedAccountCard({
<Text style={[a.font_bold, a.text_md, a.pb_xs]} numberOfLines={1}>
{profile.displayName}
</Text>
<Text style={[t.atoms.text_contrast_600]}>{profile.handle}</Text>
<Text style={[t.atoms.text_contrast_medium]}>{profile.handle}</Text>
</View>
</View>
@ -124,7 +124,7 @@ export function SuggestedAccountCard({
borderTopWidth: 1,
},
a.w_full,
t.name === 'light' ? t.atoms.border : t.atoms.border_contrast,
t.atoms.border_contrast_low,
ctx.selected && {
borderTopColor: t.palette.primary_200,
},

20
src/view/screens/Storybook/Theming.tsx
View File

@ -14,22 +14,22 @@ export function Theming() {
<Text style={[a.font_bold, a.pt_xl, a.px_md]}>theme.atoms.text</Text>
<View style={[a.flex_1, t.atoms.border, a.border_t]} />
<Text style={[a.font_bold, t.atoms.text_contrast_600, a.px_md]}>
theme.atoms.text_contrast_600
<View style={[a.flex_1, t.atoms.border_contrast_high, a.border_t]} />
<Text style={[a.font_bold, t.atoms.text_contrast_high, a.px_md]}>
theme.atoms.text_contrast_high
</Text>
<View style={[a.flex_1, t.atoms.border, a.border_t]} />
<Text style={[a.font_bold, t.atoms.text_contrast_500, a.px_md]}>
theme.atoms.text_contrast_500
<View style={[a.flex_1, t.atoms.border_contrast_medium, a.border_t]} />
<Text style={[a.font_bold, t.atoms.text_contrast_medium, a.px_md]}>
theme.atoms.text_contrast_medium
</Text>
<View style={[a.flex_1, t.atoms.border, a.border_t]} />
<Text style={[a.font_bold, t.atoms.text_contrast_400, a.px_md]}>
theme.atoms.text_contrast_400
<View style={[a.flex_1, t.atoms.border_contrast_low, a.border_t]} />
<Text style={[a.font_bold, t.atoms.text_contrast_low, a.px_md]}>
theme.atoms.text_contrast_low
</Text>
<View style={[a.flex_1, t.atoms.border_contrast, a.border_t]} />
<View style={[a.flex_1, t.atoms.border_contrast_low, a.border_t]} />
<View style={[a.w_full, a.gap_md]}>
<View style={[t.atoms.bg, a.justify_center, a.p_md]}>

10
src/view/screens/Storybook/Typography.tsx
View File

@ -2,20 +2,12 @@ import React from 'react'
import {View} from 'react-native'
import {atoms as a} from '#/alf'
import {Text, H1, H2, H3, H4, H5, H6, P} from '#/components/Typography'
import {Text} from '#/components/Typography'
import {RichText} from '#/components/RichText'
export function Typography() {
return (
<View style={[a.gap_md]}>
<H1>H1 Heading</H1>
<H2>H2 Heading</H2>
<H3>H3 Heading</H3>
<H4>H4 Heading</H4>
<H5>H5 Heading</H5>
<H6>H6 Heading</H6>
<P>P Paragraph</P>
<Text style={[a.text_5xl]}>atoms.text_5xl</Text>
<Text style={[a.text_4xl]}>atoms.text_4xl</Text>
<Text style={[a.text_3xl]}>atoms.text_3xl</Text>