From 905a9f28569f5d948726bea1ab3baa43c8790077 Mon Sep 17 00:00:00 2001 From: npeter83 Date: Fri, 25 Sep 2026 15:39:49 +0200 Subject: [PATCH] =?UTF-8?q?feat(design):=20Fjord,=20a=20trial=20fifth=20sc?= =?UTF-8?q?heme=20=E2=80=94=20Midnight's=20navy=20with=20a=20steel-blue=20?= =?UTF-8?q?accent=20and=20steel=20rules=20(E28)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/DESIGN.md | 4 ++- frontend/public/backdrops/fjord.svg | 18 ++++++++++ frontend/public/backdrops/light/fjord.svg | 18 ++++++++++ frontend/src/components/SettingsPanel.tsx | 3 +- frontend/src/design-lab/batchB.tsx | 9 +++-- frontend/src/index.css | 42 +++++++++++++++++++++++ frontend/src/lib/theme.ts | 5 ++- 7 files changed, 94 insertions(+), 5 deletions(-) create mode 100644 frontend/public/backdrops/fjord.svg create mode 100644 frontend/public/backdrops/light/fjord.svg diff --git a/docs/DESIGN.md b/docs/DESIGN.md index 4d6cd671..62c1cc89 100644 --- a/docs/DESIGN.md +++ b/docs/DESIGN.md @@ -76,7 +76,8 @@ style guide. error), `--rating-media` on a poster's scrim, and `--media-chrome` for the always-dark player's menus (owner decision F16). Black and white are the media scrims and their text. Four schemes × dark and light (B2): **Midnight** (blue), **Forest** (cyan), **Slate** (fuchsia), **Matrix** (moss). Each earns its - place with its own hue family. Normal text ≥ 4.5:1 and a control's edge ≥ 3:1 in **every** scheme and mode. + place with its own hue family. **Fjord** (Midnight's navy with a steel-blue accent) is a trial outside that rule: the owner + tries it app-wide, then it is folded into Midnight or removed. Normal text ≥ 4.5:1 and a control's edge ≥ 3:1 in **every** scheme and mode. [WCAG 1.4.3, 1.4.11] The input edge token is set under Controls (A4). The ≥ 3:1 edge is the field family's (a field, the form's dropdown trigger), whose edge is the only thing that says "type here". A labelled pill (a chip, a toolbar trigger, a tab, a segment) keeps the faint `--border`: its text names it, @@ -371,5 +372,6 @@ Wherever there is text, the user can select it and copy it, and no click action | 2026-09-25 | Switch row (F12) | The whole settings row toggles (`SwitchRow`; a hand-laid row points a label at the switch) | Only the 36×24 switch toggles | The iOS / Material settings row; the text was a dead click beside the control it names | | 2026-09-25 | Edges and hovers (F14) | The ≥ 3:1 edge on the field family (fields, the form trigger); labelled pills keep the faint edge and the accent-edge hover | The ≥ 3:1 edge and a state-layer hover on every control | 1.4.11 asks an edge only where nothing else identifies the control; a heavy edge on every chip and tab weighs the whole UI down | | 2026-09-25 | Rating and live (F16) | Own tokens: `--rating` (theme-scoped gold), `--live`/`--live-fg`, `--rating-media`, `--media-chrome`; palette classes lint-refused | Map them to `--warn` / `--danger` | A gold star and a red LIVE are what the eye expects; as warn/danger they would read as a status. The old amber score was 2:1 on light | +| 2026-09-25 | Fjord trial (B2 exception) | A fifth scheme, temporary: Midnight's neutrals, Playnite's steel accent (#337599 lifted to #5aa1cb) and steel rules; exit = fold into Midnight or remove | Retune Midnight straight away; borrow only the qualities | The owner wants to live with the calmer palette app-wide before it replaces the default; it breaks "own hue family" on purpose, and only until that call | | 2026-09-24 | Chip family | One `Chip` (filter / token / tag / suggest / ghost) + `DismissibleChip`; nothing under 24; the lint rule "no raw `