/* ============================================================ * 众泰云 Design Token 系统 * 所有组件、布局、页面样式均引用此文件中的 CSS 自定义属性。 * 禁止在组件中硬编码颜色、尺寸、间距。 * ============================================================ */ :root { /* ---------------------------------------------------------- 颜色 - Colors ---------------------------------------------------------- */ --color-bg: #ffffff; --color-bg-secondary: #f8f9fa; --color-bg-tertiary: #f1f3f5; --color-text-primary: #1a1a2e; --color-text-secondary: #6b7280; --color-text-tertiary: #9ca3af; --color-accent: #0E7C7B; --color-accent-hover: #0a6362; --color-accent-active: #09605f; --color-accent-dark: #0a6362; --color-accent-light: #e6f7f7; --color-on-accent: #ffffff; --color-white: #ffffff; --color-warning: #f59e0b; --color-warning-light: #fffbeb; --color-warning-bg: #fffbeb; --color-warning-bg-dark: #fef3c7; --color-success: #10b981; --color-success-light: #ecfdf5; --color-success-bg: #ecfdf5; --color-success-bg-dark: #d1fae5; --color-error: #ef4444; --color-error-hover: #dc2626; --color-error-active: #b91c1c; --color-error-light: #fef2f2; --color-info: #12a3a2; --color-info-bg: #eef2ff; --color-accent-bg: #ecfeff; --color-accent-bg-dark: #cffafe; --color-border: #e5e7eb; --color-border-light: #f3f4f6; /* ---------------------------------------------------------- 排版 - Typography ---------------------------------------------------------- */ --font-sans: 'InstrumentSans', 'DM Sans', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-serif: 'InstrumentSerif', 'Source Serif 4', Georgia, ui-serif, serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace; /* 模块化字号比例 (基于 16px 基准, ~1.25 比率) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3.0625rem; /* 49px */ /* 行高 */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.6; --leading-relaxed: 1.75; /* 字重 */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ---------------------------------------------------------- 间距 - Spacing (4px 基准网格) ---------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ---------------------------------------------------------- 圆角 - Border Radius 批15 收敛：定义统一收敛至 tokens-authoritative.css（单一事实源）， 本文件不再重复定义，避免多文件值冲突。 ---------------------------------------------------------- */ /* ---------------------------------------------------------- 阴影 - Shadows ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06); --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /* ---------------------------------------------------------- 动画 - Animation 批15 收敛：duration/ease 定义统一收敛至 tokens-authoritative.css （单一事实源），本文件仅保留便捷组合引用（--transition-*）。 ---------------------------------------------------------- */ /* ---------------------------------------------------------- 布局 - Layout ---------------------------------------------------------- */ --container-max: 1200px; --container-wide: 1400px; --sidebar-width: 260px; --sidebar-collapsed: 64px; --topbar-height: 56px; /* ---------------------------------------------------------- 响应式断点 - Breakpoints (仅用于 JS 逻辑判断，CSS 用 @media) ---------------------------------------------------------- */ --breakpoint-sm: 480px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; /* ---------------------------------------------------------- 层级 - Z-Index ---------------------------------------------------------- */ --z-dropdown: 100; --z-sticky: 200; --z-topbar: 250; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; /* ---------------------------------------------------------- 过渡 - Transitions (便捷组合) 注意: 优先使用具体属性过渡而非 all，以获得更好的性能 ---------------------------------------------------------- */ --transition-fast: background-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default), opacity var(--duration-fast) var(--ease-default); --transition-normal: background-color var(--duration-normal) var(--ease-default), color var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default), opacity var(--duration-normal) var(--ease-default); --transition-slow: background-color var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out), border-color var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out); /* ============================================================ 动效系统增强（对齐 Linear / Vercel Motion） 批15 收敛：本段 duration/ease 定义统一收敛至 tokens-authoritative.css（单一事实源），避免与上方旧档位冲突。 ============================================================ */ /* ============================================================ 玻璃态模糊 Token（Glassmorphism） ============================================================ */ --blur-sm: blur(4px); --blur-md: blur(8px); --blur-lg: blur(16px); --blur-xl: blur(24px); --blur-2xl: blur(40px); --blur-saturate: saturate(180%); /* ============================================================ 彩色阴影体系（含品牌色发光） ============================================================ */ --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --shadow-color-primary: 0 8px 24px -4px rgba(8, 145, 178, 0.35), 0 4px 8px -2px rgba(8, 145, 178, 0.18); --shadow-color-success: 0 8px 24px -4px rgba(16, 185, 129, 0.35), 0 4px 8px -2px rgba(16, 185, 129, 0.18); --shadow-color-error: 0 8px 24px -4px rgba(239, 68, 68, 0.35), 0 4px 8px -2px rgba(239, 68, 68, 0.18); --shadow-color-warning: 0 8px 24px -4px rgba(245, 158, 11, 0.35), 0 4px 8px -2px rgba(245, 158, 11, 0.18); --shadow-color-info: 0 8px 24px -4px rgba(59, 130, 246, 0.35), 0 4px 8px -2px rgba(59, 130, 246, 0.18); --shadow-glow-brand: 0 0 24px rgba(8, 145, 178, 0.30); --shadow-glow-soft: 0 0 0 1px rgba(8, 145, 178, 0.08), 0 4px 16px rgba(8, 145, 178, 0.12); /* ============================================================ Z-Index 体系扩展（完整层级栈） ============================================================ */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-topbar: 250; --z-popover: 300; --z-popover-content: 310; --z-modal: 400; --z-modal-backdrop: 390; --z-toast: 500; --z-notification: 550; --z-tooltip: 600; --z-command: 700; /* Command+K 面板 */ --z-max: 9999; /* ============================================================ 焦点环 Token（无障碍） ============================================================ */ --focus-ring-width: 3px; --focus-ring-offset: 2px; --focus-ring-color: var(--color-accent); --focus-ring: 0 0 0 var(--focus-ring-offset) #fff, 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) var(--focus-ring-color); } /* ============================================================ 暗色模式（:root[data-theme="dark"]） 覆盖 tokens.css 层级的基础语义色，保证 WCAG AA 对比度。 design-system.css 中的 [data-theme="dark"] 已覆盖高级语义色， 此处补充 tokens.css 自有变量的暗色映射。 ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; /* ---- Surface ---- */ --color-bg: #0a0a0a; --color-bg-secondary: #141414; --color-bg-tertiary: #1c1c1c; /* ---- Text（对比度均 >= 4.5:1）---- */ --color-text-primary: #f5f5f5; --color-text-secondary: #d4d4d4; --color-text-tertiary: #a8a29e; /* ---- Accent（暗色下提亮以保证可读性）---- */ --color-accent: #2dd4bf; --color-accent-hover: #5eead4; --color-accent-active: #14b8a6; --color-accent-dark: #14b8a6; --color-accent-light: rgba(45, 212, 191, 0.10); --color-on-accent: #0a0a0a; /* ---- 语义状态色（暗色下提亮）---- */ --color-warning: #fbbf24; --color-warning-light: rgba(251, 191, 36, 0.12); --color-warning-bg: rgba(251, 191, 36, 0.12); --color-warning-bg-dark: rgba(251, 191, 36, 0.20); --color-success: #34d399; --color-success-light: rgba(52, 211, 153, 0.12); --color-success-bg: rgba(52, 211, 153, 0.12); --color-success-bg-dark: rgba(52, 211, 153, 0.20); --color-error: #f87171; --color-error-hover: #fca5a5; --color-error-active: #ef4444; --color-error-light: rgba(248, 113, 113, 0.12); --color-info: #60a5fa; --color-info-bg: rgba(96, 165, 250, 0.12); --color-accent-bg: rgba(45, 212, 191, 0.12); --color-accent-bg-dark: rgba(45, 212, 191, 0.20); /* ---- Border ---- */ --color-border: #2e2e2e; --color-border-light: #232323; /* ---- Shadow（暗色更深更克制）---- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.50), 0 2px 4px -2px rgba(0, 0, 0, 0.40); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.45); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.60), 0 8px 10px -6px rgba(0, 0, 0, 0.50); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.70); --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.40); /* ---- 彩色阴影（暗色下发光更明显）---- */ --shadow-color-primary: 0 8px 24px -4px rgba(45, 212, 191, 0.40), 0 4px 8px -2px rgba(45, 212, 191, 0.22); --shadow-glow-brand: 0 0 32px rgba(45, 212, 191, 0.35); /* ---- 焦点环（暗色下使用亮色）---- */ --focus-ring-color: var(--color-accent); --focus-ring: 0 0 0 var(--focus-ring-offset) #0a0a0a, 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) var(--focus-ring-color); } /* ============================================================ 语义化颜色层级 Token（success / warning / error / info 各 5 层级） 对齐 Tailwind 调色板，覆盖浅色 + 暗色两套。 层级语义： -50 超浅背景（hover 底色） -100 浅背景（badge / soft bg） -500 标准前景色（文字 / 图标） -600 hover 加深 -bg 半透明背景（toast / alert bg） ============================================================ */ /* ---- Success 成功 ---- */ :root { --success-50: #ecfdf5; --success-100: #d1fae5; --success-500: #10b981; --success-600: #059669; --success-bg: rgba(16, 185, 129, 0.10); --warning-50: #fffbeb; --warning-100: #fef3c7; --warning-500: #f59e0b; --warning-600: #d97706; --warning-bg: rgba(245, 158, 11, 0.10); --error-50: #fef2f2; --error-100: #fee2e2; --error-500: #ef4444; --error-600: #dc2626; --error-bg: rgba(239, 68, 68, 0.10); --info-50: #eff6ff; --info-100: #dbeafe; --info-500: #3b82f6; --info-600: #2563eb; --info-bg: rgba(59, 130, 246, 0.10); } :root[data-theme="dark"] { --success-50: rgba(52, 211, 153, 0.10); --success-100: rgba(52, 211, 153, 0.18); --success-500: #34d399; --success-600: #10b981; --success-bg: rgba(52, 211, 153, 0.14); --warning-50: rgba(251, 191, 36, 0.10); --warning-100: rgba(251, 191, 36, 0.18); --warning-500: #fbbf24; --warning-600: #f59e0b; --warning-bg: rgba(251, 191, 36, 0.14); --error-50: rgba(248, 113, 113, 0.10); --error-100: rgba(248, 113, 113, 0.18); --error-500: #f87171; --error-600: #ef4444; --error-bg: rgba(248, 113, 113, 0.14); --info-50: rgba(96, 165, 250, 0.10); --info-100: rgba(96, 165, 250, 0.18); --info-500: #60a5fa; --info-600: #3b82f6; --info-bg: rgba(96, 165, 250, 0.14); }