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/screens/DebugMod.tsx
+9 -7
View File
@@ -275,7 +275,7 @@ export const DebugModScreen = ({}: NativeStackScreenProps<
<moderationOptsOverrideContext.Provider value={modOpts}>
<ScrollView>
<CenteredView style={[t.atoms.bg, a.px_lg, a.py_lg]}>
<H1 style={[a.text_5xl, a.font_bold, a.pb_lg]}>
<H1 style={[a.text_5xl, a.font_semi_bold, a.pb_lg]}>
Moderation states
</H1>
@@ -396,7 +396,7 @@ export const DebugModScreen = ({}: NativeStackScreenProps<
<View style={[a.mt_md]}>
<Text
style={[
a.font_bold,
a.font_semi_bold,
a.text_xs,
t.atoms.text,
a.pb_sm,
@@ -438,7 +438,7 @@ export const DebugModScreen = ({}: NativeStackScreenProps<
<View>
<Text
style={[
a.font_bold,
a.font_semi_bold,
a.text_xs,
t.atoms.text,
a.pl_md,
@@ -596,7 +596,7 @@ export const DebugModScreen = ({}: NativeStackScreenProps<
function Heading({title, subtitle}: {title: string; subtitle?: string}) {
const t = useTheme()
return (
<H3 style={[a.text_3xl, a.font_bold, a.pb_md]}>
<H3 style={[a.text_3xl, a.font_semi_bold, a.pb_md]}>
{title}{' '}
{!!subtitle && (
<H3 style={[t.atoms.text_contrast_medium, a.text_lg]}>{subtitle}</H3>
@@ -627,7 +627,8 @@ function CustomLabelForm({
a.mt_md,
]}>
<View>
<Text style={[a.font_bold, a.text_xs, t.atoms.text, a.pl_md, a.pb_xs]}>
<Text
style={[a.font_semi_bold, a.text_xs, t.atoms.text, a.pl_md, a.pb_xs]}>
Blurs
</Text>
<View
@@ -662,7 +663,8 @@ function CustomLabelForm({
</View>
</View>
<View>
<Text style={[a.font_bold, a.text_xs, t.atoms.text, a.pl_md, a.pb_xs]}>
<Text
style={[a.font_semi_bold, a.text_xs, t.atoms.text, a.pl_md, a.pb_xs]}>
Severity
</Text>
<View
@@ -789,7 +791,7 @@ function ModerationUIView({
const ui = mod.ui(key as keyof ModerationBehavior)
return (
<View key={key} style={[a.flex_row, a.gap_md]}>
<Text style={[a.font_bold, {width: 100}]}>{key}</Text>
<Text style={[a.font_semi_bold, {width: 100}]}>{key}</Text>
<Flag v={ui.filter} label="Filter" />
<Flag v={ui.blur} label="Blur" />
<Flag v={ui.alert} label="Alert" />
src/view/screens/Feeds.tsx
+2 -2
View File
@@ -700,7 +700,7 @@ function FeedsSavedHeader() {
}>
<IconCircle icon={ListSparkle_Stroke2_Corner0_Rounded} size="lg" />
<View style={[a.flex_1, a.gap_xs]}>
<Text style={[a.flex_1, a.text_2xl, a.font_heavy, t.atoms.text]}>
<Text style={[a.flex_1, a.text_2xl, a.font_bold, t.atoms.text]}>
<Trans>My Feeds</Trans>
</Text>
<Text style={[t.atoms.text_contrast_high]}>
@@ -726,7 +726,7 @@ function FeedsAboutHeader() {
size="lg"
/>
<View style={[a.flex_1, a.gap_sm]}>
<Text style={[a.flex_1, a.text_2xl, a.font_heavy, t.atoms.text]}>
<Text style={[a.flex_1, a.text_2xl, a.font_bold, t.atoms.text]}>
<Trans>Discover New Feeds</Trans>
</Text>
<Text style={[t.atoms.text_contrast_high]}>
src/view/screens/Storybook/Buttons.tsx
+2 -2
View File
@@ -16,7 +16,7 @@ import {Text} from '#/components/Typography'
export function Buttons() {
return (
<View style={[a.gap_md]}>
<Text style={[a.font_heavy, a.text_5xl]}>Buttons</Text>
<Text style={[a.font_bold, a.text_5xl]}>Buttons</Text>
{[
'primary',
@@ -29,7 +29,7 @@ export function Buttons() {
<Fragment key={color}>
{['tiny', 'small', 'large'].map(size => (
<Fragment key={size}>
<Text style={[a.font_heavy, a.text_2xl]}>
<Text style={[a.font_bold, a.text_2xl]}>
color={color} size={size}
</Text>
<View style={[a.flex_row, a.align_start, a.gap_md]}>
src/view/screens/Storybook/Settings.tsx
+1 -1
View File
@@ -106,7 +106,7 @@ export function Settings() {
color={t.palette.primary_500}
/>
<SettingsList.ItemText
style={[{color: t.palette.primary_500}, a.font_bold]}>
style={[{color: t.palette.primary_500}, a.font_semi_bold]}>
Protect your account
</SettingsList.ItemText>
<SettingsList.Chevron color={t.palette.primary_500} />
src/view/screens/Storybook/Theming.tsx
+4 -4
View File
@@ -11,20 +11,20 @@ export function Theming() {
<View style={[t.atoms.bg, a.gap_lg, a.p_xl]}>
<Palette />
<Text style={[a.font_bold, a.pt_xl, a.px_md]}>theme.atoms.text</Text>
<Text style={[a.font_semi_bold, a.pt_xl, a.px_md]}>theme.atoms.text</Text>
<View style={[a.flex_1, t.atoms.border_contrast_high, a.border_t]} />
<Text style={[a.font_bold, t.atoms.text_contrast_high, a.px_md]}>
<Text style={[a.font_semi_bold, t.atoms.text_contrast_high, a.px_md]}>
theme.atoms.text_contrast_high
</Text>
<View style={[a.flex_1, t.atoms.border_contrast_medium, a.border_t]} />
<Text style={[a.font_bold, t.atoms.text_contrast_medium, a.px_md]}>
<Text style={[a.font_semi_bold, t.atoms.text_contrast_medium, a.px_md]}>
theme.atoms.text_contrast_medium
</Text>
<View style={[a.flex_1, t.atoms.border_contrast_low, a.border_t]} />
<Text style={[a.font_bold, t.atoms.text_contrast_low, a.px_md]}>
<Text style={[a.font_semi_bold, t.atoms.text_contrast_low, a.px_md]}>
theme.atoms.text_contrast_low
</Text>
src/view/screens/Storybook/Typography.tsx
+4 -4
View File
@@ -26,12 +26,12 @@ export function Typography() {
<Text style={[a.text_xl, a.font_medium, a.italic]}>
This is medium italic text
</Text>
<Text style={[a.text_xl, a.font_bold]}>This is bold text</Text>
<Text style={[a.text_xl, a.font_bold, a.italic]}>
<Text style={[a.text_xl, a.font_semi_bold]}>This is bold text</Text>
<Text style={[a.text_xl, a.font_semi_bold, a.italic]}>
This is bold italic text
</Text>
<Text style={[a.text_xl, a.font_heavy]}>This is heavy text</Text>
<Text style={[a.text_xl, a.font_heavy, a.italic]}>
<Text style={[a.text_xl, a.font_bold]}>This is heavy text</Text>
<Text style={[a.text_xl, a.font_bold, a.italic]}>
This is heavy italic text
</Text>