From 8582958ad5e2f55cbba06cbc9b845e8b094f3def Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Thu, 3 Sep 2026 00:56:29 -0400 Subject: [PATCH] fix(client): rebuild the stat box gradient from `main` The coloured stat box ran its gradient from `.light` to `.main`. With Material's stock warning that was #ff9800 -> #ed6c02, a bright orange. The new warning.main is a dark amber chosen so the "Paused" chip text clears 4.5:1, and MUI derives `light` from it, so the gradient became brown mud. The two roles were never compatible: `main` has to be dark enough for small text on white, and the same value was being used as a large filled background. The gradient now runs from lighten(main, 0.12) to main, which keeps the box in the status colour, restores the depth that the flat brown lost, and holds white contrastText at 4.64:1 or better at the lightest point for all four palettes. Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd --- client/src/Components/design-elements/StatBox.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/src/Components/design-elements/StatBox.tsx b/client/src/Components/design-elements/StatBox.tsx index addbc7ee9..9cdb9c024 100644 --- a/client/src/Components/design-elements/StatBox.tsx +++ b/client/src/Components/design-elements/StatBox.tsx @@ -23,8 +23,11 @@ export const GradientBox = ({ children, palette, sx, interactive }: GradientBox) // gradient collapses flat. Darken slightly towards the page ground instead. const paperStart = isLight ? darken(paper, 0.02) : lighten(paper, 0.08); const paperEnd = paper; + // The gradient carries white `contrastText`, so it runs between two shades + // dark enough to keep that legible. `light` is a mid-tone used for status + // dots and chart marks - too pale here - so lift from `main` instead. const bg = palette - ? `linear-gradient(135deg, ${theme.palette[palette].light} 0%, ${theme.palette[palette].main} 100%)` + ? `linear-gradient(135deg, ${lighten(theme.palette[palette].main, 0.12)} 0%, ${theme.palette[palette].main} 100%)` : `linear-gradient(135deg, ${paperStart} 0%, ${paperEnd} 100%)`; return (