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