@topmindspace/tms-skills 2.0.0 → 2.0.2
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/CHANGELOG.md +139 -123
- package/README.md +126 -103
- package/bin/tms-skills.js +160 -160
- package/package.json +48 -48
- package/top-ppt-html/README.md +254 -253
- package/top-ppt-html/SKILL.md +111 -111
- package/top-ppt-html/assets/examples/2026-09-09-architecture-graphite-dark.html +3873 -3926
- package/top-ppt-html/assets/examples/2026-09-09-architecture-graphite-dark.model.json +167 -167
- package/top-ppt-html/assets/examples/2026-09-09-architecture-spectrum.html +3873 -3926
- package/top-ppt-html/assets/examples/2026-09-09-architecture-spectrum.model.json +167 -167
- package/top-ppt-html/assets/examples/2026-09-09-presentation-apple-mono.html +4272 -4325
- package/top-ppt-html/assets/examples/2026-09-09-presentation-apple-mono.model.json +320 -320
- package/top-ppt-html/assets/examples/2026-09-09-presentation-brand-red.html +4272 -4325
- package/top-ppt-html/assets/examples/2026-09-09-presentation-brand-red.model.json +320 -320
- package/top-ppt-html/assets/examples/2026-09-09-presentation-business-blue.html +4272 -4325
- package/top-ppt-html/assets/examples/2026-09-09-presentation-business-blue.model.json +320 -320
- package/top-ppt-html/assets/examples/2026-09-09-research-deep-teal.html +5474 -5527
- package/top-ppt-html/assets/examples/2026-09-09-research-deep-teal.model.json +913 -913
- package/top-ppt-html/assets/examples/2026-09-09-research-indigo-violet.html +5474 -5527
- package/top-ppt-html/assets/examples/2026-09-09-research-indigo-violet.model.json +913 -913
- package/top-ppt-html/assets/examples/2026-09-09-research-mckinsey.html +5474 -5527
- package/top-ppt-html/assets/examples/2026-09-09-research-mckinsey.model.json +913 -913
- package/top-ppt-html/assets/examples/2026-09-09-research-warm-sand.html +5474 -5527
- package/top-ppt-html/assets/examples/2026-09-09-research-warm-sand.model.json +913 -913
- package/top-ppt-html/assets/pptx-export.js +1944 -1944
- package/top-ppt-html/assets/style-gallery.html +559 -589
- package/top-ppt-html/assets/templates/architecture.html +3675 -3728
- package/top-ppt-html/assets/templates/engine.css +787 -840
- package/top-ppt-html/assets/templates/presentation.html +3685 -3738
- package/top-ppt-html/assets/templates/research.html +3964 -4017
- package/top-ppt-html/assets/templates/ui.js +520 -520
- package/top-ppt-html/assets/theme-overview-architecture.png +0 -0
- package/top-ppt-html/assets/theme-overview-presentation.png +0 -0
- package/top-ppt-html/assets/theme-overview-research.png +0 -0
- package/top-ppt-html/assets/theme-overview.png +0 -0
- package/top-ppt-html/evals/prompts.csv +15 -15
- package/top-ppt-html/evals/rubric.schema.json +25 -25
- package/top-ppt-html/evals/run_evals.py +220 -220
- package/top-ppt-html/evals/trace.example.json +16 -16
- package/top-ppt-html/package-lock.json +175 -0
- package/top-ppt-html/package.json +30 -35
- package/top-ppt-html/references/charts-basic.md +624 -624
- package/top-ppt-html/references/charts-discipline.md +108 -108
- package/top-ppt-html/references/charts-extended.md +482 -482
- package/top-ppt-html/references/charts.md +28 -28
- package/top-ppt-html/references/components-atoms.md +624 -624
- package/top-ppt-html/references/components.md +30 -30
- package/top-ppt-html/references/content-rules.md +490 -490
- package/top-ppt-html/references/design-system-engine.md +235 -235
- package/top-ppt-html/references/design-system.md +471 -478
- package/top-ppt-html/references/failure-modes.md +214 -214
- package/top-ppt-html/references/high-fidelity.md +127 -127
- package/top-ppt-html/references/icons.md +397 -397
- package/top-ppt-html/references/industry-benchmark.md +105 -105
- package/top-ppt-html/references/infographics-stats.md +308 -308
- package/top-ppt-html/references/infographics-structure.md +226 -226
- package/top-ppt-html/references/infographics.md +43 -43
- package/top-ppt-html/references/layout-grammar.md +315 -315
- package/top-ppt-html/references/layouts-architecture.md +108 -108
- package/top-ppt-html/references/layouts-combo.md +600 -600
- package/top-ppt-html/references/layouts-research.md +160 -160
- package/top-ppt-html/references/modes.md +254 -254
- package/top-ppt-html/references/outline-design.md +275 -275
- package/top-ppt-html/references/playbook.md +266 -266
- package/top-ppt-html/references/pptx-export.md +209 -209
- package/top-ppt-html/references/reform-plan.md +252 -252
- package/top-ppt-html/references/styles.md +336 -370
- package/top-ppt-html/references/tech-design.md +138 -138
- package/top-ppt-html/scripts/audit_css.py +109 -109
- package/top-ppt-html/scripts/audit_docs.py +176 -176
- package/top-ppt-html/scripts/audit_skill.py +220 -220
- package/top-ppt-html/scripts/audit_styles.py +293 -351
- package/top-ppt-html/scripts/build_examples.py +2276 -2276
- package/top-ppt-html/scripts/build_pptx.js +2380 -2380
- package/top-ppt-html/scripts/capture_theme_overview.js +78 -78
- package/top-ppt-html/scripts/checks_html.py +127 -127
- package/top-ppt-html/scripts/cross_verify.py +294 -294
- package/top-ppt-html/scripts/env_probe.py +158 -158
- package/top-ppt-html/scripts/extract_model.py +210 -210
- package/top-ppt-html/scripts/extract_snippet.py +374 -374
- package/top-ppt-html/scripts/gen_channel_a.js +214 -214
- package/top-ppt-html/scripts/layout-constants.json +3309 -3377
- package/top-ppt-html/scripts/layout_slots.json +830 -830
- package/top-ppt-html/scripts/lib_layout_regions.js +412 -412
- package/top-ppt-html/scripts/measure_height.py +178 -178
- package/top-ppt-html/scripts/model-schema.json +547 -547
- package/top-ppt-html/scripts/negative_tests.py +307 -307
- package/top-ppt-html/scripts/package_skill.py +291 -291
- package/top-ppt-html/scripts/prepare_images.py +341 -341
- package/top-ppt-html/scripts/probe_image_export.py +188 -188
- package/top-ppt-html/scripts/quality_gate.py +301 -301
- package/top-ppt-html/scripts/regression.py +307 -308
- package/top-ppt-html/scripts/render_compare.py +275 -275
- package/top-ppt-html/scripts/render_from_model.py +698 -698
- package/top-ppt-html/scripts/scaffold_report.py +1054 -1054
- package/top-ppt-html/scripts/section-file-map.json +104 -104
- package/top-ppt-html/scripts/sync_runtime.py +662 -662
- package/top-ppt-html/scripts/validate_pptx.py +1510 -1510
- package/top-ppt-html/scripts/validate_report.py +1456 -1456
|
@@ -1,370 +1,336 @@
|
|
|
1
|
-
# 风格系统（9 套预设 · 覆盖 8 个色族 + 1 个彩色数据板）
|
|
2
|
-
|
|
3
|
-
> **何时读**：改配色、换/新增风格、调亮暗 token
|
|
4
|
-
> **取节**：`python scripts/extract_snippet.py --task style-theme`（快速选型 + 新增步骤）；单套风格细节 `--file styles.md --section <1-11>`（数字节号）。
|
|
5
|
-
|
|
6
|
-
## 工作原理
|
|
7
|
-
|
|
8
|
-
报告结构与样式分离。`design-system.md` 提供**风格无关的 CSS 引擎**（版式、栅格、组件、排版类、SVG
|
|
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
|
-
--
|
|
57
|
-
--
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
--
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
--
|
|
86
|
-
--
|
|
87
|
-
--
|
|
88
|
-
--
|
|
89
|
-
--
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
--
|
|
116
|
-
--
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
html[data-style="
|
|
156
|
-
--
|
|
157
|
-
--
|
|
158
|
-
--
|
|
159
|
-
--
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
--
|
|
182
|
-
--
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
--
|
|
186
|
-
--
|
|
187
|
-
--
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
--
|
|
208
|
-
--
|
|
209
|
-
--
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
--
|
|
213
|
-
--
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
--
|
|
236
|
-
--
|
|
237
|
-
--
|
|
238
|
-
--
|
|
239
|
-
--
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
--
|
|
245
|
-
--
|
|
246
|
-
--
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
--
|
|
267
|
-
--
|
|
268
|
-
--
|
|
269
|
-
--
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
--
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
--
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
## 11. 编码色板（每套风格各 5 色 · 数据专用）
|
|
338
|
-
|
|
339
|
-
> **9 套 ≠ 9 种皮肤而已**：每套风格都带自己的**编码色板 `c1–c5`**，用于多系列图表（多段环形 / 分组柱 / 多折线 / 散点分组 / 桑基流带 / 马赛克段）。这样"数据密集报告"在任何风格下都能出彩色系列，而**结构色仍保持单一强调色**。
|
|
340
|
-
|
|
341
|
-
| 项 | 说明 |
|
|
342
|
-
|----|------|
|
|
343
|
-
| 单源 | `scripts/layout-constants.json` 的 `styleDataColors`（light）/ `styleDataColorsDark`（dark），各 9 套 × 5 色 |
|
|
344
|
-
| HTML 消费 | `engine.css` 的 `html[data-style="X"]{--c1..--c5}` 覆盖块 → 语义类 `.f-c1~c5` / `.s-c1~c5`（由 `sync_runtime.py` 注入模板） |
|
|
345
|
-
| PPTX 消费 | `build_pptx.js` / `pptx-export.js` 的 `dataColors(style, theme)`（按 `model.theme` 选 light/dark 表） |
|
|
346
|
-
| 生成规则 | `c1` = 该风格强调色；`c2`/`c3` = 近似色（±32°/±38°）；`c4`/`c5` = 降饱和补色（168°/205°，饱和度 ×0.6） |
|
|
347
|
-
| 硬约束 | 每色对所在主题 `bg` 对比度 ≥ 3.0；同套内两两色相差 ≥25° 或明度差 ≥0.12（`audit_styles.py` 逐值校验） |
|
|
348
|
-
| 色值格式 | **一律裸 hex（6 位、不带 `#`）**，与 `styles` / `stylesDark` / `styleAccents` 同口径；`#` 前缀会原样流入 PPTX 的 `<a:srgbClr val>` 造成非法色值，`engine.css` 覆盖块与画廊才补 `#`（`audit_styles.py` 校验 + `validate_pptx.py` 的 `INVALID_HEX_COLOR` 硬拦） |
|
|
349
|
-
| 使用边界 | 彩色**只**出现在数据本体（数据系列 / 图例色点 / 小段标签）；同屏 ≤5 系列。**状态类表达（好/坏、达标/未达标、涨/跌）不得用红绿**，仍走强调色明度阶梯 |
|
|
350
|
-
|
|
351
|
-
改色值只改 JSON → 跑 `python scripts/sync_runtime.py`（注入 engine.css 消费端已在 JSON 单源内）→ `python scripts/audit_styles.py`。
|
|
352
|
-
|
|
353
|
-
---
|
|
354
|
-
|
|
355
|
-
## 新增一套风格的步骤
|
|
356
|
-
|
|
357
|
-
> **先过第 10 节的门槛**（新色族 + 新语汇 + 场景缺口，三条全满足）——否则不加。
|
|
358
|
-
|
|
359
|
-
1. 在「快速选型」表加一行（中/英文名 + data-style + 定位 + 适用 + 族）。
|
|
360
|
-
2. 选一个**中性色族**（冷灰/暖灰/纯黑白）+ 一个**强调色**，写 light + dark 两个覆盖块。
|
|
361
|
-
3. 定**风格语汇**（缺一即「只有皮肤没有性格」）：字体栈 `--font-body` / `--font-display`、圆角 `--radius`、字阶微调（`--fs-*`）、字距/行高（`--letter-*` / `--lh-*`）、密度（`--gap`）、阴影、必要时 `--link`。
|
|
362
|
-
4. **六处同步**（缺一即漂移）：
|
|
363
|
-
- `scripts/layout-constants.json` → `styles`（light 10 字段）+ `stylesDark`（dark 10 字段）+ `styleAccents`（强调色族）+ **`styleIdentity`（语汇清单）** + **`styleDataColors` / `styleDataColorsDark`（编码色板 c1–c5，见第 11 节）**
|
|
364
|
-
- `assets/templates/engine.css` → `html[data-style="X"]{…}` + `html[data-style="X"][data-theme="dark"]{…}` + **编码色板两个覆盖块（`--c1..--c5`）**——语汇 token 必须落在 light 块
|
|
365
|
-
- `assets/templates/ui.js` → `var STYLES` 数组加一项（`['id','中文名','#亮色accent']`）
|
|
366
|
-
- 本文件速查表 + 各节 CSS（语汇与 engine 逐字一致）+ 第 11 节编码色板表
|
|
367
|
-
- `assets/style-gallery.html` 画廊 `STYLE_META` 描述行（`pfontBody`/`pfontDisplay`/`prad`/`pscale`/`peye`/`plh`/`pgap`/`pw`/`pletter`；配色由注入的 `PRESETS` 自动派生）
|
|
368
|
-
- `references/design-system.md` 字体决策矩阵（若引入新字体语汇）
|
|
369
|
-
5. 跑 `python scripts/sync_runtime.py`（注入到三模板与画廊）→ `python scripts/audit_styles.py`（**9 套** × light/dark × 8 组 WCAG + 双源色 token + 编码色板 + ui.js 色板 + **风格语汇 styleIdentity**，全过才通过）→ `python scripts/build_examples.py` → `python scripts/regression.py`。
|
|
370
|
-
6. 可选：`node scripts/capture_theme_overview.js`（需 playwright）重生成 `assets/theme-overview*.png` 参考图。
|
|
1
|
+
# 风格系统（9 套预设 · 覆盖 8 个色族 + 1 个彩色数据板）
|
|
2
|
+
|
|
3
|
+
> **何时读**：改配色、换/新增风格、调亮暗 token、配编码色板时。**何时不读**：只想挑风格（Gate 0 参考图 + `--task style-theme` 速览即可）。
|
|
4
|
+
> **取节**：`python scripts/extract_snippet.py --task style-theme`（快速选型 + 新增步骤）；单套风格细节 `--file styles.md --section <1-11>`（数字节号）。
|
|
5
|
+
|
|
6
|
+
## 工作原理
|
|
7
|
+
|
|
8
|
+
报告结构与样式分离。`design-system.md` 提供**风格无关的 CSS 引擎**（版式、栅格、组件、排版类、SVG 语义类全部复用）；每套风格只是**覆盖一组 token**（强调色、表面色族、文字色、字体、圆角、阴影、密度）。
|
|
9
|
+
|
|
10
|
+
切换方式：`<html data-mode="X" data-style="business-blue" data-theme="light">`。
|
|
11
|
+
|
|
12
|
+
- **模式（三选一，生成时锁定）与风格正交**：结构 / 类名 / 组件由模式模板决定（`assets/templates/`），风格只是**覆盖一组 token**（强调色、表面色族、文字色、字体、圆角、阴影、密度）。
|
|
13
|
+
- 生成后 header 风格下拉可实时切换 9 套（纯视觉皮肤不动内容）；交付前切回选定值（`data-style` 与 `REPORT_MODEL.style` 一致，校验器检查）。
|
|
14
|
+
- 除 `spectrum` 外，每套风格**只有一个强调色**，层次仍靠表面明度差 + 1px 边框；`spectrum` 的彩色仅限数据系列（见第 9 节边界）。
|
|
15
|
+
- 每套都同时给出 light 与 dark 两套值。
|
|
16
|
+
- 风格 × 模式矩阵预览见 `assets/style-gallery.html`（三模式 Tab 为一级维度、9 风格卡片为二级，每张卡按当前模式渲染迷你版式特征）。
|
|
17
|
+
- **PPTX 导出侧的风格 token 与本文件同源**：单一事实源在 `scripts/layout-constants.json` `styles`（light 变量），两导出通道自动消费（`sync_runtime.py` 注入/校验）；改风格值改 JSON，不要只改本文档。
|
|
18
|
+
|
|
19
|
+
## 快速选型（含三模式推荐风格）
|
|
20
|
+
|
|
21
|
+
| 风格 | data-style | 一句话定位 | 适用场景 |
|
|
22
|
+
|------|-----------|-----------|---------|
|
|
23
|
+
| 商务蓝（默认） | `business-blue` | 专业克制、信息密度高，最通用 | 技术/数据/通用商务；**架构模式推荐** |
|
|
24
|
+
| 优雅黑白 | `apple-mono` | 极简、大留白、大字，高级产品感 | 产品发布、品牌、高管演示 |
|
|
25
|
+
| 麦肯锡咨询 | `mckinsey` | 结构化、正式、咨询范 | 战略/咨询/立项；**研究模式首选** |
|
|
26
|
+
| 品牌红 | `brand-red` | 以品牌主色红为强调，正式有辨识度 | 企业品牌材料、正式汇报 |
|
|
27
|
+
| 暖沙金 | `warm-sand` | 温暖高级、编辑感 | 年报、品牌叙事、文化；**研究模式推荐** |
|
|
28
|
+
| 墨绿 | `deep-teal` | 沉稳可信赖 | 金融、风控、ESG；**研究模式推荐** |
|
|
29
|
+
| 石墨深灰 | `graphite-dark` | 深色优先的沉浸石墨风（近黑面板 + 亮蓝青；浅色石墨纸灰为辅助） | 发布会、大屏展示；**架构模式首选** |
|
|
30
|
+
| 靛紫 | `indigo-violet` | 创新前沿 | AI、科技、研发 |
|
|
31
|
+
| 光谱彩色 | `spectrum` | 中性结构 + 5 色数据色板，图表出彩不花哨 | 数据密集汇报、运营复盘、大屏看板；**架构模式推荐** |
|
|
32
|
+
|
|
33
|
+
> **三模式推荐组合速记**：演示 → 商务蓝（默认）/优雅黑白；研究 → 麦肯锡/墨绿/暖沙金；架构 → 石墨深灰/商务蓝/彩色。研究模式偏好衬线标题 + 细线框架的咨询质感，架构模式偏好深色沉浸或彩色数据面，演示模式全部可用、默认商务蓝。
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## 1. 商务蓝 `business-blue`（默认）
|
|
38
|
+
|
|
39
|
+
**定位**：专业、克制、信息密度高。中性灰阶 + Google Blue。
|
|
40
|
+
**适用**：绝大多数商务/技术/数据汇报。
|
|
41
|
+
|
|
42
|
+
```css
|
|
43
|
+
html[data-style="business-blue"] {
|
|
44
|
+
--font-body: "Google Sans","Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",
|
|
45
|
+
"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
|
|
46
|
+
--font-display: var(--font-body);
|
|
47
|
+
--radius: 16px;
|
|
48
|
+
--bg:#ffffff; --surface:#ffffff; --surface-1:#f8f9fa; --surface-2:#f1f3f4; --surface-3:#e8eaed;
|
|
49
|
+
--surface-inv:#202124; --text:#202124; --text-2:#5f6368; --text-3:#80868b; --text-inv:#ffffff;
|
|
50
|
+
--border:#dadce0; --border-soft:#e8eaed;
|
|
51
|
+
--accent:#1a73e8; --accent-soft:#e8f0fe; --accent-soft-2:#d2e3fc; --accent-text:#1b66c9; --accent-on:#ffffff;
|
|
52
|
+
}
|
|
53
|
+
html[data-style="business-blue"][data-theme="dark"] {
|
|
54
|
+
--bg:#0d0f13; --surface:#14171c; --surface-1:#191d23; --surface-2:#20252c; --surface-3:#2a3038;
|
|
55
|
+
--surface-inv:#e8eaed; --text:#e8eaed; --text-2:#adb4bd; --text-3:#868d96; --text-inv:#14171c;
|
|
56
|
+
--border:#2f353d; --border-soft:#23282f;
|
|
57
|
+
--accent:#8ab4f8; --accent-soft:#16243a; --accent-soft-2:#1d3557; --accent-text:#8ab4f8; --accent-on:#0d1b2e;
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## 2. 优雅黑白 `apple-mono`
|
|
64
|
+
|
|
65
|
+
**定位**：苹果式极简。大留白、超大字号、几乎无彩色，靠留白与排版取胜。
|
|
66
|
+
**适用**：产品发布、品牌、面向高管/外部的演示。
|
|
67
|
+
**特点**：强调色为近黑/近白（按钮实底黑），CTA 可极少量用系统蓝 `#0071e3`；分块少、字大、行宽松。
|
|
68
|
+
|
|
69
|
+
```css
|
|
70
|
+
html[data-style="apple-mono"] {
|
|
71
|
+
--font-body: -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
|
|
72
|
+
"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
|
|
73
|
+
--font-display: -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","PingFang SC",sans-serif;
|
|
74
|
+
--radius: 20px;
|
|
75
|
+
--fs-display: clamp(3rem,5.4vw,4.75rem); /* 更大 */
|
|
76
|
+
--fs-h1: clamp(2.125rem,3.6vw,3.25rem);
|
|
77
|
+
--bg:#ffffff; --surface:#ffffff; --surface-1:#f5f5f7; --surface-2:#f5f5f7; --surface-3:#e8e8ed;
|
|
78
|
+
--surface-inv:#1d1d1f; --text:#1d1d1f; --text-2:#6e6e73; --text-3:#86868b; --text-inv:#f5f5f7;
|
|
79
|
+
--border:#d2d2d7; --border-soft:#e8e8ed;
|
|
80
|
+
--accent:#1d1d1f; --accent-soft:#f5f5f7; --accent-soft-2:#e8e8ed; --accent-text:#1d1d1f; --accent-on:#ffffff;
|
|
81
|
+
--link:#0071e3; /* 仅链接/个别 CTA */
|
|
82
|
+
--shadow-1:none; --shadow-2:0 4px 24px rgba(0,0,0,.06);
|
|
83
|
+
}
|
|
84
|
+
html[data-style="apple-mono"][data-theme="dark"] {
|
|
85
|
+
--bg:#000000; --surface:#000000; --surface-1:#161617; --surface-2:#1d1d1f; --surface-3:#2a2a2d;
|
|
86
|
+
--surface-inv:#f5f5f7; --text:#f5f5f7; --text-2:#a1a1a6; --text-3:#86868b; --text-inv:#1d1d1f;
|
|
87
|
+
--border:#38383d; --border-soft:#2a2a2d;
|
|
88
|
+
--accent:#f5f5f7; --accent-soft:#1d1d1f; --accent-soft-2:#2a2a2d; --accent-text:#f5f5f7; --accent-on:#000000;
|
|
89
|
+
--link:#2997ff;
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## 3. 麦肯锡咨询 `mckinsey`
|
|
96
|
+
|
|
97
|
+
**定位**：结构化、正式、咨询范。衬线标题 + 无衬线正文 + 细线框架 + 小圆角 + 高密表格。
|
|
98
|
+
**适用**：战略、咨询、立项、可研、对标。
|
|
99
|
+
**特点**：强调色为藏青；标题用衬线（Georgia/宋体），eyebrow 小字大写拉开字距；靠 1px hairline 与网格分块，几乎不用阴影。
|
|
100
|
+
|
|
101
|
+
```css
|
|
102
|
+
html[data-style="mckinsey"] {
|
|
103
|
+
--font-body: "Inter","IBM Plex Sans",-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
|
|
104
|
+
--font-display: "Georgia","Times New Roman","Songti SC","STSong","SimSun",serif;
|
|
105
|
+
--radius: 6px;
|
|
106
|
+
--bg:#ffffff; --surface:#ffffff; --surface-1:#f2f4f7; --surface-2:#f2f4f7; --surface-3:#e4e7ec;
|
|
107
|
+
--surface-inv:#101828; --text:#101828; --text-2:#475467; --text-3:#667085; --text-inv:#ffffff;
|
|
108
|
+
--border:#d0d5dd; --border-soft:#e4e7ec;
|
|
109
|
+
--accent:#003a70; --accent-soft:#eef4fb; --accent-soft-2:#d9e8f6; --accent-text:#003a70; --accent-on:#ffffff;
|
|
110
|
+
--shadow-1:none; --shadow-2:0 1px 2px rgba(16,24,40,.06);
|
|
111
|
+
}
|
|
112
|
+
html[data-style="mckinsey"][data-theme="dark"] {
|
|
113
|
+
--bg:#0c1116; --surface:#0c1116; --surface-1:#12181f; --surface-2:#182030; --surface-3:#21293a;
|
|
114
|
+
--surface-inv:#e4e7ec; --text:#e4e7ec; --text-2:#aab3c2; --text-3:#8a94a6; --text-inv:#101828;
|
|
115
|
+
--border:#2a3342; --border-soft:#1f2733;
|
|
116
|
+
--accent:#7fb2e5; --accent-soft:#12233a; --accent-soft-2:#1b3358; --accent-text:#7fb2e5; --accent-on:#0c1a2e;
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
> 标题用 `.t-h1/.t-h2` 时衬线字体生效（`--font-display`）；eyebrow 用 `text-transform:uppercase` + `letter-spacing:.14em` 强化咨询感。
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
## 4. 品牌红 `brand-red`
|
|
125
|
+
|
|
126
|
+
**定位**：以品牌主色红为强调，正式且有辨识度。可将下方红色替换为任意企业品牌色。
|
|
127
|
+
**适用**：企业品牌材料、正式汇报、对外宣讲。
|
|
128
|
+
|
|
129
|
+
```css
|
|
130
|
+
html[data-style="brand-red"] {
|
|
131
|
+
--font-body: "HarmonyOS Sans","PingFang SC","Microsoft YaHei","Noto Sans SC",-apple-system,"Segoe UI",sans-serif;
|
|
132
|
+
--font-display: var(--font-body);
|
|
133
|
+
--radius: 14px;
|
|
134
|
+
--bg:#ffffff; --surface:#ffffff; --surface-1:#faf7f7; --surface-2:#f5f0f0; --surface-3:#ece5e5;
|
|
135
|
+
--surface-inv:#1f1a1b; --text:#1f1a1b; --text-2:#5d5456; --text-3:#8a8083; --text-inv:#ffffff;
|
|
136
|
+
--border:#e2d9da; --border-soft:#ece5e5;
|
|
137
|
+
--accent:#d0021b; --accent-soft:#fbecec; --accent-soft-2:#f6d5d7; --accent-text:#b00217; --accent-on:#ffffff;
|
|
138
|
+
}
|
|
139
|
+
html[data-style="brand-red"][data-theme="dark"] {
|
|
140
|
+
--bg:#130d0e; --surface:#130d0e; --surface-1:#1a1213; --surface-2:#231718; --surface-3:#2e1e20;
|
|
141
|
+
--surface-inv:#f3ecec; --text:#f3ecec; --text-2:#c4b6b7; --text-3:#9a8d8e; --text-inv:#1f1a1b;
|
|
142
|
+
--border:#37272a; --border-soft:#2a1e20;
|
|
143
|
+
--accent:#ff5a66; --accent-soft:#331518; --accent-soft-2:#471c21; --accent-text:#ff7a83; --accent-on:#2a0d10;
|
|
144
|
+
}
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
---
|
|
148
|
+
|
|
149
|
+
## 5. 暖沙金 `warm-sand`
|
|
150
|
+
|
|
151
|
+
**定位**：温暖高级、编辑感/年报感。米白暖底 + 古铜金强调，衬线标题。
|
|
152
|
+
**适用**：年度报告、品牌叙事、文化建设、价值观。
|
|
153
|
+
|
|
154
|
+
```css
|
|
155
|
+
html[data-style="warm-sand"] {
|
|
156
|
+
--font-body: "Inter","Source Han Sans","PingFang SC","Microsoft YaHei",-apple-system,sans-serif;
|
|
157
|
+
--font-display: "Georgia","Playfair Display","Songti SC","STSong","SimSun",serif;
|
|
158
|
+
--radius: 12px;
|
|
159
|
+
--bg:#fbf9f6; --surface:#ffffff; --surface-1:#f6f2ec; --surface-2:#efe9df; --surface-3:#e6ded2;
|
|
160
|
+
--surface-inv:#2a2521; --text:#2a2521; --text-2:#6b5f52; --text-3:#93836f; --text-inv:#f6f2ec;
|
|
161
|
+
--border:#e0d7c9; --border-soft:#eae3d6;
|
|
162
|
+
--accent:#96681f; --accent-soft:#f3ecdd; --accent-soft-2:#eaddc4; --accent-text:#8f6117; --accent-on:#ffffff;
|
|
163
|
+
}
|
|
164
|
+
html[data-style="warm-sand"][data-theme="dark"] {
|
|
165
|
+
--bg:#15120e; --surface:#15120e; --surface-1:#1d1913; --surface-2:#26201a; --surface-3:#312920;
|
|
166
|
+
--surface-inv:#ece5db; --text:#ece5db; --text-2:#c4b8a8; --text-3:#9b8d7a; --text-inv:#2a2521;
|
|
167
|
+
--border:#3a3128; --border-soft:#2c261e;
|
|
168
|
+
--accent:#d9b36a; --accent-soft:#2e2417; --accent-soft-2:#3e3019; --accent-text:#e0c184; --accent-on:#2a1f10;
|
|
169
|
+
}
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
---
|
|
173
|
+
|
|
174
|
+
## 6. 墨绿 `deep-teal`
|
|
175
|
+
|
|
176
|
+
**定位**：沉稳、可信赖。冷灰底 + 深青强调。
|
|
177
|
+
**适用**：金融、风控、ESG、可持续、审计。
|
|
178
|
+
|
|
179
|
+
```css
|
|
180
|
+
html[data-style="deep-teal"] {
|
|
181
|
+
--font-body: "Inter","Source Han Sans","PingFang SC","Microsoft YaHei",-apple-system,sans-serif;
|
|
182
|
+
--font-display: var(--font-body);
|
|
183
|
+
--radius: 12px;
|
|
184
|
+
--bg:#ffffff; --surface:#ffffff; --surface-1:#f2f6f5; --surface-2:#e8f0ef; --surface-3:#dce7e5;
|
|
185
|
+
--surface-inv:#14201e; --text:#14201e; --text-2:#4a5a57; --text-3:#73837f; --text-inv:#ffffff;
|
|
186
|
+
--border:#cfdedc; --border-soft:#e0eae9;
|
|
187
|
+
--accent:#0f6b5c; --accent-soft:#e4f1ee; --accent-soft-2:#cfe5e0; --accent-text:#0d5a4e; --accent-on:#ffffff;
|
|
188
|
+
}
|
|
189
|
+
html[data-style="deep-teal"][data-theme="dark"] {
|
|
190
|
+
--bg:#0d1312; --surface:#0d1312; --surface-1:#131b1a; --surface-2:#1a2523; --surface-3:#22302d;
|
|
191
|
+
--surface-inv:#e2ecea; --text:#e2ecea; --text-2:#b3c2bf; --text-3:#86948f; --text-inv:#14201e;
|
|
192
|
+
--border:#293834; --border-soft:#1e2a27;
|
|
193
|
+
--accent:#4fc3b0; --accent-soft:#12312c; --accent-soft-2:#1a423b; --accent-text:#66cfbd; --accent-on:#0c2420;
|
|
194
|
+
}
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
---
|
|
198
|
+
|
|
199
|
+
## 7. 石墨深灰 `graphite-dark`（深色优先）
|
|
200
|
+
|
|
201
|
+
**定位**：深色优先的沉浸石墨风。近黑石墨面板 + 亮蓝青强调，**默认即深色**；浅色变体为「石墨纸灰 + 同系蓝青」，供打印/外发辅助。
|
|
202
|
+
**适用**：产品发布会、指挥中心大屏、深色优先场景。
|
|
203
|
+
**深色优先的落地**：架构模式模板（默认风格即 graphite-dark）出厂 `data-theme="dark"`；其他模式选用本风格时，交付前建议切到 dark（或向用户明示浅色为辅助变体）。浅色变体的灰阶为**中性石墨灰**（不带蓝味），与商务蓝的白底纯蓝拉开辨识度；强调色为深蓝青（与 dark 侧亮蓝青 #4da3ff 同系）。
|
|
204
|
+
|
|
205
|
+
```css
|
|
206
|
+
html[data-style="graphite-dark"] {
|
|
207
|
+
--font-body: "Inter","SF Pro Text","PingFang SC","Microsoft YaHei",-apple-system,sans-serif;
|
|
208
|
+
--font-display: "Inter","SF Pro Display","PingFang SC",sans-serif;
|
|
209
|
+
--radius: 14px;
|
|
210
|
+
--bg:#f4f5f7; --surface:#ffffff; --surface-1:#eceef1; --surface-2:#e3e6ea; --surface-3:#d8dbdf;
|
|
211
|
+
--surface-inv:#14171b; --text:#1a1d21; --text-2:#4b5158; --text-3:#767c84; --text-inv:#eef2f6;
|
|
212
|
+
--border:#ced1d6; --border-soft:#e3e6ea;
|
|
213
|
+
--accent:#0369a1; --accent-soft:#e2eff7; --accent-soft-2:#c8e1f2; --accent-text:#075985; --accent-on:#ffffff;
|
|
214
|
+
}
|
|
215
|
+
html[data-style="graphite-dark"][data-theme="dark"] {
|
|
216
|
+
--bg:#0b0e12; --surface:#12161b; --surface-1:#171d24; --surface-2:#1f2732; --surface-3:#28323f;
|
|
217
|
+
--surface-inv:#eef2f6; --text:#eef2f6; --text-2:#b9c2cd; --text-3:#85909d; --text-inv:#12161b;
|
|
218
|
+
--border:#2b3540; --border-soft:#212932;
|
|
219
|
+
--accent:#4da3ff; --accent-soft:#132841; --accent-soft-2:#1a3a5e; --accent-text:#6fb2ff; --accent-on:#07182b;
|
|
220
|
+
--shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 4px 12px rgba(0,0,0,.45);
|
|
221
|
+
}
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
> **深浅两套变体的分工**：dark 是本风格的主面孔（沉浸/大屏/发布会）；light 是辅助（打印/外发/明亮环境）。风格画廊（`style-gallery.html`）中本风格卡片以 dark 为主预览、light 为辅助条，直接传达这一分工。
|
|
225
|
+
|
|
226
|
+
---
|
|
227
|
+
|
|
228
|
+
## 8. 靛紫 `indigo-violet`
|
|
229
|
+
|
|
230
|
+
**定位**：创新、前沿。冷白底 + 靛紫强调。
|
|
231
|
+
**适用**：AI、科技、研发、创新、前沿技术。
|
|
232
|
+
|
|
233
|
+
```css
|
|
234
|
+
html[data-style="indigo-violet"] {
|
|
235
|
+
--font-body: "Inter","SF Pro Text","PingFang SC","Microsoft YaHei",-apple-system,sans-serif;
|
|
236
|
+
--font-display: var(--font-body);
|
|
237
|
+
--radius: 16px;
|
|
238
|
+
--bg:#ffffff; --surface:#ffffff; --surface-1:#f4f4fb; --surface-2:#ececf7; --surface-3:#e0e0f0;
|
|
239
|
+
--surface-inv:#1b1a2e; --text:#1b1a2e; --text-2:#52506b; --text-3:#7a779a; --text-inv:#ffffff;
|
|
240
|
+
--border:#d7d7e8; --border-soft:#e6e6f2;
|
|
241
|
+
--accent:#5b5bd6; --accent-soft:#ececf9; --accent-soft-2:#dcdcf3; --accent-text:#4848c0; --accent-on:#ffffff;
|
|
242
|
+
}
|
|
243
|
+
html[data-style="indigo-violet"][data-theme="dark"] {
|
|
244
|
+
--bg:#100f1c; --surface:#100f1c; --surface-1:#171629; --surface-2:#1f1e36; --surface-3:#292845;
|
|
245
|
+
--surface-inv:#e6e5f5; --text:#e6e5f5; --text-2:#b6b4d4; --text-3:#8b89b0; --text-inv:#1b1a2e;
|
|
246
|
+
--border:#322f52; --border-soft:#262441;
|
|
247
|
+
--accent:#a5a4f0; --accent-soft:#232146; --accent-soft-2:#2e2c58; --accent-text:#b6b5f5; --accent-on:#171631;
|
|
248
|
+
}
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
---
|
|
252
|
+
|
|
253
|
+
## 9. 光谱彩色 `spectrum`（彩色定位 · 数据色板以彩色为主）
|
|
254
|
+
|
|
255
|
+
**定位**：中性结构 + 彩色的 5 色数据色板。图表、图例、小段标签"出彩"，页面骨架依然安静。
|
|
256
|
+
**适用**：数据密集汇报、运营复盘、大屏看板、多系列对比。
|
|
257
|
+
|
|
258
|
+
**彩色边界（9 套风格同一条纪律）**：
|
|
259
|
+
- 彩色**只**出现在：图表数据系列（`.f-c1~c5` / `.s-c1~c5`）、图例 chip、小段标签、仪表盘/环形分段。
|
|
260
|
+
- **不用**彩色的地方：标题、正文、边框、按钮、大面积底色、卡片背景——这些全部保持中性 + 单一 `--accent`。
|
|
261
|
+
- 同屏彩色数据系列 ≤ 5；超过就合并为"其他"。
|
|
262
|
+
- **9 套风格各有自己的 `c1–c5`**（单源 `styleDataColors`，见第 11 节与 `design-system.md` §9b）——本风格只是把彩色作为**定位**（`c1` = 强调色），并不是"唯一能出彩的风格"。
|
|
263
|
+
|
|
264
|
+
```css
|
|
265
|
+
html[data-style="spectrum"] {
|
|
266
|
+
--font-body: "Inter","SF Pro Text","PingFang SC","Microsoft YaHei",-apple-system,sans-serif;
|
|
267
|
+
--font-display: var(--font-body);
|
|
268
|
+
--radius: 14px;
|
|
269
|
+
--bg:#fbfcfe; --surface:#ffffff; --surface-1:#f4f6fa; --surface-2:#eceff5; --surface-3:#dfe4ec;
|
|
270
|
+
--surface-inv:#171a21; --text:#171a21; --text-2:#4d5566; --text-3:#7b8494; --text-inv:#ffffff;
|
|
271
|
+
--border:#d6dce6; --border-soft:#e6eaf1;
|
|
272
|
+
--accent:#4563ef; --accent-soft:#eceeff; --accent-soft-2:#d8defb; --accent-text:#3d5bef; --accent-on:#ffffff;
|
|
273
|
+
}
|
|
274
|
+
html[data-style="spectrum"][data-theme="dark"] {
|
|
275
|
+
--bg:#0e1116; --surface:#131720; --surface-1:#171c26; --surface-2:#1d2330; --surface-3:#252c3b;
|
|
276
|
+
--surface-inv:#e8ebf2; --text:#e8ebf2; --text-2:#a7afbf; --text-3:#7e8798; --text-inv:#171a21;
|
|
277
|
+
--border:#2b3342; --border-soft:#212839;
|
|
278
|
+
--accent:#8ba0f8; --accent-soft:#1b2242; --accent-soft-2:#26305c; --accent-text:#93a7f9; --accent-on:#141a38;
|
|
279
|
+
}
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
> **编码色板（`--c1..--c5`）不在本节重复列出**：9 套风格各自的 5 色由单源 `styleDataColors` / `styleDataColorsDark` 注入 `engine.css` 覆盖块（第 11 节），避免两处维护。
|
|
283
|
+
|
|
284
|
+
---
|
|
285
|
+
|
|
286
|
+
## 10. 为什么是 9 套（风格集的准入门槛）
|
|
287
|
+
|
|
288
|
+
> **风格集刻意保持 9 套**：覆盖 8 个色族（蓝 / 藏青 / 蓝青深色 / 黑白 / 红 / 金棕 / 墨绿 / 紫）+ 1 个彩色数据板，任意组合已足够。
|
|
289
|
+
> **每多一套风格的真实成本**：单源 5 张表（`styles` / `stylesDark` / `styleAccents` / `styleDataColors` / `styleDataColorsDark`）× 亮暗 + `engine.css` 4 个块 + `ui.js` 色板 + 画廊卡片 + 参考图重生成 + 审计与回归全跑一遍。**选项冗余不是免费的。**
|
|
290
|
+
|
|
291
|
+
**新增一套风格的门槛（三条全满足才加）**：
|
|
292
|
+
|
|
293
|
+
1. **新色族**——引入现有 8 族之外的色相族，而不是同族换明度 / 换名；
|
|
294
|
+
2. **新语汇**——带来新的字体搭配（衬线 / 等宽）或新的圆角、阴影语汇；
|
|
295
|
+
3. **场景缺口**——现有 9 套无法覆盖的真实场景，且能给出反例。
|
|
296
|
+
|
|
297
|
+
> **反面教材**：同色族换名的风格（曾扩到 18 套后删回 9 套）——选项冗余有真实成本。新增门槛见 §10。
|
|
298
|
+
> 这 9 套与前 9 套**同色族换名**（蓝 / 红 / 绿青 / 金棕 / 无彩各多一份），既未引入新色族，也未引入新语汇 → 属于"看上去有用、实际低价值"的选项冗余。
|
|
299
|
+
> 需要"政企庄重 / 东方雅致 / 环保自然"等气质时，用现有 9 套的**组合**近似：`brand-red`（宋体标题）→ 政企庄重；`mckinsey` / `warm-sand`（衬线标题）→ 东方雅致 / 编辑感；`deep-teal` → ESG / 可持续。
|
|
300
|
+
|
|
301
|
+
**配色纪律不变**：除 `spectrum` 外每套**只有一个强调色**，层次靠表面明度差 + 1px 边框；`styleAccents` 收录各套 light/dark 强调色（含派生 hover/active 色），供 `validate_report.py` 做「单一强调色」检查。
|
|
302
|
+
|
|
303
|
+
---
|
|
304
|
+
|
|
305
|
+
## 11. 编码色板（每套风格各 5 色 · 数据专用）
|
|
306
|
+
|
|
307
|
+
> **9 套 ≠ 9 种皮肤而已**：每套风格都带自己的**编码色板 `c1–c5`**，用于多系列图表（多段环形 / 分组柱 / 多折线 / 散点分组 / 桑基流带 / 马赛克段）。这样"数据密集报告"在任何风格下都能出彩色系列，而**结构色仍保持单一强调色**。
|
|
308
|
+
|
|
309
|
+
| 项 | 说明 |
|
|
310
|
+
|----|------|
|
|
311
|
+
| 单源 | `scripts/layout-constants.json` 的 `styleDataColors`（light）/ `styleDataColorsDark`（dark），各 9 套 × 5 色 |
|
|
312
|
+
| HTML 消费 | `engine.css` 的 `html[data-style="X"]{--c1..--c5}` 覆盖块 → 语义类 `.f-c1~c5` / `.s-c1~c5`（由 `sync_runtime.py` 注入模板） |
|
|
313
|
+
| PPTX 消费 | `build_pptx.js` / `pptx-export.js` 的 `dataColors(style, theme)`（按 `model.theme` 选 light/dark 表） |
|
|
314
|
+
| 生成规则 | `c1` = 该风格强调色；`c2`/`c3` = 近似色（±32°/±38°）；`c4`/`c5` = 降饱和补色（168°/205°，饱和度 ×0.6） |
|
|
315
|
+
| 硬约束 | 每色对所在主题 `bg` 对比度 ≥ 3.0；同套内两两色相差 ≥25° 或明度差 ≥0.12（`audit_styles.py` 逐值校验） |
|
|
316
|
+
| 色值格式 | **一律裸 hex（6 位、不带 `#`）**，与 `styles` / `stylesDark` / `styleAccents` 同口径；`#` 前缀会原样流入 PPTX 的 `<a:srgbClr val>` 造成非法色值，`engine.css` 覆盖块与画廊才补 `#`（`audit_styles.py` 校验 + `validate_pptx.py` 的 `INVALID_HEX_COLOR` 硬拦） |
|
|
317
|
+
| 使用边界 | 彩色**只**出现在数据本体（数据系列 / 图例色点 / 小段标签）；同屏 ≤5 系列。**状态类表达（好/坏、达标/未达标、涨/跌）不得用红绿**，仍走强调色明度阶梯 |
|
|
318
|
+
|
|
319
|
+
改色值只改 JSON → 跑 `python scripts/sync_runtime.py`（注入 engine.css 消费端已在 JSON 单源内）→ `python scripts/audit_styles.py`。
|
|
320
|
+
|
|
321
|
+
---
|
|
322
|
+
|
|
323
|
+
## 新增一套风格的步骤
|
|
324
|
+
|
|
325
|
+
> **先过第 10 节的门槛**（新色族 + 新语汇 + 场景缺口，三条全满足）——否则不加。
|
|
326
|
+
|
|
327
|
+
1. 在「快速选型」表加一行（中/英文名 + data-style + 定位 + 适用 + 族）。
|
|
328
|
+
2. 选一个**中性色族**（冷灰/暖灰/纯黑白）+ 一个**强调色**，写 light + dark 两个覆盖块。
|
|
329
|
+
3. 定字体栈（正文 `--font-body`、标题 `--font-display`）、圆角 `--radius`、必要的字号微调。
|
|
330
|
+
4. **五处同步**（缺一即漂移）：
|
|
331
|
+
- `scripts/layout-constants.json` → `styles`（light 10 字段）+ `stylesDark`（dark 10 字段）+ `styleAccents`（强调色族）+ **`styleDataColors` / `styleDataColorsDark`（编码色板 c1–c5，见第 11 节）**
|
|
332
|
+
- `assets/templates/engine.css` → `html[data-style="X"]{…}` + `html[data-style="X"][data-theme="dark"]{…}` + **编码色板两个覆盖块（`--c1..--c5`）**
|
|
333
|
+
- `assets/templates/ui.js` → `var STYLES` 数组加一项（`['id','中文名','#亮色accent']`）
|
|
334
|
+
- 本文件速查表（含第 11 节编码色板表）+ `assets/style-gallery.html` 画廊（配色由注入的 `PRESETS` 自动派生，无需手改）
|
|
335
|
+
5. 跑 `python scripts/sync_runtime.py`（注入到三模板与画廊）→ `python scripts/audit_styles.py`（**9 套** × light/dark × 8 组 WCAG 配对 + 双源逐字段一致 + ui.js 色板一致，全过才通过）→ `python scripts/regression.py`。
|
|
336
|
+
6. 可选：`node scripts/capture_theme_overview.js`（需 playwright）重生成 `assets/theme-overview*.png` 参考图。
|