/* ============================================================ 明账工程 · 主题令牌(Design Tokens) 单一事实来源:docs/UI风格规范v2.html(莫兰迪高级灰) 纪律(见 CLAUDE.md「视觉与界面规范」): · 所有颜色 / 圆角 / 阴影一律在此定义,组件只准 var(--token) 引用, **禁止在组件里写死色值**(#xxx / rgba(...))。 · 警示语义色(成功/警告/危险)必须保持辨识度,不得为"高级感"调淡或灰化。 主题机制:令牌挂在 :root[data-theme="..."] 下,切换 即换肤。 目前只交付一套「morandi」;新增主题 = 复制一份令牌块改值,组件代码零改动。 ============================================================ */ /* 默认主题(未指定 data-theme 时也能正常显示,避免闪白/裸样式) */ :root, :root[data-theme="morandi"] { /* ── 画布与水彩晕染 ── */ --paper: #f3f2ef; /* 暖纸灰画布 */ --wash-blue: #e7e8ea; /* 高级灰水洗 */ --wash-warm: #ece8e1; /* 暖调水洗 */ --paper-2: #f2efe9; /* 次级画布(侧栏/分区底) */ --paper-3: #efece6; /* 三级画布 */ --wash-cool: #f4f6f8; /* 冷调水洗 */ /* ── 高级灰单色阶梯(主色相,唯一装饰色) ── */ --g900: #3a3f46; --g700: #585d64; --g600: #6a6f78; --g500: #82868d; --g300: #b4b7bc; --g100: #e4e5e7; --g50: #f1f1f2; /* ── 中性 / 表面 ── */ --card: #fdfcfa; --surface-alt: #faf9f6; /* 表头、次级表面 */ --glass: rgba(253, 252, 250, .62); --line: #e6e2da; /* 主分隔线 */ --line-soft: #f0ede7; /* 行内细分隔线 */ --white: #ffffff; /* ── 文字 ── */ --title: #2e3034; --ink: #3a3d42; --muted: #94969b; --label: #707887; /* 表单标签 */ --accent-ink: #4c5a6e; /* 强调文字(链接/重点) */ /* ── 语义色(莫兰迪化,但必须一眼可辨;仅用于状态,不作装饰) ── */ --danger: #b45a4d; --danger-bg: #f4e6e2; --danger-border: #e9cfc8; --danger-ink: #7c4038; --warn: #b5884d; --warn-bg: #f4ecdc; --warn-border: #e9dcc2; --warn-ink: #7c5f38; --ok: #6f9082; --ok-bg: #e6efe9; --ok-border: #d2e2d8; --ok-border-soft: #cfe0d7; --ok-ink: #4c6a5c; /* 主色(交互控件的默认色相) */ --primary: #585d64; /* ── 形态:圆角 ── */ --r-lg: 18px; --r-md: 13px; --r-sm: 9px; /* ── 形态:阴影 ── */ --sh-1: 0 2px 8px rgba(70, 74, 80, .07); --sh-2: 0 10px 30px rgba(70, 74, 80, .12), 0 2px 6px rgba(70, 74, 80, .06); --sh-3: 0 18px 50px rgba(58, 63, 70, .16); --sh-btn: 0 4px 14px rgba(70, 74, 80, .28); --sh-btn-hover: 0 8px 20px rgba(70, 74, 80, .34); --sh-btn-lg: 0 6px 18px rgba(70, 74, 80, .32); --sh-btn-lg-hover: 0 10px 24px rgba(70, 74, 80, .38); --sh-modal: 0 18px 50px rgba(46, 48, 52, .22); --backdrop: rgba(46, 48, 52, .42); /* 模态遮罩 */ /* ── 玻璃/高光叠层(hero、侧栏等半透明白) ── */ --glass-85: rgba(255, 255, 255, .85); --glass-80: rgba(255, 255, 255, .80); --glass-75: rgba(255, 255, 255, .75); --glass-70: rgba(255, 255, 255, .70); --glass-60: rgba(255, 255, 255, .60); --glass-50: rgba(255, 255, 255, .50); --glass-22: rgba(255, 255, 255, .22); --glass-16: rgba(255, 255, 255, .16); --glass-14: rgba(255, 255, 255, .14); --glass-warm-12: rgba(239, 233, 225, .12); /* ── 字体 ── */ --f-sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --f-num: "New York", "Songti SC", Georgia, "Times New Roman", serif; } /* ------------------------------------------------------------ 新增主题的写法(示例,当前未启用): :root[data-theme="dark"] { --paper:#1c1e21; --card:#25282c; ... } 组件不用改一行代码——它们只认 var(--token)。 ------------------------------------------------------------ */