fix(ui): status text readable on its tint over a hovered row, a 3:1 outline on controls, contrast as a CI guard (#5096)
An audit of 1,980 text/surface pairs (every steward.css rule and every inline template style, tints composited over page, card and hovered row) found: - Red, yellow and orange status text on its own 20% tint over a hovered row at 3.97-4.06:1 (badges, count badge, alert-error, btn-warn). --red and --yellow are lifted 15% toward the primary text, --orange 18%, as --blue already was: worst case now 4.54:1. - Inputs, selects, ghost and range buttons outlined in --border-mid at 1.4-1.9:1, on surfaces 1.1:1 apart, so the outline is what marks them. New --border-control (45% toward secondary text): 3.13:1 worst. The dashboard switcher and widget-drawer fields drop their inline styles for the shared .input class. - The breadcrumb separator painted in a border colour (1.4-1.9:1): now --text-dim (4.64:1) and aria-hidden, since it is decoration. tests/test_contrast.py resolves the tokens (color-mix and tints included) and holds every drawn pair to 4.5:1, status text on its tint to 4.5:1 and control outlines to 3:1, with a test that the guard catches the old pairs. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -18,8 +18,7 @@
|
||||
<div style="display:flex;align-items:center;gap:0.75rem;">
|
||||
{# Dashboard switcher — shown when more than one dashboard exists #}
|
||||
{% if all_dashboards | length > 1 %}
|
||||
<select onchange="window.location='/d/'+this.value"
|
||||
style="font-size:0.82rem;padding:0.3rem 0.6rem;background:var(--bg-card);border:1px solid var(--border-mid);border-radius:5px;color:var(--text);cursor:pointer;">
|
||||
<select onchange="window.location='/d/'+this.value" class="input" style="width:auto;" aria-label="Dashboard">
|
||||
{% for d in all_dashboards %}
|
||||
<option value="{{ d.id }}" {% if d.id == dashboard.id %}selected{% endif %}>{{ d.name }}</option>
|
||||
{% endfor %}
|
||||
|
||||
Reference in New Issue
Block a user