diff --git a/src/design-system/README.md b/src/design-system/README.md index 83da483..6b41411 100644 --- a/src/design-system/README.md +++ b/src/design-system/README.md @@ -398,17 +398,6 @@ import { Tabs } from '@/design-system/navigation/tabs/tabs'; ### 颜色 ```tsx -import { colors } from '@/design-system/tokens/colors'; - -// 主色 -colors.primary.500 // #35786f - -// 语义色 -colors.success.500 // #22c55e -colors.warning.500 // #f59e0b -colors.error.500 // #ef4444 -colors.info.500 // #3b82f6 -``` 在组件中使用: diff --git a/src/design-system/tokens/borders.ts b/src/design-system/tokens/borders.ts deleted file mode 100644 index 40a5b69..0000000 --- a/src/design-system/tokens/borders.ts +++ /dev/null @@ -1,74 +0,0 @@ -/** - * 边框和圆角系统设计令牌 - */ - -/** - * 圆角半径 - */ -export const borderRadius = { - none: '0', - sm: '0.125rem', // 2px - DEFAULT: '0.25rem', // 4px - md: '0.375rem', // 6px - lg: '0.5rem', // 8px - xl: '0.75rem', // 12px - '2xl': '1rem', // 16px - '3xl': '1.5rem', // 24px - full: '9999px', -} as const; - -/** - * 语义化圆角 - */ -export const semanticBorderRadius = { - // 按钮 - button: { - sm: borderRadius.lg, - md: borderRadius.xl, - lg: borderRadius['2xl'], - }, - - // 输入框 - input: { - sm: borderRadius.md, - md: borderRadius.lg, - lg: borderRadius.xl, - }, - - // 卡片 - card: { - sm: borderRadius.xl, - md: borderRadius['2xl'], - lg: borderRadius['3xl'], - }, - - // 模态框 - modal: borderRadius['2xl'], - - // 徽章/标签 - badge: borderRadius.full, - - // 圆形按钮/图标 - circle: borderRadius.full, -} as const; - -/** - * 边框宽度 - */ -export const borderWidth = { - DEFAULT: '1px', - 0: '0', - 2: '2px', - 4: '4px', - 8: '8px', -} as const; - -/** - * 边框样式 - */ -export const borderStyle = { - solid: 'solid', - dashed: 'dashed', - dotted: 'dotted', - double: 'double', -} as const; diff --git a/src/design-system/tokens/colors.ts b/src/design-system/tokens/colors.ts deleted file mode 100644 index be4f95b..0000000 --- a/src/design-system/tokens/colors.ts +++ /dev/null @@ -1,162 +0,0 @@ -/** - * 颜色系统设计令牌 - * - * 基于 8 色阶系统(50-900),提供完整的颜色语义化命名 - * - * 主色:Teal (#35786f) - * - 用于主要操作按钮、链接、重要元素 - * - * 语义色: - * - success: 成功状态 - * - warning: 警告状态 - * - error: 错误/危险状态 - * - info: 信息提示 - */ - -/** - * 主色 - Teal - */ -export const primary = { - 50: '#f0f9f8', - 100: '#e0f2f0', - 200: '#bce6e1', - 300: '#8dd4cc', - 400: '#5ec2b7', - 500: '#35786f', - 600: '#2a605b', - 700: '#1f4844', - 800: '#183835', - 900: '#122826', - 950: '#0a1413', -} as const; - -/** - * 中性色 - Gray - */ -export const gray = { - 50: '#f9fafb', - 100: '#f3f4f6', - 200: '#e5e7eb', - 300: '#d1d5db', - 400: '#9ca3af', - 500: '#6b7280', - 600: '#4b5563', - 700: '#374151', - 800: '#1f2937', - 900: '#111827', - 950: '#030712', -} as const; - -/** - * 语义色 - Success - */ -export const success = { - 50: '#f0fdf4', - 100: '#dcfce7', - 200: '#bbf7d0', - 300: '#86efac', - 400: '#4ade80', - 500: '#22c55e', - 600: '#16a34a', - 700: '#15803d', - 800: '#166534', - 900: '#14532d', - 950: '#052e16', -} as const; - -/** - * 语义色 - Warning - */ -export const warning = { - 50: '#fffbeb', - 100: '#fef3c7', - 200: '#fde68a', - 300: '#fcd34d', - 400: '#fbbf24', - 500: '#f59e0b', - 600: '#d97706', - 700: '#b45309', - 800: '#92400e', - 900: '#78350f', - 950: '#451a03', -} as const; - -/** - * 语义色 - Error - */ -export const error = { - 50: '#fef2f2', - 100: '#fee2e2', - 200: '#fecaca', - 300: '#fca5a5', - 400: '#f87171', - 500: '#ef4444', - 600: '#dc2626', - 700: '#b91c1c', - 800: '#991b1b', - 900: '#7f1d1d', - 950: '#450a0a', -} as const; - -/** - * 语义色 - Info - */ -export const info = { - 50: '#eff6ff', - 100: '#dbeafe', - 200: '#bfdbfe', - 300: '#93c5fd', - 400: '#60a5fa', - 500: '#3b82f6', - 600: '#2563eb', - 700: '#1d4ed8', - 800: '#1e40af', - 900: '#1e3a8a', - 950: '#172554', -} as const; - -/** - * 完整的颜色令牌集合 - */ -export const colors = { - primary, - gray, - success, - warning, - error, - info, - - // 语义别名 - semantic: { - success: success, - warning: warning, - error: error, - info: info, - }, - - // 通用别名 - white: '#ffffff', - black: '#000000', - transparent: 'transparent', - - // 前景色 - foreground: gray[900], - 'foreground-secondary': gray[600], - 'foreground-tertiary': gray[500], - 'foreground-disabled': gray[400], - - // 背景色 - background: gray[50], - 'background-secondary': gray[100], - 'background-tertiary': gray[200], - - // 边框色 - border: gray[300], - 'border-secondary': gray[200], - 'border-focus': primary[500], - - // 阴影 - shadow: 'rgba(0, 0, 0, 0.1)', -} as const; - -export type Colors = typeof colors; diff --git a/src/design-system/tokens/shadows.ts b/src/design-system/tokens/shadows.ts deleted file mode 100644 index ed24f7b..0000000 --- a/src/design-system/tokens/shadows.ts +++ /dev/null @@ -1,61 +0,0 @@ -/** - * 阴影系统设计令牌 - * - * 提供多层次的阴影效果,用于创建深度和层次感 - */ - -/** - * 阴影级别 - */ -export const boxShadow = { - sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', - DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)', - md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)', - lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)', - xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)', - '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', - inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)', - none: 'none', -} as const; - -/** - * 语义化阴影 - */ -export const semanticShadow = { - // 按钮 - button: { - sm: boxShadow.sm, - md: boxShadow.DEFAULT, - lg: boxShadow.md, - }, - - // 卡片 - card: { - default: boxShadow.xl, - bordered: 'none', - elevated: boxShadow['2xl'], - }, - - // 模态框/弹窗 - modal: boxShadow['2xl'], - dropdown: boxShadow.lg, - popover: boxShadow.lg, - tooltip: boxShadow.md, - - // 导航栏 - navbar: boxShadow.sm, - - // 输入框 focus - focus: `0 0 0 3px rgba(53, 120, 111, 0.1)`, // primary-500 的 10% 透明度 -} as const; - -/** - * 颜色阴影(用于特定元素的阴影) - */ -export const coloredShadow = { - primary: `0 4px 14px 0 rgba(53, 120, 111, 0.39)`, - success: `0 4px 14px 0 rgba(34, 197, 94, 0.39)`, - warning: `0 4px 14px 0 rgba(245, 158, 11, 0.39)`, - error: `0 4px 14px 0 rgba(239, 68, 68, 0.39)`, - info: `0 4px 14px 0 rgba(59, 130, 246, 0.39)`, -} as const; diff --git a/src/design-system/tokens/spacing.ts b/src/design-system/tokens/spacing.ts deleted file mode 100644 index 43a81c1..0000000 --- a/src/design-system/tokens/spacing.ts +++ /dev/null @@ -1,117 +0,0 @@ -/** - * 间距系统设计令牌 - * - * 基于 8pt 基准网格系统,提供一致的间距和尺寸 - * 单位:rem (1rem = 16px) - */ - -/** - * 基础间距刻度 - */ -export const spacing = { - 0: '0', - 0.5: '0.125rem', // 2px - 1: '0.25rem', // 4px - 1.5: '0.375rem', // 6px - 2: '0.5rem', // 8px - 2.5: '0.625rem', // 10px - 3: '0.75rem', // 12px - 3.5: '0.875rem', // 14px - 4: '1rem', // 16px - 5: '1.25rem', // 20px - 6: '1.5rem', // 24px - 7: '1.75rem', // 28px - 8: '2rem', // 32px - 9: '2.25rem', // 36px - 10: '2.5rem', // 40px - 11: '2.75rem', // 44px - 12: '3rem', // 48px - 14: '3.5rem', // 56px - 16: '4rem', // 64px - 20: '5rem', // 80px - 24: '6rem', // 96px - 28: '7rem', // 112px - 32: '8rem', // 128px - 36: '9rem', // 144px - 40: '10rem', // 160px - 44: '11rem', // 176px - 48: '12rem', // 192px - 52: '13rem', // 208px - 56: '14rem', // 224px - 60: '15rem', // 240px - 64: '16rem', // 256px - 72: '18rem', // 288px - 80: '20rem', // 320px - 96: '24rem', // 384px -} as const; - -/** - * 语义化间距 - */ -export const semanticSpacing = { - // 组件内边距 - padding: { - xs: spacing[1], // 4px - sm: spacing[2], // 8px - md: spacing[4], // 16px - lg: spacing[6], // 24px - xl: spacing[8], // 32px - '2xl': spacing[12], // 48px - }, - - // 组件间距(gap) - gap: { - xs: spacing[1], // 4px - sm: spacing[2], // 8px - md: spacing[4], // 16px - lg: spacing[6], // 24px - xl: spacing[8], // 32px - }, - - // 布局间距 - layout: { - sm: spacing[4], // 16px - md: spacing[8], // 32px - lg: spacing[12], // 48px - xl: spacing[16], // 64px - }, - - // 容器宽度 - container: { - sm: '640px', - md: '768px', - lg: '1024px', - xl: '1280px', - '2xl': '1536px', - }, -} as const; - -/** - * 常用尺寸(用于组件大小) - */ -export const sizes = { - // 图标尺寸 - icon: { - xs: '0.75rem', // 12px - sm: '1rem', // 16px - md: '1.25rem', // 20px - lg: '1.5rem', // 24px - xl: '2rem', // 32px - }, - - // 按钮高度 - button: { - sm: '2rem', // 32px - md: '2.5rem', // 40px - lg: '3rem', // 48px - }, - - // 输入框高度 - input: { - sm: '2rem', // 32px - md: '2.5rem', // 40px - lg: '3rem', // 48px - }, -} as const; - -export { spacing as default }; diff --git a/src/design-system/tokens/typography.ts b/src/design-system/tokens/typography.ts deleted file mode 100644 index b1254b5..0000000 --- a/src/design-system/tokens/typography.ts +++ /dev/null @@ -1,145 +0,0 @@ -/** - * 字体系统设计令牌 - * - * 定义字体家族、字号、行高和字重 - */ - -/** - * 字体家族 - */ -export const fontFamily = { - sans: [ - 'var(--font-geist-sans)', - '-apple-system', - 'BlinkMacSystemFont', - 'system-ui', - 'sans-serif', - ], - mono: [ - 'var(--font-geist-mono)', - 'ui-monospace', - 'SFMono-Regular', - 'Monaco', - 'Consolas', - 'monospace', - ], -} as const; - -/** - * 字体大小和行高 - */ -export const fontSize = { - xs: ['0.75rem', { lineHeight: '1rem' }], // 12px / 16px - sm: ['0.875rem', { lineHeight: '1.25rem' }], // 14px / 20px - base: ['1rem', { lineHeight: '1.5rem' }], // 16px / 24px - lg: ['1.125rem', { lineHeight: '1.75rem' }], // 18px / 28px - xl: ['1.25rem', { lineHeight: '1.75rem' }], // 20px / 28px - '2xl': ['1.5rem', { lineHeight: '2rem' }], // 24px / 32px - '3xl': ['1.875rem', { lineHeight: '2.25rem' }], // 30px / 36px - '4xl': ['2.25rem', { lineHeight: '2.5rem' }], // 36px / 40px - '5xl': ['3rem', { lineHeight: '1' }], // 48px / 48px - '6xl': ['3.75rem', { lineHeight: '1' }], // 60px / 60px - '7xl': ['4.5rem', { lineHeight: '1' }], // 72px / 72px - '8xl': ['6rem', { lineHeight: '1' }], // 96px / 96px - '9xl': ['8rem', { lineHeight: '1' }], // 128px / 128px -} as const; - -/** - * 字重 - */ -export const fontWeight = { - thin: '100', - extralight: '200', - light: '300', - normal: '400', - medium: '500', - semibold: '600', - bold: '700', - extrabold: '800', - black: '900', -} as const; - -/** - * 字母间距 - */ -export const letterSpacing = { - tighter: '-0.05em', - tight: '-0.025em', - normal: '0em', - wide: '0.025em', - wider: '0.05em', - widest: '0.1em', -} as const; - -/** - * 语义化排版 - */ -export const typography = { - // 标题 - h1: { - fontSize: fontSize['3xl'][0], - fontWeight: fontWeight.bold, - lineHeight: fontSize['3xl'][1].lineHeight, - }, - h2: { - fontSize: fontSize['2xl'][0], - fontWeight: fontWeight.semibold, - lineHeight: fontSize['2xl'][1].lineHeight, - }, - h3: { - fontSize: fontSize.xl[0], - fontWeight: fontWeight.semibold, - lineHeight: fontSize.xl[1].lineHeight, - }, - h4: { - fontSize: fontSize.lg[0], - fontWeight: fontWeight.semibold, - lineHeight: fontSize.lg[1].lineHeight, - }, - h5: { - fontSize: fontSize.base[0], - fontWeight: fontWeight.medium, - lineHeight: fontSize.base[1].lineHeight, - }, - h6: { - fontSize: fontSize.sm[0], - fontWeight: fontWeight.medium, - lineHeight: fontSize.sm[1].lineHeight, - }, - - // 正文 - body: { - fontSize: fontSize.base[0], - fontWeight: fontWeight.normal, - lineHeight: fontSize.base[1].lineHeight, - }, - 'body-sm': { - fontSize: fontSize.sm[0], - fontWeight: fontWeight.normal, - lineHeight: fontSize.sm[1].lineHeight, - }, - 'body-lg': { - fontSize: fontSize.lg[0], - fontWeight: fontWeight.normal, - lineHeight: fontSize.lg[1].lineHeight, - }, - - // 标签/说明 - label: { - fontSize: fontSize.sm[0], - fontWeight: fontWeight.medium, - lineHeight: fontSize.sm[1].lineHeight, - }, - caption: { - fontSize: fontSize.xs[0], - fontWeight: fontWeight.normal, - lineHeight: fontSize.xs[1].lineHeight, - }, - - // 代码 - code: { - fontSize: fontSize.sm[0], - fontWeight: fontWeight.normal, - fontFamily: fontFamily.mono.join(', '), - }, -} as const;