@bytechain.cn/colamd-themes 0.3.0

package/src/generator.ts

@@ -0,0 +1,88 @@
+/** CSS theme file generator — v3.0 seed palette pipeline. */
+
+import Handlebars from "handlebars";
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from "node:fs";
+import { join, dirname, isAbsolute } from "node:path";
+import { fileURLToPath } from "node:url";
+import type { ThemeStyle } from "./models.js";
+import { paletteToSeed } from "./models.js";
+import { toRgba, normalizeThemeStyle } from "./color-utils.js";
+import { matchColorSystem } from "./color-systems.js";
+import { selectMermaidPreset } from "./mermaid-presets.js";
+import { validateSeedPalette, summarizeIssues } from "./validators.js";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const templatePath = join(__dirname, "templates", "theme-template.hbs");
+
+// ── Handlebars helpers ──
+
+Handlebars.registerHelper("rgba", (hex: unknown, alpha: unknown) => {
+  return toRgba(String(hex), Number(alpha));
+});
+
+let compiledTemplate: HandlebarsTemplateDelegate<ThemeStyle> | null = null;
+
+function getTemplate(): HandlebarsTemplateDelegate<ThemeStyle> {
+  if (!compiledTemplate) {
+    const source = readFileSync(templatePath, "utf-8");
+    compiledTemplate = Handlebars.compile(source, { noEscape: true });
+  }
+  return compiledTemplate;
+}
+
+// ── Pipeline ──
+
+export function generateCss(style: ThemeStyle): string {
+  // 1. Map legacy palette → seed palette if seed is still default
+  if (style.seed.accent === "#6366f1") {
+    style.seed = paletteToSeed(style.palette);
+  }
+
+  // 2. Normalize from legacy extractor path
+  normalizeThemeStyle(style);
+
+  // 3. Match color system
+  if (!style.colorSystemId) {
+    const cs = matchColorSystem(style.seed.accent, style.seed.surface);
+    style.colorSystemId = cs.id;
+  }
+
+  // 4. Select Mermaid preset
+  if (!style.mermaidPresetId) {
+    const mp = selectMermaidPreset(style.seed.surface, style.seed.accent);
+    style.mermaidPresetId = mp.id;
+  }
+
+  // 5. Validate against paradigm
+  const issues = validateSeedPalette(style.seed);
+  if (issues.filter((i) => i.level === "MUST" || i.level === "MUST_NOT").length > 0) {
+    console.warn("Paradigm validation issues:", summarizeIssues(issues));
+  }
+
+  // 6. Render
+  const template = getTemplate();
+  return template(style);
+}
+
+export function writeThemeFile(
+  style: ThemeStyle,
+  target: string = "themes"
+): string {
+  const css = generateCss(style);
+  const safeName = style.name.replace(/[^a-zA-Z0-9_-]/g, "-").replace(/-+/g, "-");
+
+  let filePath: string;
+  if (target.endsWith(".css")) {
+    filePath = isAbsolute(target) ? target : join(process.cwd(), target);
+  } else {
+    const dirPath = isAbsolute(target) ? target : join(process.cwd(), target);
+    if (!existsSync(dirPath)) mkdirSync(dirPath, { recursive: true });
+    filePath = join(dirPath, `${safeName}.css`);
+  }
+
+  const parent = dirname(filePath);
+  if (!existsSync(parent)) mkdirSync(parent, { recursive: true });
+
+  writeFileSync(filePath, css, "utf-8");
+  return filePath;
+}

package/src/index.ts

@@ -0,0 +1,29 @@
+/** ColaMD Theme Development Tool. */
+
+export * from "./models.js";
+export * from "./color-utils.js";
+export * from "./generator.js";
+export { UrlExtractor } from "./extractors/url-extractor.js";
+export { DocxExtractor } from "./extractors/docx-extractor.js";
+export { PdfExtractor } from "./extractors/pdf-extractor.js";
+export type { Extractor } from "./extractors/base.js";
+
+export {
+  ACADEMIC_PAPER_DEFAULTS,
+  BUSINESS_REPORT_DEFAULTS,
+  TECHNICAL_DOC_DEFAULTS,
+  generatePrintFriendlyGrayscale,
+  generateMorandiPrintPalette,
+  validateDocumentStyle,
+  normalizeForPrinting,
+  getRecommendedPreset,
+  DOCUMENT_STYLE_PRESETS,
+} from "./docx-style-paradigm.js";
+
+export type {
+  DocumentStyleParadigm,
+  FontStyleDefinition,
+  TableCellStyle,
+  PrintOptimization,
+  StyleValidationIssue,
+} from "./docx-style-paradigm.js";

package/src/mermaid-presets.ts

