diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index d2e7ffc2ee..96f3f04c75 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -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, diff --git a/src/alf/index.tsx b/src/alf/index.tsx index 5fa7d3b1a1..0a6b6ec603 100644 --- a/src/alf/index.tsx +++ b/src/alf/index.tsx @@ -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' diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts index 0208945eeb..1d80268461 100644 --- a/src/alf/tokens.ts +++ b/src/alf/tokens.ts @@ -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 = { diff --git a/src/components/AppLanguageDropdown.web.tsx b/src/components/AppLanguageDropdown.web.tsx index a106d99663..ff9d543b08 100644 --- a/src/components/AppLanguageDropdown.web.tsx +++ b/src/components/AppLanguageDropdown.web.tsx @@ -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, diff --git a/src/lib/themes.ts b/src/lib/themes.ts index 9590f16596..91a34f0a74 100644 --- a/src/lib/themes.ts +++ b/src/lib/themes.ts @@ -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, diff --git a/src/view/com/auth/util/TextInput.tsx b/src/view/com/auth/util/TextInput.tsx index 38aff03849..f4ff013e44 100644 --- a/src/view/com/auth/util/TextInput.tsx +++ b/src/view/com/auth/util/TextInput.tsx @@ -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, '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, }, diff --git a/src/view/com/composer/text-input/TextInput.tsx b/src/view/com/composer/text-input/TextInput.tsx index f69c895693..9c5444e796 100644 --- a/src/view/com/composer/text-input/TextInput.tsx +++ b/src/view/com/composer/text-input/TextInput.tsx @@ -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 diff --git a/src/view/com/modals/AddAppPasswords.tsx b/src/view/com/modals/AddAppPasswords.tsx index f7991f59bf..04c86e2d73 100644 --- a/src/view/com/modals/AddAppPasswords.tsx +++ b/src/view/com/modals/AddAppPasswords.tsx @@ -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, }, diff --git a/src/view/com/modals/ChangeHandle.tsx b/src/view/com/modals/ChangeHandle.tsx index 54750acf2e..e3ab67a8b6 100644 --- a/src/view/com/modals/ChangeHandle.tsx +++ b/src/view/com/modals/ChangeHandle.tsx @@ -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, }, diff --git a/src/view/com/util/forms/DateInput.web.tsx b/src/view/com/util/forms/DateInput.web.tsx index 8d74f6dae2..077be40803 100644 --- a/src/view/com/util/forms/DateInput.web.tsx +++ b/src/view/com/util/forms/DateInput.web.tsx @@ -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, diff --git a/src/view/screens/LanguageSettings.tsx b/src/view/screens/LanguageSettings.tsx index 0f27db5229..01b1c99d88 100644 --- a/src/view/screens/LanguageSettings.tsx +++ b/src/view/screens/LanguageSettings.tsx @@ -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 @@ -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, diff --git a/src/view/shell/desktop/Feeds.tsx b/src/view/shell/desktop/Feeds.tsx index 72e34ac469..465bb126c8 100644 --- a/src/view/shell/desktop/Feeds.tsx +++ b/src/view/shell/desktop/Feeds.tsx @@ -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', + }, ]} />