From 76d2dcdc8e10e61599d070cdd0eae6cb6394852c Mon Sep 17 00:00:00 2001
From: Teknium <127238744+teknium1@users.noreply.github.com>
Date: Thu, 7 May 2026 06:51:52 -0700
Subject: [PATCH] fix(kanban): make code/pre styling theme-immune across all
 themes (#21086) (#21247)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The original #21086 report was theme-accent opaque fills behind JSON
payload values in the Kanban Task Drawer's EVENTS section. The first
iteration of this fix was narrow — add ``!important`` to the specific
drawer/payload overrides. But "all themes" includes user-installable
themes we haven't written yet, and any theme doing the normal
``code { background: ... !important }`` dance would break this again.

Replace the whack-a-mole approach with a structural reset:

1. Inside ``.hermes-kanban`` (and the ``.hermes-kanban-drawer`` portal
   container), reset EVERY ``<code>`` and ``<pre>`` to transparent
   with ``!important``. This is the new default.

2. Opt back in ONLY on the classes that carry intentional pill
   styling:
   - ``.hermes-kanban .hermes-kanban-md code`` (inline code in task
     Markdown body) — ``:not()`` scoped to exclude fenced blocks.
   - ``.hermes-kanban pre.hermes-kanban-md-code`` (fenced block
     wrapper) — higher specificity than the reset so it wins cleanly.

Net effect: any theme — shipped or third-party — can ship whatever
global ``code``/``pre`` rule it wants; kanban surfaces stay clean
unless the theme deliberately targets our internal class names, which
would be a conscious override rather than an accidental breakage.

Verified live against a hostile synthetic theme that paints
``code``, ``pre``, AND ``.hermes-kanban code`` / ``.hermes-kanban pre``
with ``background: !important`` fills. Every kanban surface stayed
correct (transparent where expected, intentional pill fill where
expected). Also verified across all 7 shipped themes by pointing a
headless browser at a live dashboard.

| Surface                                            | Expected           | Got               |
|----------------------------------------------------|--------------------|-------------------|
| Outside ``.hermes-kanban`` (sanity)                | hostile fill       | hostile fill ✓    |
| Drawer ``.hermes-kanban-event-payload`` (the bug)  | transparent        | transparent ✓     |
| Drawer bare ``<code>``                             | transparent        | transparent ✓     |
| Drawer bare ``<pre>``                              | transparent        | transparent ✓     |
| Markdown inline ``<code>``                         | subtle pill        | subtle pill ✓     |
| Markdown fenced block ``.hermes-kanban-md-code``   | subtle pill        | subtle pill ✓     |
| Markdown fenced inner ``<code>``                   | transparent        | transparent ✓     |

Closes #21086.
---
 plugins/kanban/dashboard/dist/style.css | 67 +++++++++++++++++++++----
 1 file changed, 58 insertions(+), 9 deletions(-)

diff --git a/plugins/kanban/dashboard/dist/style.css b/plugins/kanban/dashboard/dist/style.css
index 2555836b2a..ec8934d314 100644
--- a/plugins/kanban/dashboard/dist/style.css
+++ b/plugins/kanban/dashboard/dist/style.css
@@ -9,14 +9,56 @@
   width: 100%;
 }
 
-/* Override the Nous DS global `code { background: var(--midground) }` rule
-   which paints an opaque cream/yellow fill on every <code> inside the board,
-   hiding the text underneath. Kanban uses <code> for event payloads, run-meta,
-   and log panes — those need transparent backgrounds. */
-.hermes-kanban code {
-  background: transparent;
+/* ---- Code/pre reset (theme-immune default) --------------------------- *
+ *
+ * Themes (shipped AND user-installable) routinely paint every <code> and
+ * <pre> on the page with an opaque accent-color fill. That's fine for a
+ * Markdown doc page; it's wrong for the kanban plugin, which uses <code>
+ * for event payloads, run metadata, log panes, and similar raw-data
+ * surfaces that must read as plain text on the board's own background.
+ *
+ * Rather than play whack-a-mole with theme rules (the pre-#21086 approach
+ * was a single ``.hermes-kanban code { background: transparent }`` rule
+ * that lost specificity fights in the drawer context), reset EVERY
+ * <code>/<pre> inside the kanban plugin container to transparent with
+ * ``!important``, then opt back in ONLY on the class that carries
+ * intentional styling (``.hermes-kanban-md code``, the inline code pill
+ * inside rendered task-body Markdown).
+ *
+ * Net effect: any new theme, shipped or third-party, can introduce
+ * whatever global code-fill rule it wants — kanban surfaces stay clean
+ * unless the theme deliberately targets our internal class names.
+ * Regression coverage: #21086 (task-drawer event payloads unreadable
+ * across every shipped theme).
+ */
+.hermes-kanban code,
+.hermes-kanban pre,
+.hermes-kanban-drawer code,
+.hermes-kanban-drawer pre {
+  background: transparent !important;
   color: inherit;
 }
+/* The Markdown renderer intentionally paints a subtle code pill behind
+ * inline ``<code>`` inside task-body prose — but NOT inside a fenced
+ * block (those are a ``<pre class="hermes-kanban-md-code">`` with a
+ * bare ``<code>`` inside, and the pill would double up with the pre
+ * background). ``:not()`` scopes this opt-back-in to inline code only.
+ *
+ * Uses ``color-mix(currentColor ...)`` rather than ``--color-foreground``
+ * so the pill renders consistently even when a theme forgets to set
+ * ``--color-foreground`` (pre-existing safeguard from #18576).
+ */
+.hermes-kanban .hermes-kanban-md code:not(.hermes-kanban-md-code *) {
+  background: color-mix(in srgb, currentColor 8%, transparent) !important;
+}
+/* Tighten contrast on the drawer-specific payload class — it lives on
+ * its own line in the events list, so matching the muted-foreground
+ * color keeps it visually distinct from the event title without
+ * screaming for attention. */
+.hermes-kanban-event-payload,
+.hermes-kanban-drawer .hermes-kanban-event-payload {
+  color: var(--color-muted-foreground) !important;
+}
 
 /* ---- Columns layout -------------------------------------------------- */
 
@@ -668,7 +710,9 @@
   font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 0.8rem;
   padding: 0.05rem 0.3rem;
-  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
+  /* Background is set in the code/pre reset block at the top of this
+   * file with !important, so theme-level global code rules can't knock
+   * out this intentional pill. See #21086. */
   border-radius: 3px;
   color: inherit;
 }
@@ -678,10 +722,15 @@
  * UA default on <code> elements — otherwise themes that don't set
  * --color-foreground leave code text rendering near-black on dark themes
  * (see issue #18576). */
-.hermes-kanban-md-code {
+.hermes-kanban pre.hermes-kanban-md-code {
   margin: 0.35rem 0;
   padding: 0.5rem 0.6rem;
-  background: color-mix(in srgb, currentColor 6%, transparent);
+  /* Higher specificity (``.hermes-kanban pre.hermes-kanban-md-code`` vs
+   * the reset's ``.hermes-kanban pre``) so this intentional pill wins
+   * over our own ``<pre>`` reset. ``!important`` also needed so theme
+   * rules that drop their own ``code``/``pre`` fill don't knock it out
+   * either. #21086. */
+  background: color-mix(in srgb, currentColor 6%, transparent) !important;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm, 0.25rem);
   overflow-x: auto;