@bytechain.cn/colamd-themes 0.3.2 → 0.5.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.
Files changed (99) hide show
  1. package/.claude/skills/colamd-themes-preview.skill.md +333 -0
  2. package/.claude/skills/colamd-themes.skill.md +10 -0
  3. package/.dsh/skills/colamd-themes/SKILL.md +14 -0
  4. package/.github/supported-topics.yml +17 -0
  5. package/.hermes/skills/tools/colamd-themes/SKILL.md +14 -0
  6. package/.openclaw/skills/colamd-themes/SKILL.md +1 -37
  7. package/.opencode/skills/colamd-themes/SKILL.md +17 -0
  8. package/.trae/rules/colamd-themes.md +0 -36
  9. package/CHANGELOG.md +331 -241
  10. package/DSH_SUPPORT_SUMMARY.md +87 -0
  11. package/README.md +414 -384
  12. package/README_CN.md +412 -384
  13. package/RELEASENOTE.md +541 -389
  14. package/dist/cli.js +36 -55
  15. package/dist/cli.js.map +1 -1
  16. package/dist/color-utils.d.ts +1 -0
  17. package/dist/color-utils.js +25 -6
  18. package/dist/color-utils.js.map +1 -1
  19. package/dist/extractors/pdf-extractor.js +6 -1
  20. package/dist/extractors/pdf-extractor.js.map +1 -1
  21. package/dist/extractors/url-extractor.d.ts +0 -4
  22. package/dist/extractors/url-extractor.js +13 -126
  23. package/dist/extractors/url-extractor.js.map +1 -1
  24. package/dist/generator.d.ts +1 -1
  25. package/dist/generator.js +32 -11
  26. package/dist/generator.js.map +1 -1
  27. package/dist/models.d.ts +5 -4
  28. package/dist/models.js +2 -3
  29. package/dist/models.js.map +1 -1
  30. package/dist/renderer.d.ts +6 -3
  31. package/dist/renderer.js +54 -93
  32. package/dist/renderer.js.map +1 -1
  33. package/dist/templates/template.css +220 -498
  34. package/dist/templates/theme-paradigm.md +530 -658
  35. package/dist/templates/theme-template.hbs +256 -370
  36. package/dist/theme-store.js +19 -3
  37. package/dist/theme-store.js.map +1 -1
  38. package/dist/utils/document-paradigm.d.ts +12 -0
  39. package/dist/utils/document-paradigm.js +109 -0
  40. package/dist/utils/document-paradigm.js.map +1 -0
  41. package/dist/validators.d.ts +4 -1
  42. package/dist/validators.js +115 -1
  43. package/dist/validators.js.map +1 -1
  44. package/mcp-server/dist/index.d.ts +13 -0
  45. package/mcp-server/dist/index.d.ts.map +1 -0
  46. package/mcp-server/dist/index.js +0 -0
  47. package/mcp-server/dist/index.js.map +1 -0
  48. package/mcp-server/package-lock.json +1759 -0
  49. package/mcp-server/package.json +24 -0
  50. package/mcp-server/src/index.ts +0 -0
  51. package/mcp-server/tsconfig.json +19 -0
  52. package/package.json +54 -36
  53. package/skills/build-skills.sh +30 -5
  54. package/skills/colamd-themes/SKILL.md +180 -178
  55. package/src/cli.ts +474 -487
  56. package/src/color-systems.ts +289 -289
  57. package/src/color-utils.ts +137 -120
  58. package/src/contrast.ts +66 -66
  59. package/src/docx-style-paradigm.ts +811 -811
  60. package/src/export-cli.ts +356 -356
  61. package/src/extractors/base.ts +8 -8
  62. package/src/extractors/docx-extractor.ts +417 -417
  63. package/src/extractors/pdf-extractor.ts +533 -527
  64. package/src/extractors/url-extractor.ts +846 -981
  65. package/src/generator.ts +197 -169
  66. package/src/index.ts +29 -29
  67. package/src/models.ts +212 -212
  68. package/src/renderer.ts +310 -359
  69. package/src/templates/template.css +220 -498
  70. package/src/templates/theme-paradigm.md +530 -658
  71. package/src/templates/theme-template.hbs +256 -370
  72. package/src/theme-store.ts +185 -170
  73. package/src/types/pdf-parse.d.ts +12 -12
  74. package/src/utils/cli-utils.ts +84 -84
  75. package/src/utils/document-paradigm.ts +118 -0
  76. package/src/validators.ts +298 -176
  77. package/themes/academic-paper-pt.css +353 -1805
  78. package/themes/academic-paper.css +350 -1099
  79. package/themes/academic-style.css +342 -2430
  80. package/themes/colly.css +256 -370
  81. package/themes/elegant.css +288 -671
  82. package/themes/forest-ink.css +240 -664
  83. package/themes/guizang.css +250 -732
  84. package/themes/hermes-security.css +279 -0
  85. package/themes/meeting-minutes.css +256 -370
  86. package/themes/pixso-design.css +278 -1261
  87. package/themes/salvator-blog.css +256 -370
  88. package/themes/shimo-theme.css +256 -0
  89. package/themes/swiss-design.css +285 -746
  90. package/themes/template.css +220 -498
  91. package/themes/trae-blue.css +280 -737
  92. package/themes/word-contract.css +249 -0
  93. package/themes-preview/demo-content.md +187 -187
  94. package/tsconfig.json +18 -18
  95. package/src/mermaid-presets.ts +0 -142
  96. package/themes/swiss-design copy.css +0 -746
  97. package/themes-preview/colly-preview.html +0 -623
  98. package/themes-preview/meeting-minutes-preview.html +0 -625
  99. package/themes-preview/salvator-blog-preview.html +0 -623
