diff options
| -rw-r--r-- | src/alf/atoms.ts | 6 | ||||
| -rw-r--r-- | src/alf/tokens.ts | 13 | ||||
| -rw-r--r-- | src/lib/themes.ts | 79 | ||||
| -rw-r--r-- | src/screens/Profile/Header/DisplayName.tsx | 2 | ||||
| -rw-r--r-- | src/view/com/util/Html.tsx | 207 | ||||
| -rw-r--r-- | src/view/shell/Drawer.tsx | 5 |
6 files changed, 52 insertions, 260 deletions
diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 2625beda2..ca4c14dc6 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -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', diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts index f3ac17e6a..9ea585ee7 100644 --- a/src/alf/tokens.ts +++ b/src/alf/tokens.ts @@ -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)', @@ -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 = { diff --git a/src/lib/themes.ts b/src/lib/themes.ts index eb11872fa..2aeec3139 100644 --- a/src/lib/themes.ts +++ b/src/lib/themes.ts @@ -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' @@ -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, }, diff --git a/src/screens/Profile/Header/DisplayName.tsx b/src/screens/Profile/Header/DisplayName.tsx index bcc56d7f6..6d4eea2eb 100644 --- a/src/screens/Profile/Header/DisplayName.tsx +++ b/src/screens/Profile/Header/DisplayName.tsx @@ -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), diff --git a/src/view/com/util/Html.tsx b/src/view/com/util/Html.tsx deleted file mode 100644 index f77fb1603..000000000 --- a/src/view/com/util/Html.tsx +++ /dev/null @@ -1,207 +0,0 @@ -import * as React from 'react' -import {StyleSheet, View} from 'react-native' -import { - H1 as ExpoH1, - H2 as ExpoH2, - H3 as ExpoH3, - H4 as ExpoH4, -} from '@expo/html-elements' - -import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {useTheme} from '#/lib/ThemeContext' -import {TextLink} from './Link' -import {Text} from './text/Text' - -/** - * These utilities are used to define long documents in an html-like - * DSL. See for instance /locale/en/privacy-policy.tsx - */ - -interface IsChildProps { - isChild?: boolean -} - -// type ReactNodeWithIsChildProp = -// | React.ReactElement<IsChildProps> -// | React.ReactElement<IsChildProps>[] -// | React.ReactNode - -export function H1({children}: React.PropsWithChildren<{}>) { - const styles = useStyles() - const pal = usePalette('default') - const typography = useTheme().typography['title-xl'] - // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf - return <ExpoH1 style={[typography, pal.text, styles.h1]}>{children}</ExpoH1> -} - -export function H2({children}: React.PropsWithChildren<{}>) { - const styles = useStyles() - const pal = usePalette('default') - const typography = useTheme().typography['title-lg'] - // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf - return <ExpoH2 style={[typography, pal.text, styles.h2]}>{children}</ExpoH2> -} - -export function H3({children}: React.PropsWithChildren<{}>) { - const styles = useStyles() - const pal = usePalette('default') - const typography = useTheme().typography.title - // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf - return <ExpoH3 style={[typography, pal.text, styles.h3]}>{children}</ExpoH3> -} - -export function H4({children}: React.PropsWithChildren<{}>) { - const styles = useStyles() - const pal = usePalette('default') - const typography = useTheme().typography['title-sm'] - // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf - return <ExpoH4 style={[typography, pal.text, styles.h4]}>{children}</ExpoH4> -} - -export function P({children}: React.PropsWithChildren<{}>) { - const styles = useStyles() - const pal = usePalette('default') - return ( - <Text type="md" style={[pal.text, styles.p]}> - {children} - </Text> - ) -} - -export function UL({children, isChild}: React.PropsWithChildren<IsChildProps>) { - const styles = useStyles() - return ( - <View style={[styles.ul, isChild && styles.ulChild]}> - {markChildProps(children)} - </View> - ) -} - -export function OL({children, isChild}: React.PropsWithChildren<IsChildProps>) { - const styles = useStyles() - return ( - <View style={[styles.ol, isChild && styles.olChild]}> - {markChildProps(children)} - </View> - ) -} - -export function LI({ - children, - value, -}: React.PropsWithChildren<{value?: string}>) { - const styles = useStyles() - const pal = usePalette('default') - return ( - <View style={styles.li}> - <Text style={[pal.text, styles.liBullet]}>{value || <>•</>}</Text> - <Text type="md" style={[pal.text, styles.liText]}> - {markChildProps(children)} - </Text> - </View> - ) -} - -export function A({children, href}: React.PropsWithChildren<{href: string}>) { - const styles = useStyles() - const pal = usePalette('default') - return ( - <TextLink - type="md" - style={[pal.link, styles.a]} - text={children} - href={href} - /> - ) -} - -export function STRONG({children}: React.PropsWithChildren<{}>) { - const pal = usePalette('default') - return ( - <Text type="md-medium" style={[pal.text]}> - {children} - </Text> - ) -} - -export function EM({children}: React.PropsWithChildren<{}>) { - const styles = useStyles() - const pal = usePalette('default') - return ( - <Text type="md" style={[pal.text, styles.em]}> - {children} - </Text> - ) -} - -function markChildProps(children: React.ReactNode) { - return React.Children.map(children, child => { - if (React.isValidElement(child)) { - return React.cloneElement<IsChildProps>( - child as React.ReactElement<IsChildProps>, - {isChild: true}, - ) - } - return child - }) -} - -const useStyles = () => { - const {isDesktop} = useWebMediaQueries() - return StyleSheet.create({ - h1: { - marginTop: 20, - marginBottom: 10, - letterSpacing: 0.8, - }, - h2: { - marginTop: 20, - marginBottom: 10, - letterSpacing: 0.8, - }, - h3: { - marginTop: 0, - marginBottom: 10, - }, - h4: { - marginTop: 0, - marginBottom: 10, - fontWeight: '600', - }, - p: { - marginBottom: 10, - }, - ul: { - marginBottom: 10, - paddingLeft: isDesktop ? 18 : 4, - }, - ulChild: { - paddingTop: 10, - marginBottom: 0, - }, - ol: { - marginBottom: 10, - paddingLeft: isDesktop ? 18 : 4, - }, - olChild: { - paddingTop: 10, - marginBottom: 0, - }, - li: { - flexDirection: 'row', - paddingRight: 20, - marginBottom: 10, - }, - liBullet: { - paddingRight: 10, - }, - liText: {}, - a: { - marginBottom: 10, - }, - em: { - fontStyle: 'italic', - }, - }) -} diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index ca2cbb3e0..4212b28af 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -590,7 +590,9 @@ function MenuItem({ ? styles.menuItemCountTens : undefined, ]}> - <Text style={styles.menuItemCountLabel} numberOfLines={1}> + <Text + style={[styles.menuItemCountLabel, a.font_bold]} + numberOfLines={1}> {count} </Text> </View> @@ -666,7 +668,6 @@ const styles = StyleSheet.create({ }, menuItemCountLabel: { fontSize: 12, - fontWeight: '600', fontVariant: ['tabular-nums'], color: colors.white, }, |