jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.3 Phase 2: build flag wiring

Browse Source 
Wires VITE_LUMOTIA_QUIETWARE=1 to set <html data-design="quietware">
via a $effect in src/routes/+layout.svelte. Without the flag the
runtime app behaves exactly as v0.2; with the flag the v0.3 token
overrides in src/design-system/v0.3-quietware-tokens.css activate.

Hot-reload safety: if the env var is unset between dev rebuilds, the
attribute is cleared so devs do not see a stuck quietware surface.

Activation paths:

  VITE_LUMOTIA_QUIETWARE=1 npm run dev          (development)
  VITE_LUMOTIA_QUIETWARE=1 npm run build        (production)
  Or manually via dev tools: <html data-design="quietware">

Combine with data-theme="light" (existing v0.2 theme wiring) and
data-contrast="high" (existing v0.2 contrast wiring) to reach the
light and high-contrast quietware modes.

Smallest possible PR. No new dependencies. No bundle-size impact in
the off path. No component changes. Plan doc updated to mark Phase 2
as landed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jake
2026-05-15 12:53:56 +01:00
parent 7075c205fc
commit a9972f76bb
2 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/release/v0.3-tactile-quietware.md
View File

@@ -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. - 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. - 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 `<html data-design="quietware">` 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 ## Regression diary

16
src/routes/+layout.svelte
View File

@@ -21,6 +21,22 @@
$sveltePage.url.pathname.startsWith("/viewer") || $sveltePage.url.pathname.startsWith("/viewer") ||
$sveltePage.url.pathname.startsWith("/preview") $sveltePage.url.pathname.startsWith("/preview")
); );
// v0.3 Tactile Quietware activation. When VITE_LUMOTIA_QUIETWARE=1
// is set at build time, mark <html data-design="quietware"> 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;
}
});
</script> </script>
<AppRuntime /> <AppRuntime />