acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AccountList.tsx
+2 -2
View File
@@ -77,7 +77,7 @@ export function AccountList({
]}>
<Text
style={[
a.font_bold,
a.font_semi_bold,
a.flex_1,
a.flex_row,
a.py_sm,
@@ -151,7 +151,7 @@ function AccountItem({
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
<Text
emoji
style={[a.font_bold, a.leading_tight]}
style={[a.font_semi_bold, a.leading_tight]}
numberOfLines={1}>
{sanitizeDisplayName(
profile?.displayName || profile?.handle || account.handle,
src/components/BlockedGeoOverlay.tsx
+2 -3
View File
@@ -96,7 +96,7 @@ export function BlockedGeoOverlay() {
<Mark fill={t.palette.primary_600} width={14} />
<Text
style={[
a.font_bold,
a.font_semi_bold,
{
color: t.palette.primary_600,
},
@@ -121,8 +121,7 @@ export function BlockedGeoOverlay() {
</View>
<View style={[a.mt_xl, a.align_start]}>
<Text
style={[a.text_lg, a.font_heavy, a.leading_snug, a.pb_xs]}>
<Text style={[a.text_lg, a.font_bold, a.leading_snug, a.pb_xs]}>
<Trans>Not in Mississippi?</Trans>
</Text>
<Text
src/components/Button.tsx
+5 -13
View File
@@ -240,7 +240,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
}
} else if (color === 'secondary') {
if (!disabled) {
baseStyles.push(t.atoms.bg_contrast_25)
baseStyles.push(t.atoms.bg_contrast_50)
hoverStyles.push(t.atoms.bg_contrast_100)
} else {
baseStyles.push(t.atoms.bg_contrast_50)
@@ -289,11 +289,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
})
} else {
baseStyles.push({
backgroundColor: select(t.name, {
light: t.palette.primary_25,
dim: t.palette.primary_50,
dark: t.palette.primary_50,
}),
backgroundColor: t.palette.primary_50,
})
}
} else if (color === 'negative_subtle') {
@@ -314,11 +310,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
})
} else {
baseStyles.push({
backgroundColor: select(t.name, {
light: t.palette.negative_25,
dim: t.palette.negative_50,
dark: t.palette.negative_50,
}),
backgroundColor: t.palette.negative_50,
})
}
}
@@ -372,7 +364,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
if (!disabled) {
baseStyles.push(t.atoms.bg)
hoverStyles.push({
backgroundColor: t.palette.contrast_25,
backgroundColor: t.palette.contrast_50,
})
}
}
@@ -396,7 +388,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
if (!disabled) {
baseStyles.push(t.atoms.bg)
hoverStyles.push({
backgroundColor: t.palette.contrast_25,
backgroundColor: t.palette.contrast_50,
})
}
}
src/components/ContextMenu/index.tsx
+6 -2
View File
@@ -796,7 +796,7 @@ export function ItemText({children, style}: ItemTextProps) {
style={[
a.flex_1,
a.text_md,
a.font_bold,
a.font_semi_bold,
t.atoms.text_contrast_high,
{paddingTop: 3},
style,
@@ -855,7 +855,11 @@ export function LabelText({children}: {children: React.ReactNode}) {
const t = useTheme()
return (
<Text
style={[a.font_bold, t.atoms.text_contrast_medium, {marginBottom: -8}]}>
style={[
a.font_semi_bold,
t.atoms.text_contrast_medium,
{marginBottom: -8},
]}>
{children}
</Text>
)
src/components/Dialog/shared.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ export function HeaderText({
style?: StyleProp<TextStyle>
}) {
return (
<Text style={[a.text_lg, a.text_center, a.font_heavy, style]}>
<Text style={[a.text_lg, a.text_center, a.font_bold, style]}>
{children}
</Text>
)
src/components/Error.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export function Error({
]}
sideBorders={sideBorders}>
<View style={[a.w_full, a.align_center, a.gap_lg]}>
<Text style={[a.font_bold, a.text_3xl]}>{title}</Text>
<Text style={[a.font_semi_bold, a.text_3xl]}>{title}</Text>
<Text
style={[
a.text_md,
src/components/FeedCard.tsx
+2 -2
View File
@@ -128,7 +128,7 @@ export function TitleAndByline({
<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}>
{title}
</Text>
@@ -214,7 +214,7 @@ export function DescriptionPlaceholder() {
export function Likes({count}: {count: number}) {
const t = useTheme()
return (
<Text style={[a.text_sm, t.atoms.text_contrast_medium, a.font_bold]}>
<Text style={[a.text_sm, t.atoms.text_contrast_medium, a.font_semi_bold]}>
<Trans>
Liked by <Plural value={count || 0} one="# user" other="# users" />
</Trans>
src/components/FeedInterstitials.tsx
+2 -2
View File
@@ -380,7 +380,7 @@ export function ProfileGrid({
a.justify_between,
]}
pointerEvents={isIOS ? 'auto' : 'box-none'}>
<Text style={[a.text_sm, a.font_bold, t.atoms.text]}>
<Text style={[a.text_sm, a.font_semi_bold, t.atoms.text]}>
{isFeedContext ? (
<Trans>Suggested for you</Trans>
) : (
@@ -516,7 +516,7 @@ export function SuggestedFeeds() {
style={[
a.flex_1,
a.text_lg,
a.font_bold,
a.font_semi_bold,
t.atoms.text_contrast_medium,
]}>
<Trans>Some other feeds you might like</Trans>
src/components/LabelingServiceCard/index.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export function Avatar({avatar}: {avatar?: string}) {
export function Title({value}: {value: string}) {
return (
<Text emoji style={[a.text_md, a.font_bold, a.leading_tight]}>
<Text emoji style={[a.text_md, a.font_semi_bold, a.leading_tight]}>
{value}
</Text>
)
src/components/Layout/Header/index.tsx
+1 -1
View File
@@ -181,7 +181,7 @@ export function TitleText({
<Text
style={[
a.text_lg,
a.font_heavy,
a.font_bold,
a.leading_tight,
isIOS && align === 'platform' && a.text_center,
gtMobile && a.text_xl,
src/components/ListCard.tsx
+2 -2
View File
@@ -127,7 +127,7 @@ export function TitleAndByline({
allowOverride={creator && currentAccount?.did === creator.did}>
<Hider.Mask>
<Text
style={[a.text_md, a.font_bold, a.leading_snug, a.italic]}
style={[a.text_md, a.font_semi_bold, a.leading_snug, a.italic]}
numberOfLines={1}>
<Trans>Hidden list</Trans>
</Text>
@@ -135,7 +135,7 @@ export function TitleAndByline({
<Hider.Content>
<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}>
{title}
</Text>
src/components/LoggedOutCTA.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ export function LoggedOutCTA({style, gateName}: LoggedOutCTAProps) {
<View style={[a.flex_row, a.align_center, a.flex_1, a.pr_md]}>
<Logo width={30} style={[a.mr_md]} />
<View style={[a.flex_1]}>
<Text style={[a.text_lg, a.font_bold, a.leading_snug]}>
<Text style={[a.text_lg, a.font_semi_bold, a.leading_snug]}>
<Trans>Join Bluesky</Trans>
</Text>
<Text
src/components/Menu/index.tsx
+2 -2
View File
@@ -191,7 +191,7 @@ export function ItemText({children, style}: ItemTextProps) {
style={[
a.flex_1,
a.text_md,
a.font_bold,
a.font_semi_bold,
t.atoms.text_contrast_high,
{paddingTop: 3},
style,
@@ -293,7 +293,7 @@ export function LabelText({
return (
<Text
style={[
a.font_bold,
a.font_semi_bold,
t.atoms.text_contrast_medium,
{marginBottom: -8},
style,
src/components/Menu/index.web.tsx
+2 -2
View File
@@ -292,7 +292,7 @@ export function ItemText({children, style}: ItemTextProps) {
<Text
style={[
a.flex_1,
a.font_bold,
a.font_semi_bold,
t.atoms.text_contrast_high,
style,
disabled && t.atoms.text_contrast_low,
@@ -372,7 +372,7 @@ export function LabelText({
return (
<Text
style={[
a.font_bold,
a.font_semi_bold,
a.p_sm,
t.atoms.text_contrast_low,
a.leading_snug,
src/components/NewskieDialog.tsx
+1 -1
View File
@@ -135,7 +135,7 @@ function DialogInner({
style={[a.absolute, a.inset_0]}
/>
</View>
<Text style={[a.font_bold, a.text_xl]}>
<Text style={[a.font_semi_bold, a.text_xl]}>
{isMe ? <Trans>Welcome, friend!</Trans> : <Trans>Say hello!</Trans>}
</Text>
</View>
src/components/Pills.tsx
+1 -1
View File
@@ -133,7 +133,7 @@ export function Label({
emoji
style={[
text,
a.font_bold,
a.font_semi_bold,
a.leading_tight,
t.atoms.text_contrast_medium,
{paddingRight: 3},
src/components/PolicyUpdateOverlay/Badge.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ export function Badge() {
<Logo fill={t.palette.primary_600} width={14} />
<Text
style={[
a.font_bold,
a.font_semi_bold,
{
color: t.palette.primary_600,
},
src/components/PolicyUpdateOverlay/updates/202508/index.tsx
+2 -2
View File
@@ -69,7 +69,7 @@ export function Content({state}: {state: PolicyUpdateState}) {
{screenReaderEnabled ? (
<View style={[a.gap_sm]}>
<Text emoji style={[a.text_2xl, a.font_bold, a.leading_snug]}>
<Text emoji style={[a.text_2xl, a.font_semi_bold, a.leading_snug]}>
<Trans>Hey there 👋</Trans>
</Text>
<Text style={[a.leading_snug, a.text_md]}>
@@ -115,7 +115,7 @@ export function Content({state}: {state: PolicyUpdateState}) {
</View>
) : (
<View style={[a.gap_sm]}>
<Text emoji style={[a.text_2xl, a.font_bold, a.leading_snug]}>
<Text emoji style={[a.text_2xl, a.font_semi_bold, a.leading_snug]}>
<Trans>Hey there 👋</Trans>
</Text>
<Text style={[a.leading_snug, a.text_md]}>
src/components/Post/Embed/ExternalEmbed/index.tsx
+1 -1
View File
@@ -126,7 +126,7 @@ export const ExternalEmbed = ({
<Text
emoji
numberOfLines={3}
style={[a.text_md, a.font_bold, a.leading_snug]}>
style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
{link.title || link.uri}
</Text>
)}
src/components/Post/Embed/VideoEmbed/VideoEmbedInner/TimeIndicator.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ export function TimeIndicator({
<Text
style={[
{color: t.palette.white, fontSize: 12, fontVariant: ['tabular-nums']},
a.font_bold,
a.font_semi_bold,
{lineHeight: 1.25},
]}>
{`${minutes}:${seconds}`}
src/components/PostControls/PostControlButton.tsx
+6 -1
View File
@@ -128,7 +128,12 @@ export function PostControlButtonText({style, ...props}: TextProps) {
return (
<Text
style={[color, big ? a.text_md : a.text_sm, active && a.font_bold, style]}
style={[
color,
big ? a.text_md : a.text_sm,
active && a.font_semi_bold,
style,
]}
{...props}
/>
)
src/components/PostControls/RepostButton.tsx
+2 -2
View File
@@ -157,7 +157,7 @@ let RepostButtonDialogInner = ({
variant="ghost"
color="primary">
<Repost size="lg" fill={t.palette.primary_500} />
<Text style={[a.font_bold, a.text_xl]}>
<Text style={[a.font_semi_bold, a.text_xl]}>
{isReposted ? (
<Trans>Remove repost</Trans>
) : (
@@ -188,7 +188,7 @@ let RepostButtonDialogInner = ({
/>
<Text
style={[
a.font_bold,
a.font_semi_bold,
a.text_xl,
embeddingDisabled && t.atoms.text_contrast_low,
]}>
src/components/PostControls/ShareMenu/RecentChats.tsx
+1 -1
View File
@@ -203,7 +203,7 @@ function NoConvos() {
a.text_sm,
t.atoms.text_contrast_high,
a.text_center,
a.font_bold,
a.font_semi_bold,
]}>
<Trans>Start a conversation, and it will appear here.</Trans>
</Text>
src/components/ProfileCard.tsx
+2 -2
View File
@@ -233,7 +233,7 @@ function InlineNameAndHandle({
<Text
emoji
style={[
a.font_bold,
a.font_semi_bold,
a.leading_tight,
a.flex_shrink_0,
{maxWidth: '70%'},
@@ -287,7 +287,7 @@ export function Name({
emoji
style={[
a.text_md,
a.font_bold,
a.font_semi_bold,
a.leading_snug,
a.self_start,
a.flex_shrink,
src/components/ProfileHoverCard/index.web.tsx
+3 -3
View File
@@ -515,7 +515,7 @@ function Inner({
<View style={[a.flex_row, a.align_center, a.pt_md, a.pb_xs]}>
<Text
numberOfLines={1}
style={[a.text_lg, a.font_bold, a.self_start]}>
style={[a.text_lg, a.font_semi_bold, a.self_start]}>
{sanitizeDisplayName(
profile.displayName || sanitizeHandle(profile.handle),
moderation.ui('displayName'),
@@ -562,7 +562,7 @@ function Inner({
label={`${followers} ${pluralizedFollowers}`}
style={[t.atoms.text]}
onPress={hide}>
<Text style={[a.text_md, a.font_bold]}>{followers} </Text>
<Text style={[a.text_md, a.font_semi_bold]}>{followers} </Text>
<Text style={[t.atoms.text_contrast_medium]}>
{pluralizedFollowers}
</Text>
@@ -572,7 +572,7 @@ function Inner({
label={_(msg`${following} following`)}
style={[t.atoms.text]}
onPress={hide}>
<Text style={[a.text_md, a.font_bold]}>{following} </Text>
<Text style={[a.text_md, a.font_semi_bold]}>{following} </Text>
<Text style={[t.atoms.text_contrast_medium]}>
{pluralizedFollowings}
</Text>
src/components/ProgressGuide/FollowDialog.tsx
+1 -1
View File
@@ -360,7 +360,7 @@ function HeaderTop({guide}: {guide: Follow10ProgressGuide}) {
style={[
a.z_10,
a.text_lg,
a.font_heavy,
a.font_bold,
a.leading_tight,
t.atoms.text_contrast_high,
]}>
src/components/ProgressGuide/List.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
<Text
style={[
t.atoms.text_contrast_medium,
a.font_bold,
a.font_semi_bold,
a.text_sm,
{textTransform: 'uppercase'},
]}>
src/components/ProgressGuide/Task.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ export function ProgressGuideTask({
<Text
style={[
a.text_sm,
a.font_bold,
a.font_semi_bold,
a.leading_tight,
tabularNumsTitle && {fontVariant: ['tabular-nums']},
]}>
src/components/ProgressGuide/Toast.tsx
+1 -1
View File
@@ -160,7 +160,7 @@ export const ProgressGuideToast = React.forwardRef<
ref={animatedCheckRef}
/>
<View>
<Text style={[a.text_md, a.font_bold]}>{title}</Text>
<Text style={[a.text_md, a.font_semi_bold]}>{title}</Text>
{subtitle && (
<Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
{subtitle}
src/components/Prompt.tsx
+1 -1
View File
@@ -77,7 +77,7 @@ export function TitleText({
style={[
a.flex_1,
a.text_2xl,
a.font_bold,
a.font_semi_bold,
a.pb_sm,
a.leading_snug,
style,
src/components/ReportDialog/SelectLabelerView.tsx
+3 -2
View File
@@ -24,7 +24,7 @@ export function SelectLabelerView({
return (
<View style={[a.gap_lg]}>
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
<Text style={[a.text_2xl, a.font_bold]}>
<Text style={[a.text_2xl, a.font_semi_bold]}>
<Trans>Select moderator</Trans>
</Text>
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
@@ -75,7 +75,8 @@ function LabelerButton({
handle: labeler.creator.handle,
})}
/>
<Text style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}>
<Text
style={[t.atoms.text_contrast_medium, a.text_sm, a.font_semi_bold]}>
@{labeler.creator.handle}
</Text>
</LabelingServiceCard.Content>
src/components/ReportDialog/SelectReportOptionView.tsx
+3 -2
View File
@@ -85,7 +85,7 @@ export function SelectReportOptionView(props: {
) : null}
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
<Text style={[a.text_2xl, a.font_bold]}>{i18n.title}</Text>
<Text style={[a.text_2xl, a.font_semi_bold]}>{i18n.title}</Text>
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
{i18n.description}
</Text>
@@ -173,7 +173,8 @@ function ReportOptionButton({
interacted && t.atoms.bg_contrast_50,
]}>
<View style={[a.flex_1, a.gap_xs]}>
<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]}>
{title}
</Text>
<Text style={[a.leading_tight, {maxWidth: 400}]}>{description}</Text>
src/components/ReportDialog/SubmitView.tsx
+1 -1
View File
@@ -125,7 +125,7 @@ export function SubmitView({
t.atoms.border_contrast_low,
]}>
<View style={[a.flex_1, a.gap_xs]}>
<Text style={[a.text_md, a.font_bold]}>
<Text style={[a.text_md, a.font_semi_bold]}>
{selectedReportOption.title}
</Text>
<Text style={[a.leading_tight, {maxWidth: 400}]}>
src/components/SearchError.tsx
+7 -1
View File
@@ -34,7 +34,13 @@ export function SearchError({
{maxWidth: gtMobile ? 394 : 294},
gtMobile ? a.gap_md : a.gap_sm,
]}>
<Text style={[a.font_bold, a.text_lg, a.text_center, a.leading_snug]}>
<Text
style={[
a.font_semi_bold,
a.text_lg,
a.text_center,
a.leading_snug,
]}>
{title}
</Text>
{children}
src/components/Select/index.tsx
+1 -1
View File
@@ -280,7 +280,7 @@ export function ItemText({children}: ItemTextProps) {
// eslint-disable-next-line bsky-internal/avoid-unwrapped-text
return (
<View style={[a.flex_1, a.py_md, a.border_b, t.atoms.border_contrast_low]}>
<Text style={[a.text_md, selected && a.font_bold]}>{children}</Text>
<Text style={[a.text_md, selected && a.font_semi_bold]}>{children}</Text>
</View>
)
}
src/components/Select/index.web.tsx
+1 -1
View File
@@ -259,7 +259,7 @@ export function Item({ref, value, style, children}: ItemProps) {
a.text_sm,
{outline: 0},
(hovered || focused) && {backgroundColor: t.palette.primary_50},
selected && [a.font_bold],
selected && [a.font_semi_bold],
a.transition_color,
style,
])}>
src/components/StarterPack/ProfileStarterPacks.tsx
+1 -1
View File
@@ -255,7 +255,7 @@ function Empty() {
{marginTop: a.border.borderWidth},
]}>
<View style={[a.gap_xs]}>
<Text style={[a.font_bold, a.text_lg, {color: 'white'}]}>
<Text style={[a.font_semi_bold, a.text_lg, {color: 'white'}]}>
<Trans>You haven't created a starter pack yet!</Trans>
</Text>
<Text style={[a.text_md, {color: 'white'}]}>
src/components/StarterPack/QrCode.tsx
+8 -3
View File
@@ -54,14 +54,19 @@ export function QrCode({
]}>
<View style={[a.gap_sm]}>
<Text
style={[a.font_bold, a.text_3xl, a.text_center, {color: 'white'}]}>
style={[
a.font_semi_bold,
a.text_3xl,
a.text_center,
{color: 'white'},
]}>
{record.name}
</Text>
</View>
<View style={[a.gap_xl, a.align_center]}>
<Text
style={[
a.font_bold,
a.font_semi_bold,
a.text_center,
{color: 'white', fontSize: 18},
]}>
@@ -76,7 +81,7 @@ export function QrCode({
a.flex,
a.flex_row,
a.align_center,
a.font_bold,
a.font_semi_bold,
{color: 'white', fontSize: 18, gap: 6},
]}>
<Trans>
src/components/StarterPack/ShareDialog.tsx
+1 -1
View File
@@ -77,7 +77,7 @@ function ShareDialogInner({
) : (
<View style={[!gtMobile && a.gap_lg]}>
<View style={[a.gap_sm, gtMobile && a.pb_lg]}>
<Text style={[a.font_bold, a.text_2xl]}>
<Text style={[a.font_semi_bold, a.text_2xl]}>
<Trans>Invite people to this starter pack!</Trans>
</Text>
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
src/components/StarterPack/StarterPackCard.tsx
+2 -2
View File
@@ -77,7 +77,7 @@ export function Card({
<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={2}>
{record.name}
</Text>
@@ -97,7 +97,7 @@ export function Card({
</Text>
) : null}
{!!joinedAllTimeCount && joinedAllTimeCount >= 50 && (
<Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
<Text style={[a.font_semi_bold, t.atoms.text_contrast_medium]}>
<Trans comment="Number of users (always at least 50) who have joined Bluesky using a specific starter pack">
<Plural value={joinedAllTimeCount} other="# users have" /> joined!
</Trans>
src/components/StarterPack/Wizard/WizardEditListDialog.tsx
+1 -1
View File
@@ -105,7 +105,7 @@ export function WizardEditListDialog({
: [a.pb_sm, a.align_end],
]}>
<View style={{width: 60}} />
<Text style={[a.font_bold, a.text_xl]}>
<Text style={[a.font_semi_bold, a.text_xl]}>
{state.currentStep === 'Profiles' ? (
<Trans>Edit People</Trans>
) : (
src/components/StarterPack/Wizard/WizardListCard.tsx
+1 -1
View File
@@ -83,7 +83,7 @@ function WizardListCard({
emoji
style={[
a.flex_1,
a.font_bold,
a.font_semi_bold,
a.text_md,
a.leading_tight,
a.self_start,
src/components/SubtleWebHover.web.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ export function SubtleWebHover({
if (isTouchDevice) {
return null
}
let opacity: number
let opacity = 0.5
switch (t.name) {
case 'dark':
opacity = 0.4
src/components/TrendingTopics.tsx
+1 -1
View File
@@ -90,7 +90,7 @@ export function TrendingTopic({
<Text
style={[
a.font_bold,
a.font_semi_bold,
a.leading_tight,
isSmall ? [a.text_sm] : [a.text_md, {paddingBottom: 1}],
]}
src/components/VideoPostCard.tsx
+9 -3
View File
@@ -227,7 +227,8 @@ export function VideoPostCard({
{likeCount > 0 && (
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
<Heart size="sm" fill="white" />
<Text style={[a.text_sm, a.font_bold, {color: 'white'}]}>
<Text
style={[a.text_sm, a.font_semi_bold, {color: 'white'}]}>
{formatCount(i18n, likeCount)}
</Text>
</View>
@@ -235,7 +236,8 @@ export function VideoPostCard({
{repostCount > 0 && (
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
<Repost size="sm" fill="white" />
<Text style={[a.text_sm, a.font_bold, {color: 'white'}]}>
<Text
style={[a.text_sm, a.font_semi_bold, {color: 'white'}]}>
{formatCount(i18n, repostCount)}
</Text>
</View>
@@ -520,7 +522,11 @@ export function CompactVideoPostCard({
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
<Heart size="sm" fill="white" />
<Text
style={[a.text_sm, a.font_bold, {color: 'white'}]}>
style={[
a.text_sm,
a.font_semi_bold,
{color: 'white'},
]}>
{formatCount(i18n, likeCount)}
</Text>
</View>
src/components/WelcomeModal.tsx
+2 -2
View File
@@ -108,7 +108,7 @@ export function WelcomeModal({control}: WelcomeModalProps) {
<Text
style={[
a.text_2xl,
a.font_bold,
a.font_semi_bold,
a.user_select_none,
{color: '#354358', letterSpacing: -0.5},
]}>
@@ -127,7 +127,7 @@ export function WelcomeModal({control}: WelcomeModalProps) {
<Text
style={[
gtMobile ? a.text_4xl : a.text_3xl,
a.font_bold,
a.font_semi_bold,
a.text_center,
{color: '#354358'},
web({
src/components/WhoCanReply.tsx
+1 -1
View File
@@ -188,7 +188,7 @@ function WhoCanReplyDialog({
label={_(msg`Dialog: adjust who can interact with this post`)}
style={web({maxWidth: 400})}>
<View style={[a.gap_sm]}>
<Text style={[a.font_bold, a.text_xl, a.pb_sm]}>
<Text style={[a.font_semi_bold, a.text_xl, a.pb_sm]}>
<Trans>Who can interact with this post?</Trans>
</Text>
<Rules
src/components/activity-notifications/SubscribeProfileDialog.tsx
+1 -1
View File
@@ -219,7 +219,7 @@ function DialogInner({
label={_(msg`Get notified of new posts from ${name}`)}>
<View style={[a.gap_lg]}>
<View style={[a.gap_xs]}>
<Text style={[a.font_heavy, a.text_2xl]}>
<Text style={[a.font_bold, a.text_2xl]}>
<Trans>Keep me posted</Trans>
</Text>
<Text style={[t.atoms.text_contrast_medium, a.text_md]}>
src/components/ageAssurance/AgeAssuranceAdmonition.tsx
+2 -2
View File
@@ -82,13 +82,13 @@ function Inner({
</View>
<View style={[a.flex_1, a.gap_xs, a.pr_4xl]}>
<Text style={[a.text_sm, a.leading_snug]}>{children}</Text>
<Text style={[a.text_sm, a.leading_snug, a.font_bold]}>
<Text style={[a.text_sm, a.leading_snug, a.font_semi_bold]}>
<Trans>
Learn more in your{' '}
<InlineLinkText
label={_(msg`Go to account settings`)}
to={'/settings/account'}
style={[a.text_sm, a.leading_snug, a.font_bold]}
style={[a.text_sm, a.leading_snug, a.font_semi_bold]}
onPress={() => {
logger.metric('ageAssurance:navigateToSettings', {})
}}>
src/components/ageAssurance/AgeAssuranceAppealDialog.tsx
+1 -1
View File
@@ -89,7 +89,7 @@ function Inner({control}: {control: Dialog.DialogControlProps}) {
<AgeAssuranceBadge />
</View>
<Text style={[a.text_2xl, a.font_heavy, a.pt_md, a.leading_tight]}>
<Text style={[a.text_2xl, a.font_bold, a.pt_md, a.leading_tight]}>
<Trans>Contact us</Trans>
</Text>
src/components/ageAssurance/AgeAssuranceBadge.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export function AgeAssuranceBadge() {
<Shield size="sm" />
<Text
style={[
a.font_bold,
a.font_semi_bold,
a.leading_snug,
{
color: select(t.name, {
src/components/ageAssurance/AgeAssuranceInitDialog.tsx
+1 -1
View File
@@ -178,7 +178,7 @@ function Inner() {
<View style={[a.align_start]}>
<AgeAssuranceBadge />
<Text style={[a.text_xl, a.font_heavy, a.pt_xl, a.pb_md]}>
<Text style={[a.text_xl, a.font_bold, a.pt_xl, a.pb_md]}>
{success ? <Trans>Success!</Trans> : <Trans>Verify your age</Trans>}
</Text>
src/components/ageAssurance/AgeAssuranceRedirectDialog.tsx
+2 -2
View File
@@ -160,7 +160,7 @@ export function Inner({}: {optimisticState?: AgeAssuranceRedirectDialogState}) {
a.pb_md,
]}>
<SuccessIcon size="sm" fill={t.palette.positive_600} />
<Text style={[a.text_xl, a.font_heavy]}>
<Text style={[a.text_xl, a.font_bold]}>
<Trans>Success</Trans>
</Text>
</View>
@@ -209,7 +209,7 @@ export function Inner({}: {optimisticState?: AgeAssuranceRedirectDialogState}) {
]}>
{error && <ErrorIcon size="md" fill={t.palette.negative_500} />}
<Text style={[a.text_xl, a.font_heavy]}>
<Text style={[a.text_xl, a.font_bold]}>
{error ? <Trans>Connection issue</Trans> : <Trans>Verifying</Trans>}
</Text>
src/components/ageAssurance/AgeRestrictedScreen.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ export function AgeRestrictedScreen({
</View>
<View style={[a.gap_sm, a.pb_lg]}>
<Text style={[a.text_xl, a.leading_snug, a.font_heavy]}>
<Text style={[a.text_xl, a.leading_snug, a.font_bold]}>
<Trans>
You must complete age assurance in order to access this screen.
</Trans>
src/components/dialogs/BirthDateSettings.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export function BirthDateSettingsDialog({
label={_(msg`My Birthday`)}
style={web({maxWidth: 400})}>
<View style={[a.gap_sm]}>
<Text style={[a.text_xl, a.font_bold]}>
<Text style={[a.text_xl, a.font_semi_bold]}>
<Trans>My Birthday</Trans>
</Text>
<Text style={[a.leading_snug, t.atoms.text_contrast_medium]}>
src/components/dialogs/DeviceLocationRequestDialog.tsx
+1 -1
View File
@@ -108,7 +108,7 @@ function DeviceLocationRequestDialogInner({onLocationAcquired}: Props) {
return (
<View style={[a.gap_md]}>
<Text style={[a.text_xl, a.font_heavy]}>
<Text style={[a.text_xl, a.font_bold]}>
<Trans>Confirm your location</Trans>
</Text>
<View style={[a.gap_sm, a.pb_xs]}>
src/components/dialogs/EmailDialog/screens/Manage2FA/Disable.tsx
+3 -3
View File
@@ -153,7 +153,7 @@ export function Disable() {
return (
<View style={[a.gap_sm]}>
<Text style={[a.text_xl, a.font_heavy, a.leading_snug]}>
<Text style={[a.text_xl, a.font_bold, a.leading_snug]}>
<Trans>Disable email 2FA</Trans>
</Text>
@@ -163,7 +163,7 @@ export function Disable() {
style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
<Trans>
To disable your email 2FA method, please verify your access to{' '}
<Span style={[a.font_bold]}>{currentAccount?.email}</Span>
<Span style={[a.font_semi_bold]}>{currentAccount?.email}</Span>
</Trans>
</Text>
@@ -214,7 +214,7 @@ export function Disable() {
style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
<Trans>
To disable your email 2FA method, please verify your access to{' '}
<Span style={[a.font_bold]}>{currentAccount?.email}</Span>
<Span style={[a.font_semi_bold]}>{currentAccount?.email}</Span>
</Trans>
</Text>
src/components/dialogs/EmailDialog/screens/Manage2FA/Enable.tsx
+1 -1
View File
@@ -88,7 +88,7 @@ export function Enable() {
return (
<View style={[a.gap_lg]}>
<View style={[a.gap_sm]}>
<Text style={[a.text_xl, a.font_heavy, a.leading_snug]}>
<Text style={[a.text_xl, a.font_bold, a.leading_snug]}>
<Trans>Enable email 2FA</Trans>
</Text>
src/components/dialogs/EmailDialog/screens/Update.tsx
+3 -3
View File
@@ -199,7 +199,7 @@ export function Update(_props: ScreenProps<ScreenID.Update>) {
return (
<View style={[a.gap_lg]}>
<Text style={[a.text_xl, a.font_heavy]}>
<Text style={[a.text_xl, a.font_bold]}>
<Trans>Update your email</Trans>
</Text>
@@ -239,7 +239,7 @@ export function Update(_props: ScreenProps<ScreenID.Update>) {
<>
<Divider />
<View>
<Text style={[a.text_md, a.pb_sm, a.font_bold]}>
<Text style={[a.text_md, a.pb_sm, a.font_semi_bold]}>
<Trans>Security step required</Trans>
</Text>
<Text
@@ -282,7 +282,7 @@ export function Update(_props: ScreenProps<ScreenID.Update>) {
<View style={[a.gap_sm]}>
<View style={[a.flex_row, a.gap_sm, a.align_center]}>
<Check fill={t.palette.positive_600} size="xs" />
<Text style={[a.text_md, a.font_heavy]}>
<Text style={[a.text_md, a.font_bold]}>
<Trans>Success!</Trans>
</Text>
</View>
src/components/dialogs/EmailDialog/screens/VerificationReminder.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ export function VerificationReminder({
<View style={[a.mb_xs, {height: 150 - dialogPadding}]} />
<View style={[a.gap_sm]}>
<Text style={[a.text_xl, a.font_heavy]}>
<Text style={[a.text_xl, a.font_bold]}>
<Trans>Please verify your email</Trans>
</Text>
<Text style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
src/components/dialogs/EmailDialog/screens/Verify.tsx
+5 -5
View File
@@ -174,7 +174,7 @@ export function Verify({config, showScreen}: ScreenProps<ScreenID.Verify>) {
return (
<View style={[a.gap_lg]}>
<View style={[a.gap_sm]}>
<Text style={[a.text_xl, a.font_heavy]}>
<Text style={[a.text_xl, a.font_bold]}>
<Span style={{top: 1}}>
<Check size="sm" fill={t.palette.positive_600} />
</Span>
@@ -197,7 +197,7 @@ export function Verify({config, showScreen}: ScreenProps<ScreenID.Verify>) {
return (
<View style={[a.gap_lg]}>
<View style={[a.gap_sm]}>
<Text style={[a.text_xl, a.font_heavy]}>
<Text style={[a.text_xl, a.font_bold]}>
{state.step === 'email' ? (
state.mutationStatus === 'success' ? (
<>
@@ -239,7 +239,7 @@ export function Verify({config, showScreen}: ScreenProps<ScreenID.Verify>) {
state.mutationStatus === 'success' ? (
<Trans>
We sent an email to{' '}
<Span style={[a.font_bold, t.atoms.text]}>
<Span style={[a.font_semi_bold, t.atoms.text]}>
{currentAccount!.email}
</Span>{' '}
containing a link. Please click on it to complete the email
@@ -248,7 +248,7 @@ export function Verify({config, showScreen}: ScreenProps<ScreenID.Verify>) {
) : (
<Trans>
We'll send an email to{' '}
<Span style={[a.font_bold, t.atoms.text]}>
<Span style={[a.font_semi_bold, t.atoms.text]}>
{currentAccount!.email}
</Span>{' '}
containing a link. Please click on it to complete the email
@@ -258,7 +258,7 @@ export function Verify({config, showScreen}: ScreenProps<ScreenID.Verify>) {
) : (
<Trans>
Please enter the code we sent to{' '}
<Span style={[a.font_bold, t.atoms.text]}>
<Span style={[a.font_semi_bold, t.atoms.text]}>
{currentAccount!.email}
</Span>{' '}
below.
src/components/dialogs/Embed.tsx
+2 -2
View File
@@ -104,7 +104,7 @@ function EmbedDialogInner({
<Dialog.Inner label={_(msg`Embed post`)} style={[{maxWidth: 500}]}>
<View style={[a.gap_lg]}>
<View style={[a.gap_sm]}>
<Text style={[a.text_2xl, a.font_heavy]}>
<Text style={[a.text_2xl, a.font_bold]}>
<Trans>Embed post</Trans>
</Text>
<Text
@@ -147,7 +147,7 @@ function EmbedDialogInner({
{showCustomisation && (
<View style={[a.gap_sm, a.p_md]}>
<Text style={[t.atoms.text_contrast_medium, a.font_bold]}>
<Text style={[t.atoms.text_contrast_medium, a.font_semi_bold]}>
<Trans>Color theme</Trans>
</Text>
<ToggleButton.Group
src/components/dialogs/EmbedConsent.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ export function EmbedConsentDialog({
label={_(msg`External Media`)}
style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}>
<View style={a.gap_sm}>
<Text style={[a.text_2xl, a.font_bold]}>
<Text style={[a.text_2xl, a.font_semi_bold]}>
<Trans>External Media</Trans>
</Text>
src/components/dialogs/InAppBrowserConsent.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ function InAppBrowserConsentInner({href}: {href?: string}) {
<Dialog.ScrollableInner label={_(msg`How should we open this link?`)}>
<View style={[a.gap_2xl]}>
<View style={[a.gap_sm]}>
<Text style={[a.font_heavy, a.text_2xl]}>
<Text style={[a.font_bold, a.text_2xl]}>
<Trans>How should we open this link?</Trans>
</Text>
<Text style={[t.atoms.text_contrast_high, a.leading_snug, a.text_md]}>
src/components/dialogs/LinkWarning.tsx
+3 -2
View File
@@ -68,7 +68,7 @@ function InAppBrowserConsentInner({
}>
<View style={[a.gap_2xl]}>
<View style={[a.gap_sm]}>
<Text style={[a.font_heavy, a.text_2xl]}>
<Text style={[a.font_bold, a.text_2xl]}>
{potentiallyMisleading ? (
<Trans>Potentially misleading link</Trans>
) : (
@@ -151,7 +151,8 @@ function LinkBox({href}: {href: string}) {
]}>
<Text style={[a.text_md, a.leading_snug, t.atoms.text_contrast_medium]}>
{scheme}
<Text style={[a.text_md, a.leading_snug, t.atoms.text, a.font_bold]}>
<Text
style={[a.text_md, a.leading_snug, t.atoms.text, a.font_semi_bold]}>
{hostname}
</Text>
{rest}
src/components/dialogs/MutedWords.tsx
+15 -8
View File
@@ -108,7 +108,12 @@ function MutedWordsInner() {
<Dialog.ScrollableInner label={_(msg`Manage your muted words and tags`)}>
<View>
<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>Add muted words and tags</Trans>
</Text>
<Text style={[a.pb_lg, a.leading_snug, t.atoms.text_contrast_medium]}>
@@ -147,7 +152,7 @@ function MutedWordsInner() {
style={[
a.pb_xs,
a.text_sm,
a.font_bold,
a.font_semi_bold,
t.atoms.text_contrast_medium,
]}>
<Trans>Duration:</Trans>
@@ -247,7 +252,7 @@ function MutedWordsInner() {
style={[
a.pb_xs,
a.text_sm,
a.font_bold,
a.font_semi_bold,
t.atoms.text_contrast_medium,
]}>
<Trans>Mute in:</Trans>
@@ -293,7 +298,7 @@ function MutedWordsInner() {
style={[
a.pb_xs,
a.text_sm,
a.font_bold,
a.font_semi_bold,
t.atoms.text_contrast_medium,
]}>
<Trans>Options:</Trans>
@@ -362,7 +367,7 @@ function MutedWordsInner() {
<Text
style={[
a.text_md,
a.font_bold,
a.font_semi_bold,
a.pb_md,
t.atoms.text_contrast_high,
]}>
@@ -455,7 +460,7 @@ function MutedWordRow({
style={[
a.flex_1,
a.leading_snug,
a.font_bold,
a.font_semi_bold,
web({
overflowWrap: 'break-word',
wordBreak: 'break-word',
@@ -466,7 +471,8 @@ function MutedWordRow({
{word.value}{' '}
<Text style={[a.font_normal, t.atoms.text_contrast_medium]}>
in{' '}
<Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
<Text
style={[a.font_semi_bold, t.atoms.text_contrast_medium]}>
text & tags
</Text>
</Text>
@@ -476,7 +482,8 @@ function MutedWordRow({
{word.value}{' '}
<Text style={[a.font_normal, t.atoms.text_contrast_medium]}>
in{' '}
<Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
<Text
style={[a.font_semi_bold, t.atoms.text_contrast_medium]}>
tags
</Text>
</Text>
src/components/dialogs/PostInteractionSettingsDialog.tsx
+7 -5
View File
@@ -84,7 +84,7 @@ export function PostInteractionSettingsControlledDialog({
]}>
<Trans>
You can set default interaction settings in{' '}
<Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
<Text style={[a.font_semi_bold, t.atoms.text_contrast_medium]}>
Settings &rarr; Moderation &rarr; Interaction settings
</Text>
.
@@ -100,7 +100,7 @@ export function PostInteractionSettingsControlledDialog({
export function Header() {
return (
<View style={[a.gap_md, a.pb_sm]}>
<Text style={[a.text_2xl, a.font_bold]}>
<Text style={[a.text_2xl, a.font_semi_bold]}>
<Trans>Post interaction settings</Trans>
</Text>
<Text style={[a.text_md, a.pb_xs]}>
@@ -329,7 +329,7 @@ export function PostInteractionSettingsForm({
<View style={[a.flex_1, a.gap_md]}>
<View style={[a.gap_lg]}>
<View style={[a.gap_sm]}>
<Text style={[a.font_bold, a.text_lg]}>
<Text style={[a.font_semi_bold, a.text_lg]}>
<Trans>Quote settings</Trans>
</Text>
@@ -385,7 +385,7 @@ export function PostInteractionSettingsForm({
opacity: replySettingsDisabled ? 0.3 : 1,
},
]}>
<Text style={[a.font_bold, a.text_lg]}>
<Text style={[a.font_semi_bold, a.text_lg]}>
<Trans>Reply settings</Trans>
</Text>
@@ -535,7 +535,9 @@ function Selectable({
},
style,
]}>
<Text style={[a.text_sm, isSelected && a.font_bold]}>{label}</Text>
<Text style={[a.text_sm, isSelected && a.font_semi_bold]}>
{label}
</Text>
{isSelected ? (
<Check size="sm" fill={t.palette.primary_500} />
) : (
src/components/dialogs/SearchablePeopleList.tsx
+1 -1
View File
@@ -284,7 +284,7 @@ export function SearchablePeopleList({
style={[
a.z_10,
a.text_lg,
a.font_heavy,
a.font_bold,
a.leading_tight,
t.atoms.text_contrast_high,
]}>
src/components/dialogs/StarterPackDialog.tsx
+3 -3
View File
@@ -172,7 +172,7 @@ function StarterPackList({
isWeb ? a.mb_2xl : a.my_lg,
a.align_center,
]}>
<Text style={[a.text_lg, a.font_bold]}>
<Text style={[a.text_lg, a.font_semi_bold]}>
<Trans>Add to starter packs</Trans>
</Text>
<Button
@@ -189,7 +189,7 @@ function StarterPackList({
<>
<View
style={[a.flex_row, a.justify_between, a.align_center, a.py_md]}>
<Text style={[a.text_md, a.font_bold]}>
<Text style={[a.text_md, a.font_semi_bold]}>
<Trans>New starter pack</Trans>
</Text>
<Button
@@ -331,7 +331,7 @@ function StarterPackItem({
return (
<View style={[a.flex_row, a.justify_between, a.align_center, a.py_md]}>
<View>
<Text emoji style={[a.text_md, a.font_bold]} numberOfLines={1}>
<Text emoji style={[a.text_md, a.font_semi_bold]} numberOfLines={1}>
{record.name}
</Text>
src/components/dialogs/SwitchAccount.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export function SwitchAccountDialog({
<Dialog.Handle />
<Dialog.ScrollableInner label={_(msg`Switch Account`)}>
<View style={[a.gap_lg]}>
<Text style={[a.text_2xl, a.font_bold]}>
<Text style={[a.text_2xl, a.font_semi_bold]}>
<Trans>Switch Account</Trans>
</Text>
src/components/dialogs/nuxs/ActivitySubscriptions.tsx
+2 -2
View File
@@ -66,7 +66,7 @@ export function ActivitySubscriptionsNUX() {
<SparkleIcon fill={t.palette.primary_800} size="sm" />
<Text
style={[
a.font_bold,
a.font_semi_bold,
{
color: t.palette.primary_800,
},
@@ -127,7 +127,7 @@ export function ActivitySubscriptionsNUX() {
style={[
a.text_3xl,
a.leading_tight,
a.font_heavy,
a.font_bold,
a.text_center,
{
fontSize: isWeb ? 28 : 32,
src/components/dialogs/nuxs/BookmarksAnnouncement.tsx
+2 -2
View File
@@ -65,7 +65,7 @@ export function BookmarksAnnouncement() {
<SparkleIcon fill={t.palette.primary_800} size="sm" />
<Text
style={[
a.font_bold,
a.font_semi_bold,
{
color: t.palette.primary_800,
},
@@ -133,7 +133,7 @@ export function BookmarksAnnouncement() {
style={[
a.text_3xl,
a.leading_tight,
a.font_heavy,
a.font_bold,
a.text_center,
{
fontSize: isWeb ? 28 : 32,
src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx
+4 -4
View File
@@ -55,7 +55,7 @@ export function InitialVerificationAnnouncement() {
<SparkleIcon fill={t.palette.primary_700} size="sm" />
<Text
style={[
a.font_bold,
a.font_semi_bold,
{
color: t.palette.primary_700,
},
@@ -87,7 +87,7 @@ export function InitialVerificationAnnouncement() {
</View>
<View style={[a.gap_xs]}>
<Text style={[a.text_2xl, a.font_bold, a.leading_snug]}>
<Text style={[a.text_2xl, a.font_semi_bold, a.leading_snug]}>
<Trans>A new form of verification</Trans>
</Text>
<Text style={[a.leading_snug, a.text_md]}>
@@ -123,7 +123,7 @@ export function InitialVerificationAnnouncement() {
<View style={[a.gap_sm]}>
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
<VerifierCheck width={14} />
<Text style={[a.text_lg, a.font_bold, a.leading_snug]}>
<Text style={[a.text_lg, a.font_semi_bold, a.leading_snug]}>
<Trans>Who can verify?</Trans>
</Text>
</View>
@@ -138,7 +138,7 @@ export function InitialVerificationAnnouncement() {
<Trans>
Trust emerges from relationships, communities, and shared
context, so we’re also enabling{' '}
<Span style={[a.font_bold]}>trusted verifiers</Span>:
<Span style={[a.font_semi_bold]}>trusted verifiers</Span>:
organizations that can directly issue verification.
</Trans>
</Text>
src/components/dms/ChatEmptyPill.tsx
+3 -1
View File
@@ -89,7 +89,9 @@ export function ChatEmptyPill() {
onPress={onPress}
onPressIn={onPressIn}
onPressOut={onPressOut}>
<Text style={[a.font_bold, a.pointer_events_none]} selectable={false}>
<Text
style={[a.font_semi_bold, a.pointer_events_none]}
selectable={false}>
{prompts[promptIndex]}
</Text>
</AnimatedPressable>
src/components/dms/DateDivider.tsx
+2 -1
View File
@@ -67,7 +67,8 @@ let DateDivider = ({date: dateStr}: {date: string}): React.ReactNode => {
a.px_md,
]}>
<Trans>
<Text style={[a.text_xs, t.atoms.text_contrast_medium, a.font_bold]}>
<Text
style={[a.text_xs, t.atoms.text_contrast_medium, a.font_semi_bold]}>
{date}
</Text>{' '}
at {time}
src/components/dms/EmojiPopup.android.tsx
+1 -1
View File
@@ -51,7 +51,7 @@ export function EmojiPopup({
a.border_b,
t.atoms.border_contrast_low,
]}>
<Text style={[a.font_bold, a.text_md]}>
<Text style={[a.font_semi_bold, a.text_md]}>
<Trans>Add Reaction</Trans>
</Text>
<Button
src/components/dms/MessagesListBlockedFooter.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ export function MessagesListBlockedFooter({
return (
<View style={[hasMessages && a.pt_md, a.pb_xl, a.gap_lg]}>
<Divider />
<Text style={[a.text_md, a.font_bold, a.text_center]}>
<Text style={[a.text_md, a.font_semi_bold, a.text_center]}>
{isBlocking ? (
<Trans>You have blocked this user</Trans>
) : (
src/components/dms/MessagesListHeader.tsx
+1 -1
View File
@@ -154,7 +154,7 @@ function HeaderReady({
emoji
style={[
a.text_md,
a.font_bold,
a.font_semi_bold,
a.self_start,
web(a.leading_normal),
]}
src/components/dms/NewMessagesPill.tsx
+1 -1
View File
@@ -88,7 +88,7 @@ export function NewMessagesPill({
onPress={onPress}
onPressIn={onPressIn}
onPressOut={onPressOut}>
<Text style={[a.font_bold]}>
<Text style={[a.font_semi_bold]}>
<Trans>New messages</Trans>
</Text>
</AnimatedPressable>
src/components/dms/ReportDialog.tsx
+5 -4
View File
@@ -200,7 +200,7 @@ function SubmitStep({
</Button>
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
<Text style={[a.text_2xl, a.font_bold]}>{copy.title}</Text>
<Text style={[a.text_2xl, a.font_semi_bold]}>{copy.title}</Text>
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
<Trans>
Your report will be sent to the Bluesky Moderation Service
@@ -213,10 +213,11 @@ function SubmitStep({
)}
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
<Text style={[a.font_bold, a.text_md, t.atoms.text_contrast_medium]}>
<Text
style={[a.font_semi_bold, a.text_md, t.atoms.text_contrast_medium]}>
<Trans>Reason:</Trans>
</Text>{' '}
<Text style={[a.font_bold, a.text_md]}>{reportOption.title}</Text>
<Text style={[a.font_semi_bold, a.text_md]}>{reportOption.title}</Text>
</Text>
<Divider />
@@ -346,7 +347,7 @@ function DoneStep({
return (
<View style={a.gap_2xl}>
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
<Text style={[a.text_2xl, a.font_bold]}>
<Text style={[a.text_2xl, a.font_semi_bold]}>
<Trans>Report submitted</Trans>
</Text>
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
src/components/forms/FormError.tsx
+2 -1
View File
@@ -20,7 +20,8 @@ export function FormError({error}: {error?: string}) {
]}>
<Warning fill={t.palette.white} size="md" />
<View style={[a.flex_1]}>
<Text style={[{color: t.palette.white}, a.font_bold, a.leading_snug]}>
<Text
style={[{color: t.palette.white}, a.font_semi_bold, a.leading_snug]}>
{error}
</Text>
</View>
src/components/forms/TextField.tsx
+19 -9
View File
@@ -15,7 +15,6 @@ import {
android,
applyFonts,
atoms as a,
ios,
platform,
type TextStyleProp,
tokens,
@@ -202,17 +201,23 @@ export function createInput(Component: typeof TextInput) {
a.px_xs,
{
// paddingVertical doesn't work w/multiline - esb
lineHeight: a.text_md.fontSize * 1.1875,
lineHeight: a.text_md.fontSize * 1.2,
textAlignVertical: rest.multiline ? 'top' : undefined,
minHeight: rest.multiline ? 80 : undefined,
minWidth: 0,
paddingTop: 13,
paddingBottom: 13,
},
ios({paddingTop: 12, paddingBottom: 13}),
// Needs to be sm on Paper, md on Fabric for some godforsaken reason -sfn
android(a.py_sm),
// fix for autofill styles covering border
android({
paddingTop: 8,
paddingBottom: 9,
}),
/*
* Margins are needed here to avoid autofill background overlapping the
* top and bottom borders - esb
*/
web({
paddingTop: 10,
paddingTop: 11,
paddingBottom: 11,
marginTop: 2,
marginBottom: 2,
@@ -262,7 +267,7 @@ export function createInput(Component: typeof TextInput) {
a.absolute,
a.inset_0,
a.rounded_sm,
t.atoms.bg_contrast_25,
t.atoms.bg_contrast_50,
{borderColor: 'transparent', borderWidth: 2},
ctx.hovered ? chromeHover : {},
ctx.focused ? chromeFocus : {},
@@ -287,7 +292,12 @@ export function LabelText({
return (
<Text
nativeID={nativeID}
style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium, a.mb_sm]}>
style={[
a.text_sm,
a.font_semi_bold,
t.atoms.text_contrast_medium,
a.mb_sm,
]}>
{children}
</Text>
)
src/components/forms/Toggle.tsx
+1 -1
View File
@@ -249,7 +249,7 @@ export function LabelText({
return (
<Text
style={[
a.font_bold,
a.font_semi_bold,
a.leading_tight,
{
userSelect: 'none',
src/components/forms/ToggleButton.tsx
+1 -1
View File
@@ -133,7 +133,7 @@ export function ButtonText({children}: {children: React.ReactNode}) {
<Text
style={[
a.text_center,
a.font_bold,
a.font_semi_bold,
t.atoms.text_contrast_medium,
textStyles,
]}>
src/components/intents/VerifyEmailIntentDialog.tsx
+4 -4
View File
@@ -75,7 +75,7 @@ function Inner({}: {control: DialogControlProps}) {
</View>
) : status === 'success' ? (
<View style={[a.gap_sm, isNative && a.pb_xl]}>
<Text style={[a.font_heavy, a.text_2xl]}>
<Text style={[a.font_bold, a.text_2xl]}>
<Trans>Email Verified</Trans>
</Text>
<Text style={[a.text_md, a.leading_snug]}>
@@ -87,7 +87,7 @@ function Inner({}: {control: DialogControlProps}) {
</View>
) : status === 'failure' ? (
<View style={[a.gap_sm]}>
<Text style={[a.font_heavy, a.text_2xl]}>
<Text style={[a.font_bold, a.text_2xl]}>
<Trans>Invalid Verification Code</Trans>
</Text>
<Text style={[a.text_md, a.leading_snug]}>
@@ -100,13 +100,13 @@ function Inner({}: {control: DialogControlProps}) {
</View>
) : (
<View style={[a.gap_sm, isNative && a.pb_xl]}>
<Text style={[a.font_heavy, a.text_2xl]}>
<Text style={[a.font_bold, a.text_2xl]}>
<Trans>Email Resent</Trans>
</Text>
<Text style={[a.text_md, a.leading_snug]}>
<Trans>
We have sent another verification email to{' '}
<Text style={[a.text_md, a.font_bold]}>
<Text style={[a.text_md, a.font_semi_bold]}>
{currentAccount?.email}
</Text>
.
src/components/interstitials/Trending.tsx
+2 -2
View File
@@ -82,7 +82,7 @@ export function Inner() {
style={[
t.atoms.text_contrast_medium,
a.text_sm,
a.font_bold,
a.font_semi_bold,
]}>
{' '}
</Text>
@@ -101,7 +101,7 @@ export function Inner() {
style={[
t.atoms.text,
a.text_sm,
a.font_bold,
a.font_semi_bold,
{opacity: 0.7}, // NOTE: we use opacity 0.7 instead of a color to match the color of the home pager tab bar
]}>
{topic.topic}
src/components/interstitials/TrendingVideos.tsx
+1 -1
View File
@@ -82,7 +82,7 @@ export function TrendingVideos() {
a.align_center,
a.justify_between,
]}>
<Text style={[a.text_sm, a.font_bold, a.leading_snug]}>
<Text style={[a.text_sm, a.font_semi_bold, a.leading_snug]}>
<Trans>Trending Videos</Trans>
</Text>
<Button
src/components/live/EditLiveDialog.tsx
+2 -2
View File
@@ -120,7 +120,7 @@ function DialogInner({
style={web({maxWidth: 420})}>
<View style={[a.gap_lg]}>
<View style={[a.gap_sm]}>
<Text style={[a.font_bold, a.text_2xl]}>
<Text style={[a.font_semi_bold, a.text_2xl]}>
<Trans>You are Live</Trans>
</Text>
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
@@ -182,7 +182,7 @@ function DialogInner({
a.text_sm,
a.leading_snug,
a.flex_1,
a.font_bold,
a.font_semi_bold,
{color: t.palette.negative_500},
]}>
{liveLinkError ? (
src/components/live/GoLiveDialog.tsx
+2 -2
View File
@@ -94,7 +94,7 @@ function DialogInner({profile}: {profile: bsky.profile.AnyProfileView}) {
style={web({maxWidth: 420})}>
<View style={[a.gap_xl]}>
<View style={[a.gap_sm]}>
<Text style={[a.font_bold, a.text_2xl]}>
<Text style={[a.font_semi_bold, a.text_2xl]}>
<Trans>Go Live</Trans>
</Text>
<Text style={[a.text_md, a.leading_snug, t.atoms.text_contrast_high]}>
@@ -153,7 +153,7 @@ function DialogInner({profile}: {profile: bsky.profile.AnyProfileView}) {
a.text_sm,
a.leading_snug,
a.flex_1,
a.font_bold,
a.font_semi_bold,
{color: t.palette.negative_500},
]}>
{liveLinkError ? (
src/components/live/LinkPreview.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ export function LinkPreview({
<>
<Text
numberOfLines={2}
style={[a.leading_snug, a.font_bold, a.text_md]}>
style={[a.leading_snug, a.font_semi_bold, a.text_md]}>
{linkMeta.title || linkMeta.url}
</Text>
<View style={[a.flex_row, a.align_center, a.gap_2xs]}>
src/components/live/LiveIndicator.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ export function LiveIndicator({
<Text
style={[
a.text_center,
a.font_bold,
a.font_semi_bold,
fontSize,
{color: t.palette.white},
]}>
src/components/live/LiveStatusDialog.tsx
+1 -1
View File
@@ -137,7 +137,7 @@ export function LiveStatus({
<View style={[a.w_full, a.justify_center, a.gap_2xs]}>
<Text
numberOfLines={3}
style={[a.leading_snug, a.font_bold, a.text_xl]}>
style={[a.leading_snug, a.font_semi_bold, a.text_xl]}>
{embed.external.title || embed.external.uri}
</Text>
<View style={[a.flex_row, a.align_center, a.gap_2xs]}>
src/components/moderation/ContentHider.tsx
+4 -4
View File
@@ -178,9 +178,9 @@ function ContentHiderActive({
style={[
a.flex_1,
a.text_left,
a.font_bold,
a.font_semi_bold,
a.leading_snug,
gtMobile && [a.font_bold],
gtMobile && [a.font_semi_bold],
t.atoms.text_contrast_medium,
web({
marginBottom: 1,
@@ -192,9 +192,9 @@ function ContentHiderActive({
{!modui.noOverride && (
<Text
style={[
a.font_bold,
a.font_semi_bold,
a.leading_snug,
gtMobile && [a.font_bold],
gtMobile && [a.font_semi_bold],
t.atoms.text_contrast_high,
web({
marginBottom: 1,
src/components/moderation/LabelPreference.tsx
+8 -3
View File
@@ -48,7 +48,7 @@ export function Content({
return (
<View style={[a.gap_xs, a.flex_1]}>
<Text emoji style={[a.font_bold, gtPhone ? a.text_sm : a.text_md]}>
<Text emoji style={[a.font_semi_bold, gtPhone ? a.text_sm : a.text_md]}>
{name}
</Text>
<Text emoji style={[t.atoms.text_contrast_medium, a.leading_snug]}>
@@ -241,7 +241,12 @@ export function LabelerLabelPreference({
<View style={[a.flex_row, a.gap_xs, a.align_center, a.mt_xs]}>
<CircleInfo size="sm" fill={t.atoms.text_contrast_high.color} />
<Text style={[t.atoms.text_contrast_medium, a.font_bold, a.italic]}>
<Text
style={[
t.atoms.text_contrast_medium,
a.font_semi_bold,
a.italic,
]}>
{adultDisabled ? (
<Trans>Adult content is disabled.</Trans>
) : isGlobalLabel ? (
@@ -274,7 +279,7 @@ export function LabelerLabelPreference({
t.atoms.border_contrast_low,
a.self_start,
]}>
<Text emoji style={[a.font_bold, t.atoms.text_contrast_low]}>
<Text emoji style={[a.font_semi_bold, t.atoms.text_contrast_low]}>
{currentPrefLabel}
</Text>
</View>
src/components/moderation/LabelsOnMeDialog.tsx
+3 -3
View File
@@ -67,7 +67,7 @@ function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
/>
) : (
<>
<Text style={[a.text_2xl, a.font_heavy, a.pb_xs, a.leading_tight]}>
<Text style={[a.text_2xl, a.font_bold, a.pb_xs, a.leading_tight]}>
{isAccount ? (
<Trans>Labels on your account</Trans>
) : (
@@ -134,7 +134,7 @@ function Label({
]}>
<View style={[a.p_md, a.gap_sm, a.flex_row]}>
<View style={[a.flex_1, a.gap_xs]}>
<Text emoji style={[a.font_bold, a.text_md]}>
<Text emoji style={[a.font_semi_bold, a.text_md]}>
{strings.name}
</Text>
<Text emoji style={[t.atoms.text_contrast_medium, a.leading_snug]}>
@@ -264,7 +264,7 @@ function AppealForm({
return (
<>
<View>
<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 "{strings.name}" label</Trans>
</Text>
<Text style={[a.text_md, a.leading_snug]}>
src/components/moderation/ModerationDetailsDialog.tsx
+1 -1
View File
@@ -142,7 +142,7 @@ function ModerationDetailsDialogInner({
paddingBottom: 0,
}}>
<View style={[xGutters, a.pb_lg]}>
<Text emoji style={[t.atoms.text, a.text_2xl, a.font_heavy, a.mb_sm]}>
<Text emoji style={[t.atoms.text, a.text_2xl, a.font_bold, a.mb_sm]}>
{name}
</Text>
<Text style={[t.atoms.text, a.text_sm, a.leading_snug]}>
src/components/moderation/ReportDialog/index.tsx
+6 -6
View File
@@ -69,7 +69,7 @@ function Invalid() {
const {_} = useLingui()
return (
<Dialog.ScrollableInner label={_(msg`Report dialog`)}>
<Text style={[a.font_heavy, a.text_xl, a.leading_snug, a.pb_xs]}>
<Text style={[a.font_bold, a.text_xl, a.leading_snug, a.pb_xs]}>
<Trans>Invalid report subject</Trans>
</Text>
<Text style={[a.text_md, a.leading_snug]}>
@@ -393,7 +393,7 @@ function Inner(props: ReportDialogProps) {
<Text style={[a.leading_snug, a.pb_xs]}>
<Trans>
Your report will be sent to{' '}
<Text style={[a.font_bold, a.leading_snug]}>
<Text style={[a.font_semi_bold, a.leading_snug]}>
{state.selectedLabeler?.creator.displayName}
</Text>
.
@@ -529,7 +529,7 @@ function StepTitle({
) : (
<Text
style={[
a.font_heavy,
a.font_bold,
a.text_center,
t.atoms.text,
{
@@ -552,7 +552,7 @@ function StepTitle({
<Text
style={[
a.flex_1,
a.font_heavy,
a.font_bold,
a.text_lg,
a.leading_snug,
active ? t.atoms.text : t.atoms.text_contrast_medium,
@@ -598,7 +598,7 @@ function OptionCard({
? [t.atoms.border_contrast_high]
: [t.atoms.border_contrast_low],
]}>
<Text style={[a.text_md, a.font_bold, a.leading_snug]}>
<Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
{option.title}
</Text>
<Text
@@ -670,7 +670,7 @@ function LabelerCard({
avatar={labeler.creator.avatar}
/>
<View style={[a.flex_1]}>
<Text style={[a.text_md, a.font_bold, a.leading_snug]}>
<Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
{title}
</Text>
<Text
src/components/moderation/ScreenHider.tsx
+8 -2
View File
@@ -86,7 +86,13 @@ export function ScreenHider({
</View>
</View>
<Text
style={[a.text_4xl, a.font_bold, a.text_center, a.mb_md, t.atoms.text]}>
style={[
a.text_4xl,
a.font_semi_bold,
a.text_center,
a.mb_md,
t.atoms.text,
]}>
{isNoPwi ? (
<Trans>Sign-in Required</Trans>
) : (
@@ -112,7 +118,7 @@ export function ScreenHider({
<Text
style={[
a.text_lg,
a.font_bold,
a.font_semi_bold,
a.leading_snug,
t.atoms.text,
a.ml_xs,
src/components/verification/VerificationsDialog.tsx
+2 -2
View File
@@ -79,7 +79,7 @@ function Inner({
gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
]}>
<View style={[a.gap_sm, a.pb_lg]}>
<Text style={[a.text_2xl, a.font_bold, a.pr_4xl, a.leading_tight]}>
<Text style={[a.text_2xl, a.font_semi_bold, a.pr_4xl, a.leading_tight]}>
{label}
</Text>
<Text style={[a.text_md, a.leading_snug]}>
@@ -206,7 +206,7 @@ function VerifierCard({
<ProfileCard.AvatarPlaceholder />
<View style={[a.flex_1]}>
<Text
style={[a.text_md, a.font_bold, a.leading_snug]}
style={[a.text_md, a.font_semi_bold, a.leading_snug]}
numberOfLines={1}>
<Trans>Unknown verifier</Trans>
</Text>
src/components/verification/VerifierDialog.tsx
+2 -1
View File
@@ -89,7 +89,8 @@ function Inner({
</View>
<View style={[a.gap_sm]}>
<Text style={[a.text_2xl, a.font_bold, a.pr_4xl, a.leading_tight]}>
<Text
style={[a.text_2xl, a.font_semi_bold, a.pr_4xl, a.leading_tight]}>
{label}
</Text>
<Text style={[a.text_md, a.leading_snug]}>