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:
12
plugins/kanban/dashboard/dist/style.css
vendored
12
plugins/kanban/dashboard/dist/style.css
vendored
@@ -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). */
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user