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

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

@@ -232,17 +232,19 @@ Architectural finding: the v0.2 `SettingsPage.svelte` (2 891 LOC after Phase 4a)
- Tab IDs in this commit map 1:1 to existing v0.2 section names (start-here / transcription / models / tasks / accessibility / privacy / advanced / help). Phase 4b will restructure to match the plan's canonical names (carving Output from Advanced and Vocabulary from Transcription).
### Phase 4b — Settings restructure to canonical tab names. Pending.
### Phase 4b — Settings restructure to canonical tab names. Deferred to post-Phase-5.
- Carve **Output** out of `7. Advanced > Output & Capture` (currently at line 2398 in the pre-Phase-4a file) into its own top-level tab.
- Carve **Vocabulary** out of `2. Transcription > Custom vocabulary` (line 1472 in the pre-Phase-4a file) into its own top-level tab.
- Rename the remainder of `2. Transcription` to be subsumed by **Output** + **Vocabulary**, or kept as legacy section pending content audit.
- Final tab order: Start Here / Models / Output / Vocabulary / Tasks / Accessibility / Privacy / Advanced (eight tabs, matching the plan).
Rationale: phase 4a already delivers "one section at a time" under quietware. Renaming the eight tabs to match the canonical plan (Output / Vocabulary carved out as top-level) is labelling polish, not user-value. Page-skeleton sweep (Phase 5) delivers more visible improvement per LOC. Phase 4b will return after Phase 5 lands.
### Phase 4c — Texture-opacity slider + high-contrast toggle. Pending.
### Phase 4c — Texture-opacity slider + high-contrast toggle. Landed 2026-05-15.
- Texture-opacity slider in the Accessibility tab, range 0.05–0.08, default 0.06. Persists to existing preferences store.
- High-contrast toggle in the Accessibility tab. Toggle overrides system `prefers-contrast: more` query when set.
- New static grain overlay defined in `src/design-system/v0.3-quietware-tokens.css`. Fixed-position `body::after`, `mix-blend-mode: overlay`, opacity driven by `--quietware-texture-opacity`. Pattern generated inline via SVG `feTurbulence` (`baseFrequency=0.85`, `numOctaves=2`, `stitchTiles=stitch`). Tile size 240×240, repeated across viewport. `pointer-events: none` so the overlay never intercepts clicks. Active only under `html[data-design="quietware"]` and only on the dark and light modes — high-contrast forces opacity to 0.
- New `QuietwareAccessibilityControls.svelte` ([src/lib/components/](../../src/lib/components/QuietwareAccessibilityControls.svelte)) ships two controls:
- **High-contrast toggle**, wired through `LumotiaToggle`. Sets `<html data-contrast="high">` so the quietware HC palette block in the tokens CSS activates. Persists via `localStorage`. Overrides the OS `prefers-contrast: more` query when explicitly enabled.
- **Texture-intensity slider**, range 0.05–0.08, step 0.005, default 0.06. Sets the `--quietware-texture-opacity` CSS variable inline on `<html>` so it overrides the per-mode default in the tokens CSS. Disabled when high-contrast mode is on. Reset button restores the 0.06 default.
- Component injected into `SettingsPage.svelte` inside the Accessibility section, gated by `{#if isQuietware}`. v0.2 fallback unaffected.
- Persistence path: localStorage keys `lumotia:quietware:high-contrast` and `lumotia:quietware:texture-opacity`. Full integration with the central `Preferences` store is a follow-up; localStorage keeps Phase 4c contained.
- Verified: `npm run check` reports 0 errors, 0 warnings across 5706 files.
---