183 lines
4.4 KiB
TypeScript
183 lines
4.4 KiB
TypeScript
/**
|
|
* 浅色模式颜色主题配置
|
|
* 仅包含颜色相关的样式类名
|
|
*/
|
|
|
|
export const themeColors = {
|
|
// 卡片颜色
|
|
card: {
|
|
border: 'border-slate-200',
|
|
bg: 'bg-white',
|
|
shadow: 'shadow-none',
|
|
shadowHover: 'hover:border-slate-300',
|
|
shadowLarge: 'shadow-none',
|
|
shadowLargeHover: 'hover:border-slate-300',
|
|
shadowRainbow: 'shadow-none',
|
|
shadowRainbowHover: 'hover:border-slate-300',
|
|
shadowGlass: 'shadow-none',
|
|
shadowGlassHover: 'hover:border-slate-300',
|
|
shadowNeon: 'shadow-none',
|
|
shadowNeonHover: 'hover:border-slate-300',
|
|
borderNeon: 'border-slate-200',
|
|
bgRainbow: 'bg-white',
|
|
bgGlass: 'bg-white',
|
|
borderGlass: 'border-slate-200',
|
|
},
|
|
|
|
// 按钮颜色
|
|
button: {
|
|
primary: {
|
|
bg: 'bg-indigo-600',
|
|
hover: 'hover:bg-indigo-700',
|
|
shadow: 'shadow-none',
|
|
shadowHover: '',
|
|
},
|
|
secondary: {
|
|
border: 'border-slate-300',
|
|
bg: 'bg-white',
|
|
text: 'text-slate-900', // 使用更深的文字颜色，确保在浅色模式下清晰可见
|
|
hover: 'hover:bg-slate-50',
|
|
},
|
|
ghost: {
|
|
text: 'text-slate-700',
|
|
hover: 'hover:bg-slate-100',
|
|
},
|
|
danger: {
|
|
bg: 'bg-red-500', // 使用适中的红色，确保可见性
|
|
hover: 'hover:bg-red-600',
|
|
shadow: 'shadow-none',
|
|
shadowHover: '',
|
|
},
|
|
success: {
|
|
bg: 'bg-emerald-600',
|
|
hover: 'hover:bg-emerald-700',
|
|
shadow: 'shadow-none',
|
|
shadowHover: '',
|
|
},
|
|
glass: {
|
|
bg: 'bg-white',
|
|
hover: 'hover:bg-slate-50',
|
|
border: 'border-slate-300',
|
|
},
|
|
},
|
|
|
|
// 输入框颜色
|
|
input: {
|
|
border: 'border-slate-300',
|
|
bg: 'bg-white',
|
|
text: 'text-slate-900',
|
|
placeholder: 'placeholder:text-slate-400',
|
|
focusRing: 'focus:ring-indigo-200',
|
|
errorBorder: 'border-red-500',
|
|
errorBg: 'bg-white',
|
|
errorText: 'text-slate-900',
|
|
errorPlaceholder: 'placeholder:text-slate-400',
|
|
errorFocusRing: 'focus:ring-red-200',
|
|
},
|
|
|
|
// 导航项颜色
|
|
navItem: {
|
|
border: 'border-slate-200',
|
|
bg: 'bg-white',
|
|
text: 'text-slate-700',
|
|
hoverBg: 'hover:bg-slate-50',
|
|
hoverShadow: 'hover:border-slate-300',
|
|
activeBg: 'bg-slate-100',
|
|
activeText: 'text-slate-900',
|
|
activeShadow: 'border-slate-900',
|
|
rainbowBg: 'bg-white',
|
|
rainbowShadow: 'hover:border-slate-300',
|
|
tabText: 'text-slate-600',
|
|
tabTextHover: 'hover:text-slate-900',
|
|
tabTextActive: 'text-slate-900',
|
|
},
|
|
|
|
// 徽章颜色
|
|
badge: {
|
|
primary: {
|
|
bg: 'bg-indigo-100',
|
|
text: 'text-indigo-700',
|
|
},
|
|
success: {
|
|
bg: 'bg-green-100',
|
|
text: 'text-green-700',
|
|
},
|
|
warning: {
|
|
bg: 'bg-yellow-100',
|
|
text: 'text-yellow-700',
|
|
},
|
|
danger: {
|
|
bg: 'bg-red-100',
|
|
text: 'text-red-700',
|
|
},
|
|
},
|
|
|
|
// 后台强调色（普通信息默认用中性色，状态再使用语义色）
|
|
accent: {
|
|
pink: {
|
|
bg: 'bg-slate-50',
|
|
text: 'text-slate-700',
|
|
border: 'border-slate-200',
|
|
hover: 'hover:bg-slate-100',
|
|
},
|
|
purple: {
|
|
bg: 'bg-slate-50',
|
|
text: 'text-slate-700',
|
|
border: 'border-slate-200',
|
|
hover: 'hover:bg-slate-100',
|
|
},
|
|
blue: {
|
|
bg: 'bg-slate-50',
|
|
text: 'text-slate-700',
|
|
border: 'border-slate-200',
|
|
hover: 'hover:bg-slate-100',
|
|
},
|
|
cyan: {
|
|
bg: 'bg-slate-50',
|
|
text: 'text-slate-700',
|
|
border: 'border-slate-200',
|
|
hover: 'hover:bg-slate-100',
|
|
},
|
|
emerald: {
|
|
bg: 'bg-emerald-50',
|
|
text: 'text-emerald-700',
|
|
border: 'border-emerald-200',
|
|
hover: 'hover:bg-emerald-100',
|
|
},
|
|
orange: {
|
|
bg: 'bg-amber-50',
|
|
text: 'text-amber-800',
|
|
border: 'border-amber-200',
|
|
hover: 'hover:bg-amber-100',
|
|
},
|
|
rainbow: {
|
|
bg: 'bg-slate-50',
|
|
text: 'text-slate-700',
|
|
border: 'border-slate-200',
|
|
hover: 'hover:bg-slate-100',
|
|
},
|
|
},
|
|
|
|
// Modal 颜色
|
|
modal: {
|
|
overlay: 'bg-slate-900/45',
|
|
bg: 'bg-white',
|
|
border: 'border-slate-200',
|
|
shadow: 'shadow-lg shadow-slate-900/10',
|
|
headerBorder: 'border-slate-200',
|
|
title: 'text-slate-900',
|
|
body: 'text-slate-600',
|
|
footerBorder: 'border-slate-200',
|
|
closeButton: 'text-slate-500 hover:text-slate-700 hover:bg-slate-100',
|
|
},
|
|
|
|
// 开关切换器颜色
|
|
toggle: {
|
|
trackBg: 'bg-slate-200',
|
|
trackChecked: 'peer-checked:bg-indigo-600',
|
|
thumbBg: 'after:bg-white',
|
|
thumbBorder: 'after:border-slate-300',
|
|
},
|
|
} as const
|
|
|