From 5550697fe8b711f3b206602d67ebb2f461a9778b Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Fri, 8 May 2026 20:30:30 +0200
Subject: [PATCH] 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.
---
 ui/web/src/skins/modern/modern.css | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/ui/web/src/skins/modern/modern.css b/ui/web/src/skins/modern/modern.css
index 923627cf..6759f2ff 100644
--- 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;
 }
 
-- 
2.53.0