From ef171e289234c7439011b68a61e951ab88319d0b Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 12 Aug 2025 02:04:45 +0300 Subject: Tweak small buttons (#8818) * 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 * Align with designs --------- Co-authored-by: Eric Bailey --- src/components/Button.tsx | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) (limited to 'src/components/Button.tsx') diff --git a/src/components/Button.tsx b/src/components/Button.tsx index d7bd9a208..fd56a28cf 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -460,22 +460,22 @@ export const Button = React.forwardRef( 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( */ 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 ( - + {children} ) @@ -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 { -- cgit 1.4.1