From b58cfa4b732cad9575136fa24a276363dc51e6c2 Mon Sep 17 00:00:00 2001
From: Matt Vollmer <matthewjvollmer@outlook.com>
Date: Thu, 30 Apr 2026 14:32:12 +0000
Subject: [PATCH] fix(site): fix chart axis tick labels showing as black

The XAxis and YAxis tick labels on the /usage page charts were
rendering as black instead of the intended gray/muted color.

Recharts propagates the fill="" prop as an inline SVG attribute
on <text> elements. In Tailwind v4, utility classes live in a CSS
layer, which has lower cascade priority than unlayered SVG
presentation attributes. So the fill-gray-500 CSS class was being
overridden by the empty fill attribute, causing text to fall back
to the SVG default (black).

Fix by passing fill directly through the tick prop object, which
sets fill on each <text> element as an SVG attribute. Use
var(--muted-foreground) so the color follows the light/dark theme
automatically.
---
 internal/site/components/ui/area-chart.tsx | 24 +++++++++-------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/internal/site/components/ui/area-chart.tsx b/internal/site/components/ui/area-chart.tsx
index 30795b2c..7476659c 100644
--- a/internal/site/components/ui/area-chart.tsx
+++ b/internal/site/components/ui/area-chart.tsx
@@ -688,7 +688,10 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
               hide={!showXAxis}
               dataKey={index}
               interval={startEndOnly ? "preserveStartEnd" : intervalType}
-              tick={{ transform: "translate(0, 6)" }}
+              tick={{
+                transform: "translate(0, 6)",
+                fill: "var(--muted-foreground)",
+              }}
               ticks={
                 startEndOnly
                   ? [data[0][index], data[data.length - 1][index]]
@@ -696,12 +699,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
               }
               fill=""
               stroke=""
-              className={cn(
-                // base
-                "text-xs",
-                // text fill
-                "fill-gray-500 dark:fill-gray-500"
-              )}
+              className="text-xs"
               tickLine={false}
               axisLine={false}
               minTickGap={tickGap}
@@ -725,15 +723,13 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
               tickLine={false}
               type="number"
               domain={yAxisDomain as AxisDomain}
-              tick={{ transform: "translate(-3, 0)" }}
+              tick={{
+                transform: "translate(-3, 0)",
+                fill: "var(--muted-foreground)",
+              }}
               fill=""
               stroke=""
-              className={cn(
-                // base
-                "text-xs",
-                // text fill
-                "fill-gray-500 dark:fill-gray-500"
-              )}
+              className="text-xs"
               tickFormatter={
                 type === "percent" ? valueToPercent : valueFormatter
               }