From fbea33e7cbbab3c298c3a193bdb2a7b1f545678a Mon Sep 17 00:00:00 2001
From: James Smith <jamessmith1@outlook.com>
Date: Tue, 19 May 2026 23:04:47 +0100
Subject: [PATCH] fix: replace hardcoded cyan with CSS variable across brand
 SVGs and components

- Brand logo SVGs (.logo, .welcome-logo, .brand-i) now follow --accent-cyan
  via CSS rules that override SVG presentation attributes
- proximity-radar.js: sweep, center dot, gradient stops, and selection rings
  all use var(--accent-cyan) in style attrs or read getComputedStyle at runtime
- system.js updateGlobePosition: observer point color reads CSS variable
- .bt-detail-address MAC address text uses var(--accent-cyan)
- Enhanced tier gets --visual-edge-cyan/--visual-glow-cyan amber overrides

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/css/index.css                    | 19 ++++++++++++++++++-
 static/js/components/proximity-radar.js | 24 ++++++++++++++----------
 static/js/modes/system.js               |  2 +-
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/static/css/index.css b/static/css/index.css
index 35dae36..a11bfb2 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -4489,7 +4489,7 @@ header h1 .tagline {
 .bt-detail-address {
     font-family: var(--font-mono);
     font-size: 10px;
-    color: #00d4ff;
+    color: var(--accent-cyan);
 }
 
 .bt-detail-rssi-display {
@@ -7674,3 +7674,20 @@ body[data-mode="tscm"] {
     background-size: auto, auto, auto, 20px 20px, 20px 20px;
     background-attachment: fixed;
 }
+
+/* ============================================
+   BRAND SVG LOGO — follow accent color
+   ============================================ */
+.logo svg path,
+.welcome-logo svg path { stroke: var(--accent-cyan); }
+.logo svg rect,
+.welcome-logo svg rect,
+.brand-i svg rect { fill: var(--accent-cyan); }
+
+/* ============================================
+   ENHANCED TIER — visual edge/glow overrides
+   ============================================ */
+html[data-ui-tier="enhanced"] {
+    --visual-edge-cyan: rgba(200, 150, 40, 0.34);
+    --visual-glow-cyan: 0 0 24px rgba(200, 150, 40, 0.16);
+}
diff --git a/static/js/components/proximity-radar.js b/static/js/components/proximity-radar.js
index 7f71cbd..8df1d7d 100644
--- a/static/js/components/proximity-radar.js
+++ b/static/js/components/proximity-radar.js
@@ -25,6 +25,10 @@ const ProximityRadar = (function() {
         newDeviceThreshold: 30, // seconds
     };
 
+    function _accent() {
+        return getComputedStyle(document.documentElement).getPropertyValue('--accent-cyan').trim() || '#00d4ff';
+    }
+
     // State
     let container = null;
     let svg = null;
@@ -63,8 +67,8 @@ const ProximityRadar = (function() {
             <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" class="proximity-radar-svg">
                 <defs>
                     <radialGradient id="radarGradient" cx="50%" cy="50%" r="50%">
-                        <stop offset="0%" stop-color="rgba(0, 212, 255, 0.1)" />
-                        <stop offset="100%" stop-color="rgba(0, 212, 255, 0)" />
+                        <stop offset="0%" style="stop-color:var(--accent-cyan);stop-opacity:0.1" />
+                        <stop offset="100%" style="stop-color:var(--accent-cyan);stop-opacity:0" />
                     </radialGradient>
                     <filter id="glow">
                         <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
@@ -100,16 +104,16 @@ const ProximityRadar = (function() {
                 <!-- CSS-animated sweep group: trailing arcs + sweep line -->
                 <g class="bt-radar-sweep" clip-path="url(#radarClip)">
                     <path d="M${center},${center} L${center},${CONFIG.padding} A${center - CONFIG.padding},${center - CONFIG.padding} 0 0,1 ${center + (center - CONFIG.padding)},${center} Z"
-                          fill="#00b4d8" opacity="0.035"/>
+                          style="fill:var(--accent-cyan)" opacity="0.035"/>
                     <path d="M${center},${center} L${center},${CONFIG.padding} A${center - CONFIG.padding},${center - CONFIG.padding} 0 0,1 ${Math.round(center + (center - CONFIG.padding) * Math.sin(Math.PI / 3))},${Math.round(center + (center - CONFIG.padding) * (1 - Math.cos(Math.PI / 3)))} Z"
-                          fill="#00b4d8" opacity="0.07"/>
+                          style="fill:var(--accent-cyan)" opacity="0.07"/>
                     <line x1="${center}" y1="${center}" x2="${center}" y2="${CONFIG.padding}"
-                          stroke="#00b4d8" stroke-width="1.5" opacity="0.75"/>
+                          style="stroke:var(--accent-cyan)" stroke-width="1.5" opacity="0.75"/>
                 </g>
 
                 <!-- Center point -->
                 <circle cx="${center}" cy="${center}" r="${CONFIG.centerRadius}"
-                        fill="#00d4ff" filter="url(#glow)" />
+                        style="fill:var(--accent-cyan)" filter="url(#glow)" />
 
                 <!-- Device dots container -->
                 <g class="radar-devices"></g>
@@ -238,7 +242,7 @@ const ProximityRadar = (function() {
                         dot.setAttribute('r', dotSize);
                         dot.setAttribute('fill', color);
                         dot.setAttribute('fill-opacity', isSelected ? 1 : 0.4 + confidence * 0.5);
-                        dot.setAttribute('stroke', isSelected ? '#00d4ff' : color);
+                        dot.setAttribute('stroke', isSelected ? _accent() : color);
                         dot.setAttribute('stroke-width', isSelected ? 2 : 1);
                     }
 
@@ -338,7 +342,7 @@ const ProximityRadar = (function() {
         ring.classList.add('radar-select-ring');
         ring.setAttribute('r', dotSize + 8);
         ring.setAttribute('fill', 'none');
-        ring.setAttribute('stroke', '#00d4ff');
+        ring.setAttribute('stroke', _accent());
         ring.setAttribute('stroke-width', '2');
         ring.setAttribute('stroke-opacity', '0.8');
 
@@ -537,7 +541,7 @@ const ProximityRadar = (function() {
         const dot = el.querySelector('circle:not(.radar-device-hitarea):not(.radar-select-ring)');
         if (dot && dot.getAttribute('fill') !== 'none' && dot.getAttribute('fill') !== 'transparent') {
             dot.setAttribute('fill-opacity', '1');
-            dot.setAttribute('stroke', '#00d4ff');
+            dot.setAttribute('stroke', _accent());
             dot.setAttribute('stroke-width', '2');
         }
 
@@ -548,7 +552,7 @@ const ProximityRadar = (function() {
             ring.classList.add('radar-select-ring');
             ring.setAttribute('r', dotSize + 8);
             ring.setAttribute('fill', 'none');
-            ring.setAttribute('stroke', '#00d4ff');
+            ring.setAttribute('stroke', _accent());
             ring.setAttribute('stroke-width', '2');
             ring.setAttribute('stroke-opacity', '0.8');
 
diff --git a/static/js/modes/system.js b/static/js/modes/system.js
index 91a32ec..4517354 100644
--- a/static/js/modes/system.js
+++ b/static/js/modes/system.js
@@ -567,7 +567,7 @@ const SystemHealth = (function () {
             lat: locationData.lat,
             lng: locationData.lon,
             size: 0.8,
-            color: '#00d4ff',
+            color: getComputedStyle(document.documentElement).getPropertyValue('--accent-cyan').trim() || '#00d4ff',
         }]);
 
         // Snap view