Bluesky app fork with some witchin' additions 💫

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 <git@esb.lol>

* Align with designs

---------

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

authored by samuel.fm

Eric Bailey and committed by
GitHub
ef171e28 17c5cec3

+53 -30
+4 -2
app.config.js
··· 251 251 // Android only 252 252 './assets/fonts/inter/Inter-Regular.otf', 253 253 './assets/fonts/inter/Inter-Italic.otf', 254 + './assets/fonts/inter/Inter-Medium.otf', 255 + './assets/fonts/inter/Inter-MediumItalic.otf', 254 256 './assets/fonts/inter/Inter-SemiBold.otf', 255 257 './assets/fonts/inter/Inter-SemiBoldItalic.otf', 256 - './assets/fonts/inter/Inter-ExtraBold.otf', 257 - './assets/fonts/inter/Inter-ExtraBoldItalic.otf', 258 + './assets/fonts/inter/Inter-Bold.otf', 259 + './assets/fonts/inter/Inter-BoldItalic.otf', 258 260 ], 259 261 }, 260 262 ],
+3
src/alf/atoms.ts
··· 332 332 font_normal: { 333 333 fontWeight: tokens.fontWeight.normal, 334 334 }, 335 + font_medium: { 336 + fontWeight: tokens.fontWeight.medium, 337 + }, 335 338 font_bold: { 336 339 fontWeight: tokens.fontWeight.bold, 337 340 },
+6 -6
src/alf/fonts.ts
··· 1 - import {TextStyle} from 'react-native' 1 + import {type TextStyle} from 'react-native' 2 2 3 3 import {isAndroid, isWeb} from '#/platform/detection' 4 - import {Device, device} from '#/storage' 4 + import {type Device, device} from '#/storage' 5 5 6 6 const WEB_FONT_FAMILIES = `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"` 7 7 ··· 43 43 style.fontFamily = 44 44 { 45 45 400: 'Inter-Regular', 46 - 500: 'Inter-Regular', 46 + 500: 'Inter-Medium', 47 47 600: 'Inter-SemiBold', 48 - 700: 'Inter-SemiBold', 49 - 800: 'Inter-ExtraBold', 50 - 900: 'Inter-ExtraBold', 48 + 700: 'Inter-Bold', 49 + 800: 'Inter-Bold', 50 + 900: 'Inter-Bold', 51 51 }[String(style.fontWeight || '400')] || 'Inter-Regular' 52 52 53 53 if (style.fontStyle === 'italic') {
+1
src/alf/tokens.ts
··· 53 53 */ 54 54 export const fontWeight = { 55 55 normal: '400', 56 + medium: '500', 56 57 bold: '600', 57 58 heavy: '800', 58 59 } as const
+6 -4
src/alf/util/unusedUseFonts.android.ts
··· 11 11 return useFonts({ 12 12 'Inter-Regular': require('../../../assets/fonts/inter/Inter-Regular.otf'), 13 13 'Inter-Italic': require('../../../assets/fonts/inter/Inter-Italic.otf'), 14 - 'Inter-Bold': require('../../../assets/fonts/inter/Inter-SemiBold.otf'), 15 - 'Inter-BoldItalic': require('../../../assets/fonts/inter/Inter-SemiBoldItalic.otf'), 16 - 'Inter-Black': require('../../../assets/fonts/inter/Inter-ExtraBold.otf'), 17 - 'Inter-BlackItalic': require('../../../assets/fonts/inter/Inter-ExtraBoldItalic.otf'), 14 + 'Inter-Medium': require('../../../assets/fonts/inter/Inter-Medium.otf'), 15 + 'Inter-MediumItalic': require('../../../assets/fonts/inter/Inter-MediumItalic.otf'), 16 + 'Inter-SemiBold': require('../../../assets/fonts/inter/Inter-SemiBold.otf'), 17 + 'Inter-SemiBoldItalic': require('../../../assets/fonts/inter/Inter-SemiBoldItalic.otf'), 18 + 'Inter-Bold': require('../../../assets/fonts/inter/Inter-Bold.otf'), 19 + 'Inter-BoldItalic': require('../../../assets/fonts/inter/Inter-BoldItalic.otf'), 18 20 }) 19 21 }
+16 -16
src/components/Button.tsx
··· 460 460 if (shape === 'default') { 461 461 if (size === 'large') { 462 462 baseStyles.push({ 463 - paddingVertical: 14, 464 - paddingHorizontal: 24, 463 + paddingVertical: 12, 464 + paddingHorizontal: 25, 465 465 borderRadius: 10, 466 - gap: 4, 466 + gap: 3, 467 467 }) 468 468 } else if (size === 'small') { 469 469 baseStyles.push({ 470 470 paddingVertical: 8, 471 - paddingHorizontal: 12, 471 + paddingHorizontal: 13, 472 472 borderRadius: 8, 473 473 gap: 3, 474 474 }) 475 475 } else if (size === 'tiny') { 476 476 baseStyles.push({ 477 - paddingVertical: 6, 478 - paddingHorizontal: 8, 477 + paddingVertical: 5, 478 + paddingHorizontal: 9, 479 479 borderRadius: 6, 480 480 gap: 2, 481 481 }) ··· 487 487 */ 488 488 if (size === 'large') { 489 489 if (shape === 'round') { 490 - baseStyles.push({height: 45, width: 45}) 490 + baseStyles.push({height: 44, width: 44}) 491 491 } else { 492 - baseStyles.push({height: 45, width: 45}) 492 + baseStyles.push({height: 44, width: 44}) 493 493 } 494 494 } else if (size === 'small') { 495 495 if (shape === 'round') { ··· 758 758 } 759 759 760 760 if (size === 'large') { 761 - baseStyles.push(a.text_md, a.leading_tight) 761 + baseStyles.push(a.text_md, a.leading_snug, a.font_medium) 762 762 } else if (size === 'small') { 763 - baseStyles.push(a.text_md, a.leading_tight) 763 + baseStyles.push(a.text_sm, a.leading_snug, a.font_medium) 764 764 } else if (size === 'tiny') { 765 - baseStyles.push(a.text_xs, a.leading_tight) 765 + baseStyles.push(a.text_xs, a.leading_snug, a.font_medium) 766 766 } 767 767 768 768 return StyleSheet.flatten(baseStyles) ··· 773 773 const textStyles = useSharedButtonTextStyles() 774 774 775 775 return ( 776 - <Text {...rest} style={[a.font_bold, a.text_center, textStyles, style]}> 776 + <Text {...rest} style={[a.text_center, textStyles, style]}> 777 777 {children} 778 778 </Text> 779 779 ) ··· 799 799 const iconSizeShorthand = 800 800 size ?? 801 801 (({ 802 - large: 'sm', 802 + large: 'md', 803 803 small: 'sm', 804 804 tiny: 'xs', 805 805 }[buttonSize || 'small'] || 'sm') as Exclude< ··· 814 814 const iconSize = { 815 815 xs: 12, 816 816 sm: 16, 817 - md: 20, 817 + md: 18, 818 818 lg: 24, 819 819 xl: 28, 820 820 '2xl': 32, ··· 825 825 * don't increase button size 826 826 */ 827 827 const iconContainerSize = { 828 - large: 17, 828 + large: 20, 829 829 small: 17, 830 - tiny: 13, 830 + tiny: 15, 831 831 }[buttonSize || 'small'] 832 832 833 833 return {
+2 -2
src/components/PostControls/RepostButton.tsx
··· 145 145 <View style={a.gap_xl}> 146 146 <View style={a.gap_xs}> 147 147 <Button 148 - style={[a.justify_start, a.px_md]} 148 + style={[a.justify_start, a.px_md, a.gap_sm]} 149 149 label={ 150 150 isReposted 151 151 ? _(msg`Remove repost`) ··· 167 167 <Button 168 168 disabled={embeddingDisabled} 169 169 testID="quoteBtn" 170 - style={[a.justify_start, a.px_md]} 170 + style={[a.justify_start, a.px_md, a.gap_sm]} 171 171 label={ 172 172 embeddingDisabled 173 173 ? _(msg`Quote posts disabled`)
+15
src/view/screens/Storybook/Typography.tsx
··· 20 20 <Text style={[a.text_xs]}>atoms.text_xs</Text> 21 21 <Text style={[a.text_2xs]}>atoms.text_2xs</Text> 22 22 23 + <Text style={[a.text_xl]}>This is regular text</Text> 24 + <Text style={[a.text_xl, a.italic]}>This is regular italic text</Text> 25 + <Text style={[a.text_xl, a.font_medium]}>This is medium text</Text> 26 + <Text style={[a.text_xl, a.font_medium, a.italic]}> 27 + This is medium italic text 28 + </Text> 29 + <Text style={[a.text_xl, a.font_bold]}>This is bold text</Text> 30 + <Text style={[a.text_xl, a.font_bold, a.italic]}> 31 + This is bold italic text 32 + </Text> 33 + <Text style={[a.text_xl, a.font_heavy]}>This is heavy text</Text> 34 + <Text style={[a.text_xl, a.font_heavy, a.italic]}> 35 + This is heavy italic text 36 + </Text> 37 + 23 38 <RichText 24 39 // TODO: This only supports already resolved facets. 25 40 // Resolving them on read is bad anyway.