fix(chart): mute timeseries chart chrome

.changeset/muted-timeseries-axis-labels.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Use muted chart colors for timeseries axes and horizontal gridlines.

packages/kumo/src/components/chart/TimeseriesChart.tsx

@@ -309,6 +309,8 @@ export const TimeseriesChart = forwardRef<
   const incompleteAfter = incomplete?.after;
 
   const markerColor = ChartPalette.text("primary", isDarkMode);
+  const axisTextColor = ChartPalette.text("primary", isDarkMode);
+  const gridLineColor = colorWithOpacity(axisTextColor, 0.2);
   const markerLabelBackgroundColor = isDarkMode
     ? "rgba(0, 0, 0, 0.5)"
     : "rgba(255, 255, 255, 0.5)";
@@ -450,33 +452,41 @@ export const TimeseriesChart = forwardRef<
         name: xAxisName,
         nameLocation: "middle" as const,
         nameGap: 30,
+        nameTextStyle: { color: axisTextColor },
         type: "time" as const,
         splitLine: {
           show: false,
         },
         axisLine: { show: false },
         splitNumber: xAxisTickCount ?? DEFAULT_X_AXIS_TICK_COUNT,
-        ...(xAxisTickFormat && {
-          axisLabel: {
+        axisLabel: {
+          color: axisTextColor,
+          ...(xAxisTickFormat && {
             formatter: (value: number) => xAxisTickFormat(value),
-          },
-        }),
+          }),
+        },
       },
       yAxis: {
         name: yAxisName,
         nameLocation: "middle" as const,
         nameGap: 40,
+        nameTextStyle: { color: axisTextColor },
         type: "value" as const,
         axisTick: { show: true },
         axisLabel: {
           margin: 15,
+          color: axisTextColor,
           ...(yAxisTickFormat && {
             formatter: (value: number) => yAxisTickFormat(value),
           }),
         },
         splitLine: {
           show: true,
-          lineStyle: { type: "dashed" as const, width: 1 },
+          lineStyle: {
+            type: "dashed" as const,
+            width: 1,
+            color: gridLineColor,
+          },
         },
         splitNumber: yAxisTickCount,
         ...(thresholdExtent && {
@@ -513,6 +523,8 @@ export const TimeseriesChart = forwardRef<
     thresholds,
     markerColor,
     markerLabelBackgroundColor,
+    axisTextColor,
+    gridLineColor,
   ]);
 
   const events = useMemo<Partial<ChartEvents>>(() => {