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
@@ -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>
)}