@@ -0,0 +1,142 @@
+/**
+ * Mermaid 20-variable presets for light, dark, and elegant theme modes.
+ * Based on ColaMD-extend reference themes (elegant.css, forest-ink.css, guizang.css).
+ */
+
+import { isLightMode, hslHue } from "./contrast.js";
+
+export interface MermaidPreset {
+  id: string;
+  name: string;
+  description: string;
+  variables: Record<string, string>;
+}
+
+// ═══════════════════════════════════════════════════════════
+// Light Preset — warm paper tone (from elegant.css style)
+// ═══════════════════════════════════════════════════════════
+
+const lightPreset: MermaidPreset = {
+  id: "light",
+  name: "Light",
+  description: "亮色主题 Mermaid 预设 — 暖色调，节点用浅色填充、accent 描边",
+  variables: {
+    "mermaid-background": "var(--seed-panel)",
+    "mermaid-border-color": "var(--seed-border)",
+    "mermaid-border-radius": "var(--radius-md)",
+    "mermaid-padding": "20px",
+    "mermaid-font-family": "var(--font-mermaid)",
+    "mermaid-font-size": "var(--font-size-mermaid)",
+    "mermaid-node-fill": "var(--seed-panel)",
+    "mermaid-node-stroke": "var(--seed-accent)",
+    "mermaid-node-stroke-width": "1.5px",
+    "mermaid-node-text": "var(--seed-ink)",
+    "mermaid-edge-stroke": "var(--seed-ink-muted)",
+    "mermaid-edge-stroke-width": "1.5px",
+    "mermaid-cluster-fill": "rgba accent 0.06",
+    "mermaid-cluster-stroke": "var(--seed-accent)",
+    "mermaid-label-text": "var(--seed-ink)",
+    "mermaid-edge-label-text": "var(--seed-ink-muted)",
+    "mermaid-edge-label-bg": "var(--seed-surface)",
+    "mermaid-title-text": "var(--seed-ink)",
+    "mermaid-axis-text": "var(--seed-ink-muted)",
+    "mermaid-highlight": "var(--seed-accent)",
+    "mermaid-person-stroke": "var(--seed-ink)",
+    "mermaid-person-fill": "var(--seed-panel)",
+    "mermaid-label-offset-y": "0px",
+  },
+};
+
+// ═══════════════════════════════════════════════════════════
+// Dark Preset — dark background (for dark themes)
+// ═══════════════════════════════════════════════════════════
+
+const darkPreset: MermaidPreset = {
+  id: "dark",
+  name: "Dark",
+  description: "暗色主题 Mermaid 预设 — 深色背景，亮色节点",
+  variables: {
+    "mermaid-background": "var(--seed-panel-alt)",
+    "mermaid-border-color": "var(--seed-border-strong)",
+    "mermaid-border-radius": "var(--radius-md)",
+    "mermaid-padding": "20px",
+    "mermaid-font-family": "var(--font-mermaid)",
+    "mermaid-font-size": "var(--font-size-mermaid)",
+    "mermaid-node-fill": "var(--seed-panel)",
+    "mermaid-node-stroke": "var(--seed-accent-light)",
+    "mermaid-node-stroke-width": "1.5px",
+    "mermaid-node-text": "var(--seed-ink)",
+    "mermaid-edge-stroke": "var(--seed-ink-muted)",
+    "mermaid-edge-stroke-width": "1.5px",
+    "mermaid-cluster-fill": "rgba accent 0.08",
+    "mermaid-cluster-stroke": "var(--seed-border-strong)",
+    "mermaid-label-text": "var(--seed-ink)",
+    "mermaid-edge-label-text": "var(--seed-ink-muted)",
+    "mermaid-edge-label-bg": "var(--seed-surface)",
+    "mermaid-title-text": "var(--seed-ink)",
+    "mermaid-axis-text": "var(--seed-ink-muted)",
+    "mermaid-highlight": "var(--seed-accent)",
+    "mermaid-person-stroke": "var(--seed-ink)",
+    "mermaid-person-fill": "var(--seed-panel)",
+    "mermaid-label-offset-y": "0px",
+  },
+};
+
+// ═══════════════════════════════════════════════════════════
+// Elegant Preset — warm toned (for warm ink/paper themes)
+// ═══════════════════════════════════════════════════════════
+
+const elegantPreset: MermaidPreset = {
+  id: "elegant",
+  name: "Elegant",
+  description: "典雅暖调 Mermaid 预设 — 米色底 + 暖棕点缀",
+  variables: {
+    "mermaid-background": "var(--seed-panel)",
+    "mermaid-border-color": "var(--seed-border)",
+    "mermaid-border-radius": "var(--radius-md)",
+    "mermaid-padding": "20px",
+    "mermaid-font-family": "var(--font-mermaid)",
+    "mermaid-font-size": "var(--font-size-mermaid)",
+    "mermaid-node-fill": "var(--seed-panel)",
+    "mermaid-node-stroke": "var(--seed-accent)",
+    "mermaid-node-stroke-width": "1.5px",
+    "mermaid-node-text": "var(--seed-ink)",
+    "mermaid-edge-stroke": "var(--seed-ink-muted)",
+    "mermaid-edge-stroke-width": "1.5px",
+    "mermaid-cluster-fill": "rgba accent 0.04",
+    "mermaid-cluster-stroke": "var(--seed-accent)",
+    "mermaid-label-text": "var(--seed-ink)",
+    "mermaid-edge-label-text": "var(--seed-ink-muted)",
+    "mermaid-edge-label-bg": "var(--seed-surface)",
+    "mermaid-title-text": "var(--seed-ink)",
+    "mermaid-axis-text": "var(--seed-ink-muted)",
+    "mermaid-highlight": "var(--seed-accent)",
+    "mermaid-person-stroke": "var(--seed-ink)",
+    "mermaid-person-fill": "var(--seed-panel)",
+    "mermaid-label-offset-y": "0px",
+  },
+};
+
+// ── Registry ──
+
+export const MERMAID_PRESETS: MermaidPreset[] = [lightPreset, darkPreset, elegantPreset];
+
+export function getMermaidPreset(id: string): MermaidPreset | undefined {
+  return MERMAID_PRESETS.find((p) => p.id === id);
+}
+
+/** Auto-select Mermaid preset based on background luminance. */
+export function selectMermaidPreset(
+  bgHex: string,
+  accentHex: string
+): MermaidPreset {
+  const light = isLightMode(bgHex);
+  if (!light) return darkPreset;
+
+  // For light themes: check accent warmth — warm accent → elegant, cool → light
+  const hue = hslHue(accentHex);
+  // Warm hues: red (0-30), orange (30-50), brown is low sat orange
+  if (hue >= 0 && hue <= 50) return elegantPreset;
+
+  return lightPreset;
+}

