Redesign UI color system: neutral ink chrome, sources own the chroma
The light lavender theme carried its color in decoration -- four colored background blobs, a conic-gradient brand mark, gradient-clipped wordmark, a four-color animated button, a spinning conic empty mark, and a five-color spectrum rail. All of that competed with the only color on screen that carries meaning: which source a story came from. - One indigo-slate ink ramp (bg / surface / line / ink) carries every neutral surface; the only saturated hues are the three sources, used strictly as signals -- filter pill, card spine, source chip, timestamp, feed health. - Rule for every filled state: bright fill, deep ink type. Source tokens kept in sync between :root and View::sourceColor(). - Signature "signal bars": a CSS brand mark of three ascending bars in the source hues, and the header rail re-cut into three wire segments that double as the palette legend. The empty state reuses the mark, unlit and static. - Bootstrap switched to data-bs-theme="dark" with matching form controls, alerts, and focus rings; --ink-faint recalibrated so small text clears WCAG 4.5:1 on every surface. Reduced-motion behavior unchanged. - README documents the two rules next to View::sourceColor().
This commit is contained in:
@@ -461,6 +461,23 @@ sourceColor('hackernews') // hex used for the card spine, chip and active pill
|
||||
|
||||
The source tab and filter pill are generated automatically from `sources()`.
|
||||
|
||||
### Colour system (`assets/style.css`)
|
||||
|
||||
The dashboard has **no house colour**. One ink ramp (`--bg` → `--ink`) carries
|
||||
every neutral surface, line, and label, and the only saturated colour on screen
|
||||
belongs to the sources — used strictly as a signal: filter pill, card spine,
|
||||
source chip, timestamp, feed health. Two rules hold it together:
|
||||
|
||||
- **Bright fill, deep ink type.** Every filled state (active pill, source chip,
|
||||
primary action) is a bright fill with `--ink-deep` type — no white text on
|
||||
saturated fills, no gradient fills.
|
||||
- **One hue per source, mirrored in two places.** `:root` defines the token
|
||||
(`--youtube`, `--reddit`, `--rt`) and `View::sourceColor()` returns the same
|
||||
hex for the inline `--src`/`--pill` values the templates emit. Change both.
|
||||
|
||||
The header rail (`.wire-rail`) is the colour legend: one segment per source, in
|
||||
order.
|
||||
|
||||
---
|
||||
|
||||
## Deployment notes (Apache + php-fpm on SELinux, e.g. Fedora)
|
||||
|
||||
Reference in New Issue
Block a user