@teamix-evo/skills 0.12.0 → 0.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/teamix-evo-design-opentrek/SKILL.md +24 -0
- package/src/teamix-evo-design-opentrek/foundations.md +11 -11
- package/src/teamix-evo-design-opentrek/rules/design-tokens.css +223 -218
- package/src/teamix-evo-design-opentrek/rules/design-tokens.json +10 -32
- package/src/teamix-evo-design-uni-manager/SKILL.md +25 -1
package/package.json
CHANGED
|
@@ -171,6 +171,30 @@ description: |
|
|
|
171
171
|
|
|
172
172
|
> 所有路径共享的硬约束。生成代码时强制遵守，违反即不合规。Step 级 Token 用法详见 [generation-flow.md](./generation-flow.md) Step 6。
|
|
173
173
|
|
|
174
|
+
### 6.0 Token 合规确认协议（最高优先级）
|
|
175
|
+
|
|
176
|
+
当用户提供的设计数值（颜色、间距、圆角、阴影、字号等）不在当前 `@teamix-evo/tokens` 已注册的 token 中时，AI **禁止**直接使用该字面量或试图绕过 lint 规则。
|
|
177
|
+
|
|
178
|
+
**正确流程**：
|
|
179
|
+
|
|
180
|
+
1. **识别** — 发现用户给出的值不在 token 体系中
|
|
181
|
+
2. **告知** — 明确告知用户"该值不在当前 token 中定义"
|
|
182
|
+
3. **建议** — 列出最接近的已有 token 名称、值和用途
|
|
183
|
+
4. **确认** — 让用户选择：
|
|
184
|
+
- A. 使用最接近的已有 token（告知具体 Tailwind class，如 `text-muted-foreground`）
|
|
185
|
+
- B. 在 `@teamix-evo/tokens` 中注册该新值（需确认语义命名和适用场景）
|
|
186
|
+
5. **执行** — 按用户确认的方案执行
|
|
187
|
+
|
|
188
|
+
**绝对禁止**：
|
|
189
|
+
|
|
190
|
+
- ❌ 直接使用 hex/rgb 字面量（无论 className、style prop、color prop 还是 CSS 变量形式）
|
|
191
|
+
- ❌ 用 `style={{ color: '#xxx' }}` 绕过 lint 检查
|
|
192
|
+
- ❌ 添加 eslint-disable 注释绕过颜色/arbitrary-value 规则
|
|
193
|
+
- ❌ 以"demo 文件"为借口跳过 token 合规
|
|
194
|
+
- ❌ 不问用户就自行决定"接受 lint 警告"
|
|
195
|
+
|
|
196
|
+
> 此规则适用于所有数值类型。只要不在 token 体系中注册的值，一律走确认流程。
|
|
197
|
+
|
|
174
198
|
### 6.1 组件选用优先级（不得跳级）
|
|
175
199
|
|
|
176
200
|
```
|
|
@@ -39,17 +39,17 @@
|
|
|
39
39
|
|
|
40
40
|
### 2.1 字号阶梯（9 档）
|
|
41
41
|
|
|
42
|
-
| Token | rem | 用途
|
|
43
|
-
| ----------- | ----- |
|
|
44
|
-
| `text-xs` | 0.75 |
|
|
45
|
-
| `text-sm` | 0.875 |
|
|
46
|
-
| `text-base` | 1.0 |
|
|
47
|
-
| `text-lg` | 1.125 |
|
|
48
|
-
| `text-xl` | 1.25 |
|
|
49
|
-
| `text-2xl` | 1.5 | 页面 H2
|
|
50
|
-
| `text-3xl` | 1.875 | 页面 H1
|
|
51
|
-
| `text-4xl` | 2.25 | 营销/Dashboard 数字大屏
|
|
52
|
-
| `text-5xl` | 3.0 | Hero / 数据看板核心指标
|
|
42
|
+
| Token | rem | OP 命名 | 用途 |
|
|
43
|
+
| ----------- | ----- | ---------------- | ------------------------------------------------ |
|
|
44
|
+
| `text-xs` | 0.75 | --font-size-base | 正文/标签/脚注/输入框/表格/Badge/分页/页面副标题 |
|
|
45
|
+
| `text-sm` | 0.875 | --font-size-lg | 强调正文/弹窗标题/抽屉标题/Tab |
|
|
46
|
+
| `text-base` | 1.0 | --font-size-xl | 小标题、卡片标题、区块标题 |
|
|
47
|
+
| `text-lg` | 1.125 | --font-size-2xl | 页面主标题、PageHeader 面包屑层级 |
|
|
48
|
+
| `text-xl` | 1.25 | — | 区块大标题 |
|
|
49
|
+
| `text-2xl` | 1.5 | — | 页面 H2 |
|
|
50
|
+
| `text-3xl` | 1.875 | — | 页面 H1 |
|
|
51
|
+
| `text-4xl` | 2.25 | — | 营销/Dashboard 数字大屏 |
|
|
52
|
+
| `text-5xl` | 3.0 | — | Hero / 数据看板核心指标 |
|
|
53
53
|
|
|
54
54
|
### 2.2 字重（4 档）
|
|
55
55
|
|
|
@@ -26,245 +26,246 @@
|
|
|
26
26
|
* Brand / 主色（#0055EE 深蓝，真实色相 218.6°）
|
|
27
27
|
* 实测 #0055EE 的 HSL ≈ hsl(218.6, 100%, 46.7%)，以实际色值为准。
|
|
28
28
|
* ======================================== */
|
|
29
|
-
--color-primary: 218.6 100% 46.7%;
|
|
30
|
-
--color-primary-foreground: 0 0% 100%;
|
|
31
|
-
--color-primary-hover: 218.6 100% 42%;
|
|
32
|
-
--color-primary-pressed: 218.6 100% 37.5%;
|
|
33
|
-
--color-primary-glow: 226.9 100% 68.6%;
|
|
29
|
+
--color-primary: 218.6 100% 46.7%; /* #0055EE 主按钮、链接、选中态、聚焦态边框、行动点、高亮 */
|
|
30
|
+
--color-primary-foreground: 0 0% 100%; /* #FFFFFF 主色上的前景文字 */
|
|
31
|
+
--color-primary-hover: 218.6 100% 42%; /* #004CD6 主按钮 hover 态 */
|
|
32
|
+
--color-primary-pressed: 218.6 100% 37.5%; /* #0044BF 主按钮 pressed 态 */
|
|
33
|
+
--color-primary-glow: 226.9 100% 68.6%; /* #5F82FF 主色光晕 / 渐变起始（sidebar Gradient） */
|
|
34
34
|
|
|
35
35
|
/* ========================================
|
|
36
36
|
* Accent / 辅助色（MasterGuide 提取）
|
|
37
37
|
* 用途：UI 强调色、图标、标签、次要操作
|
|
38
38
|
* 排序：蓝 → 紫 → 杏 → 靛 → 绿 → 洋红 → 青 → 橙 → 莓 → 橄榄
|
|
39
39
|
* ======================================== */
|
|
40
|
-
--color-accent-blue: 217.4 92.8% 67.5%;
|
|
41
|
-
--color-accent-violet: 261.8 100% 74.1%;
|
|
42
|
-
--color-accent-apricot: 38.1 95.9% 62
|
|
43
|
-
--color-accent-indigo: 238
|
|
44
|
-
--color-accent-green: 140.2 43.7% 52
|
|
45
|
-
--color-accent-magenta: 297.6 66.1% 62.9%;
|
|
46
|
-
--color-accent-turquoise: 186.1 98.9% 37.1%;
|
|
47
|
-
--color-accent-orange: 21.2 89.9% 64.9%;
|
|
48
|
-
--color-accent-berry: 341.2 80.1% 66.5%;
|
|
49
|
-
--color-accent-olive: 84.1 51.8% 52
|
|
40
|
+
--color-accent-blue: 217.4 92.8% 67.5%; /* #5F99F9 */
|
|
41
|
+
--color-accent-violet: 261.8 100% 74.1%; /* #AB7BFF */
|
|
42
|
+
--color-accent-apricot: 38.1 95.9% 62%; /* #CF8A1C */
|
|
43
|
+
--color-accent-indigo: 238 100% 76.7%; /* #888BFF */
|
|
44
|
+
--color-accent-green: 140.2 43.7% 52%; /* #4CB36F */
|
|
45
|
+
--color-accent-magenta: 297.6 66.1% 62.9%; /* #DA62DF */
|
|
46
|
+
--color-accent-turquoise: 186.1 98.9% 37.1%; /* #33AFA9 */
|
|
47
|
+
--color-accent-orange: 21.2 89.9% 64.9%; /* #EF702C */
|
|
48
|
+
--color-accent-berry: 341.2 80.1% 66.5%; /* #EE6590 */
|
|
49
|
+
--color-accent-olive: 84.1 51.8% 52%; /* #7BAD30 */
|
|
50
50
|
|
|
51
51
|
/* ========================================
|
|
52
52
|
* Gray / 灰色完整色阶（v7.4 重构 — 合并整合 + 反白色新增）
|
|
53
53
|
* 色相统一冷灰调（210°/216°/218°/220°），8 级语义分层
|
|
54
54
|
* ======================================== */
|
|
55
|
-
--color-gray-primary: 220 9% 7%;
|
|
56
|
-
--color-gray-primary-foreground: 210 33% 99%;
|
|
57
|
-
--color-gray-secondary-foreground: 216 4% 26%;
|
|
58
|
-
--color-muted-foreground: 216 2% 45%;
|
|
59
|
-
--color-gray-disabled: 210 3% 63%;
|
|
60
|
-
--color-gray-line: 210 9% 91%;
|
|
61
|
-
--color-gray-sidebar-accent: 210 12% 93%;
|
|
62
|
-
--color-gray-muted: 220 18% 97%;
|
|
63
|
-
--color-gray-white: 0 0% 100%;
|
|
55
|
+
--color-gray-primary: 220 9% 7%; /* #101113 主要文字、大标题、sidebar 激活文字、顶部导航背景 */
|
|
56
|
+
--color-gray-primary-foreground: 210 33% 99%; /* #FBFCFD 主题反白色 / 侧边栏反白文字色 */
|
|
57
|
+
--color-gray-secondary-foreground: 216 4% 26%; /* #414346 次要文字颜色 */
|
|
58
|
+
--color-muted-foreground: 216 2% 45%; /* #717376 弱化文字色（替代旧 --gray-tertiary） */
|
|
59
|
+
--color-gray-disabled: 210 3% 63%; /* #9DA0A3 禁用文字颜色、输入框激活态 */
|
|
60
|
+
--color-gray-line: 210 9% 91%; /* #E6E8EA 描边色、分割线、卡片边框（合并旧 --gray-border + --color-gray-line） */
|
|
61
|
+
--color-gray-sidebar-accent: 210 12% 93%; /* #ECEEF0 sidebar 激活态背景 */
|
|
62
|
+
--color-gray-muted: 220 18% 97%; /* #F5F6F8 表单禁用态色、目录激活背景色、表头颜色、页面背景、消息填充（合并旧 --gray-bg-dark + --gray-bg + --gray-fill） */
|
|
63
|
+
--color-gray-white: 0 0% 100%; /* #FFFFFF 纯白 */
|
|
64
64
|
|
|
65
65
|
/* ========================================
|
|
66
66
|
* Legacy 别名（保留兼容旧引用，不新增使用）
|
|
67
67
|
* ======================================== */
|
|
68
|
-
--gray-title: 220 9% 7%;
|
|
69
|
-
--gray-secondary: 216 4% 26%;
|
|
70
|
-
--gray-tertiary: 216 2% 45%;
|
|
71
|
-
--gray-border: 210 9% 91%;
|
|
72
|
-
--gray-fill: 220 18% 97%;
|
|
73
|
-
--gray-bg-dark: 220 18% 97%;
|
|
74
|
-
--gray-bg: 220 18% 97%;
|
|
68
|
+
--gray-title: 220 9% 7%; /* #101113 */
|
|
69
|
+
--gray-secondary: 216 4% 26%; /* #414346 */
|
|
70
|
+
--gray-tertiary: 216 2% 45%; /* #717376 */
|
|
71
|
+
--gray-border: 210 9% 91%; /* #E6E8EA */
|
|
72
|
+
--gray-fill: 220 18% 97%; /* #F5F6F8 */
|
|
73
|
+
--gray-bg-dark: 220 18% 97%; /* #F5F6F8 */
|
|
74
|
+
--gray-bg: 220 18% 97%; /* #F5F6F8 */
|
|
75
75
|
|
|
76
76
|
/* ========================================
|
|
77
77
|
* 语义映射（shadcn 标准）
|
|
78
78
|
* ======================================== */
|
|
79
|
-
--color-foreground: 220 9% 7%;
|
|
80
|
-
--page-title: 220 9% 7%;
|
|
81
|
-
--color-border: 210 9% 91%;
|
|
82
|
-
--color-input: 210 9% 91%;
|
|
83
|
-
--color-ring: 218.6 100% 46.7%;
|
|
79
|
+
--color-foreground: 220 9% 7%; /* #101113 shadcn 主前景文字（→ --color-gray-primary） */
|
|
80
|
+
--page-title: 220 9% 7%; /* #101113 页面标题色（v7.4 起合并 → --color-gray-primary） */
|
|
81
|
+
--color-border: 210 9% 91%; /* #E6E8EA shadcn 标准边框 token（→ --color-gray-line），区别于 colorMapping.border 语义引用 */
|
|
82
|
+
--color-input: 210 9% 91%; /* #E6E8EA shadcn input 边框色（→ --color-gray-line） */
|
|
83
|
+
--color-ring: 218.6 100% 46.7%; /* #0055EE shadcn focus ring（→ --color-primary） */
|
|
84
84
|
|
|
85
85
|
/* ========================================
|
|
86
86
|
* Background
|
|
87
87
|
* ======================================== */
|
|
88
|
-
--color-background: 220 18% 97%;
|
|
89
|
-
--color-background-dark: 216 42.9% 93.1%;
|
|
90
|
-
--color-background-panel: 220 27.3% 97.8%;
|
|
91
|
-
--background-end: 220 18% 97%;
|
|
88
|
+
--color-background: 220 18% 97%; /* #F5F6F8 页面级背景 */
|
|
89
|
+
--color-background-dark: 216 42.9% 93.1%; /* #E6ECF5 导航经过色（legacy） */
|
|
90
|
+
--color-background-panel: 220 27.3% 97.8%; /* #F8F9FB 画布配置面板背景 */
|
|
91
|
+
--background-end: 220 18% 97%; /* #F5F6F8 页面背景渐变结束色（与 --color-background 一致） */
|
|
92
92
|
|
|
93
93
|
/* ========================================
|
|
94
94
|
* Card / Popover / Secondary / Accent
|
|
95
95
|
* ======================================== */
|
|
96
|
-
--color-card: 0 0% 100%;
|
|
97
|
-
--color-card-foreground: 220 9% 7%;
|
|
98
|
-
--color-popover: 0 0% 100%;
|
|
99
|
-
--color-popover-foreground: 220 9% 7%;
|
|
100
|
-
--color-secondary: 220 18% 97%;
|
|
101
|
-
--color-secondary-foreground: 220 9% 7%;
|
|
102
|
-
--color-muted: 220 18% 97%;
|
|
103
|
-
--color-accent: 220 18% 97%;
|
|
104
|
-
--color-accent-foreground: 220 9% 7%;
|
|
96
|
+
--color-card: 0 0% 100%; /* #FFFFFF 卡片与弹窗背景、输入框背景 */
|
|
97
|
+
--color-card-foreground: 220 9% 7%; /* #101113 卡片上的前景文字（→ --color-gray-primary） */
|
|
98
|
+
--color-popover: 0 0% 100%; /* #FFFFFF 浮层（Popover/Dropdown）背景 */
|
|
99
|
+
--color-popover-foreground: 220 9% 7%; /* #101113 浮层文字色（→ --color-gray-primary） */
|
|
100
|
+
--color-secondary: 220 18% 97%; /* #F5F6F8 shadcn secondary 背景（→ --color-gray-muted） */
|
|
101
|
+
--color-secondary-foreground: 220 9% 7%; /* #101113 shadcn secondary 文字（→ --color-gray-primary） */
|
|
102
|
+
--color-muted: 220 18% 97%; /* #F5F6F8 shadcn muted 背景（→ --color-gray-muted），区别于 --color-muted-foreground 文字色 */
|
|
103
|
+
--color-accent: 220 18% 97%; /* #F5F6F8 shadcn accent 高亮（→ --color-gray-muted） */
|
|
104
|
+
--color-accent-foreground: 220 9% 7%; /* #101113 shadcn accent 上的前景文字（→ --color-gray-primary） */
|
|
105
105
|
|
|
106
106
|
/* ========================================
|
|
107
107
|
* Success / 成功色（#16A34A，Tailwind green-600）
|
|
108
108
|
* ======================================== */
|
|
109
|
-
--color-success: 142 76% 36%;
|
|
110
|
-
--color-success-foreground: 0 0% 100%;
|
|
111
|
-
--color-success-hover: 142 72% 29%;
|
|
112
|
-
--color-success-pressed: 143 60% 24%;
|
|
113
|
-
--color-success-bg: 152 82% 96%;
|
|
114
|
-
--color-success-border: 142 77% 73%;
|
|
115
|
-
--success-dark: 142 72% 29%;
|
|
116
|
-
--success-medium: 142 77% 73%;
|
|
117
|
-
--success-light: 152 82% 96%;
|
|
118
|
-
--success-aura: 0 0 8px rgba(22, 163, 74, 0.25);
|
|
109
|
+
--color-success: 142 76% 36%; /* #16A34A 成功状态、运行中、已开通 */
|
|
110
|
+
--color-success-foreground: 0 0% 100%; /* #FFFFFF 成功色上的前景文字 */
|
|
111
|
+
--color-success-hover: 142 72% 29%; /* #15803D 成功按钮 hover 态 */
|
|
112
|
+
--color-success-pressed: 143 60% 24%; /* #166534 成功按钮 pressed 态 */
|
|
113
|
+
--color-success-bg: 152 82% 96%; /* #ECFDF5 成功状态背景 */
|
|
114
|
+
--color-success-border: 142 77% 73%; /* #86EFAC 成功状态边框 */
|
|
115
|
+
--success-dark: 142 72% 29%; /* #15803D → --color-success-hover */
|
|
116
|
+
--success-medium: 142 77% 73%; /* #86EFAC → --color-success-border */
|
|
117
|
+
--success-light: 152 82% 96%; /* #ECFDF5 → --color-success-bg */
|
|
118
|
+
--success-aura: 0 0 8px rgba(22, 163, 74, 0.25); /* 成功色光晕（box-shadow 用） */
|
|
119
119
|
|
|
120
120
|
/* ========================================
|
|
121
121
|
* Destructive / 警示色（#DC2626，Tailwind red-600）
|
|
122
122
|
* ======================================== */
|
|
123
|
-
--color-destructive: 0 72% 51%;
|
|
124
|
-
--color-destructive-foreground: 0 0% 100%;
|
|
125
|
-
--color-destructive-hover: 0 74% 42%;
|
|
126
|
-
--color-destructive-pressed: 0 70% 35%;
|
|
127
|
-
--color-destructive-bg: 0 86% 97%;
|
|
128
|
-
--color-destructive-border: 0 93% 82%;
|
|
129
|
-
--destructive-dark: 0 74% 42%;
|
|
130
|
-
--destructive-light: 0 86% 97%;
|
|
131
|
-
--destructive-aura: 0 0 8px rgba(220, 38, 38, 0.25);
|
|
123
|
+
--color-destructive: 0 72% 51%; /* #DC2626 错误状态、已停止、失败、删除操作 */
|
|
124
|
+
--color-destructive-foreground: 0 0% 100%; /* #FFFFFF 警示色上的前景文字 */
|
|
125
|
+
--color-destructive-hover: 0 74% 42%; /* #B91C1C destructive 按钮 hover 态 */
|
|
126
|
+
--color-destructive-pressed: 0 70% 35%; /* #991B1B 警示按钮 pressed 态 */
|
|
127
|
+
--color-destructive-bg: 0 86% 97%; /* #FEF2F2 错误状态背景 */
|
|
128
|
+
--color-destructive-border: 0 93% 82%; /* #FCA5A5 错误状态边框 */
|
|
129
|
+
--destructive-dark: 0 74% 42%; /* #B91C1C → --color-destructive-hover */
|
|
130
|
+
--destructive-light: 0 86% 97%; /* #FEF2F2 → --color-destructive-bg */
|
|
131
|
+
--destructive-aura: 0 0 8px rgba(220, 38, 38, 0.25); /* 警示色光晕（box-shadow 用） */
|
|
132
132
|
|
|
133
133
|
/* ========================================
|
|
134
134
|
* Warning / 提醒色（#D97706，Tailwind amber-600）
|
|
135
135
|
* ======================================== */
|
|
136
|
-
--color-warning: 40 88% 48%;
|
|
137
|
-
--color-warning-foreground: 0 0% 100%;
|
|
138
|
-
--color-warning-hover: 38 85% 40%;
|
|
139
|
-
--color-warning-pressed: 35 78% 34%;
|
|
140
|
-
--color-warning-bg: 43 100% 94%;
|
|
141
|
-
--color-warning-border: 40 92% 68%;
|
|
142
|
-
--warning-dark: 38 85% 40%;
|
|
143
|
-
--warning-light: 43 100% 94%;
|
|
144
|
-
--warning-aura: 0 0 8px rgba(217, 119, 6, 0.25);
|
|
136
|
+
--color-warning: 40 88% 48%; /* #D97706 警告状态、创建中、停止中 */
|
|
137
|
+
--color-warning-foreground: 0 0% 100%; /* #FFFFFF 警告色上的前景文字 */
|
|
138
|
+
--color-warning-hover: 38 85% 40%; /* #B45309 警告按钮 hover 态 */
|
|
139
|
+
--color-warning-pressed: 35 78% 34%; /* #92400E 警告按钮 pressed 态 */
|
|
140
|
+
--color-warning-bg: 43 100% 94%; /* #FFF3DB 警告状态背景 */
|
|
141
|
+
--color-warning-border: 40 92% 68%; /* #FBBF24 警告状态边框 */
|
|
142
|
+
--warning-dark: 38 85% 40%; /* #B45309 → --color-warning-hover */
|
|
143
|
+
--warning-light: 43 100% 94%; /* #FFF3DB → --color-warning-bg */
|
|
144
|
+
--warning-aura: 0 0 8px rgba(217, 119, 6, 0.25); /* 警告色光晕（box-shadow 用） */
|
|
145
145
|
|
|
146
146
|
/* ========================================
|
|
147
147
|
* Info / 信息提示色（#2563EB，Tailwind blue-600）
|
|
148
148
|
* ======================================== */
|
|
149
|
-
--color-info: 221 83% 53%;
|
|
150
|
-
--color-info-foreground: 0 0% 100%;
|
|
151
|
-
--color-info-hover: 224 76% 48%;
|
|
152
|
-
--color-info-pressed: 226 71% 40%;
|
|
153
|
-
--color-info-bg: 214 100% 97%;
|
|
154
|
-
--color-info-border: 212 96% 78%;
|
|
155
|
-
--color-info-light: 213 100% 98.2%;
|
|
156
|
-
--info-aura: 0 0 8px rgba(37, 99, 235, 0.25);
|
|
149
|
+
--color-info: 221 83% 53%; /* #2563EB 信息提示、异步操作中 */
|
|
150
|
+
--color-info-foreground: 0 0% 100%; /* #FFFFFF 信息色上的前景文字 */
|
|
151
|
+
--color-info-hover: 224 76% 48%; /* #1D4ED8 信息按钮 hover 态 */
|
|
152
|
+
--color-info-pressed: 226 71% 40%; /* #1E40AF 信息按钮 pressed 态 */
|
|
153
|
+
--color-info-bg: 214 100% 97%; /* #EFF6FF 信息状态背景 */
|
|
154
|
+
--color-info-border: 212 96% 78%; /* #93C5FD 信息状态边框 */
|
|
155
|
+
--color-info-light: 213 100% 98.2%; /* #F6FAFF 信息浅色背景（与 sidebar gradient 联动） */
|
|
156
|
+
--info-aura: 0 0 8px rgba(37, 99, 235, 0.25); /* 信息色光晕（box-shadow 用） */
|
|
157
157
|
|
|
158
158
|
/* ========================================
|
|
159
159
|
* 图表用色 — 10 色标准组合（MasterGuide 提取）
|
|
160
160
|
* ======================================== */
|
|
161
|
-
--color-chart-1: 246.4 93.4% 64.5%;
|
|
162
|
-
--color-chart-2: 261.8 100% 74.1%;
|
|
163
|
-
--color-chart-3: 297.3 56.9% 54.5%;
|
|
164
|
-
--color-chart-4: 36.1 88.1% 57.1%;
|
|
165
|
-
--color-chart-5: 266.2 77.7% 57.8%;
|
|
166
|
-
--color-chart-6: 140.4 40.4% 50
|
|
167
|
-
--color-chart-7: 217.4 68.5% 51.4%;
|
|
168
|
-
--color-chart-8: 49.4 65
|
|
169
|
-
--color-chart-9: 207.7 11
|
|
170
|
-
--color-chart-10: 341.2 80.1% 66.5%;
|
|
161
|
+
--color-chart-1: 246.4 93.4% 64.5%; /* #6250F9 */
|
|
162
|
+
--color-chart-2: 261.8 100% 74.1%; /* #33AFA9 */
|
|
163
|
+
--color-chart-3: 297.3 56.9% 54.5%; /* #AE34B4 */
|
|
164
|
+
--color-chart-4: 36.1 88.1% 57.1%; /* #5F99F9 */
|
|
165
|
+
--color-chart-5: 266.2 77.7% 57.8%; /* #9C660D */
|
|
166
|
+
--color-chart-6: 140.4 40.4% 50%; /* #EE6590 */
|
|
167
|
+
--color-chart-7: 217.4 68.5% 51.4%; /* #068580 */
|
|
168
|
+
--color-chart-8: 49.4 65% 42.5%; /* #AB7BFF */
|
|
169
|
+
--color-chart-9: 207.7 11% 53.7%; /* #5A8219 */
|
|
170
|
+
--color-chart-10: 341.2 80.1% 66.5%; /* #7C8A96 */
|
|
171
171
|
|
|
172
172
|
/* ========================================
|
|
173
173
|
* Legacy 别名（兼容 --data-* 旧命名）
|
|
174
174
|
* ======================================== */
|
|
175
|
-
--data-1: var(--color-chart-1);
|
|
176
|
-
--data-2: var(--color-chart-2);
|
|
177
|
-
--data-3: var(--color-chart-3);
|
|
178
|
-
--data-4: var(--color-chart-4);
|
|
179
|
-
--data-5: var(--color-chart-5);
|
|
180
|
-
--data-6: var(--color-chart-6);
|
|
181
|
-
--data-7: var(--color-chart-7);
|
|
182
|
-
--data-8: var(--color-chart-8);
|
|
183
|
-
--data-9: var(--color-chart-9);
|
|
184
|
-
--data-10: var(--color-chart-10);
|
|
175
|
+
--data-1: var(--color-chart-1); /* → --color-chart-1 */
|
|
176
|
+
--data-2: var(--color-chart-2); /* → --color-chart-2 */
|
|
177
|
+
--data-3: var(--color-chart-3); /* → --color-chart-3 */
|
|
178
|
+
--data-4: var(--color-chart-4); /* → --color-chart-4 */
|
|
179
|
+
--data-5: var(--color-chart-5); /* → --color-chart-5 */
|
|
180
|
+
--data-6: var(--color-chart-6); /* → --color-chart-6 */
|
|
181
|
+
--data-7: var(--color-chart-7); /* → --color-chart-7 */
|
|
182
|
+
--data-8: var(--color-chart-8); /* → --color-chart-8 */
|
|
183
|
+
--data-9: var(--color-chart-9); /* → --color-chart-9 */
|
|
184
|
+
--data-10: var(--color-chart-10); /* → --color-chart-10 */
|
|
185
185
|
|
|
186
186
|
/* ========================================
|
|
187
187
|
* 顶栏 / 侧边栏
|
|
188
188
|
* ======================================== */
|
|
189
|
-
--color-topbar: 0 0% 7.8%;
|
|
190
|
-
--color-topbar-foreground: 0 0% 100%;
|
|
191
|
-
--color-topbar-divider: 0 0% 30.2%;
|
|
192
|
-
--topbar-height: 48px;
|
|
193
|
-
--color-sidebar: 220 18% 97%;
|
|
194
|
-
--color-sidebar-foreground: 220 9% 7%;
|
|
195
|
-
--color-sidebar-active: 210 12% 93%;
|
|
196
|
-
--color-sidebar-active-foreground: 220 9% 7%;
|
|
197
|
-
--color-sidebar-hover: 220 18% 97%;
|
|
198
|
-
--color-sidebar-title: 220 9% 7%;
|
|
199
|
-
--color-sidebar-group: 216 2% 45%;
|
|
200
|
-
--color-sidebar-item: 220 9% 7%;
|
|
201
|
-
--color-sidebar-item-muted: 216 4% 26%;
|
|
202
|
-
--color-sidebar-accent: 210 12% 93%;
|
|
203
|
-
--color-sidebar-accent-foreground: 218.6 100% 46.7%;
|
|
204
|
-
--color-sidebar-border: 210 9% 91%;
|
|
205
|
-
--color-sidebar-ring: 218.6 100% 46.7%;
|
|
206
|
-
--color-sidebar-primary: 218.6 100% 46.7%;
|
|
207
|
-
--color-sidebar-primary-foreground: 0 0% 100%;
|
|
208
|
-
--color-avatar-bg: 216 11.1% 91.2%;
|
|
189
|
+
--color-topbar: 0 0% 7.8%; /* #141414 顶栏背景色 */
|
|
190
|
+
--color-topbar-foreground: 0 0% 100%; /* #FFFFFF 顶栏文字色 */
|
|
191
|
+
--color-topbar-divider: 0 0% 30.2%; /* #4D4D4D 顶栏分割线 */
|
|
192
|
+
--topbar-height: 48px; /* 顶栏高度 */
|
|
193
|
+
--color-sidebar: 220 18% 97%; /* #F5F6F8 侧边栏背景色（v7.4 起 → --color-gray-muted） */
|
|
194
|
+
--color-sidebar-foreground: 220 9% 7%; /* #101113 侧边栏默认文字色（v7.4 起 → --color-gray-primary） */
|
|
195
|
+
--color-sidebar-active: 210 12% 93%; /* #ECEEF0 侧边栏激活态背景色（v7.4 起 → --color-gray-sidebar-accent） */
|
|
196
|
+
--color-sidebar-active-foreground: 220 9% 7%; /* #101113 侧边栏激活态文字色（v7.4 起 → --color-gray-primary） */
|
|
197
|
+
--color-sidebar-hover: 220 18% 97%; /* #F5F6F8 侧边栏菜单项 hover 背景色（v7.4 起 → --color-gray-muted） */
|
|
198
|
+
--color-sidebar-title: 220 9% 7%; /* #101113 侧边栏标题文字色（v7.4 起 → --color-gray-primary） */
|
|
199
|
+
--color-sidebar-group: 216 2% 45%; /* #717376 侧边栏分组标题文字色（v7.4 起 → --color-muted-foreground） */
|
|
200
|
+
--color-sidebar-item: 220 9% 7%; /* #101113 侧边栏菜单项文字色（v7.4 起 → --color-gray-primary） */
|
|
201
|
+
--color-sidebar-item-muted: 216 4% 26%; /* #414346 侧边栏次要菜单项文字色（v7.4 起 → --color-gray-secondary-foreground） */
|
|
202
|
+
--color-sidebar-accent: 210 12% 93%; /* #F6FAFF 表格行选中背景（sidebar 选中态用 --color-sidebar-active，见 sidebarRules.colors.menuItem.active） */
|
|
203
|
+
--color-sidebar-accent-foreground: 218.6 100% 46.7%; /* #0055EE 侧边栏强调文字色（= primary） */
|
|
204
|
+
--color-sidebar-border: 210 9% 91%; /* #E6E8EA 侧边栏内部分隔线（菜单组间/折叠态边框），v7.4 起 → --color-gray-line；侧边栏容器禁止右侧外边框（详见 sidebarRules.colors.container.border: none） */
|
|
205
|
+
--color-sidebar-ring: 218.6 100% 46.7%; /* #0055EE 侧边栏焦点环（= primary） */
|
|
206
|
+
--color-sidebar-primary: 218.6 100% 46.7%; /* #0055EE 侧边栏主色（= primary） */
|
|
207
|
+
--color-sidebar-primary-foreground: 0 0% 100%; /* #FFFFFF 侧边栏主色上的文字（白色） */
|
|
208
|
+
--color-avatar-bg: 216 11.1% 91.2%; /* #E3E5E8 Sidebar 头像背景色 */
|
|
209
209
|
|
|
210
210
|
/* ========================================
|
|
211
211
|
* Sidebar Collapsed State
|
|
212
212
|
* ======================================== */
|
|
213
|
-
--sidebar-collapsed-width: 68px;
|
|
214
|
-
--sidebar-menu-item-height: 40px;
|
|
215
|
-
--sidebar-menu-item-size-collapsed: 40px;
|
|
216
|
-
--sidebar-menu-item-gap-collapsed: 0px;
|
|
217
|
-
--sidebar-header-padding-collapsed: 0 12px;
|
|
218
|
-
--sidebar-footer-padding-collapsed: 12px 10px 16px;
|
|
219
|
-
--sidebar-flyout-z-index: 200;
|
|
220
|
-
--sidebar-flyout-min-width: 160px;
|
|
221
|
-
--sidebar-flyout-item-height: 36px;
|
|
222
|
-
--sidebar-centered-axis: 34px;
|
|
223
|
-
--sidebar-expand-icon-size: 14px;
|
|
213
|
+
--sidebar-collapsed-width: 68px; /* 侧边栏收起状态宽度（仅显示图标） */
|
|
214
|
+
--sidebar-menu-item-height: 40px; /* 菜单项高度（展开/收起共用） */
|
|
215
|
+
--sidebar-menu-item-size-collapsed: 40px; /* 收起态菜单项正方形尺寸 */
|
|
216
|
+
--sidebar-menu-item-gap-collapsed: 0px; /* 收起态菜单项内部 gap（消除隐形文字节点的 flex 间距） */
|
|
217
|
+
--sidebar-header-padding-collapsed: 0 12px; /* 收起态品牌区 padding */
|
|
218
|
+
--sidebar-footer-padding-collapsed: 12px 10px 16px; /* 收起态底部 padding */
|
|
219
|
+
--sidebar-flyout-z-index: 200; /* Flyout 浮层 z-index */
|
|
220
|
+
--sidebar-flyout-min-width: 160px; /* Flyout 浮层最小宽度 */
|
|
221
|
+
--sidebar-flyout-item-height: 36px; /* Flyout 浮层菜单项高度 */
|
|
222
|
+
--sidebar-centered-axis: 34px; /* 收起态视觉中轴（68/2 = 34px） */
|
|
223
|
+
--sidebar-expand-icon-size: 14px; /* 展开/折叠按钮图标尺寸 */
|
|
224
224
|
|
|
225
225
|
/* ========================================
|
|
226
226
|
* 类型标识 - API / MCP
|
|
227
227
|
* ======================================== */
|
|
228
|
-
--color-type-api: 221 83% 53%;
|
|
229
|
-
--color-type-api-light: 214 100% 92%;
|
|
230
|
-
--color-type-api-border: 213 97% 87%;
|
|
231
|
-
--color-type-mcp: 271 81% 56%;
|
|
232
|
-
--color-type-mcp-light: 264 77% 95%;
|
|
233
|
-
--color-type-mcp-border: 269 100% 92%;
|
|
228
|
+
--color-type-api: 221 83% 53%; /* #2563EB API 类型主色 */
|
|
229
|
+
--color-type-api-light: 214 100% 92%; /* #D6E8FF API 类型浅底 */
|
|
230
|
+
--color-type-api-border: 213 97% 87%; /* #BFDBFE API 类型边框 */
|
|
231
|
+
--color-type-mcp: 271 81% 56%; /* #9333EA MCP 类型主色 */
|
|
232
|
+
--color-type-mcp-light: 264 77% 95%; /* #F0E8FC MCP 类型浅底 */
|
|
233
|
+
--color-type-mcp-border: 269 100% 92%; /* #E9D5FF MCP 类型边框 */
|
|
234
234
|
|
|
235
235
|
/* ========================================
|
|
236
236
|
* 状态指示点
|
|
237
237
|
* ======================================== */
|
|
238
|
-
--color-status-running: 142 76% 36%;
|
|
239
|
-
--color-status-stopped: 222 7.6% 74.1%;
|
|
240
|
-
--color-status-error: 0 72% 51%;
|
|
238
|
+
--color-status-running: 142 76% 36%; /* #16A34A 运行中（→ --color-success） */
|
|
239
|
+
--color-status-stopped: 222 7.6% 74.1%; /* #BABCBF 已停止（→ --color-gray-disabled 同色系） */
|
|
240
|
+
--color-status-error: 0 72% 51%; /* #DC2626 错误（→ --color-destructive） */
|
|
241
241
|
|
|
242
242
|
/* ========================================
|
|
243
243
|
* 终端 / 代码块
|
|
244
244
|
* ======================================== */
|
|
245
|
-
--color-terminal: 222 47% 11%;
|
|
246
|
-
--color-terminal-foreground: 142 69% 58%;
|
|
245
|
+
--color-terminal: 222 47% 11%; /* #0F172A 终端背景 */
|
|
246
|
+
--color-terminal-foreground: 142 69% 58%; /* #4ADE80 终端前景（绿色字符） */
|
|
247
247
|
|
|
248
248
|
/* ========================================
|
|
249
249
|
* Font Family / 字体族（v7.8.4 新增）
|
|
250
250
|
* body 必须使用 var(--font-sans)，代码片段使用 var(--font-mono)
|
|
251
251
|
* 禁止在页面中硬编码 font-family 堆栈
|
|
252
252
|
* ======================================== */
|
|
253
|
-
--font-sans: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
|
254
|
-
|
|
253
|
+
--font-sans: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
|
254
|
+
Roboto, 'Helvetica Neue', sans-serif; /* UI 文字、正文、标题、标签、按钮等所有非代码文本 */
|
|
255
|
+
--font-mono: 'SF Mono', Monaco, 'Courier New', monospace; /* 代码/ID/IP/版本号/实例规格等机器可读标识符 */
|
|
255
256
|
|
|
256
257
|
/* ========================================
|
|
257
258
|
* Typography / 字号等级（v4 规则）
|
|
258
259
|
* base=12 / lg=14 / xl=16 / 2xl=18
|
|
259
260
|
* ======================================== */
|
|
260
|
-
--font-size-base: 0.75rem;
|
|
261
|
-
--font-size-lg: 0.875rem;
|
|
262
|
-
--font-size-xl: 1rem;
|
|
263
|
-
--font-size-2xl: 1.125rem;
|
|
264
|
-
--font-size-page-header: 1.125rem;
|
|
265
|
-
--font-weight-normal: 400;
|
|
266
|
-
--font-weight-medium: 500;
|
|
267
|
-
--font-weight-black: 900;
|
|
261
|
+
--font-size-base: 0.75rem; /* 12px — 正文/标签/脚注/输入框/表格/Badge/分页/页面副标题 */
|
|
262
|
+
--font-size-lg: 0.875rem; /* 14px — 强调正文/弹窗标题/抽屉标题/Tab */
|
|
263
|
+
--font-size-xl: 1rem; /* 16px — 小标题、卡片标题、区块标题 */
|
|
264
|
+
--font-size-2xl: 1.125rem; /* 18px — 页面主标题、PageHeader 面包屑层级 */
|
|
265
|
+
--font-size-page-header: 1.125rem; /* PageHeader 页面主标题专用字号（映射到 --font-size-2xl）。生成页面时 .page-header-title 必须使用此变量。 */
|
|
266
|
+
--font-weight-normal: 400; /* 正文、Tab 常态、表格单元格 */
|
|
267
|
+
--font-weight-medium: 500; /* 标签、导航、Tab 激活、弹窗标题、按钮 */
|
|
268
|
+
--font-weight-black: 900; /* Sidebar 品牌区文字 */
|
|
268
269
|
--line-height-input: 1.5;
|
|
269
270
|
--line-height-normal: 1.5;
|
|
270
271
|
--line-height-dialog-title: 1.57;
|
|
@@ -274,16 +275,16 @@
|
|
|
274
275
|
/* ========================================
|
|
275
276
|
* 间距（v4 保留项目原值：button-gap=8 / card-gap=16 / page-container-*）
|
|
276
277
|
* ======================================== */
|
|
277
|
-
--gap-xs: 4px;
|
|
278
|
-
--btn-padding-x: 16px;
|
|
279
|
-
--btn-padding-x-sm: 12px;
|
|
280
|
-
--button-gap: 8px;
|
|
281
|
-
--tabs-gap: 24px;
|
|
282
|
-
--card-gap: 16px;
|
|
283
|
-
--page-container-gap: 16px;
|
|
284
|
-
--page-container-padding: 16px;
|
|
285
|
-
--page-container-padding-left: 0px;
|
|
286
|
-
--card-padding-x: 20px;
|
|
278
|
+
--gap-xs: 4px; /* Button 内部 icon↔文字间距 */
|
|
279
|
+
--btn-padding-x: 16px; /* 按钮水平内边距（默认尺寸 height=32px） */
|
|
280
|
+
--btn-padding-x-sm: 12px; /* 小号按钮水平内边距（卡片内操作等紧凑场景） */
|
|
281
|
+
--button-gap: 8px; /* 操作栏按钮行/筛选器行/分页器间距 */
|
|
282
|
+
--tabs-gap: 24px; /* Tabs 标签项之间的水平间距 */
|
|
283
|
+
--card-gap: 16px; /* 卡片网格间距/区块之间垂直间距 */
|
|
284
|
+
--page-container-gap: 16px; /* 白卡外间距同义别名（v7.5 由 20px → 16px） */
|
|
285
|
+
--page-container-padding: 16px; /* 白卡外间距（上/右/下）/ PageContainer 内边距（top/right/bottom）（v7.5 由 20px → 16px） */
|
|
286
|
+
--page-container-padding-left: 0px; /* 主内容区左边缘 → 白卡容器左边缘间距；sidebar 与内容区之间不预留间距，白卡紧贴 sidebar 右侧 */
|
|
287
|
+
--card-padding-x: 20px; /* 白卡容器（ContentCard）内部左右内边距（v7.5 由 24px → 20px）；Card 内所有子组件的唯一外侧呼吸来源。独立于 --page-container-padding（PageContainer 外层间距 16px），两者属不同设计层级，不可混用。 */
|
|
287
288
|
|
|
288
289
|
/* ========================================
|
|
289
290
|
* Layout Frame Width
|
|
@@ -293,62 +294,62 @@
|
|
|
293
294
|
/* ========================================
|
|
294
295
|
* Table Cell Padding (v7.5 三层模型)
|
|
295
296
|
* ======================================== */
|
|
296
|
-
--table-cell-padding-x: 12px;
|
|
297
|
-
--table-first-cell-padding-left: 20px;
|
|
298
|
-
--table-last-cell-padding-right: 20px;
|
|
297
|
+
--table-cell-padding-x: 12px; /* 中间列 td 水平内边距 */
|
|
298
|
+
--table-first-cell-padding-left: 20px; /* 首列 padding-left（额外缩进 20px） */
|
|
299
|
+
--table-last-cell-padding-right: 20px; /* 末列 padding-right（额外缩进 20px） */
|
|
299
300
|
|
|
300
301
|
/* ========================================
|
|
301
302
|
* CardGrid 列宽预设 (v7.2 新增，业务卡片页 minWidth token 化)
|
|
302
303
|
* ======================================== */
|
|
303
|
-
--card-grid-min-compact: 240px;
|
|
304
|
-
--card-grid-min-standard: 300px;
|
|
305
|
-
--card-grid-min-comfortable: 320px;
|
|
306
|
-
--card-grid-min-feature: 360px;
|
|
304
|
+
--card-grid-min-compact: 240px; /* iconStyle=avatar + density=minimal */
|
|
305
|
+
--card-grid-min-standard: 300px; /* iconStyle=avatar + density=standard（默认） */
|
|
306
|
+
--card-grid-min-comfortable: 320px; /* iconStyle=tile + density=standard */
|
|
307
|
+
--card-grid-min-feature: 360px; /* iconStyle=avatar + density=complex */
|
|
307
308
|
|
|
308
309
|
/* ========================================
|
|
309
310
|
* Page Header
|
|
310
311
|
* ======================================== */
|
|
311
|
-
--page-header-height: 64px;
|
|
312
|
-
--breadcrumb-height: 64px;
|
|
312
|
+
--page-header-height: 64px; /* PageHeader 高度 */
|
|
313
|
+
--breadcrumb-height: 64px; /* Breadcrumb 高度 */
|
|
313
314
|
|
|
314
315
|
/* ========================================
|
|
315
316
|
* ActionToolbar
|
|
316
317
|
* ======================================== */
|
|
317
|
-
--action-toolbar-search-combo-gap: 20px;
|
|
318
|
+
--action-toolbar-search-combo-gap: 20px; /* ActionToolbar 中 SearchCombo 与 .left-actions 间距 */
|
|
318
319
|
|
|
319
320
|
/* ========================================
|
|
320
321
|
* 圆角（v4 更新）
|
|
321
322
|
* sm=4 / md=8 / lg=12 / xl=16 / full=9999
|
|
322
323
|
* drawer-radius 已移除
|
|
323
324
|
* ======================================== */
|
|
324
|
-
--radius: 1rem;
|
|
325
|
-
--radius-sm: 4px;
|
|
326
|
-
--radius-md: 8px;
|
|
327
|
-
--radius-lg: 12px;
|
|
328
|
-
--radius-xl: 16px;
|
|
329
|
-
--radius-full: 9999px;
|
|
330
|
-
--card-radius: 12px;
|
|
331
|
-
--input-radius: 8px;
|
|
325
|
+
--radius: 1rem; /* 全局基准圆角（= --radius-xl 16px，对话框/大型容器） */
|
|
326
|
+
--radius-sm: 4px; /* Badge、Chip、Checkbox、select-item */
|
|
327
|
+
--radius-md: 8px; /* 按钮、输入框、Select trigger、Toggle capsule */
|
|
328
|
+
--radius-lg: 12px; /* 卡片 */
|
|
329
|
+
--radius-xl: 16px; /* 对话框、大型容器（= --radius） */
|
|
330
|
+
--radius-full: 9999px; /* 完全圆形、药丸标签、Switch handle */
|
|
331
|
+
--card-radius: 12px; /* → --radius-lg（卡片圆角，原 8px 已升至 12px） */
|
|
332
|
+
--input-radius: 8px; /* → --radius-md（输入框圆角，原 6px 已升至 8px） */
|
|
332
333
|
|
|
333
334
|
/* ========================================
|
|
334
335
|
* Input / 输入框
|
|
335
336
|
* ======================================== */
|
|
336
337
|
--input-height: 32px;
|
|
337
338
|
--input-font-size: 12px;
|
|
338
|
-
--text-font-size: 14px;
|
|
339
|
+
--text-font-size: 14px; /* → --font-size-lg（强调正文 legacy 别名） */
|
|
339
340
|
--input-line-height: 18px;
|
|
340
341
|
--input-padding-x: 8px;
|
|
341
342
|
--input-padding-y: 7px;
|
|
342
|
-
--color-input-placeholder: 0 0% 66.7%;
|
|
343
|
+
--color-input-placeholder: 0 0% 66.7%; /* #AAAAAA 占位符、不可用文字 */
|
|
343
344
|
--input-icon-size: 16px;
|
|
344
345
|
|
|
345
346
|
/* ========================================
|
|
346
347
|
* Dialog / 弹窗
|
|
347
348
|
* ======================================== */
|
|
348
|
-
--dialog-width-s: 400px;
|
|
349
|
-
--dialog-width-m: 600px;
|
|
350
|
-
--dialog-width-l: 800px;
|
|
351
|
-
--dialog-width-xl: 1000px;
|
|
349
|
+
--dialog-width-s: 400px; /* 二次确认/极简字段 */
|
|
350
|
+
--dialog-width-m: 600px; /* 常用弹窗 */
|
|
351
|
+
--dialog-width-l: 800px; /* 宽表格 */
|
|
352
|
+
--dialog-width-xl: 1000px; /* 分栏/超复杂 */
|
|
352
353
|
--dialog-header-height: 46px;
|
|
353
354
|
--dialog-footer-height: 64px;
|
|
354
355
|
--dialog-body-padding-x: 20px;
|
|
@@ -371,23 +372,27 @@
|
|
|
371
372
|
* - 使用最弱阴影 var(--shadow-sm) = 0 1px 2px rgba(0,0,0,0.05)
|
|
372
373
|
* 详见 design-tokens.json · shadowMapping
|
|
373
374
|
* ======================================== */
|
|
374
|
-
--shadow-none: 0 0 #0000;
|
|
375
|
-
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
|
376
|
-
--shadow-DEFAULT: 0 1px 3px 0 rgb(0 0 0 / 0.1),
|
|
377
|
-
|
|
378
|
-
--shadow-
|
|
379
|
-
|
|
380
|
-
--shadow-
|
|
381
|
-
|
|
382
|
-
--shadow-
|
|
375
|
+
--shadow-none: 0 0 #0000; /* 无阴影 */
|
|
376
|
+
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); /* 按钮、输入框微浮起；v7.6 起作为 ContentCard 白卡容器唯一阴影源（无边框方案的最弱阴影） */
|
|
377
|
+
--shadow-DEFAULT: 0 1px 3px 0 rgb(0 0 0 / 0.1),
|
|
378
|
+
0 1px 2px -1px rgb(0 0 0 / 0.1); /* 卡片默认阴影（v7.6 起 ContentCard 不再使用，已转为 sm） */
|
|
379
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
|
|
380
|
+
0 2px 4px -2px rgb(0 0 0 / 0.1); /* 卡片、面板、Dropdown */
|
|
381
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
|
|
382
|
+
0 4px 6px -4px rgb(0 0 0 / 0.1); /* Popover、Toast、右键菜单 */
|
|
383
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
|
|
384
|
+
0 8px 10px -6px rgb(0 0 0 / 0.1); /* Dialog、Sheet、Command Palette */
|
|
385
|
+
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* 顶层模态、全屏遮罩 */
|
|
386
|
+
--shadow-dialog: 0px 12px 48px 0px rgba(0, 0, 0, 0.2); /* 弹窗专属阴影 */
|
|
387
|
+
--shadow-select-content: 0 6px 24px rgba(0, 0, 0, 0.1); /* Select 弹层阴影 */
|
|
383
388
|
|
|
384
389
|
/* ========================================
|
|
385
390
|
* Animation / 动画（v4 新增）
|
|
386
391
|
* ======================================== */
|
|
387
|
-
--duration-fast: 150ms;
|
|
388
|
-
--duration-normal: 200ms;
|
|
389
|
-
--duration-slow: 300ms;
|
|
390
|
-
--duration-slower: 500ms;
|
|
392
|
+
--duration-fast: 150ms; /* 微交互(hover/focus) */
|
|
393
|
+
--duration-normal: 200ms; /* 常规过渡(Accordion/Tabs) */
|
|
394
|
+
--duration-slow: 300ms; /* 面板滑入(Sheet/Dialog) */
|
|
395
|
+
--duration-slower: 500ms; /* 大型展开动画 */
|
|
391
396
|
--easing-linear: cubic-bezier(0, 0, 1, 1);
|
|
392
397
|
--easing-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
393
398
|
--easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
@@ -407,27 +412,27 @@
|
|
|
407
412
|
/* ========================================
|
|
408
413
|
* Form Layout / 表单布局
|
|
409
414
|
* ======================================== */
|
|
410
|
-
--form-label-width: 140px;
|
|
411
|
-
--form-control-max-width: 400px;
|
|
412
|
-
--form-row-gap: 24px;
|
|
413
|
-
--form-row-padding-y: 12px;
|
|
414
|
-
--form-description-font-size: 13px;
|
|
415
|
-
--form-required-indicator-margin-left: 2px;
|
|
415
|
+
--form-label-width: 140px; /* 左右布局下 label 列宽度 */
|
|
416
|
+
--form-control-max-width: 400px; /* 表单控件最大宽度 */
|
|
417
|
+
--form-row-gap: 24px; /* 表单分组间距 */
|
|
418
|
+
--form-row-padding-y: 12px; /* 表单行垂直内边距 */
|
|
419
|
+
--form-description-font-size: 13px; /* 表单描述文字字号 */
|
|
420
|
+
--form-required-indicator-margin-left: 2px; /* 必填星号与 label 间距 */
|
|
416
421
|
|
|
417
422
|
/* ========================================
|
|
418
423
|
* Pagination / 分页
|
|
419
424
|
* ======================================== */
|
|
420
|
-
--pagination-button-size: 32px;
|
|
421
|
-
--pagination-arrow-icon-size: 20px;
|
|
422
|
-
--pagination-ellipsis-icon-size: 16px;
|
|
423
|
-
--button-sm-height: 28px;
|
|
425
|
+
--pagination-button-size: 32px; /* 分页按钮正方形尺寸 */
|
|
426
|
+
--pagination-arrow-icon-size: 20px; /* 左右翻页箭头图标尺寸 */
|
|
427
|
+
--pagination-ellipsis-icon-size: 16px; /* 省略号图标尺寸 */
|
|
428
|
+
--button-sm-height: 28px; /* 小号按钮高度（分页/紧凑场景共用） */
|
|
424
429
|
|
|
425
430
|
/* ========================================
|
|
426
431
|
* Stepper / 步进器
|
|
427
432
|
* ======================================== */
|
|
428
|
-
--stepper-button-width: 32px;
|
|
429
|
-
--stepper-button-height: 36px;
|
|
430
|
-
--stepper-input-width: 60px;
|
|
431
|
-
--stepper-input-height: 36px;
|
|
433
|
+
--stepper-button-width: 32px; /* 加减按钮宽度 */
|
|
434
|
+
--stepper-button-height: 36px; /* 加减按钮高度 */
|
|
435
|
+
--stepper-input-width: 60px; /* 数值输入框宽度 */
|
|
436
|
+
--stepper-input-height: 36px; /* 数值输入框高度 */
|
|
432
437
|
}
|
|
433
438
|
}
|
|
@@ -270,18 +270,12 @@
|
|
|
270
270
|
{
|
|
271
271
|
"id": "terminal",
|
|
272
272
|
"comment": "终端 / 代码块",
|
|
273
|
-
"vars": [
|
|
274
|
-
"--color-terminal",
|
|
275
|
-
"--color-terminal-foreground"
|
|
276
|
-
]
|
|
273
|
+
"vars": ["--color-terminal", "--color-terminal-foreground"]
|
|
277
274
|
},
|
|
278
275
|
{
|
|
279
276
|
"id": "font-family",
|
|
280
277
|
"comment": "Font Family / 字体族（v7.8.4 新增）\nbody 必须使用 var(--font-sans)，代码片段使用 var(--font-mono)\n禁止在页面中硬编码 font-family 堆栈",
|
|
281
|
-
"vars": [
|
|
282
|
-
"--font-sans",
|
|
283
|
-
"--font-mono"
|
|
284
|
-
]
|
|
278
|
+
"vars": ["--font-sans", "--font-mono"]
|
|
285
279
|
},
|
|
286
280
|
{
|
|
287
281
|
"id": "typography",
|
|
@@ -321,9 +315,7 @@
|
|
|
321
315
|
{
|
|
322
316
|
"id": "layout-frame",
|
|
323
317
|
"comment": "Layout Frame Width",
|
|
324
|
-
"vars": [
|
|
325
|
-
"--layout-sidebar-width"
|
|
326
|
-
]
|
|
318
|
+
"vars": ["--layout-sidebar-width"]
|
|
327
319
|
},
|
|
328
320
|
{
|
|
329
321
|
"id": "table-cell",
|
|
@@ -347,17 +339,12 @@
|
|
|
347
339
|
{
|
|
348
340
|
"id": "page-header",
|
|
349
341
|
"comment": "Page Header",
|
|
350
|
-
"vars": [
|
|
351
|
-
"--page-header-height",
|
|
352
|
-
"--breadcrumb-height"
|
|
353
|
-
]
|
|
342
|
+
"vars": ["--page-header-height", "--breadcrumb-height"]
|
|
354
343
|
},
|
|
355
344
|
{
|
|
356
345
|
"id": "action-toolbar",
|
|
357
346
|
"comment": "ActionToolbar",
|
|
358
|
-
"vars": [
|
|
359
|
-
"--action-toolbar-search-combo-gap"
|
|
360
|
-
]
|
|
347
|
+
"vars": ["--action-toolbar-search-combo-gap"]
|
|
361
348
|
},
|
|
362
349
|
{
|
|
363
350
|
"id": "radius",
|
|
@@ -1919,11 +1906,7 @@
|
|
|
1919
1906
|
},
|
|
1920
1907
|
"columns": {
|
|
1921
1908
|
"default": 2,
|
|
1922
|
-
"options": [
|
|
1923
|
-
2,
|
|
1924
|
-
3,
|
|
1925
|
-
4
|
|
1926
|
-
],
|
|
1909
|
+
"options": [2, 3, 4],
|
|
1927
1910
|
"multiColumnGap": "64px（列与列间的水平间距）",
|
|
1928
1911
|
"responsive": {
|
|
1929
1912
|
">=1200px": "使用配置列数",
|
|
@@ -1984,7 +1967,7 @@
|
|
|
1984
1967
|
"value": "1rem",
|
|
1985
1968
|
"note": "16px",
|
|
1986
1969
|
"name": "text-base",
|
|
1987
|
-
"usage": "
|
|
1970
|
+
"usage": "小标题、卡片标题、区块标题",
|
|
1988
1971
|
"weight": {
|
|
1989
1972
|
"medium": "500",
|
|
1990
1973
|
"black": "900 (仅 Sidebar 品牌区)"
|
|
@@ -1995,7 +1978,7 @@
|
|
|
1995
1978
|
"value": "1.125rem",
|
|
1996
1979
|
"note": "18px",
|
|
1997
1980
|
"name": "text-lg",
|
|
1998
|
-
"usage": "
|
|
1981
|
+
"usage": "页面主标题、PageHeader 面包屑层级",
|
|
1999
1982
|
"weight": {
|
|
2000
1983
|
"medium": "500"
|
|
2001
1984
|
}
|
|
@@ -2408,13 +2391,8 @@
|
|
|
2408
2391
|
"collapsedState": {
|
|
2409
2392
|
"padding": "12px 10px 16px",
|
|
2410
2393
|
"justifyContent": "center",
|
|
2411
|
-
"hidden": [
|
|
2412
|
-
|
|
2413
|
-
"moreButton"
|
|
2414
|
-
],
|
|
2415
|
-
"visible": [
|
|
2416
|
-
"avatar"
|
|
2417
|
-
],
|
|
2394
|
+
"hidden": ["username", "moreButton"],
|
|
2395
|
+
"visible": ["avatar"],
|
|
2418
2396
|
"note": "收起态详细规范见 collapseBehavior.footer"
|
|
2419
2397
|
}
|
|
2420
2398
|
},
|
|
@@ -66,6 +66,30 @@ description: |
|
|
|
66
66
|
- **默认规则**：无特殊说明时，所有组件一律使用 `default` 尺寸（不主动传 `size='sm'`）
|
|
67
67
|
- **允许 sm 的场景**：仅当 `boundaries.md` 或子技能 patterns 文档中**显式指定**了 `size='sm'` 时才使用
|
|
68
68
|
- **判定优先级**：boundaries.md 规则 > 页面子技能（patterns） > 默认（default）
|
|
69
|
-
- **典型误用**：AI
|
|
69
|
+
- **典型误用**：AI 不得因"看起来小一点"而自行决定用 `sm`；截图中的视觉尺寸通过 Token 与组件默认值对齐，不走 size prop 降级
|
|
70
|
+
|
|
71
|
+
## Token 合规确认协议（最高优先级）
|
|
72
|
+
|
|
73
|
+
当用户提供的设计数值（颜色、间距、圆角、阴影、字号等）不在当前 `@teamix-evo/tokens` 已注册的 token 中时，AI **禁止**直接使用该字面量或试图绕过 lint 规则。
|
|
74
|
+
|
|
75
|
+
**正确流程**：
|
|
76
|
+
|
|
77
|
+
1. **识别** — 发现用户给出的值不在 token 体系中
|
|
78
|
+
2. **告知** — 明确告知用户"该值不在当前 token 中定义"
|
|
79
|
+
3. **建议** — 列出最接近的已有 token 名称、值和用途
|
|
80
|
+
4. **确认** — 让用户选择：
|
|
81
|
+
- A. 使用最接近的已有 token（告知具体 Tailwind class，如 `text-muted-foreground`）
|
|
82
|
+
- B. 在 `@teamix-evo/tokens` 中注册该新值（需确认语义命名和适用场景）
|
|
83
|
+
5. **执行** — 按用户确认的方案执行
|
|
84
|
+
|
|
85
|
+
**绝对禁止**：
|
|
86
|
+
|
|
87
|
+
- ❌ 直接使用 hex/rgb 字面量（无论 className、style prop、color prop 还是 CSS 变量形式）
|
|
88
|
+
- ❌ 用 `style={{ color: '#xxx' }}` 绕过 lint 检查
|
|
89
|
+
- ❌ 添加 eslint-disable 注释绕过颜色/arbitrary-value 规则
|
|
90
|
+
- ❌ 以"demo 文件"为借口跳过 token 合规
|
|
91
|
+
- ❌ 不问用户就自行决定"接受 lint 警告"
|
|
92
|
+
|
|
93
|
+
> 此规则适用于所有数值类型。只要不在 token 体系中注册的值，一律走确认流程。
|
|
70
94
|
|
|
71
95
|
<!-- teamix-evo:managed:end -->
|