cfbc110be6
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>
|
||
|---|---|---|
| .. | ||
| src | ||
| tokens | ||
| package.json | ||
| README.md | ||
| style-dictionary.config.mjs | ||
| tsconfig.json | ||
@veza/design-system
SUMI Design System v2.0 — "L'encre et la lumière" (Ink and Light)
The centralized design system for the Veza platform. Provides design tokens, component type registry, and utilities.
Structure
packages/design-system/
├── src/
│ ├── index.ts # Barrel exports
│ ├── utils.ts # cn() utility
│ ├── tokens/
│ │ ├── index.ts # All token exports
│ │ ├── colors.ts # Background, surface, text, pigment, semantic colors
│ │ ├── typography.ts # Font families, sizes, weights, line heights
│ │ ├── spacing.ts # Spacing scale, border radius, z-index, layout
│ │ └── motion.ts # Duration and easing tokens
│ └── components/
│ └── index.ts # Component type registry
└── package.json
Usage
Design Tokens (TypeScript)
import { pigments, fontFamilies, spacing } from '@veza/design-system/tokens';
// Colors
pigments.accent.base // '#7c9dd6'
pigments.vermillion.base // '#d4634a'
// Typography
fontFamilies.heading // "'Space Grotesk', 'Inter', sans-serif"
// Spacing
spacing['4'] // '16px'
Design Tokens (CSS)
The CSS custom properties are the primary token interface, defined in apps/web/src/index.css:
color: var(--sumi-accent);
padding: var(--sumi-space-4);
font-family: var(--sumi-font-heading);
border-radius: var(--sumi-radius-md);
Components
Components are implemented in apps/web/src/components/ui/ and imported via path alias:
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Dialog } from '@/components/ui/dialog';
See apps/web/.storybook/ for Storybook documentation of all components.
Themes
- Dark (default) — Ink on void
- Light — Washi paper aesthetic (
[data-theme="light"]) - High Contrast — WCAG AA 4.5:1+ (
[data-contrast="high"]) - Compact Density — Reduced spacing (
[data-density="compact"])
Color System — The 4 Pigments
| Pigment | Hex | Usage |
|---|---|---|
| Accent (Indigo) | #7c9dd6 |
Primary actions, links, focus |
| Vermillion | #d4634a |
Errors, destructive, live |
| Sage | #7a9e6c |
Success, online |
| Gold | #c9a84c |
Warnings, achievements |
References
- Design tokens source:
apps/web/src/index.css - Token documentation:
apps/web/docs/DESIGN_TOKENS.md - Storybook:
apps/web/.storybook/ - Component source:
apps/web/src/components/ui/