package/src/models.ts

@@ -0,0 +1,212 @@
+/** Theme style data models — v3.0 Seed Palette paradigm. */
+
+// ═══════════════════════════════════════════════════════════
+// Legacy model (kept for extractor compatibility)
+// ═══════════════════════════════════════════════════════════
+
+export interface ColorPalette {
+  bgColor: string;
+  textColor: string;
+  headingColor: string;
+  borderColor: string;
+  accentColor: string;
+  codeBg: string;
+  codeColor: string;
+  codeBlockBg: string;
+  codeBlockText: string;
+  blockquoteBg: string;
+  blockquoteBorder: string;
+  tableHeaderBg: string;
+  selectionBg: string;
+  textMuted: string;
+}
+
+export interface Typography {
+  bodyFontFamily: string;
+  headingFontFamily: string;
+  codeFontFamily: string;
+  baseFontSize: string;
+  baseLineHeight: number;
+  headingWeight: number;
+}
+
+export interface Spacing {
+  contentMaxWidth: string;
+  contentPadding: string;
+  paragraphMargin: string;
+  headingMarginTop: string;
+  headingMarginBottom: string;
+}
+
+export interface SyntaxHighlighting {
+  comment: string;
+  punctuation: string;
+  keyword: string;
+  booleanBuiltinTag: string;
+  string: string;
+  number: string;
+  functionClass: string;
+  operator: string;
+  variable: string;
+  regex: string;
+}
+
+// ═══════════════════════════════════════════════════════════
+// v3.0 Seed Palette model
+// ═══════════════════════════════════════════════════════════
+
+export interface SeedPalette {
+  accent: string;
+  accentLight: string;
+  accentDark: string;
+  surface: string;
+  panel: string;
+  panelAlt: string;
+  ink: string;
+  inkMuted: string;
+  inkDim: string;
+  border: string;
+  borderStrong: string;
+}
+
+export interface SeedTypography {
+  fontBody: string;
+  fontHeading: string;
+  fontCode: string;
+  fontMermaid: string;
+  fontSizeRoot: string;      // e.g. "16px"
+  fontScaleH1: number;
+  fontScaleH2: number;
+  fontScaleH3: number;
+  fontScaleH4: number;
+  fontScaleH5: number;
+  fontScaleH6: number;
+  fontSizeMermaid: string;
+  lineHeightBody: number;
+  lineHeightHeading: number;
+  lineHeightCode: number;
+}
+
+export interface ThemeStyle {
+  name: string;
+  description: string;
+  /** Legacy — populated by extractors, then mapped to seed */
+  palette: ColorPalette;
+  typography: Typography;
+  spacing: Spacing;
+  syntax: SyntaxHighlighting;
+  /** v3.0 seed palette */
+  seed: SeedPalette;
+  seedTypography: SeedTypography;
+  /** Selected presets */
+  colorSystemId: string;
+  mermaidPresetId: string;
+  /** Metadata */
+  sourceUrl: string;
+  sourceType: string;
+  /** Computed radius and width */
+  radiusSm: string;
+  radiusMd: string;
+  radiusLg: string;
+  contentWidth: string;
+}
+
+// ═══════════════════════════════════════════════════════════
+// Defaults
+// ═══════════════════════════════════════════════════════════
+
+export function defaultPalette(): ColorPalette {
+  return {
+    bgColor: "#ffffff", textColor: "#000000", headingColor: "",
+    borderColor: "#cccccc", accentColor: "#0000ff", codeBg: "#f5f5f5",
+    codeColor: "", codeBlockBg: "#1e1e1e", codeBlockText: "#d4d4d4",
+    blockquoteBg: "#f9f9f9", blockquoteBorder: "",
+    tableHeaderBg: "#f0f0f0", selectionBg: "", textMuted: "#666666",
+  };
+}
+
+export function defaultTypography(): Typography {
+  return {
+    bodyFontFamily: "Georgia, serif", headingFontFamily: "",
+    codeFontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+    baseFontSize: "16px", baseLineHeight: 1.9, headingWeight: 700,
+  };
+}
+
+export function defaultSpacing(): Spacing {
+  return {
+    contentMaxWidth: "820px", contentPadding: "30px 60px 100px",
+    paragraphMargin: "0.8em 0", headingMarginTop: "1.8em",
+    headingMarginBottom: "0.6em",
+  };
+}
+
+export function defaultSyntax(): SyntaxHighlighting {
+  return { comment: "", punctuation: "", keyword: "", booleanBuiltinTag: "",
+    string: "", number: "", functionClass: "", operator: "", variable: "", regex: "" };
+}
+
+export function defaultSeedPalette(): SeedPalette {
+  return {
+    accent: "#6366f1", accentLight: "#eef2ff", accentDark: "#4f46e5",
+    surface: "#ffffff", panel: "#f8f9fb", panelAlt: "#f1f3f5",
+    ink: "#1a1d26", inkMuted: "#6b7280", inkDim: "#9ca3af",
+    border: "#e5e7eb", borderStrong: "#d1d5db",
+  };
+}
+
+export function defaultSeedTypography(): SeedTypography {
+  return {
+    fontBody: `"Inter", "SF Pro Text", -apple-system, "Noto Serif SC", "Source Han Serif SC", Georgia, serif`,
+    fontHeading: `"Inter", "SF Pro Display", -apple-system, "Noto Sans SC", "PingFang SC", sans-serif`,
+    fontCode: `"JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, monospace`,
+    fontMermaid: `var(--font-heading)`,
+    fontSizeRoot: "16px",
+    fontScaleH1: 2.0, fontScaleH2: 1.5, fontScaleH3: 1.25,
+    fontScaleH4: 1.1, fontScaleH5: 1.0, fontScaleH6: 0.95,
+    fontSizeMermaid: "13px",
+    lineHeightBody: 1.75, lineHeightHeading: 1.35, lineHeightCode: 1.6,
+  };
+}
+
+// ═══════════════════════════════════════════════════════════
+// Factory
+// ═══════════════════════════════════════════════════════════
+
+export function makeThemeStyle(name: string, sourceType: string, sourceUrl: string): ThemeStyle {
+  return {
+    name,
+    description: `Theme extracted from ${sourceType}`,
+    palette: defaultPalette(),
+    typography: defaultTypography(),
+    spacing: defaultSpacing(),
+    syntax: defaultSyntax(),
+    seed: defaultSeedPalette(),
+    seedTypography: defaultSeedTypography(),
+    colorSystemId: "",
+    mermaidPresetId: "",
+    sourceUrl,
+    sourceType,
+    radiusSm: "3px",
+    radiusMd: "6px",
+    radiusLg: "10px",
+    contentWidth: "820px",
+  };
+}
+
+/** Map legacy ColorPalette to SeedPalette. */
+export function paletteToSeed(palette: ColorPalette): SeedPalette {
+  return {
+    accent: palette.accentColor,
+    accentLight: palette.selectionBg || palette.accentColor,
+    accentDark: palette.accentColor,
+    surface: palette.bgColor,
+    panel: palette.codeBg,
+    panelAlt: palette.codeBlockBg,
+    ink: palette.textColor,
+    inkMuted: palette.textMuted,
+    inkDim: palette.textMuted,
+    border: palette.borderColor,
+    borderStrong: palette.borderColor,
+  };
+}