diff --git a/app.config.js b/app.config.js index 5cad620db9..b30cdf0fea 100644 --- a/app.config.js +++ b/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-ExtraBoldItalic.otf', + './assets/fonts/inter/Inter-Bold.otf', + './assets/fonts/inter/Inter-BoldItalic.otf', ], }, ], diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index fe449c6eeb..5b7c5c87ea 100644 --- a/src/alf/atoms.ts +++ b/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, }, diff --git a/src/alf/fonts.ts b/src/alf/fonts.ts index 7869167212..7366edef2a 100644 --- a/src/alf/fonts.ts +++ b/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', - 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') { diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts index 576aafe956..74cc160fc6 100644 --- a/src/alf/tokens.ts +++ b/src/alf/tokens.ts @@ -53,6 +53,7 @@ export const borderRadius = { */ export const fontWeight = { normal: '400', + medium: '500', bold: '600', heavy: '800', } as const diff --git a/src/alf/util/unusedUseFonts.android.ts b/src/alf/util/unusedUseFonts.android.ts index 083c9d4d65..467f3909fe 100644 --- a/src/alf/util/unusedUseFonts.android.ts +++ b/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-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'), }) } diff --git a/src/components/Button.tsx b/src/components/Button.tsx index d7bd9a2088..fd56a28cf2 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 { diff --git a/src/components/PostControls/RepostButton.tsx b/src/components/PostControls/RepostButton.tsx index 31438c6bd3..e09950b49c 100644 --- a/src/components/PostControls/RepostButton.tsx +++ b/src/components/PostControls/RepostButton.tsx @@ -145,7 +145,7 @@ let RepostButtonDialogInner = ({