mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-07-12 14:00:57 +00:00
Kpa-clawbot
f0addfdabf
Red commit: d761516d60 (no CI run —
branch-only push does not trigger workflows on this repo; verified
locally: `node test-issue-1668-m2-contrast.js` fails on assertion at
HEAD~1, passes at HEAD)
Partial fix for #1668 (M2 of 6). Fixes #1671.
## What changed
**Two-tier CSS tokens** introduced in `public/style.css`:
1. **Tier-1 (`--palette-*`)** — 38 raw colour stops, theme-independent,
in a single
`:root` block at the top of the file. Source: Tailwind v3 default
palette (MIT,
battle-tested for WCAG-graded luminance steps).
- gray ×9, blue ×9, green ×5, amber ×5, red ×5, purple ×5
- Single source of truth: no rule outside this block uses raw
`#hex`/`rgb()`.
2. **Tier-2 (semantic)** — existing `--text`, `--text-muted`,
`--surface-*`, etc.
re-plumbed to point at palette stops in both theme blocks. Behaviour
preserved
where contrast was already AA.
**WCAG AA bumps for M1 BLOCKER tokens**:
| Token / surface | Before | After | Theme |
|---|---:|---:|---|
| `--text-on-accent` on `--accent-strong` (was `#fff` on `--accent`) |
2.75:1 | **4.95:1** | dark + light |
| `--text-muted` on `--surface-1` | ~3.5:1 | **11.58:1** | dark |
| `--text-muted` on `--card-bg` | ~5.0:1 | **10.28:1** | dark |
| `--text-muted` on `#ffffff` | 5.74:1 | **10.31:1** | light |
| `--text-muted` on `--surface-0` | 5.32:1 | **9.45:1** | light |
**New tokens**: `--accent-strong` (= `--palette-blue-600` = `#2563eb`),
`--text-on-accent` (= `--palette-gray-50` = `#f9fafb`), `--text-subtle`.
Rules migrated to the new accent pair (all were `#fff` on
`var(--accent)` =
2.75:1 in the M1 audit): `.skip-link`, `.tab-btn.active`,
`.filter-bar .btn.active`, `.filter-group .btn.active`,
`[data-theme="dark"] .filter-bar .btn.active`, `.path-hops .hop-named`.
## Operator-reported chip (2026-06-12 — `.hop-named.hop-link`)
Dark-blue text on dark-blue chip background. Patched via `.path-hops
.hop-named`
+ `--accent-strong`. Now reads as `#f9fafb` on `#2563eb` = 4.95:1 (AA
pass) in
both themes. Before/after screenshots: see
`a11y-audit/m2-screenshots/{before,after}-packets-{dark,light}-1200x900.jpg`.
Letsmesh's UI uses chip text at 6.77:1 on equivalent surfaces; this PR
closes
most of the gap.
## TDD trail
- Red commit `d761516d` — assertion-based contrast test, fails on
missing palette.
- Green commit `e5e87309` — palette + remap + bumps + AA pass.
- Anti-tautology: reverting dark `--text-muted` back to `#6b7280`
reproduces
`text-muted on surface (dark): contrast 3.53:1 < 4.5:1`.
## Preflight
`bash ~/.openclaw/skills/pr-preflight/scripts/run-all.sh origin/master`
→ all
gates pass (incl. CSS-var-defined: 1928 var() refs, 0 undefined).
## Not in this PR (intentional)
- M3 typography (`14px` floor + weight 500 for chips/badges) — own PR
- M4-M5 per-route polish — own PRs
- M6 axe CI gate — own PR
- Shipping an alternate palette — deferred, indirection enables it
---------
Co-authored-by: openclaw-bot <bot@openclaw.dev>
