Skip to content

[InDesign pipeline] Style and design-token mapper (paragraph/character styles + swatches → tokens + Tailwind preset) #65

@PAMulligan

Description

@PAMulligan

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

Metadata

Metadata

Assignees

Labels

enhancementNew feature or requestpipelineFigma/Canva-to-React conversion pipelinereactReact-specific functionality

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions