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/view/com/auth/SplashScreen.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ export const SplashScreen = ({
<Text
style={[
a.text_md,
a.font_bold,
a.font_semi_bold,
t.atoms.text_contrast_medium,
a.text_center,
]}>
src/view/com/auth/SplashScreen.web.tsx
+5 -1
View File
@@ -95,7 +95,11 @@ export const SplashScreen = ({
)}
<Text
style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
style={[
a.text_md,
a.font_semi_bold,
t.atoms.text_contrast_medium,
]}>
<Trans>What's up?</Trans>
</Text>
</View>
src/view/com/auth/server-input/index.tsx
+1 -1
View File
@@ -126,7 +126,7 @@ function DialogInner({
accessibilityDescribedBy="dialog-description"
accessibilityLabelledBy="dialog-title">
<View style={[a.relative, a.gap_md, a.w_full]}>
<Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}>
<Text nativeID="dialog-title" style={[a.text_2xl, a.font_semi_bold]}>
<Trans>Choose your account provider</Trans>
</Text>
<ToggleButton.Group
src/view/com/composer/Composer.tsx
+2 -2
View File
@@ -1770,7 +1770,7 @@ function ErrorBanner({
style={[
{paddingLeft: 28},
a.text_xs,
a.font_bold,
a.font_semi_bold,
a.leading_snug,
t.atoms.text_contrast_low,
]}>
@@ -1863,7 +1863,7 @@ function VideoUploadToolbar({state}: {state: VideoState}) {
progress={wheelProgress}
/>
</Animated.View>
<NewText style={[a.font_bold, a.ml_sm]}>{text}</NewText>
<NewText style={[a.font_semi_bold, a.ml_sm]}>{text}</NewText>
</ToolbarWrapper>
)
}
src/view/com/composer/ComposerReplyTo.tsx
+1 -1
View File
@@ -101,7 +101,7 @@ export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
<View style={[a.flex_1, a.pl_md, a.pr_sm, a.gap_2xs]}>
<View style={[a.flex_row, a.align_center, a.pr_xs]}>
<Text
style={[a.font_bold, a.text_md, a.leading_snug, a.flex_shrink]}
style={[a.font_semi_bold, a.text_md, a.leading_snug, a.flex_shrink]}
numberOfLines={1}
emoji>
{sanitizeDisplayName(
src/view/com/composer/GifAltText.tsx
+3 -2
View File
@@ -95,7 +95,7 @@ export function GifAltTextDialogLoaded({
<Plus size="sm" fill={t.palette.white} />
)}
<Text
style={[a.font_bold, {color: t.palette.white}]}
style={[a.font_semi_bold, {color: t.palette.white}]}
accessible={false}>
<Trans>ALT</Trans>
</Text>
@@ -206,7 +206,8 @@ function AltTextInner({
</View>
{/* below the text input to force tab order */}
<View>
<Text style={[a.text_2xl, a.font_bold, a.leading_tight, a.pb_sm]}>
<Text
style={[a.text_2xl, a.font_semi_bold, a.leading_tight, a.pb_sm]}>
<Trans>Add alt text</Trans>
</Text>
<View style={[a.align_center]}>
src/view/com/composer/labels/LabelsBtn.tsx
+3 -3
View File
@@ -108,7 +108,7 @@ function DialogInner({
style={[{maxWidth: 500}, a.w_full]}>
<View style={[a.flex_1]}>
<View style={[a.gap_sm]}>
<Text style={[a.text_2xl, a.font_bold]}>
<Text style={[a.text_2xl, a.font_semi_bold]}>
<Trans>Add a content warning</Trans>
</Text>
<Text style={[t.atoms.text_contrast_medium, a.leading_snug]}>
@@ -123,7 +123,7 @@ function DialogInner({
<View>
<View
style={[a.flex_row, a.align_center, a.justify_between, a.pb_sm]}>
<Text style={[a.font_bold, a.text_lg]}>
<Text style={[a.font_semi_bold, a.text_lg]}>
<Trans>Adult Content</Trans>
</Text>
</View>
@@ -181,7 +181,7 @@ function DialogInner({
<View>
<View
style={[a.flex_row, a.align_center, a.justify_between, a.pb_sm]}>
<Text style={[a.font_bold, a.text_lg]}>
<Text style={[a.font_semi_bold, a.text_lg]}>
<Trans>Other</Trans>
</Text>
</View>
src/view/com/composer/photos/ImageAltTextDialog.tsx
+1 -1
View File
@@ -89,7 +89,7 @@ const ImageAltTextInner = ({
<Dialog.Close />
<View>
<Text style={[a.text_2xl, a.font_bold, a.leading_tight, a.pb_sm]}>
<Text style={[a.text_2xl, a.font_semi_bold, a.leading_tight, a.pb_sm]}>
<Trans>Add alt text</Trans>
</Text>
src/view/com/composer/select-language/PostLanguageSelect.tsx
+1 -1
View File
@@ -111,7 +111,7 @@ function LanguageBtn(props: Omit<ButtonProps, 'label' | 'children'>) {
<Text
style={[
{color},
a.font_bold,
a.font_semi_bold,
a.text_sm,
a.leading_snug,
{maxWidth: 100},
src/view/com/composer/select-language/PostLanguageSelectDialog.tsx
+2 -2
View File
@@ -155,7 +155,7 @@ export function DialogInner() {
style={[
t.atoms.text,
a.text_left,
a.font_bold,
a.font_semi_bold,
a.text_xl,
a.mb_sm,
]}>
@@ -240,7 +240,7 @@ export function DialogInner() {
style={[
a.px_0,
a.py_md,
a.font_bold,
a.font_semi_bold,
a.text_xs,
t.atoms.text_contrast_low,
a.pt_3xl,
src/view/com/composer/select-language/SuggestedLanguage.tsx
+1 -1
View File
@@ -88,7 +88,7 @@ export function SuggestedLanguage({
<Text style={[a.flex_1]}>
<Trans>
Are you writing in{' '}
<Text style={[a.font_bold]}>{suggestedLanguageName}</Text>?
<Text style={[a.font_semi_bold]}>{suggestedLanguageName}</Text>?
</Trans>
</Text>
src/view/com/composer/text-input/TextInput.web.tsx
+1 -1
View File
@@ -353,7 +353,7 @@ export function TextInput({
<Text
style={[
a.text_lg,
a.font_bold,
a.font_semi_bold,
t.atoms.text_contrast_medium,
t.atoms.border_contrast_high,
styles.dropText,
src/view/com/composer/text-input/mobile/Autocomplete.tsx
+1 -1
View File
@@ -110,7 +110,7 @@ function AutocompleteProfileCard({
platform({ios: 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]}
emoji
numberOfLines={1}>
{displayName}
src/view/com/composer/videos/SubtitleDialog.tsx
+3 -3
View File
@@ -97,7 +97,7 @@ function SubtitleDialogInner({
return (
<Dialog.ScrollableInner label={_(msg`Video settings`)}>
<View style={a.gap_md}>
<Text style={[a.text_xl, a.font_bold, a.leading_tight]}>
<Text style={[a.text_xl, a.font_semi_bold, a.leading_tight]}>
<Trans>Alt text</Trans>
</Text>
<TextField.Root>
@@ -128,7 +128,7 @@ function SubtitleDialogInner({
a.my_md,
]}
/>
<Text style={[a.text_xl, a.font_bold, a.leading_tight]}>
<Text style={[a.text_xl, a.font_semi_bold, a.leading_tight]}>
<Trans>Captions (.vtt)</Trans>
</Text>
<SubtitleFilePicker
@@ -235,7 +235,7 @@ function SubtitleFileRow({
<PageTextIcon style={[t.atoms.text, a.flex_shrink_0]} size="sm" />
)}
<Text
style={[a.flex_1, a.leading_snug, a.font_bold, a.mb_2xs]}
style={[a.flex_1, a.leading_snug, a.font_semi_bold, a.mb_2xs]}
numberOfLines={1}>
{file.name}
</Text>
src/view/com/feeds/FeedSourceCard.tsx
+2 -2
View File
@@ -139,7 +139,7 @@ export function FeedSourceCardLoaded({
<View style={[a.flex_1]}>
<Text
emoji
style={[a.text_sm, a.font_bold, a.leading_snug]}
style={[a.text_sm, a.font_semi_bold, a.leading_snug]}
numberOfLines={1}>
{feed.displayName}
</Text>
@@ -165,7 +165,7 @@ export function FeedSourceCardLoaded({
<Text
style={[
a.text_sm,
a.font_bold,
a.font_semi_bold,
t.atoms.text_contrast_medium,
a.leading_snug,
]}>
src/view/com/feeds/MissingFeed.tsx
+7 -5
View File
@@ -67,7 +67,7 @@ export function MissingFeed({
<View style={[a.flex_1]}>
<Text
emoji
style={[a.text_sm, a.font_bold, a.leading_snug, a.italic]}
style={[a.text_sm, a.font_semi_bold, a.leading_snug, a.italic]}
numberOfLines={1}>
{type === 'feed' ? (
<Trans>Feed unavailable</Trans>
@@ -128,7 +128,7 @@ function DialogInner({
}
style={web({maxWidth: 500})}>
<View style={[a.gap_sm]}>
<Text style={[a.font_heavy, a.text_2xl]}>
<Text style={[a.font_bold, a.text_2xl]}>
{type === 'feed' ? (
<Trans>Could not connect to feed service</Trans>
) : (
@@ -147,7 +147,7 @@ function DialogInner({
)}
</Text>
<Divider style={[a.my_md]} />
<Text style={[a.font_bold, t.atoms.text_contrast_high]}>
<Text style={[a.font_semi_bold, t.atoms.text_contrast_high]}>
{type === 'feed' ? (
<Trans>Feed creator</Trans>
) : (
@@ -184,7 +184,8 @@ function DialogInner({
)}
{type === 'feed' && (
<>
<Text style={[a.font_bold, t.atoms.text_contrast_high, a.mt_md]}>
<Text
style={[a.font_semi_bold, t.atoms.text_contrast_high, a.mt_md]}>
<Trans>Feed identifier</Trans>
</Text>
<Text style={[a.text_md, t.atoms.text_contrast_high, a.italic]}>
@@ -194,7 +195,8 @@ function DialogInner({
)}
{error instanceof Error && (
<>
<Text style={[a.font_bold, t.atoms.text_contrast_high, a.mt_md]}>
<Text
style={[a.font_semi_bold, t.atoms.text_contrast_high, a.mt_md]}>
<Trans>Error message</Trans>
</Text>
<Text style={[a.text_md, t.atoms.text_contrast_high, a.italic]}>
src/view/com/notifications/NotificationFeedItem.tsx
+11 -11
View File
@@ -214,7 +214,7 @@ let NotificationFeedItem = ({
<ProfileHoverCard did={firstAuthor.profile.did} inline>
<InlineLinkText
key={firstAuthor.href}
style={[t.atoms.text, a.font_bold, a.text_md, a.leading_tight]}
style={[t.atoms.text, a.font_semi_bold, a.text_md, a.leading_tight]}
to={firstAuthor.href}
disableMismatchWarning
emoji
@@ -271,7 +271,7 @@ let NotificationFeedItem = ({
notificationContent = hasMultipleAuthors ? (
<Trans>
{firstAuthorLink} and{' '}
<Text style={[a.text_md, a.font_bold, a.leading_snug]}>
<Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
<Plural
value={additionalAuthorsCount}
one={`${formattedAuthorsCount} other`}
@@ -295,7 +295,7 @@ let NotificationFeedItem = ({
notificationContent = hasMultipleAuthors ? (
<Trans>
{firstAuthorLink} and{' '}
<Text style={[a.text_md, a.font_bold, a.leading_snug]}>
<Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
<Plural
value={additionalAuthorsCount}
one={`${formattedAuthorsCount} other`}
@@ -352,7 +352,7 @@ let NotificationFeedItem = ({
notificationContent = hasMultipleAuthors ? (
<Trans>
{firstAuthorLink} and{' '}
<Text style={[a.text_md, a.font_bold, a.leading_snug]}>
<Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
<Plural
value={additionalAuthorsCount}
one={`${formattedAuthorsCount} other`}
@@ -378,7 +378,7 @@ let NotificationFeedItem = ({
notificationContent = hasMultipleAuthors ? (
<Trans>
{firstAuthorLink} and{' '}
<Text style={[a.text_md, a.font_bold, a.leading_snug]}>
<Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
<Plural
value={additionalAuthorsCount}
one={`${formattedAuthorsCount} other`}
@@ -402,7 +402,7 @@ let NotificationFeedItem = ({
notificationContent = hasMultipleAuthors ? (
<Trans>
{firstAuthorLink} and{' '}
<Text style={[a.text_md, a.font_bold, a.leading_snug]}>
<Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
<Plural
value={additionalAuthorsCount}
one={`${formattedAuthorsCount} other`}
@@ -483,7 +483,7 @@ let NotificationFeedItem = ({
notificationContent = hasMultipleAuthors ? (
<Trans>
{firstAuthorLink} and{' '}
<Text style={[a.text_md, a.font_bold, a.leading_snug]}>
<Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
<Plural
value={additionalAuthorsCount}
one={`${formattedAuthorsCount} other`}
@@ -507,7 +507,7 @@ let NotificationFeedItem = ({
notificationContent = hasMultipleAuthors ? (
<Trans>
{firstAuthorLink} and{' '}
<Text style={[a.text_md, a.font_bold, a.leading_snug]}>
<Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
<Plural
value={additionalAuthorsCount}
one={`${formattedAuthorsCount} other`}
@@ -541,7 +541,7 @@ let NotificationFeedItem = ({
notificationContent = hasMultipleAuthors ? (
<Trans>
New posts from {firstAuthorLink} and{' '}
<Text style={[a.text_md, a.font_bold, a.leading_snug]}>
<Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
<Plural
value={additionalAuthorsCount}
one={`${formattedAuthorsCount} other`}
@@ -846,7 +846,7 @@ function CondensedAuthorsList({
{authors.length > MAX_AUTHORS ? (
<Text
style={[
a.font_bold,
a.font_semi_bold,
{paddingLeft: 6},
t.atoms.text_contrast_medium,
]}>
@@ -926,7 +926,7 @@ function ExpandedAuthorCard({author}: {author: Author}) {
emoji
style={[
a.text_md,
a.font_bold,
a.font_semi_bold,
a.leading_tight,
{maxWidth: '70%'},
]}>
src/view/com/pager/TabBar.tsx
+1 -1
View File
@@ -431,7 +431,7 @@ function TabBarItem({
<Text
emoji
testID={testID ? `${testID}-${item}` : undefined}
style={[styles.itemText, t.atoms.text, a.text_md, a.font_bold]}
style={[styles.itemText, t.atoms.text, a.text_md, a.font_semi_bold]}
onLayout={handleTextLayout}>
{item}
</Text>
src/view/com/pager/TabBar.web.tsx
+1 -1
View File
@@ -121,7 +121,7 @@ export function TabBar({
styles.itemText,
selected ? t.atoms.text : t.atoms.text_contrast_medium,
a.text_md,
a.font_bold,
a.font_semi_bold,
{lineHeight: 20},
]}>
{item}
src/view/com/posts/FeedShutdownMsg.tsx
+1 -1
View File
@@ -92,7 +92,7 @@ export function FeedShutdownMsg({feedUri}: {feedUri: string}) {
t.atoms.border_contrast_low,
a.border_t,
]}>
<Text style={[a.text_5xl, a.font_bold, t.atoms.text, a.text_center]}>
<Text style={[a.text_5xl, a.font_semi_bold, t.atoms.text, a.text_center]}>
:(
</Text>
<Text style={[a.text_md, a.leading_snug, t.atoms.text, a.text_center]}>
src/view/com/util/PostMeta.tsx
+1 -1
View File
@@ -92,7 +92,7 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
onPress={onBeforePressAuthor}
style={[
a.text_md,
a.font_bold,
a.font_semi_bold,
t.atoms.text,
a.leading_tight,
a.flex_shrink_0,
src/view/com/util/error/ErrorScreen.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ export function ErrorScreen({
/>
</View>
</View>
<Text style={[a.text_center, a.font_heavy, a.text_2xl, a.mb_md]}>
<Text style={[a.text_center, a.font_bold, a.text_2xl, a.mb_md]}>
{title}
</Text>
<Text style={[a.text_center, a.text_md, a.mb_xl]}>{message}</Text>
src/view/com/util/images/AutoSizedImage.tsx
+1 -2
View File
@@ -185,8 +185,7 @@ export function AutoSizedImage({
},
],
]}>
<Text
style={[a.font_heavy, largeAlt ? a.text_xs : {fontSize: 8}]}>
<Text style={[a.font_bold, largeAlt ? a.text_xs : {fontSize: 8}]}>
ALT
</Text>
</View>
src/view/com/util/images/Gallery.tsx
+1 -1
View File
@@ -109,7 +109,7 @@ export function GalleryItem({
],
]}>
<Text
style={[a.font_heavy, largeAltBadge ? a.text_xs : {fontSize: 8}]}>
style={[a.font_bold, largeAltBadge ? a.text_xs : {fontSize: 8}]}>
ALT
</Text>
</View>