diff --git a/packages/dashboard/app/components/command-center/CommandCenter.css b/packages/dashboard/app/components/command-center/CommandCenter.css index 26613efec4..a3a9c438e6 100644 --- a/packages/dashboard/app/components/command-center/CommandCenter.css +++ b/packages/dashboard/app/components/command-center/CommandCenter.css @@ -174,6 +174,9 @@ The GitHub closed-at backfill control lives inside the existing Fixed by Fusion /* FNXC:CommandCenterStyling 2026-06-18-22:31: FN-6680 keeps the FN-6664 live/chart shrink contract but replaces hardcoded track minima with spacing tokens after real Blink mobile probing showed jsdom cannot catch min-content overflow or crushed chart tracks. + +FNXC:CommandCenterStyling 2026-06-19-19:05: +FN-6700 reduces the live-strip decorative accent gradient, glow, and sweep intensity so the main overview card reads calmer and stays consistent with the flat stat-card surface rhythm while preserving the surface layers and motion. */ .cc-live-strip { position: relative; @@ -185,9 +188,9 @@ FN-6680 keeps the FN-6664 live/chart shrink contract but replaces hardcoded trac border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: - linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent), + linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent), var(--surface-1); - box-shadow: 0 0 var(--space-lg) color-mix(in srgb, var(--accent) 18%, transparent); + box-shadow: 0 0 var(--space-lg) color-mix(in srgb, var(--accent) 9%, transparent); overflow: hidden; font-size: 0.8125rem; } @@ -196,8 +199,8 @@ FN-6680 keeps the FN-6664 live/chart shrink contract but replaces hardcoded trac content: ""; position: absolute; inset: 0; - background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 24%, transparent), transparent); - opacity: 0.45; + background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 10%, transparent), transparent); + opacity: 0.25; transform: translateX(-100%); animation: cc-live-signal-sweep calc(var(--duration-slow) * 8) linear infinite; pointer-events: none; @@ -321,6 +324,9 @@ Overview token totals now live-poll and should visibly count up on change in bot /* FNXC:CommandCenterStyling 2026-06-18-00:00: Overview charts must use dashboard tokens only and keep motion decorative; animations use --duration-* values and are disabled for reduced-motion users so the graph-rich snapshot does not violate accessibility or the mobile scroll contract. + +FNXC:CommandCenterStyling 2026-06-19-19:05: +FN-6700 tones down the overview chart-card diagonal accent, glow, and sheen so these primary cards retain their animated surface treatment without visually overpowering the flat stat-card rhythm. */ .cc-overview-charts { min-inline-size: 0; @@ -340,9 +346,9 @@ Overview charts must use dashboard tokens only and keep motion decorative; anima border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: - linear-gradient(145deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent), + linear-gradient(145deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent), var(--surface-1); - box-shadow: 0 0 var(--space-lg) color-mix(in srgb, var(--accent) 12%, transparent); + box-shadow: 0 0 var(--space-lg) color-mix(in srgb, var(--accent) 7%, transparent); overflow: hidden; animation: cc-overview-chart-rise var(--duration-normal) ease-out both; } @@ -355,7 +361,7 @@ Overview charts must use dashboard tokens only and keep motion decorative; anima content: ""; position: absolute; inset: 0; - background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 16%, transparent), transparent); + background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 8%, transparent), transparent); opacity: 0; pointer-events: none; animation: cc-overview-chart-sheen calc(var(--duration-slow) * 7) ease-in-out infinite; diff --git a/packages/dashboard/app/components/command-center/__tests__/CommandCenter.token-validity.css.test.ts b/packages/dashboard/app/components/command-center/__tests__/CommandCenter.token-validity.css.test.ts index ee53223fef..8dd14f737c 100644 --- a/packages/dashboard/app/components/command-center/__tests__/CommandCenter.token-validity.css.test.ts +++ b/packages/dashboard/app/components/command-center/__tests__/CommandCenter.token-validity.css.test.ts @@ -75,6 +75,63 @@ function collectReferencedProperties(css: string): Map { return refs; } +function extractRuleBlock(css: string, selector: string): string { + const ruleStart = css.indexOf(`${selector} {`); + expect(ruleStart, `Expected ${selector} to exist in CommandCenter.css`).toBeGreaterThanOrEqual(0); + const bodyStart = css.indexOf("{", ruleStart); + const bodyEnd = css.indexOf("\n}", bodyStart); + expect(bodyEnd, `Expected ${selector} rule to have a closing brace`).toBeGreaterThan(bodyStart); + return css.slice(bodyStart + 1, bodyEnd); +} + +function collectAccentMixPercentages(ruleBlock: string): number[] { + const percentages: number[] = []; + const re = /color-mix\(in srgb,\s*var\(--accent\)\s*([0-9.]+)%,\s*transparent\)/g; + let m: RegExpExecArray | null; + while ((m = re.exec(ruleBlock)) !== null) { + percentages.push(Number(m[1])); + } + return percentages; +} + +/* +FNXC:CommandCenterStyling 2026-06-19-19:05: +FN-6700 keeps the Command Center main overview cards subdued by guarding the decorative accent color-mix percentages on both card bases and their animated overlays while also proving the --surface-1 layer remains in place. +*/ +describe("Command Center main-card gradient intensity (FN-6700)", () => { + const css = readFileSync(join(COMMAND_CENTER_DIR, "CommandCenter.css"), "utf8"); + const subduedAccentCaps = [ + { selector: ".cc-live-strip", cap: 10, requiresSurfaceBase: true }, + { selector: ".cc-live-strip::before", cap: 10, requiresSurfaceBase: false }, + { selector: ".cc-overview-chart-card", cap: 8, requiresSurfaceBase: true }, + { selector: ".cc-overview-chart-card::before", cap: 8, requiresSurfaceBase: false }, + ] as const; + + it("keeps main-card decorative accent gradients and glows capped", () => { + const violations: string[] = []; + for (const { selector, cap } of subduedAccentCaps) { + const block = extractRuleBlock(css, selector); + const percentages = collectAccentMixPercentages(block); + expect(percentages.length, `Expected ${selector} to retain at least one accent color-mix treatment`).toBeGreaterThan(0); + percentages.forEach((percentage) => { + if (percentage > cap) violations.push(`${selector}: ${percentage}% exceeds ${cap}%`); + }); + } + expect(violations, `Command Center main-card accent treatments should stay subdued:\n${violations.join("\n")}`).toEqual([]); + }); + + it("keeps the live strip and overview chart cards layered over --surface-1", () => { + const violations: string[] = []; + for (const { selector, requiresSurfaceBase } of subduedAccentCaps) { + if (!requiresSurfaceBase) continue; + const block = extractRuleBlock(css, selector); + if (!block.includes("linear-gradient(")) violations.push(`${selector}: missing decorative gradient layer`); + if (!block.includes("var(--surface-1)")) violations.push(`${selector}: missing --surface-1 base layer`); + } + expect(violations, `Command Center main-card surfaces should reduce gradients, not delete the layered surface:\n${violations.join("\n")}`).toEqual([]); + }); +}); + describe("Command Center CSS token validity (FN-6690)", () => { // Defined vocabulary = every --name: declared in styles.css, plus any // component-local properties assigned within Command Center CSS, plus