From: Jérôme Benoit <jerome.benoit@sap.com>
Date: Fri, 8 May 2026 18:45:44 +0000 (+0200)
Subject: fix(ui/web): smooth icon-btn danger hover shadow and remove dead token
X-Git-Tag: cli@v4.7.1~1
X-Git-Url: https://git.piment-noir.org/?a=commitdiff_plain;h=528e9e06fd45bde0c1e8c80030c96af58304e4b5;p=e-mobility-charging-stations-simulator.git

fix(ui/web): smooth icon-btn danger hover shadow and remove dead token

- Add box-shadow to .modern-icon-btn transition shorthand so the danger
  variant hover glow animates instead of snapping
- Remove --skin-shadow-color (declared line 61 but never consumed)
---

diff --git a/ui/web/src/skins/modern/modern.css b/ui/web/src/skins/modern/modern.css
index 6759f2ff..9f77516a 100644
--- a/ui/web/src/skins/modern/modern.css
+++ b/ui/web/src/skins/modern/modern.css
@@ -58,7 +58,6 @@ html[data-skin='modern'] {
   --skin-radius-lg: 10px;
 
   /* Elevation shadows */
-  --skin-shadow-color: rgba(0, 0, 0, 0.08);
   --skin-shadow-color-md: rgba(0, 0, 0, 0.12);
   --skin-backdrop-color: rgba(0, 0, 0, 0.55);
   /* Intentional: raw rgba opacity for broad browser support (color-mix requires Chrome 111+) */
@@ -505,7 +504,8 @@ html[data-skin='modern'] #app {
   transition:
     color var(--skin-transition),
     background-color var(--skin-transition),
-    border-color var(--skin-transition);
+    border-color var(--skin-transition),
+    box-shadow var(--skin-transition);
 }
 
 .modern-icon-btn:hover:not(:disabled) {
@@ -832,33 +832,41 @@ html[data-skin='modern'] #app {
 .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);
+  --_pill-border: color-mix(in srgb, var(--color-state-ok) 45%, transparent);
+  --_pill-border-hover: currentColor;
   color: color-mix(in srgb, var(--color-state-ok) 55%, #ffffff 45%);
   background-color: var(--_pill-bg);
-  border-color: color-mix(in srgb, var(--color-state-ok) 45%, transparent);
+  border-color: var(--_pill-border);
 }
 
 .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);
+  --_pill-border: color-mix(in srgb, var(--color-state-warn) 50%, transparent);
+  --_pill-border-hover: currentColor;
   color: color-mix(in srgb, var(--color-state-warn) 60%, #ffffff 40%);
   background-color: var(--_pill-bg);
-  border-color: color-mix(in srgb, var(--color-state-warn) 50%, transparent);
+  border-color: var(--_pill-border);
 }
 
 .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);
+  --_pill-border: color-mix(in srgb, var(--color-state-err) 45%, transparent);
+  --_pill-border-hover: currentColor;
   color: color-mix(in srgb, var(--color-state-err) 55%, #ffffff 45%);
   background-color: var(--_pill-bg);
-  border-color: color-mix(in srgb, var(--color-state-err) 45%, transparent);
+  border-color: var(--_pill-border);
 }
 
 .modern-pill--idle {
   --_pill-bg: var(--skin-state-idle-bg);
   --_pill-bg-hover: color-mix(in srgb, var(--skin-state-idle-bg) 50%, transparent);
+  --_pill-border: var(--skin-border-strong);
+  --_pill-border-hover: currentColor;
   color: var(--color-text-strong);
   background-color: var(--_pill-bg);
-  border-color: var(--skin-border-strong);
+  border-color: var(--_pill-border);
 }
 
 /* Light-theme pill overrides — state colours are already dark (Material 700)
@@ -866,22 +874,22 @@ html[data-skin='modern'] #app {
 :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);
+  --_pill-border: color-mix(in srgb, var(--color-state-ok) 35%, transparent);
   color: var(--color-state-ok);
-  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);
+  --_pill-border: color-mix(in srgb, var(--color-state-warn) 50%, transparent);
   color: var(--color-state-warn);
-  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);
+  --_pill-border: color-mix(in srgb, var(--color-state-err) 35%, transparent);
   color: var(--color-state-err);
-  border-color: color-mix(in srgb, var(--color-state-err) 35%, transparent);
 }
 
 /* `color: inherit` overrides the UA <button> colour so the variant tint applies. */
@@ -896,7 +904,7 @@ html[data-skin='modern'] #app {
 
 .modern-pill--editable:hover {
   background-color: var(--_pill-bg-hover);
-  border-color: currentColor;
+  border-color: var(--_pill-border-hover);
 }
 
 .modern-pill--editable:focus-visible {