package/themes/colly.css CHANGED
@@ -1,370 +1,256 @@
1
- /*
2
- * ColaMD Theme: colly
3
- * Theme extracted from url
4
- * Generated by colamd-themes (url: https://colly.com/)
5
- *
6
- * ═══════════════════════════════════════════════════════════
7
- * SECTION 1 — Design Tokens
8
- * Modify the 5 seed colors + 3 font stacks to change the theme
9
- * ═══════════════════════════════════════════════════════════ */
10
-
11
- body.theme-custom {
12
-
13
- /* ── 1.1 Seed Palette ── */
14
- --seed-accent: #2b579a;
15
- --seed-accent-light: rgba(43, 87, 154, 0.15);
16
- --seed-accent-dark: #2b579a;
17
- --seed-surface: #ffffff;
18
- --seed-panel: #f8f8f8;
19
- --seed-panel-alt: #f8f8f8;
20
- --seed-ink: #222222;
21
- --seed-ink-muted: #666666;
22
- --seed-ink-dim: #666666;
23
- --seed-border: #cccccc;
24
- --seed-border-strong: #cccccc;
25
-
26
- /* ── 1.2 Typography ── */
27
- --font-body: "Noto Serif SC", "Source Han Serif SC", "Inter", "SF Pro Text", -apple-system, Georgia, serif;
28
- --font-heading: "Noto Sans SC", "PingFang SC", "Inter", "SF Pro Text", -apple-system, "Microsoft YaHei", sans-serif;
29
- --font-code: "JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, monospace;
30
- --font-mermaid: var(--font-heading);
31
-
32
- /* ── 1.3 Font Sizing ── */
33
- --font-size-root: 16px;
34
- --font-scale-h1: 2;
35
- --font-scale-h2: 1.125;
36
- --font-scale-h3: 1.25;
37
- --font-scale-h4: 1.1;
38
- --font-scale-h5: 1;
39
- --font-scale-h6: 0.95;
40
- --font-size-mermaid: 13px;
41
- --line-height-body: 1.75;
42
- --line-height-heading: 1.35;
43
- --line-height-code: 1.6;
44
-
45
- /* ── 1.4 Radii & Spacing ── */
46
- --radius-sm: 3px;
47
- --radius-md: 6px;
48
- --radius-lg: 10px;
49
- --content-width: 820px;
50
-
51
- /* ═══════════════════════════════════════════════════════════
52
- SECTION 2 — Semantic Mapping
53
- Auto-maps seed tokens → ColaMD built-in variables
54
- ═══════════════════════════════════════════════════════════ */
55
-
56
- /* ── 2.1 Surface ── */
57
- --bg-color: var(--seed-surface);
58
- --surface-color: var(--seed-panel);
59
- --surface-alt: var(--seed-panel-alt);
60
-
61
- /* ── 2.2 Text ── */
62
- --text-color: var(--seed-ink);
63
- --heading-color: var(--seed-ink);
64
- --text-muted: var(--seed-ink-muted);
65
- --text-dim: var(--seed-ink-dim);
66
-
67
- /* ── 2.3 Links & Accent ── */
68
- --link-color: var(--seed-accent);
69
- --accent-color: var(--seed-accent);
70
- --accent-dark: var(--seed-accent-dark);
71
- --accent-light: var(--seed-accent-light);
72
- --selection-bg: rgba(43, 87, 154, 0.15);
73
-
74
- /* ── 2.4 Borders ── */
75
- --border-color: var(--seed-border);
76
- --blockquote-border: var(--seed-accent);
77
- --hr-color: var(--seed-border);
78
-
79
- /* ── 2.5 Inline Code ── */
80
- --code-bg: var(--seed-panel);
81
- --code-color: var(--seed-accent-dark);
82
-
83
- /* ── 2.6 Code Blocks ── */
84
- --code-block-bg: var(--seed-panel-alt);
85
- --code-block-text: var(--seed-ink);
86
- --code-block-color: var(--seed-ink);
87
-
88
- /* ── 2.7 Blockquote ── */
89
- --blockquote-bg: var(--seed-panel);
90
-
91
- /* ── 2.8 Tables ── */
92
- --table-header-bg: var(--seed-panel);
93
- --table-border: var(--seed-border);
94
-
95
- /* ── 2.9 Scrollbar ── */
96
- --scrollbar-thumb: var(--seed-border-strong);
97
- --scrollbar-thumb-hover: var(--seed-ink-muted);
98
-
99
- /* ═══════════════════════════════════════════════════════════
100
- SECTION 3 — Mermaid 20 Core Variables
101
- Auto-consumed by built-in variables.css for 22 diagram types
102
- ═══════════════════════════════════════════════════════════ */
103
-
104
- /* ── 3.1 Container ── */
105
- --mermaid-background: var(--seed-panel);
106
- --mermaid-border-color: var(--seed-border);
107
- --mermaid-border-radius: var(--radius-md);
108
- --mermaid-padding: 20px;
109
-
110
- /* ── 3.2 Font ── */
111
- --mermaid-font-family: var(--font-mermaid);
112
- --mermaid-font-size: var(--font-size-mermaid);
113
-
114
- /* ── 3.3 Nodes ── */
115
- --mermaid-node-fill: var(--seed-panel);
116
- --mermaid-node-stroke: var(--seed-accent);
117
- --mermaid-node-stroke-width: 1.5px;
118
- --mermaid-node-text: var(--seed-ink);
119
-
120
- /* ── 3.4 Edges ── */
121
- --mermaid-edge-stroke: var(--seed-ink-muted);
122
- --mermaid-edge-stroke-width: 1.5px;
123
-
124
- /* ── 3.5 Clusters ── */
125
- --mermaid-cluster-fill: rgba(43, 87, 154, 0.06);
126
- --mermaid-cluster-stroke: var(--seed-accent);
127
-
128
- /* ── 3.6 Labels ── */
129
- --mermaid-label-text: var(--seed-ink);
130
- --mermaid-edge-label-text: var(--seed-ink-muted);
131
- --mermaid-edge-label-bg: var(--seed-surface);
132
-
133
- /* ── 3.7 Titles & Axes ── */
134
- --mermaid-title-text: var(--seed-ink);
135
- --mermaid-axis-text: var(--seed-ink-muted);
136
- --mermaid-highlight: var(--seed-accent);
137
-
138
- /* ── 3.8 Person Nodes ── */
139
- --mermaid-person-stroke: var(--seed-ink);
140
- --mermaid-person-fill: var(--seed-panel);
141
-
142
- /* ── 3.9 Label Offset ── */
143
- --mermaid-label-offset-y: 0px;
144
-
145
- /* ── 4. Fine Tuning ── */
146
- --line-height-base: var(--line-height-body);
147
- }
148
-
149
- /* ═══════════════════════════════════════════════════════════
150
- SECTION 5 — Selector-Level Micro Adjustments
151
- Only where base.css doesn't cover. All values via var(--*).
152
- ═══════════════════════════════════════════════════════════ */
153
-
154
- html { font-size: var(--font-size-root); }
155
- body.theme-custom, html, body {
156
- background-color: var(--bg-color);
157
- color: var(--text-color);
158
- font-family: var(--font-body);
159
- line-height: var(--line-height-body);
160
- }
161
-
162
- #write {
163
- max-width: var(--content-width);
164
- margin: 0 auto;
165
- padding: 30px 60px 100px;
166
- }
167
-
168
- body.theme-custom h1, body.theme-custom h2, body.theme-custom h3,
169
- body.theme-custom h4, body.theme-custom h5, body.theme-custom h6 {
170
- font-family: var(--font-heading);
171
- color: var(--heading-color);
172
- font-weight: 700;
173
- line-height: var(--line-height-heading);
174
- }
175
-
176
- body.theme-custom h1 { font-size: calc(var(--font-size-root) * var(--font-scale-h1)); }
177
- body.theme-custom h2 { font-size: calc(var(--font-size-root) * var(--font-scale-h2)); }
178
- body.theme-custom h3 { font-size: calc(var(--font-size-root) * var(--font-scale-h3)); }
179
- body.theme-custom h4 { font-size: calc(var(--font-size-root) * var(--font-scale-h4)); }
180
- body.theme-custom h5 { font-size: calc(var(--font-size-root) * var(--font-scale-h5)); }
181
- body.theme-custom h6 { font-size: calc(var(--font-size-root) * var(--font-scale-h6)); }
182
-
183
- body.theme-custom strong { color: var(--accent-color); }
184
- body.theme-custom code {
185
- font-family: var(--font-code);
186
- background: var(--code-bg);
187
- color: var(--code-color);
188
- }
189
-
190
- body.theme-custom pre {
191
- background: var(--code-block-bg);
192
- font-family: var(--font-code);
193
- line-height: var(--line-height-code);
194
- }
195
- body.theme-custom pre code { color: var(--code-block-text); background: transparent; }
196
-
197
- body.theme-custom blockquote {
198
- background: var(--blockquote-bg);
199
- border-left: 4px solid var(--blockquote-border);
200
- }
201
-
202
- body.theme-custom table th {
203
- background: var(--table-header-bg);
204
- font-weight: 700;
205
- border-bottom: 2px solid var(--accent-color);
206
- }
207
-
208
- body.theme-custom hr {
209
- border: none;
210
- border-top: 1px solid var(--hr-color);
211
- }
212
-
213
- body.theme-custom img { max-width: 100%; }
214
-
215
- /* ── 5.11 Mermaid caption ── */
216
- body.theme-custom .mermaid-block + p {
217
- text-align: center;
218
- font-family: var(--font-heading);
219
- font-size: calc(var(--font-size-mermaid) + 2px);
220
- color: var(--text-muted);
221
- }
222
-
223
- /* ── 5.12 Responsive ── */
224
- @media only screen and (max-width: 768px) {
225
- #write { padding: 20px; }
226
- body.theme-custom .mermaid-block { padding: 12px; }
227
- }
228
-
229
- /* ═══════════════════════════════════════════════════════════
230
- SECTION 6 — Print / Export
231
- Screen mirror: every screen property restated with !important.
232
- ═══════════════════════════════════════════════════════════ */
233
- @media print {
234
- @page { margin: 20mm; }
235
-
236
- /* ── 6.0 Variable re-declaration (Chromium strips CSS variables in print) ── */
237
- body.theme-custom {
238
- --seed-accent: #2b579a;
239
- --seed-accent-dark: #2b579a;
240
- --seed-surface: #ffffff;
241
- --seed-ink: #222222;
242
- --seed-ink-muted: #666666;
243
- --seed-panel: #f8f8f8;
244
- --seed-panel-alt: #f8f8f8;
245
- --seed-border: #cccccc;
246
- --font-size-root: 16px;
247
- --line-height-body: 1.75;
248
- --line-height-heading: 1.35;
249
- --line-height-code: 1.6;
250
- --font-scale-h1: 2;
251
- --font-scale-h2: 1.125;
252
- --font-scale-h3: 1.25;
253
- --font-scale-h4: 1.1;
254
- --font-scale-h5: 1;
255
- --font-scale-h6: 0.95;
256
- --content-width: 820px;
257
- --font-size-mermaid: 13px;
258
- --accent-color: var(--seed-accent);
259
- --accent-dark: var(--seed-accent-dark);
260
- --code-bg: var(--seed-panel);
261
- --code-color: var(--seed-accent-dark);
262
- --code-block-bg: var(--seed-panel-alt);
263
- --code-block-text: var(--seed-ink);
264
- --blockquote-bg: var(--seed-panel);
265
- --table-header-bg: var(--seed-panel);
266
- --border-color: var(--seed-border);
267
- --hr-color: var(--seed-border);
268
- }
269
-
270
- html, body, body.theme-custom {
271
- background: var(--seed-surface) !important;
272
- color: var(--seed-ink) !important;
273
- font-family: var(--font-body) !important;
274
- line-height: var(--line-height-body) !important;
275
- -webkit-print-color-adjust: exact !important;
276
- print-color-adjust: exact !important;
277
- }
278
-
279
- #write {
280
- max-width: var(--content-width) !important;
281
- margin: 0 auto !important;
282
- padding: 30px 60px 100px !important;
283
- }
284
-
285
- body.theme-custom h1, body.theme-custom h2, body.theme-custom h3,
286
- body.theme-custom h4, body.theme-custom h5, body.theme-custom h6 {
287
- font-family: var(--font-heading) !important;
288
- color: var(--seed-ink) !important;
289
- font-weight: 700 !important;
290
- line-height: var(--line-height-heading) !important;
291
- -webkit-print-color-adjust: exact !important;
292
- print-color-adjust: exact !important;
293
- }
294
- body.theme-custom h1 { font-size: calc(var(--font-size-root) * var(--font-scale-h1)) !important; }
295
- body.theme-custom h2 { font-size: calc(var(--font-size-root) * var(--font-scale-h2)) !important; }
296
- body.theme-custom h3 { font-size: calc(var(--font-size-root) * var(--font-scale-h3)) !important; }
297
- body.theme-custom h4 { font-size: calc(var(--font-size-root) * var(--font-scale-h4)) !important; }
298
- body.theme-custom h5 { font-size: calc(var(--font-size-root) * var(--font-scale-h5)) !important; }
299
- body.theme-custom h6 { font-size: calc(var(--font-size-root) * var(--font-scale-h6)) !important; }
300
-
301
- body.theme-custom strong {
302
- color: var(--accent-color) !important;
303
- -webkit-print-color-adjust: exact !important;
304
- print-color-adjust: exact !important;
305
- }
306
-
307
- body.theme-custom code {
308
- font-family: var(--font-code) !important;
309
- background: var(--code-bg) !important;
310
- color: var(--code-color) !important;
311
- -webkit-print-color-adjust: exact !important;
312
- print-color-adjust: exact !important;
313
- }
314
-
315
- body.theme-custom pre {
316
- background: var(--code-block-bg) !important;
317
- font-family: var(--font-code) !important;
318
- line-height: var(--line-height-code) !important;
319
- -webkit-print-color-adjust: exact !important;
320
- print-color-adjust: exact !important;
321
- }
322
- body.theme-custom pre code { color: var(--code-block-text) !important; background: transparent !important; }
323
-
324
- body.theme-custom blockquote {
325
- background: var(--blockquote-bg) !important;
326
- border-left: 4px solid var(--seed-accent) !important;
327
- -webkit-print-color-adjust: exact !important;
328
- print-color-adjust: exact !important;
329
- }
330
-
331
- body.theme-custom table th {
332
- background: var(--table-header-bg) !important;
333
- color: var(--seed-ink) !important;
334
- font-weight: 700 !important;
335
- border-bottom: 2px solid var(--accent-color) !important;
336
- -webkit-print-color-adjust: exact !important;
337
- print-color-adjust: exact !important;
338
- }
339
-
340
- body.theme-custom a {
341
- color: var(--seed-accent) !important;
342
- -webkit-print-color-adjust: exact !important;
343
- print-color-adjust: exact !important;
344
- }
345
-
346
- body.theme-custom hr {
347
- border: none !important;
348
- border-top: 1px solid var(--hr-color) !important;
349
- }
350
-
351
- body.theme-custom img { max-width: 100% !important; }
352
-
353
- body.theme-custom .mermaid-block {
354
- background: var(--seed-surface) !important;
355
- border-color: var(--seed-border) !important;
356
- -webkit-print-color-adjust: exact !important;
357
- print-color-adjust: exact !important;
358
- }
359
- body.theme-custom .mermaid-preview svg * {
360
- -webkit-print-color-adjust: exact !important;
361
- print-color-adjust: exact !important;
362
- }
363
-
364
- body.theme-custom .mermaid-block + p {
365
- color: var(--seed-ink-muted) !important;
366
- text-align: center !important;
367
- font-family: var(--font-heading) !important;
368
- font-size: calc(var(--font-size-mermaid) + 2px) !important;
369
- }
370
- }
1
+ /*
2
+ * ColaMD Theme: Colly
3
+ * Colly — ColaMD 2.7 主题
4
+ * Generated by colamd-themes (url: https://github.com/byteuser1977/ColaMD-themes)
5
+ *
6
+ * 契约:ColaMD Extend 2.7(CodeMirror 6 编辑器 + Pele 图表引擎)
7
+ *
8
+ * 两条硬规矩:
9
+ * 1. 变量一律写在 :root。没写的活变量继承 Light 主题默认值;写在别的选择器里
10
+ * 编辑器继承不到。
11
+ * 2. 编辑器里没有 <h1>/<blockquote> 这种元素:标题是「一行」带一个类,引用与
12
+ * 代码块是每一行一个 div,加粗是一个 span。所以选择器只认 .cm-md-* 钩子,
13
+ * 并且引用/代码块**不能加纵向 padding**——那会按行累加。
14
+ *
15
+ * ═══════════════════════════════════════════════════════════
16
+ * SECTION 1 — Design Tokens
17
+ * 改 11 个种子色 + 3 组字体即可换一套主题
18
+ * ═══════════════════════════════════════════════════════════ */
19
+
20
+ :root {
21
+
22
+ /* ── 1.1 Seed Palette ──
23
+ 本工具的再生成与校验读这一层;编辑器不消费。 */
24
+ --seed-accent: #2b579a;
25
+ --seed-accent-light: rgba(43, 87, 154, 0.15);
26
+ --seed-accent-dark: #2b579a;
27
+ --seed-surface: #ffffff;
28
+ --seed-panel: #f8f8f8;
29
+ --seed-panel-alt: #f0f0f0;
30
+ --seed-ink: #222222;
31
+ --seed-ink-muted: #666666;
32
+ --seed-ink-dim: #666666;
33
+ --seed-border: #cccccc;
34
+ --seed-border-strong: #cccccc;
35
+
36
+ /* ── 1.2 Semantic Colors(活变量)── */
37
+ --bg-color: var(--seed-surface);
38
+ --text-color: var(--seed-ink);
39
+ --text-secondary: var(--seed-ink-muted);
40
+ --text-muted: var(--seed-ink-dim);
41
+ --border-color: var(--seed-border);
42
+ --link-color: var(--seed-accent);
43
+
44
+ --code-bg: var(--seed-panel);
45
+ --code-block-bg: var(--seed-panel-alt);
46
+ --code-block-text: #222222;
47
+
48
+ --blockquote-border: var(--seed-accent);
49
+ --blockquote-bg: var(--seed-panel);
50
+ --table-header-bg: var(--seed-panel);
51
+
52
+ --selection-bg: rgba(43, 87, 154, 0.18);
53
+ --highlight-bg: rgba(43, 87, 154, 0.18);
54
+
55
+ /* ── 1.3 Typography & Metrics(活变量)── */
56
+ --font-body: "Noto Serif SC", "Source Han Serif SC", "Inter", "SF Pro Text", -apple-system, Georgia, serif;
57
+ --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, monospace;
58
+ --editor-font-size: 16px;
59
+ --editor-column-width: 820px;
60
+
61
+ /* ── 1.4 Pele Diagram(9 个变量,全部可省略)──
62
+ 图直接画在代码块底色上,所以底色与字色都从 --code-block-* 推导。 */
63
+ --pele-bg: var(--code-block-bg);
64
+ --pele-fg: var(--code-block-text);
65
+ --pele-muted: color-mix(in srgb, var(--code-block-text) 70%, var(--code-block-bg));
66
+ --pele-line: var(--code-block-text);
67
+ --pele-surface: color-mix(in srgb, var(--code-block-text) 18%, var(--code-block-bg));
68
+ --pele-surface-alt: color-mix(in srgb, var(--code-block-text) 28%, var(--code-block-bg));
69
+ --pele-border: color-mix(in srgb, var(--code-block-text) 45%, var(--code-block-bg));
70
+ --pele-accent: var(--link-color);
71
+ --pele-radius: 6px;
72
+ }
73
+
74
+ /* ═══════════════════════════════════════════════════════════
75
+ SECTION 2 — Editor DOM(#editor .cm-content + .cm-md-*)
76
+ ═══════════════════════════════════════════════════════════ */
77
+
78
+ #editor .cm-content {
79
+ font-family: var(--font-body);
80
+ line-height: 1.75;
81
+ }
82
+
83
+ /* ── 2.1 Headings ── */
84
+ #editor .cm-content .cm-md-atxheading1,
85
+ #editor .cm-content .cm-md-atxheading2,
86
+ #editor .cm-content .cm-md-atxheading3,
87
+ #editor .cm-content .cm-md-atxheading4,
88
+ #editor .cm-content .cm-md-atxheading5,
89
+ #editor .cm-content .cm-md-atxheading6 {
90
+ font-family: "Noto Sans SC", "PingFang SC", "Inter", "SF Pro Text", -apple-system, "Microsoft YaHei", sans-serif;
91
+ color: var(--text-color);
92
+ font-weight: 700;
93
+ line-height: 1.35;
94
+ }
95
+
96
+ #editor .cm-content .cm-md-atxheading1 {
97
+ font-size: 2em;
98
+ padding-bottom: 0.3em;
99
+ border-bottom: 1px solid var(--border-color);
100
+ }
101
+ #editor .cm-content .cm-md-atxheading2 {
102
+ font-size: 1.125em;
103
+ padding-bottom: 0.25em;
104
+ border-bottom: 1px solid var(--border-color);
105
+ }
106
+ #editor .cm-content .cm-md-atxheading3 { font-size: 1.25em; }
107
+ #editor .cm-content .cm-md-atxheading4 { font-size: 1.1em; }
108
+ #editor .cm-content .cm-md-atxheading5 { font-size: 1em; }
109
+ #editor .cm-content .cm-md-atxheading6 { font-size: 0.95em; }
110
+
111
+ /* ── 2.2 Inline ── */
112
+ #editor .cm-content .cm-md-strong { color: var(--link-color); font-weight: 700; }
113
+ #editor .cm-content .cm-md-em { font-style: italic; }
114
+ #editor .cm-content .cm-md-strike { text-decoration: line-through; }
115
+ #editor .cm-content .cm-md-highlight { background: var(--highlight-bg); }
116
+ #editor .cm-content .cm-md-link { color: var(--link-color); }
117
+ #editor .cm-content .cm-md-url { color: var(--text-muted); }
118
+
119
+ #editor .cm-content .cm-md-inlinecode {
120
+ font-family: var(--font-mono);
121
+ background: var(--code-bg);
122
+ color: var(--text-color);
123
+ border-radius: 3px;
124
+ }
125
+
126
+ #editor .cm-content .cm-md-marker,
127
+ #editor .cm-content .cm-md-quotemark,
128
+ #editor .cm-content .cm-md-listmark {
129
+ color: var(--text-muted);
130
+ }
131
+
132
+ /* ── 2.3 Blockquote / Code Block(每行一个 div,禁用纵向 padding)── */
133
+ #editor .cm-content .cm-md-blockquote {
134
+ background: var(--blockquote-bg);
135
+ color: var(--text-secondary);
136
+ border-left: 3px solid var(--blockquote-border);
137
+ padding-left: 16px;
138
+ padding-right: 16px;
139
+ }
140
+
141
+ #editor .cm-content .cm-md-codeblock {
142
+ background: var(--code-block-bg);
143
+ color: var(--code-block-text);
144
+ padding-left: 16px;
145
+ padding-right: 16px;
146
+ }
147
+ #editor .cm-content .cm-md-codeblock-first {
148
+ border-top-left-radius: 6px;
149
+ border-top-right-radius: 6px;
150
+ }
151
+ #editor .cm-content .cm-md-codeblock-last {
152
+ border-bottom-left-radius: 6px;
153
+ border-bottom-right-radius: 6px;
154
+ }
155
+
156
+ /* ── 2.4 Table / Rule ── */
157
+ #editor .cm-content .cm-md-table-widget th,
158
+ #editor .cm-content .cm-md-table-widget td {
159
+ border-color: var(--border-color);
160
+ }
161
+ #editor .cm-content .cm-md-table-widget th {
162
+ background: var(--table-header-bg);
163
+ color: var(--text-color);
164
+ font-weight: 700;
165
+ border-bottom: 2px solid var(--link-color);
166
+ }
167
+ #editor .cm-content .cm-md-hr { border-top-color: var(--border-color); }
168
+
169
+ /* ── 2.5 中文首行缩进 ──
170
+ CM6 里一行就是一个 div:段落缩进落在 .cm-line 上,标题/引用/代码/列表行归零。 */
171
+ #editor .cm-content .cm-line { text-indent: 2em; }
172
+
173
+ #editor .cm-content .cm-md-atxheading1,
174
+ #editor .cm-content .cm-md-atxheading2,
175
+ #editor .cm-content .cm-md-atxheading3,
176
+ #editor .cm-content .cm-md-atxheading4,
177
+ #editor .cm-content .cm-md-atxheading5,
178
+ #editor .cm-content .cm-md-atxheading6,
179
+ #editor .cm-content .cm-md-blockquote,
180
+ #editor .cm-content .cm-md-codeblock,
181
+ #editor .cm-content .cm-md-hr,
182
+ #editor .cm-content .cm-md-mermaid,
183
+ #editor .cm-content .cm-md-li-0,
184
+ #editor .cm-content .cm-md-li-1,
185
+ #editor .cm-content .cm-md-li-2,
186
+ #editor .cm-content .cm-md-li-3,
187
+ #editor .cm-content .cm-md-li-4,
188
+ #editor .cm-content .cm-md-li-5,
189
+ #editor .cm-content .cm-md-li-6 {
190
+ text-indent: 0;
191
+ }
192
+
193
+ /* ═══════════════════════════════════════════════════════════
194
+ SECTION 3 — Exported HTML(.colamd-document,语义标签)
195
+ HTML/PDF 导出不走编辑器 DOM;这段让导出件沿用同一套配色。
196
+ ═══════════════════════════════════════════════════════════ */
197
+
198
+ .colamd-document {
199
+ font-family: var(--font-body);
200
+ font-size: 16px;
201
+ line-height: 1.75;
202
+ }
203
+
204
+ .colamd-document h1,
205
+ .colamd-document h2,
206
+ .colamd-document h3,
207
+ .colamd-document h4,
208
+ .colamd-document h5,
209
+ .colamd-document h6 {
210
+ font-family: "Noto Sans SC", "PingFang SC", "Inter", "SF Pro Text", -apple-system, "Microsoft YaHei", sans-serif;
211
+ color: var(--text-color);
212
+ line-height: 1.35;
213
+ }
214
+
215
+ .colamd-document strong { color: var(--link-color); }
216
+ .colamd-document code {
217
+ background: var(--code-bg);
218
+ color: var(--text-color);
219
+ font-family: var(--font-mono);
220
+ }
221
+ .colamd-document pre { background: var(--code-block-bg); }
222
+ .colamd-document pre code { color: var(--code-block-text); }
223
+ .colamd-document blockquote {
224
+ background: var(--blockquote-bg);
225
+ color: var(--text-secondary);
226
+ border-left-color: var(--blockquote-border);
227
+ }
228
+ .colamd-document mark { background: var(--highlight-bg); }
229
+ .colamd-document th {
230
+ background: var(--table-header-bg);
231
+ border-bottom: 2px solid var(--link-color);
232
+ }
233
+ .colamd-document hr { border-top-color: var(--border-color); }
234
+
235
+ .colamd-document p { text-indent: 2em; }
236
+ .colamd-document li p,
237
+ .colamd-document td p,
238
+ .colamd-document th p,
239
+ .colamd-document blockquote p {
240
+ text-indent: 0;
241
+ }
242
+
243
+ /* ═══════════════════════════════════════════════════════════
244
+ SECTION 4 — Print
245
+ 应用直接对当前窗口 printToPDF,屏幕规则原样生效;这里只补保真。
246
+ ═══════════════════════════════════════════════════════════ */
247
+
248
+ @media print {
249
+ html,
250
+ body {
251
+ background: var(--bg-color);
252
+ color: var(--text-color);
253
+ -webkit-print-color-adjust: exact;
254
+ print-color-adjust: exact;
255
+ }
256
+ }