Fix chart axis colours for dark mode

[talissoncosta]

Problem

Recharts components hardcode light-coloured values that don't adapt to dark mode:

• CartesianGrid stroke='#EFF1F4' — light grid lines invisible on dark backgrounds
• Hardcoded tick label colours (#656D7B, #1A2634)
• Hardcoded line stroke colours (#0AADDF, #27AB95, #FF9F43)

Files (5)

File	Hardcoded instances
web/components/organisation-settings/usage/OrganisationUsage.container.tsx	5
web/components/organisation-settings/usage/components/SingleSDKLabelsChart.tsx	5
web/components/pages/admin-dashboard/components/UsageTrendsChart.tsx	3
web/components/modals/create-experiment/ExperimentResultsTab.tsx	11
web/components/feature-page/FeatureNavTab/FeatureAnalytics.tsx	5

Hardcoded colours

Colour	Usage	Count
#EFF1F4	CartesianGrid stroke, axis lines	~12
#656D7B	Tick label fill, axis lines	~10
#1A2634	Y-axis tick fill	~2
#0AADDF	API calls line stroke	1
#27AB95	Flag evaluations line stroke	1
#FF9F43	Identity requests line stroke	1

Proposed fix

Recharts doesn't support CSS custom properties in props. Use a useChartTheme() hook or semantic token TS exports to resolve theme-aware values at render time.

Blocked on

chore/design-system-tokens — resolved: semantic tokens shipped via #7215.

---

Part of the Design System Audit (#6606) · Epic: #6882

[talissoncosta]

Progress update — resolved

Consolidation was done via three PRs, each migrating files to shared chart wrappers that read from the design-system token palette rather than hardcoded hex:

• feat: Feature Analytics label grouping (#6067) #7215 (merged) — FeatureAnalytics.tsx → introduced <BarChart>, ChartTooltip, buildChartColorMap, and the token foundation.
• refactor: consolidate charts with BarChart component #7223 — OrganisationUsage.container.tsx + SingleSDKLabelsChart.tsx → <BarChart>.
• refactor: consolidate remaining charts into LineChart + PieChart wrappers #7328 — UsageTrendsChart.tsx → <LineChart>; ReleasePipelineStatsTable.tsx → <PieChart> (net-new — wasn't in the original inventory); ExperimentResultsTab.tsx → token replacement only (legacy v1 code retained).

Approach deviated from the original "use a useChartTheme() hook" plan — instead, shared wrappers encapsulate the theming via CSS-variable tokens, which tree-shakes cleanly and gives us a consistent API across chart types.

Known follow-up

Chromatic's axe-core check flagged contrast issues on the chart palette in dark mode. The root cause is the --color-chart-N dark-mode overrides in _tokens.scss (400/300/200 shades), not the chart components themselves — fixing is a token-level change affecting every chart consumer. Should be tracked as its own issue if/when we decide to act on it.

Auto-closes on #7328 merge.