T-B48W-design-language-dataviz-projection
State: 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.
Partly done. AC-1 through AC-3 shipped in
#1558 (merged 2026-08-30): the
--d-viz-* tokens exist, useVizPalette() reads them, graph-canvas derives
its palette from them, and pumice’s local dataVizPalette is gone. AC-4
remains open — no echarts theme is generated yet, so pumice’s
WeeklyHeatmap.vue and polish’s three dashboard charts still map colors by
hand instead of consuming a shared theme object.
| 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.
| Area | Note |
|---|---|
packages/ts/ui/app/assets/css/tokens.css | --d-viz-* derivation |
packages/ts/ui/docs/design-system.md | projection section |
apps/pumice/src-nuxt/app/utils/uiSemantics.ts | consume the projection |
packages/ts/graph-canvas/ | 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).
- AC-4: A reusable echarts theme is generated from the projection, and
the chart surfaces that still map
--d-viz-*/status tokens by hand (pumice’sWeeklyHeatmap, polish’sPolishSeverityDonut,PolishHealthGauge,PolishDashboardPane) consume it instead.
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/notes/N-R926-design-language-plan.mdPhase 4; SURVEY drift 8.