Status Chip Colors
Status chips — technical
Raised by Dave 2026-09-08: "The Buy List chips are not colored, add color and make sure all chips have it." Root cause was two-part — po_buylist.html / po_buylists.html carried their own .pill-* copies, and their status branches tested words (Completed / In Process / Open) that buy_list_display_status() never returns, so every list fell through to the pale catch-all and the page read as uncolored.
Where the colors live
One place: app/templates/base.html.
`` .pill base chip: pill shape, 12px/600, 1px border, nowrap .pill-ok green #e3f4e9 / #8fcaa6 / #14683c .pill-po blue #e4eefb / #8fb6e4 / #14508a .pill-info violet #ece7fb / #b3a4e6 / #4b34a5 .pill-warn amber #fdf0cd / #e8b93b / #7a5b00 .pill-bad red #fbe2e0 / #e39a94 / #a2201a .pill-muted grey #eef1f4 / #cfd6dd / #5c6773 .pill-neutral slate #e8edf2 / #b8c3ce / #37424e <- catch-all ``
.rush-chip (RUSH badge) keeps its own red style in base.html.
Status → class map
PILL_CLASSES and pill_class() in app/im2.py, exposed to Jinja as the pill filter (TEMPLATES.env.filters["pill"]). Lookup is lower-cased and trimmed; an unmapped word returns pill-neutral, so a chip is never colorless.
| class | statuses |
|---|---|
| pill-ok | ready to order, open |
| pill-po | ordered, completed, released |
| pill-info | saved, draft |
| pill-warn | pending count, in process, counting |
| pill-bad | cancelled, canceled, error, deleted in qb, rush |
| pill-muted | dropped |
Rules for future screens
- Render a status as
<span class="pill {{ status|pill }}">{{ status }}</span>. - Never redefine
.pill-*in a page{% block head %}— that is what broke the Buy List. Change colors inbase.htmlonly. - Add a new status word to
PILL_CLASSES, not to a template{% if %}chain. Template branches per status drift out of sync with the server-side status functions. - Chips must keep their text label; color is redundant information, not the only signal.
Files touched 2026-09-08: app/im2.py (PILL_CLASSES, pill_class, filter registration), app/templates/base.html (palette), po_buylist.html / po_buylists.html (Ver 5 — use the filter), plus removal of the duplicate .pill-* blocks from ro_imports, ro_inbox, ro_inbox_detail, ro_inquiry, ro_order, ro_picks.