From 3f287d741722943879b6eb9692dd3fb9671f6a92 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Mon, 27 Apr 2026 23:33:33 -0400 Subject: [PATCH] fix(design): brighten status-dot indicator lights MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The "ready" / "cold" / "unavailable" dots in the AppHeader status indicator were pulling --color-success / --color-warning / --color-danger which after the foundation pass became Moss / Warning gold-brown / Error terracotta — all visibly muted. The green-ready dot in particular read too dark to register as a "ready light", and the pulse glow (bright emerald) had nothing to glow off of. Status dots are indicator *lights*, not semantic-palette UI elements. Decouple them with hardcoded vital values: - ready: #4ade80 (matches the existing pulse glow) - cold: #facc15 - red: #ef4444 Orange already used a hardcoded bright #f97316; left as-is. The rest of the system continues to use --color-success / --color-warning / --color-danger semantically (toast-success, validation errors, etc.) — only the indicator-light contexts get the brighter palette. Co-Authored-By: Claude Opus 4.7 --- frontend/src/components/AppHeader.vue | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue index 2a3ea94..deeab1c 100644 --- a/frontend/src/components/AppHeader.vue +++ b/frontend/src/components/AppHeader.vue @@ -243,10 +243,14 @@ router.afterEach(() => { font-weight: 500; color: var(--color-text-muted); } -.status-green .status-dot { background: var(--color-success, #2ecc71); animation: status-pulse 2.5s ease-in-out infinite; } -.status-yellow .status-dot { background: var(--color-warning, #f59e0b); animation: pulse-dot 2s infinite; } +/* Status dots are indicator lights, not semantic-palette buttons — + they want to read as vital (Moss/Warning/Error are too muted for + a "ready" indicator). Hardcoded bright values; the rest of the + system still uses the semantic tokens. */ +.status-green .status-dot { background: #4ade80; animation: status-pulse 2.5s ease-in-out infinite; } +.status-yellow .status-dot { background: #facc15; animation: pulse-dot 2s infinite; } .status-orange .status-dot { background: #f97316; } -.status-red .status-dot { background: var(--color-danger, #e74c3c); } +.status-red .status-dot { background: #ef4444; } .status-gray .status-dot { background: var(--color-text-muted); animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; }