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

v0.3 Phase 4c: HC toggle + texture-intensity slider + grain overlay

Browse Source 
Three additions land together so the slider is meaningful from day
one (instead of recording a preference that nothing consumes yet).

Static grain overlay.

  - src/design-system/v0.3-quietware-tokens.css adds a fixed-position
    body::after element that ships an SVG feTurbulence noise tile
    repeated across the viewport. Opacity reads from
    --quietware-texture-opacity. mix-blend-mode: overlay produces the
    soft notebook-paper feel without obscuring content.
  - pointer-events: none so clicks pass through. Active only under
    html[data-design="quietware"]. High-contrast forces opacity to 0
    via the existing HC palette block.

QuietwareAccessibilityControls component.

  - NEW: src/lib/components/QuietwareAccessibilityControls.svelte.
    Two controls, both quietware-only:
      1. High-contrast toggle wires html[data-contrast="high"].
         Overrides the OS prefers-contrast: more query when explicitly
         on. Built on LumotiaToggle so it inherits the accessible
         label + description pattern.
      2. Texture-intensity slider, range 0.05 to 0.08, step 0.005,
         default 0.06. Sets --quietware-texture-opacity inline on
         <html>, overriding the per-mode default in the tokens CSS.
         Disabled while high-contrast is on. Reset button restores
         0.06.
  - Persistence: localStorage keys
      lumotia:quietware:high-contrast
      lumotia:quietware:texture-opacity
    so choices survive dev rebuilds and full restarts. Full
    integration with the central Preferences store is a follow-up;
    localStorage keeps Phase 4c contained.

SettingsPage Accessibility section.

  - Imports the new QuietwareAccessibilityControls component.
  - Renders {#if isQuietware} <QuietwareAccessibilityControls />
    {/if} immediately after the existing AccessibilityControls block.
  - Search filter copy extended to cover the new control vocabulary.

Verified.

  - npm run check: 0 errors, 0 warnings across 5706 files.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jake
2026-05-15 13:43:58 +01:00
parent 8e612d1753
commit 4dca802f0b
4 changed files with 181 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/design-system/v0.3-quietware-tokens.css
View File

@@ -176,6 +176,32 @@
--quietware-texture-color: rgba(0, 0, 0, 0);
}
/* ============================================================
Static grain overlay. Atmospheric texture across the whole viewport.
Fixed position so it does not scroll. Tile pattern generated inline
via SVG feTurbulence. Opacity driven by --quietware-texture-opacity
(default 0.06 dark / 0.07 light, slider range 0.05 to 0.08 in
advanced settings). mix-blend-mode overlay darkens shadows and
brightens highlights, producing the soft notebook-paper effect.
pointer-events: none so clicks pass through. z-index 9999 places it
above all content, but content remains fully interactive thanks to
the pointer-events override.
No texture in high-contrast mode — the [data-contrast="high"] block
above sets --quietware-texture-opacity to 0.
============================================================ */
:root[data-design="quietware"] body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
opacity: var(--quietware-texture-opacity);
mix-blend-mode: overlay;
}
/* ============================================================
Reduced motion. Honour OS preference; quietware rules require it.
============================================================ */