copyandpastecoder/claude/add-cycle-statistics-ZFjiO#174
copyandpastecoder/claude/add-cycle-statistics-ZFjiO#174copyandpastecoder merged 3 commits intoMasterfrom
Conversation
The CSS variables use oklch() format, not hsl(). Remove the hsl() wrapper and use var(--muted-foreground) directly to avoid invalid CSS syntax like hsl(oklch(...)).
CSS variables in this project use oklch() format, not hsl(). Wrapping with hsl() creates invalid CSS like hsl(oklch(...)), causing bars and tooltips to render black. Fixed: - Bar fill colors using var(--primary) - Tooltip backgroundColor using var(--card) - Tooltip border using var(--border) - COLORS arrays in stage-duration and tumbler-utilization charts
…stics-ZFjiO Claude/add cycle statistics z fji o
There was a problem hiding this comment.
Pull request overview
This pull request standardizes CSS custom property usage across dashboard chart components by removing the hsl() wrapper function from CSS variable references. The changes affect chart styling including axis ticks, tooltips, and bar colors.
Key Changes
- Updated CSS variable syntax from
hsl(var(--variable))tovar(--variable)for theme-based colors - Applied changes consistently to tooltip styling (background and border colors) across all chart components
- Modified axis tick colors in bar charts and primary colors in some chart elements
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| weight-by-stage-chart.tsx | Updated axis tick colors and tooltip styling to use simplified CSS variable syntax |
| weight-by-hardness-chart.tsx | Updated axis tick colors and tooltip styling to use simplified CSS variable syntax |
| tumbler-utilization-chart.tsx | Updated primary color and tooltip styling, but inconsistent with remaining hardcoded HSL colors |
| stage-duration-chart.tsx | Updated axis tick colors, tooltip styling, and bar fill colors across multiple chart instances, but inconsistent with remaining hardcoded HSL colors |
| monthly-activity-chart.tsx | Updated axis tick colors, tooltip styling, and "Started" bar color, but "Completed" bar still uses hardcoded HSL |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| const COLORS = [ | ||
| 'hsl(var(--primary))', | ||
| 'var(--primary)', |
There was a problem hiding this comment.
Inconsistent color format usage. The first color was updated to use var(--primary) without the hsl() wrapper, but the remaining colors (lines 14-16) still use the hsl() format directly. For consistency, either all colors should be CSS variables without hsl() wrapper, or they should all maintain the same format.
| 'var(--primary)', | |
| 'hsl(var(--primary))', |
|
|
||
| const COLORS = [ | ||
| 'hsl(var(--primary))', | ||
| 'var(--primary)', |
There was a problem hiding this comment.
Inconsistent color format usage. The first color was updated to use var(--primary) without the hsl() wrapper, but the remaining colors (lines 15-17) still use the hsl() format directly. For consistency, either all colors should be CSS variables without hsl() wrapper, or they should all maintain the same format.
| 'var(--primary)', | |
| 'hsl(217 91% 60%)', |
| <Legend wrapperStyle={{ fontSize: '12px' }} /> | ||
| <Bar dataKey="started" name="Started" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} /> | ||
| <Bar dataKey="started" name="Started" fill="var(--primary)" radius={[4, 4, 0, 0]} /> | ||
| <Bar dataKey="completed" name="Completed" fill="hsl(142 76% 36%)" radius={[4, 4, 0, 0]} /> |
There was a problem hiding this comment.
Inconsistent color format usage. Line 82 was updated to use var(--primary) without the hsl() wrapper, but line 83 still uses hsl(142 76% 36%) directly. For consistency, both bars should use the same color format approach.
| <Bar dataKey="completed" name="Completed" fill="hsl(142 76% 36%)" radius={[4, 4, 0, 0]} /> | |
| <Bar dataKey="completed" name="Completed" fill="var(--primary)" radius={[4, 4, 0, 0]} /> |
No description provided.