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
+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>
)
}
+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(
+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]}>
+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>
@@ -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>
@@ -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},
@@ -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,
@@ -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>
@@ -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,
@@ -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}
@@ -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>