refactor: chart colors
- Dominant language
- Python
- Stars
- 9
- Forks
- 31
- Avg merge
- 3d 19h
- Merged PRs (30d)
- 16
Description
## Problem
`StatusCharts.tsx` defines a `Colors` enum with hardcoded hex values that duplicate colors already in `tailwind.config.js`. Changing a brand color requires edits in two places.
```ts
// dashboard/src/components/StatusChart/StatusCharts.tsx
export enum Colors {
Red = '#E15739', // == theme.colors.red
Green = '#53D07C', // == theme.colors.green
Yellow = '#FFD27C', // == theme.colors.yellow
Gray = '#EAEAEA', // == theme.colors.mediumGray
Blue = '#11B3E6', // == theme.colors.blue
DimGray = '454545', // == theme.colors.dimGray (also missing `#`)
}
```
Legend already maps these to Tailwind classes via `getColorClassName()` (`bg-red`, `bg-green`, …). Chart slices (MUI `PieChart`) still need raw color strings, so we cannot use class names alone.
## Goal
Single source of truth: chart colors come from the Tailwind theme (or a shared theme module fed by it).
## Suggested approach
Import `theme.extend.colors` from `tailwind.config.js` (or extract shared color constants both Tailwind and charts consume). Keep the `Colors` enum API so call sites (`StatusCard`, `TestCards`, `CommitNavigationGraph`) need little/no change.
Reference: [Tailwind discussion on reading config colors in JS](https://github.com/tailwindlabs/tailwindcss/discussions/1910#discussioncomment-24821)
## Acceptance criteria
- [ ] No duplicated hex for status chart colors outside the Tailwind theme / shared module
- [ ] Pie chart, legend circles, and regression icons still render the same colors
- [ ] Fix `DimGray` missing `#`
- [ ] Existing `Colors.*` usages keep working (or are updated in the same PR)
## Out of scope
- Other hardcoded hexes elsewhere (e.g. `WrapperSheetContent`, `LogViewerCard`) — can be follow-ups
- Redesigning the chart palette
Contributor guide
Research direction
Start with dashboard/src/components/StatusChart/StatusCharts.tsx and tailwind.config.js, then trace Colors usages in StatusCard, TestCards, and CommitNavigationGraph. Choose a shared source for the status colors while preserving the Colors API where possible. Done means no duplicated status-chart hex values, DimGray includes '#', and the PieChart, legend circles, and regression icons retain their colors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 52/100