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>

app.config.js

@@ -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-Bold.otf',
-              './assets/fonts/inter/Inter-ExtraBoldItalic.otf',
+              './assets/fonts/inter/Inter-BoldItalic.otf',
             ],
           },
         ],

src/alf/atoms.ts

@@ -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

@@ -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',
+          700: 'Inter-Bold',
-          800: 'Inter-ExtraBold',
+          800: 'Inter-Bold',
-          900: 'Inter-ExtraBold',
+          900: 'Inter-Bold',
         }[String(style.fontWeight || '400')] || 'Inter-Regular'
 
       if (style.fontStyle === 'italic') {

src/alf/tokens.ts

@@ -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

@@ -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-Medium': require('../../../assets/fonts/inter/Inter-Medium.otf'),
-    'Inter-BoldItalic': require('../../../assets/fonts/inter/Inter-SemiBoldItalic.otf'),
+    'Inter-MediumItalic': require('../../../assets/fonts/inter/Inter-MediumItalic.otf'),
-    'Inter-Black': require('../../../assets/fonts/inter/Inter-ExtraBold.otf'),
+    'Inter-SemiBold': require('../../../assets/fonts/inter/Inter-SemiBold.otf'),
-    'Inter-BlackItalic': require('../../../assets/fonts/inter/Inter-ExtraBoldItalic.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

@@ -460,22 +460,22 @@ export const Button = React.forwardRef<View, ButtonProps>(
       if (shape === 'default') {
         if (size === 'large') {
           baseStyles.push({
-            paddingVertical: 14,
+            paddingVertical: 12,
-            paddingHorizontal: 24,
+            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,
+            paddingVertical: 5,
-            paddingHorizontal: 8,
+            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

@@ -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

@@ -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.