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

Rework all typography

Browse source
This commit is contained in:
Paul Frazee 2023-01-18 11:15:40 -06:00
parent df4acbd683
commit 77580ab6a4
28 changed files with 355 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

117
src/view/screens/Debug.tsx
View file

@ -87,7 +87,7 @@ function Heading({label}: {label: string}) {
const pal = usePalette('default')
return (
<View style={{paddingTop: 10, paddingBottom: 5}}>
<Text type="h3" style={pal.text}>
<Text type="title-lg" style={pal.text}>
{label}
</Text>
</View>
@ -97,14 +97,14 @@ function Heading({label}: {label: string}) {
function BaseView() {
return (
<View style={{paddingHorizontal: 10}}>
<Heading label="Typography" />
<TypographyView />
<Heading label="Palettes" />
<PaletteView palette="default" />
<PaletteView palette="primary" />
<PaletteView palette="secondary" />
<PaletteView palette="inverted" />
<PaletteView palette="error" />
<Heading label="Typography" />
<TypographyView />
<Heading label="Empty state" />
<EmptyStateView />
<Heading label="Loading placeholders" />
@ -197,36 +197,109 @@ function TypographyView() {
const pal = usePalette('default')
return (
<View style={[pal.view]}>
<Text type="h1" style={[pal.text]}>
Heading 1
<Text type="xxl-thin" style={[pal.text]}>
'xxl-thin' lorem ipsum dolor
</Text>
<Text type="h2" style={[pal.text]}>
Heading 2
<Text type="xxl" style={[pal.text]}>
'xxl' lorem ipsum dolor
</Text>
<Text type="h3" style={[pal.text]}>
Heading 3
<Text type="xxl-medium" style={[pal.text]}>
'xxl-medium' lorem ipsum dolor
</Text>
<Text type="h4" style={[pal.text]}>
Heading 4
<Text type="xxl-bold" style={[pal.text]}>
'xxl-bold' lorem ipsum dolor
</Text>
<Text type="subtitle1" style={[pal.text]}>
Subtitle 1
<Text type="xxl-heavy" style={[pal.text]}>
'xxl-heavy' lorem ipsum dolor
</Text>
<Text type="subtitle2" style={[pal.text]}>
Subtitle 2
<Text type="xl-thin" style={[pal.text]}>
'xl-thin' lorem ipsum dolor
</Text>
<Text type="body1" style={[pal.text]}>
Body 1
<Text type="xl" style={[pal.text]}>
'xl' lorem ipsum dolor
</Text>
<Text type="body2" style={[pal.text]}>
Body 2
<Text type="xl-medium" style={[pal.text]}>
'xl-medium' lorem ipsum dolor
</Text>
<Text type="xl-bold" style={[pal.text]}>
'xl-bold' lorem ipsum dolor
</Text>
<Text type="xl-heavy" style={[pal.text]}>
'xl-heavy' lorem ipsum dolor
</Text>
<Text type="lg-thin" style={[pal.text]}>
'lg-thin' lorem ipsum dolor
</Text>
<Text type="lg" style={[pal.text]}>
'lg' lorem ipsum dolor
</Text>
<Text type="lg-medium" style={[pal.text]}>
'lg-medium' lorem ipsum dolor
</Text>
<Text type="lg-bold" style={[pal.text]}>
'lg-bold' lorem ipsum dolor
</Text>
<Text type="lg-heavy" style={[pal.text]}>
'lg-heavy' lorem ipsum dolor
</Text>
<Text type="md-thin" style={[pal.text]}>
'md-thin' lorem ipsum dolor
</Text>
<Text type="md" style={[pal.text]}>
'md' lorem ipsum dolor
</Text>
<Text type="md-medium" style={[pal.text]}>
'md-medium' lorem ipsum dolor
</Text>
<Text type="md-bold" style={[pal.text]}>
'md-bold' lorem ipsum dolor
</Text>
<Text type="md-heavy" style={[pal.text]}>
'md-heavy' lorem ipsum dolor
</Text>
<Text type="sm-thin" style={[pal.text]}>
'sm-thin' lorem ipsum dolor
</Text>
<Text type="sm" style={[pal.text]}>
'sm' lorem ipsum dolor
</Text>
<Text type="sm-medium" style={[pal.text]}>
'sm-medium' lorem ipsum dolor
</Text>
<Text type="sm-bold" style={[pal.text]}>
'sm-bold' lorem ipsum dolor
</Text>
<Text type="sm-heavy" style={[pal.text]}>
'sm-heavy' lorem ipsum dolor
</Text>
<Text type="xs-thin" style={[pal.text]}>
'xs-thin' lorem ipsum dolor
</Text>
<Text type="xs" style={[pal.text]}>
'xs' lorem ipsum dolor
</Text>
<Text type="xs-medium" style={[pal.text]}>
'xs-medium' lorem ipsum dolor
</Text>
<Text type="xs-bold" style={[pal.text]}>
'xs-bold' lorem ipsum dolor
</Text>
<Text type="xs-heavy" style={[pal.text]}>
'xs-heavy' lorem ipsum dolor
</Text>
<Text type="title-xl" style={[pal.text]}>
'title-xl' lorem ipsum dolor
</Text>
<Text type="title-lg" style={[pal.text]}>
'title-lg' lorem ipsum dolor
</Text>
<Text type="title" style={[pal.text]}>
'title' lorem ipsum dolor
</Text>
<Text type="button" style={[pal.text]}>
Button
</Text>
<Text type="caption" style={[pal.text]}>
Caption
</Text>
<Text type="overline" style={[pal.text]}>
Overline
</Text>

6
src/view/screens/Log.tsx
View file

@ -49,7 +49,7 @@ export const Log = observer(function Log({navIdx, visible}: ScreenParams) {
) : (
<FontAwesomeIcon icon="exclamation" style={s.red3} />
)}
<Text type="body2" style={[styles.summary, pal.text]}>
<Text type="sm" style={[styles.summary, pal.text]}>
{entry.summary}
</Text>
{!!entry.details ? (
@ -60,14 +60,14 @@ export const Log = observer(function Log({navIdx, visible}: ScreenParams) {
style={s.mr5}
/>
) : undefined}
<Text type="body2" style={[styles.ts, pal.textLight]}>
<Text type="sm" style={[styles.ts, pal.textLight]}>
{entry.ts ? ago(entry.ts) : ''}
</Text>
</TouchableOpacity>
{expanded.includes(entry.id) ? (
<View style={[pal.view, s.pl10, s.pr10, s.pb10]}>
<View style={[pal.btn, styles.details]}>
<Text type="mono1" style={pal.text}>
<Text type="mono" style={pal.text}>
{entry.details}
</Text>
</View>

2
src/view/screens/Search.tsx
View file

@ -82,7 +82,7 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
size={36}
/>
<View style={[s.ml10]}>
<Text type="h5" style={pal.text}>
<Text type="title-sm" style={pal.text}>
{item.displayName || item.handle}
</Text>
<Text style={pal.textLight}>@{item.handle}</Text>

6
src/view/screens/Settings.tsx
View file

@ -37,7 +37,7 @@ export const Settings = observer(function Settings({
<Text style={pal.text}>Signed in as</Text>
<View style={s.flex1} />
<TouchableOpacity onPress={onPressSignout}>
<Text type="h5" style={pal.link}>
<Text type="xl-heavy" style={pal.link}>
Sign out
</Text>
</TouchableOpacity>
@ -54,7 +54,7 @@ export const Settings = observer(function Settings({
avatar={store.me.avatar}
/>
<View style={[s.ml10]}>
<Text type="h5" style={pal.text}>
<Text type="xl-bold" style={pal.text}>
{store.me.displayName || store.me.handle}
</Text>
<Text style={pal.textLight}>@{store.me.handle}</Text>
@ -62,7 +62,7 @@ export const Settings = observer(function Settings({
</View>
</Link>
<View style={s.flex1} />
<Text type="overline1" style={[s.mb5]}>
<Text type="sm-medium" style={[s.mb5]}>
Advanced
</Text>
<Link