Apply nao colors as default for chart colors - #1168
Open
ClaireGz wants to merge 9 commits into
Open
Conversation
Replace the default shadcn chart palette with nao's designer-defined palette (Figma "Graphs" guidelines). Unifies the three previously inconsistent sources of truth onto the same 8 brand hues: - apps/shared DEFAULT_COLORS (backend SVG + story HTML) - --chart-1..8 tokens in styles.css (frontend Recharts), light + dark - Colors array / series modulo in the frontend chart components Palette: purple #522BFF (brand), green #0DC368, blue #3662FF, orange #FF612C, then light tints. Expanded from 5 to 8 colors. Also adds general chart-color guidance to the agent system prompt: neutral for generic metrics, green for positive values, orange/red for negative — kept non-specific so user rules.md preferences win. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
🚀 Preview Deployment
Preview will be automatically removed when this PR is closed. |
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
ClaireGz
changed the title
Replaces the 8-color base+tint set with the designer's refined 6-color categorical palette (Chart Palette.dc.html): distinct hues held to one brightness so they mix cleanly. purple #7B5CFF, blue #3B82F6, green #2FBE6E, orange #FF9F43, pink #F368A0, teal #22C3C9. Updates DEFAULT_COLORS (shared), --chart-1..6 tokens (styles.css), the frontend Colors array + series modulo, and the color-picker fallback. Drops --chart-7/8. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Pie/donut slices are a single metric, not distinct series, so cycling the categorical palette read as gratuitous rainbow. They now use a single-hue purple ramp (light -> deep) via sequentialColorFor, keeping single-metric breakdowns on-brand. Categorical palette is unchanged and still used for genuine multi-series comparisons. - shared: add PIE_COLORS ramp + sequentialColorFor; buildPieChart uses it - frontend: pie chartConfig uses the ramp (slices + legend stay in sync) - story export: split pie ramp from the categorical series fallback - system prompt: keep a single metric within one hue; categorical only to tell apart separate series Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
All reported issues were addressed across 4 files (changes from recent commits).
Tip: Review your code locally with the cubic CLI to iterate faster.
Re-trigger cubic
Adopt the updated design proposal (Chart Palette.dc.html): a fresh, airy 7-color categorical palette and two sibling sequential ramps (purple + blue declined from the same indigo). - categorical palette -> 7 colors (#A896FF purple, #83ACF3 blue, #8AE4DD teal, #8BD1A1 green, #FFD591 amber, #FF84BF pink, #BAAAFD lavender) across DEFAULT_COLORS, --chart-1..7, frontend arrays - pie/donut back to categorical (matches the updated design; reverts the interim purple-ramp pie) — removes sequentialColorFor/PIE_COLORS - system prompt: three explicit coloring rules — categorical for distinct types, a single-hue purple/blue scale for one value type on an ordered scale, green/orange for positive vs negative — deferring to user rules Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
All reported issues were addressed across 7 files (changes from recent commits).
Tip: Review your code locally with the cubic CLI to iterate faster.
Re-trigger cubic
Pie slice labels inherited the sector fill, so pale categorical colors (amber #FFD591, teal #8AE4DD) made labels unreadable on white. Render the label text in a theme-aware dark foreground instead — var(--foreground) in-app (adapts to dark mode), #1f2937 fallback for the static story SVG. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
All reported issues were addressed across 1 file (changes from recent commits).
Tip: Review your code locally with the cubic CLI to iterate faster.
Re-trigger cubic
Both reference var(--foreground); use the same #111827 fallback for consistency (addresses cubic P3). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Remove the per-chart color rules from the agent system prompt and point the display_chart 'color' field at leaving itself unset. With no prompt pressure to set colors, the agent leaves series colors blank, so every chart renders from the theme palette (--chart-1..7 / DEFAULT_COLORS) by series index. Explicit colors are reserved for when a user asks for one. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
ClaireGz
force-pushed
the
claude/chart-color-palette-45c98f
branch
from
July 14, 2026 10:10
acca146 to
02a224b
Compare
Contributor
|
I do not like this palette I feel the colors are not enough contrasted and it might be bad visually to compare colors, esp. for people not seeing the colors correctly. |
…lette-45c98f # Conflicts: # apps/shared/src/chart-builder.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #1167
Why
The default chart palette was the stock shadcn/Tailwind set — not brand-aligned, and defined in three places that drifted apart. This replaces it with nao's designer-defined palette (
Chart Palette.dc.html) and unifies the sources, keeping the same--chart-Ntoken architecture.Palette
Two sequential ramps (for scales) — siblings declined from the same indigo:
#EEE9FF → #300CCE#E7EFFE → #183FA6Categorical (7, distinct types) — light + dark:
#A896FF#83ACF3#8AE4DD#8BD1A1#FFD591#FF84BF#BAAAFDPreview
Dark mode
