119 lines
3.1 KiB
JavaScript
119 lines
3.1 KiB
JavaScript
// src/constants/professionalTheme.js
|
|
// 专业金融风格配色主题 - 黑色、灰色、金色
|
|
|
|
/**
|
|
* 专业配色方案
|
|
* 主色调：黑色系 + 灰色系 + 金色点缀
|
|
* 适用于金融、投资类产品
|
|
*/
|
|
export const PROFESSIONAL_COLORS = {
|
|
// 背景色
|
|
background: {
|
|
primary: '#0A0E17', // 深黑蓝
|
|
secondary: '#151922', // 深灰
|
|
card: '#1A1F2E', // 卡片背景
|
|
cardHover: '#212633', // 卡片悬浮
|
|
overlay: 'rgba(10, 14, 23, 0.95)', // 遮罩
|
|
},
|
|
|
|
// 文字颜色
|
|
text: {
|
|
primary: '#E8E9ED', // 主文字 - 浅灰白
|
|
secondary: '#A0A4B8', // 次要文字 - 中灰
|
|
tertiary: '#6B7280', // 三级文字 - 深灰
|
|
muted: '#4B5563', // 弱化文字
|
|
},
|
|
|
|
// 金色系 - 高端感
|
|
gold: {
|
|
50: '#FFF9E6',
|
|
100: '#FFF3CC',
|
|
200: '#FFE799',
|
|
300: '#FFDB66',
|
|
400: '#FFCF33',
|
|
500: '#FFC300', // 主金色
|
|
600: '#CC9C00',
|
|
700: '#997500',
|
|
800: '#664E00',
|
|
900: '#332700',
|
|
},
|
|
|
|
// 边框颜色
|
|
border: {
|
|
light: '#2D3748', // 浅边框
|
|
default: '#374151', // 默认边框
|
|
dark: '#1F2937', // 深边框
|
|
gold: '#FFC300', // 金色边框
|
|
},
|
|
|
|
// 状态颜色
|
|
status: {
|
|
success: '#10B981', // 成功/涨
|
|
error: '#EF4444', // 错误/跌
|
|
warning: '#F59E0B', // 警告
|
|
info: '#3B82F6', // 信息
|
|
},
|
|
|
|
// 渐变色
|
|
gradients: {
|
|
gold: 'linear-gradient(135deg, #FFC300 0%, #FFD54F 100%)',
|
|
darkGold: 'linear-gradient(135deg, #997500 0%, #FFC300 100%)',
|
|
blackGold: 'linear-gradient(135deg, #0A0E17 0%, #2D2416 50%, #0A0E17 100%)',
|
|
card: 'linear-gradient(135deg, #1A1F2E 0%, #212633 100%)',
|
|
},
|
|
|
|
// 重要性等级金色配色
|
|
importance: {
|
|
S: {
|
|
bg: 'rgba(255, 195, 0, 0.15)',
|
|
border: '#FFC300',
|
|
text: '#FFD54F',
|
|
badge: '#FFC300',
|
|
},
|
|
A: {
|
|
bg: 'rgba(249, 115, 22, 0.15)',
|
|
border: '#F97316',
|
|
text: '#FB923C',
|
|
badge: '#F97316',
|
|
},
|
|
B: {
|
|
bg: 'rgba(59, 130, 246, 0.15)',
|
|
border: '#3B82F6',
|
|
text: '#60A5FA',
|
|
badge: '#3B82F6',
|
|
},
|
|
C: {
|
|
bg: 'rgba(107, 114, 128, 0.15)',
|
|
border: '#6B7280',
|
|
text: '#9CA3AF',
|
|
badge: '#6B7280',
|
|
},
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 获取专业配色
|
|
* @param {string} category - 配色类别
|
|
* @param {string} shade - 色阶
|
|
*/
|
|
export const getProfessionalColor = (category, shade) => {
|
|
return PROFESSIONAL_COLORS[category]?.[shade] || '#E8E9ED';
|
|
};
|
|
|
|
/**
|
|
* Chakra UI 主题扩展
|
|
*/
|
|
export const professionalThemeExtension = {
|
|
colors: {
|
|
professional: PROFESSIONAL_COLORS,
|
|
},
|
|
styles: {
|
|
global: {
|
|
body: {
|
|
bg: PROFESSIONAL_COLORS.background.primary,
|
|
color: PROFESSIONAL_COLORS.text.primary,
|
|
},
|
|
},
|
|
},
|
|
};
|