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:
parent
8ad3650dd3
commit
fd801455f0
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user