remove folder tokens
This commit is contained in:
@@ -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
|
||||
```
|
||||
|
||||
在组件中使用：
|
||||
|
||||
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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 };
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user