senke/veza

senke 8c0dd30685 feat(v0.13.2): consolidation design system — SUMI tokens, package, stories

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>

2026-03-13 09:45:09 +01:00

2.6 KiB

Raw Blame History

@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/

2.6 KiB Raw Blame History