acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Tweak small buttons (#8818)

Browse Source 
* set size=small buttons to `text_sm`

* change to `leading_snug`

* add gap to repost buttons

* Add medium-weight font, use for buttons (#8819)

* add medium weight inter

* add medium font to buttons

* Adjust bold weights

* Fix ref

---------

Co-authored-by: Eric Bailey <git@esb.lol>

* Align with designs

---------

Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
Samuel Newman
2025-08-12 02:04:45 +03:00
committed by GitHub
parent 17c5cec356
commit ef171e2892
8 changed files with 53 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.config.js
+4 -2
View File
@@ -251,10 +251,12 @@ module.exports = function (_config) {
// Android only
'./assets/fonts/inter/Inter-Regular.otf',
'./assets/fonts/inter/Inter-Italic.otf',
'./assets/fonts/inter/Inter-Medium.otf',
'./assets/fonts/inter/Inter-MediumItalic.otf',
'./assets/fonts/inter/Inter-SemiBold.otf',
'./assets/fonts/inter/Inter-SemiBoldItalic.otf',
'./assets/fonts/inter/Inter-ExtraBold.otf',
'./assets/fonts/inter/Inter-ExtraBoldItalic.otf',
'./assets/fonts/inter/Inter-Bold.otf',
'./assets/fonts/inter/Inter-BoldItalic.otf',
],
},
],
src/alf/atoms.ts
+3
View File
@@ -332,6 +332,9 @@ export const atoms = {
font_normal: {
fontWeight: tokens.fontWeight.normal,
},
font_medium: {
fontWeight: tokens.fontWeight.medium,
},
font_bold: {
fontWeight: tokens.fontWeight.bold,
},
src/alf/fonts.ts
+6 -6
View File
@@ -1,7 +1,7 @@
import {TextStyle} from 'react-native'
import {type TextStyle} from 'react-native'
import {isAndroid, isWeb} from '#/platform/detection'
import {Device, device} from '#/storage'
import {type Device, device} from '#/storage'
const WEB_FONT_FAMILIES = `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`
@@ -43,11 +43,11 @@ export function applyFonts(style: TextStyle, fontFamily: 'system' | 'theme') {
style.fontFamily =
{
400: 'Inter-Regular',
500: 'Inter-Regular',
500: 'Inter-Medium',
600: 'Inter-SemiBold',
700: 'Inter-SemiBold',
800: 'Inter-ExtraBold',
900: 'Inter-ExtraBold',
700: 'Inter-Bold',
800: 'Inter-Bold',
900: 'Inter-Bold',
}[String(style.fontWeight || '400')] || 'Inter-Regular'
if (style.fontStyle === 'italic') {
src/alf/tokens.ts
+1
View File
@@ -53,6 +53,7 @@ export const borderRadius = {
*/
export const fontWeight = {
normal: '400',
medium: '500',
bold: '600',
heavy: '800',
} as const
src/alf/util/unusedUseFonts.android.ts
+6 -4
View File
@@ -11,9 +11,11 @@ export function DO_NOT_USE() {
return useFonts({
'Inter-Regular': require('../../../assets/fonts/inter/Inter-Regular.otf'),
'Inter-Italic': require('../../../assets/fonts/inter/Inter-Italic.otf'),
'Inter-Bold': require('../../../assets/fonts/inter/Inter-SemiBold.otf'),
'Inter-BoldItalic': require('../../../assets/fonts/inter/Inter-SemiBoldItalic.otf'),
'Inter-Black': require('../../../assets/fonts/inter/Inter-ExtraBold.otf'),
'Inter-BlackItalic': require('../../../assets/fonts/inter/Inter-ExtraBoldItalic.otf'),
'Inter-Medium': require('../../../assets/fonts/inter/Inter-Medium.otf'),
'Inter-MediumItalic': require('../../../assets/fonts/inter/Inter-MediumItalic.otf'),
'Inter-SemiBold': require('../../../assets/fonts/inter/Inter-SemiBold.otf'),
'Inter-SemiBoldItalic': require('../../../assets/fonts/inter/Inter-SemiBoldItalic.otf'),
'Inter-Bold': require('../../../assets/fonts/inter/Inter-Bold.otf'),
'Inter-BoldItalic': require('../../../assets/fonts/inter/Inter-BoldItalic.otf'),
})
}
src/components/Button.tsx
+16 -16
View File
@@ -460,22 +460,22 @@ export const Button = React.forwardRef<View, ButtonProps>(
if (shape === 'default') {
if (size === 'large') {
baseStyles.push({
paddingVertical: 14,
paddingHorizontal: 24,
paddingVertical: 12,
paddingHorizontal: 25,
borderRadius: 10,
gap: 4,
gap: 3,
})
} else if (size === 'small') {
baseStyles.push({
paddingVertical: 8,
paddingHorizontal: 12,
paddingHorizontal: 13,
borderRadius: 8,
gap: 3,
})
} else if (size === 'tiny') {
baseStyles.push({
paddingVertical: 6,
paddingHorizontal: 8,
paddingVertical: 5,
paddingHorizontal: 9,
borderRadius: 6,
gap: 2,
})
@@ -487,9 +487,9 @@ export const Button = React.forwardRef<View, ButtonProps>(
*/
if (size === 'large') {
if (shape === 'round') {
baseStyles.push({height: 45, width: 45})
baseStyles.push({height: 44, width: 44})
} else {
baseStyles.push({height: 45, width: 45})
baseStyles.push({height: 44, width: 44})
}
} else if (size === 'small') {
if (shape === 'round') {
@@ -758,11 +758,11 @@ export function useSharedButtonTextStyles() {
}
if (size === 'large') {
baseStyles.push(a.text_md, a.leading_tight)
baseStyles.push(a.text_md, a.leading_snug, a.font_medium)
} else if (size === 'small') {
baseStyles.push(a.text_md, a.leading_tight)
baseStyles.push(a.text_sm, a.leading_snug, a.font_medium)
} else if (size === 'tiny') {
baseStyles.push(a.text_xs, a.leading_tight)
baseStyles.push(a.text_xs, a.leading_snug, a.font_medium)
}
return StyleSheet.flatten(baseStyles)
@@ -773,7 +773,7 @@ export function ButtonText({children, style, ...rest}: ButtonTextProps) {
const textStyles = useSharedButtonTextStyles()
return (
<Text {...rest} style={[a.font_bold, a.text_center, textStyles, style]}>
<Text {...rest} style={[a.text_center, textStyles, style]}>
{children}
</Text>
)
@@ -799,7 +799,7 @@ export function ButtonIcon({
const iconSizeShorthand =
size ??
(({
large: 'sm',
large: 'md',
small: 'sm',
tiny: 'xs',
}[buttonSize || 'small'] || 'sm') as Exclude<
@@ -814,7 +814,7 @@ export function ButtonIcon({
const iconSize = {
xs: 12,
sm: 16,
md: 20,
md: 18,
lg: 24,
xl: 28,
'2xl': 32,
@@ -825,9 +825,9 @@ export function ButtonIcon({
* don't increase button size
*/
const iconContainerSize = {
large: 17,
large: 20,
small: 17,
tiny: 13,
tiny: 15,
}[buttonSize || 'small']
return {
src/components/PostControls/RepostButton.tsx
+2 -2
View File
@@ -145,7 +145,7 @@ let RepostButtonDialogInner = ({
<View style={a.gap_xl}>
<View style={a.gap_xs}>
<Button
style={[a.justify_start, a.px_md]}
style={[a.justify_start, a.px_md, a.gap_sm]}
label={
isReposted
? _(msg`Remove repost`)
@@ -167,7 +167,7 @@ let RepostButtonDialogInner = ({
<Button
disabled={embeddingDisabled}
testID="quoteBtn"
style={[a.justify_start, a.px_md]}
style={[a.justify_start, a.px_md, a.gap_sm]}
label={
embeddingDisabled
? _(msg`Quote posts disabled`)
src/view/screens/Storybook/Typography.tsx
+15
View File
@@ -20,6 +20,21 @@ export function Typography() {
<Text style={[a.text_xs]}>atoms.text_xs</Text>
<Text style={[a.text_2xs]}>atoms.text_2xs</Text>
<Text style={[a.text_xl]}>This is regular text</Text>
<Text style={[a.text_xl, a.italic]}>This is regular italic text</Text>
<Text style={[a.text_xl, a.font_medium]}>This is medium text</Text>
<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]}>
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]}>
This is heavy italic text
</Text>
<RichText
// TODO: This only supports already resolved facets.
// Resolving them on read is bad anyway.