Kill the drift in 9 components that hardcoded #7c9dd6/#d4634a/#7a9e6c/#c9a84c
(the 4 viz pigments) by referencing tokens generated from
packages/design-system/tokens/ (single source of truth).
apps/web/src/index.css now imports @veza/design-system/tokens.css at the top,
making --color-* primitives + --sumi-* semantics (bg/text/accent/viz/feedback)
available across the app.
Migrated:
- charts/{BarChart,LineChart,PieChart}.tsx — defaults use var(--sumi-viz-*)
- analytics/TrackAnalyticsView.tsx — JSX inline backgroundColor uses var()
- developer/SwaggerUI.tsx — CSS-in-JS uses var()
- ui/WaveformVisualizer.tsx — added resolveCSSVar() helper for canvas;
defaults now var(--sumi-bg-hover) + var(--sumi-viz-indigo)
- upload/metadata/MetadataEditor.tsx — passes var() to WaveformVisualizer
- player/AudioVisualizer.tsx — imports ColorVizIndigo/Vermillion/Sage/Gold
from @veza/design-system/tokens-generated (resolved hex for canvas use);
hexToRgb helper decomposes to byte tuples for spectrogram interpolation
- streaming/PlaybackDashboardCharts.tsx — passes var() to LineChart props
packages/design-system/package.json: added "./tokens-generated" export
pointing to dist/tokens.ts (TS exports of resolved hex values for canvas
contexts that need them).
Stats: 32 → 13 hardcoded hex literals (4 pigments) across apps/web/src.
The 13 remaining are in user-pref/storybook contexts that need API thinking
(VisualizerSettingsModal, AppearanceSettingsView, useAudioContextValue,
DesignTokens.stories.tsx) — tracked as Sprint 2 follow-up.
Build: vite build OK (13s). Typecheck OK.
SKIP_TESTS=1: pre-existing LazyDmca mock test failure (legal/dmca feature
in flight on main) unrelated to this commit.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
cfbc110be6