fix(ui/web): fix editable pill hover visibility in light themes

Refactor pill background to use scoped --_pill-bg and --_pill-bg-hover
custom properties (MD3 pattern). Each variant co-locates its base and
hover background values, and light-mode overrides reassign both.

The hover rule simply consumes var(--_pill-bg-hover), eliminating the
specificity battle that prevented the hover effect from appearing in
light themes.

diff --git a/ui/web/src/skins/modern/modern.css b/ui/web/src/skins/modern/modern.css
index 923627cf544debce23b0ea53fdbb75d1cb9a9ebb..6759f2ff6926a3782b915184a607a86fb88e699d 100644 (file)
--- a/ui/web/src/skins/modern/modern.css
+++ b/ui/web/src/skins/modern/modern.css
@@ -830,46 +830,57 @@ html[data-skin='modern'] #app {
  * tinted background. In light mode the overrides below keep the
  * darker state colour as text (Material 700 on white is readable). */
 .modern-pill--ok {
+  --_pill-bg: color-mix(in srgb, var(--color-state-ok) 26%, transparent);
+  --_pill-bg-hover: color-mix(in srgb, var(--color-state-ok) 12%, transparent);
   color: color-mix(in srgb, var(--color-state-ok) 55%, #ffffff 45%);
-  background-color: color-mix(in srgb, var(--color-state-ok) 26%, transparent);
+  background-color: var(--_pill-bg);
   border-color: color-mix(in srgb, var(--color-state-ok) 45%, transparent);
 }
 
 .modern-pill--warn {
+  --_pill-bg: color-mix(in srgb, var(--color-state-warn) 26%, transparent);
+  --_pill-bg-hover: color-mix(in srgb, var(--color-state-warn) 12%, transparent);
   color: color-mix(in srgb, var(--color-state-warn) 60%, #ffffff 40%);
-  background-color: color-mix(in srgb, var(--color-state-warn) 26%, transparent);
+  background-color: var(--_pill-bg);
   border-color: color-mix(in srgb, var(--color-state-warn) 50%, transparent);
 }
 
 .modern-pill--err {
+  --_pill-bg: color-mix(in srgb, var(--color-state-err) 26%, transparent);
+  --_pill-bg-hover: color-mix(in srgb, var(--color-state-err) 12%, transparent);
   color: color-mix(in srgb, var(--color-state-err) 55%, #ffffff 45%);
-  background-color: color-mix(in srgb, var(--color-state-err) 26%, transparent);
+  background-color: var(--_pill-bg);
   border-color: color-mix(in srgb, var(--color-state-err) 45%, transparent);
 }
 
 .modern-pill--idle {
+  --_pill-bg: var(--skin-state-idle-bg);
+  --_pill-bg-hover: color-mix(in srgb, var(--skin-state-idle-bg) 50%, transparent);
   color: var(--color-text-strong);
-  background-color: var(--skin-state-idle-bg);
+  background-color: var(--_pill-bg);
   border-color: var(--skin-border-strong);
 }
 
 /* Light-theme pill overrides — state colours are already dark (Material 700)
  * and readable on light backgrounds without white mixing. */
 :root[data-color-scheme='light'] .modern-pill--ok {
+  --_pill-bg: color-mix(in srgb, var(--color-state-ok) 14%, transparent);
+  --_pill-bg-hover: color-mix(in srgb, var(--color-state-ok) 4%, transparent);
   color: var(--color-state-ok);
-  background-color: color-mix(in srgb, var(--color-state-ok) 14%, transparent);
   border-color: color-mix(in srgb, var(--color-state-ok) 35%, transparent);
 }
 
 :root[data-color-scheme='light'] .modern-pill--warn {
+  --_pill-bg: color-mix(in srgb, var(--color-state-warn) 18%, transparent);
+  --_pill-bg-hover: color-mix(in srgb, var(--color-state-warn) 6%, transparent);
   color: var(--color-state-warn);
-  background-color: color-mix(in srgb, var(--color-state-warn) 18%, transparent);
   border-color: color-mix(in srgb, var(--color-state-warn) 50%, transparent);
 }
 
 :root[data-color-scheme='light'] .modern-pill--err {
+  --_pill-bg: color-mix(in srgb, var(--color-state-err) 14%, transparent);
+  --_pill-bg-hover: color-mix(in srgb, var(--color-state-err) 4%, transparent);
   color: var(--color-state-err);
-  background-color: color-mix(in srgb, var(--color-state-err) 14%, transparent);
   border-color: color-mix(in srgb, var(--color-state-err) 35%, transparent);
 }
 
@@ -878,10 +889,13 @@ html[data-skin='modern'] #app {
   color: inherit;
   cursor: pointer;
   gap: 6px;
-  transition: border-color var(--skin-transition);
+  transition:
+    border-color var(--skin-transition),
+    background-color var(--skin-transition);
 }
 
 .modern-pill--editable:hover {
+  background-color: var(--_pill-bg-hover);
   border-color: currentColor;
 }