iris-core — Build-Plan Overview (P0–P7)

A phase-by-phase walkthrough of the iris-core CSS-architecture plan, with a per-phase diagram of the files it changes, the files it adds, and the pipeline stage it introduces.

Proof of concept → iris-core adopts under the iris namespace. The dual-architecture-poc proved every mechanism below (dual output, SUIT light-DOM classes, color-only component tokens, modern-gap grid + primitives, 5 theme modes, the responsive --iris-layout-* + typography tiers, and the iX multi-source reference-token pipeline). iris-core rebuilds those concepts against --iris-*; the POC's --dual-* classes and proof components are never ported.

Phases: P0 P1 P2 P3 P4 P5 P6 P7

What this plan adds to iris-core

The bird's-eye "what you get" before any phase detail:

Dual-output CSSOne $namespace source → byte-identical shadow-DOM output + light-DOM SUIT CSS.P1 →

SUIT light-DOM classesIris-Button, Iris-Card, … loadable without the web component.P1 →

Color-only component-token tier--iris-{component}-* color tokens; dimension/typography/spacing bind semantic vars directly.P3 →

Utilities + gridIndependently loadable u-* utilities and a SUIT grid — modern gap gutter, CSS Grid + bento, 7 layout primitives, 5 breakpoints.P2 →

Responsive token tiersThe --iris-layout-* layout tier + per-breakpoint responsive typography, applied in a :root min-width cascade.P2 →

Config-driven buildA compile-light-dom pipeline emitting tokens / utilities / grid / per-component CSS on demand.P1 →

Multi-source reference tokensiX as the first external source; a mismatch-analysis adapter contract; 5 theme modes.P4 →

Figma library sync + sub-themingComponent tokens pushed back to Foundations → UI Kit; designer + developer sub-theme tooling.P7 →

added file changed file pipeline stage — click a node to trace what it feeds.