fix: use branding colors in charts

[pthmas]

Summary

• source chart accent colors from the active branding config instead of hard-coded values
• use theme-aware surface and text tokens for chart grids, axes, and tooltips
• apply the shared chart color hook to the status and token detail pages

Summary by CodeRabbit

• New Features
  • Charts now dynamically adapt their colors based on your configured branding accent color, with grid lines, axis text, and tooltips automatically adjusting to maintain visual consistency throughout the application.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 49149b25-8cd6-4701-aab2-12ca1be7332d

📥 Commits

Reviewing files that changed from the base of the PR and between 1f86eb2 and 2f15e33.

📒 Files selected for processing (5)

• frontend/src/context/BrandingContext.tsx
• frontend/src/context/branding-context.ts
• frontend/src/hooks/useChartColors.ts
• frontend/src/pages/StatusPage.tsx
• frontend/src/pages/TokenDetailPage.tsx

---

📝 Walkthrough

Walkthrough

This PR extends the branding context with a new accentHex field populated from configuration, and introduces a useChartColors hook that centralizes chart color derivation from branding and theme contexts. Status and token detail pages now consume this hook instead of maintaining hardcoded color constants.

Changes

Cohort / File(s)	Summary
Branding Context Enhancement frontend/src/context/branding-context.ts, frontend/src/context/BrandingContext.tsx	Added accentHex: string | null field to BrandingContextValue interface and brandingDefaults object; updated state initialization to populate accentHex from configuration with null fallback.
Chart Colors Hook frontend/src/hooks/useChartColors.ts	New exported React hook that reads accentHex and theme from context, returns memoized object with accent, grid, axisText, tooltipBg, and tooltipText derived from CSS custom properties and branding values.
Page Integration frontend/src/pages/StatusPage.tsx, frontend/src/pages/TokenDetailPage.tsx	Removed hardcoded chart color constants and integrated useChartColors hook; updated Recharts tooltip itemStyle.color to use hook-provided tooltipText value instead of fixed light color.

Sequence Diagram(s)

sequenceDiagram
    participant BrandingCtx as BrandingContext
    participant ThemeCtx as ThemeContext
    participant Hook as useChartColors Hook
    participant Page as StatusPage/<br/>TokenDetailPage
    participant CSS as CSS Custom<br/>Properties

    Page->>Hook: Call useChartColors()
    Hook->>BrandingCtx: Read accentHex
    Hook->>ThemeCtx: Read theme (default 'dark')
    Hook->>CSS: getComputedStyle() for<br/>--grid, --axis-text, etc.
    CSS-->>Hook: CSS variable values
    Note over Hook: Derive accent (prefer<br/>accentHex or fallback)
    Hook->>Hook: Memoize [accentHex, theme]
    Hook-->>Page: Return { accent, grid,<br/>axisText, tooltipBg, tooltipText }
    Page->>Page: Apply colors to<br/>Recharts components

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A branding accent hops into the fold,
with colors from the context, brave and bold.
The hook now weaves them tight and true,
from CSS whispers to a memoized view.
Charts glow with hues from a single source—
no hardcodes left to run their course! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: use branding colors in charts' directly summarizes the main change—sourcing chart colors from branding configuration instead of hardcoded values across multiple chart components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch pthmas/fix-graph-theme-colors

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}