Skip to content

Commit

Permalink
Font tweaks (#5597)
Browse files Browse the repository at this point in the history 
* Increase fontWeight on android

* Use atoms for a couple stray fontWeights

* Rm unused file
  • Loading branch information
@estrattonbailey
estrattonbailey authored Oct 4, 2024
1 parent eb3b01d commit ce53b3a
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 260 deletions.
6 changes: 3 additions & 3 deletions src/alf/atoms.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,13 +276,13 @@ export const atoms = {
letterSpacing: tokens.TRACKING,
},
font_normal: {
fontWeight: tokens.fontWeight.regular,
fontWeight: tokens.fontWeight.normal,
},
font_bold: {
fontWeight: tokens.fontWeight.semibold,
fontWeight: tokens.fontWeight.bold,
},
font_heavy: {
fontWeight: tokens.fontWeight.extrabold,
fontWeight: tokens.fontWeight.heavy,
},
italic: {
fontStyle: 'italic',
Expand Down
13 changes: 5 additions & 8 deletions src/alf/tokens.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {Platform} from 'react-native'
import {isAndroid} from '#/platform/detection'

export const TRACKING = Platform.OS === 'android' ? 0.1 : 0
export const TRACKING = isAndroid ? 0.1 : 0

export const color = {
temp_purple: 'rgb(105 0 255)',
Expand Down Expand Up @@ -51,12 +51,9 @@ export const borderRadius = {
* These correspond to Inter font files we actually load.
*/
export const fontWeight = {
regular: '400',
// medium: '500',
semibold: '600',
// bold: '700',
extrabold: '800',
// black: '900',
normal: '400',
bold: isAndroid ? '700' : '600',
heavy: isAndroid ? '900' : '800',
} as const

export const gradients = {
Expand Down
79 changes: 40 additions & 39 deletions src/lib/themes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {Platform} from 'react-native'

import {tokens} from '#/alf'
import {darkPalette, dimPalette, lightPalette} from '#/alf/themes'
import {fontWeight} from '#/alf/tokens'
import {colors} from './styles'
import type {Theme} from './ThemeContext'

Expand Down Expand Up @@ -90,195 +91,195 @@ export const defaultTheme: Theme = {
'2xl-thin': {
fontSize: 18,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
fontWeight: fontWeight.normal,
},
'2xl': {
fontSize: 18,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
fontWeight: fontWeight.normal,
},
'2xl-medium': {
fontSize: 18,
letterSpacing: tokens.TRACKING,
fontWeight: '600',
fontWeight: fontWeight.bold,
},
'2xl-bold': {
fontSize: 18,
letterSpacing: tokens.TRACKING,
fontWeight: '600',
fontWeight: fontWeight.bold,
},
'2xl-heavy': {
fontSize: 18,
letterSpacing: tokens.TRACKING,
fontWeight: '800',
fontWeight: fontWeight.heavy,
},
'xl-thin': {
fontSize: 17,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
fontWeight: fontWeight.normal,
},
xl: {
fontSize: 17,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
fontWeight: fontWeight.normal,
},
'xl-medium': {
fontSize: 17,
letterSpacing: tokens.TRACKING,
fontWeight: '600',
fontWeight: fontWeight.bold,
},
'xl-bold': {
fontSize: 17,
letterSpacing: tokens.TRACKING,
fontWeight: '600',
fontWeight: fontWeight.bold,
},
'xl-heavy': {
fontSize: 17,
letterSpacing: tokens.TRACKING,
fontWeight: '800',
fontWeight: fontWeight.heavy,
},
'lg-thin': {
fontSize: 16,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
fontWeight: fontWeight.normal,
},
lg: {
fontSize: 16,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
fontWeight: fontWeight.normal,
},
'lg-medium': {
fontSize: 16,
letterSpacing: tokens.TRACKING,
fontWeight: '600',
fontWeight: fontWeight.bold,
},
'lg-bold': {
fontSize: 16,
letterSpacing: tokens.TRACKING,
fontWeight: '600',
fontWeight: fontWeight.bold,
},
'lg-heavy': {
fontSize: 16,
letterSpacing: tokens.TRACKING,
fontWeight: '800',
fontWeight: fontWeight.heavy,
},
'md-thin': {
fontSize: 15,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
fontWeight: fontWeight.normal,
},
md: {
fontSize: 15,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
fontWeight: fontWeight.normal,
},
'md-medium': {
fontSize: 15,
letterSpacing: tokens.TRACKING,
fontWeight: '600',
fontWeight: fontWeight.bold,
},
'md-bold': {
fontSize: 15,
letterSpacing: tokens.TRACKING,
fontWeight: '600',
fontWeight: fontWeight.bold,
},
'md-heavy': {
fontSize: 15,
letterSpacing: tokens.TRACKING,
fontWeight: '800',
fontWeight: fontWeight.heavy,
},
'sm-thin': {
fontSize: 14,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
fontWeight: fontWeight.normal,
},
sm: {
fontSize: 14,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
fontWeight: fontWeight.normal,
},
'sm-medium': {
fontSize: 14,
letterSpacing: tokens.TRACKING,
fontWeight: '600',
fontWeight: fontWeight.bold,
},
'sm-bold': {
fontSize: 14,
letterSpacing: tokens.TRACKING,
fontWeight: '600',
fontWeight: fontWeight.bold,
},
'sm-heavy': {
fontSize: 14,
letterSpacing: tokens.TRACKING,
fontWeight: '800',
fontWeight: fontWeight.heavy,
},
'xs-thin': {
fontSize: 13,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
fontWeight: fontWeight.normal,
},
xs: {
fontSize: 13,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
fontWeight: fontWeight.normal,
},
'xs-medium': {
fontSize: 13,
letterSpacing: tokens.TRACKING,
fontWeight: '600',
fontWeight: fontWeight.bold,
},
'xs-bold': {
fontSize: 13,
letterSpacing: tokens.TRACKING,
fontWeight: '600',
fontWeight: fontWeight.bold,
},
'xs-heavy': {
fontSize: 13,
letterSpacing: tokens.TRACKING,
fontWeight: '800',
fontWeight: fontWeight.heavy,
},

'title-2xl': {
fontSize: 34,
letterSpacing: tokens.TRACKING,
fontWeight: '600',
fontWeight: fontWeight.bold,
},
'title-xl': {
fontSize: 28,
letterSpacing: tokens.TRACKING,
fontWeight: '600',
fontWeight: fontWeight.bold,
},
'title-lg': {
fontSize: 22,
fontWeight: '600',
fontWeight: fontWeight.bold,
},
title: {
fontWeight: '600',
fontWeight: fontWeight.bold,
fontSize: 20,
letterSpacing: tokens.TRACKING,
},
'title-sm': {
fontWeight: '600',
fontWeight: fontWeight.bold,
fontSize: 17,
letterSpacing: tokens.TRACKING,
},
'post-text': {
fontSize: 16,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
fontWeight: fontWeight.normal,
},
'post-text-lg': {
fontSize: 20,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
fontWeight: fontWeight.normal,
},
'button-lg': {
fontWeight: '600',
fontWeight: fontWeight.bold,
fontSize: 18,
letterSpacing: tokens.TRACKING,
},
button: {
fontWeight: '600',
fontWeight: fontWeight.bold,
fontSize: 14,
letterSpacing: tokens.TRACKING,
},
Expand Down
2 changes: 1 addition & 1 deletion src/screens/Profile/Header/DisplayName.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function ProfileHeaderDisplayName({
t.atoms.text,
gtMobile ? a.text_4xl : a.text_3xl,
a.self_start,
{fontWeight: '600'},
a.font_heavy,
]}>
{sanitizeDisplayName(
profile.displayName || sanitizeHandle(profile.handle),
Expand Down
Loading

0 comments on commit ce53b3a

Please sign in to comment.