diff --git a/docs/release/v0.3-tactile-quietware.md b/docs/release/v0.3-tactile-quietware.md index 8754a62..d54bdd9 100644 --- a/docs/release/v0.3-tactile-quietware.md +++ b/docs/release/v0.3-tactile-quietware.md @@ -200,6 +200,14 @@ Each phase ships as its own PR. Each is flag-gated by `html[data-design="quietwa - Verified by visual inspection. Manual activation via dev tools toggling the attribute. - Palette iterated three times this session (brand-as-semantic → cobalt-pegged square → color.adobe.com primaries). Final values locked in commit on amendment. +### Phase 2 — Build flag wiring. Landed 2026-05-15. + +- `src/routes/+layout.svelte` extended with a `$effect` block that reads `import.meta.env.VITE_LUMOTIA_QUIETWARE` at runtime and sets `` when the flag is `"1"`. +- Hot-reload safety: if the env var is unset between dev rebuilds, the attribute is cleared. +- Activation: `VITE_LUMOTIA_QUIETWARE=1 npm run dev` (or `npm run build`) lights up the quietware tokens. Without the env var, app renders v0.2 unchanged. +- Combine with `data-theme="light"` and `data-contrast="high"` (already wired by v0.2) to reach the light and high-contrast quietware modes. +- No new dependencies. No bundle-size impact in the off path. + --- ## Regression diary diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 3caeb38..f95b3ab 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -21,6 +21,22 @@ $sveltePage.url.pathname.startsWith("/viewer") || $sveltePage.url.pathname.startsWith("/preview") ); + + // v0.3 Tactile Quietware activation. When VITE_LUMOTIA_QUIETWARE=1 + // is set at build time, mark so the + // v0.3 token overrides in src/design-system/v0.3-quietware-tokens.css + // become active. Without the flag the app behaves exactly as v0.2. + // Combine with data-theme="light" and data-contrast="high" (already + // wired elsewhere) for the light and high-contrast modes. + $effect(() => { + if (typeof document === "undefined") return; + if (import.meta.env.VITE_LUMOTIA_QUIETWARE === "1") { + document.documentElement.dataset.design = "quietware"; + } else if (document.documentElement.dataset.design === "quietware") { + // Hot-reload safety: env var unset between dev rebuilds. + delete document.documentElement.dataset.design; + } + });