lfg2025/deepstock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: priority badges use proper traffic-light colours

Browse Source 
The CRITICAL / HIGH / MEDIUM pills on the recommendation cards were
all routed through the brand-green palette (the --red, --orange,
--green-bright variables all resolve to greens), so urgency wasn't
readable at a glance. Switched to literal red / amber / yellow text
on matching soft-tinted backgrounds:

- CRITICAL  #C03030 on rgba(192,48,48,0.10)
- HIGH      #C16A18 on rgba(220,124,32,0.10)
- MEDIUM    #A48010 on rgba(212,168,32,0.12)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-05-10 10:55:21 +01:00
parent 8f74118a28
commit 6dca131724
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/styles.css
View File

@@ -700,9 +700,12 @@ input[type=range]::-moz-range-thumb {
.rec-cat { font-family: var(--font-mono); font-size:14px; color: var(--text-dim); letter-spacing: 0.12em; text-transform: uppercase; }
.rec-title { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--text); line-height: 1.2; }
.priority-badge { margin-left: auto; padding: 4px 10px; border-radius: 99px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; font-weight: 700; flex-shrink: 0; }
.p-critical { background: rgba(90,154,120,0.10); color: var(--red); border: 1px solid rgba(90,154,120,0.30); }
.p-high { background: rgba(184,152,106,0.12); color: var(--orange); border: 1px solid rgba(184,152,106,0.30); }
.p-medium { background: rgba(90,154,120,0.08); color: var(--green-bright); border: 1px solid rgba(90,154,120,0.20); }
/* Priority badges — proper traffic-light palette so urgency reads at a
glance. Backgrounds are soft tints of the same hue so the pill stays
light and the text colour does the colour-coding. */
.p-critical { background: rgba(192,48,48,0.10); color: #C03030; border: 1px solid rgba(192,48,48,0.30); }
.p-high { background: rgba(220,124,32,0.10); color: #C16A18; border: 1px solid rgba(220,124,32,0.32); }
.p-medium { background: rgba(212,168,32,0.12); color: #A48010; border: 1px solid rgba(212,168,32,0.35); }
.rec-body { padding: 14px 16px; }
.rec-items { display: flex; flex-direction: column; gap: 12px; }