Skip to content

feat(pipeline): add InDesign style and design-token mapper#100

Merged
PAMulligan merged 1 commit into
mainfrom
65-indesign-pipeline-style-and-design-token-mapper
Jun 20, 2026
Merged

feat(pipeline): add InDesign style and design-token mapper#100
PAMulligan merged 1 commit into
mainfrom
65-indesign-pipeline-style-and-design-token-mapper

Conversation

@PAMulligan

Copy link
Copy Markdown
Collaborator

Summary

Implements the Style and design-token mapper — sub-issue #65 of the InDesign-to-React epic (#62). It maps the IDML IR (from #63) to a coherent Aurelius design-token set and emits it in four formats, so generated components reference a real design system instead of inline magic numbers.

New token subsystem in packages/pipeline/src/tokens/, plus a gamut-aware convertColor in the IDML color module and a --emit-tokens CLI flow.

What the mapper does

  • Colors — every swatch with a resolvable hex becomes a palette token, de-duplicated within a configurable sRGB tolerance; CMYK/Lab colors outside the sRGB gamut are flagged.
  • Typography — paragraph styles are clustered into a heading / body / caption scale (largest sizes → top heading levels), preserving InDesign names. Font-size, line-height, and letter-spacing tokens share aligned keys.
  • Spacing — paragraph spacing and indents are quantized to a configurable grid (default 4px) and named on a t-shirt scale.
  • Fonts — families resolve to web font stacks via the configurable config/font-map.json; unmapped families fall back to a generic stack and emit a warning listed in the generator report.

Emitted artifacts

  • tokens.ts — typed, self-contained (as const)
  • tokens.css:root custom properties
  • tailwind.preset.ts — Tailwind v3+ preset exposing every token under theme.extend
  • design-tokens.json — Style Dictionary compatible
node packages/pipeline/dist/indesign/cli.js brochure.idml --emit-tokens ./src/tokens

Acceptance criteria (#65)

  • Generated tokens.ts type-checks under tsc --noEmit (verified via the TS compiler API) and validates against the published DesignTokensSchema
  • Tailwind preset exposes every token; merge-into-config test confirms it
  • Color palette includes all distinct swatches, deduped by hex within a configurable tolerance
  • Font fallback warnings emitted and listed in the generator report
  • Tests cover CMYK→sRGB against known values, paragraph-style clustering, and Tailwind preset merging

Testing

  • pnpm --filter @aurelius/pipeline typecheck / test / build ✅ — 93 tests (41 new)
  • Repo-wide eslint . (0 errors) and prettier --check .
  • check-doc-counts ✅; no dependency/lockfile changes
  • Verified the compiled CLI emits all four artifacts on a real .idml, with config/font-map.json resolving correctly from dist/, out-of-gamut Lab flagged, and font fallbacks reported

Notes

  • tokens.ts is self-contained by default (portable into any TS project); the library can also emit a satisfies DesignTokens form.
  • Spacing is derived from paragraph spacing/indents; page margins and inter-frame gutters from layout geometry are noted as future work.

Closes #65
Part of #62

🤖 Generated with Claude Code

Map the InDesign IR to an Aurelius design-token set and emit it in four formats,
the next stage of the InDesign-to-React pipeline (#65, part of #62).

- Cluster paragraph styles into a heading/body/caption typography scale,
  preserving InDesign names; align font-size, line-height, letter-spacing tokens
- Build an sRGB color palette from swatches, de-duped within a configurable
  tolerance; warn on CMYK/Lab colors outside the sRGB gamut
- Quantize paragraph spacing and indents to a configurable grid (default 4px)
- Resolve fonts to web stacks via config/font-map.json with fallback warnings
- Emit tokens.ts, tokens.css, tailwind.preset.ts, and a Style Dictionary
  design-tokens.json; expose them via aurelius-indesign --emit-tokens
- 41 new tests (93 total): CMYK->sRGB, clustering, Tailwind merge, and a
  tokens.ts type-check under tsc

Refs #65, #62

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@PAMulligan PAMulligan self-assigned this Jun 20, 2026
@PAMulligan PAMulligan added the enhancement New feature or request label Jun 20, 2026
@PAMulligan PAMulligan moved this from Todo to Done in PMDS Open Source Roadmap Jun 20, 2026
@PAMulligan PAMulligan added this to the v2.0.0 milestone Jun 20, 2026
@PAMulligan PAMulligan merged commit d2a8370 into main Jun 20, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

Development

Successfully merging this pull request may close these issues.

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

1 participant