From 5c0c162a2b55c6d2bcd9997485df5eeba1368eca Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Wed, 17 Jun 2026 18:54:24 -0700 Subject: [PATCH] FN-6609: fix command center CSS token hygiene Command Center styles now rely on canonical muted text and shadow tokens. - Replace deprecated --text-secondary usages in command center styles with --text-muted. - Remove the raw rgba fallback from the date range popover shadow token. - Document the command-center styling token requirements with FNXC comments. Files changed: .../app/components/command-center/CommandCenter.css | 13 +++++++++---- .../app/components/command-center/DateRangePicker.css | 8 ++++++-- .../components/command-center/MissionControlPanel.css | 11 ++++++++--- .../app/components/command-center/areas/areas.css | 19 ++++++++++++------- .../app/components/command-center/charts/charts.css | 11 ++++++++--- 5 files changed, 43 insertions(+), 19 deletions(-) Fusion-Task-Id: FN-6609 Fusion-Task-Lineage: 8a02f4a3-a881-4db6-893e-363b74cbfba8 --- .../command-center/CommandCenter.css | 13 +++++++++---- .../command-center/DateRangePicker.css | 8 ++++++-- .../command-center/MissionControlPanel.css | 11 ++++++++--- .../components/command-center/areas/areas.css | 19 ++++++++++++------- .../command-center/charts/charts.css | 11 ++++++++--- 5 files changed, 43 insertions(+), 19 deletions(-) diff --git a/packages/dashboard/app/components/command-center/CommandCenter.css b/packages/dashboard/app/components/command-center/CommandCenter.css index b227c16cbd..9b9e9332df 100644 --- a/packages/dashboard/app/components/command-center/CommandCenter.css +++ b/packages/dashboard/app/components/command-center/CommandCenter.css @@ -1,3 +1,8 @@ +/* +FNXC:CommandCenterStyling 2026-06-17-18:46: +The FN-4286 dashboard text-token guard requires command-center secondary copy to use --text-muted, not the deprecated secondary text token or raw color fallbacks. +*/ + /* Command Center shell. * Animation durations use --duration-* tokens only (never --transition-*). */ @@ -46,7 +51,7 @@ The Command Center must remain scrollable on mobile inside the overflow-hidden . background: none; border: none; border-bottom: 2px solid transparent; - color: var(--text-secondary, #888); + color: var(--text-muted); padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); cursor: pointer; font-size: var(--font-size-sm, 0.85rem); @@ -99,7 +104,7 @@ The Command Center must remain scrollable on mobile inside the overflow-hidden . .cc-stat-label { font-size: var(--font-size-sm, 0.85rem); - color: var(--text-secondary, #888); + color: var(--text-muted); } .cc-stat-value { @@ -124,7 +129,7 @@ The Command Center must remain scrollable on mobile inside the overflow-hidden . } .cc-live-strip-placeholder { - color: var(--text-secondary, #888); + color: var(--text-muted); } /* ---- States ---- */ @@ -137,7 +142,7 @@ The Command Center must remain scrollable on mobile inside the overflow-hidden . justify-content: center; gap: var(--space-2, 0.5rem); padding: var(--space-6, 2rem); - color: var(--text-secondary, #888); + color: var(--text-muted); text-align: center; } diff --git a/packages/dashboard/app/components/command-center/DateRangePicker.css b/packages/dashboard/app/components/command-center/DateRangePicker.css index 8a2acb7635..916c4b36d4 100644 --- a/packages/dashboard/app/components/command-center/DateRangePicker.css +++ b/packages/dashboard/app/components/command-center/DateRangePicker.css @@ -9,6 +9,10 @@ gap: var(--space-1, 0.25rem); } +/* +FNXC:CommandCenterStyling 2026-06-17-18:44: +The FN-4286 text-token and component-css hygiene guards require canonical dashboard tokens here: use --shadow-md without a raw rgba fallback and --text-muted instead of the deprecated secondary text token. +*/ .cc-date-range-popover { position: absolute; top: calc(100% + var(--space-1, 0.25rem)); @@ -19,7 +23,7 @@ background: var(--surface-1, #1c1c1c); border: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.25)); border-radius: var(--radius-md, 8px); - box-shadow: var(--shadow-md, 0 6px 24px rgba(0, 0, 0, 0.35)); + box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--space-3, 0.75rem); @@ -43,7 +47,7 @@ justify-content: space-between; gap: var(--space-2, 0.5rem); font-size: var(--font-size-sm, 0.85rem); - color: var(--text-secondary, #888); + color: var(--text-muted); } .cc-date-range-field input { diff --git a/packages/dashboard/app/components/command-center/MissionControlPanel.css b/packages/dashboard/app/components/command-center/MissionControlPanel.css index dc9c721760..8f0a17e4fa 100644 --- a/packages/dashboard/app/components/command-center/MissionControlPanel.css +++ b/packages/dashboard/app/components/command-center/MissionControlPanel.css @@ -1,3 +1,8 @@ +/* +FNXC:CommandCenterStyling 2026-06-17-18:46: +Mission-control muted labels and inactive badges use --text-muted so the live panel follows the canonical command-center text-token contract. +*/ + /* * Mission-Control live panel (U6b). Component-local styles. * Animation durations use --duration-* tokens only (never --transition-*). @@ -23,7 +28,7 @@ } .cc-mc-muted { - color: var(--text-secondary, #888); + color: var(--text-muted); font-size: 0.85rem; margin: 0; } @@ -82,13 +87,13 @@ .cc-mc-badge.inactive { background: var(--surface-2, rgba(255, 255, 255, 0.06)); - color: var(--text-secondary, #999); + color: var(--text-muted); } .cc-mc-task, .cc-mc-node-count { font-size: 0.75rem; - color: var(--text-secondary, #999); + color: var(--text-muted); } @media (max-width: 768px), (max-height: 480px) { diff --git a/packages/dashboard/app/components/command-center/areas/areas.css b/packages/dashboard/app/components/command-center/areas/areas.css index b7dcb3204f..50915cfb64 100644 --- a/packages/dashboard/app/components/command-center/areas/areas.css +++ b/packages/dashboard/app/components/command-center/areas/areas.css @@ -1,3 +1,8 @@ +/* +FNXC:CommandCenterStyling 2026-06-17-18:46: +Area headings, table metadata, and empty states use --text-muted so the analytics surfaces satisfy the canonical text-token guard without raw color fallbacks. +*/ + /* Command Center historical analytics areas (U5). * Animation durations use --duration-* tokens only (never --transition-*). */ @@ -18,7 +23,7 @@ margin: 0; font-size: var(--font-size-sm, 0.85rem); font-weight: 600; - color: var(--text-secondary, #888); + color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } @@ -32,7 +37,7 @@ .cc-stat-sub { font-size: var(--font-size-xs, 0.75rem); - color: var(--text-secondary, #888); + color: var(--text-muted); } /* ---- Tables ---- */ @@ -61,7 +66,7 @@ } .cc-table thead th { - color: var(--text-secondary, #888); + color: var(--text-muted); font-weight: 600; } @@ -94,7 +99,7 @@ /* Unavailable sentinel ("—") with a help cursor for its tooltip. */ .cc-unavailable { - color: var(--text-secondary, #888); + color: var(--text-muted); cursor: help; border-bottom: 1px dotted var(--border-subtle, rgba(127, 127, 127, 0.4)); } @@ -104,7 +109,7 @@ align-items: center; gap: var(--space-2, 0.5rem); padding: var(--space-4, 1rem); - color: var(--text-secondary, #888); + color: var(--text-muted); } .cc-area-empty, @@ -114,7 +119,7 @@ align-items: center; gap: var(--space-2, 0.5rem); padding: var(--space-6, 2rem); - color: var(--text-secondary, #888); + color: var(--text-muted); text-align: center; } @@ -124,5 +129,5 @@ .cc-pricing-note { font-size: var(--font-size-xs, 0.75rem); - color: var(--text-secondary, #888); + color: var(--text-muted); } diff --git a/packages/dashboard/app/components/command-center/charts/charts.css b/packages/dashboard/app/components/command-center/charts/charts.css index fc99dab519..91678dc61a 100644 --- a/packages/dashboard/app/components/command-center/charts/charts.css +++ b/packages/dashboard/app/components/command-center/charts/charts.css @@ -1,3 +1,8 @@ +/* +FNXC:CommandCenterStyling 2026-06-17-18:46: +Chart labels and legends must use --text-muted so command-center CSS stays aligned with the FN-4286 canonical text-token guard and avoids raw color fallbacks. +*/ + /* Command Center hand-rolled CSS-bar chart primitives. * * Animation durations MUST use --duration-* tokens (bare durations). @@ -24,7 +29,7 @@ .cc-bar-label { font-size: var(--font-size-sm, 0.85rem); - color: var(--text-secondary, #888); + color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -86,7 +91,7 @@ align-items: center; gap: var(--space-1, 0.25rem); font-size: var(--font-size-sm, 0.85rem); - color: var(--text-secondary, #888); + color: var(--text-muted); } .cc-stacked-swatch { @@ -133,7 +138,7 @@ display: flex; justify-content: space-between; font-size: var(--font-size-sm, 0.85rem); - color: var(--text-secondary, #888); + color: var(--text-muted); } .cc-funnel-conversion {