/* ========================================================================== MDDS — Primitive Typography Tokens (:root) Font family, weight, slant, size, line-height, tracking, paragraph spacing Conventions: - Prefix: --md-* - Numeric scale (1…14). The t-shirt scale (sm/mn/lg/xl) belongs to the semantic layer, never here. - Two unit systems, same as interface/primitive.css: the unsuffixed token carries px and the `-rem` suffix carries the relative variant. Consume the px one — see the REM SCALE note below for why the rem ramp is not usable yet. - Ramps whose unit is already relative or unitless (weight, slant, line-height, letter-spacing) have no second variant; they live in the PX SCALE block and are called out at the end of the file. - Mirrors the `primitive-typography` collection in "MDDS · 01 Foundations (tokens & styles)" (Figma). Figma's codeSyntax points at the unsuffixed name, so a token picked from the handoff resolves to the px value Figma displays. ========================================================================== */ :root { /* ═══════════════════════════════════════ FONT FAMILY ═══════════════════════════════════════ */ /* Declaring a family here does NOT load it. Every family needs a in each document that renders UI — app/index.html, app/playground/preview/preview.html and app/playground/index.html. Sans is requested over its full 300..800 variable range, so every weight below is covered by construction; an unloaded weight would be synthesised by the browser (faux bold), not skipped, so the drift would be silent. */ --md-font-family-sans: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Loaded at 400/600 only — the mono family is for code and identifiers, which never use the light or bold ends of the ramp. */ --md-font-family-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ═══════════════════════════════════════ FONT WEIGHT (unitless) ═══════════════════════════════════════ */ /* The ramp spans the full 300–800 of the variable family, so it is 1:1 with Figma's `typography/font-weight` collection — no step is dropped and no codeSyntax there points at a token that does not exist here. Medium and ExtraBold both exist only because Open Sans is now variable; the static family it replaced jumped 400 → 600 and stopped at 700. */ --md-font-weight-light: 300; --md-font-weight-regular: 400; --md-font-weight-medium: 500; --md-font-weight-semibold: 600; --md-font-weight-bold: 700; --md-font-weight-extrabold: 800; /* ═══════════════════════════════════════ FONT SLANT (CSS font-style axis) ═══════════════════════════════════════ */ /* Figma packs weight + slant into one `fontStyle` string ("SemiBold Italic"). In CSS they are two independent properties, so the slant axis is its own token and `font-style/*` from Figma is never exported. */ --md-font-slant-normal: normal; --md-font-slant-italic: italic; /* ═══════════════════════════════════════ PX SCALE ═══════════════════════════════════════ */ /* ── Font size (px) ── */ --md-font-size-1: 8px; --md-font-size-2: 12px; --md-font-size-3: 14px; --md-font-size-4: 16px; --md-font-size-5: 18px; --md-font-size-6: 20px; --md-font-size-7: 24px; --md-font-size-8: 32px; --md-font-size-9: 40px; --md-font-size-10: 56px; --md-font-size-11: 64px; --md-font-size-12: 80px; --md-font-size-13: 104px; --md-font-size-14: 112px; /* ── Line height (unitless ratio) ── */ /* Each step is `line-height ÷ font-size` at the SAME index, so the 1:1 pairing is baked into the value instead of being a documented rule. Consequence: a ratio only makes sense with its paired font-size — --md-line-height-4 on --md-font-size-9 yields 60px, not 24px. */ /* Index 0 is the deliberate exception: it has no --md-font-size-0 pair because it is not a leading step but a RESET. Two callers need it — icon glyphs (FMD is an icon font, so an icon box is a line box and any inherited leading offsets it) and any component that must neutralise the line-height Bootstrap/beyond set further up the cascade. Mirrors how --md-unit-0 backs --md-spacing-none in the interface collection. */ --md-line-height-0: 1; /* reset — no paired size */ --md-line-height-1: 1.5; /* 12px @ 8px */ --md-line-height-2: 1.3333; /* 16px @ 12px */ --md-line-height-3: 1.4286; /* 20px @ 14px */ --md-line-height-4: 1.5; /* 24px @ 16px */ --md-line-height-5: 1.4444; /* 26px @ 18px */ --md-line-height-6: 1.4; /* 28px @ 20px */ --md-line-height-7: 1.3333; /* 32px @ 24px */ --md-line-height-8: 1.25; /* 40px @ 32px */ --md-line-height-9: 1.2; /* 48px @ 40px */ --md-line-height-10: 1.1429; /* 64px @ 56px */ --md-line-height-11: 1.125; /* 72px @ 64px */ --md-line-height-12: 1.1; /* 88px @ 80px */ --md-line-height-13: 1.0769; /* 112px @ 104px */ --md-line-height-14: 1.0714; /* 120px @ 112px */ /* ── Letter spacing (em) ── */ /* Ordered most negative → most positive; large type gets tighter. Mirrors Figma's `typography/letter-spacing/*` BY NAME, not by value: the px in the trailing comments is a Figma limit (a variable bound to letter-spacing can only hold px), not a design decision. Keep the names aligned and leave this ramp in `em`. */ --md-letter-spacing-1: -0.035em; /* Figma /1: -4 */ --md-letter-spacing-2: -0.03em; /* Figma /2: -2 */ --md-letter-spacing-3: -0.02em; /* Figma /3: -1 */ --md-letter-spacing-4: -0.01em; /* Figma /4: -0.5 · provisional */ --md-letter-spacing-5: 0; /* Figma /5: 0 */ --md-letter-spacing-6: 0.02em; /* Figma /6: +1 · provisional */ /* ── Paragraph spacing (px) ── */ /* Applied as margin-block-end between sibling blocks of running text. */ --md-paragraph-spacing-1: 0; --md-paragraph-spacing-2: 4px; --md-paragraph-spacing-3: 8px; --md-paragraph-spacing-4: 16px; --md-paragraph-spacing-5: 24px; /* ═══════════════════════════════════════ REM SCALE (base 16px) ═══════════════════════════════════════ */ /* ⚠️ DO NOT CONSUME YET — the 16px base is nominal, not real. Bootstrap 3.4.1 sets `html { font-size: 10px }` (bootstrap.css:1080) and nothing in the 38 stylesheets app/index.html loads overrides it, so every token below currently resolves at 0.625× its documented px value: --md-font-size-3-rem renders 8.75px, not 14px. Worse, it renders 14px in the playground shell (app/playground/index.html), which does not load Bootstrap — the same token, two sizes, depending on the document. Note this also voids the usual accessibility argument for rem: a 10px ABSOLUTE root already discards the reader's default-font-size preference, and browser zoom scales px and rem alike. Until the root belongs to MDDS (`html { font-size: 100% }`, pending its own ticket — it means migrating ~48 inline rem values across 13 templates plus sweetalert2, which injects `.swal2-popup { font-size: 1rem }` at runtime with an em-based interior), rem buys nothing here and costs correctness. The ramp ships anyway so the collection matches interface/primitive.css and so the flip is a rename rather than a new surface. Same caveat applies to the 40 `-rem` tokens already in interface/primitive.css and their aliases in interface/semantic.css. */ /* ── Font size (rem) ── */ --md-font-size-1-rem: 0.5rem; /* 8px */ --md-font-size-2-rem: 0.75rem; /* 12px */ --md-font-size-3-rem: 0.875rem; /* 14px */ --md-font-size-4-rem: 1rem; /* 16px */ --md-font-size-5-rem: 1.125rem; /* 18px */ --md-font-size-6-rem: 1.25rem; /* 20px */ --md-font-size-7-rem: 1.5rem; /* 24px */ --md-font-size-8-rem: 2rem; /* 32px */ --md-font-size-9-rem: 2.5rem; /* 40px */ --md-font-size-10-rem: 3.5rem; /* 56px */ --md-font-size-11-rem: 4rem; /* 64px */ --md-font-size-12-rem: 5rem; /* 80px */ --md-font-size-13-rem: 6.5rem; /* 104px */ --md-font-size-14-rem: 7rem; /* 112px */ /* ── Paragraph spacing (rem) ── */ --md-paragraph-spacing-1-rem: 0; /* 0 */ --md-paragraph-spacing-2-rem: 0.25rem; /* 4px */ --md-paragraph-spacing-3-rem: 0.5rem; /* 8px */ --md-paragraph-spacing-4-rem: 1rem; /* 16px */ --md-paragraph-spacing-5-rem: 1.5rem; /* 24px */ /* font-family, font-weight, font-slant, line-height and letter-spacing do not have rem variants: the first three are not lengths, a leading ratio is unitless, and tracking is em — relative to the element's own font-size, so it is immune to the root regardless of what Bootstrap sets. */ }