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
@@ -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]}>
+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} />
+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>
+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>