|
@@ -6,6 +6,11 @@
|
|
|
* 或经 Vite 的 CSS preprocessor 全局注入);
|
|
* 或经 Vite 的 CSS preprocessor 全局注入);
|
|
|
* - Element Plus 主题变量覆盖写在 element-plus-theme.scss(同名 token 映射 EP CSS 变量)。
|
|
* - Element Plus 主题变量覆盖写在 element-plus-theme.scss(同名 token 映射 EP CSS 变量)。
|
|
|
* 新增 token 规则:只增不删(旧 token 可能被多页面引用);命名 --app-{类别}-{语义}。
|
|
* 新增 token 规则:只增不删(旧 token 可能被多页面引用);命名 --app-{类别}-{语义}。
|
|
|
|
|
+ *
|
|
|
|
|
+ * 品牌设计源(2026-11-09 定稿,v1.1 按 Logo 取样):
|
|
|
|
|
+ * 工作区 frontend-pc/00-design/design-tokens.md「青屿」——
|
|
|
|
|
+ * 墨蓝侧栏(结构) + 微暖纸白(工作面) + 青蓝主音 + 柠檬黄点缀。
|
|
|
|
|
+ * 本节新增的 --app-brand-* / --app-color-* 为该设计源落地;上方基础 token 保持原值不动(只增不删)。
|
|
|
*/
|
|
*/
|
|
|
:root {
|
|
:root {
|
|
|
/* 文本 */
|
|
/* 文本 */
|
|
@@ -32,4 +37,47 @@
|
|
|
--app-radius-sm: 4px;
|
|
--app-radius-sm: 4px;
|
|
|
--app-radius-md: 6px;
|
|
--app-radius-md: 6px;
|
|
|
--app-shadow-card: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
|
|
--app-shadow-card: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
|
|
|
|
|
+
|
|
|
|
|
+ /* ============================================================
|
|
|
|
|
+ * 品牌 6 色(Logo 取样,design-tokens.md §0)
|
|
|
|
|
+ * ============================================================ */
|
|
|
|
|
+ --app-brand-teal: #4bb8c8; /* 青蓝·品牌主色(角色身体) */
|
|
|
|
|
+ --app-brand-teal-deep: #1f7a8c; /* 深青蓝·主按钮/链接(白字对比 4.9:1) */
|
|
|
|
|
+ --app-brand-navy: #1e2a54; /* 墨蓝·结构色(侧栏/登录外框,手柄色) */
|
|
|
|
|
+ --app-brand-indigo: #4c62b3; /* 靛蓝·次强调(放大镜边框) */
|
|
|
|
|
+ --app-brand-yellow: #ffe81a; /* 柠檬黄·点缀(角标/选中点,背景色) */
|
|
|
|
|
+ --app-brand-sun: #ffd75e; /* 暖橙黄·hover 浅底(云朵色) */
|
|
|
|
|
+
|
|
|
|
|
+ /* 派生语义(同色系浅底深字,正文对比 ≥ 4.5:1) */
|
|
|
|
|
+ --app-color-page: #f6f7f2; /* 内容区底(微暖纸白,非纯白) */
|
|
|
|
|
+ --app-color-card: #ffffff; /* 卡片底 */
|
|
|
|
|
+ --app-color-text: #2a3242; /* 正文(石板灰蓝,呼应瞳孔色) */
|
|
|
|
|
+ --app-color-text-2: #5d6672; /* 次要文字 */
|
|
|
|
|
+ --app-color-text-3: #9aa3ad; /* 占位/时间 */
|
|
|
|
|
+ --app-color-border: #e3e7ea; /* 分割线 */
|
|
|
|
|
+ --app-color-border-strong: #cbd2d8; /* 输入框框线 */
|
|
|
|
|
+ --app-color-teal-soft: #e4f3f6; /* 激活菜单底/选中卡底(主色浅底) */
|
|
|
|
|
+ --app-color-teal-ink: #14606f; /* 浅底上的小字(深青蓝) */
|
|
|
|
|
+ --app-color-yellow-ink: #3a3200; /* 黄色块上的文字 */
|
|
|
|
|
+
|
|
|
|
|
+ /* 侧栏(墨蓝域) */
|
|
|
|
|
+ --app-side-bg: #1e2a54;
|
|
|
|
|
+ --app-side-text: #e8ecf7;
|
|
|
|
|
+ --app-side-dim: #93a0c8;
|
|
|
|
|
+ --app-side-active: rgba(255, 255, 255, 0.1);
|
|
|
|
|
+
|
|
|
|
|
+ /* 状态色(数据语义,非装饰) */
|
|
|
|
|
+ --app-color-success: #2f855a;
|
|
|
|
|
+ --app-color-success-soft: #e7f3ed;
|
|
|
|
|
+ --app-color-warning: #b26a0b;
|
|
|
|
|
+ --app-color-warning-soft: #f8efe0;
|
|
|
|
|
+ --app-color-danger: #c23a2b;
|
|
|
|
|
+ --app-color-danger-soft: #f9e9e5;
|
|
|
|
|
+
|
|
|
|
|
+ /* 涨跌(中国财务惯例·强制:涨红跌绿) */
|
|
|
|
|
+ --app-num-up: #c23a2b;
|
|
|
|
|
+ --app-num-down: #2f855a;
|
|
|
|
|
+
|
|
|
|
|
+ /* 浮层阴影(仅 dialog/dropdown/popover,卡片无阴影) */
|
|
|
|
|
+ --app-shadow-float: 0 8px 24px rgba(30, 42, 84, 0.14);
|
|
|
}
|
|
}
|