tom/HealthLog
1
0 Fork 0
mirror of https://github.com/MBombeck/HealthLog.git synced 2026-11-11 13:52:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(charts): light-theme chart text uses semantic tokens

Browse Source 
Recharts tick/label/tooltip colours in the scatter-correlation chart,
the three mood charts, and the admin host-metrics chart referenced the
raw Dracula primitives (--dracula-fg / --dracula-comment), which the
light theme never overrides — near-white text on a near-white card
(~1.0:1) and an AA-failing comment gray (~2.5:1). Swap all 23 sites to
--foreground / --muted-foreground. Dark theme is pixel-identical: the
semantic tokens alias the same Dracula values there (#f8f8f2 /
#9aa3b3); light resolves to the AA-checked soft-neutral values.

H5
This commit is contained in:
Marc-André Bombeck committed 2026-07-07 12:03:15 +02:00
1 parent 85058716f6
commit f0b16c1a39
5 files changed
+23 -23
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/admin/host-metrics-chart.tsx
+2 -2
View File
@@ -267,8 +267,8 @@ export function HostMetricsChart() {
borderRadius: "0.5rem",
fontSize: "0.75rem",
}}
labelStyle={{ color: "var(--dracula-fg)" }}
itemStyle={{ color: "var(--dracula-fg)" }}
labelStyle={{ color: "var(--foreground)" }}
itemStyle={{ color: "var(--foreground)" }}
formatter={(value, name) => {
if (typeof value !== "number") return [String(value), name];
if (name === t("admin.hostMetrics.load1")) {
src/components/charts/scatter-correlation-chart.tsx
+7 -7
View File
@@ -128,12 +128,12 @@ export function ScatterCorrelationChart<T extends Record<string, number>>({
type="number"
name={xAxis.name}
unit={xAxis.unit}
tick={{ fontSize: 12, fill: "var(--dracula-fg)" }}
tick={{ fontSize: 12, fill: "var(--foreground)" }}
tickMargin={8}
height={52}
interval="preserveStartEnd"
padding={{ left: 8, right: 8 }}
stroke="var(--dracula-comment)"
stroke="var(--muted-foreground)"
domain={xAxis.domain}
ticks={xAxis.ticks}
tickFormatter={xAxis.tickFormatter}
@@ -143,7 +143,7 @@ export function ScatterCorrelationChart<T extends Record<string, number>>({
value: xAxis.label,
position: "bottom",
fontSize: 12,
fill: "var(--dracula-comment)",
fill: "var(--muted-foreground)",
}
: undefined
}
@@ -153,8 +153,8 @@ export function ScatterCorrelationChart<T extends Record<string, number>>({
type="number"
name={yAxis.name}
unit={yAxis.unit}
tick={{ fontSize: 12, fill: "var(--dracula-fg)" }}
stroke="var(--dracula-comment)"
tick={{ fontSize: 12, fill: "var(--foreground)" }}
stroke="var(--muted-foreground)"
domain={yAxis.domain}
ticks={yAxis.ticks}
tickFormatter={yAxis.tickFormatter}
@@ -166,8 +166,8 @@ export function ScatterCorrelationChart<T extends Record<string, number>>({
borderRadius: "0.5rem",
fontSize: "0.75rem",
}}
itemStyle={{ color: "var(--dracula-fg)" }}
labelStyle={{ color: "var(--dracula-fg)" }}
itemStyle={{ color: "var(--foreground)" }}
labelStyle={{ color: "var(--foreground)" }}
formatter={tooltipFormatter}
/>
<Scatter data={data} fill={fill} opacity={0.8} />
src/components/insights/mood/mood-distribution-chart.tsx
+4 -4
View File
@@ -71,7 +71,7 @@ export function MoodDistributionChart({
// unchanged. The mood-hue bar Cells stay on `--dracula-*` — only the
// axis text legibility changes here.
tick={{ fontSize: 11, fill: "var(--muted-foreground)" }}
stroke="var(--dracula-comment)"
stroke="var(--muted-foreground)"
interval={0}
/>
<YAxis
@@ -83,7 +83,7 @@ export function MoodDistributionChart({
// unchanged. The mood-hue bar Cells stay on `--dracula-*` — only the
// axis text legibility changes here.
tick={{ fontSize: 11, fill: "var(--muted-foreground)" }}
stroke="var(--dracula-comment)"
stroke="var(--muted-foreground)"
width={28}
/>
<Tooltip
@@ -94,8 +94,8 @@ export function MoodDistributionChart({
borderRadius: "0.5rem",
fontSize: "0.75rem",
}}
itemStyle={{ color: "var(--dracula-fg)" }}
labelStyle={{ color: "var(--dracula-fg)" }}
itemStyle={{ color: "var(--foreground)" }}
labelStyle={{ color: "var(--foreground)" }}
formatter={(value) =>
[
`${value ?? 0} ${t("insights.mood.distributionDaysUnit")}`,
src/components/insights/mood/mood-time-of-day-chart.tsx
+5 -5
View File
@@ -90,19 +90,19 @@ export function MoodTimeOfDayChart({
<XAxis
dataKey="label"
tick={{ fontSize: 11, fill: "var(--muted-foreground)" }}
stroke="var(--dracula-comment)"
stroke="var(--muted-foreground)"
interval={0}
/>
<YAxis
domain={[1, 5]}
ticks={[1, 2, 3, 4, 5]}
tick={{ fontSize: 11, fill: "var(--muted-foreground)" }}
stroke="var(--dracula-comment)"
stroke="var(--muted-foreground)"
width={24}
/>
<ReferenceLine
y={3.5}
stroke="var(--dracula-comment)"
stroke="var(--muted-foreground)"
strokeDasharray="3 3"
strokeOpacity={0.6}
/>
@@ -114,8 +114,8 @@ export function MoodTimeOfDayChart({
borderRadius: "0.5rem",
fontSize: "0.75rem",
}}
itemStyle={{ color: "var(--dracula-fg)" }}
labelStyle={{ color: "var(--dracula-fg)" }}
itemStyle={{ color: "var(--foreground)" }}
labelStyle={{ color: "var(--foreground)" }}
formatter={(_value, _name, item) => {
const payload = item?.payload as
{ avgScore: number | null; count: number } | undefined;
src/components/insights/mood/mood-weekday-chart.tsx
+5 -5
View File
@@ -90,7 +90,7 @@ export function MoodWeekdayChart({ weekday }: { weekday: MoodWeekdayRow[] }) {
// to the shared `--muted-foreground` axis-tick token. Bar mood
// hues stay `--dracula-*`; dark mode is unchanged.
tick={{ fontSize: 11, fill: "var(--muted-foreground)" }}
stroke="var(--dracula-comment)"
stroke="var(--muted-foreground)"
interval={0}
/>
<YAxis
@@ -101,7 +101,7 @@ export function MoodWeekdayChart({ weekday }: { weekday: MoodWeekdayRow[] }) {
// to the shared `--muted-foreground` axis-tick token. Bar mood
// hues stay `--dracula-*`; dark mode is unchanged.
tick={{ fontSize: 11, fill: "var(--muted-foreground)" }}
stroke="var(--dracula-comment)"
stroke="var(--muted-foreground)"
width={24}
/>
{/* v1.15.14 — calmer target guide: a muted comment-grey dashed
@@ -109,7 +109,7 @@ export function MoodWeekdayChart({ weekday }: { weekday: MoodWeekdayRow[] }) {
reference rather than competing with the bars. */}
<ReferenceLine
y={3.5}
stroke="var(--dracula-comment)"
stroke="var(--muted-foreground)"
strokeDasharray="3 3"
strokeOpacity={0.6}
/>
@@ -121,8 +121,8 @@ export function MoodWeekdayChart({ weekday }: { weekday: MoodWeekdayRow[] }) {
borderRadius: "0.5rem",
fontSize: "0.75rem",
}}
itemStyle={{ color: "var(--dracula-fg)" }}
labelStyle={{ color: "var(--dracula-fg)" }}
itemStyle={{ color: "var(--foreground)" }}
labelStyle={{ color: "var(--foreground)" }}
formatter={(_value, _name, item) => {
const payload = item?.payload as
{ avgScore: number | null; count: number } | undefined;