From 7d480e2ad0f192d733ac7f2a90ffbb30c82a2bd8 Mon Sep 17 00:00:00 2001 From: npeter83 Date: Thu, 24 Sep 2026 04:49:07 +0200 Subject: [PATCH] feat(design): Matrix toned down to moss, text on an accent fill held to --accent-fg The lime accent was the loudest of the four (OKLCH L 0.85, C 0.21) and read as neon; the owner chose the moss variant at Midnight's lightness with near-neutral greys, and the Matrix backdrops follow it. Fixed white/black parts on a solid accent fill (two switch knobs, three play buttons, the Up next pill) now use --accent-fg, and theme.contract.test.ts refuses a fixed white or black next to a solid bg-accent. --- docs/DESIGN.md | 3 ++- frontend/public/backdrops/light/matrix.svg | 10 +++---- frontend/public/backdrops/matrix.svg | 10 +++---- frontend/src/components/PlexInfo.tsx | 2 +- frontend/src/components/PlexPlaylistView.tsx | 2 +- frontend/src/components/UpNextCard.tsx | 2 +- frontend/src/components/plexCards.tsx | 2 +- frontend/src/components/plexDetailUi.tsx | 2 +- frontend/src/components/ui/form.tsx | 4 +-- frontend/src/design-lab/batchA.tsx | 4 +-- frontend/src/design-lab/batchB.tsx | 8 +++--- frontend/src/index.css | 28 +++++++++++--------- frontend/src/lib/theme.contract.test.ts | 19 ++++++++++++- frontend/src/lib/theme.ts | 2 +- 14 files changed, 59 insertions(+), 39 deletions(-) diff --git a/docs/DESIGN.md b/docs/DESIGN.md index 17c48a41..c406a549 100644 --- a/docs/DESIGN.md +++ b/docs/DESIGN.md @@ -70,7 +70,7 @@ style guide. - **Colour:** only semantic tokens (`--bg --surface --card --fg --muted --accent --accent-fg --danger --warn --success --info --border`, each with a `-fg` partner where text sits on it). Four schemes × dark - and light (B2): **Midnight** (blue), **Forest** (cyan), **Slate** (fuchsia), **Matrix** (lime). Each earns its + 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. [WCAG 1.4.3, 1.4.11] The input edge token is set under Controls (A4). - **The accent never looks like a status.** A scheme's accent is at least 30° of OKLCH hue away from @@ -302,3 +302,4 @@ Wherever there is text, the user can select it and copy it, and no click action | 2026-09-24 | C4 Dialogs | Focus by purpose; a pinned footer | Focus on Close; the footer scrolls | A form starts in its first field, and Save stays on screen with the keyboard up | | 2026-09-24 | C5 Plex player controls | The owner's lean set: no Stop / Restart / ±10 s buttons, Back by position, Next only with a next item, Resume + From the start on the card, touch double-tap ±10 s | Every control in one row (it ran off-screen below 1024); Back by a press counter; ±10 s keyboard-only | The row fits a portrait tablet; the decision to restart is made on the card; a tablet keeps the 10 s skip | | 2026-09-24 | Glass tuner | Retired; the schemes are the only colour choice | Keep it with ranges clamped to the rules | Free tuning is the drift the constitution exists to stop (owner) | +| 2026-09-24 | Matrix toned down | Moss #86a05a at Midnight's lightness, near-neutral greys; every white-on-accent part → `--accent-fg` | The B2 lime #a3e635 | The owner found the lime neon and tiring; it was the loudest accent (L 0.85, C 0.21), and fixed white parts sat on it at 1.5:1 | diff --git a/frontend/public/backdrops/light/matrix.svg b/frontend/public/backdrops/light/matrix.svg index 9ef8303c..f794cacf 100644 --- a/frontend/public/backdrops/light/matrix.svg +++ b/frontend/public/backdrops/light/matrix.svg @@ -1,13 +1,13 @@ - - - - + + + + - + diff --git a/frontend/public/backdrops/matrix.svg b/frontend/public/backdrops/matrix.svg index 038ecfc8..b5380ffa 100644 --- a/frontend/public/backdrops/matrix.svg +++ b/frontend/public/backdrops/matrix.svg @@ -1,13 +1,13 @@ - - - - + + + + - + diff --git a/frontend/src/components/PlexInfo.tsx b/frontend/src/components/PlexInfo.tsx index e85f5bd1..84709be4 100644 --- a/frontend/src/components/PlexInfo.tsx +++ b/frontend/src/components/PlexInfo.tsx @@ -594,7 +594,7 @@ export default function PlexInfo({ {onPlay && (
diff --git a/frontend/src/components/ui/form.tsx b/frontend/src/components/ui/form.tsx index f2a8c6fc..11b6aff2 100644 --- a/frontend/src/components/ui/form.tsx +++ b/frontend/src/components/ui/form.tsx @@ -43,8 +43,8 @@ export function Switch({ className={`w-9 h-5 rounded-full transition relative shrink-0 disabled:opacity-50 disabled:cursor-not-allowed ${checked ? "bg-accent" : "bg-border"}`} > diff --git a/frontend/src/design-lab/batchA.tsx b/frontend/src/design-lab/batchA.tsx index 4009c01d..7f9e48f9 100644 --- a/frontend/src/design-lab/batchA.tsx +++ b/frontend/src/design-lab/batchA.tsx @@ -104,7 +104,7 @@ function TouchRow() {
Dark mode - +
@@ -136,7 +136,7 @@ function NativeSet() {