refactor(component): Citrine chart palette + opinionated ECharts defaults

[alfredo1996]

What

Closes #821 and #822 — completes the v1.1.0-alpha milestone (with #1014).

Citrine palette (#821)

10-color categorical default anchored on the brand citrine amber as color 1. Not hand-waved colorblind-safe: the palette was optimized programmatically (greedy search maximizing min pairwise deltaE under Viénot protanopia/deuteranopia/tritanopia simulation) and dominates Deep Ocean on every CVD axis — first-5 worst case deltaE 28–32 vs Deep Ocean's 8–11; all-10 16–18 vs 4–6. A permanent contract test (citrine-cvd-safety.test.ts) locks those thresholds for both light and dark variants. Saved dashboards referencing deep-ocean alias to citrine; DEEP_OCEAN_* exports remain as deprecated aliases for external plugins.

Opinionated chart defaults (#822)

Compact axis numbers (45.2K/1.2M), quiet grid, bars without floating labels + subtle top radius, fine smooth lines with gentle area fill (1.5px, round caps — all opt-outable), pie slice gaps, and tooltips styled from the Graphite & Citrine tokens instead of the ECharts white box. Theme-level where possible, prop defaults where themes can't reach (line chart).

Screenshots

screenshots/v1.1-redesign/ — compare before-03-charts-light.png (default blue bars, raw 1,000,000 axis, floating values) with after-03-charts-light.png (citrine bars, 1M/800K axis, rounded tops) and the dark pair.

Verification

• New contract tests: CVD safety (16 assertions), theme defaults (formatter, bar/line/pie/tooltip), palette rename + alias
• component 1383 ✓ · app 2897 ✓ · lint 0 errors ✓ · build ✓
• Full local Playwright run: the one genuine finding (design-system.spec asserting Deep Ocean values) is fixed in this PR — that spec passes 14/14; remaining residuals are the documented machine-contention clusters (each passing in targeted re-runs, final confirmation run in flight)
• CI's 5-shard suite on fresh runners is the authoritative E2E gate for merge

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced the new Citrine color palette as the default for charts, designed with colorblind accessibility in mind
  • Line charts now render with smooth curves and filled areas by default

• Style

  • Reduced default line width for a more refined chart appearance
  • Enhanced chart theme styling and axis label formatting

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 9c0d41a0-82da-4397-b45d-9a38cd836698

📥 Commits

Reviewing files that changed from the base of the PR and between 96729ec and a0a9015.

⛔ Files ignored due to path filters (2)

• screenshots/v1.1-redesign/after-03-charts-light.png is excluded by !**/*.png
• screenshots/v1.1-redesign/after-04-charts-dark.png is excluded by !**/*.png

📒 Files selected for processing (14)

• app/e2e/design-system.spec.ts
• component/design-tokens.css
• component/src/charts/__tests__/base-chart.test.tsx
• component/src/charts/__tests__/citrine-cvd-safety.test.ts
• component/src/charts/__tests__/line-chart.test.tsx
• component/src/charts/__tests__/palettes.test.ts
• component/src/charts/__tests__/theme-defaults.test.ts
• component/src/charts/__tests__/theme.test.ts
• component/src/charts/base-chart.tsx
• component/src/charts/index.ts
• component/src/charts/line-chart.tsx
• component/src/charts/palettes.ts
• component/src/charts/theme.ts
• component/src/components/composed/__tests__/chart-options-schema.test.ts

---

Walkthrough

This PR replaces the default "Deep Ocean" chart palette with a new "Citrine" categorical palette anchored on the Graphite & Citrine accent, adds colorblind-safety validation, introduces a compact axis-label formatter, consolidates theme defaults (tooltip/bar/line/pie styling), and refines LineChart rendering defaults (smooth curves, filled area, reduced line width).

Changes

Citrine Palette & Theme Defaults Refactor

Layer / File(s)	Summary
Citrine Palette & Theme Foundation component/src/charts/theme.ts, component/design-tokens.css	New CITRINE_LIGHT and CITRINE_DARK palette arrays replace Deep Ocean; DEEP_OCEAN_* exports are deprecated aliases. Introduces formatAxisCompact() formatter for K/M/B axis labels. Adds seriesDefaults helper centralizing bar/line/pie/tooltip styling. Updates registerNeoboardThemes to wire Citrine palettes and apply shared defaults to both light and dark themes. CSS --chart-1..--chart-10 tokens updated for both :root and .dark themes.
Palette Registry & Chart Fallback component/src/charts/palettes.ts, component/src/charts/base-chart.tsx, component/src/charts/index.ts	New citrine palette entry registered as default. Legacy deep-ocean palette aliased to citrine for backward compatibility. Chart color fallback switched from DEEP_OCEAN_LIGHT to CITRINE_LIGHT. New palette and formatter constants re-exported from index.ts.
LineChart Defaults & Area Styling component/src/charts/line-chart.tsx	Smooth curves and filled area now enabled by default (smooth: true, area: true); line width reduced from 2 to 1.5. Area style now applies color-based linear gradient with opacity falloff when series color is resolved, or flat opacity when unknown.
Citrine Colorblind-Safety Validation component/src/charts/__tests__/citrine-cvd-safety.test.ts	New test suite validates Citrine palette meets CIE76 deltaE thresholds under protanopia, deuteranopia, and tritanopia vision simulations. First 5 colors must maintain min deltaE >= 20 under each model; all 10 colors must maintain min deltaE >= 9. Includes HSL/RGB/Lab color transformation and LMS-based vision-simulation helpers.
Palette & Theme Test Updates component/src/charts/__tests__/theme.test.ts, component/src/charts/__tests__/palettes.test.ts, component/src/components/composed/__tests__/chart-options-schema.test.ts	Theme tests import and validate CITRINE_LIGHT/CITRINE_DARK instead of Deep Ocean. Palette tests assert citrine exists and is marked as default, while no other palette is marked default. Legacy deep-ocean tests verify color aliasing to citrine. Chart options schema test expects "citrine" in available palettes.
Chart Behavior & Theme Defaults Tests component/src/charts/__tests__/base-chart.test.tsx, component/src/charts/__tests__/line-chart.test.tsx, component/src/charts/__tests__/theme-defaults.test.ts, app/e2e/design-system.spec.ts	Base-chart tests expect new Citrine HSL values for defaults and fallback colors. LineChart tests validate smooth/area defaults and verify smooth={false} disables both; line width default changed to 1.5. New theme-defaults test validates formatAxisCompact formatting behavior and confirms registerNeoboardThemes applies correct styling to bars/lines/pies/tooltips. E2E design-system test updated to validate Citrine CSS token values and Graphite background hue.

Sequence Diagram(s)

Skipped: Changes are not primarily a new feature or multi-component flow; they are palette/defaults refactoring with straightforward wiring and validation.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related issues

• #821: Directly implements acceptance criteria to replace Deep Ocean with curated Citrine palette, validate colorblind safety, and provide backward compatibility through aliasing.

Possibly related PRs

• alfredo1996/neoboard#232: Modifies LineChart defaults and behavior including smooth/area/sampling in similar file paths.
• alfredo1996/neoboard#97: Prior chart design-system changes that this PR builds upon and supersedes.
• alfredo1996/neoboard#612: Updates chart color/palette resolution and series styling in line-chart.tsx.

Suggested labels

refactor

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/issue-821-822-citrine-charts

---

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.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud