flnxi-Wu/lib/ui-styles-base.ts

/**
 * UI 样式基础配置
 * 包含所有非颜色相关的样式：布局、大小、动画、间距、圆角等
 * 这些样式在浅色和深色模式下完全相同
 */

// 基础结构样式（不包含颜色）
export const baseCardStyles = {
  // 基础卡片结构
  base: 'rounded-2xl border backdrop-blur-sm shadow-lg p-6 transition-all duration-300',
  
  // 悬停卡片结构（带提升效果）
  hover: 'rounded-2xl border backdrop-blur-sm shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all duration-300 p-6',
  
  // 大卡片结构（带炫彩光晕）
  large: 'rounded-3xl border backdrop-blur-md shadow-xl hover:shadow-2xl transition-all duration-500 p-8',
  
  // 扁平卡片结构
  flat: 'rounded-2xl border backdrop-blur-sm p-6 transition-all duration-300',
  
  // 炫彩卡片结构（带渐变背景）
  rainbow: 'rounded-2xl border backdrop-blur-sm shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all duration-300 p-6',
  
  // 玻璃态卡片结构
  glass: 'rounded-2xl backdrop-blur-md border shadow-lg hover:shadow-xl transition-all duration-300 p-6',
  
  // 霓虹卡片结构
  neon: 'rounded-2xl border-2 backdrop-blur-sm shadow-lg hover:shadow-xl transition-all duration-300 p-6',
} as const

export const baseButtonStyles = {
  // 主要按钮结构
  primary: 'px-6 py-3 rounded-xl text-white font-medium shadow-lg hover:shadow-xl active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
  
  // 次要按钮结构
  secondary: 'px-6 py-3 rounded-xl border backdrop-blur-sm font-medium hover:border-indigo-400 active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
  
  // 幽灵按钮结构
  ghost: 'px-6 py-3 rounded-xl font-medium active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
  
  // 危险按钮结构
  danger: 'px-6 py-3 rounded-xl text-white font-medium shadow-lg hover:shadow-xl active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
  
  // 成功按钮结构
  success: 'px-6 py-3 rounded-xl text-white font-medium shadow-lg hover:shadow-xl active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
  
  // 炫彩渐变按钮结构
  rainbow: 'px-6 py-3 rounded-xl bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 text-white font-medium shadow-lg hover:from-pink-600 hover:via-purple-600 hover:to-indigo-600 hover:shadow-xl active:scale-95 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed',
  
  // 霓虹按钮结构
  neon: 'px-6 py-3 rounded-xl bg-cyan-500 text-white font-medium shadow-lg hover:bg-cyan-400 hover:shadow-xl active:scale-95 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed',
  
  // 玻璃态按钮结构
  glass: 'px-6 py-3 rounded-xl backdrop-blur-md border text-white font-medium hover:border-white/30 active:scale-95 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed',
} as const

export const baseInputStyles = {
  // 基础输入框结构（focus 颜色在主题中定义）
  base: 'w-full px-4 py-3 rounded-xl border focus:border-indigo-500 focus:ring-2 outline-none transition-all',
  
  // 错误输入框结构（focus 颜色在主题中定义）
  error: 'w-full px-4 py-3 rounded-xl border-2 focus:ring-2 outline-none transition-all',
} as const

export const baseNavItemStyles = {
  // 基础导航项结构
  base: 'px-4 py-3 rounded-xl border backdrop-blur-sm transition-all duration-300',
  
  // 悬停导航项结构（带光晕效果）
  hover: 'px-4 py-3 rounded-xl border backdrop-blur-sm hover:border-indigo-400 hover:shadow-md transition-all duration-300',
  
  // 激活导航项结构（带炫彩光晕）
  active: 'px-4 py-3 rounded-xl border-2 border-indigo-500 backdrop-blur-sm shadow-lg transition-all duration-300',
  
  // 炫彩导航项结构
  rainbow: 'px-4 py-3 rounded-xl border backdrop-blur-sm hover:shadow-md transition-all duration-300',
  
  // 标签页导航项结构
  tabBase: 'relative pb-4 px-5 font-medium transition-all duration-300 ease-out',
  tabActive: 'relative pb-4 px-5 font-medium transition-all duration-300 ease-out',
} as const

export const baseBadgeStyles = {
  base: 'px-3 py-1 rounded-lg text-xs font-medium',
  primary: 'px-3 py-1 rounded-lg text-xs font-medium',
  success: 'px-3 py-1 rounded-lg text-xs font-medium',
  warning: 'px-3 py-1 rounded-lg text-xs font-medium',
  danger: 'px-3 py-1 rounded-lg text-xs font-medium',
} as const

// 修饰符（不包含颜色）
export const baseButtonModifiers = {
  compact: 'px-3 py-1.5 text-sm',
  compactXs: 'px-2 py-1 text-xs',
  icon: 'p-2 rounded-xl',
  block: 'w-full justify-center',
  pill: 'rounded-full',
} as const

export const baseInputModifiers = {
  compact: 'px-3 py-2 text-sm rounded-lg',
  compactXs: 'px-2.5 py-1.5 text-xs rounded-lg',
} as const

export const baseSpacingStyles = {
  section: 'space-y-8',      // 区块间距
  card: 'space-y-6',         // 卡片内间距
  form: 'space-y-4',         // 表单元素间距
  compact: 'space-y-2',      // 紧密间距
} as const

// Modal 基础样式（不包含颜色）
export const baseModalStyles = {
  // 遮罩层
  overlay: 'fixed inset-0 z-50 flex items-center justify-center p-4 transition-opacity duration-300',
  
  // 弹窗容器
  container: 'relative w-full max-h-[90vh] overflow-hidden transition-all duration-300',
  
  // 弹窗内容
  content: 'rounded-2xl border backdrop-blur-sm shadow-2xl transition-all duration-300',
  
  // 弹窗尺寸
  sizes: {
    small: 'max-w-sm',
    medium: 'max-w-md',
    large: 'max-w-lg',
    xlarge: 'max-w-2xl',
    fullscreen: 'max-w-full h-full max-h-[90vh]',
  },
  
  // 弹窗头部
  header: 'px-6 py-4 border-b flex items-center justify-between',
  
  // 弹窗标题
  title: 'text-lg font-semibold',
  
  // 弹窗关闭按钮
  closeButton: 'p-1 rounded-lg hover:bg-opacity-10 transition-colors duration-200',
  
  // 弹窗主体
  body: 'px-6 py-4 overflow-y-auto',
  
  // 弹窗底部
  footer: 'px-6 py-4 border-t flex items-center justify-end gap-3',
} as const