5b86842f65
- ThemePicker.vue 改 :deep() → :global() 写无 scoped 全局规则 (根因: EP el-popper 容器没有 [data-v-xxx] 属性,scoped 规则匹配不到) - tokens.scss 补 --el-popper-bg-color-light / --el-border-color-light / --el-fill-color-blank / --el-bg-color-overlay(EP 弹窗实际读这些) - 实测验证: 弹窗 bg rgb(255,255,255)→rgb(30,41,59) #1E293B dark ✅ 文字 rgb(51,65,85)→rgb(248,250,252) #F8FAFC dark ✅
124 lines
5.0 KiB
SCSS
124 lines
5.0 KiB
SCSS
// F006 设计 Token - 中性色 + 圆角 + 字体 + 阴影(主题无关)
|
|
// W5.x v2 Design Language 升级(2026-07-03)
|
|
// 改动:
|
|
// + --ease / --ease-out 动画曲线
|
|
// + --shadow-xl(毛玻璃下层用)
|
|
// + --text-xs ~ --text-3xl 8 级字号
|
|
// + --topbar-blur 顶栏毛玻璃
|
|
// + --brand-gradient 主按钮渐变
|
|
// W5.x.x 暗主题适配全局修复(2026-07-03):
|
|
// + 25+ 个 EP 文字色/填充色/边框色/popover 背景等派生色变量
|
|
// + 4 主题块通过 CSS 级联自动适配(都引用 var(--ink)/var(--surface) 等)
|
|
|
|
:root {
|
|
// ===== 圆角(沿用 v1.3) =====
|
|
--radius-sm: 6px;
|
|
--radius: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
--radius-pill: 9999px;
|
|
|
|
// ===== 字体(沿用) =====
|
|
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
|
|
|
|
// ===== 阴影 v2 加宽 =====
|
|
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
--shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
--shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
|
|
--shadow-xl: 0 20px 60px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.06);
|
|
|
|
// ===== Element Plus 重定向(沿用) =====
|
|
--el-color-primary: var(--brand);
|
|
--el-color-primary-light-3: var(--brand-soft);
|
|
--el-color-primary-light-5: var(--brand-soft);
|
|
--el-color-primary-light-7: var(--brand-soft);
|
|
--el-color-primary-light-8: var(--brand-soft);
|
|
--el-color-primary-light-9: var(--brand-soft);
|
|
--el-color-primary-dark-2: var(--brand-hover);
|
|
|
|
// ===== Element Plus 文字色派生(W5.x.x 暗主题适配全局修复) =====
|
|
// 让 el-breadcrumb / el-popover / el-tooltip / el-select / el-input placeholder
|
|
// 等所有用 --el-text-color-* 的 EP 组件,文字色都跟主题切换
|
|
--el-text-color-primary: var(--ink);
|
|
--el-text-color-regular: var(--ink-2);
|
|
--el-text-color-secondary: var(--ink-3);
|
|
--el-text-color-placeholder: var(--ink-4);
|
|
--el-text-color-disabled: var(--ink-4);
|
|
|
|
// ===== Element Plus 边框色派生 =====
|
|
--el-border-color: var(--border);
|
|
--el-border-color-light: var(--border);
|
|
--el-border-color-lighter: var(--border);
|
|
--el-border-color-extra-light: var(--border);
|
|
--el-border-color-dark: var(--border-strong);
|
|
--el-border-color-darker: var(--border-strong);
|
|
|
|
// ===== Element Plus 填充色派生 =====
|
|
--el-fill-color: var(--bg-soft);
|
|
--el-fill-color-light: var(--bg-soft);
|
|
--el-fill-color-lighter: var(--surface-2);
|
|
--el-fill-color-extra-light: var(--surface-2);
|
|
--el-fill-color-dark: var(--surface-2);
|
|
--el-fill-color-darker: var(--surface-2);
|
|
--el-fill-color-blank: var(--surface);
|
|
|
|
// ===== Element Plus 背景色派生(popover/tooltip/dropdown/modal 容器) =====
|
|
--el-bg-color: var(--surface);
|
|
--el-bg-color-page: var(--bg-soft);
|
|
--el-bg-color-overlay: var(--surface);
|
|
--el-popover-bg-color: var(--surface);
|
|
--el-popover-border-color: var(--border);
|
|
// ===== Element Plus Popper 容器(W5.x.x+1: 补 W5.x.x 漏的 popper bg) =====
|
|
// EP 2.x 弹窗实际读 --el-popper-bg-color-light(不是 --el-popper-bg-color)
|
|
// W5.x.x+1 v3 修根因: tokens 全部重定向到主题色,确保 dark 主题下弹窗是深底
|
|
--el-popper-bg-color: var(--surface);
|
|
--el-popper-bg-color-light: var(--surface);
|
|
--el-popper-border-color: var(--border);
|
|
--el-popper-title-text-color: var(--ink);
|
|
--el-popper-arrow-bg-color: var(--surface);
|
|
--el-popper-plain-bg-color: var(--surface);
|
|
--el-popper-padding: 12px;
|
|
// 弹窗 border 颜色 EP 实际读 --el-border-color-light
|
|
--el-border-color-light: var(--border);
|
|
--el-border-color-lighter: var(--border);
|
|
// 弹窗底层填充色
|
|
--el-fill-color-blank: var(--surface);
|
|
--el-bg-color-overlay: var(--surface);
|
|
--el-tooltip-bg-color: var(--ink);
|
|
--el-dropdown-bg-color: var(--surface);
|
|
--el-dropdown-border-color: var(--border);
|
|
--el-select-dropdown-bg-color: var(--surface);
|
|
--el-select-dropdown-border-color: var(--border);
|
|
--el-datepicker-bg-color: var(--surface);
|
|
--el-dialog-bg-color: var(--surface);
|
|
--el-message-bg-color: var(--surface);
|
|
--el-notification-bg-color: var(--surface);
|
|
|
|
// ===== Element Plus 遮罩 + 禁用 =====
|
|
--el-mask-color: rgba(0, 0, 0, 0.5);
|
|
--el-disabled-bg-color: var(--bg-soft);
|
|
--el-disabled-text-color: var(--ink-4);
|
|
--el-disabled-border-color: var(--border);
|
|
|
|
// ===== v2 新增:动画曲线 =====
|
|
--ease: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ease-out: cubic-bezier(0.0, 0, 0.2, 1);
|
|
|
|
// ===== v2 新增:字号 8 级(letter-spacing 收紧) =====
|
|
--text-xs: 11.5px;
|
|
--text-sm: 12.5px;
|
|
--text-base: 13.5px;
|
|
--text-md: 14.5px;
|
|
--text-lg: 16px;
|
|
--text-xl: 20px;
|
|
--text-2xl: 24px;
|
|
--text-3xl: 28px;
|
|
|
|
// ===== v2 新增:顶栏毛玻璃模糊半径 =====
|
|
--topbar-blur: blur(16px) saturate(1.5);
|
|
|
|
// ===== v2 新增:主按钮渐变(从主题 brand 自动组合) =====
|
|
--brand-gradient: linear-gradient(135deg, var(--brand), var(--brand-2));
|
|
}
|