yolo/arr
3
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): state ramp on status and counts chips

Browse Source 
Per amended DESIGN.md §4.2: green --signal-ok for on disk/complete,
amber --signal-warn for wanted-but-missing, violet --status-airing for
downloading, neutral for untracked and waiting. Stars go amber. Words
stay in every chip; verdict chips untouched.
This commit is contained in:
Miguel Palhas
2026-08-24 13:57:17 +01:00
parent 8221ea633c
commit 2dbb0f48f7
2 changed files with 98 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/style.css
+39 -17
View File
@@ -61,8 +61,9 @@
--score-5: oklch(0.79 0.165 129);
--score-6: oklch(0.8 0.17 150);
/* library status (§4.2) — informational, never a severity ramp:
activity in one violet family, satisfaction in neutrals */
/* library state ramp (§4.2): green satisfied, amber gap, violet active,
neutral nothing-happening. --status-airing doubles as the downloading
hue; the other four stay declared as the design.json mirror. */
--status-airing: oklch(0.78 0.14 305);
--status-incomplete: oklch(0.72 0.09 305);
--status-waiting: oklch(0.64 0.045 305);
@@ -665,32 +666,52 @@ body {
color: var(--verdict-rejected);
}
/* media state ramp (§4.2): green on disk, violet downloading, amber wanted
and still missing. Unwanted-missing and parked are nothing-happening and
stay neutral; `parked` exists so a vanished grab never reads as a gap. */
.chip[data-movie-state="available"] {
color: var(--ink);
color: var(--signal-ok);
border-color: oklch(from var(--signal-ok) l c h / 45%);
}
/* library status (§4.2): informational, never a severity ramp — activity in
the channel-violet family, satisfaction in neutrals; the word is always
present, so the state survives with colour removed */
.chip[data-movie-state="downloading"] {
color: var(--status-airing);
border-color: oklch(from var(--status-airing) l c h / 45%);
}
.chip[data-movie-state="missing"][data-wanted="true"] {
color: var(--signal-warn);
border-color: oklch(from var(--signal-warn) l c h / 55%);
}
/* library status ramp (§4.2): violet while activity is live, green once
everything wanted is on disk, amber for a grabbable gap; waiting is
between seasons with nothing to do, so it stays neutral */
.chip[data-status="airing"] {
color: var(--status-airing);
border-color: oklch(from var(--status-airing) l c h / 45%);
}
.chip[data-status="incomplete"] {
color: var(--status-incomplete);
}
.chip[data-status="waiting"] {
color: var(--status-waiting);
}
.chip[data-status="complete"] {
color: var(--status-complete);
color: var(--signal-warn);
border-color: oklch(from var(--signal-warn) l c h / 55%);
}
.chip[data-status="complete"],
.chip[data-status="ended"] {
color: var(--status-ended);
color: var(--signal-ok);
border-color: oklch(from var(--signal-ok) l c h / 45%);
}
/* season/series counts chip (§4.2): the same ramp read off N/M itself */
.chip[data-counts="complete"] {
color: var(--signal-ok);
border-color: oklch(from var(--signal-ok) l c h / 45%);
}
.chip[data-counts="partial"] {
color: var(--signal-warn);
border-color: oklch(from var(--signal-warn) l c h / 55%);
}
/* a TMDB row is the affordance: the whole row opens the add flow */
@@ -1598,10 +1619,11 @@ body {
color: var(--ink);
}
/* the star is amber (§4.2): rating reads at a glance, the number stays ink */
.star {
width: 0.75rem;
height: 0.75rem;
fill: var(--ink-muted);
fill: var(--signal-warn);
}
/* a row chip is smaller than the detail page's rating readout */