feat(system): 全局品牌 token 迁移到靛蓝轻质感视觉体系

- 主色改靛蓝 #2E4BA8(白字对比 7.5:1),EP 色阶按混合公式重算
- 中性灰白体系:雾灰底/纸白/半透明界线/三级墨色文字
- 旧 token 名保留映射(深水青→冷墨、金色→靛蓝),存量引用平滑过渡,迁移完成后移除
- 设计依据:docs/design/视觉方向预览.html(2026-10-12 确认)

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
liuwenxin 2026-10-12 21:47:59 +08:00
parent 8ad3650dd3
commit fd801455f0

View File

@ -2,32 +2,46 @@
:root { :root {
/* /*
* 品牌色:与登录页视觉体系同一套(原为登录页 scoped 局部变量,布局框架 * 品牌色(2026-10-12 视觉方向:企业级扁平 · 轻质感 · 靛蓝点缀)。
* 与系统管理页面共用后提升为全局 token)。 * 靛蓝只作重点点缀(主按钮/链接/焦点/当前菜单),大面积用中性灰白。
* 金色分两档:亮金只用于深色底、深金只用于浅色底,保证两处对比度都达标。 * 设计预览与规范:docs/design/视觉方向预览.html
*/ */
--ys-ink-900: #061a22; --ys-indigo: #2e4ba8;
--ys-ink-800: #0a2833; --ys-indigo-deep: #223a85;
--ys-ink-700: #0f3646; --ys-indigo-wash: #edf1fa;
--ys-ink-600: #1a4f63; --ys-paper: #ffffff;
--ys-gold-bright: #c9a227; --ys-mist: #f4f5f8;
--ys-gold-deep: #8f6520; --ys-line: rgba(28, 35, 51, 0.09);
--ys-paper: #fafaf7; --ys-ink: #1c2333;
--ys-text: #16262d; --ys-ink-2: #5b6577;
--ys-muted: #6b7b84; --ys-ink-3: #9aa3b2;
/* /*
* Element Plus 主色 = 赭金(浅色底配白字约 6.2:1)。 * 旧 token 名保留映射(BasicLayout / 登录页存量引用,值迁移到新体系:
* 深水青 → 冷墨系、金色 → 靛蓝系),存量页面迁移完成后移除。
*/
--ys-ink-900: #16203a;
--ys-ink-800: #1c2333;
--ys-ink-700: #242e4a;
--ys-ink-600: #3a4a6e;
--ys-gold-bright: #6d81c2;
--ys-gold-deep: #2e4ba8;
--ys-text: #1c2333;
--ys-muted: #5b6577;
/*
* Element Plus 主色 = 靛蓝(白字对比约 7.5:1)。
* 色阶为按 Element Plus 公式「主色与白色混合」预先算好的静态值 —— * 色阶为按 Element Plus 公式「主色与白色混合」预先算好的静态值 ——
* 不用 color-mix(),避免依赖较新的浏览器特性。 * 不用 color-mix(),避免依赖较新的浏览器特性。
*/ */
--el-color-primary: #8f6520; --el-color-primary: #2e4ba8;
--el-color-primary-light-3: #b19363; --el-color-primary-light-3: #6d81c2;
--el-color-primary-light-5: #c7b290; --el-color-primary-light-5: #97a5d4;
--el-color-primary-light-7: #ddd1bc; --el-color-primary-light-7: #c0c9e5;
--el-color-primary-light-8: #e9e0d2; --el-color-primary-light-8: #d5dbee;
--el-color-primary-light-9: #f4f0e9; --el-color-primary-light-9: #eaedf6;
--el-color-primary-dark-2: #72511a; --el-color-primary-dark-2: #253c86;
} }
* { * {
@ -46,8 +60,8 @@ body {
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', Arial, sans-serif; 'Microsoft YaHei', Arial, sans-serif;
font-size: 14px; font-size: 14px;
color: #303133; color: var(--ys-ink);
background-color: #f5f7fa; background-color: var(--ys-mist);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }