forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Rework all typography
+355
-162
+2
-2
src/view/com/composer/Autocomplete.tsx
+2
-2
src/view/com/composer/Autocomplete.tsx
···
50
50
key={i}
51
51
style={[pal.border, styles.item]}
52
52
onPress={() => onSelect(item.handle)}>
53
-
<Text style={pal.text}>
53
+
<Text type="md-medium" style={pal.text}>
54
54
{item.displayName || item.handle}
55
-
<Text type="body2" style={pal.textLight}>
55
+
<Text type="sm" style={pal.textLight}>
56
56
@{item.handle}
57
57
</Text>
58
58
</Text>
+6
-3
src/view/com/composer/ComposePost.tsx
+6
-3
src/view/com/composer/ComposePost.tsx
···
243
243
/>
244
244
<View style={styles.replyToPost}>
245
245
<TextLink
246
-
type="h5"
246
+
type="xl-medium"
247
247
href={`/profile/${replyTo.author.handle}`}
248
248
text={replyTo.author.displayName || replyTo.author.handle}
249
249
style={[pal.text]}
250
250
/>
251
-
<Text style={pal.text} numberOfLines={6}>
251
+
<Text type="post-text" style={pal.text} numberOfLines={6}>
252
252
{replyTo.text}
253
253
</Text>
254
254
</View>
···
408
408
textInput: {
409
409
flex: 1,
410
410
padding: 5,
411
-
fontSize: 18,
412
411
marginLeft: 8,
413
412
alignSelf: 'flex-start',
413
+
fontSize: 18,
414
+
letterSpacing: 0.2,
415
+
fontWeight: '400',
416
+
lineHeight: 23.4, // 1.3*16
414
417
},
415
418
replyToLayout: {
416
419
flexDirection: 'row',
+1
-1
src/view/com/composer/Prompt.tsx
+1
-1
src/view/com/composer/Prompt.tsx
+1
-1
src/view/com/discover/SuggestedFollows.tsx
+1
-1
src/view/com/discover/SuggestedFollows.tsx
···
160
160
/>
161
161
</View>
162
162
<View style={styles.actorContent}>
163
-
<Text type="h5" style={pal.text} numberOfLines={1}>
163
+
<Text type="title-sm" style={pal.text} numberOfLines={1}>
164
164
{item.displayName || item.handle}
165
165
</Text>
166
166
<Text style={pal.textLight} numberOfLines={1}>
+23
-17
src/view/com/post-thread/PostThreadItem.tsx
+23
-17
src/view/com/post-thread/PostThreadItem.tsx
···
130
130
</View>
131
131
<View style={styles.layoutContent}>
132
132
<View style={[styles.meta, {paddingTop: 5, paddingBottom: 0}]}>
133
-
<Link
134
-
style={styles.metaItem}
135
-
href={authorHref}
136
-
title={authorTitle}>
137
-
<Text type="h5" style={[pal.text]} numberOfLines={1}>
138
-
{item.post.author.displayName || item.post.author.handle}
133
+
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
134
+
<Link
135
+
style={styles.metaItem}
136
+
href={authorHref}
137
+
title={authorTitle}>
138
+
<Text type="xl-bold" style={[pal.text]} numberOfLines={1}>
139
+
{item.post.author.displayName || item.post.author.handle}
140
+
</Text>
141
+
</Link>
142
+
<Text type="md" style={[styles.metaItem, pal.textLight]}>
143
+
· {ago(item.post.indexedAt)}
139
144
</Text>
140
-
</Link>
141
-
<Text type="h6" style={[styles.metaItem, pal.textLight]}>
142
-
· {ago(item.post.indexedAt)}
143
-
</Text>
145
+
</View>
144
146
<View style={s.flex1} />
145
147
<PostDropdownBtn
146
148
style={styles.metaItem}
···
161
163
style={styles.metaItem}
162
164
href={authorHref}
163
165
title={authorTitle}>
164
-
<Text type="h6" style={[pal.textLight]} numberOfLines={1}>
166
+
<Text type="md" style={[pal.textLight]} numberOfLines={1}>
165
167
@{item.post.author.handle}
166
168
</Text>
167
169
</Link>
···
176
178
styles.postTextLargeContainer,
177
179
]}>
178
180
<RichText
179
-
type="h3"
181
+
type="post-text-lg"
180
182
text={record.text}
181
183
entities={record.entities}
184
+
lineHeight={1.3}
182
185
/>
183
186
</View>
184
187
) : undefined}
···
190
193
style={styles.expandedInfoItem}
191
194
href={repostsHref}
192
195
title={repostsTitle}>
193
-
<Text type="h6" style={pal.textLight}>
194
-
<Text type="h5" style={pal.text}>
196
+
<Text type="lg" style={pal.textLight}>
197
+
<Text type="xl-bold" style={pal.text}>
195
198
{item.post.repostCount}
196
199
</Text>{' '}
197
200
{pluralize(item.post.repostCount, 'repost')}
···
205
208
style={styles.expandedInfoItem}
206
209
href={upvotesHref}
207
210
title={upvotesTitle}>
208
-
<Text type="h6" style={pal.textLight}>
209
-
<Text type="h5" style={pal.text}>
211
+
<Text type="lg" style={pal.textLight}>
212
+
<Text type="xl-bold" style={pal.text}>
210
213
{item.post.upvoteCount}
211
214
</Text>{' '}
212
215
{pluralize(item.post.upvoteCount, 'like')}
···
289
292
{item.post.author.viewer?.muted ? (
290
293
<View style={[styles.mutedWarning, pal.btn]}>
291
294
<FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
292
-
<Text type="body2">This post is by a muted account.</Text>
295
+
<Text type="sm">This post is by a muted account.</Text>
293
296
</View>
294
297
) : record.text ? (
295
298
<View style={styles.postTextContainer}>
296
299
<RichText
300
+
type="post-text"
297
301
text={record.text}
298
302
entities={record.entities}
299
303
style={pal.text}
304
+
lineHeight={1.3}
300
305
/>
301
306
</View>
302
307
) : (
···
394
399
alignItems: 'center',
395
400
flexWrap: 'wrap',
396
401
paddingBottom: 8,
402
+
paddingRight: 20,
397
403
minHeight: 36,
398
404
},
399
405
postTextLargeContainer: {
+9
-5
src/view/com/post/Post.tsx
+9
-5
src/view/com/post/Post.tsx
···
20
20
import {RichText} from '../util/text/RichText'
21
21
import * as Toast from '../util/Toast'
22
22
import {UserAvatar} from '../util/UserAvatar'
23
-
import {ErrorMessage} from '../util/error/ErrorMessage'
24
23
import {useStores} from '../../../state'
25
24
import {s, colors} from '../../lib/styles'
26
25
import {usePalette} from '../../lib/hooks/usePalette'
···
166
165
size={9}
167
166
style={[pal.textLight, s.mr5]}
168
167
/>
169
-
<Text type="body2" style={[pal.textLight, s.mr2]}>
168
+
<Text type="sm" style={[pal.textLight, s.mr2]}>
170
169
Reply to
171
170
</Text>
172
171
<Link href={replyHref} title="Parent post">
173
172
<UserInfoText
174
-
type="body2"
173
+
type="sm"
175
174
did={replyAuthorDid}
176
175
attr="displayName"
177
176
style={[pal.textLight]}
···
182
181
{item.post.author.viewer?.muted ? (
183
182
<View style={[styles.mutedWarning, pal.btn]}>
184
183
<FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
185
-
<Text type="body2">This post is by a muted account.</Text>
184
+
<Text type="sm">This post is by a muted account.</Text>
186
185
</View>
187
186
) : record.text ? (
188
187
<View style={styles.postTextContainer}>
189
-
<RichText text={record.text} entities={record.entities} />
188
+
<RichText
189
+
type="post-text"
190
+
text={record.text}
191
+
entities={record.entities}
192
+
lineHeight={1.3}
193
+
/>
190
194
</View>
191
195
) : (
192
196
<View style={{height: 5}} />
+10
-14
src/view/com/posts/FeedItem.tsx
+10
-14
src/view/com/posts/FeedItem.tsx
···
15
15
import {RichText} from '../util/text/RichText'
16
16
import * as Toast from '../util/Toast'
17
17
import {UserAvatar} from '../util/UserAvatar'
18
-
import {s, colors} from '../../lib/styles'
18
+
import {s} from '../../lib/styles'
19
19
import {useStores} from '../../../state'
20
20
import {useTheme} from '../../lib/ThemeContext'
21
21
import {usePalette} from '../../lib/hooks/usePalette'
···
30
30
ignoreMuteFor?: string
31
31
}) {
32
32
const store = useStores()
33
-
const theme = useTheme()
34
33
const pal = usePalette('default')
35
34
const [deleted, setDeleted] = useState(false)
36
35
const record = item.postRecord
···
144
143
icon="retweet"
145
144
style={[styles.includeReasonIcon, {color: pal.colors.textLight}]}
146
145
/>
147
-
<Text
148
-
type="body2"
149
-
style={{
150
-
fontWeight: '600',
151
-
color: pal.colors.textLight,
152
-
}}>
146
+
<Text type="sm-bold" style={pal.textLight}>
153
147
Reposted by{' '}
154
148
{item.reasonRepost.by.displayName || item.reasonRepost.by.handle}
155
149
</Text>
···
180
174
size={9}
181
175
style={[{color: pal.colors.textLight}, s.mr5]}
182
176
/>
183
-
<Text type="body2" style={[pal.textLight, s.mr2]}>
177
+
<Text type="md" style={[pal.textLight, s.mr2]}>
184
178
Reply to
185
179
</Text>
186
180
<Link href={replyHref} title="Parent post">
187
181
<UserInfoText
188
-
type="body2"
182
+
type="md"
189
183
did={replyAuthorDid}
190
184
attr="displayName"
191
-
style={[pal.textLight]}
185
+
style={[pal.textLight, s.ml2]}
192
186
/>
193
187
</Link>
194
188
</View>
···
197
191
ignoreMuteFor !== item.post.author.did ? (
198
192
<View style={[styles.mutedWarning, pal.btn]}>
199
193
<FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
200
-
<Text type="body2">This post is by a muted account.</Text>
194
+
<Text type="sm">This post is by a muted account.</Text>
201
195
</View>
202
196
) : record.text ? (
203
197
<View style={styles.postTextContainer}>
204
198
<RichText
205
-
type="body1"
199
+
type="post-text"
206
200
text={record.text}
207
201
entities={record.entities}
202
+
lineHeight={1.3}
208
203
/>
209
204
</View>
210
205
) : (
···
251
246
<Circle x="2" y="22" r="1.5" fill={pal.colors.replyLineDot} />
252
247
</Svg>
253
248
</View>
254
-
<Text style={[pal.link, theme.typography.body2]}>
249
+
<Text type="md" style={pal.link}>
255
250
View full thread
256
251
</Text>
257
252
</Link>
···
322
317
alignItems: 'center',
323
318
flexWrap: 'wrap',
324
319
paddingBottom: 4,
320
+
paddingRight: 20,
325
321
},
326
322
embed: {
327
323
marginBottom: 6,
+1
-1
src/view/com/profile/ProfileCard.tsx
+1
-1
src/view/com/profile/ProfileCard.tsx
+1
-1
src/view/com/profile/ProfileFollowers.tsx
+1
-1
src/view/com/profile/ProfileFollowers.tsx
+1
-1
src/view/com/profile/ProfileFollows.tsx
+1
-1
src/view/com/profile/ProfileFollows.tsx
+9
-9
src/view/com/profile/ProfileHeader.tsx
+9
-9
src/view/com/profile/ProfileHeader.tsx
···
108
108
/>
109
109
</View>
110
110
<View style={styles.displayNameLine}>
111
-
<Text type="h2" style={[pal.text, {lineHeight: 38}]}>
111
+
<Text type="title-xl" style={[pal.text, {lineHeight: 38}]}>
112
112
{view.displayName || view.handle}
113
113
</Text>
114
114
</View>
···
200
200
) : undefined}
201
201
</View>
202
202
<View style={styles.displayNameLine}>
203
-
<Text type="h2" style={[pal.text, {lineHeight: 38}]}>
203
+
<Text type="title-xl" style={[pal.text, {lineHeight: 38}]}>
204
204
{view.displayName || view.handle}
205
205
</Text>
206
206
</View>
···
212
212
testID="profileHeaderFollowersButton"
213
213
style={[s.flexRow, s.mr10]}
214
214
onPress={onPressFollowers}>
215
-
<Text type="body2" style={[s.bold, s.mr2, pal.text]}>
215
+
<Text type="md" style={[s.bold, s.mr2, pal.text]}>
216
216
{view.followersCount}
217
217
</Text>
218
-
<Text type="body2" style={[pal.textLight]}>
218
+
<Text type="md" style={[pal.textLight]}>
219
219
{pluralize(view.followersCount, 'follower')}
220
220
</Text>
221
221
</TouchableOpacity>
···
224
224
testID="profileHeaderFollowsButton"
225
225
style={[s.flexRow, s.mr10]}
226
226
onPress={onPressFollows}>
227
-
<Text type="body2" style={[s.bold, s.mr2, pal.text]}>
227
+
<Text type="md" style={[s.bold, s.mr2, pal.text]}>
228
228
{view.followsCount}
229
229
</Text>
230
-
<Text type="body2" style={[pal.textLight]}>
230
+
<Text type="md" style={[pal.textLight]}>
231
231
following
232
232
</Text>
233
233
</TouchableOpacity>
234
234
) : undefined}
235
235
<View style={[s.flexRow, s.mr10]}>
236
-
<Text type="body2" style={[s.bold, s.mr2, pal.text]}>
236
+
<Text type="md" style={[s.bold, s.mr2, pal.text]}>
237
237
{view.postsCount}
238
238
</Text>
239
-
<Text type="body2" style={[pal.textLight]}>
239
+
<Text type="md" style={[pal.textLight]}>
240
240
{pluralize(view.postsCount, 'post')}
241
241
</Text>
242
242
</View>
···
255
255
icon={['far', 'eye-slash']}
256
256
style={[pal.text, s.mr5]}
257
257
/>
258
-
<Text type="body2" style={[s.mr2, pal.text]}>
258
+
<Text type="md" style={[s.mr2, pal.text]}>
259
259
Account muted.
260
260
</Text>
261
261
</View>
+1
-1
src/view/com/util/EmptyState.tsx
+1
-1
src/view/com/util/EmptyState.tsx
+1
-1
src/view/com/util/Link.tsx
+1
-1
src/view/com/util/Link.tsx
+3
-9
src/view/com/util/PostEmbeds.tsx
+3
-9
src/view/com/util/PostEmbeds.tsx
···
92
92
/>
93
93
)}
94
94
<View style={styles.extInner}>
95
-
<Text
96
-
type="body2"
97
-
numberOfLines={2}
98
-
style={[pal.text, styles.extTitle]}>
95
+
<Text type="sm-bold" numberOfLines={2} style={[pal.text]}>
99
96
{link.title || link.uri}
100
97
</Text>
101
98
<Text
102
-
type="body2"
99
+
type="sm"
103
100
numberOfLines={1}
104
101
style={[pal.textLight, styles.extUri]}>
105
102
{link.uri}
106
103
</Text>
107
104
{link.description ? (
108
105
<Text
109
-
type="body2"
106
+
type="sm"
110
107
numberOfLines={2}
111
108
style={[pal.text, styles.extDescription]}>
112
109
{link.description}
···
139
136
},
140
137
extImageFallback: {
141
138
height: 160,
142
-
},
143
-
extTitle: {
144
-
fontWeight: '600',
145
139
},
146
140
extUri: {
147
141
marginTop: 2,
+3
-3
src/view/com/util/PostMeta.tsx
+3
-3
src/view/com/util/PostMeta.tsx
···
40
40
style={[styles.metaItem, styles.maxWidth]}
41
41
href={opts.authorHref}
42
42
title={opts.authorHandle}>
43
-
<Text type="h5" style={[pal.text]} numberOfLines={1}>
43
+
<Text type="lg-bold" style={[pal.text]} numberOfLines={1}>
44
44
{displayName}
45
45
{handle ? (
46
-
<Text type="h6" style={[pal.textLight]}>
46
+
<Text type="md" style={[pal.textLight]}>
47
47
{handle}
48
48
</Text>
49
49
) : undefined}
50
50
</Text>
51
51
</Link>
52
-
<Text type="h6" style={[styles.metaItem, pal.textLight]}>
52
+
<Text type="md" style={[styles.metaItem, pal.textLight]}>
53
53
· {ago(opts.timestamp)}
54
54
</Text>
55
55
</View>
+1
-1
src/view/com/util/UserInfoText.tsx
+1
-1
src/view/com/util/UserInfoText.tsx
+2
-2
src/view/com/util/ViewHeader.tsx
+2
-2
src/view/com/util/ViewHeader.tsx
···
68
68
)}
69
69
</TouchableOpacity>
70
70
<View style={styles.titleContainer} pointerEvents="none">
71
-
<Text type="h4" style={[pal.text, styles.title]}>
71
+
<Text type="title" style={[pal.text, styles.title]}>
72
72
{title}
73
73
</Text>
74
74
{subtitle ? (
75
75
<Text
76
-
type="h5"
76
+
type="title-sm"
77
77
style={[styles.subtitle, pal.textLight]}
78
78
numberOfLines={1}>
79
79
{subtitle}
+1
-1
src/view/com/util/error/ErrorMessage.tsx
+1
-1
src/view/com/util/error/ErrorMessage.tsx
+2
-2
src/view/com/util/error/ErrorScreen.tsx
+2
-2
src/view/com/util/error/ErrorScreen.tsx
···
36
36
/>
37
37
</View>
38
38
</View>
39
-
<Text type="h3" style={[styles.title, pal.text]}>
39
+
<Text type="title-lg" style={[styles.title, pal.text]}>
40
40
{title}
41
41
</Text>
42
42
<Text style={[styles.message, pal.textLight]}>{message}</Text>
43
43
{details && (
44
44
<Text
45
45
testID={`${testID}-details`}
46
-
type="body2"
46
+
type="sm"
47
47
style={[
48
48
styles.details,
49
49
pal.textInverted,
+4
-2
src/view/com/util/text/RichText.tsx
+4
-2
src/view/com/util/text/RichText.tsx
···
15
15
}
16
16
17
17
export function RichText({
18
-
type = 'body1',
18
+
type = 'md',
19
19
text,
20
20
entities,
21
+
lineHeight = 1.2,
21
22
style,
22
23
numberOfLines,
23
24
}: {
24
25
type?: TypographyVariant
25
26
text: string
26
27
entities?: Entity[]
28
+
lineHeight?: number
27
29
style?: StyleProp<TextStyle>
28
30
numberOfLines?: number
29
31
}) {
30
32
const theme = useTheme()
31
33
const pal = usePalette('default')
32
-
const lineHeightStyle = lh(theme, type, 1.2)
34
+
const lineHeightStyle = lh(theme, type, lineHeight)
33
35
if (!entities?.length) {
34
36
if (/^\p{Extended_Pictographic}+$/u.test(text) && text.length <= 5) {
35
37
style = {
+1
-1
src/view/com/util/text/Text.tsx
+1
-1
src/view/com/util/text/Text.tsx
+32
-14
src/view/lib/ThemeContext.tsx
+32
-14
src/view/lib/ThemeContext.tsx
···
27
27
export type Shapes = Record<ShapeName, ViewStyle>
28
28
29
29
export type TypographyVariant =
30
-
| 'h1'
31
-
| 'h2'
32
-
| 'h3'
33
-
| 'h4'
34
-
| 'h5'
35
-
| 'h6'
36
-
| 'subtitle1'
37
-
| 'subtitle2'
38
-
| 'body1'
39
-
| 'body2'
30
+
| 'xl-thin'
31
+
| 'xl'
32
+
| 'xl-medium'
33
+
| 'xl-bold'
34
+
| 'xl-heavy'
35
+
| 'lg-thin'
36
+
| 'lg'
37
+
| 'lg-medium'
38
+
| 'lg-bold'
39
+
| 'lg-heavy'
40
+
| 'md-thin'
41
+
| 'md'
42
+
| 'md-medium'
43
+
| 'md-bold'
44
+
| 'md-heavy'
45
+
| 'sm-thin'
46
+
| 'sm'
47
+
| 'sm-medium'
48
+
| 'sm-bold'
49
+
| 'sm-heavy'
50
+
| 'xs-thin'
51
+
| 'xs'
52
+
| 'xs-medium'
53
+
| 'xs-bold'
54
+
| 'xs-heavy'
55
+
| 'title-xl'
56
+
| 'title-lg'
57
+
| 'title'
58
+
| 'title-sm'
59
+
| 'post-text-lg'
60
+
| 'post-text'
40
61
| 'button'
41
-
| 'caption'
42
-
| 'overline1'
43
-
| 'overline2'
44
-
| 'mono1'
62
+
| 'mono'
45
63
export type Typography = Record<TypographyVariant, TextStyle>
46
64
47
65
export interface Theme {
+135
-38
src/view/lib/themes.ts
+135
-38
src/view/lib/themes.ts
···
75
75
},
76
76
},
77
77
typography: {
78
-
h1: {
79
-
fontSize: 48,
78
+
'xl-thin': {
79
+
fontSize: 17,
80
+
letterSpacing: 0.25,
81
+
fontWeight: '300',
82
+
},
83
+
xl: {
84
+
fontSize: 17,
85
+
letterSpacing: 0.25,
86
+
fontWeight: '400',
87
+
},
88
+
'xl-medium': {
89
+
fontSize: 17,
90
+
letterSpacing: 0.25,
91
+
fontWeight: '500',
92
+
},
93
+
'xl-bold': {
94
+
fontSize: 17,
95
+
letterSpacing: 0.25,
96
+
fontWeight: '700',
97
+
},
98
+
'xl-heavy': {
99
+
fontSize: 17,
100
+
letterSpacing: 0.25,
101
+
fontWeight: '800',
102
+
},
103
+
'lg-thin': {
104
+
fontSize: 16,
105
+
letterSpacing: 0.25,
106
+
fontWeight: '300',
107
+
},
108
+
lg: {
109
+
fontSize: 16,
110
+
letterSpacing: 0.25,
111
+
fontWeight: '400',
112
+
},
113
+
'lg-medium': {
114
+
fontSize: 16,
115
+
letterSpacing: 0.25,
116
+
fontWeight: '500',
117
+
},
118
+
'lg-bold': {
119
+
fontSize: 16,
120
+
letterSpacing: 0.25,
121
+
fontWeight: '700',
122
+
},
123
+
'lg-heavy': {
124
+
fontSize: 16,
125
+
letterSpacing: 0.25,
126
+
fontWeight: '800',
127
+
},
128
+
'md-thin': {
129
+
fontSize: 15,
130
+
letterSpacing: 0.25,
131
+
fontWeight: '300',
132
+
},
133
+
md: {
134
+
fontSize: 15,
135
+
letterSpacing: 0.25,
136
+
fontWeight: '400',
137
+
},
138
+
'md-medium': {
139
+
fontSize: 15,
140
+
letterSpacing: 0.25,
141
+
fontWeight: '500',
142
+
},
143
+
'md-bold': {
144
+
fontSize: 15,
145
+
letterSpacing: 0.25,
146
+
fontWeight: '700',
147
+
},
148
+
'md-heavy': {
149
+
fontSize: 15,
150
+
letterSpacing: 0.25,
151
+
fontWeight: '800',
152
+
},
153
+
'sm-thin': {
154
+
fontSize: 14,
155
+
letterSpacing: 0.25,
156
+
fontWeight: '300',
157
+
},
158
+
sm: {
159
+
fontSize: 14,
160
+
letterSpacing: 0.25,
161
+
fontWeight: '400',
162
+
},
163
+
'sm-medium': {
164
+
fontSize: 14,
165
+
letterSpacing: 0.25,
166
+
fontWeight: '500',
167
+
},
168
+
'sm-bold': {
169
+
fontSize: 14,
170
+
letterSpacing: 0.25,
171
+
fontWeight: '700',
172
+
},
173
+
'sm-heavy': {
174
+
fontSize: 14,
175
+
letterSpacing: 0.25,
176
+
fontWeight: '800',
177
+
},
178
+
'xs-thin': {
179
+
fontSize: 13,
180
+
letterSpacing: 0.25,
181
+
fontWeight: '300',
182
+
},
183
+
xs: {
184
+
fontSize: 13,
185
+
letterSpacing: 0.25,
186
+
fontWeight: '400',
187
+
},
188
+
'xs-medium': {
189
+
fontSize: 13,
190
+
letterSpacing: 0.25,
80
191
fontWeight: '500',
81
192
},
82
-
h2: {
193
+
'xs-bold': {
194
+
fontSize: 13,
195
+
letterSpacing: 0.25,
196
+
fontWeight: '700',
197
+
},
198
+
'xs-heavy': {
199
+
fontSize: 13,
200
+
letterSpacing: 0.25,
201
+
fontWeight: '800',
202
+
},
203
+
204
+
'title-xl': {
83
205
fontSize: 34,
84
206
letterSpacing: 0.25,
85
207
fontWeight: '500',
86
208
},
87
-
h3: {
209
+
'title-lg': {
88
210
fontSize: 24,
89
211
fontWeight: '500',
90
212
},
91
-
h4: {
213
+
title: {
92
214
fontWeight: '500',
93
215
fontSize: 20,
94
216
letterSpacing: 0.15,
95
217
},
96
-
h5: {
218
+
'title-sm': {
97
219
fontWeight: 'bold',
98
220
fontSize: 17,
99
221
letterSpacing: 0.15,
100
222
},
101
-
h6: {
102
-
fontWeight: '400',
103
-
fontSize: 15,
104
-
letterSpacing: 0.15,
105
-
},
106
-
subtitle1: {
223
+
'post-text': {
107
224
fontSize: 16,
108
-
letterSpacing: 0.15,
109
-
},
110
-
subtitle2: {
111
-
fontWeight: '500',
112
-
fontSize: 14,
113
-
letterSpacing: 0.1,
114
-
},
115
-
body1: {
116
-
fontSize: 17,
117
225
letterSpacing: 0.2,
226
+
fontWeight: '400',
118
227
},
119
-
body2: {
120
-
fontSize: 14,
121
-
letterSpacing: 0.25,
228
+
'post-text-lg': {
229
+
fontSize: 24,
230
+
letterSpacing: 0.4,
231
+
fontWeight: '400',
122
232
},
123
233
button: {
124
234
fontWeight: '500',
125
235
fontSize: 14,
126
236
letterSpacing: 0.5,
127
237
},
128
-
caption: {
129
-
fontSize: 12,
130
-
letterSpacing: 0.4,
131
-
},
132
-
overline1: {
133
-
fontSize: 10,
134
-
letterSpacing: 1.5,
135
-
textTransform: 'uppercase',
136
-
},
137
-
overline2: {
138
-
fontSize: 14,
139
-
fontWeight: '600',
140
-
},
141
-
mono1: {
238
+
mono: {
142
239
fontSize: 14,
143
240
fontFamily: Platform.OS === 'android' ? 'monospace' : 'Courier New',
144
241
},
+95
-22
src/view/screens/Debug.tsx
+95
-22
src/view/screens/Debug.tsx
···
87
87
const pal = usePalette('default')
88
88
return (
89
89
<View style={{paddingTop: 10, paddingBottom: 5}}>
90
-
<Text type="h3" style={pal.text}>
90
+
<Text type="title-lg" style={pal.text}>
91
91
{label}
92
92
</Text>
93
93
</View>
···
97
97
function BaseView() {
98
98
return (
99
99
<View style={{paddingHorizontal: 10}}>
100
+
<Heading label="Typography" />
101
+
<TypographyView />
100
102
<Heading label="Palettes" />
101
103
<PaletteView palette="default" />
102
104
<PaletteView palette="primary" />
103
105
<PaletteView palette="secondary" />
104
106
<PaletteView palette="inverted" />
105
107
<PaletteView palette="error" />
106
-
<Heading label="Typography" />
107
-
<TypographyView />
108
108
<Heading label="Empty state" />
109
109
<EmptyStateView />
110
110
<Heading label="Loading placeholders" />
···
197
197
const pal = usePalette('default')
198
198
return (
199
199
<View style={[pal.view]}>
200
-
<Text type="h1" style={[pal.text]}>
201
-
Heading 1
200
+
<Text type="xxl-thin" style={[pal.text]}>
201
+
'xxl-thin' lorem ipsum dolor
202
+
</Text>
203
+
<Text type="xxl" style={[pal.text]}>
204
+
'xxl' lorem ipsum dolor
205
+
</Text>
206
+
<Text type="xxl-medium" style={[pal.text]}>
207
+
'xxl-medium' lorem ipsum dolor
208
+
</Text>
209
+
<Text type="xxl-bold" style={[pal.text]}>
210
+
'xxl-bold' lorem ipsum dolor
211
+
</Text>
212
+
<Text type="xxl-heavy" style={[pal.text]}>
213
+
'xxl-heavy' lorem ipsum dolor
214
+
</Text>
215
+
<Text type="xl-thin" style={[pal.text]}>
216
+
'xl-thin' lorem ipsum dolor
217
+
</Text>
218
+
<Text type="xl" style={[pal.text]}>
219
+
'xl' lorem ipsum dolor
220
+
</Text>
221
+
<Text type="xl-medium" style={[pal.text]}>
222
+
'xl-medium' lorem ipsum dolor
223
+
</Text>
224
+
<Text type="xl-bold" style={[pal.text]}>
225
+
'xl-bold' lorem ipsum dolor
226
+
</Text>
227
+
<Text type="xl-heavy" style={[pal.text]}>
228
+
'xl-heavy' lorem ipsum dolor
229
+
</Text>
230
+
<Text type="lg-thin" style={[pal.text]}>
231
+
'lg-thin' lorem ipsum dolor
232
+
</Text>
233
+
<Text type="lg" style={[pal.text]}>
234
+
'lg' lorem ipsum dolor
235
+
</Text>
236
+
<Text type="lg-medium" style={[pal.text]}>
237
+
'lg-medium' lorem ipsum dolor
238
+
</Text>
239
+
<Text type="lg-bold" style={[pal.text]}>
240
+
'lg-bold' lorem ipsum dolor
241
+
</Text>
242
+
<Text type="lg-heavy" style={[pal.text]}>
243
+
'lg-heavy' lorem ipsum dolor
244
+
</Text>
245
+
<Text type="md-thin" style={[pal.text]}>
246
+
'md-thin' lorem ipsum dolor
247
+
</Text>
248
+
<Text type="md" style={[pal.text]}>
249
+
'md' lorem ipsum dolor
250
+
</Text>
251
+
<Text type="md-medium" style={[pal.text]}>
252
+
'md-medium' lorem ipsum dolor
202
253
</Text>
203
-
<Text type="h2" style={[pal.text]}>
204
-
Heading 2
254
+
<Text type="md-bold" style={[pal.text]}>
255
+
'md-bold' lorem ipsum dolor
205
256
</Text>
206
-
<Text type="h3" style={[pal.text]}>
207
-
Heading 3
257
+
<Text type="md-heavy" style={[pal.text]}>
258
+
'md-heavy' lorem ipsum dolor
208
259
</Text>
209
-
<Text type="h4" style={[pal.text]}>
210
-
Heading 4
260
+
<Text type="sm-thin" style={[pal.text]}>
261
+
'sm-thin' lorem ipsum dolor
211
262
</Text>
212
-
<Text type="subtitle1" style={[pal.text]}>
213
-
Subtitle 1
263
+
<Text type="sm" style={[pal.text]}>
264
+
'sm' lorem ipsum dolor
214
265
</Text>
215
-
<Text type="subtitle2" style={[pal.text]}>
216
-
Subtitle 2
266
+
<Text type="sm-medium" style={[pal.text]}>
267
+
'sm-medium' lorem ipsum dolor
217
268
</Text>
218
-
<Text type="body1" style={[pal.text]}>
219
-
Body 1
269
+
<Text type="sm-bold" style={[pal.text]}>
270
+
'sm-bold' lorem ipsum dolor
220
271
</Text>
221
-
<Text type="body2" style={[pal.text]}>
222
-
Body 2
272
+
<Text type="sm-heavy" style={[pal.text]}>
273
+
'sm-heavy' lorem ipsum dolor
274
+
</Text>
275
+
<Text type="xs-thin" style={[pal.text]}>
276
+
'xs-thin' lorem ipsum dolor
277
+
</Text>
278
+
<Text type="xs" style={[pal.text]}>
279
+
'xs' lorem ipsum dolor
280
+
</Text>
281
+
<Text type="xs-medium" style={[pal.text]}>
282
+
'xs-medium' lorem ipsum dolor
283
+
</Text>
284
+
<Text type="xs-bold" style={[pal.text]}>
285
+
'xs-bold' lorem ipsum dolor
286
+
</Text>
287
+
<Text type="xs-heavy" style={[pal.text]}>
288
+
'xs-heavy' lorem ipsum dolor
289
+
</Text>
290
+
291
+
<Text type="title-xl" style={[pal.text]}>
292
+
'title-xl' lorem ipsum dolor
293
+
</Text>
294
+
<Text type="title-lg" style={[pal.text]}>
295
+
'title-lg' lorem ipsum dolor
296
+
</Text>
297
+
<Text type="title" style={[pal.text]}>
298
+
'title' lorem ipsum dolor
223
299
</Text>
224
300
<Text type="button" style={[pal.text]}>
225
301
Button
226
-
</Text>
227
-
<Text type="caption" style={[pal.text]}>
228
-
Caption
229
302
</Text>
230
303
<Text type="overline" style={[pal.text]}>
231
304
Overline
+3
-3
src/view/screens/Log.tsx
+3
-3
src/view/screens/Log.tsx
···
49
49
) : (
50
50
<FontAwesomeIcon icon="exclamation" style={s.red3} />
51
51
)}
52
-
<Text type="body2" style={[styles.summary, pal.text]}>
52
+
<Text type="sm" style={[styles.summary, pal.text]}>
53
53
{entry.summary}
54
54
</Text>
55
55
{!!entry.details ? (
···
60
60
style={s.mr5}
61
61
/>
62
62
) : undefined}
63
-
<Text type="body2" style={[styles.ts, pal.textLight]}>
63
+
<Text type="sm" style={[styles.ts, pal.textLight]}>
64
64
{entry.ts ? ago(entry.ts) : ''}
65
65
</Text>
66
66
</TouchableOpacity>
67
67
{expanded.includes(entry.id) ? (
68
68
<View style={[pal.view, s.pl10, s.pr10, s.pb10]}>
69
69
<View style={[pal.btn, styles.details]}>
70
-
<Text type="mono1" style={pal.text}>
70
+
<Text type="mono" style={pal.text}>
71
71
{entry.details}
72
72
</Text>
73
73
</View>
+1
-1
src/view/screens/Search.tsx
+1
-1
src/view/screens/Search.tsx
+3
-3
src/view/screens/Settings.tsx
+3
-3
src/view/screens/Settings.tsx
···
37
37
<Text style={pal.text}>Signed in as</Text>
38
38
<View style={s.flex1} />
39
39
<TouchableOpacity onPress={onPressSignout}>
40
-
<Text type="h5" style={pal.link}>
40
+
<Text type="xl-heavy" style={pal.link}>
41
41
Sign out
42
42
</Text>
43
43
</TouchableOpacity>
···
54
54
avatar={store.me.avatar}
55
55
/>
56
56
<View style={[s.ml10]}>
57
-
<Text type="h5" style={pal.text}>
57
+
<Text type="xl-bold" style={pal.text}>
58
58
{store.me.displayName || store.me.handle}
59
59
</Text>
60
60
<Text style={pal.textLight}>@{store.me.handle}</Text>
···
62
62
</View>
63
63
</Link>
64
64
<View style={s.flex1} />
65
-
<Text type="overline1" style={[s.mb5]}>
65
+
<Text type="sm-medium" style={[s.mb5]}>
66
66
Advanced
67
67
</Text>
68
68
<Link
+3
-3
src/view/shell/mobile/Menu.tsx
+3
-3
src/view/shell/mobile/Menu.tsx
···
74
74
) : undefined}
75
75
</View>
76
76
<Text
77
-
type="h4"
77
+
type="title"
78
78
style={[
79
79
pal.text,
80
80
bold ? styles.menuItemLabelBold : styles.menuItemLabel,
···
99
99
/>
100
100
<View style={s.flex1}>
101
101
<Text
102
-
type="h3"
102
+
type="title-lg"
103
103
style={[pal.text, styles.profileCardDisplayName]}
104
104
numberOfLines={1}>
105
105
{store.me.displayName || store.me.handle}
···
119
119
style={pal.text as StyleProp<ViewStyle>}
120
120
size={25}
121
121
/>
122
-
<Text type="h4" style={[pal.text, styles.searchBtnLabel]}>
122
+
<Text type="title" style={[pal.text, styles.searchBtnLabel]}>
123
123
Search
124
124
</Text>
125
125
</TouchableOpacity>