diff --git a/docs/DESIGN.md b/docs/DESIGN.md index 123b8d08..767b39d3 100644 --- a/docs/DESIGN.md +++ b/docs/DESIGN.md @@ -103,10 +103,10 @@ style guide. own chip), never `--warn`: a score is not a warning. What sits on a picture looks the same in both themes, because the picture does: the broadcast red `--live` under `--live-fg` (never `--danger`: "live" is not an 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. **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. + (owner decision F16). Black and white are the media scrims and their text. Five schemes × dark + and light (B2): **Midnight** (blue), **Forest** (cyan), **Slate** (fuchsia), **Matrix** (moss) each earn their + place with their own hue family; **Fjord** (Midnight's navy with a calm steel-blue accent) is the one kept + exception, the calm twin of the vivid Midnight. A new scheme still needs 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 ≥ 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, @@ -617,3 +617,4 @@ pick a density step; it never changes the anatomy or loses an action. [Nielsen # | 2026-09-27 | Segmented rung | `SegmentedToggle` defaults to the toolbar rung (28, `text-xs`); 24 only for a panel's captioned match toggle | The small default | Two toolbars had inherited 10px type from the default beside 28px buttons | | 2026-09-27 | Copy rule (S3g) | One name per feature (the rail may shorten it); four verbs for four meanings; sentence case with the app's places capitalised; "…" when a command asks first; one-sentence messages without a stop; curly quotes; dates relative in lists with the exact minute on hover, three absolute forms; units from Intl, short | Word-for-word names everywhere; the verbs as they were; all lower case; no "…"; always a stop; always absolute dates; long or compact units | The copy survey found 7 EN and 6 HU double names, 22 Delete against 27 Remove, five date shapes and three spellings of a minute; the owner picked every recommended option | | 2026-09-27 | One glyph, one meaning (S4) | Play only for playback or resuming a paused transfer; Retry = `RefreshCw`; reset / revert = `RotateCcw` | Retry drawn with Play | The first UI-review run (Downloads) found a failed row whose Retry showed ▷ in the row and its menu | +| 2026-09-27 | Fjord kept | Fjord stays a fifth scheme beside Midnight; the trial wording goes | Fold it into Midnight; remove it | The owner lived with it and likes it; the vivid Midnight stays for those who want it. B2's own-hue rule still binds any new scheme | diff --git a/frontend/src/design-lab/batchB.tsx b/frontend/src/design-lab/batchB.tsx index 7a33e9de..a15943b3 100644 --- a/frontend/src/design-lab/batchB.tsx +++ b/frontend/src/design-lab/batchB.tsx @@ -89,7 +89,7 @@ const SCHEMES: SchemeDef[] = [ light: pal("#f4f5f0", "#ffffff", "#dfe3d8", "#161a14", "#5a6352", "#556b2f", "#ffffff"), }, { - name: "Fjord · steel (trial)", + name: "Fjord · steel", dark: pal("#0d1225", "#121931", "#25506e", "#eef1f5", "#9fb0c4", "#5aa1cb", "#0d1225"), light: pal("#f3f6fa", "#ffffff", "#c9d6e3", "#152232", "#4f6278", "#256b8f", "#ffffff"), }, @@ -470,7 +470,7 @@ export function BatchB() { id="b2" code="B2" title="The scheme set" - rule="Four schemes, four hue families: Midnight blue, Forest cyan, Slate fuchsia, Matrix moss. YouTube and Starship are gone (a user on them lands on Midnight). Fjord is a trial outside the rule (Midnight's family, Playnite's steel accent): folded into Midnight or removed. Rule: an accent is ≥ 30° of OKLCH hue from danger, warn and success, and ≥ 4.5:1 as text and under its button text, dark and light." + rule="Five schemes: four hue families — Midnight blue, Forest cyan, Slate fuchsia, Matrix moss — and Fjord, the one kept exception (Midnight's navy, Playnite's calm steel accent). YouTube and Starship are gone (a user on them lands on Midnight). Rule: an accent is ≥ 30° of OKLCH hue from danger, warn and success, and ≥ 4.5:1 as text and under its button text, dark and light." >
{SCHEMES.flatMap((s) => diff --git a/frontend/src/index.css b/frontend/src/index.css index b394f4f9..0d6a36ca 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1090,11 +1090,11 @@ html[data-scheme="matrix"][data-theme="light"] { --accent-fg: #ffffff; } -/* Fjord — TRIAL, not yet a member of the set (docs/DESIGN.md decision log, B2 exception, 2026-09-25): - Midnight's navy with Playnite's calm — a muted steel-blue accent and steel rules instead of the vivid - periwinkle. It shares Midnight's hue family on purpose; the owner tries it app-wide, then it is folded - into Midnight or removed (normalizeTheme lands a stored "fjord" on the default either way). Playnite's - own accent (#337599) is 3.7:1 as text, so the accent is the same hue lifted to 6.5:1. */ +/* Fjord — the one scheme outside B2's "own hue family" (docs/DESIGN.md decision log, 2026-09-25 trial, + kept 2026-09-27): Midnight's navy with Playnite's calm — a muted steel-blue accent and steel rules + instead of the vivid periwinkle. It shares Midnight's hue family on purpose: the owner lived with both + and kept both, the vivid and the calm. Playnite's own accent (#337599) is 3.7:1 as text, so the accent + is the same hue lifted to 6.5:1. */ html[data-scheme="fjord"][data-theme="dark"] { --bg: #0d1225; --surface: #121931; diff --git a/frontend/src/lib/theme.ts b/frontend/src/lib/theme.ts index 788746c3..f80053f4 100644 --- a/frontend/src/lib/theme.ts +++ b/frontend/src/lib/theme.ts @@ -11,8 +11,8 @@ export const SCHEMES: { id: Scheme; name: string; swatch: string }[] = [ { id: "forest", name: "Forest", swatch: "#22d3ee" }, { id: "slate", name: "Slate", swatch: "#e879f9" }, { id: "matrix", name: "Matrix", swatch: "#86a05a" }, - // A TRIAL outside B2 (Midnight's hue family, DESIGN.md decision log 2026-09-25): folded into - // Midnight or removed once the owner has tried it; a stored "fjord" then lands on the default. + // The one scheme outside B2's "own hue family": Midnight's navy with a calm steel accent, kept + // beside Midnight on purpose (DESIGN.md decision log, trial 2026-09-25, kept 2026-09-27). { id: "fjord", name: "Fjord", swatch: "#5aa1cb" }, ];