Sub-issue of #62.
Summary
Map the InDesign IR (produced by #63 and #64) to Aurelius design tokens — a typed tokens.ts typography scale, color palette, and spacing scale, plus a Tailwind preset that exposes those tokens — so generated React components reference a coherent design system rather than inline magic numbers.
Details
- Cluster paragraph styles into a heading/body typography scale (e.g., 6 heading sizes + 2 body sizes), preserving names from InDesign where reasonable.
- Convert swatches (CMYK, LAB, RGB) to sRGB hex with documented conversion math; warn on out-of-gamut conversions.
- Derive a spacing scale from observed margins, gutters, and paragraph spacing using a configurable quantization (default: 4px grid).
- Map InDesign fonts to web-safe / Google Fonts equivalents via a configurable fallback table (
config/font-map.json).
- Emit:
tokens.ts (typed token object: colors, fontSizes, fontFamilies, spacing, lineHeights, letterSpacing).
tokens.css (CSS custom properties under :root).
tailwind.preset.ts (Tailwind v3+ preset) when Tailwind is selected in the Aurelius config.
design-tokens.json (Style Dictionary-compatible) for downstream consumers.
Acceptance Criteria
- Generated
tokens.ts type-checks against a published schema and is consumable by tsc --noEmit in a fixture React project.
- Tailwind preset, when merged into a fixture
tailwind.config.ts, exposes every token as a utility class.
- Color palette includes all distinct swatches (deduped by hex within a configurable tolerance).
- Font fallback warnings are emitted and listed in the generator report.
- Tests cover CMYK→sRGB conversion against known fixture values, paragraph style clustering, and Tailwind preset merging.
Dependencies
References
Sub-issue of #62.
Summary
Map the InDesign IR (produced by #63 and #64) to Aurelius design tokens — a typed
tokens.tstypography scale, color palette, and spacing scale, plus a Tailwind preset that exposes those tokens — so generated React components reference a coherent design system rather than inline magic numbers.Details
config/font-map.json).tokens.ts(typed token object:colors,fontSizes,fontFamilies,spacing,lineHeights,letterSpacing).tokens.css(CSS custom properties under:root).tailwind.preset.ts(Tailwind v3+ preset) when Tailwind is selected in the Aurelius config.design-tokens.json(Style Dictionary-compatible) for downstream consumers.Acceptance Criteria
tokens.tstype-checks against a published schema and is consumable bytsc --noEmitin a fixture React project.tailwind.config.ts, exposes every token as a utility class.Dependencies
References