acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Drop font-size by 1px globally, adjust tracking globally

Browse Source
This commit is contained in:
Eric Bailey
2024-09-03 15:49:21 -05:00
parent ddda612c11
commit e577ae02fb
12 changed files with 98 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/alf/atoms.ts
+13 -14
View File
@@ -3,6 +3,8 @@ import {Platform, StyleSheet, ViewStyle} from 'react-native'
import * as tokens from '#/alf/tokens'
import {native, web} from '#/alf/util/platform'
export const DEFAULT_TRACKING = Platform.OS === 'android' ? 0.1 : 0
export const atoms = {
debug: {
borderColor: 'red',
@@ -225,43 +227,43 @@ export const atoms = {
},
text_2xs: {
fontSize: tokens.fontSize._2xs,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
},
text_xs: {
fontSize: tokens.fontSize.xs,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
},
text_sm: {
fontSize: tokens.fontSize.sm,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
},
text_md: {
fontSize: tokens.fontSize.md,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
},
text_lg: {
fontSize: tokens.fontSize.lg,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
},
text_xl: {
fontSize: tokens.fontSize.xl,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
},
text_2xl: {
fontSize: tokens.fontSize._2xl,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
},
text_3xl: {
fontSize: tokens.fontSize._3xl,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
},
text_4xl: {
fontSize: tokens.fontSize._4xl,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
},
text_5xl: {
fontSize: tokens.fontSize._5xl,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
},
leading_tight: {
lineHeight: 1.15,
@@ -273,10 +275,7 @@ export const atoms = {
lineHeight: 1.5,
},
tracking_normal: {
letterSpacing: 0,
},
tracking_wide: {
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
},
font_normal: {
fontWeight: tokens.fontWeight.normal,
src/alf/index.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import {createThemes, defaultTheme} from '#/alf/themes'
import {Theme, ThemeName} from '#/alf/types'
import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
export {atoms} from '#/alf/atoms'
export {atoms, DEFAULT_TRACKING} from '#/alf/atoms'
export * as tokens from '#/alf/tokens'
export * from '#/alf/types'
export * from '#/alf/util/flatten'
src/alf/tokens.ts
+10 -10
View File
@@ -17,16 +17,16 @@ export const space = {
} as const
export const fontSize = {
_2xs: 10,
xs: 12,
sm: 14,
md: 16,
lg: 18,
xl: 20,
_2xl: 22,
_3xl: 26,
_4xl: 32,
_5xl: 40,
_2xs: 9,
xs: 11,
sm: 13,
md: 15,
lg: 17,
xl: 19,
_2xl: 21,
_3xl: 25,
_4xl: 31,
_5xl: 39,
} as const
export const lineHeight = {
src/components/AppLanguageDropdown.web.tsx
+2 -2
View File
@@ -6,7 +6,7 @@ import {sanitizeAppLanguageSetting} from '#/locale/helpers'
import {APP_LANGUAGES} from '#/locale/languages'
import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
import {resetPostsFeedQueries} from '#/state/queries/post-feed'
import {atoms as a, useTheme} from '#/alf'
import {atoms as a, DEFAULT_TRACKING, useTheme} from '#/alf'
import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
import {Text} from '#/components/Typography'
@@ -63,7 +63,7 @@ export function AppLanguageDropdown() {
onChange={onChangeAppLanguage}
style={{
fontSize: a.text_sm.fontSize,
letterSpacing: a.text_sm.letterSpacing,
letterSpacing: DEFAULT_TRACKING,
cursor: 'pointer',
position: 'absolute',
inset: 0,
src/lib/themes.ts
+39 -38
View File
@@ -1,5 +1,6 @@
import {Platform} from 'react-native'
import {DEFAULT_TRACKING} from '#/alf/atoms'
import {darkPalette, dimPalette, lightPalette} from '#/alf/themes'
import {colors} from './styles'
import type {Theme} from './ThemeContext'
@@ -88,163 +89,163 @@ export const defaultTheme: Theme = {
typography: {
'2xl-thin': {
fontSize: 18,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '300',
},
'2xl': {
fontSize: 18,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '400',
},
'2xl-medium': {
fontSize: 18,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '500',
},
'2xl-bold': {
fontSize: 18,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '700',
},
'2xl-heavy': {
fontSize: 18,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '800',
},
'xl-thin': {
fontSize: 17,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '300',
},
xl: {
fontSize: 17,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '400',
},
'xl-medium': {
fontSize: 17,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '500',
},
'xl-bold': {
fontSize: 17,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '700',
},
'xl-heavy': {
fontSize: 17,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '800',
},
'lg-thin': {
fontSize: 16,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '300',
},
lg: {
fontSize: 16,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '400',
},
'lg-medium': {
fontSize: 16,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '500',
},
'lg-bold': {
fontSize: 16,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '700',
},
'lg-heavy': {
fontSize: 16,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '800',
},
'md-thin': {
fontSize: 15,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '300',
},
md: {
fontSize: 15,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '400',
},
'md-medium': {
fontSize: 15,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '500',
},
'md-bold': {
fontSize: 15,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '700',
},
'md-heavy': {
fontSize: 15,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '800',
},
'sm-thin': {
fontSize: 14,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '300',
},
sm: {
fontSize: 14,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '400',
},
'sm-medium': {
fontSize: 14,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '500',
},
'sm-bold': {
fontSize: 14,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '700',
},
'sm-heavy': {
fontSize: 14,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '800',
},
'xs-thin': {
fontSize: 13,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '300',
},
xs: {
fontSize: 13,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '400',
},
'xs-medium': {
fontSize: 13,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '500',
},
'xs-bold': {
fontSize: 13,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '700',
},
'xs-heavy': {
fontSize: 13,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '800',
},
'title-2xl': {
fontSize: 34,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '500',
},
'title-xl': {
fontSize: 28,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '500',
},
'title-lg': {
@@ -254,32 +255,32 @@ export const defaultTheme: Theme = {
title: {
fontWeight: '500',
fontSize: 20,
letterSpacing: 0.15,
letterSpacing: DEFAULT_TRACKING,
},
'title-sm': {
fontWeight: 'bold',
fontSize: 17,
letterSpacing: 0.15,
letterSpacing: DEFAULT_TRACKING,
},
'post-text': {
fontSize: 16,
letterSpacing: 0.2,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '400',
},
'post-text-lg': {
fontSize: 20,
letterSpacing: 0.2,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '400',
},
'button-lg': {
fontWeight: '500',
fontSize: 18,
letterSpacing: 0.5,
letterSpacing: DEFAULT_TRACKING,
},
button: {
fontWeight: '500',
fontSize: 14,
letterSpacing: 0.5,
letterSpacing: DEFAULT_TRACKING,
},
mono: {
fontSize: 14,
src/view/com/auth/util/TextInput.tsx
+6 -4
View File
@@ -1,9 +1,11 @@
import React, {ComponentProps} from 'react'
import {StyleSheet, TextInput as RNTextInput, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {IconProp} from '@fortawesome/fontawesome-svg-core'
import {usePalette} from 'lib/hooks/usePalette'
import {useTheme} from 'lib/ThemeContext'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {usePalette} from '#/lib/hooks/usePalette'
import {useTheme} from '#/lib/ThemeContext'
import {DEFAULT_TRACKING} from '#/alf'
interface Props extends Omit<ComponentProps<typeof RNTextInput>, 'onChange'> {
testID?: string
@@ -48,7 +50,7 @@ const styles = StyleSheet.create({
paddingVertical: 10,
paddingHorizontal: 10,
fontSize: 17,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '400',
borderRadius: 10,
},
src/view/com/composer/text-input/TextInput.tsx
+2 -1
View File
@@ -32,6 +32,7 @@ import {
suggestLinkCardUri,
} from 'view/com/composer/text-input/text-input-util'
import {Text} from 'view/com/util/text/Text'
import {DEFAULT_TRACKING} from '#/alf'
import {Autocomplete} from './mobile/Autocomplete'
export interface TextInputRef {
@@ -244,7 +245,7 @@ const styles = StyleSheet.create({
},
textInputFormatting: {
fontSize: 18,
letterSpacing: 0.2,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '400',
// This is broken on ios right now, so don't set it there.
lineHeight: isIOS ? undefined : 23.4, // 1.3*16
src/view/com/modals/AddAppPasswords.tsx
+2 -2
View File
@@ -20,7 +20,7 @@ import {
import {Button} from '#/view/com/util/forms/Button'
import {Text} from '#/view/com/util/text/Text'
import * as Toast from '#/view/com/util/Toast'
import {atoms as a} from '#/alf'
import {atoms as a, DEFAULT_TRACKING} from '#/alf'
import * as Toggle from '#/components/forms/Toggle'
export const snapPoints = ['90%']
@@ -269,7 +269,7 @@ const styles = StyleSheet.create({
paddingVertical: 10,
paddingHorizontal: 8,
fontSize: 17,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '400',
borderRadius: 10,
},
src/view/com/modals/ChangeHandle.tsx
+2 -1
View File
@@ -22,6 +22,7 @@ import {cleanError} from 'lib/strings/errors'
import {createFullHandle, makeValidHandle} from 'lib/strings/handles'
import {s} from 'lib/styles'
import {useTheme} from 'lib/ThemeContext'
import {DEFAULT_TRACKING} from '#/alf'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {Button} from '../util/forms/Button'
import {SelectableBtn} from '../util/forms/SelectableBtn'
@@ -573,7 +574,7 @@ const styles = StyleSheet.create({
paddingVertical: 10,
paddingHorizontal: 8,
fontSize: 17,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '400',
borderRadius: 10,
},
src/view/com/util/forms/DateInput.web.tsx
+5 -3
View File
@@ -1,8 +1,10 @@
import React, {useState, useCallback} from 'react'
import React, {useCallback, useState} from 'react'
import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
// @ts-ignore types not available -prf
import {unstable_createElement} from 'react-native-web'
import {usePalette} from 'lib/hooks/usePalette'
import {usePalette} from '#/lib/hooks/usePalette'
import {DEFAULT_TRACKING} from '#/alf'
interface Props {
testID?: string
@@ -67,7 +69,7 @@ const styles = StyleSheet.create({
paddingVertical: 10,
paddingHorizontal: 10,
fontSize: 17,
letterSpacing: 0.25,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '400',
borderRadius: 10,
borderWidth: 0,
src/view/screens/LanguageSettings.tsx
+7 -6
View File
@@ -22,6 +22,7 @@ import {s} from 'lib/styles'
import {Button} from 'view/com/util/forms/Button'
import {ViewHeader} from 'view/com/util/ViewHeader'
import {CenteredView} from 'view/com/util/Views'
import {DEFAULT_TRACKING} from '#/alf'
import {Text} from '../com/util/text/Text'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'LanguageSettings'>
@@ -117,7 +118,7 @@ export function LanguageSettingsScreen(_props: Props) {
backgroundColor: pal.viewLight.backgroundColor,
color: pal.text.color,
fontSize: 14,
letterSpacing: 0.5,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '500',
paddingHorizontal: 14,
paddingVertical: 8,
@@ -127,7 +128,7 @@ export function LanguageSettingsScreen(_props: Props) {
backgroundColor: pal.viewLight.backgroundColor,
color: pal.text.color,
fontSize: 14,
letterSpacing: 0.5,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '500',
paddingHorizontal: 14,
paddingVertical: 8,
@@ -146,7 +147,7 @@ export function LanguageSettingsScreen(_props: Props) {
color: pal.text.color,
fontSize: 14,
fontFamily: 'inherit',
letterSpacing: 0.5,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '500',
paddingHorizontal: 14,
paddingVertical: 8,
@@ -210,7 +211,7 @@ export function LanguageSettingsScreen(_props: Props) {
backgroundColor: pal.viewLight.backgroundColor,
color: pal.text.color,
fontSize: 14,
letterSpacing: 0.5,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '500',
paddingHorizontal: 14,
paddingVertical: 8,
@@ -220,7 +221,7 @@ export function LanguageSettingsScreen(_props: Props) {
backgroundColor: pal.viewLight.backgroundColor,
color: pal.text.color,
fontSize: 14,
letterSpacing: 0.5,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '500',
paddingHorizontal: 14,
paddingVertical: 8,
@@ -238,7 +239,7 @@ export function LanguageSettingsScreen(_props: Props) {
color: pal.text.color,
fontSize: 14,
fontFamily: 'inherit',
letterSpacing: 0.5,
letterSpacing: DEFAULT_TRACKING,
fontWeight: '500',
paddingHorizontal: 14,
paddingVertical: 8,
src/view/shell/desktop/Feeds.tsx
+9 -5
View File
@@ -4,13 +4,14 @@ import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation, useNavigationState} from '@react-navigation/native'
import {usePalette} from '#/lib/hooks/usePalette'
import {getCurrentRoute} from '#/lib/routes/helpers'
import {NavigationProp} from '#/lib/routes/types'
import {emitSoftReset} from '#/state/events'
import {usePinnedFeedsInfos} from '#/state/queries/feed'
import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
import {usePalette} from 'lib/hooks/usePalette'
import {getCurrentRoute} from 'lib/routes/helpers'
import {NavigationProp} from 'lib/routes/types'
import {TextLink} from 'view/com/util/Link'
import {TextLink} from '#/view/com/util/Link'
import {DEFAULT_TRACKING} from '#/alf'
export function DesktopFeeds() {
const pal = usePalette('default')
@@ -81,7 +82,10 @@ function FeedItem({
onPress={onPress}
style={[
current ? pal.text : pal.textLight,
{letterSpacing: 0.15, fontWeight: current ? '500' : 'normal'},
{
letterSpacing: DEFAULT_TRACKING,
fontWeight: current ? '500' : 'normal',
},
]}
/>
</View>