From dd2fdd789c4dfc52b49d1996d8d1df3f2dedc19f Mon Sep 17 00:00:00 2001 From: jedarden Date: Fri, 24 Apr 2026 14:39:10 -0400 Subject: [PATCH] style(dashboard): replace remaining hardcoded colors with design tokens Continued CSS tokenization pass across ambient, fleet, live, simple, integrations pages and their component stylesheets. Replaces hardcoded `white`, `#1a1a2e`, and raw rgba values with semantic tokens from tokens.css. Co-Authored-By: Claude Opus 4.7 --- dashboard/ambient.html | 2 +- dashboard/css/apdetection.css | 6 +- dashboard/css/explainability.css | 2 +- dashboard/css/panels.css | 6 +- dashboard/css/quick-actions.css | 2 +- dashboard/css/security.css | 8 +- dashboard/css/simple.css | 22 +-- dashboard/css/timeline.css | 2 +- dashboard/fleet.html | 148 +++++++-------- dashboard/integrations.html | 20 +- dashboard/js/timeline.js | 104 +++++++---- dashboard/live.html | 312 +++++++++++++++---------------- dashboard/simple.html | 6 +- 13 files changed, 334 insertions(+), 306 deletions(-) diff --git a/dashboard/ambient.html b/dashboard/ambient.html index 397269b..9cf703a 100644 --- a/dashboard/ambient.html +++ b/dashboard/ambient.html @@ -9,7 +9,7 @@ - +
diff --git a/dashboard/css/apdetection.css b/dashboard/css/apdetection.css index 3919fe9..10c259c 100644 --- a/dashboard/css/apdetection.css +++ b/dashboard/css/apdetection.css @@ -30,7 +30,7 @@ padding: 16px 24px; max-width: 800px; margin: 0 auto; - color: white; + color: var(--text-on-accent); } .ap-detection-icon { @@ -161,7 +161,7 @@ } .ap-btn-primary { - background: white; + background: var(--slate-12); color: var(--blue-7); } @@ -173,7 +173,7 @@ .ap-btn-secondary { background: var(--border-strong); - color: white; + color: var(--text-on-accent); border: 1px solid var(--slate-7); } diff --git a/dashboard/css/explainability.css b/dashboard/css/explainability.css index b9240eb..2881eae 100644 --- a/dashboard/css/explainability.css +++ b/dashboard/css/explainability.css @@ -225,7 +225,7 @@ .contributing-yes .contributing-badge { background: var(--ok); - color: white; + color: var(--text-on-accent); } .contributing-no .contributing-badge { diff --git a/dashboard/css/panels.css b/dashboard/css/panels.css index 1dc4155..75a3423 100644 --- a/dashboard/css/panels.css +++ b/dashboard/css/panels.css @@ -849,7 +849,7 @@ left: 0; right: 0; background: linear-gradient(135deg, var(--alert), var(--alert-muted)); - color: white; + color: var(--text-on-accent); padding: 16px 20px; z-index: 5000; display: flex; @@ -915,7 +915,7 @@ .alert-banner-btn-acknowledge { background: var(--border-strong); - color: white; + color: var(--text-on-accent); } .alert-banner-btn-acknowledge:hover { @@ -923,7 +923,7 @@ } .alert-banner-btn-view { - background: white; + background: var(--slate-12); color: var(--alert); } diff --git a/dashboard/css/quick-actions.css b/dashboard/css/quick-actions.css index 7ca123a..ed6e106 100644 --- a/dashboard/css/quick-actions.css +++ b/dashboard/css/quick-actions.css @@ -231,7 +231,7 @@ left: 50%; transform: translateX(-50%); background: var(--blue-10); - color: white; + color: var(--text-on-accent); padding: 10px 20px; border-radius: var(--radius-modal); font-size: var(--text-sm); diff --git a/dashboard/css/security.css b/dashboard/css/security.css index ff3e62b..df8640a 100644 --- a/dashboard/css/security.css +++ b/dashboard/css/security.css @@ -286,7 +286,7 @@ left: 0; right: 0; background: linear-gradient(135deg, var(--alert), var(--alert)); - color: white; + color: var(--text-on-accent); padding: 16px 20px; z-index: 5000; display: flex; @@ -369,7 +369,7 @@ .alert-banner-btn.acknowledge { background: var(--border-strong); - color: white; + color: var(--text-on-accent); } .alert-banner-btn.acknowledge:hover { @@ -377,12 +377,12 @@ } .alert-banner-btn.view { - background: white; + background: var(--slate-12); color: var(--alert); } .alert-banner-btn.view:hover { - background: rgba(255, 255, 255, 0.9); + background: var(--slate-12); } /* ── Security Mode Indicator (full page overlay when armed) ──────────────────────── */ diff --git a/dashboard/css/simple.css b/dashboard/css/simple.css index bda7eb4..f43b9c4 100644 --- a/dashboard/css/simple.css +++ b/dashboard/css/simple.css @@ -105,7 +105,7 @@ body.simple-mode { /* ===== Alert Banner ===== */ .simple-alert-banner { background: linear-gradient(135deg, var(--simple-accent-red), var(--alert)); - color: white; + color: var(--text-on-accent); padding: 16px; border-radius: var(--radius-card); margin-bottom: 16px; @@ -154,7 +154,7 @@ body.simple-mode { .simple-alert-banner .alert-dismiss { background: var(--border-strong); border: none; - color: white; + color: var(--text-on-accent); width: 28px; height: 28px; border-radius: 50%; @@ -173,7 +173,7 @@ body.simple-mode { /* ===== Morning Briefing Card ===== */ .simple-morning-briefing { background: linear-gradient(135deg, var(--blue-7), var(--blue-9)); - color: white; + color: var(--text-on-accent); padding: 20px; border-radius: var(--radius-modal); margin-bottom: 16px; @@ -252,7 +252,7 @@ body.simple-mode { margin-top: 8px; background: var(--border-strong); border: none; - color: white; + color: var(--text-on-accent); padding: 8px 16px; border-radius: var(--radius-card); font-size: var(--text-sm); @@ -386,7 +386,7 @@ body.simple-mode { justify-content: center; font-size: var(--text-sm); font-weight: 600; - color: white; + color: var(--text-on-accent); } .simple-room-card .room-activity { @@ -450,7 +450,7 @@ body.simple-mode { .simple-activity-feed .filter-btn.active { background: var(--simple-accent-blue); - color: white; + color: var(--text-on-accent); } .simple-activity-feed .feed-empty { @@ -629,7 +629,7 @@ body.simple-mode { top: 4px; right: 4px; background: var(--simple-accent-red); - color: white; + color: var(--text-on-accent); font-size: 10px; font-weight: 600; padding: 2px 6px; @@ -641,7 +641,7 @@ body.simple-mode { /* ===== Sleep Summary Card ===== */ .simple-sleep-summary { background: linear-gradient(135deg, var(--blue-10), var(--blue-8)); - color: white; + color: var(--text-on-accent); padding: 20px; border-radius: var(--radius-modal); margin-bottom: 16px; @@ -723,7 +723,7 @@ body.simple-mode { margin-top: 12px; background: var(--border-strong); border: none; - color: white; + color: var(--text-on-accent); padding: 10px 16px; border-radius: var(--radius-card); font-size: var(--text-sm); @@ -922,12 +922,12 @@ body.simple-mode { .simple-security-toggle .security-toggle-btn.disarmed { background: var(--simple-accent-green); - color: white; + color: var(--text-on-accent); } .simple-security-toggle .security-toggle-btn.armed { background: var(--simple-accent-red); - color: white; + color: var(--text-on-accent); } .simple-security-toggle .security-status { diff --git a/dashboard/css/timeline.css b/dashboard/css/timeline.css index 40ee2fa..80f302e 100644 --- a/dashboard/css/timeline.css +++ b/dashboard/css/timeline.css @@ -606,7 +606,7 @@ /* Event Count Badge */ .timeline-count { background: var(--accent-color, var(--blue-9)); - color: white; + color: var(--text-on-accent); font-size: 11px; font-weight: 600; padding: 2px 6px; diff --git a/dashboard/fleet.html b/dashboard/fleet.html index 343c7af..12f06bf 100644 --- a/dashboard/fleet.html +++ b/dashboard/fleet.html @@ -35,78 +35,77 @@
- -
-
-

Fleet Status

-
- - Total: - 0 - - - Online: - 0 - -
-
-
- - - -
-
- - - - - - -
+
+
+

Fleet Status

+
+ + Total: + 0 + + + Online: + 0 + +
+
+
+ + + +
+
+ + + + + + +
@@ -164,7 +163,9 @@ - + + + + + +