067cad2120
- ui-demo/explore/：工作台风格的六轮方案（A–F、D2–D5），D5 为定稿样张 - tokens.css v0.2：墨色派生的中性浅灰作页面底色；圆角三档（6 / 8 / 12）；控件高 36；侧栏渐变与套餐标签变量；旧变量保留兼容 - design-system.md v0.2：页面框架（96px 墨色渐变侧栏、透明顶栏、内容区圆角）、只用功能图标、项目行「下一步 / 更多」列、少写说明 - decisions.md 记录 U5；AGENTS.md 与 design/README 同步 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
135 lines
6.9 KiB
CSS
135 lines
6.9 KiB
CSS
/* 标博士 · 界面设计变量（design tokens）v0.2 · 2026-11-03
|
||
* 规范说明见 docs/design/design-system.md；定稿样张见 docs/design/ui-demo/explore/workbench-d5.html。
|
||
* 只放变量，不放组件样式。前端不用带样式的 UI 框架（AR10），组件样式直接引用这些变量。
|
||
* 对比度一律按 WCAG 2.x 公式计算。v0.1 的注释数值以校样纸 #F5F6F3 为底，括号内为白底；
|
||
* v0.2 起页面底色改为 --c-n50 #F8F8F9（比校样纸更亮），对比度介于两者之间。
|
||
* v0.2（决策 U5）：页面改为白色主调 + 墨色派生的中性浅灰；圆角三档；控件高 36；墨色渐变窄侧栏。
|
||
*/
|
||
:root {
|
||
/* ---------- 基础色板：校样色系 ---------- */
|
||
--c-paper: #F5F6F3; /* 校样纸：页面底色 */
|
||
--c-white: #FFFFFF; /* 卡片、表格、输入框 */
|
||
--c-sunken: #ECEEEA; /* 表头、代码、凹陷区 */
|
||
--c-hover: #EEF0EC; /* 行悬停 */
|
||
--c-ink: #1D2733; /* 墨：正文、人工确认、主按钮 13.9 (15.1) */
|
||
--c-sub: #5C6670; /* 辅助灰：次要文字、「提示」级 5.4 (5.9) */
|
||
--c-muted: #7A838C; /* 只用于禁用文字与控件边框 3.6 (3.9)，不能用于正文 */
|
||
--c-rule: #D9DDD8; /* 装饰分隔线（不承担识别功能） */
|
||
--c-pencil: #2F5BD3; /* 蓝铅笔：AI 标注、出处、原文链接 5.4 (5.9) */
|
||
--c-pencil-strong: #244AB0;/* 蓝铅笔悬停 / 按下 */
|
||
--c-pencil-soft: #E7EDFB; /* 原句高亮底色 */
|
||
--c-fatal: #C4122F; /* 致命红：只用于「致命」问题 5.6 (6.0) */
|
||
--c-fatal-soft: #FBE9EC;
|
||
--c-ochre: #A66300; /* 赭：「重要」级的边框、图标、≥18px 文字 4.4 (4.8) */
|
||
--c-ochre-ink: #8A5200; /* 赭色小字（<18px） 5.9 (6.4) */
|
||
--c-ochre-soft: #FBF0DC;
|
||
--c-green: #2E6B4F; /* 定稿绿：人工确认署名 5.8 (6.3) */
|
||
--c-green-soft: #E5F0EA;
|
||
|
||
/* 中性浅灰（v0.2）：都由墨 #1D2733 按比例混白得到，不偏绿，不引入新色相 */
|
||
--c-n50: #F8F8F9; /* 墨 3%：页面底色、行 / 格悬停 */
|
||
--c-n100: #F1F2F3; /* 墨 6%：中性标签底、文字按钮悬停、进度槽 */
|
||
--c-nline: #E6E7E9; /* 墨 11%：卡片边框、发丝分隔线 */
|
||
|
||
/* 侧栏（v0.2）：墨色竖向渐变，下端混 18% 蓝铅笔得到深墨蓝；只作底色，不承担 AI 语义 */
|
||
--side-top: var(--c-ink);
|
||
--side-bottom: #203050;
|
||
--side-fg: #C4C7CA; /* 白 74% 混墨：未选中菜单 约 9:1 */
|
||
--side-fg-strong: var(--c-white);
|
||
--side-muted: #A0A4A9; /* 白 58% 混墨：侧栏小字 约 6:1 */
|
||
--side-hover: rgba(255, 255, 255, .07);
|
||
--side-active: rgba(255, 255, 255, .14);
|
||
--side-line: rgba(255, 255, 255, .12);
|
||
|
||
/* 套餐标签（v0.2）：只用于账户区的套餐标签，从赭色派生的金色阶梯；靠深浅区分档次 */
|
||
--plan-free-bg: rgba(255, 255, 255, .12);
|
||
--plan-pro-bg: rgba(166, 99, 0, .42);
|
||
--plan-pro-fg: #F4ECE0;
|
||
--plan-pro-line: rgba(177, 119, 32, .8);
|
||
--plan-ent-bg: #CEA973; /* 企业版：金色实底，墨色字 */
|
||
/* 印章红 #D9291C、藏青 #1C2554 只属于 logo，不进界面变量 */
|
||
|
||
/* ---------- 语义色 ---------- */
|
||
--bg-page: var(--c-n50); /* v0.2：原为校样纸 --c-paper */
|
||
--bg-surface: var(--c-white);
|
||
--bg-sunken: var(--c-n100); /* v0.2：原为 --c-sunken */
|
||
--bg-hover: var(--c-n50); /* v0.2：原为 --c-hover */
|
||
--text-primary: var(--c-ink);
|
||
--text-secondary: var(--c-sub);
|
||
--text-disabled: var(--c-muted);
|
||
--text-on-dark: var(--c-white);
|
||
--border-subtle: var(--c-nline); /* v0.2：原为 --c-rule */
|
||
--border-control: var(--c-muted); /* 输入框等控件边框，≥3:1（WCAG 1.4.11） */
|
||
--border-strong: var(--c-ink);
|
||
--focus-ring: var(--c-ink);
|
||
|
||
--ai: var(--c-pencil);
|
||
--ai-strong: var(--c-pencil-strong);
|
||
--ai-soft: var(--c-pencil-soft);
|
||
--human: var(--c-ink);
|
||
--confirmed: var(--c-green);
|
||
--confirmed-soft: var(--c-green-soft);
|
||
|
||
--sev-fatal: var(--c-fatal);
|
||
--sev-fatal-soft: var(--c-fatal-soft);
|
||
--sev-major: var(--c-ochre);
|
||
--sev-major-text: var(--c-ochre-ink);
|
||
--sev-major-soft: var(--c-ochre-soft);
|
||
--sev-hint: var(--c-sub);
|
||
--sev-hint-soft: var(--c-sunken);
|
||
|
||
--warn: var(--c-ochre); /* 系统提醒、表单错误、额度预警：不用红 */
|
||
--warn-text: var(--c-ochre-ink);
|
||
--warn-soft: var(--c-ochre-soft);
|
||
|
||
/* ---------- 字体 ---------- */
|
||
--font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;
|
||
--font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
|
||
--font-figures: "Barlow Semi Condensed", var(--font-sans);
|
||
|
||
/* 字阶：字号 / 行高（px）。正文 14/22 与 TDesign、Ant Design 一致 */
|
||
--fs-caption: 12px; --lh-caption: 20px; /* 时间戳、脚注；最小字号 */
|
||
--fs-body: 14px; --lh-body: 22px; /* 界面正文 */
|
||
--lh-read: 24px; /* 原文引用等成段阅读：14/24 */
|
||
--fs-title: 16px; --lh-title: 24px; /* 问题标题、卡片标题、区块标题 */
|
||
--fs-h2: 20px; --lh-h2: 28px; /* 页面标题（宋体） */
|
||
--fs-h1: 24px; --lh-h1: 32px; /* 工作台、报告标题（宋体） */
|
||
--fs-figure: 30px; --lh-figure: 36px; /* 统计数字（Barlow） */
|
||
--fw-regular: 400;
|
||
--fw-medium: 500;
|
||
--fw-bold: 600;
|
||
|
||
/* ---------- 间距：4px 基准 ---------- */
|
||
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
|
||
--sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
|
||
|
||
/* ---------- 圆角、线、阴影 ---------- */
|
||
--radius-tag: 6px; /* 标签、问题级别标签（v0.2） */
|
||
--radius-ctl: 8px; /* 按钮、输入框、菜单项、下拉（v0.2） */
|
||
--radius-card: 12px; /* 卡片、对话框、浮层、内容区左上角（v0.2） */
|
||
--radius-sm: var(--radius-ctl); /* 兼容 v0.1 的写法，新代码用上面三个 */
|
||
--radius-md: var(--radius-card);
|
||
--line: 1px;
|
||
--line-sev: 1.5px; /* 「重要」标签描边 */
|
||
--shadow-overlay: 0 4px 16px rgba(29, 39, 51, .14), 0 1px 3px rgba(29, 39, 51, .10);
|
||
|
||
/* ---------- 尺寸 ---------- */
|
||
--control-h: 36px; /* 默认按钮、输入框（v0.2：原 32） */
|
||
--control-h-sm: 32px; /* 表格行内、筛选标签（v0.2：原 28） */
|
||
--control-h-lg: 40px; /* 登录、空状态主操作 */
|
||
--rail-w: 96px; /* 侧栏（v0.2）：单一状态，上图标下文字，不折叠 */
|
||
--topbar-h: 56px; /* 顶栏：透明，滚动后半透明白 + 毛玻璃 */
|
||
--sidebar-w: 216px; /* v0.1 宽侧栏，仅旧原型使用，重刷后删除 */
|
||
--margin-note-w: 280px; /* 页边批注栏 */
|
||
--content-max: 1200px;
|
||
|
||
/* ---------- 动效 ---------- */
|
||
--dur-fast: 120ms;
|
||
--dur-base: 200ms;
|
||
--ease: cubic-bezier(.2, 0, 0, 1);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
:root { --dur-fast: 0ms; --dur-base: 0ms; }
|
||
}
|