Rework all typography
parent
df4acbd683
commit
77580ab6a4
|
@ -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}>
|
||||
@{item.handle}
|
||||
</Text>
|
||||
</Text>
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -130,17 +130,19 @@ export const PostThreadItem = observer(function PostThreadItem({
|
|||
</View>
|
||||
<View style={styles.layoutContent}>
|
||||
<View style={[styles.meta, {paddingTop: 5, paddingBottom: 0}]}>
|
||||
<Link
|
||||
style={styles.metaItem}
|
||||
href={authorHref}
|
||||
title={authorTitle}>
|
||||
<Text type="h5" style={[pal.text]} numberOfLines={1}>
|
||||
{item.post.author.displayName || item.post.author.handle}
|
||||
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
|
||||
<Link
|
||||
style={styles.metaItem}
|
||||
href={authorHref}
|
||||
title={authorTitle}>
|
||||
<Text type="xl-bold" style={[pal.text]} numberOfLines={1}>
|
||||
{item.post.author.displayName || item.post.author.handle}
|
||||
</Text>
|
||||
</Link>
|
||||
<Text type="md" style={[styles.metaItem, pal.textLight]}>
|
||||
· {ago(item.post.indexedAt)}
|
||||
</Text>
|
||||
</Link>
|
||||
<Text type="h6" style={[styles.metaItem, pal.textLight]}>
|
||||
· {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: {
|
||||
|
|
|
@ -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}} />
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -58,7 +58,7 @@ export const Link = observer(function Link({
|
|||
})
|
||||
|
||||
export const TextLink = observer(function Link({
|
||||
type = 'body1',
|
||||
type = 'md',
|
||||
style,
|
||||
href,
|
||||
text,
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
|
|
|
@ -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]}>
|
||||
{handle}
|
||||
</Text>
|
||||
) : undefined}
|
||||
</Text>
|
||||
</Link>
|
||||
<Text type="h6" style={[styles.metaItem, pal.textLight]}>
|
||||
<Text type="md" style={[styles.metaItem, pal.textLight]}>
|
||||
· {ago(opts.timestamp)}
|
||||
</Text>
|
||||
</View>
|
||||
|
|
|
@ -8,7 +8,7 @@ import {useStores} from '../../../state'
|
|||
import {TypographyVariant} from '../../lib/ThemeContext'
|
||||
|
||||
export function UserInfoText({
|
||||
type = 'body1',
|
||||
type = 'md',
|
||||
did,
|
||||
attr,
|
||||
loading,
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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 = {
|
||||
|
|
|
@ -8,7 +8,7 @@ export type CustomTextProps = TextProps & {
|
|||
}
|
||||
|
||||
export function Text({
|
||||
type = 'body1',
|
||||
type = 'md',
|
||||
children,
|
||||
style,
|
||||
...props
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue