@docfuse/markdown 0.1.0

package/dist/theme.css

@@ -0,0 +1,183 @@
+/*
+ * Docfuse's shared visual contract.
+ *
+ * The palette is intentionally semantic: Markdown and the site shell consume
+ * the same variables, while a host can override the documented values from
+ * `@docfuse/markdown/theme`. Content surfaces stay opaque; translucent
+ * material is reserved for temporary controls and overlays.
+ */
+:root {
+  color-scheme: light;
+
+  --df-canvas: #f6f6f8;
+  --df-ink: #1d1d1f;
+  --df-ink-body: #363638;
+  --df-ink-secondary: #66666b;
+  --df-ink-tertiary: #737379;
+  --df-surface: #ffffff;
+  --df-surface-secondary: #f3f3f5;
+  --df-surface-soft: #f7f7f9;
+  --df-surface-elevated: #ffffff;
+  --df-surface-code: #f6f6f8;
+  --df-code-ink: #1d1d1f;
+  --df-docfuse-config-icon: url('./file-icons/config.svg');
+
+  /* The contract keeps these names for theme overrides. Visual rules never
+     draw a border; they use surfaces, inset highlights, and shadows instead. */
+  --df-border: transparent;
+  --df-border-strong: transparent;
+  --df-hairline: rgb(29 29 31 / 0.1);
+
+  /* Default semantic palette. Components derive interaction and status tones
+     from this contract instead of introducing local color constants. */
+  --df-accent-500: #0088ff;
+  --df-accent-50: color-mix(in srgb, var(--df-accent-500) 6%, white);
+  --df-accent-100: color-mix(in srgb, var(--df-accent-500) 10%, white);
+  --df-accent-200: color-mix(in srgb, var(--df-accent-500) 20%, white);
+  --df-accent-300: color-mix(in srgb, var(--df-accent-500) 38%, white);
+  --df-accent-400: color-mix(in srgb, var(--df-accent-500) 68%, white);
+  --df-accent-600: color-mix(in srgb, var(--df-accent-500) 88%, black);
+  --df-accent-700: color-mix(in srgb, var(--df-accent-500) 78%, black);
+  --df-accent-800: color-mix(in srgb, var(--df-accent-500) 66%, black);
+  --df-accent-900: color-mix(in srgb, var(--df-accent-500) 52%, black);
+  --df-accent-soft: color-mix(in srgb, var(--df-accent-500) 10%, white);
+  --df-accent-strong: #0088ff;
+  --df-accent-deep: color-mix(in srgb, var(--df-accent-500) 78%, black);
+
+  /* Official diagram plugins consume this shared theme contract. */
+  --df-diagram-surface: var(--df-surface-soft);
+  --df-diagram-foreground: var(--df-ink-body);
+  --df-diagram-accent: var(--df-accent-500);
+  --df-diagram-muted: var(--df-ink-secondary);
+  --df-diagram-line: color-mix(in srgb, var(--df-ink-body) 12%, transparent);
+  --df-accent-secondary: #6155f5;
+  --df-info: #0088ff;
+  --df-info-deep: #0088ff;
+  --df-success: #34c759;
+  --df-success-deep: #34c759;
+  --df-warning: #ff8d28;
+  --df-warning-deep: #ff8d28;
+  --df-danger: #ff383c;
+  --df-danger-deep: #ff383c;
+  --df-info-soft: color-mix(in oklab, var(--df-info) 9%, var(--df-surface));
+  --df-success-soft: color-mix(in oklab, var(--df-success) 9%, var(--df-surface));
+  --df-warning-soft: color-mix(in oklab, var(--df-warning) 9%, var(--df-surface));
+  --df-danger-soft: color-mix(in oklab, var(--df-danger) 9%, var(--df-surface));
+  --df-yellow: #ffcc00;
+
+  --df-overlay: rgb(0 0 0 / 0.42);
+  --df-overlay-scrim: rgb(13 13 15 / 0.9);
+  --df-overlay-control: rgb(255 255 255 / 0.14);
+  --df-overlay-ink: rgb(255 255 255 / 0.78);
+  --df-overlay-ink-muted: rgb(255 255 255 / 0.56);
+  --df-shadow-raised: 0 20px 52px rgb(29 29 31 / 0.14);
+  --df-shadow-raised-sm: 0 8px 22px rgb(29 29 31 / 0.09);
+  --df-shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.7);
+  --df-block-shell-shadow: 0 1px 2px rgb(29 29 31 / 0.08), 0 6px 18px rgb(29 29 31 / 0.06);
+
+  /* Terminal is always a dark surface. Traffic-light dots are macOS chrome,
+     not semantic status colors — do not reuse them for callouts or badges. */
+  --df-terminal-canvas: #1c1c1e;
+  --df-terminal-toolbar: #2b2b2f;
+  --df-terminal-ink: #f5f5f7;
+  --df-terminal-ink-secondary: #b9b9c0;
+  --df-terminal-ink-tertiary: #98989f;
+  --df-terminal-traffic-close: #ff5f57;
+  --df-terminal-traffic-minimize: #febc2e;
+  --df-terminal-traffic-maximize: #28c840;
+
+  --df-font-display:
+    -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Segoe UI',
+    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  --df-font-sans:
+    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', 'PingFang SC',
+    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  --df-font-mono: 'SFMono-Regular', 'JetBrains Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+  /* Typography scales with the user's root font size. Line heights stay unitless. */
+  --df-body-font-size: 1rem;
+  --df-body-line-height: 1.6;
+  --df-heading-line-height: 1.2;
+  --df-heading-1-size: 2rem;
+  --df-heading-2-size: 1.625rem;
+  --df-heading-3-size: 1.375rem;
+  --df-heading-4-size: 1.25rem;
+  --df-heading-5-size: 1.125rem;
+  --df-heading-6-size: 1.0625rem;
+  --df-reading-width: 100%;
+  --df-content-width: 100%;
+  --df-site-gutter: 2.25rem;
+
+  --df-radius-sm: 4px;
+  --df-radius-md: 6px;
+  --df-radius-lg: 8px;
+  --df-radius-full: 8px;
+
+  --df-duration-fast: 120ms;
+  --df-duration-normal: 220ms;
+  --df-easing-default: cubic-bezier(0.22, 1, 0.36, 1);
+  --df-easing-spring: cubic-bezier(0.2, 0.85, 0.25, 1);
+  --df-glass-blur: 18px;
+  /* Major layout dimensions use rem; optical geometry below intentionally uses px. */
+  --df-header-height: 4.25rem;
+  --df-sidebar-width: 17.5rem;
+  --df-outline-width: 18.75rem;
+  --df-focus-ring: 0 0 0 3px color-mix(in srgb, var(--df-accent-500) 24%, transparent);
+}
+
+html.dark,
+.dark {
+  color-scheme: dark;
+
+  --df-canvas: #1c1c1e;
+  --df-ink: #f5f5f7;
+  --df-ink-body: #e3e3e8;
+  --df-ink-secondary: #b9b9c0;
+  --df-ink-tertiary: #98989f;
+  --df-surface: #232326;
+  --df-surface-secondary: #343438;
+  --df-surface-soft: #2b2b2f;
+  --df-surface-elevated: #3b3b40;
+  --df-surface-code: #202023;
+  --df-code-ink: #f5f5f7;
+  --df-hairline: rgb(255 255 255 / 0.12);
+
+  --df-accent-500: #0091ff;
+  --df-accent-50: color-mix(in srgb, var(--df-accent-500) 8%, var(--df-surface));
+  --df-accent-100: color-mix(in srgb, var(--df-accent-500) 14%, var(--df-surface));
+  --df-accent-200: color-mix(in srgb, var(--df-accent-500) 25%, var(--df-surface));
+  --df-accent-300: color-mix(in srgb, var(--df-accent-500) 42%, var(--df-surface));
+  --df-accent-400: color-mix(in srgb, var(--df-accent-500) 70%, var(--df-surface));
+  --df-accent-600: color-mix(in srgb, var(--df-accent-500) 88%, white);
+  --df-accent-700: color-mix(in srgb, var(--df-accent-500) 76%, white);
+  --df-accent-800: color-mix(in srgb, var(--df-accent-500) 62%, white);
+  --df-accent-900: color-mix(in srgb, var(--df-accent-500) 46%, white);
+  --df-accent-soft: color-mix(in srgb, var(--df-accent-500) 18%, var(--df-surface));
+  --df-accent-strong: #0091ff;
+  --df-accent-deep: color-mix(in srgb, var(--df-accent-500) 76%, white);
+  --df-accent-secondary: #6d7cff;
+  --df-info: #0091ff;
+  --df-info-deep: #0091ff;
+  --df-success: #30d158;
+  --df-success-deep: #30d158;
+  --df-warning: #ff9230;
+  --df-warning-deep: #ff9230;
+  --df-danger: #ff4245;
+  --df-danger-deep: #ff4245;
+  --df-info-soft: color-mix(in oklab, var(--df-info) 9%, var(--df-surface));
+  --df-success-soft: color-mix(in oklab, var(--df-success) 9%, var(--df-surface));
+  --df-warning-soft: color-mix(in oklab, var(--df-warning) 9%, var(--df-surface));
+  --df-danger-soft: color-mix(in oklab, var(--df-danger) 9%, var(--df-surface));
+  --df-yellow: #ffd600;
+  --df-overlay: rgb(0 0 0 / 0.62);
+  --df-shadow-raised: 0 22px 58px rgb(0 0 0 / 0.34);
+  --df-shadow-raised-sm: 0 10px 28px rgb(0 0 0 / 0.24);
+  --df-shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.08);
+  --df-block-shell-shadow: 0 1px 2px rgb(0 0 0 / 0.28), 0 6px 18px rgb(0 0 0 / 0.18);
+  --df-focus-ring: 0 0 0 3px color-mix(in srgb, var(--df-accent-500) 36%, transparent);
+}
+
+@media (max-width: 47.5rem) {
+  :root {
+    --df-site-gutter: 1.25rem;
+  }
+}

