8c0dd30685
TASK-DS-001: Migrated packages/design-system/ from legacy Kōdō to SUMI v2.0 - New src/ structure with proper TypeScript exports - Component type registry documenting all 40+ UI components - cn() utility re-export - package.json with exports map for tokens subpaths TASK-DS-002: Extracted design tokens as TypeScript objects - tokens/colors.ts: backgrounds, surfaces, text, pigments, semantic, glass, shadows, light theme - tokens/typography.ts: font families, sizes, weights, line heights, letter spacings - tokens/spacing.ts: spacing scale, radius, z-index, layout - tokens/motion.ts: durations and easing functions TASK-DS-003: Added missing Storybook stories - EmptyState.stories.tsx (8 variants: default, icon, action, search, sizes, card, centered) - ButtonLoading.stories.tsx (6 variants: default, loading, text, destructive, outline, small) - ContentFadeIn.stories.tsx (2 variants: default, card) - DesignTokens.stories.tsx (visual token reference: pigments, backgrounds, text, typography, spacing, radius) - Total: 42 → 46 stories for UI components + design token showcase Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
87 lines
2.6 KiB
Markdown
87 lines
2.6 KiB
Markdown
# @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)
|
|
|
|
```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`:
|
|
|
|
```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:
|
|
|
|
```typescript
|
|
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/`
|