1export const MOBILE_TYPOGRAPHY = {
2 micro: { fontSize: 11, lineHeight: 14 },
3 caption: { fontSize: 12, lineHeight: 16 },
4 label: { fontSize: 13, lineHeight: 17 },
5 footnote: { fontSize: 14, lineHeight: 19 },
6 body: { fontSize: 16, lineHeight: 23 },
7 headline: { fontSize: 18, lineHeight: 23 },
8 title: { fontSize: 21, lineHeight: 28 },
9 largeTitle: { fontSize: 26, lineHeight: 32 },
10 display: { fontSize: 30, lineHeight: 36 },
11} as const;
12
13export const MOBILE_CODE_SURFACE = {
14 rowHeight: 22,
15 gutterWidth: 46,
16 codePadding: 7,
17 textVerticalInset: 2,
18 fontSize: MOBILE_TYPOGRAPHY.caption.fontSize,
19 lineNumberFontSize: MOBILE_TYPOGRAPHY.micro.fontSize,
20} as const;
21
22/** Class names share the same scaled CSS variables as native text roles. */
23export const MOBILE_TEXT_CLASSES = {
24 micro: "text-3xs",
25 caption: "text-2xs",
26 label: "text-xs",
27 footnote: "text-sm",
28 body: "text-base",
29 headline: "text-lg",
30 title: "text-xl",
31 largeTitle: "text-2xl",
32 display: "text-3xl",
33} as const satisfies Record<keyof typeof MOBILE_TYPOGRAPHY, string>;