package/dist/theme.d.ts

@@ -0,0 +1,167 @@
+export type MarkdownThemeMode = 'light' | 'dark';
+export interface MarkdownThemeColors {
+    canvas: string;
+    foreground: string;
+    text: string;
+    muted: string;
+    mutedSubtle: string;
+    surface: string;
+    surfaceSecondary: string;
+    surfaceSoft: string;
+    surfaceElevated: string;
+    border: string;
+    borderStrong: string;
+    hairline: string;
+    primary: string;
+    primarySoft: string;
+    primaryForeground: string;
+    primaryDeep: string;
+    accent: string;
+    info: string;
+    infoDeep: string;
+    success: string;
+    successDeep: string;
+    warning: string;
+    warningDeep: string;
+    danger: string;
+    dangerDeep: string;
+    codeBackground: string;
+    codeForeground: string;
+    overlay: string;
+    shadow: string;
+    shadowSmall: string;
+}
+export interface MarkdownThemeTypography {
+    displayFont: string;
+    sansFont: string;
+    monoFont: string;
+    bodySize: string;
+    bodyLineHeight: string;
+    headingLineHeight: string;
+    heading1Size: string;
+    heading2Size: string;
+    heading3Size: string;
+    heading4Size: string;
+    heading5Size: string;
+    heading6Size: string;
+}
+export interface MarkdownThemeLayout {
+    readingWidth: string;
+    contentWidth: string;
+    gutter: string;
+}
+export interface MarkdownThemeGeometry {
+    radiusSmall: string;
+    radiusMedium: string;
+    radiusLarge: string;
+    radiusFull: string;
+}
+export interface MarkdownThemeMotion {
+    durationFast: string;
+    durationNormal: string;
+    easing: string;
+}
+export interface ResolvedMarkdownTheme {
+    colors: Record<MarkdownThemeMode, MarkdownThemeColors>;
+    typography: MarkdownThemeTypography;
+    layout: MarkdownThemeLayout;
+    geometry: MarkdownThemeGeometry;
+    motion: MarkdownThemeMotion;
+}
+export interface MarkdownThemeInput {
+    colors?: Partial<Record<MarkdownThemeMode, Partial<MarkdownThemeColors>>>;
+    typography?: Partial<MarkdownThemeTypography>;
+    layout?: Partial<MarkdownThemeLayout>;
+    geometry?: Partial<MarkdownThemeGeometry>;
+    motion?: Partial<MarkdownThemeMotion>;
+}
+/** Default semantic color anchors shared by Markdown and the Docfuse shell. */
+export declare const DEFAULT_SEMANTIC_COLORS: {
+    readonly light: {
+        readonly blue: "#0088ff";
+        readonly indigo: "#6155f5";
+        readonly cyan: "#00c0e8";
+        readonly green: "#34c759";
+        readonly orange: "#ff8d28";
+        readonly red: "#ff383c";
+        readonly yellow: "#ffcc00";
+    };
+    readonly dark: {
+        readonly blue: "#0091ff";
+        readonly indigo: "#6d7cff";
+        readonly cyan: "#3cd3fe";
+        readonly green: "#30d158";
+        readonly orange: "#ff9230";
+        readonly red: "#ff4245";
+        readonly yellow: "#ffd600";
+    };
+};
+export declare const DEFAULT_MARKDOWN_THEME: ResolvedMarkdownTheme;
+export declare const MARKDOWN_THEME_VARIABLES: {
+    readonly colors: {
+        readonly canvas: "--df-canvas";
+        readonly foreground: "--df-ink";
+        readonly text: "--df-ink-body";
+        readonly muted: "--df-ink-secondary";
+        readonly mutedSubtle: "--df-ink-tertiary";
+        readonly surface: "--df-surface";
+        readonly surfaceSecondary: "--df-surface-secondary";
+        readonly surfaceSoft: "--df-surface-soft";
+        readonly surfaceElevated: "--df-surface-elevated";
+        readonly border: "--df-border";
+        readonly borderStrong: "--df-border-strong";
+        readonly hairline: "--df-hairline";
+        readonly primary: "--df-accent-500";
+        readonly primarySoft: "--df-accent-soft";
+        readonly primaryForeground: "--df-accent-strong";
+        readonly primaryDeep: "--df-accent-deep";
+        readonly accent: "--df-accent-secondary";
+        readonly info: "--df-info";
+        readonly infoDeep: "--df-info-deep";
+        readonly success: "--df-success";
+        readonly successDeep: "--df-success-deep";
+        readonly warning: "--df-warning";
+        readonly warningDeep: "--df-warning-deep";
+        readonly danger: "--df-danger";
+        readonly dangerDeep: "--df-danger-deep";
+        readonly codeBackground: "--df-surface-code";
+        readonly codeForeground: "--df-code-ink";
+        readonly overlay: "--df-overlay";
+        readonly shadow: "--df-shadow-raised";
+        readonly shadowSmall: "--df-shadow-raised-sm";
+    };
+    readonly typography: {
+        readonly displayFont: "--df-font-display";
+        readonly sansFont: "--df-font-sans";
+        readonly monoFont: "--df-font-mono";
+        readonly bodySize: "--df-body-font-size";
+        readonly bodyLineHeight: "--df-body-line-height";
+        readonly headingLineHeight: "--df-heading-line-height";
+        readonly heading1Size: "--df-heading-1-size";
+        readonly heading2Size: "--df-heading-2-size";
+        readonly heading3Size: "--df-heading-3-size";
+        readonly heading4Size: "--df-heading-4-size";
+        readonly heading5Size: "--df-heading-5-size";
+        readonly heading6Size: "--df-heading-6-size";
+    };
+    readonly layout: {
+        readonly readingWidth: "--df-reading-width";
+        readonly contentWidth: "--df-content-width";
+        readonly gutter: "--df-site-gutter";
+    };
+    readonly geometry: {
+        readonly radiusSmall: "--df-radius-sm";
+        readonly radiusMedium: "--df-radius-md";
+        readonly radiusLarge: "--df-radius-lg";
+        readonly radiusFull: "--df-radius-full";
+    };
+    readonly motion: {
+        readonly durationFast: "--df-duration-fast";
+        readonly durationNormal: "--df-duration-normal";
+        readonly easing: "--df-easing-default";
+    };
+};
+/** Validate and complete a partial public theme contract. */
+export declare function resolveMarkdownTheme(input?: MarkdownThemeInput): ResolvedMarkdownTheme;
+/** Emit only the documented public variables for one resolved mode. */
+export declare function markdownThemeDeclarations(theme: ResolvedMarkdownTheme, mode: MarkdownThemeMode): string;

