Description
Write the ADR defining the code / output architecture that consumes the Figma variable structure (see the Figma-structure ADR under #4963): Tokens Studio export, build pipeline, and the CSS + TypeScript output shape.
Parent: #4963. Depends on the Figma-structure ADR and the Tokens Studio exploration (#4800, Marco Krenn sessions). To be written once the first CSS/TS export cycle has run — the direction is still firming, so it is deliberately not folded into the Figma ADR.
Scope (to decide)
- Output targets: CSS custom properties + nested TypeScript module from one source.
- Path → nesting / naming transform (slash to nested keys, hyphen to camelCase, digit-leading tiers to JS-safe keys).
- One resolved tree per density mode.
- How the generator composes
Font into typography; how body (ui × 1.5) is emitted.
- CSS specificity strategy (
@layer vs :where()).
- Source-of-truth: Tokens Studio vs Figma; CLI / local validation; CI sync.
- Design vs. code ownership boundary.
Definition of Done
Description
Write the ADR defining the code / output architecture that consumes the Figma variable structure (see the Figma-structure ADR under #4963): Tokens Studio export, build pipeline, and the CSS + TypeScript output shape.
Parent: #4963. Depends on the Figma-structure ADR and the Tokens Studio exploration (#4800, Marco Krenn sessions). To be written once the first CSS/TS export cycle has run — the direction is still firming, so it is deliberately not folded into the Figma ADR.
Scope (to decide)
Fontinto typography; howbody(ui × 1.5) is emitted.@layervs:where()).Definition of Done
docs/architecture-decisions/)