115 lines
2.5 KiB
JavaScript
115 lines
2.5 KiB
JavaScript
/**
|
|
* 主题配置文件
|
|
* 集中管理应用的颜色、阴影、间距等设计令牌
|
|
*/
|
|
|
|
export const designTokens = {
|
|
colors: {
|
|
primary: {
|
|
main: '#667eea',
|
|
gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|
light: '#8b9ff0',
|
|
dark: '#4f5db8',
|
|
},
|
|
success: {
|
|
main: '#10b981',
|
|
gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
|
|
light: '#34d399',
|
|
dark: '#047857',
|
|
},
|
|
warning: {
|
|
main: '#f59e0b',
|
|
gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
|
|
light: '#fbbf24',
|
|
dark: '#b45309',
|
|
},
|
|
error: {
|
|
main: '#ef4444',
|
|
gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
|
|
light: '#f87171',
|
|
dark: '#b91c1c',
|
|
},
|
|
text: {
|
|
primary: '#1e293b',
|
|
secondary: '#64748b',
|
|
tertiary: '#94a3b8',
|
|
inverse: '#ffffff',
|
|
},
|
|
background: {
|
|
primary: '#ffffff',
|
|
secondary: '#f8fafc',
|
|
tertiary: '#f1f5f9',
|
|
dark: '#1e293b',
|
|
},
|
|
border: {
|
|
light: '#e2e8f0',
|
|
medium: '#cbd5e1',
|
|
dark: '#94a3b8',
|
|
},
|
|
device: {
|
|
server: '#3b82f6',
|
|
switch: '#22c55e',
|
|
router: '#f59e0b',
|
|
storage: '#8b5cf6',
|
|
other: '#64748b',
|
|
},
|
|
status: {
|
|
normal: '#10b981',
|
|
running: '#10b981',
|
|
warning: '#f59e0b',
|
|
error: '#ef4444',
|
|
fault: '#ef4444',
|
|
offline: '#6b7280',
|
|
maintenance: '#3b82f6',
|
|
},
|
|
},
|
|
shadows: {
|
|
small: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
|
medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
|
|
large: '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)',
|
|
glow: '0 0 20px rgba(102, 126, 234, 0.3)',
|
|
},
|
|
borderRadius: {
|
|
small: '6px',
|
|
medium: '10px',
|
|
large: '16px',
|
|
xl: '24px',
|
|
round: '50%',
|
|
},
|
|
transitions: {
|
|
fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
normal: '300ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
slow: '500ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
},
|
|
spacing: {
|
|
xs: '4px',
|
|
sm: '8px',
|
|
md: '16px',
|
|
lg: '24px',
|
|
xl: '32px',
|
|
},
|
|
typography: {
|
|
xs: '12px',
|
|
sm: '13px',
|
|
base: '14px',
|
|
md: '16px',
|
|
lg: '18px',
|
|
xl: '20px',
|
|
'2xl': '24px',
|
|
'3xl': '32px',
|
|
'4xl': '40px',
|
|
},
|
|
zIndex: {
|
|
dropdown: 1000,
|
|
sticky: 1020,
|
|
fixed: 1030,
|
|
modalBackdrop: 1040,
|
|
modal: 1050,
|
|
popover: 1060,
|
|
tooltip: 1070,
|
|
},
|
|
};
|
|
|
|
export default designTokens;
|