package/dist/theme.js

@@ -0,0 +1,228 @@
+const r = {
+  light: {
+    blue: "#0088ff",
+    indigo: "#6155f5",
+    cyan: "#00c0e8",
+    green: "#34c759",
+    orange: "#ff8d28",
+    red: "#ff383c",
+    yellow: "#ffcc00"
+  },
+  dark: {
+    blue: "#0091ff",
+    indigo: "#6d7cff",
+    cyan: "#3cd3fe",
+    green: "#30d158",
+    orange: "#ff9230",
+    red: "#ff4245",
+    yellow: "#ffd600"
+  }
+}, g = "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif", c = "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif", d = {
+  colors: {
+    light: {
+      canvas: "#f6f6f8",
+      foreground: "#1d1d1f",
+      text: "#363638",
+      muted: "#66666b",
+      mutedSubtle: "#737379",
+      surface: "#ffffff",
+      surfaceSecondary: "#f3f3f5",
+      surfaceSoft: "#f7f7f9",
+      surfaceElevated: "#ffffff",
+      border: "transparent",
+      borderStrong: "transparent",
+      hairline: "rgb(29 29 31 / 0.1)",
+      primary: r.light.blue,
+      primarySoft: "color-mix(in srgb, var(--df-accent-500) 10%, white)",
+      primaryForeground: r.light.blue,
+      primaryDeep: "color-mix(in srgb, var(--df-accent-500) 78%, black)",
+      accent: r.light.indigo,
+      info: r.light.blue,
+      infoDeep: r.light.blue,
+      success: r.light.green,
+      successDeep: r.light.green,
+      warning: r.light.orange,
+      warningDeep: r.light.orange,
+      danger: r.light.red,
+      dangerDeep: r.light.red,
+      codeBackground: "#f6f6f8",
+      codeForeground: "#1d1d1f",
+      overlay: "rgb(0 0 0 / 0.42)",
+      shadow: "0 20px 52px rgb(29 29 31 / 0.14)",
+      shadowSmall: "0 8px 22px rgb(29 29 31 / 0.09)"
+    },
+    dark: {
+      canvas: "#1c1c1e",
+      foreground: "#f5f5f7",
+      text: "#e3e3e8",
+      muted: "#b9b9c0",
+      mutedSubtle: "#98989f",
+      surface: "#232326",
+      surfaceSecondary: "#343438",
+      surfaceSoft: "#2b2b2f",
+      surfaceElevated: "#3b3b40",
+      border: "transparent",
+      borderStrong: "transparent",
+      hairline: "rgb(255 255 255 / 0.12)",
+      primary: r.dark.blue,
+      primarySoft: "color-mix(in srgb, var(--df-accent-500) 18%, var(--df-surface))",
+      primaryForeground: r.dark.blue,
+      primaryDeep: "color-mix(in srgb, var(--df-accent-500) 76%, white)",
+      accent: r.dark.indigo,
+      info: r.dark.blue,
+      infoDeep: r.dark.blue,
+      success: r.dark.green,
+      successDeep: r.dark.green,
+      warning: r.dark.orange,
+      warningDeep: r.dark.orange,
+      danger: r.dark.red,
+      dangerDeep: r.dark.red,
+      codeBackground: "#202023",
+      codeForeground: "#f5f5f7",
+      overlay: "rgb(0 0 0 / 0.62)",
+      shadow: "0 22px 58px rgb(0 0 0 / 0.34)",
+      shadowSmall: "0 10px 28px rgb(0 0 0 / 0.24)"
+    }
+  },
+  typography: {
+    displayFont: g,
+    sansFont: c,
+    monoFont: "'SFMono-Regular', 'JetBrains Mono', Consolas, 'Liberation Mono', Menlo, monospace",
+    bodySize: "1rem",
+    bodyLineHeight: "1.6",
+    headingLineHeight: "1.2",
+    heading1Size: "2rem",
+    heading2Size: "1.625rem",
+    heading3Size: "1.375rem",
+    heading4Size: "1.25rem",
+    heading5Size: "1.125rem",
+    heading6Size: "1.0625rem"
+  },
+  layout: {
+    readingWidth: "100%",
+    contentWidth: "100%",
+    gutter: "2.25rem"
+  },
+  geometry: {
+    radiusSmall: "4px",
+    radiusMedium: "6px",
+    radiusLarge: "8px",
+    radiusFull: "8px"
+  },
+  motion: {
+    durationFast: "120ms",
+    durationNormal: "220ms",
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)"
+  }
+}, n = {
+  colors: {
+    canvas: "--df-canvas",
+    foreground: "--df-ink",
+    text: "--df-ink-body",
+    muted: "--df-ink-secondary",
+    mutedSubtle: "--df-ink-tertiary",
+    surface: "--df-surface",
+    surfaceSecondary: "--df-surface-secondary",
+    surfaceSoft: "--df-surface-soft",
+    surfaceElevated: "--df-surface-elevated",
+    border: "--df-border",
+    borderStrong: "--df-border-strong",
+    hairline: "--df-hairline",
+    primary: "--df-accent-500",
+    primarySoft: "--df-accent-soft",
+    primaryForeground: "--df-accent-strong",
+    primaryDeep: "--df-accent-deep",
+    accent: "--df-accent-secondary",
+    info: "--df-info",
+    infoDeep: "--df-info-deep",
+    success: "--df-success",
+    successDeep: "--df-success-deep",
+    warning: "--df-warning",
+    warningDeep: "--df-warning-deep",
+    danger: "--df-danger",
+    dangerDeep: "--df-danger-deep",
+    codeBackground: "--df-surface-code",
+    codeForeground: "--df-code-ink",
+    overlay: "--df-overlay",
+    shadow: "--df-shadow-raised",
+    shadowSmall: "--df-shadow-raised-sm"
+  },
+  typography: {
+    displayFont: "--df-font-display",
+    sansFont: "--df-font-sans",
+    monoFont: "--df-font-mono",
+    bodySize: "--df-body-font-size",
+    bodyLineHeight: "--df-body-line-height",
+    headingLineHeight: "--df-heading-line-height",
+    heading1Size: "--df-heading-1-size",
+    heading2Size: "--df-heading-2-size",
+    heading3Size: "--df-heading-3-size",
+    heading4Size: "--df-heading-4-size",
+    heading5Size: "--df-heading-5-size",
+    heading6Size: "--df-heading-6-size"
+  },
+  layout: {
+    readingWidth: "--df-reading-width",
+    contentWidth: "--df-content-width",
+    gutter: "--df-site-gutter"
+  },
+  geometry: {
+    radiusSmall: "--df-radius-sm",
+    radiusMedium: "--df-radius-md",
+    radiusLarge: "--df-radius-lg",
+    radiusFull: "--df-radius-full"
+  },
+  motion: {
+    durationFast: "--df-duration-fast",
+    durationNormal: "--df-duration-normal",
+    easing: "--df-easing-default"
+  }
+};
+function f(e, o, a) {
+  if (o !== void 0) {
+    if (!o || typeof o != "object" || Array.isArray(o))
+      throw new TypeError(`Markdown theme ${e} must be an object`);
+    for (const [t, s] of Object.entries(o)) {
+      if (!a.includes(t)) throw new TypeError(`Unknown Markdown theme token: ${e}.${t}`);
+      if (typeof s != "string" || s.trim() === "")
+        throw new TypeError(`Markdown theme token ${e}.${t} must be a non-empty CSS value`);
+    }
+  }
+}
+function l(e = {}) {
+  const o = ["typography", "layout", "geometry", "motion"];
+  f("colors.light", e.colors?.light, Object.keys(n.colors)), f("colors.dark", e.colors?.dark, Object.keys(n.colors));
+  for (const a of o)
+    f(a, e[a], Object.keys(n[a]));
+  return {
+    colors: {
+      light: { ...d.colors.light, ...e.colors?.light },
+      dark: { ...d.colors.dark, ...e.colors?.dark }
+    },
+    typography: { ...d.typography, ...e.typography },
+    layout: { ...d.layout, ...e.layout },
+    geometry: { ...d.geometry, ...e.geometry },
+    motion: { ...d.motion, ...e.motion }
+  };
+}
+function i(e, o) {
+  return Object.keys(e).map((a) => `  ${o[a]}: ${String(e[a])};`).join(`
+`);
+}
+function u(e, o) {
+  return [
+    i(e.colors[o], n.colors),
+    i(e.typography, n.typography),
+    i(e.layout, n.layout),
+    i(e.geometry, n.geometry),
+    i(e.motion, n.motion)
+  ].join(`
+`);
+}
+export {
+  d as DEFAULT_MARKDOWN_THEME,
+  r as DEFAULT_SEMANTIC_COLORS,
+  n as MARKDOWN_THEME_VARIABLES,
+  u as markdownThemeDeclarations,
+  l as resolveMarkdownTheme
+};

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@docfuse/markdown",
+  "version": "0.1.0",
+  "description": "An interactive, themeable Markdown renderer for technical documentation.",
+  "license": "MIT",
+  "author": "Docfuse Contributors",
+  "homepage": "https://docfuse.dev/markdown/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jiangxinlei/docfuse.git",
+    "directory": "packages/markdown"
+  },
+  "bugs": {
+    "url": "https://github.com/jiangxinlei/docfuse/issues"
+  },
+  "keywords": [
+    "markdown",
+    "documentation",
+    "renderer",
+    "interactive",
+    "shiki"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client/index.js",
+      "default": "./dist/client/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js"
+    },
+    "./server/analyze": {
+      "types": "./dist/server/analyze.d.ts",
+      "import": "./dist/server/analyze.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js"
+    },
+    "./base.css": "./dist/base.css",
+    "./theme.css": "./dist/theme.css"
+  },
+  "files": [
+    "dist",
+    "README.zh-CN.md"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@mdx-js/mdx": "^3.1.0",
+    "@shikijs/langs": "^4.2.0",
+    "@shikijs/rehype": "^4.2.0",
+    "@shikijs/transformers": "^4.3.0",
+    "@shikijs/types": "^4.2.0",
+    "github-slugger": "^2.0.0",
+    "hast-util-to-jsx-runtime": "^2.3.6",
+    "lucide-react": "^1.31.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "rehype-slug": "^6.0.0",
+    "remark-definition-list": "^2.0.0",
+    "remark-directive": "^4.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "shiki": "^4.2.0",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.1.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.11",
+    "@types/estree": "^1.0.9",
+    "@types/hast": "^3.0.4",
+    "@types/mdast": "^4.0.4",
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/unist": "^3.0.3",
+    "mdast-util-directive": "^3.1.0",
+    "mdast-util-to-hast": "^13.2.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^6.0.3",
+    "vite": "^6.4.3",
+    "vitest": "^4.1.11"
+  },
+  "scripts": {
+    "build": "vite build && vite build -c vite.client.config.ts && tsc -p tsconfig.build.json && tailwindcss -i ./src/tailwind.css -o ./dist/base.css --minify && node scripts/build-css.mjs",
+    "test:browser": "node scripts/test-browser-build.mjs",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --root ../.. packages/markdown"
+  }
+}