+3 -3

src/alf/atoms.ts

··· 276 276 letterSpacing: tokens.TRACKING, 277 277 }, 278 278 font_normal: { 279 279 - fontWeight: tokens.fontWeight.regular, 279 279 + fontWeight: tokens.fontWeight.normal, 280 280 }, 281 281 font_bold: { 282 282 - fontWeight: tokens.fontWeight.semibold, 282 282 + fontWeight: tokens.fontWeight.bold, 283 283 }, 284 284 font_heavy: { 285 285 - fontWeight: tokens.fontWeight.extrabold, 285 285 + fontWeight: tokens.fontWeight.heavy, 286 286 }, 287 287 italic: { 288 288 fontStyle: 'italic',

+5 -8

src/alf/tokens.ts

··· 1 1 - import {Platform} from 'react-native' 1 1 + import {isAndroid} from '#/platform/detection' 2 2 3 3 - export const TRACKING = Platform.OS === 'android' ? 0.1 : 0 3 3 + export const TRACKING = isAndroid ? 0.1 : 0 4 4 5 5 export const color = { 6 6 temp_purple: 'rgb(105 0 255)', ··· 51 51 * These correspond to Inter font files we actually load. 52 52 */ 53 53 export const fontWeight = { 54 54 - regular: '400', 55 55 - // medium: '500', 56 56 - semibold: '600', 57 57 - // bold: '700', 58 58 - extrabold: '800', 59 59 - // black: '900', 54 54 + normal: '400', 55 55 + bold: isAndroid ? '700' : '600', 56 56 + heavy: isAndroid ? '900' : '800', 60 57 } as const 61 58 62 59 export const gradients = {

+40 -39

src/lib/themes.ts

··· 2 2 3 3 import {tokens} from '#/alf' 4 4 import {darkPalette, dimPalette, lightPalette} from '#/alf/themes' 5 5 + import {fontWeight} from '#/alf/tokens' 5 6 import {colors} from './styles' 6 7 import type {Theme} from './ThemeContext' 7 8 ··· 90 91 '2xl-thin': { 91 92 fontSize: 18, 92 93 letterSpacing: tokens.TRACKING, 93 93 - fontWeight: '400', 94 94 + fontWeight: fontWeight.normal, 94 95 }, 95 96 '2xl': { 96 97 fontSize: 18, 97 98 letterSpacing: tokens.TRACKING, 98 98 - fontWeight: '400', 99 99 + fontWeight: fontWeight.normal, 99 100 }, 100 101 '2xl-medium': { 101 102 fontSize: 18, 102 103 letterSpacing: tokens.TRACKING, 103 103 - fontWeight: '600', 104 104 + fontWeight: fontWeight.bold, 104 105 }, 105 106 '2xl-bold': { 106 107 fontSize: 18, 107 108 letterSpacing: tokens.TRACKING, 108 108 - fontWeight: '600', 109 109 + fontWeight: fontWeight.bold, 109 110 }, 110 111 '2xl-heavy': { 111 112 fontSize: 18, 112 113 letterSpacing: tokens.TRACKING, 113 113 - fontWeight: '800', 114 114 + fontWeight: fontWeight.heavy, 114 115 }, 115 116 'xl-thin': { 116 117 fontSize: 17, 117 118 letterSpacing: tokens.TRACKING, 118 118 - fontWeight: '400', 119 119 + fontWeight: fontWeight.normal, 119 120 }, 120 121 xl: { 121 122 fontSize: 17, 122 123 letterSpacing: tokens.TRACKING, 123 123 - fontWeight: '400', 124 124 + fontWeight: fontWeight.normal, 124 125 }, 125 126 'xl-medium': { 126 127 fontSize: 17, 127 128 letterSpacing: tokens.TRACKING, 128 128 - fontWeight: '600', 129 129 + fontWeight: fontWeight.bold, 129 130 }, 130 131 'xl-bold': { 131 132 fontSize: 17, 132 133 letterSpacing: tokens.TRACKING, 133 133 - fontWeight: '600', 134 134 + fontWeight: fontWeight.bold, 134 135 }, 135 136 'xl-heavy': { 136 137 fontSize: 17, 137 138 letterSpacing: tokens.TRACKING, 138 138 - fontWeight: '800', 139 139 + fontWeight: fontWeight.heavy, 139 140 }, 140 141 'lg-thin': { 141 142 fontSize: 16, 142 143 letterSpacing: tokens.TRACKING, 143 143 - fontWeight: '400', 144 144 + fontWeight: fontWeight.normal, 144 145 }, 145 146 lg: { 146 147 fontSize: 16, 147 148 letterSpacing: tokens.TRACKING, 148 148 - fontWeight: '400', 149 149 + fontWeight: fontWeight.normal, 149 150 }, 150 151 'lg-medium': { 151 152 fontSize: 16, 152 153 letterSpacing: tokens.TRACKING, 153 153 - fontWeight: '600', 154 154 + fontWeight: fontWeight.bold, 154 155 }, 155 156 'lg-bold': { 156 157 fontSize: 16, 157 158 letterSpacing: tokens.TRACKING, 158 158 - fontWeight: '600', 159 159 + fontWeight: fontWeight.bold, 159 160 }, 160 161 'lg-heavy': { 161 162 fontSize: 16, 162 163 letterSpacing: tokens.TRACKING, 163 163 - fontWeight: '800', 164 164 + fontWeight: fontWeight.heavy, 164 165 }, 165 166 'md-thin': { 166 167 fontSize: 15, 167 168 letterSpacing: tokens.TRACKING, 168 168 - fontWeight: '400', 169 169 + fontWeight: fontWeight.normal, 169 170 }, 170 171 md: { 171 172 fontSize: 15, 172 173 letterSpacing: tokens.TRACKING, 173 173 - fontWeight: '400', 174 174 + fontWeight: fontWeight.normal, 174 175 }, 175 176 'md-medium': { 176 177 fontSize: 15, 177 178 letterSpacing: tokens.TRACKING, 178 178 - fontWeight: '600', 179 179 + fontWeight: fontWeight.bold, 179 180 }, 180 181 'md-bold': { 181 182 fontSize: 15, 182 183 letterSpacing: tokens.TRACKING, 183 183 - fontWeight: '600', 184 184 + fontWeight: fontWeight.bold, 184 185 }, 185 186 'md-heavy': { 186 187 fontSize: 15, 187 188 letterSpacing: tokens.TRACKING, 188 188 - fontWeight: '800', 189 189 + fontWeight: fontWeight.heavy, 189 190 }, 190 191 'sm-thin': { 191 192 fontSize: 14, 192 193 letterSpacing: tokens.TRACKING, 193 193 - fontWeight: '400', 194 194 + fontWeight: fontWeight.normal, 194 195 }, 195 196 sm: { 196 197 fontSize: 14, 197 198 letterSpacing: tokens.TRACKING, 198 198 - fontWeight: '400', 199 199 + fontWeight: fontWeight.normal, 199 200 }, 200 201 'sm-medium': { 201 202 fontSize: 14, 202 203 letterSpacing: tokens.TRACKING, 203 203 - fontWeight: '600', 204 204 + fontWeight: fontWeight.bold, 204 205 }, 205 206 'sm-bold': { 206 207 fontSize: 14, 207 208 letterSpacing: tokens.TRACKING, 208 208 - fontWeight: '600', 209 209 + fontWeight: fontWeight.bold, 209 210 }, 210 211 'sm-heavy': { 211 212 fontSize: 14, 212 213 letterSpacing: tokens.TRACKING, 213 213 - fontWeight: '800', 214 214 + fontWeight: fontWeight.heavy, 214 215 }, 215 216 'xs-thin': { 216 217 fontSize: 13, 217 218 letterSpacing: tokens.TRACKING, 218 218 - fontWeight: '400', 219 219 + fontWeight: fontWeight.normal, 219 220 }, 220 221 xs: { 221 222 fontSize: 13, 222 223 letterSpacing: tokens.TRACKING, 223 223 - fontWeight: '400', 224 224 + fontWeight: fontWeight.normal, 224 225 }, 225 226 'xs-medium': { 226 227 fontSize: 13, 227 228 letterSpacing: tokens.TRACKING, 228 228 - fontWeight: '600', 229 229 + fontWeight: fontWeight.bold, 229 230 }, 230 231 'xs-bold': { 231 232 fontSize: 13, 232 233 letterSpacing: tokens.TRACKING, 233 233 - fontWeight: '600', 234 234 + fontWeight: fontWeight.bold, 234 235 }, 235 236 'xs-heavy': { 236 237 fontSize: 13, 237 238 letterSpacing: tokens.TRACKING, 238 238 - fontWeight: '800', 239 239 + fontWeight: fontWeight.heavy, 239 240 }, 240 241 241 242 'title-2xl': { 242 243 fontSize: 34, 243 244 letterSpacing: tokens.TRACKING, 244 244 - fontWeight: '600', 245 245 + fontWeight: fontWeight.bold, 245 246 }, 246 247 'title-xl': { 247 248 fontSize: 28, 248 249 letterSpacing: tokens.TRACKING, 249 249 - fontWeight: '600', 250 250 + fontWeight: fontWeight.bold, 250 251 }, 251 252 'title-lg': { 252 253 fontSize: 22, 253 253 - fontWeight: '600', 254 254 + fontWeight: fontWeight.bold, 254 255 }, 255 256 title: { 256 256 - fontWeight: '600', 257 257 + fontWeight: fontWeight.bold, 257 258 fontSize: 20, 258 259 letterSpacing: tokens.TRACKING, 259 260 }, 260 261 'title-sm': { 261 261 - fontWeight: '600', 262 262 + fontWeight: fontWeight.bold, 262 263 fontSize: 17, 263 264 letterSpacing: tokens.TRACKING, 264 265 }, 265 266 'post-text': { 266 267 fontSize: 16, 267 268 letterSpacing: tokens.TRACKING, 268 268 - fontWeight: '400', 269 269 + fontWeight: fontWeight.normal, 269 270 }, 270 271 'post-text-lg': { 271 272 fontSize: 20, 272 273 letterSpacing: tokens.TRACKING, 273 273 - fontWeight: '400', 274 274 + fontWeight: fontWeight.normal, 274 275 }, 275 276 'button-lg': { 276 276 - fontWeight: '600', 277 277 + fontWeight: fontWeight.bold, 277 278 fontSize: 18, 278 279 letterSpacing: tokens.TRACKING, 279 280 }, 280 281 button: { 281 281 - fontWeight: '600', 282 282 + fontWeight: fontWeight.bold, 282 283 fontSize: 14, 283 284 letterSpacing: tokens.TRACKING, 284 285 },

+1 -1

src/screens/Profile/Header/DisplayName.tsx

··· 27 27 t.atoms.text, 28 28 gtMobile ? a.text_4xl : a.text_3xl, 29 29 a.self_start, 30 30 - {fontWeight: '600'}, 30 30 + a.font_heavy, 31 31 ]}> 32 32 {sanitizeDisplayName( 33 33 profile.displayName || sanitizeHandle(profile.handle),

-207

src/view/com/util/Html.tsx

··· 1 1 - import * as React from 'react' 2 2 - import {StyleSheet, View} from 'react-native' 3 3 - import { 4 4 - H1 as ExpoH1, 5 5 - H2 as ExpoH2, 6 6 - H3 as ExpoH3, 7 7 - H4 as ExpoH4, 8 8 - } from '@expo/html-elements' 9 9 - 10 10 - import {usePalette} from '#/lib/hooks/usePalette' 11 11 - import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 12 12 - import {useTheme} from '#/lib/ThemeContext' 13 13 - import {TextLink} from './Link' 14 14 - import {Text} from './text/Text' 15 15 - 16 16 - /** 17 17 - * These utilities are used to define long documents in an html-like 18 18 - * DSL. See for instance /locale/en/privacy-policy.tsx 19 19 - */ 20 20 - 21 21 - interface IsChildProps { 22 22 - isChild?: boolean 23 23 - } 24 24 - 25 25 - // type ReactNodeWithIsChildProp = 26 26 - // | React.ReactElement<IsChildProps> 27 27 - // | React.ReactElement<IsChildProps>[] 28 28 - // | React.ReactNode 29 29 - 30 30 - export function H1({children}: React.PropsWithChildren<{}>) { 31 31 - const styles = useStyles() 32 32 - const pal = usePalette('default') 33 33 - const typography = useTheme().typography['title-xl'] 34 34 - // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf 35 35 - return <ExpoH1 style={[typography, pal.text, styles.h1]}>{children}</ExpoH1> 36 36 - } 37 37 - 38 38 - export function H2({children}: React.PropsWithChildren<{}>) { 39 39 - const styles = useStyles() 40 40 - const pal = usePalette('default') 41 41 - const typography = useTheme().typography['title-lg'] 42 42 - // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf 43 43 - return <ExpoH2 style={[typography, pal.text, styles.h2]}>{children}</ExpoH2> 44 44 - } 45 45 - 46 46 - export function H3({children}: React.PropsWithChildren<{}>) { 47 47 - const styles = useStyles() 48 48 - const pal = usePalette('default') 49 49 - const typography = useTheme().typography.title 50 50 - // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf 51 51 - return <ExpoH3 style={[typography, pal.text, styles.h3]}>{children}</ExpoH3> 52 52 - } 53 53 - 54 54 - export function H4({children}: React.PropsWithChildren<{}>) { 55 55 - const styles = useStyles() 56 56 - const pal = usePalette('default') 57 57 - const typography = useTheme().typography['title-sm'] 58 58 - // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf 59 59 - return <ExpoH4 style={[typography, pal.text, styles.h4]}>{children}</ExpoH4> 60 60 - } 61 61 - 62 62 - export function P({children}: React.PropsWithChildren<{}>) { 63 63 - const styles = useStyles() 64 64 - const pal = usePalette('default') 65 65 - return ( 66 66 - <Text type="md" style={[pal.text, styles.p]}> 67 67 - {children} 68 68 - </Text> 69 69 - ) 70 70 - } 71 71 - 72 72 - export function UL({children, isChild}: React.PropsWithChildren<IsChildProps>) { 73 73 - const styles = useStyles() 74 74 - return ( 75 75 - <View style={[styles.ul, isChild && styles.ulChild]}> 76 76 - {markChildProps(children)} 77 77 - </View> 78 78 - ) 79 79 - } 80 80 - 81 81 - export function OL({children, isChild}: React.PropsWithChildren<IsChildProps>) { 82 82 - const styles = useStyles() 83 83 - return ( 84 84 - <View style={[styles.ol, isChild && styles.olChild]}> 85 85 - {markChildProps(children)} 86 86 - </View> 87 87 - ) 88 88 - } 89 89 - 90 90 - export function LI({ 91 91 - children, 92 92 - value, 93 93 - }: React.PropsWithChildren<{value?: string}>) { 94 94 - const styles = useStyles() 95 95 - const pal = usePalette('default') 96 96 - return ( 97 97 - <View style={styles.li}> 98 98 - <Text style={[pal.text, styles.liBullet]}>{value || <>&bull;</>}</Text> 99 99 - <Text type="md" style={[pal.text, styles.liText]}> 100 100 - {markChildProps(children)} 101 101 - </Text> 102 102 - </View> 103 103 - ) 104 104 - } 105 105 - 106 106 - export function A({children, href}: React.PropsWithChildren<{href: string}>) { 107 107 - const styles = useStyles() 108 108 - const pal = usePalette('default') 109 109 - return ( 110 110 - <TextLink 111 111 - type="md" 112 112 - style={[pal.link, styles.a]} 113 113 - text={children} 114 114 - href={href} 115 115 - /> 116 116 - ) 117 117 - } 118 118 - 119 119 - export function STRONG({children}: React.PropsWithChildren<{}>) { 120 120 - const pal = usePalette('default') 121 121 - return ( 122 122 - <Text type="md-medium" style={[pal.text]}> 123 123 - {children} 124 124 - </Text> 125 125 - ) 126 126 - } 127 127 - 128 128 - export function EM({children}: React.PropsWithChildren<{}>) { 129 129 - const styles = useStyles() 130 130 - const pal = usePalette('default') 131 131 - return ( 132 132 - <Text type="md" style={[pal.text, styles.em]}> 133 133 - {children} 134 134 - </Text> 135 135 - ) 136 136 - } 137 137 - 138 138 - function markChildProps(children: React.ReactNode) { 139 139 - return React.Children.map(children, child => { 140 140 - if (React.isValidElement(child)) { 141 141 - return React.cloneElement<IsChildProps>( 142 142 - child as React.ReactElement<IsChildProps>, 143 143 - {isChild: true}, 144 144 - ) 145 145 - } 146 146 - return child 147 147 - }) 148 148 - } 149 149 - 150 150 - const useStyles = () => { 151 151 - const {isDesktop} = useWebMediaQueries() 152 152 - return StyleSheet.create({ 153 153 - h1: { 154 154 - marginTop: 20, 155 155 - marginBottom: 10, 156 156 - letterSpacing: 0.8, 157 157 - }, 158 158 - h2: { 159 159 - marginTop: 20, 160 160 - marginBottom: 10, 161 161 - letterSpacing: 0.8, 162 162 - }, 163 163 - h3: { 164 164 - marginTop: 0, 165 165 - marginBottom: 10, 166 166 - }, 167 167 - h4: { 168 168 - marginTop: 0, 169 169 - marginBottom: 10, 170 170 - fontWeight: '600', 171 171 - }, 172 172 - p: { 173 173 - marginBottom: 10, 174 174 - }, 175 175 - ul: { 176 176 - marginBottom: 10, 177 177 - paddingLeft: isDesktop ? 18 : 4, 178 178 - }, 179 179 - ulChild: { 180 180 - paddingTop: 10, 181 181 - marginBottom: 0, 182 182 - }, 183 183 - ol: { 184 184 - marginBottom: 10, 185 185 - paddingLeft: isDesktop ? 18 : 4, 186 186 - }, 187 187 - olChild: { 188 188 - paddingTop: 10, 189 189 - marginBottom: 0, 190 190 - }, 191 191 - li: { 192 192 - flexDirection: 'row', 193 193 - paddingRight: 20, 194 194 - marginBottom: 10, 195 195 - }, 196 196 - liBullet: { 197 197 - paddingRight: 10, 198 198 - }, 199 199 - liText: {}, 200 200 - a: { 201 201 - marginBottom: 10, 202 202 - }, 203 203 - em: { 204 204 - fontStyle: 'italic', 205 205 - }, 206 206 - }) 207 207 - }

+3 -2

src/view/shell/Drawer.tsx

··· 590 590 ? styles.menuItemCountTens 591 591 : undefined, 592 592 ]}> 593 593 - <Text style={styles.menuItemCountLabel} numberOfLines={1}> 593 593 + <Text 594 594 + style={[styles.menuItemCountLabel, a.font_bold]} 595 595 + numberOfLines={1}> 594 596 {count} 595 597 </Text> 596 598 </View> ··· 666 668 }, 667 669 menuItemCountLabel: { 668 670 fontSize: 12, 669 669 - fontWeight: '600', 670 671 fontVariant: ['tabular-nums'], 671 672 color: colors.white, 672 673 },