/** * THE TYPE RAMP — the one place the two curves are written down. * * `tokens.css` declares the ramp as `--lotics-text-*` / `--lotics-leading-*` / * `--lotics-tracking-*` and `Text` resolves it there; this module is the same * ramp as DATA, for everything that must MEASURE text rather than declare it * (auto-grow heights, compact-input widths, a chart's labels). CSS cannot read * TypeScript, so `tokens_agreement.test.ts` parses the stylesheet and fails when * a value disagrees with this table. Eliminate the duplication where you can; * test it where you cannot. * * LEADING: the body rungs carry PROSE leading — 14/24, ratio 1.71, exactly what * `.lotics-markdown` uses. The ladder tightens as it rises, which is the convention: * large type needs proportionally less leading, so the display rungs sit near * 1.2 and only the rungs carrying running text are generous. The cost is real * and deliberate — line-height sets the BOX height of even a single line, so * every label, value and control gained about 4px of line box. Density was * traded for rhythm. * * TRACKING: Inter's own dynamic-metrics curve, evaluated per rung — see * `TYPE_TRACKING`. Near zero at 12px and steepening as the type grows, which is * the shape the face is drawn for. It is derived, not chosen. * * Tracking is stated ONCE, in em, and is not repeated per breakpoint: an em * scales with the font size, so the same value is correct at both. Only the * sizes and their leading differ across the breakpoint. */ /** A rung's box, in px. */ export interface TypeRung { size: number; leading: number; } /** * The ramp below 768px. The display rungs are the ones that grow on a desktop; * body sits still. */ export declare const TYPE_RAMP_MOBILE: { readonly xs: { readonly size: 12; readonly leading: 18; }; readonly sm: { readonly size: 14; readonly leading: 24; }; readonly md: { readonly size: 16; readonly leading: 26; }; readonly lg: { readonly size: 18; readonly leading: 28; }; readonly xl: { readonly size: 22; readonly leading: 28; }; readonly xxl: { readonly size: 28; readonly leading: 34; }; readonly xxxl: { readonly size: 32; readonly leading: 38; }; }; /** The ramp at 768px and above. Breakpoint per `use_screen_size`. */ export declare const TYPE_RAMP_DESKTOP: { readonly xs: { readonly size: 12; readonly leading: 18; }; readonly sm: { readonly size: 14; readonly leading: 24; }; readonly md: { readonly size: 16; readonly leading: 26; }; readonly lg: { readonly size: 20; readonly leading: 30; }; readonly xl: { readonly size: 24; readonly leading: 32; }; readonly xxl: { readonly size: 32; readonly leading: 44; }; readonly xxxl: { readonly size: 48; readonly leading: 52; }; }; /** Tight leading below 768px. */ export declare const TYPE_LEADING_TIGHT_MOBILE: Record<"lg" | "md" | "sm" | "xl" | "xs" | "xxl" | "xxxl", number>; /** Tight leading at 768px and above. */ export declare const TYPE_LEADING_TIGHT_DESKTOP: Record<"lg" | "md" | "sm" | "xl" | "xs" | "xxl" | "xxxl", number>; /** * Tracking per rung, in em — INTER'S OWN dynamic metrics, not a house curve. * * Inter publishes the tracking it is drawn for as a function of size: * * tracking(z) = a + b · e^(c · z) a = -0.0223, b = 0.185, c = -0.1745 * * evaluated at each rung's base size and rounded to a thousandth. The values * below ARE that function; they are not tuned by eye and should not be. If a * screen reads too tight or too loose, the answer is a size or a leading change, * not a nudge here — the typeface's designer has already answered this question * for this typeface, and second-guessing it per-rung is how a ramp ends up with * seven independent opinions. * * The shape: near zero at 12px, steepening as the type grows, asymptotic to the * -0.0223 the face is drawn to at display sizes. `xs` lands at 0.000, which is * also the right answer for Vietnamese stacked diacritics (ự, ộ, ế, ệ) and for * Inter's `1`/`l`/`i` at 12px — the sizes where tightening does the most damage * are exactly the ones the curve leaves alone. * * One value per rung, not per breakpoint: an em already scales with the font * size, and the curve's difference across a rung's two sizes is under 0.002em. */ export declare const TYPE_TRACKING: { readonly xs: 0; readonly sm: -0.006; readonly md: -0.011; readonly lg: -0.014; readonly xl: -0.018; readonly xxl: -0.021; readonly xxxl: -0.022; }; /** The rungs, in ladder order. `TextSize` in `text.tsx` is this set. */ export type TypeRungName = keyof typeof TYPE_RAMP_MOBILE; /** * The em tracking of a rung as px at a given size — for a style surface with no * em unit (a canvas, a chart axis, a raw style object). * Rounded to a thousandth so the number stays readable in a snapshot; the * difference that discards is four orders of magnitude below a pixel. */ export declare function trackingPx(rung: TypeRungName, size: number): number;