fix(ui): v2.10.1 — Stop Charging toggle turns red when ON, not green

On this dashboard green reads as "charging", so the new Stop Charging toggle
(#55) lighting up green while meaning the opposite undercut the point of the
control. The toggle's active accent is now the CSS variable
`--evsc-toggle-on` (declared on .control-toggle, default system green) and is
consumed by .control-toggle.is-on (border / background tint / halo) and
.switch-shell.is-on (the iOS pill). One rule,
`.control-toggle.tone-red { --evsc-toggle-on: var(--evsc-sys-red); }`, flips
the whole ON treatment to system red for that single toggle. The pill keeps a
green fallback so shells rendered outside a .control-toggle are untouched.

Verified in the preview harness in light and dark: ON card / border / halo
tinted red with the pill at #ff3b30, while Force Charging, Boost and every
other toggle keep #34c759 byte-for-byte.

Frontend-only. No schema / entity / config-flow change, counts unchanged (72/58).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: Antonio ...

CLAUDE.md

@@ -7,7 +7,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 This is a **Home Assistant custom integration** for intelligent EV charging control. It manages EV charger automation based on solar production, time of day, battery levels, grid import protection, and intelligent priority balancing between EV and home battery charging.
 
 **Domain:** `ev_smart_charger`
-**Current Version:** 2.10.0
+**Current Version:** 2.10.1
 **Installation:** HACS custom repository or manual installation to `custom_components/ev_smart_charger`
 
 ## Development Commands
@@ -757,6 +757,40 @@ async def _set_amperage(self, target_amperage: int):
 
 ## Version History
 
+### v2.10.1 (2026-08-20)
+**UI: the Stop Charging toggle is red when ON (frontend-only)**
+
+Follow-up to v2.10.0. Every `.control-toggle` shares one "active" treatment —
+an Apple-system-green tinted card, border, focus halo and iOS pill. On this
+dashboard green reads as *charging*, so the new Stop Charging toggle lit up
+green while meaning the exact opposite, undercutting the whole point of the
+control (issue #55, Motivation #2: remove the force-charge foot-gun).
+
+The accent is now a CSS variable instead of a hardcoded color:
+`--evsc-toggle-on` is declared on `.control-toggle` (default
+`var(--evsc-sys-green)`) and consumed by `.control-toggle.is-on` (border,
+background tint, halo) and `.switch-shell.is-on` (the pill). A single
+`.control-toggle.tone-red { --evsc-toggle-on: var(--evsc-sys-red); }` rule
+flips the whole ON treatment to system red for the one toggle whose ON state
+means "no charging". `.switch-shell.is-on` keeps a
+`var(--evsc-toggle-on, var(--evsc-sys-green))` fallback so the shells rendered
+outside a `.control-toggle` (settings rows, weekly-planner cells) are
+untouched.
+
+Verified in the preview harness in both schemes: ON card
+`color-mix(--evsc-sys-red 8%)` + 45% border + 12% halo, pill `#ff3b30`, while
+Force Charging / Boost / every other toggle keep `#34c759` byte-for-byte.
+
+**Files**: `frontend/ev-smart-charger-dashboard.js` (CSS only), `const.py`,
+`manifest.json`, this file. `VERSION = "2.10.1"`. No schema / entity /
+config-flow change, entity counts unchanged (72 / 58). The `?v=`+content-hash
+cache-buster delivers the new bundle on the next dashboard reload.
+
+**Upgrade priority**: 🟢 RECOMMENDED for anyone on v2.10.0 who uses the
+dashboard — purely visual.
+
+---
+
 ### v2.10.0 (2026-08-20)
 **FIX: Smart Charger Blocker released every block after ~30-60 s (issue #54) + FEATURE: manual "Stop Charging" control (issue #55)**
 

custom_components/ev_smart_charger/const.py

@@ -2,7 +2,7 @@
 
 # ========== INTEGRATION METADATA ==========
 DOMAIN = "ev_smart_charger"
-VERSION = "2.10.0"
+VERSION = "2.10.1"
 DEFAULT_NAME = "EV Smart Charger"
 FRONTEND_URL_BASE = "/api/ev_smart_charger/frontend"
 FRONTEND_CARD_FILENAME = "ev-smart-charger-dashboard.js"

custom_components/ev_smart_charger/frontend/ev-smart-charger-dashboard.js

@@ -3736,12 +3736,23 @@ class EvSmartChargerDashboard extends HTMLElement {
           grid-template-columns: 1fr auto;
           background: var(--evsc-surface-strong);
           border: 1px solid var(--evsc-stroke);
+          /* v2.10.1: the "active" accent of a toggle. Green everywhere (ON =
+             charging / feature running), overridden per-toggle where ON means
+             the opposite — see .tone-red below. */
+          --evsc-toggle-on: var(--evsc-sys-green);
+        }
+
+        /* v2.10.1 (issue #55): Stop Charging is the one toggle whose ON state
+           means "no charging", so it must not borrow the green that reads as
+           "charging" everywhere else on this dashboard. */
+        .control-toggle.tone-red {
+          --evsc-toggle-on: var(--evsc-sys-red);
         }
 
         .control-toggle.is-on {
-          border-color: color-mix(in srgb, var(--evsc-sys-green) 45%, transparent);
-          background: color-mix(in srgb, var(--evsc-sys-green) 8%, var(--evsc-surface-strong));
-          box-shadow: 0 0 0 4px color-mix(in srgb, var(--evsc-sys-green) 12%, transparent),
+          border-color: color-mix(in srgb, var(--evsc-toggle-on) 45%, transparent);
+          background: color-mix(in srgb, var(--evsc-toggle-on) 8%, var(--evsc-surface-strong));
+          box-shadow: 0 0 0 4px color-mix(in srgb, var(--evsc-toggle-on) 12%, transparent),
             var(--evsc-shadow-soft);
         }
 
@@ -3770,7 +3781,7 @@ class EvSmartChargerDashboard extends HTMLElement {
         }
 
         .switch-shell.is-on {
-          background: var(--evsc-sys-green);
+          background: var(--evsc-toggle-on, var(--evsc-sys-green));
         }
 
         .switch-thumb {

custom_components/ev_smart_charger/manifest.json

@@ -11,5 +11,5 @@
   "iot_class": "local_push",
   "issue_tracker": "https://github.com/antbald/ha-ev-smart-charger/issues",
   "requirements": [],
-  "version": "2.10.0"
+  "version": "2.10.1"
 }