/** * ============================================ * 设计令牌系统 (Design Tokens) * ============================================ * * 这是样板项目的核心设计系统 * 定义了所有可复用的设计变量 * * 使用方式: * 1. 在所有HTML页面的中引入此文件 * 2. 使用 var(--变量名) 引用这些变量 * 3. 复制到新项目时,只需修改此文件即可切换主题 * * @author 廖斌 * @version 1.0.0 * @date 2025-10-16 */ :root { /* ==================== 颜色系统 ==================== */ /* 主色调 - 科技蓝 */ --color-primary: #00d4ff; --color-primary-light: #4de4ff; --color-primary-dark: #00a8cc; --color-primary-rgb: 0, 212, 255; /* 辅助色 - 紫色 */ --color-secondary: #7b2ff7; --color-secondary-light: #9d5aff; --color-secondary-dark: #5a1fc4; --color-secondary-rgb: 123, 47, 247; /* 强调色 - 粉色 */ --color-accent: #ff6b9d; --color-accent-light: #ff8eb3; --color-accent-dark: #e64987; --color-accent-rgb: 255, 107, 157; /* 成功 - 绿色 */ --color-success: #00ff88; --color-success-light: #4dffaa; --color-success-dark: #00cc6a; --color-success-rgb: 0, 255, 136; /* 警告 - 橙色 */ --color-warning: #ffab00; --color-warning-light: #ffc04d; --color-warning-dark: #cc8800; --color-warning-rgb: 255, 171, 0; /* 错误 - 红色 */ --color-error: #ff3d71; --color-error-light: #ff6b93; --color-error-dark: #e6154a; --color-error-rgb: 255, 61, 113; /* 信息 - 蓝色 */ --color-info: #0095ff; --color-info-light: #4db8ff; --color-info-dark: #0077cc; --color-info-rgb: 0, 149, 255; /* ==================== 渐变系统 ==================== */ /* 主渐变 - 蓝紫渐变 */ --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #7b2ff7 100%); --gradient-primary-hover: linear-gradient(135deg, #4de4ff 0%, #9d5aff 100%); /* 科技渐变 */ --gradient-tech: linear-gradient(135deg, #00d4ff 0%, #00ff88 100%); /* 成功渐变 */ --gradient-success: linear-gradient(135deg, #00ff88 0%, #00d4ff 100%); /* 警告渐变 */ --gradient-warning: linear-gradient(135deg, #ffab00 0%, #ff6b9d 100%); /* 错误渐变 */ --gradient-error: linear-gradient(135deg, #ff3d71 0%, #ff6b9d 100%); /* 高级渐变 - 多色彩虹 */ --gradient-rainbow: linear-gradient(135deg, #00d4ff 0%, #7b2ff7 33%, #ff6b9d 66%, #ffab00 100%); /* 夜空渐变 */ --gradient-night: linear-gradient(180deg, #0a0e27 0%, #1a1f3a 100%); /* ==================== 背景系统 ==================== */ /* 主背景 - 深蓝黑 */ --bg-primary: #0a0e27; --bg-primary-rgb: 10, 14, 39; /* 次背景 - 深蓝 */ --bg-secondary: #1a1f3a; --bg-secondary-rgb: 26, 31, 58; /* 三级背景 */ --bg-tertiary: #252b4d; --bg-tertiary-rgb: 37, 43, 77; /* 卡片背景 - 半透明 */ --bg-card: rgba(26, 31, 58, 0.6); --bg-card-hover: rgba(26, 31, 58, 0.8); /* 玻璃态背景 */ --bg-glass: rgba(255, 255, 255, 0.05); --bg-glass-light: rgba(255, 255, 255, 0.08); --bg-glass-dark: rgba(0, 0, 0, 0.3); /* 输入框背景 */ --bg-input: rgba(255, 255, 255, 0.08); --bg-input-focus: rgba(255, 255, 255, 0.12); /* 遮罩背景 */ --bg-overlay: rgba(10, 14, 39, 0.95); --bg-overlay-light: rgba(10, 14, 39, 0.7); /* ==================== 文字系统 ==================== */ /* 主要文字 */ --text-primary: #ffffff; --text-primary-rgb: 255, 255, 255; /* 次要文字 */ --text-secondary: #b4b9d1; --text-secondary-rgb: 180, 185, 209; /* 三级文字 */ --text-tertiary: #6b7199; --text-tertiary-rgb: 107, 113, 153; /* 禁用文字 */ --text-disabled: #3f4566; --text-disabled-rgb: 63, 69, 102; /* 反色文字(用于深色背景) */ --text-inverse: #0a0e27; /* ==================== 边框系统 ==================== */ --border-color: rgba(255, 255, 255, 0.1); --border-color-light: rgba(255, 255, 255, 0.15); --border-color-dark: rgba(255, 255, 255, 0.05); --border-color-focus: var(--color-primary); --border-width-thin: 1px; --border-width-base: 2px; --border-width-thick: 3px; /* ==================== 间距系统 ==================== */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-3xl: 64px; --spacing-4xl: 96px; /* ==================== 圆角系统 ==================== */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ==================== 阴影系统 ==================== */ /* 普通阴影 */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.1); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4); /* 发光阴影 */ --shadow-glow-primary: 0 0 20px rgba(0, 212, 255, 0.3); --shadow-glow-primary-lg: 0 0 40px rgba(0, 212, 255, 0.5); --shadow-glow-secondary: 0 0 20px rgba(123, 47, 247, 0.3); --shadow-glow-success: 0 0 20px rgba(0, 255, 136, 0.3); --shadow-glow-error: 0 0 20px rgba(255, 61, 113, 0.3); /* 内阴影 */ --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.3); /* ==================== 字体系统 ==================== */ /* 字体家族 */ --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; --font-family-mono: 'Consolas', 'Monaco', 'Courier New', monospace; /* 字体大小 */ --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 16px; --font-size-md: 18px; --font-size-lg: 20px; --font-size-xl: 24px; --font-size-2xl: 32px; --font-size-3xl: 40px; --font-size-4xl: 48px; --font-size-5xl: 64px; /* 字重 */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* 行高 */ --line-height-tight: 1.2; --line-height-base: 1.5; --line-height-relaxed: 1.75; --line-height-loose: 2; /* ==================== 过渡动画系统 ==================== */ /* 持续时间 */ --duration-fast: 0.15s; --duration-base: 0.3s; --duration-slow: 0.5s; --duration-slower: 0.75s; /* 缓动函数 */ --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* 组合过渡 */ --transition-fast: all var(--duration-fast) var(--ease-out); --transition-base: all var(--duration-base) var(--ease-out); --transition-slow: all var(--duration-slow) var(--ease-out); /* ==================== Z-index系统 ==================== */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-notification: 1080; /* ==================== 尺寸系统 ==================== */ /* 容器宽度 */ --container-xs: 480px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; /* 组件高度 */ --height-input: 48px; --height-button: 48px; --height-navbar: 64px; --height-footer: 80px; /* ==================== 特效系统 ==================== */ /* 模糊效果 */ --blur-sm: 4px; --blur-md: 8px; --blur-lg: 16px; --blur-xl: 24px; /* 透明度 */ --opacity-disabled: 0.4; --opacity-hover: 0.8; --opacity-pressed: 0.6; } /* ==================== 深色主题(默认) ==================== */ [data-theme="dark"] { /* 已在:root中定义,这里保持不变 */ } /* ==================== 浅色主题(备选) ==================== */ [data-theme="light"] { --bg-primary: #f5f7fa; --bg-secondary: #ffffff; --bg-tertiary: #e8ecf1; --text-primary: #1a1f3a; --text-secondary: #6b7199; --text-tertiary: #b4b9d1; --border-color: rgba(0, 0, 0, 0.1); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); } /* ==================== 打印样式优化 ==================== */ @media print { :root { --bg-primary: #ffffff; --bg-secondary: #ffffff; --text-primary: #000000; --text-secondary: #333333; } } /* ==================== 使用示例(仅注释) ==================== */ /* 按钮示例: .btn { background: var(--gradient-primary); color: var(--text-primary); padding: var(--spacing-md) var(--spacing-xl); border-radius: var(--radius-md); box-shadow: var(--shadow-glow-primary); transition: var(--transition-base); } 卡片示例: .card { background: var(--bg-glass); backdrop-filter: blur(var(--blur-md)); border: var(--border-width-thin) solid var(--border-color); border-radius: var(--radius-lg); padding: var(--spacing-lg); box-shadow: var(--shadow-md); } 输入框示例: .input { background: var(--bg-input); border: var(--border-width-base) solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); padding: var(--spacing-md); font-size: var(--font-size-base); } .input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2); } */