Skip to content

PLAN — id-119: Design-system config-readiness

PLAN — id-119: Design-system config-readiness

Section titled “PLAN — id-119: Design-system config-readiness”

Decomposition of the TECH.md design into implementation Subtasks. Dependencies are sibling-only within ID-119. The F1→F3 chain is serial; Strings parallels; Wrap is last. Per the TECH §7 note, worktree isolation is currently unreliable — execute CSS-touching Subtasks serially.

F1a ─▶ F1b ─▶ F2 ─▶ F3 ─┐
Strings ─────────────────┼─▶ Wrap

Subtask 1 — F1a: add ramp primitive layer (additive)

Section titled “Subtask 1 — F1a: add ramp primitive layer (additive)”
  • Scope: app/globals.css only. Add the functional status ramps (--green/amber/red/blue/violet/teal-*) to :root and .dark, and the categorical --hue-* variables — values only, nothing rewired yet.
  • Why split: purely additive ⇒ trivially safe; isolates the risky rewire into F1b.
  • Test: bun build green; new custom properties resolve in computed style; zero visual change (no token references them yet). No component files touched.

Subtask 2 — F1b: rewire status/domain tokens to primitives (deps: F1a)

Section titled “Subtask 2 — F1b: rewire status/domain tokens to primitives (deps: F1a)”
  • Scope: app/globals.css. Repoint every status/domain token to its ramp step / categorical oklch(L C var(--hue-…)) / --stone-* reference; keep the 4 bespoke shadcn tokens as literals. Collapse the now-redundant per-token .dark overrides. Produce the complete snap list (old→new, ΔL/ΔC/ΔH) for any non-exact mapping.
  • Test: computed-style diff vs main is empty except the approved snap list (gate item §8.1); visual snapshot diff; bun build; utility class names unchanged (grep built CSS).
  • Gate: Liam approves the snap list before merge.

Subtask 3 — F2: extract application-domain tokens (deps: F1b)

Section titled “Subtask 3 — F2: extract application-domain tokens (deps: F1b)”
  • Scope: create app/styles/domain-tokens.css with the domain tokens’ :root + .dark definitions and @theme inline registrations (per TECH §4 classification); @import it from app/globals.css; remove the moved blocks from globals.css.
  • Test: built CSS still contains sample domain utilities (bg-bid-won, text-entity-person, bg-domain-security-bg); visual parity; bun build. Fail-loud check: if a domain utility is missing post-split the import order is wrong — fix before merge.

Subtask 4 — F3: token-naming convention (B-lite, decided) (deps: F2)

Section titled “Subtask 4 — F3: token-naming convention (B-lite, decided) (deps: F2)”
  • Scope: adopt the convention (shadcn bare / ramps scoped --<family>-<role>) and drop the redundant --color- prefix on status/domain definitions while keeping the @theme inline RHS so utility class names stay byte-identical. Update the 18 inline-var(--color-*)/var(--domain-*) files (54 refs). Document the convention in components/CLAUDE.md.
  • Out of scope (tracked): full utility-class rename (Option B, ~87 files) → bl-349, bundled with the rebrand visual pass.
  • Test: bun build + bun lint green; generated utility class names unchanged (grep built CSS); the 18 inline-var() files resolve to identical computed colours; visual parity vs main.

Subtask 5 — Strings: product-name consolidation (no deps — parallel)

Section titled “Subtask 5 — Strings: product-name consolidation (no deps — parallel)”
  • Scope: route the product-name string through BRANDING/CLIENT_CONFIG (TECH §6): UI server + client (context if needed), AI skill {PRODUCT_NAME} placeholder, procurement exports. Value stays “Knowledge Hub”. Update export golden fixtures intentionally.
  • Test: grep -rn "Knowledge Hub" app components lib returns only config + comments/scripts; classification eval shows no regression; export parity tests updated + green; bun run test.
  • Gate: Liam confirms depth — UI-only vs incl. AI-prompt + exports (gate item §8.3).

Subtask 6 — Wrap: regression + guidance (deps: F1b, F2, F3, Strings)

Section titled “Subtask 6 — Wrap: regression + guidance (deps: F1b, F2, F3, Strings)”
  • Scope: full bun run test regression; visual snapshot diff sign-off; add a token-system page to the docs-site design section + cross-link from components/CLAUDE.md.
  • Test: full suite green; snapshot diff approved; docs build.

  • Workers return ledger-write intents; the Orchestrator applies status/journal on MAIN.
  • Each CSS Subtask brief MUST carry the code-intelligence tool-discipline block (Inv 2/3) and the “computed-style diff vs main” gate.
  • The Checker verifies invariants B-1..B-5 + the snap list per Subtask.