diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index d2e7ffc2ee..9f75d305ae 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -225,43 +225,43 @@ export const atoms = { }, text_2xs: { fontSize: tokens.fontSize._2xs, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, }, text_xs: { fontSize: tokens.fontSize.xs, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, }, text_sm: { fontSize: tokens.fontSize.sm, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, }, text_md: { fontSize: tokens.fontSize.md, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, }, text_lg: { fontSize: tokens.fontSize.lg, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, }, text_xl: { fontSize: tokens.fontSize.xl, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, }, text_2xl: { fontSize: tokens.fontSize._2xl, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, }, text_3xl: { fontSize: tokens.fontSize._3xl, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, }, text_4xl: { fontSize: tokens.fontSize._4xl, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, }, text_5xl: { fontSize: tokens.fontSize._5xl, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, }, leading_tight: { lineHeight: 1.15, @@ -273,10 +273,7 @@ export const atoms = { lineHeight: 1.5, }, tracking_normal: { - letterSpacing: 0, - }, - tracking_wide: { - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, }, font_normal: { fontWeight: tokens.fontWeight.normal, diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts index 0208945eeb..d43d2b67dd 100644 --- a/src/alf/tokens.ts +++ b/src/alf/tokens.ts @@ -1,3 +1,7 @@ +import {Platform} from 'react-native' + +export const TRACKING = Platform.OS === 'android' ? 0.1 : 0 + export const color = { temp_purple: 'rgb(105 0 255)', temp_purple_dark: 'rgb(83 0 202)', diff --git a/src/lib/themes.ts b/src/lib/themes.ts index 9590f16596..6b691a3fc1 100644 --- a/src/lib/themes.ts +++ b/src/lib/themes.ts @@ -1,5 +1,6 @@ import {Platform} from 'react-native' +import {tokens} from '#/alf' 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: tokens.TRACKING, fontWeight: '300', }, '2xl': { fontSize: 18, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '400', }, '2xl-medium': { fontSize: 18, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '500', }, '2xl-bold': { fontSize: 18, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '700', }, '2xl-heavy': { fontSize: 18, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '800', }, 'xl-thin': { fontSize: 17, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '300', }, xl: { fontSize: 17, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '400', }, 'xl-medium': { fontSize: 17, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '500', }, 'xl-bold': { fontSize: 17, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '700', }, 'xl-heavy': { fontSize: 17, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '800', }, 'lg-thin': { fontSize: 16, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '300', }, lg: { fontSize: 16, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '400', }, 'lg-medium': { fontSize: 16, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '500', }, 'lg-bold': { fontSize: 16, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '700', }, 'lg-heavy': { fontSize: 16, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '800', }, 'md-thin': { fontSize: 15, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '300', }, md: { fontSize: 15, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '400', }, 'md-medium': { fontSize: 15, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '500', }, 'md-bold': { fontSize: 15, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '700', }, 'md-heavy': { fontSize: 15, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '800', }, 'sm-thin': { fontSize: 14, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '300', }, sm: { fontSize: 14, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '400', }, 'sm-medium': { fontSize: 14, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '500', }, 'sm-bold': { fontSize: 14, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '700', }, 'sm-heavy': { fontSize: 14, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '800', }, 'xs-thin': { fontSize: 13, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '300', }, xs: { fontSize: 13, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '400', }, 'xs-medium': { fontSize: 13, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '500', }, 'xs-bold': { fontSize: 13, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '700', }, 'xs-heavy': { fontSize: 13, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '800', }, 'title-2xl': { fontSize: 34, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '500', }, 'title-xl': { fontSize: 28, - letterSpacing: 0.25, + letterSpacing: tokens.TRACKING, fontWeight: '500', }, 'title-lg': { @@ -254,32 +255,32 @@ export const defaultTheme: Theme = { title: { fontWeight: '500', fontSize: 20, - letterSpacing: 0.15, + letterSpacing: tokens.TRACKING, }, 'title-sm': { fontWeight: 'bold', fontSize: 17, - letterSpacing: 0.15, + letterSpacing: tokens.TRACKING, }, 'post-text': { fontSize: 16, - letterSpacing: 0.2, + letterSpacing: tokens.TRACKING, fontWeight: '400', }, 'post-text-lg': { fontSize: 20, - letterSpacing: 0.2, + letterSpacing: tokens.TRACKING, fontWeight: '400', }, 'button-lg': { fontWeight: '500', fontSize: 18, - letterSpacing: 0.5, + letterSpacing: tokens.TRACKING, }, button: { fontWeight: '500', fontSize: 14, - letterSpacing: 0.5, + letterSpacing: tokens.TRACKING, }, mono: { fontSize: 14,