234 lines
9.4 KiB
TypeScript
234 lines
9.4 KiB
TypeScript
/**
|
|
* UI 样式组合器
|
|
* 将基础样式和颜色主题组合成完整的样式配置
|
|
*/
|
|
|
|
import * as baseStyles from './ui-styles-base'
|
|
import * as lightColors from './ui-theme-colors-light'
|
|
import * as darkColors from './ui-theme-colors-dark'
|
|
|
|
// 定义颜色主题的通用类型结构
|
|
type ColorTheme = {
|
|
card: {
|
|
border: string
|
|
bg: string
|
|
shadow: string
|
|
shadowHover: string
|
|
shadowLarge: string
|
|
shadowLargeHover: string
|
|
shadowRainbow: string
|
|
shadowRainbowHover: string
|
|
shadowGlass: string
|
|
shadowGlassHover: string
|
|
shadowNeon: string
|
|
shadowNeonHover: string
|
|
borderNeon: string
|
|
bgRainbow: string
|
|
bgGlass: string
|
|
borderGlass: string
|
|
}
|
|
button: {
|
|
primary: { bg: string; hover: string; shadow: string; shadowHover: string }
|
|
secondary: { border: string; bg: string; text: string; hover: string }
|
|
ghost: { text: string; hover: string }
|
|
danger: { bg: string; hover: string; shadow: string; shadowHover: string }
|
|
success: { bg: string; hover: string; shadow: string; shadowHover: string }
|
|
glass: { bg: string; hover: string; border: string }
|
|
}
|
|
input: {
|
|
border: string
|
|
bg: string
|
|
text: string
|
|
placeholder: string
|
|
focusRing: string
|
|
errorBorder: string
|
|
errorBg: string
|
|
errorText: string
|
|
errorPlaceholder: string
|
|
errorFocusRing: string
|
|
}
|
|
navItem: {
|
|
border: string
|
|
bg: string
|
|
text: string
|
|
hoverBg: string
|
|
hoverShadow: string
|
|
activeBg: string
|
|
activeText: string
|
|
activeShadow: string
|
|
rainbowBg: string
|
|
rainbowShadow: string
|
|
tabText: string
|
|
tabTextHover: string
|
|
tabTextActive: string
|
|
}
|
|
badge: {
|
|
primary: { bg: string; text: string }
|
|
success: { bg: string; text: string }
|
|
warning: { bg: string; text: string }
|
|
danger: { bg: string; text: string }
|
|
}
|
|
modal: {
|
|
overlay: string
|
|
bg: string
|
|
border: string
|
|
shadow: string
|
|
headerBorder: string
|
|
title: string
|
|
body: string
|
|
footerBorder: string
|
|
closeButton: string
|
|
}
|
|
toggle: {
|
|
trackBg: string
|
|
trackChecked: string
|
|
thumbBg: string
|
|
thumbBorder: string
|
|
}
|
|
accent: {
|
|
pink: { bg: string; text: string; border: string; hover: string }
|
|
purple: { bg: string; text: string; border: string; hover: string }
|
|
blue: { bg: string; text: string; border: string; hover: string }
|
|
cyan: { bg: string; text: string; border: string; hover: string }
|
|
emerald: { bg: string; text: string; border: string; hover: string }
|
|
orange: { bg: string; text: string; border: string; hover: string }
|
|
rainbow: { bg: string; text: string; border: string; hover: string }
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 组合卡片样式
|
|
*/
|
|
function composeCardStyles(colors: ColorTheme) {
|
|
return {
|
|
base: `${baseStyles.baseCardStyles.base} ${colors.card.border} ${colors.card.bg} ${colors.card.shadow}`,
|
|
hover: `${baseStyles.baseCardStyles.hover} ${colors.card.border} ${colors.card.bg} ${colors.card.shadow} ${colors.card.shadowHover}`,
|
|
large: `${baseStyles.baseCardStyles.large} ${colors.card.border} ${colors.card.bg} ${colors.card.shadowLarge} ${colors.card.shadowLargeHover}`,
|
|
flat: `${baseStyles.baseCardStyles.flat} ${colors.card.border} ${colors.card.bg}`,
|
|
rainbow: `${baseStyles.baseCardStyles.rainbow} ${colors.card.border} ${colors.card.bgRainbow} ${colors.card.shadowRainbow} ${colors.card.shadowRainbowHover}`,
|
|
glass: `${baseStyles.baseCardStyles.glass} ${colors.card.bgGlass} ${colors.card.borderGlass} ${colors.card.shadowGlass} ${colors.card.shadowGlassHover}`,
|
|
neon: `${baseStyles.baseCardStyles.neon} ${colors.card.borderNeon} ${colors.card.bg} ${colors.card.shadowNeon} ${colors.card.shadowNeonHover}`,
|
|
} as const
|
|
}
|
|
|
|
/**
|
|
* 组合按钮样式
|
|
*/
|
|
function composeButtonStyles(colors: ColorTheme) {
|
|
return {
|
|
primary: `${baseStyles.baseButtonStyles.primary} ${colors.button.primary.bg} ${colors.button.primary.hover} ${colors.button.primary.shadow} ${colors.button.primary.shadowHover}`,
|
|
secondary: `${baseStyles.baseButtonStyles.secondary} ${colors.button.secondary.border} ${colors.button.secondary.bg} ${colors.button.secondary.text} ${colors.button.secondary.hover} hover:border-slate-400 dark:hover:border-slate-500`,
|
|
ghost: `${baseStyles.baseButtonStyles.ghost} ${colors.button.ghost.text} ${colors.button.ghost.hover}`,
|
|
danger: `${baseStyles.baseButtonStyles.danger} ${colors.button.danger.bg} ${colors.button.danger.hover} ${colors.button.danger.shadow} ${colors.button.danger.shadowHover}`,
|
|
success: `${baseStyles.baseButtonStyles.success} ${colors.button.success.bg} ${colors.button.success.hover} ${colors.button.success.shadow} ${colors.button.success.shadowHover}`,
|
|
rainbow: baseStyles.baseButtonStyles.rainbow, // 渐变按钮颜色固定（标准尺寸）
|
|
rainbowCompact: baseStyles.baseButtonStyles.rainbowCompact, // 渐变按钮颜色固定（紧凑尺寸，用于角标）
|
|
neon: baseStyles.baseButtonStyles.neon, // 霓虹按钮颜色固定
|
|
glass: `${baseStyles.baseButtonStyles.glass} ${colors.button.glass.bg} ${colors.button.glass.hover} ${colors.button.glass.border}`,
|
|
} as const
|
|
}
|
|
|
|
/**
|
|
* 组合输入框样式
|
|
*/
|
|
function composeInputStyles(colors: ColorTheme) {
|
|
return {
|
|
base: `${baseStyles.baseInputStyles.base} ${colors.input.border} ${colors.input.bg} ${colors.input.text} ${colors.input.placeholder} ${colors.input.focusRing} focus:border-slate-500 dark:focus:border-slate-300`,
|
|
error: `${baseStyles.baseInputStyles.error} ${colors.input.errorBorder} ${colors.input.errorBg} ${colors.input.errorText} ${colors.input.errorPlaceholder} ${colors.input.errorFocusRing}`,
|
|
} as const
|
|
}
|
|
|
|
/**
|
|
* 组合导航项样式
|
|
*/
|
|
function composeNavItemStyles(colors: ColorTheme) {
|
|
return {
|
|
base: `${baseStyles.baseNavItemStyles.base} ${colors.navItem.border} ${colors.navItem.bg} ${colors.navItem.text}`,
|
|
hover: `${baseStyles.baseNavItemStyles.hover} ${colors.navItem.border} ${colors.navItem.bg} ${colors.navItem.hoverBg} ${colors.navItem.hoverShadow} ${colors.navItem.text} hover:border-slate-400 dark:hover:border-slate-500`,
|
|
active: `${baseStyles.baseNavItemStyles.active} ${colors.navItem.activeBg} ${colors.navItem.activeText} ${colors.navItem.activeShadow} border-slate-900 dark:border-slate-100`,
|
|
rainbow: `${baseStyles.baseNavItemStyles.rainbow} ${colors.navItem.border} ${colors.navItem.rainbowBg} ${colors.navItem.rainbowShadow} ${colors.navItem.text}`,
|
|
tabBase: `${baseStyles.baseNavItemStyles.tabBase} ${colors.navItem.tabText} ${colors.navItem.tabTextHover}`,
|
|
tabActive: `${baseStyles.baseNavItemStyles.tabActive} ${colors.navItem.tabTextActive}`,
|
|
} as const
|
|
}
|
|
|
|
/**
|
|
* 组合徽章样式
|
|
*/
|
|
function composeBadgeStyles(colors: ColorTheme) {
|
|
return {
|
|
base: baseStyles.baseBadgeStyles.base,
|
|
primary: `${baseStyles.baseBadgeStyles.primary} ${colors.badge.primary.bg} ${colors.badge.primary.text}`,
|
|
success: `${baseStyles.baseBadgeStyles.success} ${colors.badge.success.bg} ${colors.badge.success.text}`,
|
|
warning: `${baseStyles.baseBadgeStyles.warning} ${colors.badge.warning.bg} ${colors.badge.warning.text}`,
|
|
danger: `${baseStyles.baseBadgeStyles.danger} ${colors.badge.danger.bg} ${colors.badge.danger.text}`,
|
|
} as const
|
|
}
|
|
|
|
/**
|
|
* 组合Modal样式
|
|
*/
|
|
function composeModalStyles(colors: ColorTheme) {
|
|
return {
|
|
overlay: `${baseStyles.baseModalStyles.overlay} ${colors.modal.overlay}`,
|
|
container: baseStyles.baseModalStyles.container,
|
|
content: `${baseStyles.baseModalStyles.content} ${colors.modal.bg} ${colors.modal.border} ${colors.modal.shadow}`,
|
|
sizes: baseStyles.baseModalStyles.sizes,
|
|
header: `${baseStyles.baseModalStyles.header} ${colors.modal.headerBorder}`,
|
|
title: `${baseStyles.baseModalStyles.title} ${colors.modal.title}`,
|
|
closeButton: `${baseStyles.baseModalStyles.closeButton} ${colors.modal.closeButton}`,
|
|
body: `${baseStyles.baseModalStyles.body} ${colors.modal.body}`,
|
|
footer: `${baseStyles.baseModalStyles.footer} ${colors.modal.footerBorder}`,
|
|
} as const
|
|
}
|
|
|
|
/**
|
|
* 组合低饱和度炫彩元素样式
|
|
*/
|
|
function composeAccentStyles(colors: ColorTheme) {
|
|
return {
|
|
pink: colors.accent.pink,
|
|
purple: colors.accent.purple,
|
|
blue: colors.accent.blue,
|
|
cyan: colors.accent.cyan,
|
|
emerald: colors.accent.emerald,
|
|
orange: colors.accent.orange,
|
|
rainbow: colors.accent.rainbow,
|
|
} as const
|
|
}
|
|
|
|
/**
|
|
* 组合开关切换器样式
|
|
*/
|
|
function composeToggleStyles(colors: ColorTheme) {
|
|
return {
|
|
container: baseStyles.baseToggleStyles.container,
|
|
track: `${baseStyles.baseToggleStyles.track} ${colors.toggle.trackBg} ${colors.toggle.trackChecked} ${colors.toggle.thumbBg} ${colors.toggle.thumbBorder}`,
|
|
input: baseStyles.baseToggleStyles.input,
|
|
} as const
|
|
}
|
|
|
|
/**
|
|
* 组合完整的样式配置
|
|
*/
|
|
export function composeThemeStyles(colors: ColorTheme) {
|
|
return {
|
|
cardStyles: composeCardStyles(colors),
|
|
buttonStyles: composeButtonStyles(colors),
|
|
buttonModifiers: baseStyles.baseButtonModifiers,
|
|
inputStyles: composeInputStyles(colors),
|
|
inputModifiers: baseStyles.baseInputModifiers,
|
|
navItemStyles: composeNavItemStyles(colors),
|
|
badgeStyles: composeBadgeStyles(colors),
|
|
modalStyles: composeModalStyles(colors),
|
|
toggleStyles: composeToggleStyles(colors),
|
|
accentStyles: composeAccentStyles(colors),
|
|
spacingStyles: baseStyles.baseSpacingStyles,
|
|
} as const
|
|
}
|
|
|
|
// 导出浅色和深色主题的完整样式
|
|
export const lightThemeStyles = composeThemeStyles(lightColors.themeColors)
|
|
export const darkThemeStyles = composeThemeStyles(darkColors.themeColors)
|
|
|