fix(site): fix chart axis tick labels showing as black (#301)

Author: mattvollmer

internal/site/components/ui/area-chart.tsx

@@ -688,20 +688,18 @@ 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]]
                   : undefined
               }
               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
               }