From 86264d12849b70c6df540c3edb82ed8be5a3992e Mon Sep 17 00:00:00 2001
From: mAi <mai@flexsiebels.de>
Date: Sat, 16 May 2026 11:23:47 +0200
Subject: [PATCH] fix(ui): device colour now actually shows on the canvas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSS .device-rect hard-coded stroke + fill, overriding the
stroke=${d.color} SVG attribute the JS wrote. Author CSS beats
presentation attributes, so changing the device colour via the
inspector picker was invisible.

Drop the stroke/fill overrides from .device-rect; set both inline
on the rect element instead — stroke = the chosen colour, fill =
a 12% tint via color-mix so the device reads coloured without
becoming garish. Inline style beats class CSS, so the picker works.

Frames + IO markers don't currently expose a colour picker, so no
analogous fix needed there.
---
 web/static/main.js   | 6 +++++-
 web/static/style.css | 5 +++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/static/main.js b/web/static/main.js
index 8c2e00a..6e6c52b 100644
--- a/web/static/main.js
+++ b/web/static/main.js
@@ -293,10 +293,14 @@ function renderCanvas() {
 
   for (const d of state.devices) {
     const g = svgEl("g", { "data-device-id": d.id });
+    // Stroke = the user-picked colour; fill = a 12% tint of it via
+    // color-mix so the device "reads" coloured without becoming garish.
+    // Inline style beats the .device-rect class CSS, which is why CSS
+    // no longer hard-codes stroke/fill on that class.
     const rect = svgEl("rect", {
       x: d.x, y: d.y, width: d.width, height: d.height,
       class: "device-rect svg-draggable",
-      stroke: d.color,
+      style: `stroke: ${d.color}; fill: color-mix(in srgb, ${d.color} 12%, white);`,
       rx: 3, ry: 3,
     });
     if (state.selection?.kind === "device" && state.selection.id === d.id) {
diff --git a/web/static/style.css b/web/static/style.css
index d30ca38..84e041c 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -183,9 +183,10 @@ body {
   pointer-events: none;
 }
 
+/* Stroke + fill come from the device's user-set colour, written as
+   inline style in renderCanvas — leaving them out of .device-rect so
+   the author CSS doesn't override the inline style. */
 .device-rect {
-  fill: #fff;
-  stroke: var(--text);
   stroke-width: 1.5;
 }
 .device-rect.selected { stroke-width: 3; }