esb.lol
Bluesky's "Application Layout Framework"
1import {type TextStyle} from 'react-native'
2
3import {isWeb} from '../platform'
4import * as tokens from '../tokens'
5
6/**
7 * Util to calculate lineHeight from a text size atom and a leading atom (which
8 * are unitless). On native, this will evaluate to a rounded pixel value. On
9 * web, it will be a unitless string.
10 *
11 * Example:
12 * `leading({
13 * fontSize: 15,
14 * lineHeight: 1.2
15 * })` // => { lineHeight: 17 }
16 */
17export function leading(textStyle: TextStyle): Pick<TextStyle, 'lineHeight'> {
18 const lineHeight = textStyle?.lineHeight || tokens.lineHeight.snug
19
20 if (isWeb) {
21 return {
22 lineHeight: String(lineHeight) as unknown as TextStyle['lineHeight'],
23 }
24 } else {
25 const size = textStyle?.fontSize || tokens.fontSize.sm
26 return {
27 lineHeight: Math.round(size * lineHeight),
28 }
29 }
30}