chore(design-system)!: drop orphan src/ tokens (replaced by Style Dictionary)
BREAKING CHANGE: bumped to v3.0.0.
Deleted (entire orphan tree, 0 consumers across apps/web):
- src/tokens/{colors,typography,spacing,motion,index}.ts (replaced by
generated dist/tokens.{css,ts} from tokens/*.json)
- src/components/index.ts (unused component name registry)
- src/utils.ts (cn helper — apps/web has its own at @/lib/utils)
- src/index.ts (barrel)
This removes the third contradictory palette source (the v4.0 colors.ts
that had vermillion #b83a1e as accent — never documented anywhere).
Updated:
- package.json: removed main/types/exports for src/, kept only ./tokens.css
+ ./tokens-generated. Removed clsx/tailwind-merge/typescript deps (unused).
- README.md: rewritten to reflect token-only architecture, Option B palette
documented (UI cyan unique + data viz pigments), points to CHARTE_GRAPHIQUE
+ DECISIONS_IDENTITE for brand source of truth.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
senke
parent
cfbc110be6
commit
ab923def34
10 changed files with 80 additions and 623 deletions
|
|
@ -1,87 +1,106 @@
|
||||||
# @veza/design-system
|
# @veza/design-system
|
||||||
|
|
||||||
**SUMI Design System v2.0** — "L'encre et la lumière" (Ink and Light)
|
**SUMI Design System v3.0** — "Lavis d'encre" (Ink wash)
|
||||||
|
|
||||||
The centralized design system for the Veza platform. Provides design tokens, component type registry, and utilities.
|
Token-only package for the Veza platform. Single source of truth for all design tokens (colors, typography, spacing, motion, elevation), authored as W3C-spec JSON tokens and compiled via Style Dictionary to CSS variables and TypeScript exports.
|
||||||
|
|
||||||
## Structure
|
## Structure
|
||||||
|
|
||||||
```
|
```
|
||||||
packages/design-system/
|
packages/design-system/
|
||||||
├── src/
|
├── tokens/ # SOURCE OF TRUTH (edit these)
|
||||||
│ ├── index.ts # Barrel exports
|
│ ├── primitive/
|
||||||
│ ├── utils.ts # cn() utility
|
│ │ ├── color.json # ink, washi, void, mizu, kin, viz, functional, alpha
|
||||||
│ ├── tokens/
|
│ │ ├── typography.json # Space Grotesk + Inter + JetBrains Mono scales
|
||||||
│ │ ├── index.ts # All token exports
|
│ │ ├── spacing.json # 4px scale + radius + z-index
|
||||||
│ │ ├── colors.ts # Background, surface, text, pigment, semantic colors
|
│ │ ├── motion.json # goutte/trait/lavis/vague/maree + easings
|
||||||
│ │ ├── typography.ts # Font families, sizes, weights, line heights
|
│ │ └── elevation.json # shadows + blur + opacity
|
||||||
│ │ ├── spacing.ts # Spacing scale, border radius, z-index, layout
|
│ └── semantic/
|
||||||
│ │ └── motion.ts # Duration and easing tokens
|
│ ├── dark.json # default :root, [data-theme="dark"]
|
||||||
│ └── components/
|
│ └── light.json # [data-theme="light"] (washi paper)
|
||||||
│ └── index.ts # Component type registry
|
├── dist/ # GENERATED (do NOT edit, gitignored)
|
||||||
|
│ ├── tokens.css # Unified primitive + dark + light
|
||||||
|
│ ├── tokens-{primitive,dark,light}.css
|
||||||
|
│ └── tokens.{ts,d.ts} # TS exports of resolved hex values
|
||||||
|
├── style-dictionary.config.mjs # Build config
|
||||||
└── package.json
|
└── package.json
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### Design Tokens (TypeScript)
|
### CSS variables (recommended for UI)
|
||||||
|
|
||||||
```typescript
|
`apps/web/src/index.css` imports the unified file:
|
||||||
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
|
```css
|
||||||
color: var(--sumi-accent);
|
@import '@veza/design-system/tokens.css';
|
||||||
padding: var(--sumi-space-4);
|
|
||||||
font-family: var(--sumi-font-heading);
|
|
||||||
border-radius: var(--sumi-radius-md);
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Components
|
Then components reference vars via Tailwind arbitrary values or inline styles:
|
||||||
|
|
||||||
Components are implemented in `apps/web/src/components/ui/` and imported via path alias:
|
```tsx
|
||||||
|
<div style={{ color: 'var(--sumi-accent-default)' }}>...</div>
|
||||||
```typescript
|
<div className="bg-[var(--sumi-bg-card)] text-[var(--sumi-text-primary)]">...</div>
|
||||||
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.
|
### TypeScript imports (for canvas / runtime needs)
|
||||||
|
|
||||||
|
For contexts that can't resolve CSS vars (canvas drawing, programmatic gradients, byte interpolation):
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { ColorVizIndigo, SumiAccentDefault } from '@veza/design-system/tokens-generated';
|
||||||
|
|
||||||
|
ctx.fillStyle = ColorVizIndigo; // resolved hex string '#7c9dd6'
|
||||||
|
const accent = SumiAccentDefault; // '#0098b5'
|
||||||
|
```
|
||||||
|
|
||||||
|
## Build
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build:tokens --workspace=@veza/design-system
|
||||||
|
```
|
||||||
|
|
||||||
|
Triggered automatically via `turbo run build` (the apps/web build depends on this package).
|
||||||
|
|
||||||
|
## Color system — Option B palette
|
||||||
|
|
||||||
|
Per `CHARTE_GRAPHIQUE_TALAS.md` §4 (canonical brand source) + §4.5 (data viz):
|
||||||
|
|
||||||
|
### UI palette (everywhere except data viz)
|
||||||
|
|
||||||
|
The cyan **Mizu** (`#0098B5`) is the **sole** accent color. Functional colors (success/error/warning) are always diluted (max 60% opacity), never solid fills.
|
||||||
|
|
||||||
|
| Token | Role | Value |
|
||||||
|
|-------|------|-------|
|
||||||
|
| `--sumi-accent-default` | Primary actions, links, focus | Mizu cyan `#0098B5` |
|
||||||
|
| `--sumi-feedback-success` | Success states (subtle) | Diluted sage |
|
||||||
|
| `--sumi-feedback-error` | Error states (subtle) | Diluted brick |
|
||||||
|
| `--sumi-feedback-warning` | Warning states (subtle) | Diluted amber |
|
||||||
|
|
||||||
|
### Data viz palette (charts, waveforms, analytics ONLY)
|
||||||
|
|
||||||
|
For graphs and visualizations needing distinguishable colors, the 4 viz pigments + neutral are authorized:
|
||||||
|
|
||||||
|
| Pigment | Hex | Token |
|
||||||
|
|---------|-----|-------|
|
||||||
|
| Indigo | `#7c9dd6` | `--sumi-viz-indigo` |
|
||||||
|
| Vermillion | `#d4634a` | `--sumi-viz-vermillion` |
|
||||||
|
| Sage | `#7a9e6c` | `--sumi-viz-sage` |
|
||||||
|
| Gold | `#c9a84c` | `--sumi-viz-gold` |
|
||||||
|
| Neutral grey | `#a8a4a0` | `--sumi-viz-neutral` |
|
||||||
|
|
||||||
|
**These are NEVER allowed in standard UI** (buttons, links, accents). The cyan rule above stays absolute.
|
||||||
|
|
||||||
## Themes
|
## Themes
|
||||||
|
|
||||||
- **Dark** (default) — Ink on void
|
- **Dark** (default) — Ink on void
|
||||||
- **Light** — Washi paper aesthetic (`[data-theme="light"]`)
|
- **Light** — Washi paper aesthetic (`[data-theme="light"]`)
|
||||||
- **High Contrast** — WCAG AA 4.5:1+ (`[data-contrast="high"]`)
|
- **Circadian + patina + density + contrast** — Runtime modifiers handled by `apps/web/src/components/theme/ThemeProvider.tsx`
|
||||||
- **Compact Density** — Reduced spacing (`[data-density="compact"]`)
|
|
||||||
|
|
||||||
## Color System — The 4 Pigments
|
## See also
|
||||||
|
|
||||||
| Pigment | Hex | Usage |
|
- Brand source of truth: `~/Documents/TG__Talas_Group/05_EXPERIENCE_UTILISATEUR/CHARTE_GRAPHIQUE_TALAS.md`
|
||||||
|---------|-----|-------|
|
- Brand decisions: `~/Documents/TG__Talas_Group/05_EXPERIENCE_UTILISATEUR/DECISIONS_IDENTITE.md`
|
||||||
| **Accent** (Indigo) | `#7c9dd6` | Primary actions, links, focus |
|
- Veza UI/UX contract: `veza-docs/ORIGIN/ORIGIN_UI_UX_SYSTEM.md`
|
||||||
| **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/`
|
- Storybook: `apps/web/.storybook/`
|
||||||
- Component source: `apps/web/src/components/ui/`
|
- Component source: `apps/web/src/components/ui/`
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,9 @@
|
||||||
{
|
{
|
||||||
"name": "@veza/design-system",
|
"name": "@veza/design-system",
|
||||||
"version": "2.0.0",
|
"version": "3.0.0",
|
||||||
"description": "SUMI Design System — Design tokens, utilities, and component re-exports for the Veza platform",
|
"description": "SUMI Design System — Design tokens (single source of truth) for the Veza platform. Authored as W3C JSON tokens, compiled via Style Dictionary to CSS vars + TS exports.",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "./src/index.ts",
|
|
||||||
"types": "./src/index.ts",
|
|
||||||
"exports": {
|
"exports": {
|
||||||
".": "./src/index.ts",
|
|
||||||
"./tokens": "./src/tokens/index.ts",
|
|
||||||
"./tokens/colors": "./src/tokens/colors.ts",
|
|
||||||
"./tokens/typography": "./src/tokens/typography.ts",
|
|
||||||
"./tokens/spacing": "./src/tokens/spacing.ts",
|
|
||||||
"./tokens/motion": "./src/tokens/motion.ts",
|
|
||||||
"./tokens.css": "./dist/tokens.css",
|
"./tokens.css": "./dist/tokens.css",
|
||||||
"./tokens-generated": {
|
"./tokens-generated": {
|
||||||
"types": "./dist/tokens.d.ts",
|
"types": "./dist/tokens.d.ts",
|
||||||
|
|
@ -19,27 +11,16 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"src/",
|
|
||||||
"tokens/",
|
"tokens/",
|
||||||
"dist/",
|
"dist/",
|
||||||
"style-dictionary.config.mjs"
|
"style-dictionary.config.mjs"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "node style-dictionary.config.mjs",
|
"build": "node style-dictionary.config.mjs",
|
||||||
"build:tokens": "node style-dictionary.config.mjs",
|
"build:tokens": "node style-dictionary.config.mjs"
|
||||||
"typecheck": "tsc --noEmit"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"clsx": "^2.0.0",
|
|
||||||
"tailwind-merge": "^3.0.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": ">=18",
|
|
||||||
"react-dom": ">=18"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"style-dictionary": "^4.4.0",
|
"style-dictionary": "^4.4.0"
|
||||||
"typescript": "^5.9.0"
|
|
||||||
},
|
},
|
||||||
"license": "UNLICENSED"
|
"license": "UNLICENSED"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,116 +0,0 @@
|
||||||
/**
|
|
||||||
* SUMI Design System v2.0 — Component Registry
|
|
||||||
*
|
|
||||||
* This file documents the canonical component set of the SUMI design system.
|
|
||||||
* Components are implemented in apps/web/src/components/ui/ and imported
|
|
||||||
* from there using the @/components/ui/ path alias.
|
|
||||||
*
|
|
||||||
* To use in the web app:
|
|
||||||
* import { Button } from '@/components/ui/button';
|
|
||||||
* import { Card } from '@/components/ui/card';
|
|
||||||
*
|
|
||||||
* This registry exists for documentation and type-checking purposes.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* SUMI Component Categories:
|
|
||||||
*
|
|
||||||
* ═══ PRIMITIVES ═══
|
|
||||||
* Button — Primary action element (variants: default, destructive, outline, secondary, ghost, link)
|
|
||||||
* Input — Text input field
|
|
||||||
* Textarea — Multi-line text input
|
|
||||||
* Label — Form field label
|
|
||||||
* Checkbox — Binary selection
|
|
||||||
* RadioGroup — Single selection from options
|
|
||||||
* Switch — Toggle control
|
|
||||||
* Slider — Range input
|
|
||||||
* Select — Dropdown selection
|
|
||||||
*
|
|
||||||
* ═══ LAYOUT ═══
|
|
||||||
* Card — Content container with border
|
|
||||||
* Accordion — Collapsible content sections
|
|
||||||
* Tabs — Tabbed content panels
|
|
||||||
* Sidebar — Navigation sidebar
|
|
||||||
* ScrollArea — Custom scrollable container
|
|
||||||
* Table — Data table
|
|
||||||
*
|
|
||||||
* ═══ FEEDBACK ═══
|
|
||||||
* Alert — Informational message
|
|
||||||
* Badge — Status indicator
|
|
||||||
* Dialog — Modal dialog
|
|
||||||
* Toast — Temporary notification
|
|
||||||
* Tooltip — Hover information
|
|
||||||
* HoverCard — Rich hover popup
|
|
||||||
* Skeleton — Loading placeholder
|
|
||||||
* Progress — Progress indicator
|
|
||||||
* LoadingSpinner — Animated spinner
|
|
||||||
*
|
|
||||||
* ═══ NAVIGATION ═══
|
|
||||||
* DropdownMenu — Contextual menu
|
|
||||||
* ContextMenu — Right-click menu
|
|
||||||
* NavigationProgress — Page transition indicator
|
|
||||||
*
|
|
||||||
* ═══ SPECIALIZED ═══
|
|
||||||
* FileUpload — File upload with drag & drop
|
|
||||||
* AvatarUpload — Avatar image upload with cropper
|
|
||||||
* DatePicker — Date selection
|
|
||||||
* VirtualizedList — Virtualized scrolling for large lists
|
|
||||||
* OptimizedImage — Responsive image with blur placeholder
|
|
||||||
* AnimatedNumber — Animated numeric display
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Component type exports for type-safety when referencing SUMI components
|
|
||||||
export type SumiComponentName =
|
|
||||||
// Primitives
|
|
||||||
| 'Button'
|
|
||||||
| 'Input'
|
|
||||||
| 'Textarea'
|
|
||||||
| 'Label'
|
|
||||||
| 'Checkbox'
|
|
||||||
| 'RadioGroup'
|
|
||||||
| 'Switch'
|
|
||||||
| 'Slider'
|
|
||||||
| 'Select'
|
|
||||||
| 'FloatingInput'
|
|
||||||
// Layout
|
|
||||||
| 'Card'
|
|
||||||
| 'Accordion'
|
|
||||||
| 'Tabs'
|
|
||||||
| 'Sidebar'
|
|
||||||
| 'ScrollArea'
|
|
||||||
| 'Table'
|
|
||||||
| 'Collapsible'
|
|
||||||
// Feedback
|
|
||||||
| 'Alert'
|
|
||||||
| 'Badge'
|
|
||||||
| 'Dialog'
|
|
||||||
| 'ConfirmationDialog'
|
|
||||||
| 'Toast'
|
|
||||||
| 'Tooltip'
|
|
||||||
| 'HoverCard'
|
|
||||||
| 'Skeleton'
|
|
||||||
| 'Progress'
|
|
||||||
| 'LoadingSpinner'
|
|
||||||
| 'LoadingState'
|
|
||||||
| 'ErrorBoundary'
|
|
||||||
| 'ErrorDisplay'
|
|
||||||
// Navigation
|
|
||||||
| 'DropdownMenu'
|
|
||||||
| 'ContextMenu'
|
|
||||||
| 'NavigationProgress'
|
|
||||||
| 'ScrollToTop'
|
|
||||||
// Specialized
|
|
||||||
| 'Avatar'
|
|
||||||
| 'AvatarUpload'
|
|
||||||
| 'FileUpload'
|
|
||||||
| 'DatePicker'
|
|
||||||
| 'ImageCropper'
|
|
||||||
| 'VirtualizedList'
|
|
||||||
| 'OptimizedImage'
|
|
||||||
| 'AnimatedNumber'
|
|
||||||
| 'DataList'
|
|
||||||
| 'FormField'
|
|
||||||
| 'FAB'
|
|
||||||
| 'FocusTrap'
|
|
||||||
| 'KeyboardShortcutsPanel'
|
|
||||||
| 'WaveformVisualizer';
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
/**
|
|
||||||
* @veza/design-system — SUMI Design System v2.0
|
|
||||||
* "L'encre et la lumière" — Ink and Light
|
|
||||||
*
|
|
||||||
* This package provides:
|
|
||||||
* - Design tokens (colors, typography, spacing, motion) as TypeScript objects
|
|
||||||
* - Component type registry for the SUMI component set
|
|
||||||
* - Utility functions (cn)
|
|
||||||
*
|
|
||||||
* Components are implemented in apps/web/src/components/ui/ and should be
|
|
||||||
* imported from there using the @/components/ui/ path alias.
|
|
||||||
*
|
|
||||||
* Usage:
|
|
||||||
* import { colors, typography } from '@veza/design-system/tokens';
|
|
||||||
* import { pigments } from '@veza/design-system/tokens/colors';
|
|
||||||
*/
|
|
||||||
|
|
||||||
// ═══ Design Tokens ═══
|
|
||||||
export {
|
|
||||||
colors,
|
|
||||||
backgrounds,
|
|
||||||
surfaces,
|
|
||||||
borders,
|
|
||||||
text,
|
|
||||||
pigments,
|
|
||||||
semantic,
|
|
||||||
glass,
|
|
||||||
shadows,
|
|
||||||
lightTheme,
|
|
||||||
typography,
|
|
||||||
fontFamilies,
|
|
||||||
fontSizes,
|
|
||||||
lineHeights,
|
|
||||||
letterSpacings,
|
|
||||||
fontWeights,
|
|
||||||
spacingTokens,
|
|
||||||
spacing,
|
|
||||||
radius,
|
|
||||||
zIndex,
|
|
||||||
layout,
|
|
||||||
motion,
|
|
||||||
durations,
|
|
||||||
easings,
|
|
||||||
} from './tokens';
|
|
||||||
|
|
||||||
export type { SumiColor } from './tokens';
|
|
||||||
|
|
||||||
// ═══ Component Registry ═══
|
|
||||||
export type { SumiComponentName } from './components';
|
|
||||||
|
|
||||||
// ═══ Utilities ═══
|
|
||||||
export { cn } from './utils';
|
|
||||||
|
|
@ -1,191 +0,0 @@
|
||||||
/**
|
|
||||||
* SUMI Design System v4.0 — Color Tokens
|
|
||||||
* "Lavis d'encre" — Ink Wash (墨の濃淡)
|
|
||||||
*
|
|
||||||
* Named after traditional Japanese ink tones:
|
|
||||||
* Kuro (黒), Sumi (墨), Usuzumi (薄墨), Hai (灰), Gin (銀), Kasumi (霞)
|
|
||||||
* Shiro (白), Kinari (生成), Kinu (絹), Torinoko (鳥の子), Cha (茶)
|
|
||||||
*
|
|
||||||
* Source of truth: apps/web/src/index.css
|
|
||||||
*/
|
|
||||||
|
|
||||||
// ═══ DARK THEME (default) — Ink on void (墨の闇) ═══
|
|
||||||
|
|
||||||
export const backgrounds = {
|
|
||||||
void: '#0d0d0b',
|
|
||||||
base: '#13110f',
|
|
||||||
raised: '#1a1714',
|
|
||||||
overlay: '#242018',
|
|
||||||
hover: '#2e2a22',
|
|
||||||
active: '#383228',
|
|
||||||
wash: '#17140f',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export const surfaces = {
|
|
||||||
inset: '#0f0d0b',
|
|
||||||
subtle: '#1e1a15',
|
|
||||||
card: '#1a1714',
|
|
||||||
elevated: '#242018',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export const borders = {
|
|
||||||
faint: 'rgba(232,224,208, 0.03)',
|
|
||||||
default: 'rgba(232,224,208, 0.06)',
|
|
||||||
strong: 'rgba(232,224,208, 0.10)',
|
|
||||||
focus: 'rgba(184,58,30, 0.50)',
|
|
||||||
accent: 'rgba(184,58,30, 0.25)',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export const text = {
|
|
||||||
primary: '#e8e0d0',
|
|
||||||
secondary: '#9e9688',
|
|
||||||
tertiary: '#6b6560',
|
|
||||||
disabled: '#3d3930',
|
|
||||||
inverse: '#13110f',
|
|
||||||
link: '#b83a1e',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
// ═══ PIGMENTS — Shu vermillion primary (朱) + Kin gold (金) ═══
|
|
||||||
|
|
||||||
export const pigments = {
|
|
||||||
accent: {
|
|
||||||
base: '#b83a1e',
|
|
||||||
hover: '#c84a2e',
|
|
||||||
active: '#8b2500',
|
|
||||||
muted: 'rgba(184,58,30, 0.18)',
|
|
||||||
subtle: 'rgba(184,58,30, 0.06)',
|
|
||||||
emphasis: '#8b2500',
|
|
||||||
},
|
|
||||||
vermillion: {
|
|
||||||
base: '#a04050',
|
|
||||||
hover: '#b05060',
|
|
||||||
subtle: 'rgba(160,64,80, 0.10)',
|
|
||||||
},
|
|
||||||
sage: {
|
|
||||||
base: '#4f6840',
|
|
||||||
hover: '#5f7850',
|
|
||||||
subtle: 'rgba(79,104,64, 0.10)',
|
|
||||||
},
|
|
||||||
gold: {
|
|
||||||
base: '#b8860b',
|
|
||||||
hover: '#c8960b',
|
|
||||||
subtle: 'rgba(184,134,11, 0.10)',
|
|
||||||
},
|
|
||||||
kin: {
|
|
||||||
base: '#b8860b',
|
|
||||||
glow: '0 0 8px rgba(184,134,11, 0.2)',
|
|
||||||
},
|
|
||||||
patinaGreen: {
|
|
||||||
base: '#5A8A72',
|
|
||||||
},
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
// ═══ SEMANTIC ═══
|
|
||||||
|
|
||||||
export const semantic = {
|
|
||||||
success: pigments.sage.base,
|
|
||||||
successSubtle: pigments.sage.subtle,
|
|
||||||
warning: pigments.gold.base,
|
|
||||||
warningSubtle: pigments.gold.subtle,
|
|
||||||
error: pigments.vermillion.base,
|
|
||||||
errorSubtle: pigments.vermillion.subtle,
|
|
||||||
info: pigments.accent.base,
|
|
||||||
live: '#a04050',
|
|
||||||
online: pigments.sage.base,
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
// ═══ GLASS — Shoji screen (障子) ═══
|
|
||||||
|
|
||||||
export const glass = {
|
|
||||||
bg: 'rgba(19,17,15, 0.80)',
|
|
||||||
border: 'rgba(232,224,208, 0.04)',
|
|
||||||
blur: '12px',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
// ═══ SHADOWS — Ink diffusion (滲み) ═══
|
|
||||||
|
|
||||||
export const shadows = {
|
|
||||||
xs: '0 1px 3px rgba(13,13,11,0.20)',
|
|
||||||
sm: '0 2px 8px rgba(13,13,11,0.15), 0 1px 3px rgba(13,13,11,0.12)',
|
|
||||||
md: '0 4px 20px rgba(13,13,11,0.15), 0 2px 6px rgba(13,13,11,0.10)',
|
|
||||||
lg: '0 8px 35px rgba(13,13,11,0.18), 0 4px 12px rgba(13,13,11,0.10)',
|
|
||||||
xl: '0 16px 55px rgba(13,13,11,0.22), 0 8px 20px rgba(13,13,11,0.12)',
|
|
||||||
'2xl': '0 24px 75px rgba(13,13,11,0.30)',
|
|
||||||
glow: '0 0 0 3px rgba(184,58,30, 0.20)',
|
|
||||||
glowLg: '0 0 20px rgba(184,58,30, 0.10)',
|
|
||||||
kin: '0 0 16px rgba(184,134,11, 0.15)',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
// ═══ LIGHT THEME — Washi paper (和紙) ═══
|
|
||||||
|
|
||||||
export const lightTheme = {
|
|
||||||
backgrounds: {
|
|
||||||
void: '#e8e0cf',
|
|
||||||
base: '#f0ebe0',
|
|
||||||
raised: '#f0ebe0',
|
|
||||||
overlay: '#f0ebe0',
|
|
||||||
hover: '#e4dccb',
|
|
||||||
active: '#ddd4c0',
|
|
||||||
wash: '#ece5d6',
|
|
||||||
},
|
|
||||||
surfaces: {
|
|
||||||
inset: '#e0d8c8',
|
|
||||||
subtle: '#e8e0cf',
|
|
||||||
card: '#f0ebe0',
|
|
||||||
elevated: '#f5f0e5',
|
|
||||||
},
|
|
||||||
borders: {
|
|
||||||
faint: 'rgba(26,23,20, 0.04)',
|
|
||||||
default: 'rgba(26,23,20, 0.06)',
|
|
||||||
strong: 'rgba(26,23,20, 0.12)',
|
|
||||||
focus: 'rgba(139,37,0, 0.45)',
|
|
||||||
accent: 'rgba(139,37,0, 0.20)',
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
primary: '#1a1714',
|
|
||||||
secondary: '#3d3930',
|
|
||||||
tertiary: '#6b6560',
|
|
||||||
disabled: '#c4bba8',
|
|
||||||
inverse: '#e8e0d0',
|
|
||||||
link: '#8b2500',
|
|
||||||
},
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
// ═══ INK TONES — 墨の六色 ═══
|
|
||||||
|
|
||||||
export const inkTones = {
|
|
||||||
kuro: '#0d0d0b',
|
|
||||||
sumi: '#1a1714',
|
|
||||||
usuzumi: '#3d3930',
|
|
||||||
hai: '#6b6560',
|
|
||||||
gin: '#9e9688',
|
|
||||||
kasumi: '#c4bba8',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
// ═══ WASHI TONES — 和紙の色 ═══
|
|
||||||
|
|
||||||
export const washiTones = {
|
|
||||||
shiro: '#f0ebe0',
|
|
||||||
kinari: '#e8e0cf',
|
|
||||||
kinu: '#ddd4c0',
|
|
||||||
torinoko: '#d0c5ad',
|
|
||||||
cha: '#c4b698',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
// ═══ ALL COLORS ═══
|
|
||||||
|
|
||||||
export const colors = {
|
|
||||||
backgrounds,
|
|
||||||
surfaces,
|
|
||||||
borders,
|
|
||||||
text,
|
|
||||||
pigments,
|
|
||||||
semantic,
|
|
||||||
glass,
|
|
||||||
shadows,
|
|
||||||
lightTheme,
|
|
||||||
inkTones,
|
|
||||||
washiTones,
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export type SumiColor = typeof colors;
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
/**
|
|
||||||
* SUMI Design System v2.0 — Design Tokens
|
|
||||||
*
|
|
||||||
* Centralized design tokens extracted from CSS custom properties.
|
|
||||||
* Use these for TypeScript-level access to the design system values.
|
|
||||||
*
|
|
||||||
* For CSS usage, prefer the CSS custom properties directly:
|
|
||||||
* var(--sumi-accent), var(--sumi-space-4), etc.
|
|
||||||
*
|
|
||||||
* For JS/TS usage (e.g., inline styles, canvas, SVG):
|
|
||||||
* import { colors, typography, spacing, motion } from '@veza/design-system/tokens';
|
|
||||||
*/
|
|
||||||
|
|
||||||
export { colors, backgrounds, surfaces, borders, text, pigments, semantic, glass, shadows, lightTheme } from './colors';
|
|
||||||
export type { SumiColor } from './colors';
|
|
||||||
|
|
||||||
export { typography, fontFamilies, fontSizes, lineHeights, letterSpacings, fontWeights } from './typography';
|
|
||||||
|
|
||||||
export { spacingTokens, spacing, radius, zIndex, layout } from './spacing';
|
|
||||||
|
|
||||||
export { motion, durations, easings } from './motion';
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
/**
|
|
||||||
* SUMI Design System v4.0 — Motion & Animation Tokens
|
|
||||||
*
|
|
||||||
* Source of truth: apps/web/src/index.css
|
|
||||||
*/
|
|
||||||
|
|
||||||
export const durations = {
|
|
||||||
instant: '75ms',
|
|
||||||
fast: '150ms',
|
|
||||||
normal: '200ms',
|
|
||||||
slow: '300ms',
|
|
||||||
slower: '500ms',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export const easings = {
|
|
||||||
default: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
|
|
||||||
out: 'cubic-bezier(0.33, 1, 0.68, 1)',
|
|
||||||
in: 'cubic-bezier(0.32, 0, 0.67, 0)',
|
|
||||||
inOut: 'cubic-bezier(0.65, 0, 0.35, 1)',
|
|
||||||
bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
|
|
||||||
spring: 'cubic-bezier(0.175, 0.885, 0.32, 1.1)',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export const motion = {
|
|
||||||
durations,
|
|
||||||
easings,
|
|
||||||
} as const;
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
/**
|
|
||||||
* SUMI Design System v4.0 — Spacing & Layout Tokens
|
|
||||||
*
|
|
||||||
* Source of truth: apps/web/src/index.css
|
|
||||||
*/
|
|
||||||
|
|
||||||
export const spacing = {
|
|
||||||
'0.5': '2px',
|
|
||||||
'1': '4px',
|
|
||||||
'1.5': '6px',
|
|
||||||
'2': '8px',
|
|
||||||
'2.5': '10px',
|
|
||||||
'3': '12px',
|
|
||||||
'4': '16px',
|
|
||||||
'5': '20px',
|
|
||||||
'6': '24px',
|
|
||||||
'8': '32px',
|
|
||||||
'10': '40px',
|
|
||||||
'12': '48px',
|
|
||||||
'16': '64px',
|
|
||||||
'20': '80px',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export const radius = {
|
|
||||||
xs: '2px',
|
|
||||||
sm: '4px',
|
|
||||||
md: '6px',
|
|
||||||
lg: '12px',
|
|
||||||
xl: '16px',
|
|
||||||
'2xl': '20px',
|
|
||||||
full: '9999px',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export const zIndex = {
|
|
||||||
base: 0,
|
|
||||||
raised: 10,
|
|
||||||
dropdown: 100,
|
|
||||||
sticky: 200,
|
|
||||||
overlay: 300,
|
|
||||||
modal: 400,
|
|
||||||
popover: 500,
|
|
||||||
toast: 600,
|
|
||||||
tooltip: 700,
|
|
||||||
max: 999,
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export const layout = {
|
|
||||||
maxWidth: '1400px',
|
|
||||||
maxWidthContent: '1200px',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export const spacingTokens = {
|
|
||||||
spacing,
|
|
||||||
radius,
|
|
||||||
zIndex,
|
|
||||||
layout,
|
|
||||||
} as const;
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
/**
|
|
||||||
* SUMI Design System v4.0 — Typography Tokens
|
|
||||||
* "Lavis d'encre" — Brush calligraphy meets clean sans
|
|
||||||
*
|
|
||||||
* Source of truth: apps/web/src/index.css
|
|
||||||
*/
|
|
||||||
|
|
||||||
export const fontFamilies = {
|
|
||||||
body: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
|
|
||||||
heading: "'Noto Serif JP', Georgia, serif",
|
|
||||||
mono: "'JetBrains Mono', 'SF Mono', 'Consolas', monospace",
|
|
||||||
serif: "'Noto Serif JP', Georgia, serif",
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export const fontSizes = {
|
|
||||||
'4xl': '2.25rem', // 36px
|
|
||||||
'3xl': '1.875rem', // 30px
|
|
||||||
'2xl': '1.5rem', // 24px
|
|
||||||
xl: '1.25rem', // 20px
|
|
||||||
lg: '1.125rem', // 18px
|
|
||||||
md: '1rem', // 16px
|
|
||||||
base: '0.875rem', // 14px
|
|
||||||
sm: '0.8125rem', // 13px
|
|
||||||
xs: '0.75rem', // 12px
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export const lineHeights = {
|
|
||||||
none: '1',
|
|
||||||
tight: '1.25',
|
|
||||||
snug: '1.375',
|
|
||||||
normal: '1.5',
|
|
||||||
relaxed: '1.625',
|
|
||||||
loose: '1.75',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export const letterSpacings = {
|
|
||||||
tighter: '-0.03em',
|
|
||||||
tight: '-0.015em',
|
|
||||||
normal: '0',
|
|
||||||
wide: '0.025em',
|
|
||||||
wider: '0.05em',
|
|
||||||
widest: '0.1em',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export const fontWeights = {
|
|
||||||
light: 300,
|
|
||||||
regular: 400,
|
|
||||||
medium: 500,
|
|
||||||
semibold: 600,
|
|
||||||
bold: 700,
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export const typography = {
|
|
||||||
fontFamilies,
|
|
||||||
fontSizes,
|
|
||||||
lineHeights,
|
|
||||||
letterSpacings,
|
|
||||||
fontWeights,
|
|
||||||
} as const;
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
/**
|
|
||||||
* SUMI Design System — Utility Functions
|
|
||||||
*
|
|
||||||
* Canonical implementation of cn() for merging Tailwind classes.
|
|
||||||
* Also available at apps/web/src/lib/utils.ts.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { type ClassValue, clsx } from 'clsx';
|
|
||||||
import { twMerge } from 'tailwind-merge';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Merge Tailwind CSS classes with deduplication.
|
|
||||||
* Combines clsx (conditional classes) + tailwind-merge (conflict resolution).
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* cn('px-4 py-2', isActive && 'bg-primary', className)
|
|
||||||
*/
|
|
||||||
export function cn(...inputs: ClassValue[]): string {
|
|
||||||
return twMerge(clsx(inputs));
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue