/* ============================================================ * 众泰云 Extended Design Tokens * 依赖: tokens.css * * 本文件扩展 tokens.css 中未覆盖的令牌： * 1. 完整语义化颜色层级（primary / secondary / tertiary 各 9 级） * 2. 渐变色令牌 * 3. 数据可视化色板（12 色） * 4. 复合间距令牌（compound spacing） * 5. 完整 z-index 层级栈 * 6. 组件尺寸令牌 * 7. 表单令牌 * * 禁止硬编码颜色值——所有值均使用 CSS 自定义属性。 * ============================================================ */ /* ============================================================ 1. 语义化颜色层级 — Primary (青色系, 品牌主色) 9 级: 50/100/200/300/400/500/600/700/800/900 ============================================================ */ :root { /* Primary — 品牌主色 (Cyan Teal) */ --primary-50: #ecfeff; --primary-100: #cffafe; --primary-200: #a5f3fc; --primary-300: #67e8f9; --primary-400: #22d3ee; --primary-500: #0891b2; /* 基准色 = --color-accent */ --primary-600: #0e7490; /* hover */ --primary-700: #155e75; --primary-800: #164e63; --primary-900: #083344; /* Secondary — 暖橙辅助色 (Amber) */ --secondary-50: #fffbeb; --secondary-100: #fef3c7; --secondary-200: #fde68a; --secondary-300: #fcd34d; --secondary-400: #fbbf24; --secondary-500: #f59e0b; /* 基准色 = --color-warning */ --secondary-600: #d97706; --secondary-700: #b45309; --secondary-800: #92400e; --secondary-900: #78350f; /* Tertiary — 紫色点缀色 (Violet) */ --tertiary-50: #f5f3ff; --tertiary-100: #ede9fe; --tertiary-200: #ddd6fe; --tertiary-300: #c4b5fd; --tertiary-400: #a78bfa; --tertiary-500: #8b5cf6; --tertiary-600: #7c3aed; --tertiary-700: #6d28d9; --tertiary-800: #5b21b6; --tertiary-900: #4c1d95; /* 语义别名映射（供组件直接引用） */ --color-primary: var(--primary-500); --color-primary-hover: var(--primary-600); --color-primary-active: var(--primary-700); --color-primary-light: var(--primary-50); --color-primary-bg: var(--primary-50); --color-on-primary: #ffffff; --color-secondary: var(--secondary-500); --color-secondary-hover: var(--secondary-600); --color-secondary-light: var(--secondary-50); --color-on-secondary: #ffffff; --color-tertiary: var(--tertiary-500); --color-tertiary-hover: var(--tertiary-600); --color-tertiary-light: var(--tertiary-50); --color-on-tertiary: #ffffff; } /* 暗色模式：调整语义色对比度 */ :root[data-theme="dark"] { --primary-50: rgba(34, 211, 238, 0.08); --primary-100: rgba(34, 211, 238, 0.12); --primary-200: rgba(34, 211, 238, 0.18); --primary-300: rgba(34, 211, 238, 0.28); --primary-400: #22d3ee; --primary-500: #22d3ee; --primary-600: #67e8f9; --primary-700: #a5f3fc; --primary-800: #155e75; --primary-900: #083344; --secondary-50: rgba(251, 191, 36, 0.08); --secondary-100: rgba(251, 191, 36, 0.12); --secondary-200: rgba(251, 191, 36, 0.18); --secondary-300: rgba(251, 191, 36, 0.28); --secondary-400: #fbbf24; --secondary-500: #fbbf24; --secondary-600: #fcd34d; --secondary-700: #fde68a; --secondary-800: #b45309; --secondary-900: #78350f; --tertiary-50: rgba(167, 139, 250, 0.08); --tertiary-100: rgba(167, 139, 250, 0.12); --tertiary-200: rgba(167, 139, 250, 0.18); --tertiary-300: rgba(167, 139, 250, 0.28); --tertiary-400: #a78bfa; --tertiary-500: #a78bfa; --tertiary-600: #c4b5fd; --tertiary-700: #ddd6fe; --tertiary-800: #5b21b6; --tertiary-900: #4c1d95; --color-on-primary: #0a0a0a; --color-on-secondary: #0a0a0a; --color-on-tertiary: #0a0a0a; } /* ============================================================ 2. 渐变色令牌 ============================================================ */ :root { /* 品牌渐变 */ --gradient-primary: linear-gradient(135deg, var(--primary-500), var(--primary-700)); --gradient-primary-hover: linear-gradient(135deg, var(--primary-600), var(--primary-800)); --gradient-accent: linear-gradient(135deg, var(--primary-400), var(--tertiary-500)); --gradient-secondary: linear-gradient(135deg, var(--secondary-400), var(--secondary-600)); --gradient-tertiary: linear-gradient(135deg, var(--tertiary-400), var(--tertiary-600)); /* 语义渐变 */ --gradient-success: linear-gradient(135deg, var(--success-500), var(--success-600)); --gradient-warning: linear-gradient(135deg, var(--warning-500), var(--warning-600)); --gradient-error: linear-gradient(135deg, var(--error-500), var(--error-600)); --gradient-info: linear-gradient(135deg, var(--info-500), var(--info-600)); /* 背景渐变（柔和） */ --gradient-bg-soft: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-secondary) 100%); --gradient-bg-hero: linear-gradient(135deg, var(--primary-50) 0%, var(--tertiary-50) 50%, var(--color-bg) 100%); --gradient-surface: linear-gradient(145deg, var(--color-bg) 0%, var(--color-bg-secondary) 100%); /* 玻璃态渐变 */ --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%); --gradient-glass-dark: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%); /* 文字渐变 */ --gradient-text-primary: linear-gradient(135deg, var(--primary-500), var(--tertiary-500)); --gradient-text-warm: linear-gradient(135deg, var(--secondary-400), var(--secondary-600)); /* 边框渐变 */ --gradient-border: linear-gradient(135deg, var(--primary-300), var(--tertiary-300)); /* 方向变体 */ --gradient-to-right: linear-gradient(to right, var(--primary-500), var(--tertiary-500)); --gradient-to-bottom: linear-gradient(to bottom, var(--primary-500), var(--primary-700)); --gradient-radial: radial-gradient(circle at 50% 50%, var(--primary-400), var(--primary-700)); } :root[data-theme="dark"] { --gradient-bg-hero: linear-gradient(135deg, rgba(34,211,238,0.05) 0%, rgba(167,139,250,0.05) 50%, var(--color-bg) 100%); --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%); --gradient-text-primary: linear-gradient(135deg, var(--primary-400), var(--tertiary-400)); } /* ============================================================ 3. 数据可视化色板 (12 色) 对齐 D3 schemeCategory10 + 扩展色，保证色盲友好 ============================================================ */ :root { --chart-1: #0891b2; /* 青色 - 主系列 */ --chart-2: #8b5cf6; /* 紫色 */ --chart-3: #f59e0b; /* 琥珀 */ --chart-4: #10b981; /* 翠绿 */ --chart-5: #ef4444; /* 红色 */ --chart-6: #3b82f6; /* 蓝色 */ --chart-7: #ec4899; /* 粉色 */ --chart-8: #14b8a6; /* 蓝绿 */ --chart-9: #f97316; /* 橙色 */ --chart-10: #6366f1; /* 靛蓝 */ --chart-11: #84cc16; /* 酸橙 */ --chart-12: #a855f7; /* 紫罗兰 */ /* 图表语义色 */ --chart-positive: var(--chart-4); --chart-negative: var(--chart-5); --chart-neutral: var(--chart-6); --chart-highlight: var(--chart-1); /* 图表网格线 */ --chart-grid: rgba(0, 0, 0, 0.06); --chart-grid-strong: rgba(0, 0, 0, 0.12); --chart-axis: var(--color-text-tertiary); /* 图表区域渐变 */ --chart-area-primary: linear-gradient(180deg, rgba(8, 145, 178, 0.20) 0%, rgba(8, 145, 178, 0.02) 100%); --chart-area-success: linear-gradient(180deg, rgba(16, 185, 129, 0.20) 0%, rgba(16, 185, 129, 0.02) 100%); --chart-area-warning: linear-gradient(180deg, rgba(245, 158, 11, 0.20) 0%, rgba(245, 158, 11, 0.02) 100%); --chart-area-error: linear-gradient(180deg, rgba(239, 68, 68, 0.20) 0%, rgba(239, 68, 68, 0.02) 100%); } :root[data-theme="dark"] { --chart-1: #22d3ee; --chart-2: #a78bfa; --chart-3: #fbbf24; --chart-4: #34d399; --chart-5: #f87171; --chart-6: #60a5fa; --chart-7: #f472b6; --chart-8: #2dd4bf; --chart-9: #fb923c; --chart-10: #818cf8; --chart-11: #a3e635; --chart-12: #c084fc; --chart-grid: rgba(255, 255, 255, 0.06); --chart-grid-strong: rgba(255, 255, 255, 0.12); --chart-area-primary: linear-gradient(180deg, rgba(34, 211, 238, 0.20) 0%, rgba(34, 211, 238, 0.02) 100%); --chart-area-success: linear-gradient(180deg, rgba(52, 211, 153, 0.20) 0%, rgba(52, 211, 153, 0.02) 100%); --chart-area-warning: linear-gradient(180deg, rgba(251, 191, 36, 0.20) 0%, rgba(251, 191, 36, 0.02) 100%); --chart-area-error: linear-gradient(180deg, rgba(248, 113, 113, 0.20) 0%, rgba(248, 113, 113, 0.02) 100%); } /* ============================================================ 4. 复合间距令牌 (Compound Spacing) 常用组件间距组合，避免重复计算 ============================================================ */ :root { /* 卡片内边距 */ --space-card-padding: var(--space-6); /* 24px */ --space-card-padding-sm: var(--space-4); /* 16px */ --space-card-padding-lg: var(--space-8); /* 32px */ /* 组件间隙 */ --space-stack-xs: var(--space-1) var(--space-1); /* 紧凑堆叠 */ --space-stack-sm: var(--space-2) var(--space-2); --space-stack: var(--space-3) var(--space-4); /* 标准堆叠 */ --space-stack-lg: var(--space-4) var(--space-6); /* 水平布局 */ --space-inline-xs: var(--space-1); --space-inline-sm: var(--space-2); --space-inline: var(--space-3); --space-inline-lg: var(--space-4); /* 页面级间距 */ --space-page-x: var(--space-6); /* 页面左右 */ --space-page-y: var(--space-8); /* 页面上下 */ --space-page-x-mobile: var(--space-4); /* 移动端页面左右 */ --space-page-y-mobile: var(--space-6); /* 移动端页面上下 */ /* 区块间距 */ --space-section: var(--space-12); /* 大区块间隔 48px */ --space-section-sm: var(--space-8); /* 小区块间隔 32px */ --space-section-lg: var(--space-16); /* 大区块间隔 64px */ --space-section-xl: var(--space-20); /* 超大区块间隔 80px */ /* 表单间距 */ --space-form-field: var(--space-4); /* 表单字段间距 */ --space-form-label: var(--space-2); /* 标签到控件间距 */ --space-form-group: var(--space-6); /* 表单组间距 */ /* 列表间距 */ --space-list-item: var(--space-3); /* 列表项间距 */ --space-list-item-sm: var(--space-2); /* 紧凑列表项 */ /* 导航间距 */ --space-nav-item: var(--space-2); /* 导航项间距 */ --space-nav-section: var(--space-6); /* 导航分组间距 */ } /* ============================================================ 5. 完整 Z-Index 层级栈 补充 tokens.css 中已有的层级，增加更细粒度的层 ============================================================ */ :root { /* 基础层 */ --z-base: 0; --z-content: 1; --z-decorator: 2; /* 装饰性元素 */ --z-hover: 5; /* hover 状态提升 */ /* 导航层 */ --z-dropdown: 100; --z-dropdown-content: 110; --z-sticky: 200; --z-sticky-header: 210; --z-topbar: 250; --z-sidebar: 260; --z-mobile-nav: 270; /* 浮层 */ --z-popover: 300; --z-popover-content: 310; --z-tooltip: 350; --z-tooltip-arrow: 355; /* 遮罩与弹窗 */ --z-modal-backdrop: 400; --z-modal: 410; --z-drawer-backdrop: 420; --z-drawer: 430; /* 通知层 */ --z-toast: 500; --z-toast-container: 510; --z-notification: 550; --z-notification-stack: 555; /* 系统级 */ --z-command: 700; /* Command+K */ --z-command-backdrop: 690; --z-coachmark: 800; /* 引导提示 */ --z-fullscreen: 900; /* 全屏覆盖 */ --z-max: 9999; /* 已在 tokens.css 中定义的别名，此处仅做引用说明 */ /* --z-dropdown: 100; --z-sticky: 200; --z-topbar: 250; */ /* --z-modal: 400; --z-toast: 500; --z-tooltip: 600; */ } /* ============================================================ 6. 组件尺寸令牌 ============================================================ */ :root { /* 按钮 */ --btn-height-xs: 24px; --btn-height-sm: 32px; --btn-height-md: 40px; --btn-height-lg: 48px; --btn-height-xl: 56px; --btn-padding-x-xs: var(--space-2); --btn-padding-x-sm: var(--space-3); --btn-padding-x-md: var(--space-4); --btn-padding-x-lg: var(--space-6); --btn-padding-x-xl: var(--space-8); --btn-icon-size: 1.25em; --btn-icon-gap: var(--space-2); /* 输入框 */ --input-height-sm: 32px; --input-height-md: 40px; --input-height-lg: 48px; --input-padding-x: var(--space-3); --input-padding-y: var(--space-2); --input-icon-size: 1.125em; /* 卡片 */ --card-radius: var(--radius-lg); --card-border-width: 1px; --card-padding: var(--space-card-padding); /* 头像 */ --avatar-size-xs: 24px; --avatar-size-sm: 32px; --avatar-size-md: 40px; --avatar-size-lg: 48px; --avatar-size-xl: 64px; --avatar-size-2xl: 96px; /* 标签/徽章 */ --badge-height-sm: 18px; --badge-height-md: 22px; --badge-height-lg: 26px; --badge-padding-x: var(--space-2); /* 模态框 */ --modal-width-sm: 400px; --modal-width-md: 560px; --modal-width-lg: 720px; --modal-width-xl: 960px; --modal-width-full: 95vw; --modal-max-height: 85vh; /* 抽屉 */ --drawer-width-sm: 300px; --drawer-width-md: 400px; --drawer-width-lg: 560px; /* 表格 */ --table-cell-padding-x: var(--space-3); --table-cell-padding-y: var(--space-2); --table-header-height: 44px; --table-row-height: 48px; /* 进度条 */ --progress-height-sm: 4px; --progress-height-md: 8px; --progress-height-lg: 12px; /* Toast */ --toast-width: 360px; --toast-max-width: calc(100vw - var(--space-8)); /* 标签页 */ --tab-height: 40px; --tab-indicator-height: 2px; } /* ============================================================ 7. 表单令牌 ============================================================ */ :root { /* 边框 */ --form-border-color: var(--color-border); --form-border-color-hover: var(--color-text-tertiary); --form-border-color-focus: var(--color-accent); --form-border-color-error: var(--color-error); --form-border-color-success: var(--color-success); --form-border-width: 1px; /* 背景 */ --form-bg: var(--color-bg); --form-bg-disabled: var(--color-bg-tertiary); --form-bg-read-only: var(--color-bg-secondary); /* 文字 */ --form-text-color: var(--color-text-primary); --form-text-placeholder: var(--color-text-tertiary); --form-text-label: var(--color-text-primary); --form-text-hint: var(--color-text-secondary); --form-text-error: var(--color-error); --form-text-success: var(--color-success); /* 圆角 */ --form-radius: var(--radius-md); /* 过渡 */ --form-transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default); /* 焦点环 */ --form-focus-ring: 0 0 0 3px var(--primary-100); --form-focus-ring-error: 0 0 0 3px var(--error-100); } :root[data-theme="dark"] { --form-focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.20); --form-focus-ring-error: 0 0 0 3px rgba(248, 113, 113, 0.20); } /* ============================================================ 8. 语义化表面令牌 (Surface Tokens) 用于组件多层级表面色 ============================================================ */ :root { --surface-1: var(--color-bg); /* 最底层 - 页面背景 */ --surface-2: var(--color-bg-secondary); /* 卡片背景 */ --surface-3: var(--color-bg-tertiary); /* 嵌套卡片 / hover */ --surface-4: var(--color-bg); /* 浮层背景 */ --surface-overlay: rgba(0, 0, 0, 0.50); /* 遮罩 */ --surface-inverse: var(--color-text-primary); /* 反色表面 */ --text-on-inverse: var(--color-bg); } :root[data-theme="dark"] { --surface-1: var(--color-bg); --surface-2: var(--color-bg-secondary); --surface-3: var(--color-bg-tertiary); --surface-4: #232323; --surface-overlay: rgba(0, 0, 0, 0.70); --surface-inverse: #f5f5f5; --text-on-inverse: #0a0a0a; } /* ============================================================ 9. 响应式容器令牌 ============================================================ */ :root { --container-xs: 480px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; --content-max-width: 720px; /* 正文最大宽度（阅读舒适区） */ --form-max-width: 480px; /* 表单最大宽度 */ } /* ============================================================ 10. 过渡预设（组件级便捷组合） ============================================================ */ :root { /* 颜色过渡 */ --transition-color: color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default); /* 阴影过渡 */ --transition-shadow: box-shadow var(--duration-normal) var(--ease-default); /* 变换过渡 */ --transition-transform: transform var(--duration-normal) var(--ease-spring); /* 淡入淡出 */ --transition-opacity: opacity var(--duration-normal) var(--ease-default); /* 组合（颜色 + 阴影） */ --transition-color-shadow: var(--transition-color), var(--transition-shadow); /* 全属性（慎用，仅在复合动画场景） */ --transition-all: all var(--duration-normal) var(--ease-default); } /* ============================================================ 11. 减弱动画偏好 ============================================================ 批15 F5 清偿：本块收敛至 tokens-authoritative.css 的 @media (prefers-reduced-motion: reduce) 块（同值 0ms/linear）。 权威层最后加载并已补回同等语义，本文件不再重复定义。 */