From ab923def34e8e140bac9019805cf09d759d2b83e Mon Sep 17 00:00:00 2001 From: senke Date: Mon, 27 Apr 2026 05:10:24 +0200 Subject: [PATCH] chore(design-system)!: drop orphan src/ tokens (replaced by Style Dictionary) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- packages/design-system/README.md | 133 ++++++------ packages/design-system/package.json | 27 +-- .../design-system/src/components/index.ts | 116 ----------- packages/design-system/src/index.ts | 52 ----- packages/design-system/src/tokens/colors.ts | 191 ------------------ packages/design-system/src/tokens/index.ts | 21 -- packages/design-system/src/tokens/motion.ts | 27 --- packages/design-system/src/tokens/spacing.ts | 57 ------ .../design-system/src/tokens/typography.ts | 59 ------ packages/design-system/src/utils.ts | 20 -- 10 files changed, 80 insertions(+), 623 deletions(-) delete mode 100644 packages/design-system/src/components/index.ts delete mode 100644 packages/design-system/src/index.ts delete mode 100644 packages/design-system/src/tokens/colors.ts delete mode 100644 packages/design-system/src/tokens/index.ts delete mode 100644 packages/design-system/src/tokens/motion.ts delete mode 100644 packages/design-system/src/tokens/spacing.ts delete mode 100644 packages/design-system/src/tokens/typography.ts delete mode 100644 packages/design-system/src/utils.ts diff --git a/packages/design-system/README.md b/packages/design-system/README.md index c06befabe..a4f7eb77a 100644 --- a/packages/design-system/README.md +++ b/packages/design-system/README.md @@ -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 +
...
+
...
``` -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/` diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 74b2d5553..a526b34dd 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -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" } diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts deleted file mode 100644 index fc1346d3a..000000000 --- a/packages/design-system/src/components/index.ts +++ /dev/null @@ -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'; diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts deleted file mode 100644 index a18ecde30..000000000 --- a/packages/design-system/src/index.ts +++ /dev/null @@ -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'; diff --git a/packages/design-system/src/tokens/colors.ts b/packages/design-system/src/tokens/colors.ts deleted file mode 100644 index 5976b5076..000000000 --- a/packages/design-system/src/tokens/colors.ts +++ /dev/null @@ -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; diff --git a/packages/design-system/src/tokens/index.ts b/packages/design-system/src/tokens/index.ts deleted file mode 100644 index a66cb086e..000000000 --- a/packages/design-system/src/tokens/index.ts +++ /dev/null @@ -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'; diff --git a/packages/design-system/src/tokens/motion.ts b/packages/design-system/src/tokens/motion.ts deleted file mode 100644 index 26f992c34..000000000 --- a/packages/design-system/src/tokens/motion.ts +++ /dev/null @@ -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; diff --git a/packages/design-system/src/tokens/spacing.ts b/packages/design-system/src/tokens/spacing.ts deleted file mode 100644 index 789585de8..000000000 --- a/packages/design-system/src/tokens/spacing.ts +++ /dev/null @@ -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; diff --git a/packages/design-system/src/tokens/typography.ts b/packages/design-system/src/tokens/typography.ts deleted file mode 100644 index 8c814a5e3..000000000 --- a/packages/design-system/src/tokens/typography.ts +++ /dev/null @@ -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; diff --git a/packages/design-system/src/utils.ts b/packages/design-system/src/utils.ts deleted file mode 100644 index 96b19bd79..000000000 --- a/packages/design-system/src/utils.ts +++ /dev/null @@ -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)); -}