feat(web): score heat scale, drop release row expand
ci / web (push) Successful in 1m28s
ci / rust (push) Successful in 2m33s
e2e / e2e (push) Successful in 3m13s

Score cells interpolate red-to-green relative to the scores in the
current deck; the click-to-expand panel only repeated row content.
This commit is contained in:
Miguel Palhas
2026-08-23 11:13:11 +01:00
parent d6345c5305
commit 9f0ccb0416
3 changed files with 79 additions and 88 deletions
+39 -34
View File
@@ -51,6 +51,16 @@
--verdict-waived: oklch(0.82 0.14 80);
--verdict-rejected: oklch(0.68 0.02 250);
/* score heat scale (issue #111) — one list-relative gradient from lowest
red to highest green; JS picks the stop, colour stays in tokens */
--score-0: oklch(0.68 0.19 25);
--score-1: oklch(0.7 0.185 46);
--score-2: oklch(0.72 0.175 67);
--score-3: oklch(0.75 0.165 88);
--score-4: oklch(0.77 0.16 108);
--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 */
--status-airing: oklch(0.78 0.14 305);
@@ -994,7 +1004,7 @@ body {
border-bottom: 1px solid oklch(from var(--line) l c h / 45%);
}
/* the whole line is the expand affordance; grab is its own control */
/* the line is plain content now — grab is its own control */
.rel-line {
flex: 1;
min-width: 0;
@@ -1002,20 +1012,6 @@ body {
align-items: center;
flex-wrap: wrap;
gap: var(--space-1);
padding: 0;
font: inherit;
text-align: left;
color: inherit;
background: none;
border: 0;
border-radius: var(--radius);
cursor: pointer;
transition: background 150ms var(--ease-out);
}
.rel-line:hover,
.rel-line:focus-visible {
background: var(--panel);
}
/* §9.3: the release name is secondary — evidence, not the primary key */
@@ -1044,25 +1040,34 @@ body {
color: var(--signal-fault);
}
.rel-full {
flex-basis: 100%;
padding: var(--space-2) var(--space-3);
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: inset 0 1px var(--highlight);
/* score heat: data-score is the list-relative stop, 0 lowest … 6 highest */
.rel-line .cw-score[data-score="0"] {
color: var(--score-0);
border-color: oklch(from var(--score-0) l c h / 45%);
}
.rel-raw {
margin: 0;
overflow-wrap: anywhere;
font-size: var(--text-xs);
color: var(--ink);
.rel-line .cw-score[data-score="1"] {
color: var(--score-1);
border-color: oklch(from var(--score-1) l c h / 45%);
}
.rel-meta {
margin: var(--space-1) 0 0;
font-size: var(--text-2xs);
.rel-line .cw-score[data-score="2"] {
color: var(--score-2);
border-color: oklch(from var(--score-2) l c h / 45%);
}
.rel-line .cw-score[data-score="3"] {
color: var(--score-3);
border-color: oklch(from var(--score-3) l c h / 45%);
}
.rel-line .cw-score[data-score="4"] {
color: var(--score-4);
border-color: oklch(from var(--score-4) l c h / 45%);
}
.rel-line .cw-score[data-score="5"] {
color: var(--score-5);
border-color: oklch(from var(--score-5) l c h / 45%);
}
.rel-line .cw-score[data-score="6"] {
color: var(--score-6);
border-color: oklch(from var(--score-6) l c h / 45%);
}
/* ---- library view (§4.2) ---------------------------------------------- */
@@ -1236,8 +1241,8 @@ body {
/* ---- narrow deck (§9.3 at phone widths) ------------------------------- */
/* the full seven-column line is 36rem; under 40rem it cannot fit, so hdr
and audio leave the line (the expand row carries them) and the five
surviving columns tighten — aligned, never wrapped, never scrolled */
and audio leave the line and the five surviving columns tighten —
aligned, never wrapped, never scrolled */
@media (max-width: 40rem) {
.colhead .cw,
.rel-line .chip {