fix(kanban): diagnostic severity colours follow the dashboard theme

The three `--hermes-diag-*` tokens were literals declared on the consuming
elements, so the theme engine's `<html>`-level custom properties could never
reach them and light presets rendered the warning badge at 1.8:1 contrast.
Chain them through the host tokens themes already set (`--color-warning`,
`--color-destructive`) with the shipped literals as fallbacks; same selector
list, so nodes rendered outside `.hermes-kanban` keep a value. Error and
critical share `--color-destructive` (critical keeps its bold weight).

Co-authored-by: liuhao1024 <sunsky.lau@gmail.com>
This commit is contained in:
teknium1
2026-09-19 22:51:51 -07:00
committed by Teknium
parent 1e9d402e07
commit 1e4cd9ade6
2 changed files with 31 additions and 4 deletions

View File

@@ -1353,14 +1353,18 @@
/* ---------------------------------------------------------------------- */
/* Severity token variables so every diagnostic-coloured surface uses the */
/* same palette. */
/* same palette. Chained through the host's theme tokens (the dashboard */
/* theme engine writes --color-* on <html>) so the rungs follow the active */
/* theme like every other colour here; the literals are only the fallback */
/* for hosts that define no tokens. Declared on the consuming elements, not */
/* .hermes-kanban: diagnostic nodes can render outside that container. */
.hermes-kanban-diag,
.hermes-kanban-attention,
.hermes-kanban-warning-badge,
.hermes-kanban-attention-row {
--hermes-diag-warning: #ff9e3b;
--hermes-diag-error: #ff6b3d;
--hermes-diag-critical: #ff4d4d;
--hermes-diag-warning: var(--color-warning, #ff9e3b);
--hermes-diag-error: var(--color-destructive, #ff6b3d);
--hermes-diag-critical: var(--color-destructive, #ff4d4d);
}
/* Warning-badge severity variants (overrides the base colour). */

View File

@@ -1304,3 +1304,26 @@ def test_touch_card_tap_opens_instead_of_dragging():
)
assert result.returncode == 0, f"stdout={result.stdout!r} stderr={result.stderr!r}"
assert "PASS" in result.stdout
# ---------------------------------------------------------------------------
# Diagnostic severity colours follow the dashboard theme
# ---------------------------------------------------------------------------
def test_diag_severity_tokens_route_through_host_theme_tokens():
"""The three ``--hermes-diag-*`` rungs must resolve through the host's
``--color-warning`` / ``--color-destructive`` tokens (#115118). They were
literals declared on the consuming elements, which no theme override can
reach (the theme engine writes custom properties on ``<html>`` and an
element-level declaration always wins), so light themes rendered the
amber badge at 1.8:1 contrast with no way to fix it. Headless-Chrome
receipt: with the tokens set on ``<html>`` the computed colours follow;
with none set the shipped literals render unchanged.
"""
css = (Path(__file__).resolve().parents[2] / "plugins" / "kanban" / "dashboard" / "dist" / "style.css").read_text(encoding="utf-8")
block = css[css.index("--hermes-diag-warning"):]
block = block[: block.index("}")]
assert "--hermes-diag-warning: var(--color-warning, #ff9e3b)" in block
assert "--hermes-diag-error: var(--color-destructive, #ff6b3d)" in block
assert "--hermes-diag-critical: var(--color-destructive, #ff4d4d)" in block