T-B48W-design-language-dataviz-projection
Status: open/ready · Impact: medium · Complexity: medium
Charts need theme-aware palettes. The ui package’s ad-hoc
dataVizPalette was deleted in Phase 1 (SURVEY drift 8) pending a real
projection; pumice still carries its own sibling. Generate a categorical
palette and a sequential ramp per theme, accent-anchored and derived from
the seeds, and make the chart surfaces consume them.
| Location | Role today |
|---|---|
packages/ts/ui/app/assets/css/tokens.css | No data-viz tokens; the accent seeds the derivation would anchor on. |
apps/pumice/src-nuxt/app/utils/uiSemantics.ts | Surviving local dataVizPalette. |
packages/ts/graph-canvas/ | Own hard-coded node/edge palettes. |
Proposed
Section titled “Proposed”Per active theme: an N-step categorical palette and a sequential ramp,
exposed as --d-viz-* tokens (or a composable that reads them), derived
from the theme’s accent + neutrals so registered themes get palettes for
free. pumice’s local palette and graph-canvas’s hard-coded colors consume
the projection; echarts theme objects can be generated from the same
source.
Approach
Section titled “Approach”- Design the derivation (hue rotation off the accent, seeded lightness ladder per mode); validate distinguishability in light and dark for all built-in themes.
- Implement in the ui layer (tokens or composable); document in
design-system.md. - Consume in pumice (replace the local palette) and graph-canvas.
- Screenshot pairs of a chart surface per theme.
Files to touch
Section titled “Files to touch”| Location | Kind | Change |
|---|---|---|
packages/ts/ui/app/assets/css/tokens.css | modify | --d-viz-* derivation |
packages/ts/ui/docs/design-system.md | modify | projection section |
apps/pumice/src-nuxt/app/utils/uiSemantics.ts | modify | consume the projection |
packages/ts/graph-canvas/ | modify | palettes from the projection |
Acceptance criteria
Section titled “Acceptance criteria”- AC-1: Switching theme (and mode) changes chart palettes without app-side code.
- AC-2: pumice’s local
dataVizPaletteis gone or a thin re-export. - AC-3: Categorical steps remain distinguishable in both modes for every built-in theme (screenshot evidence in the PR).
Out of scope
Section titled “Out of scope”- Per-chart semantic color mapping (status→color stays with dSemantics).
Dependencies
Section titled “Dependencies”- The built-in theme-set PR should merge first so derivation is validated against all shipped accents.
Discovery context
Section titled “Discovery context”docs/planning/design-language/PLAN.mdPhase 4; SURVEY drift 8.