/* Mirrors the MDDS design system ("MDDS · 01 Foundations (tokens & styles)", Figma). Do not edit by hand: change it in the DS and sync here. */ /* ========================================================================== MDDS — Semantic Typography Tokens (:root) The 18 text roles: display, heading, body, label, mono — plus link and italic Conventions: - Prefix: --md-text-* - Pure indirection. Every token here is a `var()` at a primitive; there is not one literal value in this file, and there must never be. A literal appearing here means the Figma collection has drifted. - A role defines family, size, line-height and tracking ONCE; only the weight hangs a level below. Consume these, not the primitives: the primitive ramps are unordered by design, and picking a line-height step by matching the font-size index gives the wrong box. - Mirrors the `semantic-typography` collection in "MDDS · 01 Foundations (tokens & styles)" (Figma), which is in turn 1:1 with the 50 text styles on the canvas. Two notes on shape, both of which are Figma limits rather than ours: - `paragraph-spacing` is not a CSS property. It is a Figma canvas field, and in code it is the gap between sibling blocks of running text — applied as margin, never as a declaration of that name (see utilities.css). Only `body` and `mono` have it, and it aliases into the SPACING ramp, not a typographic one, so the chain is two hops: --md-text-body-mn-paragraph-spacing → --md-spacing-3xs → --md-unit-5. Left unflattened on purpose: flattening would drop the layer that lets the whole system be respaced from one place. - `link` has no size axis. It inherits size, line-height and tracking from the text it sits in, so it only contributes weight and decoration. The canvas has three styles (link/lg, link/mn, link/sm) because a Figma text node cannot inherit — each is exactly body/{size}/regular plus the underline. In CSS one `.md-link` composed with a body role reproduces all three. - `italic` has no text style: Figma packs weight and italic into one string. It is an export token, read only by `.md-italic`. ========================================================================== */ :root { /* ═══════════════════════════════════════ DISPLAY ═══════════════════════════════════════ */ /* ── display · xl ── */ --md-text-display-xl-font-family: var(--md-font-family-sans); --md-text-display-xl-font-size: var(--md-font-size-14); --md-text-display-xl-line-height: var(--md-line-height-2); --md-text-display-xl-letter-spacing: var(--md-letter-spacing-1); --md-text-display-xl-semibold-font-weight: var(--md-font-weight-semibold); --md-text-display-xl-bold-font-weight: var(--md-font-weight-bold); /* ── display · lg ── */ --md-text-display-lg-font-family: var(--md-font-family-sans); --md-text-display-lg-font-size: var(--md-font-size-13); --md-text-display-lg-line-height: var(--md-line-height-3); --md-text-display-lg-letter-spacing: var(--md-letter-spacing-1); --md-text-display-lg-semibold-font-weight: var(--md-font-weight-semibold); --md-text-display-lg-bold-font-weight: var(--md-font-weight-bold); /* ── display · mn ── */ --md-text-display-mn-font-family: var(--md-font-family-sans); --md-text-display-mn-font-size: var(--md-font-size-12); --md-text-display-mn-line-height: var(--md-line-height-4); --md-text-display-mn-letter-spacing: var(--md-letter-spacing-2); --md-text-display-mn-semibold-font-weight: var(--md-font-weight-semibold); --md-text-display-mn-bold-font-weight: var(--md-font-weight-bold); /* ── display · sm ── */ --md-text-display-sm-font-family: var(--md-font-family-sans); --md-text-display-sm-font-size: var(--md-font-size-11); --md-text-display-sm-line-height: var(--md-line-height-5); --md-text-display-sm-letter-spacing: var(--md-letter-spacing-2); --md-text-display-sm-semibold-font-weight: var(--md-font-weight-semibold); --md-text-display-sm-bold-font-weight: var(--md-font-weight-bold); /* ═══════════════════════════════════════ HEADING ═══════════════════════════════════════ */ /* ── heading · xl ── */ --md-text-heading-xl-font-family: var(--md-font-family-sans); --md-text-heading-xl-font-size: var(--md-font-size-10); --md-text-heading-xl-line-height: var(--md-line-height-2); --md-text-heading-xl-letter-spacing: var(--md-letter-spacing-3); --md-text-heading-xl-regular-font-weight: var(--md-font-weight-regular); --md-text-heading-xl-semibold-font-weight: var(--md-font-weight-semibold); --md-text-heading-xl-bold-font-weight: var(--md-font-weight-bold); /* ── heading · lg ── */ --md-text-heading-lg-font-family: var(--md-font-family-sans); --md-text-heading-lg-font-size: var(--md-font-size-9); --md-text-heading-lg-line-height: var(--md-line-height-4); --md-text-heading-lg-letter-spacing: var(--md-letter-spacing-3); --md-text-heading-lg-regular-font-weight: var(--md-font-weight-regular); --md-text-heading-lg-semibold-font-weight: var(--md-font-weight-semibold); --md-text-heading-lg-bold-font-weight: var(--md-font-weight-bold); /* ── heading · mn ── */ --md-text-heading-mn-font-family: var(--md-font-family-sans); --md-text-heading-mn-font-size: var(--md-font-size-8); --md-text-heading-mn-line-height: var(--md-line-height-5); --md-text-heading-mn-letter-spacing: var(--md-letter-spacing-3); --md-text-heading-mn-regular-font-weight: var(--md-font-weight-regular); --md-text-heading-mn-semibold-font-weight: var(--md-font-weight-semibold); --md-text-heading-mn-bold-font-weight: var(--md-font-weight-bold); /* ── heading · sm ── */ --md-text-heading-sm-font-family: var(--md-font-family-sans); --md-text-heading-sm-font-size: var(--md-font-size-7); --md-text-heading-sm-line-height: var(--md-line-height-6); --md-text-heading-sm-letter-spacing: var(--md-letter-spacing-4); --md-text-heading-sm-regular-font-weight: var(--md-font-weight-regular); --md-text-heading-sm-semibold-font-weight: var(--md-font-weight-semibold); --md-text-heading-sm-bold-font-weight: var(--md-font-weight-bold); /* ── heading · xs ── */ --md-text-heading-xs-font-family: var(--md-font-family-sans); --md-text-heading-xs-font-size: var(--md-font-size-4); --md-text-heading-xs-line-height: var(--md-line-height-7); --md-text-heading-xs-letter-spacing: var(--md-letter-spacing-5); --md-text-heading-xs-regular-font-weight: var(--md-font-weight-regular); --md-text-heading-xs-semibold-font-weight: var(--md-font-weight-semibold); --md-text-heading-xs-bold-font-weight: var(--md-font-weight-bold); /* ═══════════════════════════════════════ BODY ═══════════════════════════════════════ */ /* The three sizes share a 24px line box — 20×1.2, 16×1.5, 14×1.714286 — so body text keeps the same rhythm whichever size a block uses. That is what --md-line-height-8 exists for. */ /* ── body · lg ── */ --md-text-body-lg-font-family: var(--md-font-family-sans); --md-text-body-lg-font-size: var(--md-font-size-6); --md-text-body-lg-line-height: var(--md-line-height-4); --md-text-body-lg-letter-spacing: var(--md-letter-spacing-5); --md-text-body-lg-paragraph-spacing: var(--md-spacing-xs); --md-text-body-lg-regular-font-weight: var(--md-font-weight-regular); --md-text-body-lg-semibold-font-weight: var(--md-font-weight-semibold); --md-text-body-lg-bold-font-weight: var(--md-font-weight-bold); /* ── body · mn ── */ --md-text-body-mn-font-family: var(--md-font-family-sans); --md-text-body-mn-font-size: var(--md-font-size-4); --md-text-body-mn-line-height: var(--md-line-height-7); --md-text-body-mn-letter-spacing: var(--md-letter-spacing-5); --md-text-body-mn-paragraph-spacing: var(--md-spacing-3xs); --md-text-body-mn-regular-font-weight: var(--md-font-weight-regular); --md-text-body-mn-semibold-font-weight: var(--md-font-weight-semibold); --md-text-body-mn-bold-font-weight: var(--md-font-weight-bold); /* ── body · sm ── */ --md-text-body-sm-font-family: var(--md-font-family-sans); --md-text-body-sm-font-size: var(--md-font-size-3); --md-text-body-sm-line-height: var(--md-line-height-8); --md-text-body-sm-letter-spacing: var(--md-letter-spacing-5); --md-text-body-sm-paragraph-spacing: var(--md-spacing-3xs); --md-text-body-sm-regular-font-weight: var(--md-font-weight-regular); --md-text-body-sm-semibold-font-weight: var(--md-font-weight-semibold); --md-text-body-sm-bold-font-weight: var(--md-font-weight-bold); /* ═══════════════════════════════════════ LABEL ═══════════════════════════════════════ */ /* ── label · lg ── */ --md-text-label-lg-font-family: var(--md-font-family-sans); --md-text-label-lg-font-size: var(--md-font-size-3); --md-text-label-lg-line-height: var(--md-line-height-2); --md-text-label-lg-letter-spacing: var(--md-letter-spacing-5); --md-text-label-lg-regular-font-weight: var(--md-font-weight-regular); --md-text-label-lg-semibold-font-weight: var(--md-font-weight-semibold); --md-text-label-lg-bold-font-weight: var(--md-font-weight-bold); /* ── label · mn ── */ --md-text-label-mn-font-family: var(--md-font-family-sans); --md-text-label-mn-font-size: var(--md-font-size-2); --md-text-label-mn-line-height: var(--md-line-height-6); --md-text-label-mn-letter-spacing: var(--md-letter-spacing-5); --md-text-label-mn-regular-font-weight: var(--md-font-weight-regular); --md-text-label-mn-semibold-font-weight: var(--md-font-weight-semibold); --md-text-label-mn-bold-font-weight: var(--md-font-weight-bold); /* label · sm is 8px. Below the floor for product copy: annotations and metadata only, and worth a second look before reaching for it. */ /* ── label · sm ── */ --md-text-label-sm-font-family: var(--md-font-family-sans); --md-text-label-sm-font-size: var(--md-font-size-1); --md-text-label-sm-line-height: var(--md-line-height-7); --md-text-label-sm-letter-spacing: var(--md-letter-spacing-5); --md-text-label-sm-regular-font-weight: var(--md-font-weight-regular); --md-text-label-sm-semibold-font-weight: var(--md-font-weight-semibold); --md-text-label-sm-bold-font-weight: var(--md-font-weight-bold); /* ═══════════════════════════════════════ MONO ═══════════════════════════════════════ */ /* Metrics deliberately match the body ramp size for size, so mono can be set inline inside running text without breaking the line box. */ /* ── mono · lg ── */ --md-text-mono-lg-font-family: var(--md-font-family-mono); --md-text-mono-lg-font-size: var(--md-font-size-6); --md-text-mono-lg-line-height: var(--md-line-height-4); --md-text-mono-lg-letter-spacing: var(--md-letter-spacing-5); --md-text-mono-lg-paragraph-spacing: var(--md-spacing-xs); --md-text-mono-lg-regular-font-weight: var(--md-font-weight-regular); --md-text-mono-lg-semibold-font-weight: var(--md-font-weight-semibold); --md-text-mono-lg-bold-font-weight: var(--md-font-weight-bold); /* ── mono · mn ── */ --md-text-mono-mn-font-family: var(--md-font-family-mono); --md-text-mono-mn-font-size: var(--md-font-size-4); --md-text-mono-mn-line-height: var(--md-line-height-7); --md-text-mono-mn-letter-spacing: var(--md-letter-spacing-5); --md-text-mono-mn-paragraph-spacing: var(--md-spacing-3xs); --md-text-mono-mn-regular-font-weight: var(--md-font-weight-regular); --md-text-mono-mn-semibold-font-weight: var(--md-font-weight-semibold); --md-text-mono-mn-bold-font-weight: var(--md-font-weight-bold); /* ── mono · sm ── */ --md-text-mono-sm-font-family: var(--md-font-family-mono); --md-text-mono-sm-font-size: var(--md-font-size-3); --md-text-mono-sm-line-height: var(--md-line-height-8); --md-text-mono-sm-letter-spacing: var(--md-letter-spacing-5); --md-text-mono-sm-paragraph-spacing: var(--md-spacing-3xs); --md-text-mono-sm-regular-font-weight: var(--md-font-weight-regular); --md-text-mono-sm-semibold-font-weight: var(--md-font-weight-semibold); --md-text-mono-sm-bold-font-weight: var(--md-font-weight-bold); /* ═══════════════════════════════════════ LINK ═══════════════════════════════════════ */ /* No size axis by design — see the note at the top of the file. The colour is not here either: a link uses the vivid tokens from colors/semantic.css (--md-content-vivid and its hover/pressed pair). */ --md-text-link-font-weight: var(--md-font-weight-regular); --md-text-link-text-decoration: var(--md-text-decoration-underline); /* ═══════════════════════════════════════ ITALIC ═══════════════════════════════════════ */ /* Composes with any role, which keeps setting the weight. */ --md-text-italic-font-style: var(--md-font-style-italic); }