/* 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 — Primitive Typography Tokens (:root) Font family, weight, style, size, line-height, tracking, case, decoration 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, style, 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. - Names come from `codeSyntax.WEB` in Figma, not from the variable path. Renaming a variable in Figma does NOT rename the custom property. - Mirrors the `primitive-typography` collection in "MDDS · 01 Foundations (tokens & styles)" (Figma). ========================================================================== */ :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. On the WEB, sans is requested over its full 300..800 variable range (`wght@0,300..800;1,300..800`), so every weight below resolves for real. In the Figma desktop app the family installed is the STATIC one, which has no Medium — which is why `font-weight/medium` carries a warning there and why no text style uses it. Two runtimes, two answers; both are true. */ --md-font-family-sans: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Loaded at 400/600/700 — exactly the three weights the mono roles declare (regular, semibold, bold; see semantic.css). Fira Code ships no italics, and its programming ligatures are on by default via `calt`. */ --md-font-family-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ═══════════════════════════════════════ FONT WEIGHT (unitless) ═══════════════════════════════════════ */ /* Figma stores the font-style NAME ("SemiBold") because that is the only thing the canvas can apply; CSS wants the number. The mapping is fixed: Light 300 · Regular 400 · Medium 500 · SemiBold 600 · Bold 700 · ExtraBold 800. The five italic weights in Figma (`font-weight/*-italic`) are deliberately NOT exported: they pack weight and italic into one string, which in CSS is two independent properties. Use the font-style tokens below instead. */ --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 STYLE ═══════════════════════════════════════ */ /* Perpendicular to weight, not a step of it. Compose with any role class rather than doubling the role classes — see utilities.css `.md-italic`. */ --md-font-style-normal: normal; --md-font-style-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) ── */ /* An INDEPENDENT ramp, ordered tightest → loosest. It is NOT index-paired with font-size: step 2 serves 112px, 56px and 14px alike, because what it stores is a proportion, not a leading. Pick the step from the role in semantic.css, never by matching the font-size index. Figma types these as percentages in the Text Style (150%) because a variable bound to line-height is always applied in px there. CSS wants them unitless, so every value is the Figma percentage ÷ 100, rounded to six decimals. The trailing comment keeps the Figma-side number visible. Step 1 is the RESET: no role uses it. 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 sets further up the cascade. */ --md-line-height-1: 1; /* 100% · reset, no role */ --md-line-height-2: 1.142857; /* 114.2857% · 8/7 */ --md-line-height-3: 1.153846; /* 115.3846% · 15/13 */ --md-line-height-4: 1.2; /* 120% · 6/5 */ --md-line-height-5: 1.25; /* 125% · 5/4 */ --md-line-height-6: 1.333333; /* 133.3333% · 4/3 */ --md-line-height-7: 1.5; /* 150% · 3/2 */ --md-line-height-8: 1.714286; /* 171.4286% · 12/7 */ /* ── Letter spacing (em) ── */ /* Ordered most negative → most positive; large type gets tighter. Figma types these as percentages in the Text Style, and a percentage of the font-size is literally what `em` means, so the conversion is value ÷ 100 with an em suffix. The trailing comment keeps the Figma-side number visible. */ --md-letter-spacing-1: -0.035em; /* Figma /1: -3.5% */ --md-letter-spacing-2: -0.03em; /* Figma /2: -3% */ --md-letter-spacing-3: -0.02em; /* Figma /3: -2% */ --md-letter-spacing-4: -0.01em; /* Figma /4: -1% */ --md-letter-spacing-5: 0em; /* Figma /5: 0% */ --md-letter-spacing-6: 0.02em; /* Figma /6: +2% · no role yet */ /* ═══════════════════════════════════════ TEXT CASE (CSS text-transform) ═══════════════════════════════════════ */ /* Figma cannot bind this axis — the only valid scopes for a STRING variable are FONT_FAMILY and FONT_STYLE — so on the canvas the value is typed literally and these tokens are the source of truth. No role uses one yet; every text style sits at ORIGINAL. */ --md-text-case-none: none; --md-text-case-uppercase: uppercase; /* pair with --md-letter-spacing-6 */ --md-text-case-lowercase: lowercase; --md-text-case-capitalize: capitalize; /* ═══════════════════════════════════════ TEXT DECORATION ═══════════════════════════════════════ */ /* Same binding limit as text-case. Only `underline` has a consumer: --md-text-link-text-decoration. */ --md-text-decoration-none: none; --md-text-decoration-underline: underline; --md-text-decoration-line-through: line-through; /* ═══════════════════════════════════════ 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 */ /* font-family, font-weight, font-style, line-height, letter-spacing, text-case and text-decoration do not have rem variants: none of them is a length. 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. Paragraph spacing is not here either: it is a spacing decision, not a typographic one, so the semantic layer routes it through --md-spacing-* (see semantic.css). */ }