feat: redesign the clock as a full page display - #14
Conversation
- Replace the photo background with a wash built from the customer accent - Call setupTheme so brand colours reach the app for the first time - Scale the time to roughly two thirds of the canvas, with tabular numerals - Swap Kelly Slab for Inter, already bundled by the SDK - Remove app-header, leaving auto-scaler as the only component in the markup
- Use isLightColor from the SDK to test the resolved accent colour - Redefine the canvas, ink and rule tokens under a single body class Requires @screenly/edge-apps v1.5.0, which is not published yet.
|
Added light brand support. The app now calls Blocked on Screenly/edge-apps-library#73, which adds Tested against 14 accent colours. Eight flip to light: yellow, green, cyan, pink, orange, pale yellow, pale pink and lime. Worst measured contrast in light mode is 4.5:1 on the muted place name and 14.8:1 on the digits, which is in line with the dark palette. |
- Add a Style select to both manifests, defaulting to traditional - Fall back to traditional for any value the build does not recognise - Drive the type scale from custom properties so each style is one block - Modern is left aligned and heavier, minimal is lighter with a faint wash
1 participant
Rebuilds the clock as a single centred column on a dark canvas, with the time at roughly two thirds of the width and tabular numerals so the digits do not shuffle as they tick. The photo background is gone, replaced by a soft wash derived from the customer's accent colour. This is the first time the app calls
setupTheme(), so brand colours actually reach it rather than being ignored. Removingapp-headerleavesauto-scaleras the only component in the markup.The wash was tested against 14 accent colours including the awkward ones. An early version tinted too wide and too faint, which turned yellow brands muddy and made dark navy invisible, so it is now tighter and stronger. Worst measured contrast is about 5:1 on the muted place name against a pale accent, and near 19:1 on the digits. Dropping
bg.webpand the Kelly Slab TTF in favour of the SDK's bundled Inter takes the CSS bundle from 1,568 kB to 456 kB.Screenshots regenerated at all ten resolutions. Worth knowing: at 2160x4096 and 800x480 the design sits above centre. That is the known
auto-scalervertical centring defect, not this change, and it is left uncompensated deliberately.