root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

FN-6700: reduce Command Center card gradients

Browse Source 
Tone down the Command Center main overview card accents while keeping layered surfaces intact.

- Lower live-strip gradient, glow, and sweep accent intensity.
- Lower overview chart-card gradient, glow, and sheen accent intensity.
- Add CSS regression coverage for capped accent color-mix values and preserved surface layers.

Files changed:
 .../components/command-center/CommandCenter.css    | 20 +++++---
 .../CommandCenter.token-validity.css.test.ts       | 57 ++++++++++++++++++++++
 2 files changed, 70 insertions(+), 7 deletions(-)

Fusion-Task-Id: FN-6700

Fusion-Task-Lineage: de49162b-3c1d-4f2a-8824-f6adcb125fc6
This commit is contained in:
gsxdsm
2026-06-19 06:46:43 -07:00
parent 3df9107e58
commit 0ba4bbebf4
2 changed files with 70 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/dashboard/app/components/command-center/CommandCenter.css
View File

@@ -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;

57
packages/dashboard/app/components/command-center/__tests__/CommandCenter.token-validity.css.test.ts
View File

@@ -75,6 +75,63 @@ function collectReferencedProperties(css: string): Map<string, number[]> {
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