megaproxy
1854026a76
- Extract shared TOOLTIP_STYLE and ACTIVE_DOT to utils/chartTheme.ts so all four chart files use one source of truth - itemStyle now uses card-foreground (not muted-foreground) — guarantees tooltip text is readable on all themes including Terminal, Vault, Synthwave - cursor now uses primary at 12% opacity — always visible and thematic, replaces near-invisible muted-foreground at 8% opacity - activeDot is now explicit on every Line/Area — prevents Recharts default white dot breaking dark themes - Terminal: muted-foreground bumped 38%→55% lightness, border lightened, warning brightened, text-shadow scoped to headings/labels/table cells (was applying to every p and span, causing tooltip glow bleed) - Synthwave: muted-foreground bumped 56%→68% lightness for legibility - Vault: muted-foreground bumped 52%→60% lightness Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
/**
|
|
* Shared Recharts tooltip and chart style constants.
|
|
*
|
|
* All colour values use CSS custom properties so they adapt to every theme.
|
|
* itemStyle uses card-foreground (not muted-foreground) to guarantee
|
|
* readability inside the tooltip card on all themes including Terminal,
|
|
* Synthwave and Vault which have dim muted-foreground values.
|
|
*
|
|
* cursor uses --primary at low opacity — always visible and thematic.
|
|
*/
|
|
export const TOOLTIP_STYLE = {
|
|
contentStyle: {
|
|
background: "hsl(var(--card))",
|
|
border: "1px solid hsl(var(--border))",
|
|
borderRadius: "8px",
|
|
fontSize: "12px",
|
|
color: "hsl(var(--card-foreground))",
|
|
boxShadow: "0 4px 20px rgba(0,0,0,0.35)",
|
|
padding: "8px 12px",
|
|
},
|
|
labelStyle: {
|
|
color: "hsl(var(--card-foreground))",
|
|
fontWeight: 600,
|
|
marginBottom: "4px",
|
|
fontSize: "12px",
|
|
},
|
|
itemStyle: {
|
|
color: "hsl(var(--card-foreground))",
|
|
opacity: 0.8,
|
|
},
|
|
cursor: { fill: "hsl(var(--primary))", fillOpacity: 0.12 },
|
|
};
|
|
|
|
/** Standard activeDot for Line/Area charts — theme-adaptive. */
|
|
export const ACTIVE_DOT = {
|
|
r: 4,
|
|
stroke: "hsl(var(--card))",
|
|
strokeWidth: 2,
|
|
fill: "hsl(var(--primary))",
|
|
};
|