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:
@@ -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]}>
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user