Migrate to @bsky.app/alf package (#9030)

* Add storybook shortcut in dev

* Migrate to alg pkg

* Migrate font_bold to new font_semi_bold

* Migrate font_heavy to font_bold

* Fix old theme refs

* Remove leading util

* Bump

* Revert "Add storybook shortcut in dev"

This reverts commit 7a86195c77fb5d449c7782e64ebabb6addfab919.

* Remove alf script

* Adjust font scale

* Bump

* Bump pkg

* Migrate values from conflicts

* Create default themes outside react

* Use built-in alf utils

* Migrate old font styles

* Remove unused tokens

* Move theme creation to more appropriate file

* Update button colors

* Adjust TextField colors, line heights
This commit is contained in:
Eric Bailey
2025-09-24 11:47:08 -05:00
committed by GitHub
parent bdc58045cf
commit bd17f04810
219 changed files with 645 additions and 2413 deletions
+1 -1
View File
@@ -121,7 +121,7 @@ export function Deactivated() {
</View>
<View style={[a.gap_xs, a.pb_3xl]}>
<Text style={[a.text_xl, a.font_bold, a.leading_snug]}>
<Text style={[a.text_xl, a.font_semi_bold, a.leading_snug]}>
<Trans>Welcome back!</Trans>
</Text>
<Text style={[a.text_sm, a.leading_snug]}>
+1 -1
View File
@@ -75,7 +75,7 @@ export function NoFeedsPinned({
},
]}>
<View style={[a.align_center, a.gap_sm, a.pb_xl]}>
<Text style={[a.text_xl, a.font_bold]}>
<Text style={[a.text_xl, a.font_semi_bold]}>
<Trans>Whoops!</Trans>
</Text>
<Text
+2 -2
View File
@@ -122,7 +122,7 @@ export function ListHiddenScreen({
width={42}
/>
<View style={[a.gap_sm, a.align_center]}>
<Text style={[a.font_bold, a.text_3xl]}>
<Text style={[a.font_semi_bold, a.text_3xl]}>
{list.creator.viewer?.blocking || list.creator.viewer?.blockedBy ? (
<Trans>Creator has been blocked</Trans>
) : (
@@ -150,7 +150,7 @@ export function ListHiddenScreen({
) : (
<Trans>
This list – created by{' '}
<Text style={[a.font_bold]}>
<Text style={[a.font_semi_bold]}>
{sanitizeHandle(list.creator.handle, '@')}
</Text>{' '}
– contains possible violations of Bluesky's community guidelines
+1 -1
View File
@@ -22,7 +22,7 @@ export function FormContainer({
testID={testID}
style={[a.gap_md, a.flex_1, !gtMobile && [a.px_lg, a.py_md], style]}>
{titleText && !gtMobile && (
<Text style={[a.text_xl, a.font_bold, t.atoms.text_contrast_high]}>
<Text style={[a.text_xl, a.font_semi_bold, t.atoms.text_contrast_high]}>
{titleText}
</Text>
)}
+1 -1
View File
@@ -19,7 +19,7 @@ export const PasswordUpdatedForm = ({
<FormContainer
testID="passwordUpdatedForm"
style={[a.gap_2xl, !gtMobile && a.mt_5xl]}>
<Text style={[a.text_3xl, a.font_bold, a.text_center]}>
<Text style={[a.text_3xl, a.font_semi_bold, a.text_center]}>
<Trans>Password updated!</Trans>
</Text>
<Text style={[a.text_center, a.mx_auto, {maxWidth: '80%'}]}>
+4 -2
View File
@@ -265,7 +265,8 @@ export function MessagesScreenInner({navigation, route}: Props) {
width={48}
fill={t.atoms.text_contrast_low.color}
/>
<Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>
<Text
style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_semi_bold]}>
<Trans>Whoops!</Trans>
</Text>
<Text
@@ -298,7 +299,8 @@ export function MessagesScreenInner({navigation, route}: Props) {
<>
<View style={[a.pt_3xl, a.align_center]}>
<MessageIcon width={48} fill={t.palette.primary_500} />
<Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>
<Text
style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_semi_bold]}>
<Trans>Nothing here</Trans>
</Text>
<Text
+4 -2
View File
@@ -193,7 +193,8 @@ function RequestList({
width={48}
fill={t.atoms.text_contrast_low.color}
/>
<Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>
<Text
style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_semi_bold]}>
<Trans>Whoops!</Trans>
</Text>
<Text
@@ -225,7 +226,8 @@ function RequestList({
<>
<View style={[a.pt_3xl, a.align_center]}>
<MessageIcon width={48} fill={t.palette.primary_500} />
<Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>
<Text
style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_semi_bold]}>
<Trans comment="Title message shown in chat requests inbox when it's empty">
Inbox zero!
</Trans>
+2 -2
View File
@@ -71,7 +71,7 @@ export function MessagesSettingsScreenInner({}: Props) {
</Layout.Header.Outer>
<Layout.Content>
<View style={[a.p_lg, a.gap_md]}>
<Text style={[a.text_lg, a.font_bold]}>
<Text style={[a.text_lg, a.font_semi_bold]}>
<Trans>Allow new messages from</Trans>
</Text>
<Toggle.Group
@@ -121,7 +121,7 @@ export function MessagesSettingsScreenInner({}: Props) {
{isNative && (
<>
<Divider style={a.my_md} />
<Text style={[a.text_lg, a.font_bold]}>
<Text style={[a.text_lg, a.font_semi_bold]}>
<Trans>Notification Sounds</Trans>
</Text>
<Toggle.Group
@@ -22,7 +22,12 @@ export function ChatDisabled() {
<View
style={[a.align_start, a.p_xl, a.rounded_md, t.atoms.bg_contrast_25]}>
<Text
style={[a.text_md, a.font_bold, a.pb_sm, t.atoms.text_contrast_high]}>
style={[
a.text_md,
a.font_semi_bold,
a.pb_sm,
t.atoms.text_contrast_high,
]}>
<Trans>Your chats have been disabled</Trans>
</Text>
<Text style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
@@ -104,7 +109,7 @@ function DialogInner() {
return (
<Dialog.ScrollableInner label={_(msg`Appeal this decision`)}>
<Text style={[a.text_2xl, a.font_bold, a.pb_xs, a.leading_tight]}>
<Text style={[a.text_2xl, a.font_semi_bold, a.pb_xs, a.leading_tight]}>
<Trans>Appeal this decision</Trans>
</Text>
<Text style={[a.text_md, a.leading_snug]}>
@@ -397,7 +397,7 @@ function ChatListItemReady({
style={[
a.text_md,
t.atoms.text,
a.font_bold,
a.font_semi_bold,
{lineHeight: 21},
isDimStyle && t.atoms.text_contrast_medium,
]}>
@@ -461,7 +461,7 @@ function ChatListItemReady({
style={[
a.text_sm,
a.leading_snug,
hasUnread ? a.font_bold : t.atoms.text_contrast_high,
hasUnread ? a.font_semi_bold : t.atoms.text_contrast_high,
isDimStyle && t.atoms.text_contrast_medium,
]}>
{lastMessage}
@@ -57,7 +57,7 @@ export function InboxPreview({
)}
</View>
<ButtonText
style={[a.flex_1, a.font_bold, a.text_left]}
style={[a.flex_1, a.font_semi_bold, a.text_left]}
numberOfLines={1}>
<Trans>Chat requests</Trans>
</ButtonText>
@@ -38,7 +38,7 @@ export function RequestListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
{/* spacer, since you can't nest pressables */}
<View style={[a.pt_md, a.pb_xs, a.w_full, {opacity: 0}]} aria-hidden>
{/* Placeholder text so that it responds to the font height */}
<Text style={[a.text_xs, a.leading_tight, a.font_bold]}>
<Text style={[a.text_xs, a.leading_tight, a.font_semi_bold]}>
<Trans comment="Accept a chat request">Accept Request</Trans>
</Text>
</View>
+12 -6
View File
@@ -142,7 +142,7 @@ function SubItem({
]}>
<View style={[a.flex_row, a.align_center, a.gap_md]}>
<Icon size="md" style={[t.atoms.text_contrast_medium]} />
<Text style={[a.text_sm, a.font_bold]}>{title}</Text>
<Text style={[a.text_sm, a.font_semi_bold]}>{title}</Text>
</View>
<ChevronRight
size="sm"
@@ -221,7 +221,12 @@ export function ModerationScreenInner({
)}
<Text
style={[a.text_md, a.font_bold, a.pb_md, t.atoms.text_contrast_high]}>
style={[
a.text_md,
a.font_semi_bold,
a.pb_md,
t.atoms.text_contrast_high,
]}>
<Trans>Moderation tools</Trans>
</Text>
@@ -330,7 +335,7 @@ export function ModerationScreenInner({
a.pt_2xl,
a.pb_md,
a.text_md,
a.font_bold,
a.font_semi_bold,
t.atoms.text_contrast_high,
]}>
<Trans>Content filters</Trans>
@@ -364,7 +369,7 @@ export function ModerationScreenInner({
a.pt_2xl,
a.pb_md,
a.text_md,
a.font_bold,
a.font_semi_bold,
t.atoms.text_contrast_high,
]}>
<Trans>Content filters</Trans>
@@ -396,7 +401,8 @@ export function ModerationScreenInner({
a.justify_between,
disabledOnIOS && {opacity: 0.5},
]}>
<Text style={[a.font_bold, t.atoms.text_contrast_high]}>
<Text
style={[a.font_semi_bold, t.atoms.text_contrast_high]}>
<Trans>Enable adult content</Trans>
</Text>
<Toggle.Item
@@ -465,7 +471,7 @@ export function ModerationScreenInner({
<Text
style={[
a.text_md,
a.font_bold,
a.font_semi_bold,
a.pt_2xl,
a.pb_md,
t.atoms.text_contrast_high,
+2 -5
View File
@@ -17,7 +17,6 @@ import {
useTheme,
web,
} from '#/alf'
import {leading} from '#/alf/typography'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow'
import {HEADER_SLOT_SIZE} from '#/components/Layout'
@@ -234,10 +233,8 @@ export function TitleText({
style={[
a.pb_sm,
a.text_4xl,
a.font_bold,
{
lineHeight: leading(a.text_4xl, a.leading_tight),
},
a.font_semi_bold,
a.leading_tight,
flatten(style),
]}>
{children}
+4 -4
View File
@@ -432,7 +432,7 @@ function ValueProposition({
</View>
<View style={[a.gap_sm]}>
<Text style={[a.font_heavy, a.text_3xl, a.text_center]}>
<Text style={[a.font_bold, a.text_3xl, a.text_center]}>
{title}
</Text>
<Text
@@ -537,7 +537,7 @@ function LegacyFinalStep({
<View style={[a.flex_row, a.align_center, a.w_full, a.gap_lg]}>
<IconCircle icon={Growth} size="lg" style={{width: 48, height: 48}} />
<View style={[a.flex_1, a.gap_xs]}>
<Text style={[a.font_bold, a.text_lg]}>
<Text style={[a.font_semi_bold, a.text_lg]}>
<Trans>Public</Trans>
</Text>
<Text
@@ -551,7 +551,7 @@ function LegacyFinalStep({
<View style={[a.flex_row, a.align_center, a.w_full, a.gap_lg]}>
<IconCircle icon={News} size="lg" style={{width: 48, height: 48}} />
<View style={[a.flex_1, a.gap_xs]}>
<Text style={[a.font_bold, a.text_lg]}>
<Text style={[a.font_semi_bold, a.text_lg]}>
<Trans>Open</Trans>
</Text>
<Text
@@ -567,7 +567,7 @@ function LegacyFinalStep({
style={{width: 48, height: 48}}
/>
<View style={[a.flex_1, a.gap_xs]}>
<Text style={[a.font_bold, a.text_lg]}>
<Text style={[a.font_semi_bold, a.text_lg]}>
<Trans>Flexible</Trans>
</Text>
<Text
@@ -69,7 +69,7 @@ export function InterestButton({interest}: {interest: string}) {
{
color: t.palette.contrast_900,
},
a.font_bold,
a.font_semi_bold,
native({paddingTop: 2}),
ctx.selected ? styles.textSelected : {},
]}>
@@ -184,7 +184,7 @@ export function StepInterests() {
<Text
style={[
a.text_md,
a.font_bold,
a.font_semi_bold,
{
color: t.palette.negative_900,
},
@@ -133,7 +133,7 @@ export function StepSuggestedAccounts() {
return (
<View style={[a.align_start]} testID="onboardingInterests">
<Text style={[a.font_heavy, a.text_3xl]}>
<Text style={[a.font_bold, a.text_3xl]}>
<Trans comment="Accounts suggested to the user for them to follow">
Suggested for you
</Trans>
@@ -58,7 +58,12 @@ export function ThreadError({
]}>
<View style={[a.gap_xs]}>
<Text
style={[a.text_center, a.text_lg, a.font_bold, a.leading_snug]}>
style={[
a.text_center,
a.text_lg,
a.font_semi_bold,
a.leading_snug,
]}>
{title}
</Text>
<Text
@@ -129,7 +129,8 @@ function ThreadItemAnchorDeleted({isRoot}: {isRoot: boolean}) {
]}>
<TrashIcon style={[t.atoms.text_contrast_medium]} />
</View>
<Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
<Text
style={[a.text_md, a.font_semi_bold, t.atoms.text_contrast_medium]}>
<Trans>Post has been deleted</Trans>
</Text>
</View>
@@ -343,7 +344,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
style={[
a.flex_shrink,
a.text_lg,
a.font_bold,
a.font_semi_bold,
a.leading_snug,
]}
numberOfLines={1}>
@@ -439,7 +440,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
<Text
testID="repostCount-expanded"
style={[a.text_md, t.atoms.text_contrast_medium]}>
<Text style={[a.text_md, a.font_bold, t.atoms.text]}>
<Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
{formatPostStatCount(post.repostCount)}
</Text>{' '}
<Plural
@@ -457,7 +458,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
<Text
testID="quoteCount-expanded"
style={[a.text_md, t.atoms.text_contrast_medium]}>
<Text style={[a.text_md, a.font_bold, t.atoms.text]}>
<Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
{formatPostStatCount(post.quoteCount)}
</Text>{' '}
<Plural
@@ -473,7 +474,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
<Text
testID="likeCount-expanded"
style={[a.text_md, t.atoms.text_contrast_medium]}>
<Text style={[a.text_md, a.font_bold, t.atoms.text]}>
<Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
{formatPostStatCount(post.likeCount)}
</Text>{' '}
<Plural value={post.likeCount} one="like" other="likes" />
@@ -484,7 +485,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
<Text
testID="bookmarkCount-expanded"
style={[a.text_md, t.atoms.text_contrast_medium]}>
<Text style={[a.text_md, a.font_bold, t.atoms.text]}>
<Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
{formatPostStatCount(post.bookmarkCount)}
</Text>{' '}
<Plural value={post.bookmarkCount} one="save" other="saves" />
@@ -652,7 +653,7 @@ function BackdatedPostIndicator({post}: {post: AppBskyFeedDefs.PostView}) {
<Text
style={[
a.text_xs,
a.font_bold,
a.font_semi_bold,
a.leading_tight,
t.atoms.text_contrast_medium,
]}>
@@ -669,9 +670,14 @@ function BackdatedPostIndicator({post}: {post: AppBskyFeedDefs.PostView}) {
<Prompt.DescriptionText>
<Trans>
This post claims to have been created on{' '}
<RNText style={[a.font_bold]}>{niceDate(i18n, createdAt)}</RNText>,
but was first seen by Bluesky on{' '}
<RNText style={[a.font_bold]}>{niceDate(i18n, indexedAt)}</RNText>.
<RNText style={[a.font_semi_bold]}>
{niceDate(i18n, createdAt)}
</RNText>
, but was first seen by Bluesky on{' '}
<RNText style={[a.font_semi_bold]}>
{niceDate(i18n, indexedAt)}
</RNText>
.
</Trans>
</Prompt.DescriptionText>
<Text
@@ -106,7 +106,8 @@ function ThreadItemPostDeleted({
]}>
<TrashIcon style={[t.atoms.text_contrast_medium]} />
</View>
<Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
<Text
style={[a.text_md, a.font_semi_bold, t.atoms.text_contrast_medium]}>
<Trans>Post has been deleted</Trans>
</Text>
</View>
@@ -46,7 +46,8 @@ export function ThreadItemPostTombstone({type}: ThreadItemPostTombstoneProps) {
<View style={[a.flex_row, a.justify_center, {width: LINEAR_AVI_WIDTH}]}>
<Icon style={[t.atoms.text_contrast_medium]} />
</View>
<Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
<Text
style={[a.text_md, a.font_semi_bold, t.atoms.text_contrast_medium]}>
{copy}
</Text>
</View>
+1 -1
View File
@@ -27,7 +27,7 @@ export function ErrorState({error}: {error: string}) {
<View style={[a.px_xl]}>
<CircleInfo width={48} style={[t.atoms.text_contrast_low]} />
<Text style={[a.text_xl, a.font_bold, a.pb_md, a.pt_xl]}>
<Text style={[a.text_xl, a.font_semi_bold, a.pb_md, a.pt_xl]}>
<Trans>Hmmmm, we couldn't load that moderation service.</Trans>
</Text>
<Text
+1 -1
View File
@@ -26,7 +26,7 @@ export function ProfileHeaderDisplayName({
t.atoms.text,
gtMobile ? a.text_4xl : a.text_3xl,
a.self_start,
a.font_heavy,
a.font_bold,
]}>
{sanitizeDisplayName(
profile.displayName || sanitizeHandle(profile.handle),
@@ -326,7 +326,7 @@ function DialogInner({
style={[
a.text_sm,
a.mt_xs,
a.font_bold,
a.font_semi_bold,
{color: t.palette.negative_400},
]}>
<Plural
@@ -377,7 +377,7 @@ function DialogInner({
style={[
a.text_sm,
a.mt_xs,
a.font_bold,
a.font_semi_bold,
{color: t.palette.negative_400},
]}>
<Plural
+3 -3
View File
@@ -37,7 +37,7 @@ export function ProfileHeaderMetrics({
style={[a.flex_row, t.atoms.text]}
to={makeProfileLink(profile, 'followers')}
label={`${profile.followersCount || 0} ${pluralizedFollowers}`}>
<Text style={[a.font_bold, a.text_md]}>{followers} </Text>
<Text style={[a.font_semi_bold, a.text_md]}>{followers} </Text>
<Text style={[t.atoms.text_contrast_medium, a.text_md]}>
{pluralizedFollowers}
</Text>
@@ -47,12 +47,12 @@ export function ProfileHeaderMetrics({
style={[a.flex_row, t.atoms.text]}
to={makeProfileLink(profile, 'follows')}
label={_(msg`${profile.followsCount || 0} following`)}>
<Text style={[a.font_bold, a.text_md]}>{following} </Text>
<Text style={[a.font_semi_bold, a.text_md]}>{following} </Text>
<Text style={[t.atoms.text_contrast_medium, a.text_md]}>
{pluralizedFollowings}
</Text>
</InlineLinkText>
<Text style={[a.font_bold, t.atoms.text, a.text_md]}>
<Text style={[a.font_semi_bold, t.atoms.text, a.text_md]}>
{formatCount(i18n, profile.postsCount || 0)}{' '}
<Text style={[t.atoms.text_contrast_medium, a.font_normal, a.text_md]}>
{plural(profile.postsCount || 0, {one: 'post', other: 'posts'})}
@@ -225,7 +225,7 @@ let ProfileHeaderLabeler = ({
? t.palette.contrast_700
: t.palette.white,
},
a.font_bold,
a.font_semi_bold,
a.text_center,
a.leading_tight,
]}>
@@ -297,7 +297,7 @@ let ProfileHeaderLabeler = ({
{({hovered, focused, pressed}) => (
<Text
style={[
a.font_bold,
a.font_semi_bold,
a.text_sm,
t.atoms.text_contrast_medium,
(hovered || focused || pressed) &&
@@ -267,7 +267,7 @@ let ProfileHeaderStandard = ({
t.atoms.text,
gtMobile ? a.text_4xl : a.text_3xl,
a.self_start,
a.font_heavy,
a.font_bold,
a.leading_tight,
]}>
{sanitizeDisplayName(
@@ -234,7 +234,7 @@ export function ProfileFeedHeader({info}: {info: FeedSourceFeedInfo}) {
<Text
style={[
a.text_md,
a.font_heavy,
a.font_bold,
a.leading_tight,
gtMobile && a.text_lg,
]}
@@ -441,7 +441,7 @@ function DialogInner({
<View style={[a.flex_1, a.gap_2xs]}>
<Text
style={[a.text_2xl, a.font_heavy, a.leading_tight]}
style={[a.text_2xl, a.font_bold, a.leading_tight]}
numberOfLines={2}>
{info.displayName}
</Text>
@@ -22,7 +22,7 @@ export function ErrorScreen({error}: {error: React.ReactNode}) {
return (
<View style={[a.px_xl, a.py_md, a.gap_md]}>
<Text style={[a.text_4xl, a.font_heavy]}>
<Text style={[a.text_4xl, a.font_bold]}>
<Trans>Could not load list</Trans>
</Text>
<Text style={[a.text_md, t.atoms.text_contrast_high, a.leading_snug]}>
+2 -2
View File
@@ -374,7 +374,7 @@ function SectionHeaderText({children}: {children: React.ReactNode}) {
a.border_b,
t.atoms.border_contrast_low,
]}>
<Text style={[a.text_xl, a.font_heavy, a.leading_snug]}>{children}</Text>
<Text style={[a.text_xl, a.font_bold, a.leading_snug]}>{children}</Text>
</View>
)
}
@@ -406,7 +406,7 @@ function FollowingFeedCard() {
/>
</View>
<View style={[a.flex_1, a.flex_row, a.gap_sm, a.align_center]}>
<Text style={[a.text_sm, a.font_bold, a.leading_snug]}>
<Text style={[a.text_sm, a.font_semi_bold, a.leading_snug]}>
<Trans context="feed-name">Following</Trans>
</Text>
</View>
+1 -1
View File
@@ -885,7 +885,7 @@ export function Explore({
]}>
<CircleInfo size="md" fill={t.palette.negative_400} />
<View style={[a.flex_1, a.gap_sm]}>
<Text style={[a.font_bold, a.leading_snug]}>
<Text style={[a.font_semi_bold, a.leading_snug]}>
{item.message}
</Text>
<Text
+1 -1
View File
@@ -460,7 +460,7 @@ let SearchScreenInner = ({
a.pt_sm,
a.pb_lg,
]}>
<Text style={[a.text_2xl, a.font_heavy]}>
<Text style={[a.text_2xl, a.font_bold]}>
<Trans>Search</Trans>
</Text>
</View>
@@ -93,7 +93,11 @@ export function Icon({
export function TitleText({style, ...props}: TextProps) {
return (
<Text style={[a.font_bold, a.flex_1, a.text_xl, style]} emoji {...props} />
<Text
style={[a.font_semi_bold, a.flex_1, a.text_xl, style]}
emoji
{...props}
/>
)
}
@@ -45,7 +45,7 @@ export function SearchHistory({
<View style={[a.w_full, a.gap_md]}>
{(searchHistory.length > 0 || selectedProfiles.length > 0) && (
<View style={[a.px_lg, a.pt_sm]}>
<Text style={[a.text_md, a.font_bold]}>
<Text style={[a.text_md, a.font_semi_bold]}>
<Trans>Recent Searches</Trans>
</Text>
</View>
@@ -89,7 +89,7 @@ export function StarterPackCard({
<View style={[a.flex_1]}>
<Text
emoji
style={[a.text_md, a.font_bold, a.leading_snug]}
style={[a.text_md, a.font_semi_bold, a.leading_snug]}
numberOfLines={1}>
{record.name}
</Text>
@@ -242,7 +242,7 @@ export function AvatarStack({
<Text
style={[
gtPhone ? a.text_md : a.text_xs,
a.font_bold,
a.font_semi_bold,
a.leading_snug,
{color: 'white'},
]}>
@@ -63,7 +63,7 @@ export function ExploreInterestsCard() {
]}>
<View style={[a.flex_row, a.gap_sm, a.align_center]}>
<Shapes />
<Text style={[a.text_xl, a.font_bold, a.leading_tight]}>
<Text style={[a.text_xl, a.font_semi_bold, a.leading_tight]}>
<Trans>Your interests</Trans>
</Text>
</View>
@@ -50,7 +50,7 @@ function Inner() {
fill={t.palette.primary_500}
style={{marginLeft: -2}}
/>
<Text style={[a.text_2xl, a.font_heavy, t.atoms.text]}>
<Text style={[a.text_2xl, a.font_bold, t.atoms.text]}>
<Trans>Recommended</Trans>
</Text>
</View>
@@ -104,7 +104,7 @@ export function TrendRow({
<Text
style={[
a.text_md,
a.font_bold,
a.font_semi_bold,
a.leading_tight,
{width: 20},
]}>
@@ -113,7 +113,7 @@ export function TrendRow({
</Trans>
</Text>
<Text
style={[a.text_md, a.font_bold, a.leading_tight]}
style={[a.text_md, a.font_semi_bold, a.leading_tight]}
numberOfLines={1}>
{trend.displayName}
</Text>
+1 -1
View File
@@ -97,7 +97,7 @@ export function AccountSettingsScreen({}: Props) {
color={t.palette.primary_500}
/>
<SettingsList.ItemText
style={[{color: t.palette.primary_500}, a.font_bold]}>
style={[{color: t.palette.primary_500}, a.font_semi_bold]}>
<Trans>Verify your email</Trans>
</SettingsList.ItemText>
<SettingsList.Chevron color={t.palette.primary_500} />
@@ -93,7 +93,7 @@ export function AppIconSettingsScreen({}: Props) {
a.text_md,
a.mt_xl,
a.mb_sm,
a.font_bold,
a.font_semi_bold,
t.atoms.text_contrast_medium,
]}>
<Trans>Bluesky+</Trans>
@@ -201,7 +201,12 @@ function RowText({children}: {children: React.ReactNode}) {
const t = useTheme()
return (
<Text
style={[a.text_md, a.font_bold, a.flex_1, t.atoms.text_contrast_medium]}
style={[
a.text_md,
a.font_semi_bold,
a.flex_1,
t.atoms.text_contrast_medium,
]}
emoji>
{children}
</Text>
+1 -1
View File
@@ -167,7 +167,7 @@ function AppPasswordCard({
a.gap_sm,
]}>
<View style={[a.gap_xs]}>
<Text style={[t.atoms.text, a.text_md, a.font_bold]}>
<Text style={[t.atoms.text, a.text_md, a.font_semi_bold]}>
{appPassword.name}
</Text>
<Text style={[t.atoms.text_contrast_medium]}>
+1 -1
View File
@@ -222,7 +222,7 @@ export function InterestButton({interest}: {interest: string}) {
{
color: t.palette.contrast_900,
},
a.font_bold,
a.font_semi_bold,
ctx.selected ? styles.textSelected : {},
]}>
{interestsDisplayNames[interest]}
@@ -140,7 +140,10 @@ export function ActivityNotificationSettingsScreen({}: Props) {
Enable notifications for an account by visiting their
profile and pressing the{' '}
<RNText
style={[a.font_bold, t.atoms.text_contrast_high]}>
style={[
a.font_semi_bold,
t.atoms.text_contrast_high,
]}>
bell icon
</RNText>{' '}
<BellRingingFilledIcon
@@ -157,7 +160,7 @@ export function ActivityNotificationSettingsScreen({}: Props) {
<InlineLinkText
label={_(msg`Privacy and Security settings`)}
to={{screen: 'ActivityPrivacySettings'}}
style={[a.font_bold]}>
style={[a.font_semi_bold]}>
Settings &rarr; Privacy and Security
</InlineLinkText>
.
@@ -19,7 +19,7 @@ export function ItemTextWithSubtitle({
const t = useTheme()
return (
<View style={[a.flex_1, bold ? a.gap_xs : a.gap_2xs]}>
<SettingsList.ItemText style={bold && [a.font_bold, a.text_lg]}>
<SettingsList.ItemText style={bold && [a.font_semi_bold, a.text_lg]}>
{titleText}
</SettingsList.ItemText>
{showSkeleton ? (
@@ -150,7 +150,7 @@ export function Inner({
{'include' in preference && (
<>
<Divider />
<Text style={[a.font_bold, a.text_md]}>
<Text style={[a.font_semi_bold, a.text_md]}>
<Trans>From</Trans>
</Text>
<Toggle.Group
+4 -2
View File
@@ -343,7 +343,7 @@ function ProfilePreview({
a.pt_sm,
t.atoms.text,
gtMobile ? a.text_4xl : a.text_3xl,
a.font_heavy,
a.font_bold,
]}>
{displayName}
</Text>
@@ -513,7 +513,9 @@ function DevOptions() {
<SettingsList.Divider />
<View style={[a.p_xl, a.gap_md]}>
<Text style={[a.text_lg, a.font_bold]}>PolicyUpdate202508 Debug</Text>
<Text style={[a.text_lg, a.font_semi_bold]}>
PolicyUpdate202508 Debug
</Text>
<View style={[a.flex_row, a.align_center, a.justify_between, a.gap_md]}>
<Button
@@ -107,7 +107,7 @@ function CreateDialogInner({passwords}: {passwords: string[]}) {
style={[a.gap_lg]}
exiting={native(SlideOutLeft)}
key={0}>
<Text style={[a.text_2xl, a.font_bold]}>
<Text style={[a.text_2xl, a.font_semi_bold]}>
<Trans>Add App Password</Trans>
</Text>
<Text style={[a.text_md, a.leading_snug]}>
@@ -183,7 +183,7 @@ function CreateDialogInner({passwords}: {passwords: string[]}) {
style={[a.gap_lg]}
entering={isWeb ? FadeIn.delay(200) : SlideInRight}
key={1}>
<Text style={[a.text_2xl, a.font_bold]}>
<Text style={[a.text_2xl, a.font_semi_bold]}>
<Trans>Here is your app password!</Trans>
</Text>
<Text style={[a.text_md, a.leading_snug]}>
@@ -244,7 +244,7 @@ function ProvidedHandlePage({
<Text>
<Trans>
Your full handle will be{' '}
<Text style={[a.font_bold]}>
<Text style={[a.font_semi_bold]}>
@{createFullHandle(subdomain, host)}
</Text>
</Trans>
@@ -280,7 +280,7 @@ function ProvidedHandlePage({
}),
)}
to="https://bsky.social/about/blog/4-28-2023-domain-handle-tutorial"
style={[a.font_bold]}
style={[a.font_semi_bold]}
disableMismatchWarning>
Learn more here.
</InlineLinkText>
@@ -522,7 +522,7 @@ function OwnHandlePage({goToServiceHandle}: {goToServiceHandle: () => void}) {
<Admonition type="info" style={[a.mb_md]}>
<Trans>
Your current handle{' '}
<Text style={[a.font_bold]}>
<Text style={[a.font_semi_bold]}>
{sanitizeHandle(currentAccount?.handle || '', '@')}
</Text>{' '}
will automatically remain reserved for you. You can switch back to
@@ -165,7 +165,7 @@ function Inner() {
style={web({maxWidth: 400})}>
<View style={[a.gap_xl]}>
<View style={[a.gap_sm]}>
<Text style={[a.font_heavy, a.text_2xl]}>
<Text style={[a.font_bold, a.text_2xl]}>
{uiStrings[stage].title}
</Text>
{error ? (
@@ -58,7 +58,7 @@ export function CopyButton({
pointerEvents="none">
<Text
style={[
a.font_bold,
a.font_semi_bold,
a.text_right,
a.text_md,
t.atoms.text_contrast_high,
@@ -85,7 +85,7 @@ export function DisableEmail2FADialog({
<View style={[a.relative, a.gap_md, a.w_full]}>
<Text
nativeID="dialog-title"
style={[a.text_2xl, a.font_bold, t.atoms.text]}>
style={[a.text_2xl, a.font_semi_bold, t.atoms.text]}>
<Trans>Disable Email 2FA</Trans>
</Text>
<P nativeID="dialog-description">
@@ -58,7 +58,7 @@ export function ExportCarDialog({
accessibilityDescribedBy="dialog-description"
accessibilityLabelledBy="dialog-title">
<View style={[a.relative, a.gap_lg, a.w_full]}>
<Text nativeID="dialog-title" style={[a.text_2xl, a.font_heavy]}>
<Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}>
<Trans>Export My Data</Trans>
</Text>
<Text
+4 -3
View File
@@ -133,7 +133,7 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
<Animated.View entering={!isFetchedAtMount ? FadeIn : undefined}>
<LinearGradientBackground
style={[a.mx_lg, a.p_lg, a.gap_sm, a.rounded_sm]}>
<Text style={[a.font_bold, a.text_xl, {color: 'white'}]}>
<Text style={[a.font_semi_bold, a.text_xl, {color: 'white'}]}>
{starterPack.record.name}
</Text>
<Text style={[{color: 'white'}]}>
@@ -164,7 +164,8 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
!gtMobile && {paddingBottom: 100},
]}>
<View style={[a.gap_sm, a.pb_3xl]}>
<Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
<Text
style={[a.font_semi_bold, t.atoms.text_contrast_medium]}>
<Trans>
Step {state.activeStep + 1} of{' '}
{state.serviceDescription &&
@@ -173,7 +174,7 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
: '3'}
</Trans>
</Text>
<Text style={[a.text_3xl, a.font_bold]}>
<Text style={[a.text_3xl, a.font_semi_bold]}>
{state.activeStep === SignupStep.INFO ? (
<Trans>Your account</Trans>
) : state.activeStep === SignupStep.HANDLE ? (
+2 -2
View File
@@ -123,7 +123,7 @@ export function SignupQueued() {
<Logo width={120} />
</View>
<Text style={[a.text_4xl, a.font_heavy, a.pb_sm]}>
<Text style={[a.text_4xl, a.font_bold, a.pb_sm]}>
<Trans>You're in line</Trans>
</Text>
<P style={[t.atoms.text_contrast_medium]}>
@@ -146,7 +146,7 @@ export function SignupQueued() {
]}>
{typeof placeInQueue === 'number' && (
<Text
style={[a.text_5xl, a.text_center, a.font_heavy, a.mb_2xl]}>
style={[a.text_5xl, a.text_center, a.font_bold, a.mb_2xl]}>
{placeInQueue}
</Text>
)}
@@ -183,7 +183,7 @@ function LandingScreenLoaded({
</View>
<Text
style={[
a.font_bold,
a.font_semi_bold,
a.text_4xl,
a.text_center,
a.leading_tight,
@@ -192,7 +192,12 @@ function LandingScreenLoaded({
{record.name}
</Text>
<Text
style={[a.text_center, a.font_bold, a.text_md, {color: 'white'}]}>
style={[
a.text_center,
a.font_semi_bold,
a.text_md,
{color: 'white'},
]}>
Starter pack by {`@${creator.handle}`}
</Text>
</LinearGradientBackground>
@@ -218,7 +223,11 @@ function LandingScreenLoaded({
color={t.atoms.text_contrast_medium.color}
/>
<Text
style={[a.font_bold, a.text_sm, t.atoms.text_contrast_medium]}
style={[
a.font_semi_bold,
a.text_sm,
t.atoms.text_contrast_medium,
]}
numberOfLines={1}>
<Trans>
{formatCount(i18n, JOINED_THIS_WEEK)} joined this week
@@ -229,7 +238,7 @@ function LandingScreenLoaded({
<View style={[a.gap_3xl]}>
{Boolean(listItemsSample?.length) && (
<View style={[a.gap_md]}>
<Text style={[a.font_heavy, a.text_lg]}>
<Text style={[a.font_bold, a.text_lg]}>
{listItemsCount <= 8 ? (
<Trans>You'll follow these people right away</Trans>
) : (
@@ -270,7 +279,7 @@ function LandingScreenLoaded({
)}
{feeds?.length ? (
<View style={[a.gap_md]}>
<Text style={[a.font_heavy, a.text_lg]}>
<Text style={[a.font_bold, a.text_lg]}>
<Trans>You'll stay updated with these feeds</Trans>
</Text>
@@ -387,7 +396,11 @@ export function AppClipOverlay({
{/* Webkit needs this to have a zindex of 2? */}
<View style={[a.gap_md, {zIndex: 2}]}>
<Text
style={[a.font_bold, a.text_4xl, {lineHeight: 40, color: 'white'}]}>
style={[
a.font_semi_bold,
a.text_4xl,
{lineHeight: 40, color: 'white'},
]}>
Download Bluesky to get started!
</Text>
<Text style={[a.text_lg, {color: 'white'}]}>
@@ -486,7 +486,11 @@ function Header({
color={t.atoms.text_contrast_medium.color}
/>
<Text
style={[a.font_bold, a.text_sm, t.atoms.text_contrast_medium]}>
style={[
a.font_semi_bold,
a.text_sm,
t.atoms.text_contrast_medium,
]}>
<Trans comment="Number of users (always at least 25) who have joined Bluesky using a specific starter pack">
<Plural
value={starterPack.joinedAllTimeCount || 0}
@@ -669,7 +673,7 @@ function OverflowMenu({
t.atoms.bg_contrast_25,
]}>
<View style={[a.flex_1, a.gap_2xs]}>
<Text style={[a.font_bold]}>
<Text style={[a.font_semi_bold]}>
<Trans>Unable to delete</Trans>
</Text>
<Text style={[a.leading_snug]}>{cleanError(deleteError)}</Text>
@@ -727,7 +731,7 @@ function InvalidStarterPack({rkey}: {rkey: string}) {
<Layout.Content centerContent>
<View style={[a.py_4xl, a.px_xl, a.align_center, a.gap_5xl]}>
<View style={[a.w_full, a.align_center, a.gap_lg]}>
<Text style={[a.font_bold, a.text_3xl]}>
<Text style={[a.font_semi_bold, a.text_3xl]}>
<Trans>Starter pack is invalid</Trans>
</Text>
<Text
@@ -27,7 +27,7 @@ export function StepDetails() {
<View style={[a.px_xl, a.gap_xl, a.mt_4xl]}>
<View style={[a.gap_md, a.align_center, a.px_md, a.mb_md]}>
<StarterPack width={90} gradient="sky" />
<Text style={[a.font_bold, a.text_3xl]}>
<Text style={[a.font_semi_bold, a.text_3xl]}>
<Trans>Invites, but personal</Trans>
</Text>
<Text style={[a.text_center, a.text_md, a.px_md]}>
+1 -1
View File
@@ -113,7 +113,7 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
) : (
<Text
style={[
a.font_bold,
a.font_semi_bold,
a.text_lg,
a.text_center,
a.mt_lg,
@@ -98,7 +98,7 @@ export function StepProfiles({
) : (
<Text
style={[
a.font_bold,
a.font_semi_bold,
a.text_lg,
a.text_center,
a.mt_lg,
+20 -15
View File
@@ -447,7 +447,7 @@ function Footer({
]}>
{items.length > minimumItems && (
<View style={[a.absolute, {right: 14, top: 31}]}>
<Text style={[a.font_bold]}>
<Text style={[a.font_semi_bold]}>
{items.length}/
{state.currentStep === 'Profiles' ? STARTER_PACK_MAX_SIZE : 3}
</Text>
@@ -490,7 +490,7 @@ function Footer({
) : (
<Trans>
It's just{' '}
<Text style={[a.font_bold, textStyles]} emoji>
<Text style={[a.font_semi_bold, textStyles]} emoji>
{getName(items[0])}{' '}
</Text>
right now! Add more people to your starter pack by searching
@@ -500,21 +500,21 @@ function Footer({
) : items.length === 2 ? (
currentAccount?.did === items[0].did ? (
<Trans>
<Text style={[a.font_bold, textStyles]}>You</Text> and
<Text style={[a.font_semi_bold, textStyles]}>You</Text> and
<Text> </Text>
<Text style={[a.font_bold, textStyles]} emoji>
<Text style={[a.font_semi_bold, textStyles]} emoji>
{getName(items[1] /* [0] is self, skip it */)}{' '}
</Text>
are included in your starter pack
</Trans>
) : (
<Trans>
<Text style={[a.font_bold, textStyles]}>
<Text style={[a.font_semi_bold, textStyles]}>
{getName(items[0])}
</Text>{' '}
and
<Text> </Text>
<Text style={[a.font_bold, textStyles]} emoji>
<Text style={[a.font_semi_bold, textStyles]} emoji>
{getName(items[1] /* [0] is self, skip it */)}{' '}
</Text>
are included in your starter pack
@@ -522,10 +522,10 @@ function Footer({
)
) : items.length > 2 ? (
<Trans context="profiles">
<Text style={[a.font_bold, textStyles]} emoji>
<Text style={[a.font_semi_bold, textStyles]} emoji>
{getName(items[1] /* [0] is self, skip it */)},{' '}
</Text>
<Text style={[a.font_bold, textStyles]} emoji>
<Text style={[a.font_semi_bold, textStyles]} emoji>
{getName(items[2])},{' '}
</Text>
and{' '}
@@ -542,7 +542,7 @@ function Footer({
) : state.currentStep === 'Feeds' ? (
items.length === 0 ? (
<View style={[a.gap_sm]}>
<Text style={[a.font_bold, a.text_center, textStyles]}>
<Text style={[a.font_semi_bold, a.text_center, textStyles]}>
<Trans>Add some feeds to your starter pack!</Trans>
</Text>
<Text style={[a.text_center, textStyles]}>
@@ -556,29 +556,29 @@ function Footer({
{
items.length === 1 ? (
<Trans>
<Text style={[a.font_bold, textStyles]} emoji>
<Text style={[a.font_semi_bold, textStyles]} emoji>
{getName(items[0])}
</Text>{' '}
is included in your starter pack
</Trans>
) : items.length === 2 ? (
<Trans>
<Text style={[a.font_bold, textStyles]} emoji>
<Text style={[a.font_semi_bold, textStyles]} emoji>
{getName(items[0])}
</Text>{' '}
and
<Text> </Text>
<Text style={[a.font_bold, textStyles]} emoji>
<Text style={[a.font_semi_bold, textStyles]} emoji>
{getName(items[1])}{' '}
</Text>
are included in your starter pack
</Trans>
) : items.length > 2 ? (
<Trans context="feeds">
<Text style={[a.font_bold, textStyles]} emoji>
<Text style={[a.font_semi_bold, textStyles]} emoji>
{getName(items[0])},{' '}
</Text>
<Text style={[a.font_bold, textStyles]} emoji>
<Text style={[a.font_semi_bold, textStyles]} emoji>
{getName(items[1])},{' '}
</Text>
and{' '}
@@ -604,7 +604,12 @@ function Footer({
isNative ? a.mt_sm : a.mt_md,
]}>
{state.currentStep === 'Profiles' && items.length < 8 && (
<Text style={[a.font_bold, textStyles, t.atoms.text_contrast_medium]}>
<Text
style={[
a.font_semi_bold,
textStyles,
t.atoms.text_contrast_medium,
]}>
<Trans>Add {8 - items.length} more to continue</Trans>
</Text>
)}
+1 -1
View File
@@ -148,7 +148,7 @@ export function Takendown() {
<Logo width={64} />
</View>
<Text style={[a.text_4xl, a.font_heavy, a.pb_md]}>
<Text style={[a.text_4xl, a.font_bold, a.pb_md]}>
{isAppealling ? (
<Trans>Appeal suspension</Trans>
) : (
+1 -1
View File
@@ -120,7 +120,7 @@ export function FeedHeader({
<Text
style={[
a.text_md,
a.font_heavy,
a.font_bold,
a.leading_tight,
gtMobile && a.text_lg,
]}
@@ -179,7 +179,7 @@ export function Scrubber({
timeStyle,
]}
pointerEvents="none">
<Text style={[a.text_center, a.font_bold]}>
<Text style={[a.text_center, a.font_semi_bold]}>
<Text style={[a.text_5xl, {fontVariant: ['tabular-nums']}]}>
{formatTime(currentSeekTime)}
</Text>
+4 -4
View File
@@ -524,7 +524,7 @@ let VideoItem = ({
<Text
style={[
a.text_2xl,
a.font_heavy,
a.font_bold,
a.text_center,
a.leading_tight,
a.mx_xl,
@@ -670,7 +670,7 @@ function ModerationOverlay({
<Text
style={[
a.text_sm,
a.font_bold,
a.font_semi_bold,
a.text_center,
{opacity: pressed ? 0.5 : 1},
]}>
@@ -807,7 +807,7 @@ function Overlay({
/>
<View style={[a.flex_1]}>
<Text
style={[a.text_md, a.font_heavy]}
style={[a.text_md, a.font_bold]}
emoji
numberOfLines={1}>
{sanitizeDisplayName(
@@ -1115,7 +1115,7 @@ function EndMessage() {
<LeafIcon width={64} fill="black" />
</View>
<View style={[a.w_full, a.gap_md]}>
<Text style={[a.text_3xl, a.text_center, a.font_heavy]}>
<Text style={[a.text_3xl, a.text_center, a.font_bold]}>
<Trans>That's everything!</Trans>
</Text>
<Text