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

Rework all typography

zio/stable
Paul Frazee 2023-01-18 11:15:40 -06:00
parent df4acbd683
commit 77580ab6a4
28 changed files with 355 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/view/com/composer/Autocomplete.tsx
View File

@ -50,9 +50,9 @@ export function Autocomplete({
key={i}
style={[pal.border, styles.item]}
onPress={() => onSelect(item.handle)}>
<Text style={pal.text}>
<Text type="md-medium" style={pal.text}>
{item.displayName || item.handle}
<Text type="body2" style={pal.textLight}>
<Text type="sm" style={pal.textLight}>
&nbsp;@{item.handle}
</Text>
</Text>

9
src/view/com/composer/ComposePost.tsx
View File

@ -243,12 +243,12 @@ export const ComposePost = observer(function ComposePost({
/>
<View style={styles.replyToPost}>
<TextLink
type="h5"
type="xl-medium"
href={`/profile/${replyTo.author.handle}`}
text={replyTo.author.displayName || replyTo.author.handle}
style={[pal.text]}
/>
<Text style={pal.text} numberOfLines={6}>
<Text type="post-text" style={pal.text} numberOfLines={6}>
{replyTo.text}
</Text>
</View>
@ -408,9 +408,12 @@ const styles = StyleSheet.create({
textInput: {
flex: 1,
padding: 5,
fontSize: 18,
marginLeft: 8,
alignSelf: 'flex-start',
fontSize: 18,
letterSpacing: 0.2,
fontWeight: '400',
lineHeight: 23.4, // 1.3*16
},
replyToLayout: {
flexDirection: 'row',

2
src/view/com/composer/Prompt.tsx
View File

@ -26,7 +26,7 @@ export function ComposePrompt({
]}
onPress={onPressCompose}>
<View style={styles.textContainer}>
<Text type="h5" style={[pal.textLight, {fontWeight: 'normal'}]}>
<Text type="lg" style={[pal.textLight]}>
{text}
</Text>
</View>

2
src/view/com/discover/SuggestedFollows.tsx
View File

@ -160,7 +160,7 @@ const User = ({
/>
</View>
<View style={styles.actorContent}>
<Text type="h5" style={pal.text} numberOfLines={1}>
<Text type="title-sm" style={pal.text} numberOfLines={1}>
{item.displayName || item.handle}
</Text>
<Text style={pal.textLight} numberOfLines={1}>

24
src/view/com/post-thread/PostThreadItem.tsx
View File

@ -130,17 +130,19 @@ export const PostThreadItem = observer(function PostThreadItem({
</View>
<View style={styles.layoutContent}>
<View style={[styles.meta, {paddingTop: 5, paddingBottom: 0}]}>
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
<Link
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text type="h5" style={[pal.text]} numberOfLines={1}>
<Text type="xl-bold" style={[pal.text]} numberOfLines={1}>
{item.post.author.displayName || item.post.author.handle}
</Text>
</Link>
<Text type="h6" style={[styles.metaItem, pal.textLight]}>
<Text type="md" style={[styles.metaItem, pal.textLight]}>
&middot; {ago(item.post.indexedAt)}
</Text>
</View>
<View style={s.flex1} />
<PostDropdownBtn
style={styles.metaItem}
@ -161,7 +163,7 @@ export const PostThreadItem = observer(function PostThreadItem({
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text type="h6" style={[pal.textLight]} numberOfLines={1}>
<Text type="md" style={[pal.textLight]} numberOfLines={1}>
@{item.post.author.handle}
</Text>
</Link>
@ -176,9 +178,10 @@ export const PostThreadItem = observer(function PostThreadItem({
styles.postTextLargeContainer,
]}>
<RichText
type="h3"
type="post-text-lg"
text={record.text}
entities={record.entities}
lineHeight={1.3}
/>
</View>
) : undefined}
@ -190,8 +193,8 @@ export const PostThreadItem = observer(function PostThreadItem({
style={styles.expandedInfoItem}
href={repostsHref}
title={repostsTitle}>
<Text type="h6" style={pal.textLight}>
<Text type="h5" style={pal.text}>
<Text type="lg" style={pal.textLight}>
<Text type="xl-bold" style={pal.text}>
{item.post.repostCount}
</Text>{' '}
{pluralize(item.post.repostCount, 'repost')}
@ -205,8 +208,8 @@ export const PostThreadItem = observer(function PostThreadItem({
style={styles.expandedInfoItem}
href={upvotesHref}
title={upvotesTitle}>
<Text type="h6" style={pal.textLight}>
<Text type="h5" style={pal.text}>
<Text type="lg" style={pal.textLight}>
<Text type="xl-bold" style={pal.text}>
{item.post.upvoteCount}
</Text>{' '}
{pluralize(item.post.upvoteCount, 'like')}
@ -289,14 +292,16 @@ export const PostThreadItem = observer(function PostThreadItem({
{item.post.author.viewer?.muted ? (
<View style={[styles.mutedWarning, pal.btn]}>
<FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
<Text type="body2">This post is by a muted account.</Text>
<Text type="sm">This post is by a muted account.</Text>
</View>
) : record.text ? (
<View style={styles.postTextContainer}>
<RichText
type="post-text"
text={record.text}
entities={record.entities}
style={pal.text}
lineHeight={1.3}
/>
</View>
) : (
@ -394,6 +399,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
flexWrap: 'wrap',
paddingBottom: 8,
paddingRight: 20,
minHeight: 36,
},
postTextLargeContainer: {

14
src/view/com/post/Post.tsx
View File

@ -20,7 +20,6 @@ import {Text} from '../util/text/Text'
import {RichText} from '../util/text/RichText'
import * as Toast from '../util/Toast'
import {UserAvatar} from '../util/UserAvatar'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {useStores} from '../../../state'
import {s, colors} from '../../lib/styles'
import {usePalette} from '../../lib/hooks/usePalette'
@ -166,12 +165,12 @@ export const Post = observer(function Post({
size={9}
style={[pal.textLight, s.mr5]}
/>
<Text type="body2" style={[pal.textLight, s.mr2]}>
<Text type="sm" style={[pal.textLight, s.mr2]}>
Reply to
</Text>
<Link href={replyHref} title="Parent post">
<UserInfoText
type="body2"
type="sm"
did={replyAuthorDid}
attr="displayName"
style={[pal.textLight]}
@ -182,11 +181,16 @@ export const Post = observer(function Post({
{item.post.author.viewer?.muted ? (
<View style={[styles.mutedWarning, pal.btn]}>
<FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
<Text type="body2">This post is by a muted account.</Text>
<Text type="sm">This post is by a muted account.</Text>
</View>
) : record.text ? (
<View style={styles.postTextContainer}>
<RichText text={record.text} entities={record.entities} />
<RichText
type="post-text"
text={record.text}
entities={record.entities}
lineHeight={1.3}
/>
</View>
) : (
<View style={{height: 5}} />

24
src/view/com/posts/FeedItem.tsx
View File

@ -15,7 +15,7 @@ import {PostEmbeds} from '../util/PostEmbeds'
import {RichText} from '../util/text/RichText'
import * as Toast from '../util/Toast'
import {UserAvatar} from '../util/UserAvatar'
import {s, colors} from '../../lib/styles'
import {s} from '../../lib/styles'
import {useStores} from '../../../state'
import {useTheme} from '../../lib/ThemeContext'
import {usePalette} from '../../lib/hooks/usePalette'
@ -30,7 +30,6 @@ export const FeedItem = observer(function ({
ignoreMuteFor?: string
}) {
const store = useStores()
const theme = useTheme()
const pal = usePalette('default')
const [deleted, setDeleted] = useState(false)
const record = item.postRecord
@ -144,12 +143,7 @@ export const FeedItem = observer(function ({
icon="retweet"
style={[styles.includeReasonIcon, {color: pal.colors.textLight}]}
/>
<Text
type="body2"
style={{
fontWeight: '600',
color: pal.colors.textLight,
}}>
<Text type="sm-bold" style={pal.textLight}>
Reposted by{' '}
{item.reasonRepost.by.displayName || item.reasonRepost.by.handle}
</Text>
@ -180,15 +174,15 @@ export const FeedItem = observer(function ({
size={9}
style={[{color: pal.colors.textLight}, s.mr5]}
/>
<Text type="body2" style={[pal.textLight, s.mr2]}>
<Text type="md" style={[pal.textLight, s.mr2]}>
Reply to
</Text>
<Link href={replyHref} title="Parent post">
<UserInfoText
type="body2"
type="md"
did={replyAuthorDid}
attr="displayName"
style={[pal.textLight]}
style={[pal.textLight, s.ml2]}
/>
</Link>
</View>
@ -197,14 +191,15 @@ export const FeedItem = observer(function ({
ignoreMuteFor !== item.post.author.did ? (
<View style={[styles.mutedWarning, pal.btn]}>
<FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
<Text type="body2">This post is by a muted account.</Text>
<Text type="sm">This post is by a muted account.</Text>
</View>
) : record.text ? (
<View style={styles.postTextContainer}>
<RichText
type="body1"
type="post-text"
text={record.text}
entities={record.entities}
lineHeight={1.3}
/>
</View>
) : (
@ -251,7 +246,7 @@ export const FeedItem = observer(function ({
<Circle x="2" y="22" r="1.5" fill={pal.colors.replyLineDot} />
</Svg>
</View>
<Text style={[pal.link, theme.typography.body2]}>
<Text type="md" style={pal.link}>
View full thread
</Text>
</Link>
@ -322,6 +317,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
flexWrap: 'wrap',
paddingBottom: 4,
paddingRight: 20,
},
embed: {
marginBottom: 6,

2
src/view/com/profile/ProfileCard.tsx
View File

@ -39,7 +39,7 @@ export function ProfileCard({
<Text style={[s.bold, pal.text]} numberOfLines={1}>
{displayName || handle}
</Text>
<Text type="body2" style={[pal.textLight]} numberOfLines={1}>
<Text type="sm" style={[pal.textLight]} numberOfLines={1}>
@{handle}
</Text>
</View>

2
src/view/com/profile/ProfileFollowers.tsx
View File

@ -99,7 +99,7 @@ const User = ({item}: {item: FollowerItem}) => {
<Text style={[s.bold, pal.text]}>
{item.displayName || item.handle}
</Text>
<Text type="body2" style={[pal.textLight]}>
<Text type="sm" style={[pal.textLight]}>
@{item.handle}
</Text>
</View>

2
src/view/com/profile/ProfileFollows.tsx
View File

@ -99,7 +99,7 @@ const User = ({item}: {item: FollowItem}) => {
<Text style={[s.bold, pal.text]}>
{item.displayName || item.handle}
</Text>
<Text type="body2" style={pal.textLight}>
<Text type="sm" style={pal.textLight}>
@{item.handle}
</Text>
</View>

18
src/view/com/profile/ProfileHeader.tsx
View File

@ -108,7 +108,7 @@ export const ProfileHeader = observer(function ProfileHeader({
/>
</View>
<View style={styles.displayNameLine}>
<Text type="h2" style={[pal.text, {lineHeight: 38}]}>
<Text type="title-xl" style={[pal.text, {lineHeight: 38}]}>
{view.displayName || view.handle}
</Text>
</View>
@ -200,7 +200,7 @@ export const ProfileHeader = observer(function ProfileHeader({
) : undefined}
</View>
<View style={styles.displayNameLine}>
<Text type="h2" style={[pal.text, {lineHeight: 38}]}>
<Text type="title-xl" style={[pal.text, {lineHeight: 38}]}>
{view.displayName || view.handle}
</Text>
</View>
@ -212,10 +212,10 @@ export const ProfileHeader = observer(function ProfileHeader({
testID="profileHeaderFollowersButton"
style={[s.flexRow, s.mr10]}
onPress={onPressFollowers}>
<Text type="body2" style={[s.bold, s.mr2, pal.text]}>
<Text type="md" style={[s.bold, s.mr2, pal.text]}>
{view.followersCount}
</Text>
<Text type="body2" style={[pal.textLight]}>
<Text type="md" style={[pal.textLight]}>
{pluralize(view.followersCount, 'follower')}
</Text>
</TouchableOpacity>
@ -224,19 +224,19 @@ export const ProfileHeader = observer(function ProfileHeader({
testID="profileHeaderFollowsButton"
style={[s.flexRow, s.mr10]}
onPress={onPressFollows}>
<Text type="body2" style={[s.bold, s.mr2, pal.text]}>
<Text type="md" style={[s.bold, s.mr2, pal.text]}>
{view.followsCount}
</Text>
<Text type="body2" style={[pal.textLight]}>
<Text type="md" style={[pal.textLight]}>
following
</Text>
</TouchableOpacity>
) : undefined}
<View style={[s.flexRow, s.mr10]}>
<Text type="body2" style={[s.bold, s.mr2, pal.text]}>
<Text type="md" style={[s.bold, s.mr2, pal.text]}>
{view.postsCount}
</Text>
<Text type="body2" style={[pal.textLight]}>
<Text type="md" style={[pal.textLight]}>
{pluralize(view.postsCount, 'post')}
</Text>
</View>
@ -255,7 +255,7 @@ export const ProfileHeader = observer(function ProfileHeader({
icon={['far', 'eye-slash']}
style={[pal.text, s.mr5]}
/>
<Text type="body2" style={[s.mr2, pal.text]}>
<Text type="md" style={[s.mr2, pal.text]}>
Account muted.
</Text>
</View>

2
src/view/com/util/EmptyState.tsx
View File

@ -29,7 +29,7 @@ export function EmptyState({
/>
)}
</View>
<Text type="body1" style={[pal.textLight, styles.text]}>
<Text type="xl" style={[pal.textLight, styles.text]}>
{message}
</Text>
</View>

2
src/view/com/util/Link.tsx
View File

@ -58,7 +58,7 @@ export const Link = observer(function Link({
})
export const TextLink = observer(function Link({
type = 'body1',
type = 'md',
style,
href,
text,

12
src/view/com/util/PostEmbeds.tsx
View File

@ -92,21 +92,18 @@ export function PostEmbeds({
/>
)}
<View style={styles.extInner}>
<Text
type="body2"
numberOfLines={2}
style={[pal.text, styles.extTitle]}>
<Text type="sm-bold" numberOfLines={2} style={[pal.text]}>
{link.title || link.uri}
</Text>
<Text
type="body2"
type="sm"
numberOfLines={1}
style={[pal.textLight, styles.extUri]}>
{link.uri}
</Text>
{link.description ? (
<Text
type="body2"
type="sm"
numberOfLines={2}
style={[pal.text, styles.extDescription]}>
{link.description}
@ -140,9 +137,6 @@ const styles = StyleSheet.create({
extImageFallback: {
height: 160,
},
extTitle: {
fontWeight: '600',
},
extUri: {
marginTop: 2,
},

6
src/view/com/util/PostMeta.tsx
View File

@ -40,16 +40,16 @@ export function PostMeta(opts: PostMetaOpts) {
style={[styles.metaItem, styles.maxWidth]}
href={opts.authorHref}
title={opts.authorHandle}>
<Text type="h5" style={[pal.text]} numberOfLines={1}>
<Text type="lg-bold" style={[pal.text]} numberOfLines={1}>
{displayName}
{handle ? (
<Text type="h6" style={[pal.textLight]}>
<Text type="md" style={[pal.textLight]}>
&nbsp;{handle}
</Text>
) : undefined}
</Text>
</Link>
<Text type="h6" style={[styles.metaItem, pal.textLight]}>
<Text type="md" style={[styles.metaItem, pal.textLight]}>
&middot; {ago(opts.timestamp)}
</Text>
</View>

2
src/view/com/util/UserInfoText.tsx
View File

@ -8,7 +8,7 @@ import {useStores} from '../../../state'
import {TypographyVariant} from '../../lib/ThemeContext'
export function UserInfoText({
type = 'body1',
type = 'md',
did,
attr,
loading,

4
src/view/com/util/ViewHeader.tsx
View File

@ -68,12 +68,12 @@ export const ViewHeader = observer(function ViewHeader({
)}
</TouchableOpacity>
<View style={styles.titleContainer} pointerEvents="none">
<Text type="h4" style={[pal.text, styles.title]}>
<Text type="title" style={[pal.text, styles.title]}>
{title}
</Text>
{subtitle ? (
<Text
type="h5"
type="title-sm"
style={[styles.subtitle, pal.textLight]}
numberOfLines={1}>
{subtitle}

2
src/view/com/util/error/ErrorMessage.tsx
View File

@ -31,7 +31,7 @@ export function ErrorMessage({
<FontAwesomeIcon icon="exclamation" style={pal.text} size={16} />
</View>
<Text
type="body2"
type="sm"
style={[styles.message, pal.text]}
numberOfLines={numberOfLines}>
{message}

4
src/view/com/util/error/ErrorScreen.tsx
View File

@ -36,14 +36,14 @@ export function ErrorScreen({
/>
</View>
</View>
<Text type="h3" style={[styles.title, pal.text]}>
<Text type="title-lg" style={[styles.title, pal.text]}>
{title}
</Text>
<Text style={[styles.message, pal.textLight]}>{message}</Text>
{details && (
<Text
testID={`${testID}-details`}
type="body2"
type="sm"
style={[
styles.details,
pal.textInverted,

6
src/view/com/util/text/RichText.tsx
View File

@ -15,21 +15,23 @@ type Entity = {
}
export function RichText({
type = 'body1',
type = 'md',
text,
entities,
lineHeight = 1.2,
style,
numberOfLines,
}: {
type?: TypographyVariant
text: string
entities?: Entity[]
lineHeight?: number
style?: StyleProp<TextStyle>
numberOfLines?: number
}) {
const theme = useTheme()
const pal = usePalette('default')
const lineHeightStyle = lh(theme, type, 1.2)
const lineHeightStyle = lh(theme, type, lineHeight)
if (!entities?.length) {
if (/^\p{Extended_Pictographic}+$/u.test(text) && text.length <= 5) {
style = {

2
src/view/com/util/text/Text.tsx
View File

@ -8,7 +8,7 @@ export type CustomTextProps = TextProps & {
}
export function Text({
type = 'body1',
type = 'md',
children,
style,
...props

46
src/view/lib/ThemeContext.tsx
View File

@ -27,21 +27,39 @@ export type ShapeName = 'button' | 'bigButton' | 'smallButton'
export type Shapes = Record<ShapeName, ViewStyle>
export type TypographyVariant =
| 'h1'
| 'h2'
| 'h3'
| 'h4'
| 'h5'
| 'h6'
| 'subtitle1'
| 'subtitle2'
| 'body1'
| 'body2'
| 'xl-thin'
| 'xl'
| 'xl-medium'
| 'xl-bold'
| 'xl-heavy'
| 'lg-thin'
| 'lg'
| 'lg-medium'
| 'lg-bold'
| 'lg-heavy'
| 'md-thin'
| 'md'
| 'md-medium'
| 'md-bold'
| 'md-heavy'
| 'sm-thin'
| 'sm'
| 'sm-medium'
| 'sm-bold'
| 'sm-heavy'
| 'xs-thin'
| 'xs'
| 'xs-medium'
| 'xs-bold'
| 'xs-heavy'
| 'title-xl'
| 'title-lg'
| 'title'
| 'title-sm'
| 'post-text-lg'
| 'post-text'
| 'button'
| 'caption'
| 'overline1'
| 'overline2'
| 'mono1'
| 'mono'
export type Typography = Record<TypographyVariant, TextStyle>
export interface Theme {

173
src/view/lib/themes.ts
View File

@ -75,70 +75,167 @@ export const defaultTheme: Theme = {
},
},
typography: {
h1: {
fontSize: 48,
'xl-thin': {
fontSize: 17,
letterSpacing: 0.25,
fontWeight: '300',
},
xl: {
fontSize: 17,
letterSpacing: 0.25,
fontWeight: '400',
},
'xl-medium': {
fontSize: 17,
letterSpacing: 0.25,
fontWeight: '500',
},
h2: {
'xl-bold': {
fontSize: 17,
letterSpacing: 0.25,
fontWeight: '700',
},
'xl-heavy': {
fontSize: 17,
letterSpacing: 0.25,
fontWeight: '800',
},
'lg-thin': {
fontSize: 16,
letterSpacing: 0.25,
fontWeight: '300',
},
lg: {
fontSize: 16,
letterSpacing: 0.25,
fontWeight: '400',
},
'lg-medium': {
fontSize: 16,
letterSpacing: 0.25,
fontWeight: '500',
},
'lg-bold': {
fontSize: 16,
letterSpacing: 0.25,
fontWeight: '700',
},
'lg-heavy': {
fontSize: 16,
letterSpacing: 0.25,
fontWeight: '800',
},
'md-thin': {
fontSize: 15,
letterSpacing: 0.25,
fontWeight: '300',
},
md: {
fontSize: 15,
letterSpacing: 0.25,
fontWeight: '400',
},
'md-medium': {
fontSize: 15,
letterSpacing: 0.25,
fontWeight: '500',
},
'md-bold': {
fontSize: 15,
letterSpacing: 0.25,
fontWeight: '700',
},
'md-heavy': {
fontSize: 15,
letterSpacing: 0.25,
fontWeight: '800',
},
'sm-thin': {
fontSize: 14,
letterSpacing: 0.25,
fontWeight: '300',
},
sm: {
fontSize: 14,
letterSpacing: 0.25,
fontWeight: '400',
},
'sm-medium': {
fontSize: 14,
letterSpacing: 0.25,
fontWeight: '500',
},
'sm-bold': {
fontSize: 14,
letterSpacing: 0.25,
fontWeight: '700',
},
'sm-heavy': {
fontSize: 14,
letterSpacing: 0.25,
fontWeight: '800',
},
'xs-thin': {
fontSize: 13,
letterSpacing: 0.25,
fontWeight: '300',
},
xs: {
fontSize: 13,
letterSpacing: 0.25,
fontWeight: '400',
},
'xs-medium': {
fontSize: 13,
letterSpacing: 0.25,
fontWeight: '500',
},
'xs-bold': {
fontSize: 13,
letterSpacing: 0.25,
fontWeight: '700',
},
'xs-heavy': {
fontSize: 13,
letterSpacing: 0.25,
fontWeight: '800',
},
'title-xl': {
fontSize: 34,
letterSpacing: 0.25,
fontWeight: '500',
},
h3: {
'title-lg': {
fontSize: 24,
fontWeight: '500',
},
h4: {
title: {
fontWeight: '500',
fontSize: 20,
letterSpacing: 0.15,
},
h5: {
'title-sm': {
fontWeight: 'bold',
fontSize: 17,
letterSpacing: 0.15,
},
h6: {
fontWeight: '400',
fontSize: 15,
letterSpacing: 0.15,
},
subtitle1: {
'post-text': {
fontSize: 16,
letterSpacing: 0.15,
},
subtitle2: {
fontWeight: '500',
fontSize: 14,
letterSpacing: 0.1,
},
body1: {
fontSize: 17,
letterSpacing: 0.2,
fontWeight: '400',
},
body2: {
fontSize: 14,
letterSpacing: 0.25,
'post-text-lg': {
fontSize: 24,
letterSpacing: 0.4,
fontWeight: '400',
},
button: {
fontWeight: '500',
fontSize: 14,
letterSpacing: 0.5,
},
caption: {
fontSize: 12,
letterSpacing: 0.4,
},
overline1: {
fontSize: 10,
letterSpacing: 1.5,
textTransform: 'uppercase',
},
overline2: {
fontSize: 14,
fontWeight: '600',
},
mono1: {
mono: {
fontSize: 14,
fontFamily: Platform.OS === 'android' ? 'monospace' : 'Courier New',
},

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

6
src/view/shell/mobile/Menu.tsx
View File

@ -74,7 +74,7 @@ export const Menu = observer(
) : undefined}
</View>
<Text
type="h4"
type="title"
style={[
pal.text,
bold ? styles.menuItemLabelBold : styles.menuItemLabel,
@ -99,7 +99,7 @@ export const Menu = observer(
/>
<View style={s.flex1}>
<Text
type="h3"
type="title-lg"
style={[pal.text, styles.profileCardDisplayName]}
numberOfLines={1}>
{store.me.displayName || store.me.handle}
@ -119,7 +119,7 @@ export const Menu = observer(
style={pal.text as StyleProp<ViewStyle>}
size={25}
/>
<Text type="h4" style={[pal.text, styles.searchBtnLabel]}>
<Text type="title" style={[pal.text, styles.searchBtnLabel]}>
Search
</Text>
</TouchableOpacity>