tokens.css
1.94 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/*
* src/styles/tokens.css — Design Tokens
* 命名规范见 docs/04-技术规范.md § 2.5
* 色值锁定见 docs/06-UI交互规范.md § 四
*
* 命名格式：--color-<scope>-<role>-<state>
* <scope> 组件域：form / table-row / table-header / ...
* <role> 作用：bg（背景）/ fg（前景/字体）/ border
* <state> 状态：edit / readonly / hover / selected（无状态时省略）
*
* 约束：
* - 组件样式中只用 var(--color-xxx)，禁止硬编码 hex / rgba
* - 修改色值只改本文件，不允许在组件级覆盖
* - 新增 token 须先登记到 docs/06 § 4.1 / 4.2，再补到此处
*/
:root {
/* === 1. 全局调色板（与 Ant Design 主题对齐） === */
--color-primary: #1890ff;
--color-success: #52c41a;
--color-warning: #faad14;
--color-error: #ff4d4f;
--color-text: rgba(0, 0, 0, 0.85);
--color-text-secondary: rgba(0, 0, 0, 0.45);
--color-border: #d9d9d9;
--color-bg-base: #f0f2f5;
/* === 2. 组件级状态色（与 docs/06 § 4.2 一一对应） === */
/* form：输入框 / 备注框 / 时间框 / 下拉框共用 */
--color-form-bg-edit: #ffffff;
--color-form-bg-readonly: #f1f2f8;
--color-form-bg-hover: #f5f5f5; /* 仅下拉框使用 */
--color-form-fg: #000000;
/* table */
--color-table-row-bg-selected: #86d5fb;
--color-table-row-bg-hover: #fff7e6;
--color-table-row-bg-readonly: #f1f2f8; /* = rgb(241, 242, 248) */
--color-table-row-fg: #000000;
--color-table-header-bg: #f5f5f5;
--color-table-header-fg: rgba(0, 0, 0, 0.85); /* = #000000D9 */
/* === 3. Prototype shell tokens === */
--color-topbar-bg: #1f1f23;
--color-toolbar-bg: #2c2f36;
--color-toolbar-text: #e6e7ea;
--color-tab-active: #1e84e6;
--color-tab-text: #9aa0a8;
--color-field-bg-edit: #eaf3fe;
--color-field-label-req: #f04848;
--color-table-border: #e3e6eb;
--color-table-row-alt: #f7f8fa;
--color-filterbar-bg: #ffffff;
--color-nav-overlay-bg: #2b3137;
}