WORK-206
Setting up your dashboard 0 entities found · 8/33 branches scanned
ID:WORK-206Status:done

Refrakt site adopts presets: ["niwaki"]

Wire the refrakt documentation site to use the niwaki preset on top of the neutral default. The result: neutral chrome (so component examples render exactly as a fresh create-refrakt project would), niwaki syntax (so refrakt's voice lives in code blocks — the surface most uniquely refrakt's). Adds a visible "this site uses the niwaki preset" signal so visitors can mentally separate "default refrakt" from "this site's choice."

Priority:mediumComplexity:smallMilestone:v0.14.0Source:SPEC-051

Criteria completion

Criteria completion: 4 of 5 (80%) checked; tracking started on May 18, no incremental history yet0%25%50%75%100%May 18Jun 15

Tracking started May 18 — check back for trends.

Branches 2
History 4
  1. 0a27bc6
    statusreadydone
    by bjornolofandersson
  2. e7d9b63
    Content editedby Claude
    v0.14.0 Chunk 7: SPEC-051 presets + adoption (WORK-204, 205, 206, 207)
  3. 3b92415
    Created (ready)by bjornolofandersson
  4. 80943c2
    Content editedby Claude
    plan: add SPEC-051 lumina neutral default + presets work items (WORK-200

Acceptance Criteria

  • refrakt.config.json updated: sites.main.theme is now the object form { "package": "@refrakt-md/lumina", "presets": ["@refrakt-md/lumina/presets/niwaki"] }
  • Visible signal of which preset the site uses (deferred to WORK-208 alongside the design-plugin-rune docs page — the preset docs themselves are the natural place to surface "this is what the site uses")
  • After change: every code block on the site renders with niwaki colours; all other content (callouts, headings, body, surface) renders with neutral default — verified by reading the merged-CSS path: niwaki overrides only syntax.* tokens, so everything else cascades to neutral default values
  • A user clicking through the site sees no preset change — preset applies site-wide via the SvelteKit plugin's composeSiteTokensCss at buildStart, which injects via the virtual:refrakt/site-tokens.css virtual module loaded alongside the theme's CSS
  • Build clean; full test suite green (2439 tests)

Approach

This is a one-line config edit plus a signal-component decision.

For the signal: the lightest option is a small text indicator in the footer. The most discoverable option is a homepage mention. Decide based on what feels right when you see the site rendered — capture the choice in the resolution.

Consider deferring the signal to the preset docs pages (WORK-208) — those pages exist specifically to surface the architecture, so a sidebar link "See how this site is composed" from any docs page might be enough on its own. Worth a brief read of how Vercel and Linear signal their own theme choices for reference.

Dependencies

  • WORK-205 — niwaki preset must exist.
  • WORK-200, WORK-201, WORK-202 — neutral default fully populated.

References

  • SPEC-051 — "Site & Scaffold Implications" section explains the dogfooding rationale
  • refrakt.config.json — file being edited