bvandeusen/FabledSteward
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(ui): status text readable on its tint over a hovered row, a 3:1 outline on controls, contrast as a CI guard (#5096)
CI / lint (push) Successful in 3s
Details
CI / integration (push) Successful in 1m8s
Details
CI / unit (push) Failing after 1m34s
Details
CI / publish (push) Skipped
Details

Browse Source 
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:
bvandeusen
2026-10-06 19:30:37 -04:00
co-authored by Claude Opus 5.5
parent ad4f7d9232
commit bf339ed28c
5 changed files with 174 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
steward/static/steward.css
+17 -12
View File
@@ -3,9 +3,9 @@
* Values come from theme.css, the stylesheet design system 6 ("Steward",
* inheriting FabledSword) generates. The short names below are Steward's
* aliases onto those tokens, kept so templates written against them still
* render; new work writes the --fs-* token. Contrast measured 2026-10-06
* (#5092): every text colour here is at least 4.5:1 on page, card, hover
* and its own 15-25% tint.
* render; new work writes the --fs-* token. Contrast is a CI guard
* (tests/test_contrast.py): text 4.5:1 and control outlines 3:1 on page,
* card and hover, and status text on its own tint over each of them.
*/
:root {
--bg: var(--fs-surface-page);
@@ -13,6 +13,9 @@
--bg-elevated: var(--fs-surface-hover);
--border: color-mix(in srgb, var(--fs-border-color) 70%, var(--fs-surface-raised));
--border-mid: var(--fs-border-color);
/* The outline that marks a control (input, select, ghost button): 3:1 on
page, card and hover (WCAG 1.4.11), where --border-mid is ~1.4-1.9:1. */
--border-control: color-mix(in srgb, var(--fs-text-secondary) 45%, var(--fs-border-color));
--text: var(--fs-text-primary);
--text-muted: var(--fs-text-secondary);
--text-dim: var(--fs-text-tertiary);
@@ -21,15 +24,17 @@
--gold-dim: var(--fs-accent-soft);
--accent: var(--fs-accent);
--accent-hover: var(--gold-hover);
/* Status: the -fg colour is the text and indicator; the -dim tint sits behind it. */
/* Status: the -fg colour is the text and indicator; the -dim tint sits behind it.
Warning, error and their mix are lifted toward the primary text: the house
-fg falls to ~4.0:1 on its own tint over a hovered row (#5096). */
--green: var(--fs-success-fg);
--green-dim: color-mix(in srgb, var(--fs-success) 20%, transparent);
--yellow: var(--fs-warning-fg);
--yellow: color-mix(in srgb, var(--fs-warning-fg) 85%, var(--fs-text-primary));
--yellow-dim: color-mix(in srgb, var(--fs-warning) 20%, transparent);
/* Between warning and error: the worse-than-warning band (slow, degraded). */
--orange: color-mix(in srgb, var(--fs-warning-fg) 50%, var(--fs-error-fg));
--orange: color-mix(in srgb, color-mix(in srgb, var(--fs-warning-fg) 50%, var(--fs-error-fg)) 82%, var(--fs-text-primary));
--orange-dim: color-mix(in srgb, var(--fs-warning) 20%, transparent);
--red: var(--fs-error-fg);
--red: color-mix(in srgb, var(--fs-error-fg) 85%, var(--fs-text-primary));
--red-dim: color-mix(in srgb, var(--fs-error) 20%, transparent);
/* Info (acknowledged): lighter than the house --fs-info-fg (50%), which falls
to 4.18:1 on its tint over a hovered row; 40% holds 5.09:1 there. */
@@ -181,7 +186,7 @@ strong, b, th { font-weight: 500; }
.form-group { margin-bottom: 1rem; }
label { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; color: var(--text-muted); font-family: var(--fs-font-body); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], select, textarea {
width: 100%; padding: 0.5rem 0.75rem; background: var(--bg); border: 1px solid var(--border-mid);
width: 100%; padding: 0.5rem 0.75rem; background: var(--bg); border: 1px solid var(--border-control);
border-radius: 5px; color: var(--text); font-size: 0.9rem; font-family: inherit;
transition: border-color .15s;
}
@@ -197,7 +202,7 @@ textarea { resize: vertical; }
.field-label { display: block; margin-bottom: 0; font-size: 0.75rem; color: var(--text-muted); }
.field-hint { font-size: 0.75rem; color: var(--text-dim); }
.field-error { font-size: 0.85rem; color: var(--red); margin-bottom: 0.75rem; }
.input { width: 100%; padding: 0.4rem 0.65rem; background: var(--bg); border: 1px solid var(--border-mid); border-radius: var(--fs-radius-sm); color: var(--text); font-size: 0.88rem; font-family: inherit; }
.input { width: 100%; padding: 0.4rem 0.65rem; background: var(--bg); border: 1px solid var(--border-control); border-radius: var(--fs-radius-sm); color: var(--text); font-size: 0.88rem; font-family: inherit; }
.input:focus { outline: none; border-color: var(--accent); }
.input:disabled { opacity: var(--fs-disabled-opacity); }
@@ -206,7 +211,7 @@ textarea { resize: vertical; }
.btn:hover { background: var(--accent-hover); color: var(--fs-surface-page); }
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
.btn-icon { padding: 0.3rem 0.5rem; line-height: 1; }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border-mid); }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border-control); }
.btn-ghost:hover { background: var(--bg-elevated); color: var(--text); }
.btn-danger { background: var(--fs-action-destructive); color: var(--fs-text-on-action); }
.btn-danger:hover { background: var(--fs-action-destructive-hover); color: var(--fs-text-on-action); }
@@ -302,7 +307,7 @@ a.stat-tile:hover { border-color: var(--border-mid); background: var(--bg-elevat
.breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:0.35rem; font-size:0.78rem; color:var(--text-dim); margin:0 0 0.45rem; }
.breadcrumb a { color:var(--text-muted); }
.breadcrumb a:hover { color:var(--text); }
.breadcrumb-sep { color:var(--border-mid); }
.breadcrumb-sep { color:var(--text-dim); }
.breadcrumb-cur { color:var(--text-muted); }
/* Stat cards (dashboard) */
@@ -369,6 +374,6 @@ body.dash-editing .widget-drawer { transform:translateY(0); }
.widget-link:hover { color:var(--text); }
/* Time range selector */
.range-btn { background:none; border:1px solid var(--border-mid); border-radius:4px; color:var(--text-muted); padding:0.18rem 0.5rem; cursor:pointer; font-size:0.75rem; font-family:inherit; transition:background .1s,color .1s,border-color .1s; }
.range-btn { background:none; border:1px solid var(--border-control); border-radius:4px; color:var(--text-muted); padding:0.18rem 0.5rem; cursor:pointer; font-size:0.75rem; font-family:inherit; transition:background .1s,color .1s,border-color .1s; }
.range-btn:hover { background:var(--bg-elevated); color:var(--text); border-color:var(--accent); }
.range-btn.active { background:var(--accent); border-color:var(--accent); color:var(--fs-surface-page); }
steward/templates/_macros.html
+2 -2
View File
@@ -9,9 +9,9 @@
{%- if loop.last -%}
<span class="breadcrumb-cur" aria-current="page">{{ label }}</span>
{%- elif href -%}
<a href="{{ href }}">{{ label }}</a><span class="breadcrumb-sep">›</span>
<a href="{{ href }}">{{ label }}</a><span class="breadcrumb-sep" aria-hidden="true">›</span>
{%- else -%}
<span>{{ label }}</span><span class="breadcrumb-sep">›</span>
<span>{{ label }}</span><span class="breadcrumb-sep" aria-hidden="true">›</span>
{%- endif -%}
{%- endfor -%}
</nav>
steward/templates/dashboard/_widget_drawer.html
+3 -10
View File
@@ -33,26 +33,19 @@
<label style="font-size:0.74rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">
Widget title <span style="color:var(--text-dim);">(optional)</span>
</label>
<input type="text" name="title" placeholder="{{ w.label }}"
style="width:100%;padding:0.32rem 0.6rem;background:var(--bg);
border:1px solid var(--border-mid);border-radius:4px;
color:var(--text);font-size:0.85rem;">
<input type="text" name="title" placeholder="{{ w.label }}" class="input">
</div>
{% for p in w.params %}
<div>
<label style="font-size:0.74rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">{{ p.label }}</label>
{% if p.type == "select" %}
<select name="param_{{ p.key }}"
style="width:100%;padding:0.32rem 0.6rem;background:var(--bg);
border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.85rem;">
<select name="param_{{ p.key }}" class="input">
{% for opt in p.options %}
<option value="{{ opt.value }}" {% if opt.value == p.default %}selected{% endif %}>{{ opt.label }}</option>
{% endfor %}
</select>
{% elif p.type == "host" %}
<select name="param_{{ p.key }}" required
style="width:100%;padding:0.32rem 0.6rem;background:var(--bg);
border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.85rem;">
<select name="param_{{ p.key }}" required class="input">
<option value="">— select a host —</option>
{% for h in hosts %}
<option value="{{ h.id }}">{{ h.name }}</option>
steward/templates/dashboard/index.html
+1 -2
View File
@@ -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 %}