IBX-12331: Updated typography tokens and Storybook to the Figma spec

[tischsoic]

🎫 Issue	IBX-12331

Related PRs:

• follow-up of IBX-12296: Updated headers font size and weight #130 (IBX-12296)

Description:

Completes the typography harmonization with the Figma parameters table (node 370-18633): body and code get named tokens and mixins the way headings already have them, and the Storybook typography story now mirrors Figma's sections and values.

• New tokens in variables/_typography.scss: $body-xl/l/m/s/xs-font-size (18/16/14/12/10, aliasing the $text-font-size-* ramp), $code-l/m/s-font-size (16/14/12), $text-highlighted-font-size-2xl (18 — new row in Figma), $body-line-height / $code-line-height (1.5).
• New mixin partials _body.scss (body-xl…body-xs($weight, $style) — Mulish, 400/600, normal/italic) and _code.scss (code-l/m/s — JetBrains Mono 400), registered in styles.scss; like _headers.scss they emit nothing — compiled dist/css/styles.css is byte-identical.
• Storybook: Header · Highlighted (own table, 9 rows) · Body (Regular / Italic / Semibold / Semibold Italic × 5 sizes, rendered through the new mixins) · Code (new). The body-xl line-height is 27 (docs said 28), the 20px/24px body rows are gone (not in Figma), and the Links table is removed — link styling belongs to the Link component's story.

$text-font-size-2xl/3xl stay defined (admin-ui _login.scss and segmentation _audience-table.scss still use them) but are no longer documented; they go with the admin-ui follow-up.

Designer confirmed (2026-09-11) that every line-height is 150% of the size, as the table states — the six Figma text styles whose bound variables disagree (h3, h4, highlighted-xl/l/2xl line-heights; code-l size 15 vs 16) are being fixed in Figma; no code impact.

Follow-ups (separate tickets): admin-ui body/small/code Bootstrap wiring (<code> currently renders Bootstrap's $pink), letter-spacing 0.12px vs Figma 0, $base-font-size not !default, unused Noto Sans / Work Sans @font-face blocks.

For QA:

Storybook → Typography: tables for Header, Highlighted, Body (4 variants), Code with the values from the Figma table; no Links table. Computed styles at the 14px root: body-xl 18px/27px, body-xs 10px/15px, code-l 16px/24px in JetBrains Mono, highlighted-2xl 18px/27px; italic rows render a real italic face.

Documentation:

🤖 Generated with Claude Code