193 lines
8.5 KiB
TypeScript
193 lines
8.5 KiB
TypeScript
/**
|
||
* 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',
|
||
|
||
// 次要按钮结构（hover 边框颜色在主题中定义）
|
||
secondary: 'px-6 py-3 rounded-xl border backdrop-blur-sm font-medium 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',
|
||
|
||
// 炫彩渐变按钮结构（紧凑尺寸，用于角标）
|
||
rainbowCompact: 'px-2 py-1 text-xs 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: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 边框和阴影颜色在主题中定义）
|
||
hover: 'px-4 py-3 rounded-xl border backdrop-blur-sm hover:shadow-md transition-all duration-300',
|
||
|
||
// 激活导航项结构（带炫彩光晕，边框和阴影颜色在主题中定义）
|
||
active: 'px-4 py-3 rounded-xl border-2 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 border-none bg-transparent',
|
||
tabActive: 'relative pb-4 px-5 font-medium transition-all duration-300 ease-out border-none bg-transparent',
|
||
} 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 px-4 py-8 sm:px-6 sm:py-12 lg:px-10 lg:py-16 bg-slate-950/55 dark:bg-black/75 backdrop-blur-2xl transition-opacity duration-300 modal-overlay-apple',
|
||
|
||
// 弹窗容器
|
||
container: 'relative w-auto max-w-full max-h-[80vh] sm:max-h-[75vh] overflow-hidden transition-all duration-300 flex-none rounded-[32px]',
|
||
|
||
// 弹窗内容（阴影在主题颜色中定义，这里不重复定义）
|
||
content: 'w-full rounded-[32px] bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl overflow-hidden transition-all duration-300 modal-content-apple',
|
||
|
||
// 弹窗尺寸
|
||
sizes: {
|
||
xs: 'max-w-[20rem]',
|
||
small: 'max-w-sm',
|
||
medium: 'max-w-md',
|
||
large: 'max-w-lg',
|
||
xlarge: 'max-w-2xl',
|
||
xxlarge: 'max-w-7xl',
|
||
fullscreen: 'max-w-full w-full h-full max-h-[85vh]',
|
||
},
|
||
|
||
// 弹窗头部
|
||
header: 'px-8 py-5 border-b flex items-center justify-between bg-transparent',
|
||
|
||
// 弹窗标题
|
||
title: 'text-lg font-semibold',
|
||
|
||
// 弹窗关闭按钮
|
||
closeButton: 'p-1 rounded-lg hover:bg-opacity-10 transition-colors duration-200',
|
||
|
||
// 弹窗主体
|
||
body: 'px-8 py-6 max-h-[60vh] sm:max-h-[55vh] overflow-y-auto bg-transparent',
|
||
|
||
// 弹窗底部
|
||
footer: 'px-8 py-5 border-t flex items-center justify-end gap-3 bg-transparent',
|
||
} as const
|
||
|
||
// Section 显示动画样式（来自外观设置）
|
||
export const baseSectionRevealStyles = {
|
||
// 基础显示动画类
|
||
base: 'transition-all duration-700 ease-out transform',
|
||
// 可见状态
|
||
visible: 'opacity-100 translate-y-0 scale-100',
|
||
// 隐藏状态
|
||
hidden: 'opacity-0 translate-y-6 scale-95',
|
||
} as const
|
||
|
||
// Hero 区域样式（来自外观设置）
|
||
export const baseHeroStyles = {
|
||
// Hero 卡片基础结构
|
||
card: 'relative overflow-hidden rounded-3xl border transition-all duration-500 p-6',
|
||
// Hero 标题区域
|
||
header: 'relative z-10 flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between',
|
||
// Hero 内容区域
|
||
content: 'space-y-3 max-w-2xl',
|
||
} as const
|
||
|
||
// 浮动光球样式（来自外观设置）
|
||
export const baseFloatingOrbStyles = {
|
||
// 光球基础样式
|
||
base: 'absolute rounded-full blur-3xl pointer-events-none',
|
||
// 右上角光球
|
||
topRight: '-top-8 -right-8 h-24 w-24 animate-pulse-slow',
|
||
// 左下角光球
|
||
bottomLeft: '-bottom-8 -left-8 h-20 w-20 animate-[pulse_8s_ease-in-out_infinite]',
|
||
} as const
|
||
|
||
// 开关切换器样式（来自外观设置）
|
||
export const baseToggleStyles = {
|
||
// 开关容器
|
||
container: 'relative inline-flex items-center cursor-pointer',
|
||
// 开关轨道（颜色在主题中定义）
|
||
track: 'w-11 h-6 peer-focus:outline-none peer-focus:ring-4 rounded-full peer peer-checked:after:translate-x-full after:absolute after:top-[2px] after:left-[2px] after:rounded-full after:h-5 after:w-5 after:transition-all',
|
||
// 开关输入（隐藏）
|
||
input: 'sr-only peer',
|
||
} as const
|
||
|