diff --git a/api/test/nowplaying-data.test.js b/api/test/nowplaying-data.test.js index beba3eb6..c0654160 100644 --- a/api/test/nowplaying-data.test.js +++ b/api/test/nowplaying-data.test.js @@ -26,7 +26,7 @@ test('plex names the player from the device title', async () => { title: 'Arrival', duration: 6000, viewOffset: 3000, - Player: { state: 'playing', title: 'Living Room TV', product: 'Plex for Apple TV' }, + Player: { state: 'playing', title: 'Living Room TV', product: 'Plex for TV' }, }, ], }, @@ -62,14 +62,14 @@ test('jellyfin prefers DeviceName over Client', async () => { const r = await dataFn( ctxFor({ provider: 'jellyfin', jellyfinUrl: 'https://jf.example.com', jellyfinKey: 'k' }, [ { - DeviceName: 'Bedroom iPad', + DeviceName: 'Bedroom Tablet', Client: 'Jellyfin Web', NowPlayingItem: { Type: 'Movie', Name: 'Dune', RunTimeTicks: 100 }, PlayState: { PositionTicks: 25, IsPaused: true }, }, ]), ); - assert.equal(r.sessions[0].player, 'Bedroom iPad'); + assert.equal(r.sessions[0].player, 'Bedroom Tablet'); assert.equal(r.sessions[0].state, 'paused'); assert.equal(r.sessions[0].progress, 0.25); }); diff --git a/docs/design-system.md b/docs/design-system.md index 673cf08b..2a87ce48 100644 --- a/docs/design-system.md +++ b/docs/design-system.md @@ -2,7 +2,7 @@ The visual system both pages share. It lives in `ui/css/tokens.css`. -Values come from Apple's iOS, iPadOS and macOS design kits. Both the dashboard and the settings page follow iOS on a phone and iPadOS on a tablet or desktop. +Values are measured from a reference design kit, not chosen. Dark values only. No stylesheet declares a `prefers-color-scheme` rule. @@ -10,13 +10,13 @@ Dark values only. No stylesheet declares a `prefers-color-scheme` rule. Pick from the lowest layer that answers the question. -**Palette.** The system colours named by hue: `--sy-teal`, `--sy-red`, `--sy-gray4`. Twelve hues and six greys. Each has a `-hi` partner holding an increased-contrast value, and the `prefers-contrast: more` block swaps the whole palette to the `-hi` set. +**Palette.** Twelve hues and six greys, named by hue: `--sy-teal`, `--sy-red`, `--sy-gray4`. Each has a `-hi` partner holding an increased-contrast value. The `prefers-contrast: more` block swaps the palette to the `-hi` set. -A rule should not name a palette entry directly. The palette exists so the layers above it have something to point at. +Do not name a palette entry in a rule. The layers above point at it. -**Roles.** What a colour is for: `--accent`, `--danger`, `--warning`, `--success`. Each points at a hue. Changing the accent is one line. +**Roles.** What a colour is for: `--accent`, `--danger`, `--warning`, `--success`. Each points at a hue. -**Semantic.** What a colour is applied to, in the kit's own sets. +**Semantic.** What a colour is applied to. | Set | Tokens | Use | | --- | --- | --- | @@ -24,15 +24,15 @@ A rule should not name a palette entry directly. The palette exists so the layer | Fills | `--fill-primary` through `--fill-quaternary` | The tint behind a small control | | Separators | `--separator`, `--separator-opaque` | Dividing content | | Backgrounds | `--bg-primary`, `--bg-secondary`, `--bg-tertiary` | The three layered surfaces | -| Backgrounds, elevated | `--bg-elevated-primary`, `--bg-elevated-secondary`, `--bg-elevated-tertiary` | The same three, for content over a sheet | +| Backgrounds, elevated | `--bg-elevated-primary`, `--bg-elevated-secondary`, `--bg-elevated-tertiary` | The same three, over a sheet | -Two singletons sit beside them. `--bg-primary-light` is the opt-in light widget card, the one surface that renders in the light theme. `--control-knob` is the white of a knob on a slider or a switch, which is drawn at full white in both themes. +Two singletons sit beside them. `--bg-primary-light` is the opt-in light widget card. `--control-knob` is the white of a slider or switch knob, full white in both themes. ## Two limits on the semantic layer -**Label levels below primary do not clear WCAG on this project's cards.** The ramp assumes the surfaces it was drawn against. Use `--sy-a11y-dim` for text that has to be read on a card; use a label level for hierarchy. `ui/test/contrast.test.mjs` computes the ratios and fails on a regression, so this is enforced rather than remembered. +**Label levels below primary do not clear WCAG on this project's cards.** Use `--sy-a11y-dim` for text that has to be read on a card. Use a label level for hierarchy. `ui/test/contrast.test.mjs` fails on a regression. -**The dashboard's glass is not built from Fills.** Its overlays are pure white at low alpha over a wallpaper. The kit's fills are grey-tinted and assume an opaque surface beneath. Substituting one for the other changes the look. +**The dashboard's glass is not built from Fills.** The glass is white at low alpha over a wallpaper. Fills are grey-tinted and assume an opaque surface. Substituting one for the other changes the look. ## The face @@ -42,15 +42,15 @@ One stack, everywhere: -apple-system, BlinkMacSystemFont, system-ui, sans-serif ``` -`--font-ui` holds it for the two pages. `ui/test/font-stack.test.mjs` fails on any other spelling, including in the widget guide and the widget template. +`--font-ui` holds it. `ui/test/font-stack.test.mjs` fails on any other spelling, including in the widget guide and the widget template. -Do not name `SF Pro Display` or `SF Pro Text`. `-apple-system` resolves to the system face and picks the optical cut for the size it is used at, Text below 20 and Display at 20 and above. Naming a cut pins it. The dashboard used to ask for Display and the admin page for Text, and most widgets asked for Display at 11px, which is the cut meant for large sizes. +Do not name an optical cut. The stack resolves to the system face and picks the cut for the size it is drawn at: Text below 20, Display at 20 and above. Naming a cut pins it. -`monospace` is the exception, for the code spans in the admin hints. +`monospace` is the exception, for code spans in the admin hints. ## Type -Eleven text styles, at the default Dynamic Type step. Three tokens each: `--fs-