first commit

src/components/charts/muiChartTheme.js

@@ -0,0 +1,86 @@
+/**
+ * KROW styling for MUI X Charts.
+ *
+ * MUI X is the drawing layer only — the surfaces, spacing and typography around
+ * a chart stay KROW's. This module is what stops the two from disagreeing: the
+ * palette is the same one the Recharts components already use (`CHART_TONES`),
+ * and the `sx` block restyles MUI's axes, grid and tooltip to the design
+ * system's hairlines and type scale rather than Material's defaults.
+ *
+ * Everything here is presentation. No chart in this folder computes a value.
+ */
+
+import { CHART_TONES } from '@/components/ds/ChartContainer';
+
+export const TONES = {
+  brand: CHART_TONES.brand,
+  brandSoft: 'rgba(10, 57, 223, 0.14)',
+  warning: '#D97706',
+  warningSoft: 'rgba(217, 119, 6, 0.16)',
+  success: '#16A34A',
+  grid: CHART_TONES.grid,
+  axis: CHART_TONES.axis,
+  ink: '#0F172A',
+  muted: '#64748B',
+};
+
+/** Type scale for chart text — matches the caption/overline sizes around it. */
+const LABEL_FONT = {
+  fontSize: 11,
+  fontFamily: 'var(--font-body)',
+};
+
+/**
+ * Shared `sx` for every KROW chart.
+ *
+ * Axis lines and ticks are removed rather than restyled: on a compact chart the
+ * value labels carry the reading, and a full axis frame is the "chart junk" the
+ * design language avoids. The grid stays as a hairline in the same colour the
+ * rest of the product uses for rules.
+ */
+export const chartSx = {
+  '& .MuiChartsAxis-line': { display: 'none' },
+  '& .MuiChartsAxis-tick': { display: 'none' },
+  '& .MuiChartsAxis-tickLabel': {
+    ...LABEL_FONT,
+    fill: `${TONES.muted} !important`,
+  },
+  '& .MuiChartsGrid-line': {
+    stroke: TONES.grid,
+    strokeDasharray: '3 3',
+  },
+  '& .MuiChartsLegend-root': { display: 'none' },
+  '& .MuiBarLabel-root': {
+    ...LABEL_FONT,
+    fontWeight: 600,
+    fill: `${TONES.ink} !important`,
+  },
+};
+
+/**
+ * Tooltip chrome matching `Surface`.
+ *
+ * Passed through `slotProps.tooltip` so MUI's popper carries the design
+ * system's radius, hairline border and shadow instead of Material elevation.
+ */
+export const tooltipSx = {
+  '& .MuiChartsTooltip-root, & .MuiPopper-root .MuiPaper-root': {
+    borderRadius: '10px',
+    border: `1px solid ${TONES.grid}`,
+    boxShadow: '0 8px 24px -12px rgba(15, 23, 42, 0.25)',
+    fontFamily: 'var(--font-body)',
+    fontSize: 12,
+  },
+  '& .MuiChartsTooltip-table': { fontSize: 12 },
+  '& .MuiChartsTooltip-labelCell, & .MuiChartsTooltip-valueCell': {
+    fontFamily: 'var(--font-body)',
+  },
+};
+
+/*
+ * Entry animation is switched off at every call site rather than gated on
+ * `prefers-reduced-motion`. Two reasons: a chart that grows out of the floor is
+ * the decorative motion this product avoids, and MUI's bar transition leaves
+ * every bar at zero height if the frame loop never advances — which is exactly
+ * what happens in an inactive tab or an automated browser.
+ */