@bytechain.cn/colamd-themes 0.3.2 → 0.5.1

package/src/templates/theme-template.hbs

@@ -1,370 +1,256 @@
-/*
- * ColaMD Theme: {{ name }}
- * {{ description }}
- * Generated by colamd-themes ({{ sourceType }}: {{ sourceUrl }})
- *
- * ═══════════════════════════════════════════════════════════
- *   SECTION 1 — Design Tokens
- *   Modify the 5 seed colors + 3 font stacks to change the theme
- * ═══════════════════════════════════════════════════════════ */
-
-body.theme-custom {
-
-  /* ── 1.1 Seed Palette ── */
-  --seed-accent:        {{ seed.accent }};
-  --seed-accent-light:  {{ seed.accentLight }};
-  --seed-accent-dark:   {{ seed.accentDark }};
-  --seed-surface:       {{ seed.surface }};
-  --seed-panel:         {{ seed.panel }};
-  --seed-panel-alt:     {{ seed.panelAlt }};
-  --seed-ink:           {{ seed.ink }};
-  --seed-ink-muted:     {{ seed.inkMuted }};
-  --seed-ink-dim:       {{ seed.inkDim }};
-  --seed-border:        {{ seed.border }};
-  --seed-border-strong: {{ seed.borderStrong }};
-
-  /* ── 1.2 Typography ── */
-  --font-body:    {{{ seedTypography.fontBody }}};
-  --font-heading: {{{ seedTypography.fontHeading }}};
-  --font-code:    {{{ seedTypography.fontCode }}};
-  --font-mermaid: {{ seedTypography.fontMermaid }};
-
-  /* ── 1.3 Font Sizing ── */
-  --font-size-root:     {{ seedTypography.fontSizeRoot }};
-  --font-scale-h1:      {{ seedTypography.fontScaleH1 }};
-  --font-scale-h2:      {{ seedTypography.fontScaleH2 }};
-  --font-scale-h3:      {{ seedTypography.fontScaleH3 }};
-  --font-scale-h4:      {{ seedTypography.fontScaleH4 }};
-  --font-scale-h5:      {{ seedTypography.fontScaleH5 }};
-  --font-scale-h6:      {{ seedTypography.fontScaleH6 }};
-  --font-size-mermaid:  {{ seedTypography.fontSizeMermaid }};
-  --line-height-body:   {{ seedTypography.lineHeightBody }};
-  --line-height-heading: {{ seedTypography.lineHeightHeading }};
-  --line-height-code:   {{ seedTypography.lineHeightCode }};
-
-  /* ── 1.4 Radii & Spacing ── */
-  --radius-sm: {{ radiusSm }};
-  --radius-md: {{ radiusMd }};
-  --radius-lg: {{ radiusLg }};
-  --content-width: {{ contentWidth }};
-
-  /* ═══════════════════════════════════════════════════════════
-     SECTION 2 — Semantic Mapping
-     Auto-maps seed tokens → ColaMD built-in variables
-     ═══════════════════════════════════════════════════════════ */
-
-  /* ── 2.1 Surface ── */
-  --bg-color:      var(--seed-surface);
-  --surface-color: var(--seed-panel);
-  --surface-alt:   var(--seed-panel-alt);
-
-  /* ── 2.2 Text ── */
-  --text-color:    var(--seed-ink);
-  --heading-color: var(--seed-ink);
-  --text-muted:    var(--seed-ink-muted);
-  --text-dim:      var(--seed-ink-dim);
-
-  /* ── 2.3 Links & Accent ── */
-  --link-color:   var(--seed-accent);
-  --accent-color: var(--seed-accent);
-  --accent-dark:  var(--seed-accent-dark);
-  --accent-light: var(--seed-accent-light);
-  --selection-bg: {{rgba seed.accent 0.15}};
-
-  /* ── 2.4 Borders ── */
-  --border-color:      var(--seed-border);
-  --blockquote-border: var(--seed-accent);
-  --hr-color:          var(--seed-border);
-
-  /* ── 2.5 Inline Code ── */
-  --code-bg:    var(--seed-panel);
-  --code-color: var(--seed-accent-dark);
-
-  /* ── 2.6 Code Blocks ── */
-  --code-block-bg:    var(--seed-panel-alt);
-  --code-block-text:  var(--seed-ink);
-  --code-block-color: var(--seed-ink);
-
-  /* ── 2.7 Blockquote ── */
-  --blockquote-bg: var(--seed-panel);
-
-  /* ── 2.8 Tables ── */
-  --table-header-bg: var(--seed-panel);
-  --table-border:    var(--seed-border);
-
-  /* ── 2.9 Scrollbar ── */
-  --scrollbar-thumb:       var(--seed-border-strong);
-  --scrollbar-thumb-hover: var(--seed-ink-muted);
-
-  /* ═══════════════════════════════════════════════════════════
-     SECTION 3 — Mermaid 20 Core Variables
-     Auto-consumed by built-in variables.css for 22 diagram types
-     ═══════════════════════════════════════════════════════════ */
-
-  /* ── 3.1 Container ── */
-  --mermaid-background:    var(--seed-panel);
-  --mermaid-border-color:  var(--seed-border);
-  --mermaid-border-radius: var(--radius-md);
-  --mermaid-padding:       20px;
-
-  /* ── 3.2 Font ── */
-  --mermaid-font-family: var(--font-mermaid);
-  --mermaid-font-size:   var(--font-size-mermaid);
-
-  /* ── 3.3 Nodes ── */
-  --mermaid-node-fill:         var(--seed-panel);
-  --mermaid-node-stroke:       var(--seed-accent);
-  --mermaid-node-stroke-width: 1.5px;
-  --mermaid-node-text:         var(--seed-ink);
-
-  /* ── 3.4 Edges ── */
-  --mermaid-edge-stroke:       var(--seed-ink-muted);
-  --mermaid-edge-stroke-width: 1.5px;
-
-  /* ── 3.5 Clusters ── */
-  --mermaid-cluster-fill:   {{rgba seed.accent 0.06}};
-  --mermaid-cluster-stroke: var(--seed-accent);
-
-  /* ── 3.6 Labels ── */
-  --mermaid-label-text:      var(--seed-ink);
-  --mermaid-edge-label-text: var(--seed-ink-muted);
-  --mermaid-edge-label-bg:   var(--seed-surface);
-
-  /* ── 3.7 Titles & Axes ── */
-  --mermaid-title-text: var(--seed-ink);
-  --mermaid-axis-text:  var(--seed-ink-muted);
-  --mermaid-highlight:  var(--seed-accent);
-
-  /* ── 3.8 Person Nodes ── */
-  --mermaid-person-stroke: var(--seed-ink);
-  --mermaid-person-fill:   var(--seed-panel);
-
-  /* ── 3.9 Label Offset ── */
-  --mermaid-label-offset-y: 0px;
-
-  /* ── 4. Fine Tuning ── */
-  --line-height-base: var(--line-height-body);
-}
-
-/* ═══════════════════════════════════════════════════════════
-   SECTION 5 — Selector-Level Micro Adjustments
-   Only where base.css doesn't cover. All values via var(--*).
-   ═══════════════════════════════════════════════════════════ */
-
-html { font-size: var(--font-size-root); }
-body.theme-custom, html, body {
-  background-color: var(--bg-color);
-  color: var(--text-color);
-  font-family: var(--font-body);
-  line-height: var(--line-height-body);
-}
-
-#write {
-  max-width: var(--content-width);
-  margin: 0 auto;
-  padding: 30px 60px 100px;
-}
-
-body.theme-custom h1, body.theme-custom h2, body.theme-custom h3,
-body.theme-custom h4, body.theme-custom h5, body.theme-custom h6 {
-  font-family: var(--font-heading);
-  color: var(--heading-color);
-  font-weight: 700;
-  line-height: var(--line-height-heading);
-}
-
-body.theme-custom h1 { font-size: calc(var(--font-size-root) * var(--font-scale-h1)); }
-body.theme-custom h2 { font-size: calc(var(--font-size-root) * var(--font-scale-h2)); }
-body.theme-custom h3 { font-size: calc(var(--font-size-root) * var(--font-scale-h3)); }
-body.theme-custom h4 { font-size: calc(var(--font-size-root) * var(--font-scale-h4)); }
-body.theme-custom h5 { font-size: calc(var(--font-size-root) * var(--font-scale-h5)); }
-body.theme-custom h6 { font-size: calc(var(--font-size-root) * var(--font-scale-h6)); }
-
-body.theme-custom strong { color: var(--accent-color); }
-body.theme-custom code {
-  font-family: var(--font-code);
-  background: var(--code-bg);
-  color: var(--code-color);
-}
-
-body.theme-custom pre {
-  background: var(--code-block-bg);
-  font-family: var(--font-code);
-  line-height: var(--line-height-code);
-}
-body.theme-custom pre code { color: var(--code-block-text); background: transparent; }
-
-body.theme-custom blockquote {
-  background: var(--blockquote-bg);
-  border-left: 4px solid var(--blockquote-border);
-}
-
-body.theme-custom table th {
-  background: var(--table-header-bg);
-  font-weight: 700;
-  border-bottom: 2px solid var(--accent-color);
-}
-
-body.theme-custom hr {
-  border: none;
-  border-top: 1px solid var(--hr-color);
-}
-
-body.theme-custom img { max-width: 100%; }
-
-/* ── 5.11 Mermaid caption ── */
-body.theme-custom .mermaid-block + p {
-  text-align: center;
-  font-family: var(--font-heading);
-  font-size: calc(var(--font-size-mermaid) + 2px);
-  color: var(--text-muted);
-}
-
-/* ── 5.12 Responsive ── */
-@media only screen and (max-width: 768px) {
-  #write { padding: 20px; }
-  body.theme-custom .mermaid-block { padding: 12px; }
-}
-
-/* ═══════════════════════════════════════════════════════════
-   SECTION 6 — Print / Export
-   Screen mirror: every screen property restated with !important.
-   ═══════════════════════════════════════════════════════════ */
-@media print {
-  @page { margin: 20mm; }
-
-  /* ── 6.0 Variable re-declaration (Chromium strips CSS variables in print) ── */
-  body.theme-custom {
-    --seed-accent:       {{ seed.accent }};
-    --seed-accent-dark:  {{ seed.accentDark }};
-    --seed-surface:      {{ seed.surface }};
-    --seed-ink:          {{ seed.ink }};
-    --seed-ink-muted:    {{ seed.inkMuted }};
-    --seed-panel:        {{ seed.panel }};
-    --seed-panel-alt:    {{ seed.panelAlt }};
-    --seed-border:       {{ seed.border }};
-    --font-size-root:    {{ seedTypography.fontSizeRoot }};
-    --line-height-body:  {{ seedTypography.lineHeightBody }};
-    --line-height-heading: {{ seedTypography.lineHeightHeading }};
-    --line-height-code:  {{ seedTypography.lineHeightCode }};
-    --font-scale-h1:     {{ seedTypography.fontScaleH1 }};
-    --font-scale-h2:     {{ seedTypography.fontScaleH2 }};
-    --font-scale-h3:     {{ seedTypography.fontScaleH3 }};
-    --font-scale-h4:     {{ seedTypography.fontScaleH4 }};
-    --font-scale-h5:     {{ seedTypography.fontScaleH5 }};
-    --font-scale-h6:     {{ seedTypography.fontScaleH6 }};
-    --content-width:     {{ contentWidth }};
-    --font-size-mermaid: {{ seedTypography.fontSizeMermaid }};
-    --accent-color:      var(--seed-accent);
-    --accent-dark:       var(--seed-accent-dark);
-    --code-bg:           var(--seed-panel);
-    --code-color:        var(--seed-accent-dark);
-    --code-block-bg:     var(--seed-panel-alt);
-    --code-block-text:   var(--seed-ink);
-    --blockquote-bg:     var(--seed-panel);
-    --table-header-bg:   var(--seed-panel);
-    --border-color:      var(--seed-border);
-    --hr-color:          var(--seed-border);
-  }
-
-  html, body, body.theme-custom {
-    background: var(--seed-surface) !important;
-    color: var(--seed-ink) !important;
-    font-family: var(--font-body) !important;
-    line-height: var(--line-height-body) !important;
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-  }
-
-  #write {
-    max-width: var(--content-width) !important;
-    margin: 0 auto !important;
-    padding: 30px 60px 100px !important;
-  }
-
-  body.theme-custom h1, body.theme-custom h2, body.theme-custom h3,
-  body.theme-custom h4, body.theme-custom h5, body.theme-custom h6 {
-    font-family: var(--font-heading) !important;
-    color: var(--seed-ink) !important;
-    font-weight: 700 !important;
-    line-height: var(--line-height-heading) !important;
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-  }
-  body.theme-custom h1 { font-size: calc(var(--font-size-root) * var(--font-scale-h1)) !important; }
-  body.theme-custom h2 { font-size: calc(var(--font-size-root) * var(--font-scale-h2)) !important; }
-  body.theme-custom h3 { font-size: calc(var(--font-size-root) * var(--font-scale-h3)) !important; }
-  body.theme-custom h4 { font-size: calc(var(--font-size-root) * var(--font-scale-h4)) !important; }
-  body.theme-custom h5 { font-size: calc(var(--font-size-root) * var(--font-scale-h5)) !important; }
-  body.theme-custom h6 { font-size: calc(var(--font-size-root) * var(--font-scale-h6)) !important; }
-
-  body.theme-custom strong {
-    color: var(--accent-color) !important;
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-  }
-
-  body.theme-custom code {
-    font-family: var(--font-code) !important;
-    background: var(--code-bg) !important;
-    color: var(--code-color) !important;
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-  }
-
-  body.theme-custom pre {
-    background: var(--code-block-bg) !important;
-    font-family: var(--font-code) !important;
-    line-height: var(--line-height-code) !important;
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-  }
-  body.theme-custom pre code { color: var(--code-block-text) !important; background: transparent !important; }
-
-  body.theme-custom blockquote {
-    background: var(--blockquote-bg) !important;
-    border-left: 4px solid var(--seed-accent) !important;
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-  }
-
-  body.theme-custom table th {
-    background: var(--table-header-bg) !important;
-    color: var(--seed-ink) !important;
-    font-weight: 700 !important;
-    border-bottom: 2px solid var(--accent-color) !important;
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-  }
-
-  body.theme-custom a {
-    color: var(--seed-accent) !important;
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-  }
-
-  body.theme-custom hr {
-    border: none !important;
-    border-top: 1px solid var(--hr-color) !important;
-  }
-
-  body.theme-custom img { max-width: 100% !important; }
-
-  body.theme-custom .mermaid-block {
-    background: var(--seed-surface) !important;
-    border-color: var(--seed-border) !important;
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-  }
-  body.theme-custom .mermaid-preview svg * {
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-  }
-
-  body.theme-custom .mermaid-block + p {
-    color: var(--seed-ink-muted) !important;
-    text-align: center !important;
-    font-family: var(--font-heading) !important;
-    font-size: calc(var(--font-size-mermaid) + 2px) !important;
-  }
-}
+/*
+ * ColaMD Theme: {{ name }}
+ * {{ description }}
+ * Generated by colamd-themes ({{ sourceType }}: {{ sourceUrl }})
+ *
+ * 契约：ColaMD Extend 2.7（CodeMirror 6 编辑器 + Pele 图表引擎）
+ *
+ * 两条硬规矩：
+ *   1. 变量一律写在 :root。没写的活变量继承 Light 主题默认值；写在别的选择器里
+ *      编辑器继承不到。
+ *   2. 编辑器里没有 <h1>/<blockquote> 这种元素：标题是「一行」带一个类，引用与
+ *      代码块是每一行一个 div，加粗是一个 span。所以选择器只认 .cm-md-* 钩子，
+ *      并且引用/代码块**不能加纵向 padding**——那会按行累加。
+ *
+ * ═══════════════════════════════════════════════════════════
+ *   SECTION 1 — Design Tokens
+ *   改 11 个种子色 + 3 组字体即可换一套主题
+ * ═══════════════════════════════════════════════════════════ */
+
+:root {
+
+  /* ── 1.1 Seed Palette ──
+     本工具的再生成与校验读这一层；编辑器不消费。 */
+  --seed-accent:        {{ seed.accent }};
+  --seed-accent-light:  {{ seed.accentLight }};
+  --seed-accent-dark:   {{ seed.accentDark }};
+  --seed-surface:       {{ seed.surface }};
+  --seed-panel:         {{ seed.panel }};
+  --seed-panel-alt:     {{ seed.panelAlt }};
+  --seed-ink:           {{ seed.ink }};
+  --seed-ink-muted:     {{ seed.inkMuted }};
+  --seed-ink-dim:       {{ seed.inkDim }};
+  --seed-border:        {{ seed.border }};
+  --seed-border-strong: {{ seed.borderStrong }};
+
+  /* ── 1.2 Semantic Colors（活变量）── */
+  --bg-color:         var(--seed-surface);
+  --text-color:       var(--seed-ink);
+  --text-secondary:   var(--seed-ink-muted);
+  --text-muted:       var(--seed-ink-dim);
+  --border-color:     var(--seed-border);
+  --link-color:       var(--seed-accent);
+
+  --code-bg:          var(--seed-panel);
+  --code-block-bg:    var(--seed-panel-alt);
+  --code-block-text:  {{ codeBlockText }};
+
+  --blockquote-border: var(--seed-accent);
+  --blockquote-bg:     var(--seed-panel);
+  --table-header-bg:   var(--seed-panel);
+
+  --selection-bg:  {{rgba seed.accent 0.18}};
+  --highlight-bg:  {{rgba seed.accent 0.18}};
+
+  /* ── 1.3 Typography & Metrics（活变量）── */
+  --font-body: {{{ seedTypography.fontBody }}};
+  --font-mono: {{{ seedTypography.fontCode }}};
+  --editor-font-size:    {{ seedTypography.fontSizeRoot }};
+  --editor-column-width: {{ contentWidth }};
+
+  /* ── 1.4 Pele Diagram（9 个变量，全部可省略）──
+     图直接画在代码块底色上，所以底色与字色都从 --code-block-* 推导。 */
+  --pele-bg:          var(--code-block-bg);
+  --pele-fg:          var(--code-block-text);
+  --pele-muted:       color-mix(in srgb, var(--code-block-text) 70%, var(--code-block-bg));
+  --pele-line:        var(--code-block-text);
+  --pele-surface:     color-mix(in srgb, var(--code-block-text) 18%, var(--code-block-bg));
+  --pele-surface-alt: color-mix(in srgb, var(--code-block-text) 28%, var(--code-block-bg));
+  --pele-border:      color-mix(in srgb, var(--code-block-text) 45%, var(--code-block-bg));
+  --pele-accent:      var(--link-color);
+  --pele-radius:      {{ radiusMd }};
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SECTION 2 — Editor DOM（#editor .cm-content + .cm-md-*）
+   ═══════════════════════════════════════════════════════════ */
+
+#editor .cm-content {
+  font-family: var(--font-body);
+  line-height: {{ seedTypography.lineHeightBody }};
+}
+
+/* ── 2.1 Headings ── */
+#editor .cm-content .cm-md-atxheading1,
+#editor .cm-content .cm-md-atxheading2,
+#editor .cm-content .cm-md-atxheading3,
+#editor .cm-content .cm-md-atxheading4,
+#editor .cm-content .cm-md-atxheading5,
+#editor .cm-content .cm-md-atxheading6 {
+  font-family: {{{ seedTypography.fontHeading }}};
+  color: var(--text-color);
+  font-weight: 700;
+  line-height: {{ seedTypography.lineHeightHeading }};
+}
+
+#editor .cm-content .cm-md-atxheading1 {
+  font-size: {{ seedTypography.fontScaleH1 }}em;
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid var(--border-color);
+}
+#editor .cm-content .cm-md-atxheading2 {
+  font-size: {{ seedTypography.fontScaleH2 }}em;
+  padding-bottom: 0.25em;
+  border-bottom: 1px solid var(--border-color);
+}
+#editor .cm-content .cm-md-atxheading3 { font-size: {{ seedTypography.fontScaleH3 }}em; }
+#editor .cm-content .cm-md-atxheading4 { font-size: {{ seedTypography.fontScaleH4 }}em; }
+#editor .cm-content .cm-md-atxheading5 { font-size: {{ seedTypography.fontScaleH5 }}em; }
+#editor .cm-content .cm-md-atxheading6 { font-size: {{ seedTypography.fontScaleH6 }}em; }
+
+/* ── 2.2 Inline ── */
+#editor .cm-content .cm-md-strong { color: var(--link-color); font-weight: 700; }
+#editor .cm-content .cm-md-em { font-style: italic; }
+#editor .cm-content .cm-md-strike { text-decoration: line-through; }
+#editor .cm-content .cm-md-highlight { background: var(--highlight-bg); }
+#editor .cm-content .cm-md-link { color: var(--link-color); }
+#editor .cm-content .cm-md-url { color: var(--text-muted); }
+
+#editor .cm-content .cm-md-inlinecode {
+  font-family: var(--font-mono);
+  background: var(--code-bg);
+  color: var(--text-color);
+  border-radius: {{ radiusSm }};
+}
+
+#editor .cm-content .cm-md-marker,
+#editor .cm-content .cm-md-quotemark,
+#editor .cm-content .cm-md-listmark {
+  color: var(--text-muted);
+}
+
+/* ── 2.3 Blockquote / Code Block（每行一个 div，禁用纵向 padding）── */
+#editor .cm-content .cm-md-blockquote {
+  background: var(--blockquote-bg);
+  color: var(--text-secondary);
+  border-left: 3px solid var(--blockquote-border);
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+#editor .cm-content .cm-md-codeblock {
+  background: var(--code-block-bg);
+  color: var(--code-block-text);
+  padding-left: 16px;
+  padding-right: 16px;
+}
+#editor .cm-content .cm-md-codeblock-first {
+  border-top-left-radius: {{ radiusMd }};
+  border-top-right-radius: {{ radiusMd }};
+}
+#editor .cm-content .cm-md-codeblock-last {
+  border-bottom-left-radius: {{ radiusMd }};
+  border-bottom-right-radius: {{ radiusMd }};
+}
+
+/* ── 2.4 Table / Rule ── */
+#editor .cm-content .cm-md-table-widget th,
+#editor .cm-content .cm-md-table-widget td {
+  border-color: var(--border-color);
+}
+#editor .cm-content .cm-md-table-widget th {
+  background: var(--table-header-bg);
+  color: var(--text-color);
+  font-weight: 700;
+  border-bottom: 2px solid var(--link-color);
+}
+#editor .cm-content .cm-md-hr { border-top-color: var(--border-color); }
+
+/* ── 2.5 中文首行缩进 ──
+   CM6 里一行就是一个 div：段落缩进落在 .cm-line 上，标题/引用/代码/列表行归零。 */
+#editor .cm-content .cm-line { text-indent: 2em; }
+
+#editor .cm-content .cm-md-atxheading1,
+#editor .cm-content .cm-md-atxheading2,
+#editor .cm-content .cm-md-atxheading3,
+#editor .cm-content .cm-md-atxheading4,
+#editor .cm-content .cm-md-atxheading5,
+#editor .cm-content .cm-md-atxheading6,
+#editor .cm-content .cm-md-blockquote,
+#editor .cm-content .cm-md-codeblock,
+#editor .cm-content .cm-md-hr,
+#editor .cm-content .cm-md-mermaid,
+#editor .cm-content .cm-md-li-0,
+#editor .cm-content .cm-md-li-1,
+#editor .cm-content .cm-md-li-2,
+#editor .cm-content .cm-md-li-3,
+#editor .cm-content .cm-md-li-4,
+#editor .cm-content .cm-md-li-5,
+#editor .cm-content .cm-md-li-6 {
+  text-indent: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SECTION 3 — Exported HTML（.colamd-document，语义标签）
+   HTML/PDF 导出不走编辑器 DOM；这段让导出件沿用同一套配色。
+   ═══════════════════════════════════════════════════════════ */
+
+.colamd-document {
+  font-family: var(--font-body);
+  font-size: {{ seedTypography.fontSizeRoot }};
+  line-height: {{ seedTypography.lineHeightBody }};
+}
+
+.colamd-document h1,
+.colamd-document h2,
+.colamd-document h3,
+.colamd-document h4,
+.colamd-document h5,
+.colamd-document h6 {
+  font-family: {{{ seedTypography.fontHeading }}};
+  color: var(--text-color);
+  line-height: {{ seedTypography.lineHeightHeading }};
+}
+
+.colamd-document strong { color: var(--link-color); }
+.colamd-document code {
+  background: var(--code-bg);
+  color: var(--text-color);
+  font-family: var(--font-mono);
+}
+.colamd-document pre { background: var(--code-block-bg); }
+.colamd-document pre code { color: var(--code-block-text); }
+.colamd-document blockquote {
+  background: var(--blockquote-bg);
+  color: var(--text-secondary);
+  border-left-color: var(--blockquote-border);
+}
+.colamd-document mark { background: var(--highlight-bg); }
+.colamd-document th {
+  background: var(--table-header-bg);
+  border-bottom: 2px solid var(--link-color);
+}
+.colamd-document hr { border-top-color: var(--border-color); }
+
+.colamd-document p { text-indent: 2em; }
+.colamd-document li p,
+.colamd-document td p,
+.colamd-document th p,
+.colamd-document blockquote p {
+  text-indent: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SECTION 4 — Print
+   应用直接对当前窗口 printToPDF，屏幕规则原样生效；这里只补保真。
+   ═══════════════════════════════════════════════════════════ */
+
+@media print {
+  html,
+  body {
+    background: var(--bg-color);
+    color: var(--text-color);
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}