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
|
||||
|
||||
**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
|
||||
|
||||
```
|
||||
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
|
||||
├── tokens/ # SOURCE OF TRUTH (edit these)
|
||||
│ ├── primitive/
|
||||
│ │ ├── color.json # ink, washi, void, mizu, kin, viz, functional, alpha
|
||||
│ │ ├── typography.json # Space Grotesk + Inter + JetBrains Mono scales
|
||||
│ │ ├── spacing.json # 4px scale + radius + z-index
|
||||
│ │ ├── motion.json # goutte/trait/lavis/vague/maree + easings
|
||||
│ │ └── elevation.json # shadows + blur + opacity
|
||||
│ └── semantic/
|
||||
│ ├── dark.json # default :root, [data-theme="dark"]
|
||||
│ └── light.json # [data-theme="light"] (washi paper)
|
||||
├── 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
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Design Tokens (TypeScript)
|
||||
### CSS variables (recommended for UI)
|
||||
|
||||
```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`:
|
||||
`apps/web/src/index.css` imports the unified file:
|
||||
|
||||
```css
|
||||
color: var(--sumi-accent);
|
||||
padding: var(--sumi-space-4);
|
||||
font-family: var(--sumi-font-heading);
|
||||
border-radius: var(--sumi-radius-md);
|
||||
@import '@veza/design-system/tokens.css';
|
||||
```
|
||||
|
||||
### 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:
|
||||
|
||||
```typescript
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Dialog } from '@/components/ui/dialog';
|
||||
```tsx
|
||||
<div style={{ color: 'var(--sumi-accent-default)' }}>...</div>
|
||||
<div className="bg-[var(--sumi-bg-card)] text-[var(--sumi-text-primary)]">...</div>
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
- **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"]`)
|
||||
- **Circadian + patina + density + contrast** — Runtime modifiers handled by `apps/web/src/components/theme/ThemeProvider.tsx`
|
||||
|
||||
## Color System — The 4 Pigments
|
||||
## See also
|
||||
|
||||
| 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`
|
||||
- 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`
|
||||
- Veza UI/UX contract: `veza-docs/ORIGIN/ORIGIN_UI_UX_SYSTEM.md`
|
||||
- Storybook: `apps/web/.storybook/`
|
||||
- Component source: `apps/web/src/components/ui/`
|
||||
|
|
|
|||
|
|
@ -1,17 +1,9 @@
|
|||
{
|
||||
"name": "@veza/design-system",
|
||||
"version": "2.0.0",
|
||||
"description": "SUMI Design System — Design tokens, utilities, and component re-exports for the Veza platform",
|
||||
"version": "3.0.0",
|
||||
"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",
|
||||
"main": "./src/index.ts",
|
||||
"types": "./src/index.ts",
|
||||
"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-generated": {
|
||||
"types": "./dist/tokens.d.ts",
|
||||
|
|
@ -19,27 +11,16 @@
|
|||
}
|
||||
},
|
||||
"files": [
|
||||
"src/",
|
||||
"tokens/",
|
||||
"dist/",
|
||||
"style-dictionary.config.mjs"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "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"
|
||||
"build:tokens": "node style-dictionary.config.mjs"
|
||||
},
|
||||
"devDependencies": {
|
||||
"style-dictionary": "^4.4.0",
|
||||
"typescript": "^5.9.0"
|
||||
"style-dictionary": "^4.4.0"
|
||||
},
|
||||
"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