@imontene/mdrender 2.4.0 → 2.5.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Cambios
 
+## 2.5.0 — 2026-10-22
+
+- **Nuevo estilo por defecto: Anti-Gravity**, tomado del design system del mismo nombre y
+  llevado a páginas. Incluye:
+  - colores del sistema y títulos en Manrope 600 con interletrado negativo;
+  - etiquetas en JetBrains Mono, en mayúsculas: autor y fecha sobre el título, índice,
+    encabezado y pie;
+  - código, tablas, citas y alertas como superficies suaves;
+  - diagramas Mermaid con los mismos colores;
+  - un campo de luz tenue junto al título de la primera página.
+- `--theme antigravity-dark` es su versión oscura. **Para conservar el aspecto anterior:**
+  `--theme light` (o `theme: light` en `mdrender.config.json`); `--theme dark` sigue
+  disponible.
+
 ## 2.4.0 — 2026-10-22
 
 - **Párrafos justificados en el PDF**: los del texto, las citas y las alertas, con partición de

package/README.md

@@ -23,7 +23,8 @@ Ejemplo: [`examples/ejemplo.md`](examples/ejemplo.md) → [`examples/ejemplo.pdf
   tabla de contenidos y marcadores del PDF.
 - 🗂️ **Lotes**: varios archivos, carpetas completas o patrones `docs/**/*.md`.
 - 🔁 **`--watch`** y **vista previa en vivo** en el navegador.
-- 🎨 Temas **claro** y **oscuro**, o tu propio CSS.
+- 🎨 Estilo **Anti-Gravity** por defecto (con variante oscura), los temas clásicos **claro** y
+  **oscuro**, o tu propio CSS.
 - 🔌 **Sin conexión**: todo va empaquetado; por defecto no descarga nada de internet.
 - 💻 **Windows 10/11 y Linux** (x64; arm64 en Linux), probado en ambos en cada cambio.
 
@@ -93,8 +94,9 @@ mdrender preview documento.md
 # Más contenido por página
 mdrender documento.md --density compact --font-size 10pt
 
-# Tema oscuro, o un CSS propio que reemplaza el tema
-mdrender documento.md --theme dark
+# Variante oscura de Anti-Gravity, el estilo clásico, o un CSS propio que reemplaza el tema
+mdrender documento.md --theme antigravity-dark
+mdrender documento.md --theme light
 mdrender documento.md --theme mi-tema.css
 
 # Descargar un navegador si no tienes Chrome, Edge ni Chromium
@@ -135,41 +137,41 @@ equipo); `--port` fija el puerto y `--no-open` no abre el navegador.
 
 ### Opciones
 
-| Opción                         | Descripción                                                          | Por defecto        |
-| ------------------------------ | -------------------------------------------------------------------- | ------------------ |
-| `-o, --output <ruta>`          | Archivo de salida, o carpeta con varios archivos                     | junto al `.md`     |
-| `-f, --format <pdf\|html>`     | Formato de salida                                                    | `pdf`              |
-| `--page-size <tamaño>`         | `Letter`, `A4`, `Legal` (también `A3`, `A5`, `Tabloid`)              | `Letter`           |
-| `--margin <valor>`             | Las cuatro márgenes como en CSS: `10mm`, `15mm 20mm`…                | `10mm`             |
-| `--margin-top <medida>`        | Margen superior, p. ej. `15mm` (prevalece sobre `--margin`)          | `10mm`             |
-| `--margin-right <medida>`      | Margen derecho                                                       | `10mm`             |
-| `--margin-bottom <medida>`     | Margen inferior                                                      | `10mm`             |
-| `--margin-left <medida>`       | Margen izquierdo                                                     | `10mm`             |
-| `--orientation <orientación>`  | `portrait` (vertical) o `landscape` (horizontal)                     | `portrait`         |
-| `--landscape`                  | Atajo de `--orientation landscape`                                   | —                  |
-| `--toc`                        | Tabla de contenidos al inicio (o donde pongas `[[toc]]`)             | —                  |
-| `--toc-depth <n>`              | Nivel de título más profundo en la tabla de contenidos               | `3`                |
-| `--header <texto>`             | Encabezado de página (ver abajo)                                     | —                  |
-| `--footer <texto>`             | Pie de página (ver abajo)                                            | `{page} / {pages}` |
-| `--no-page-numbers`            | Sin el pie con números de página                                     | —                  |
-| `--font <manrope\|inter>`      | Tipografía del texto (ver abajo)                                     | `manrope`          |
-| `--no-justify`                 | Párrafos alineados a la izquierda en el PDF (ver abajo)              | justificado        |
-| `--density <densidad>`         | `normal` o `compact` (menos espacio entre líneas y bloques)          | `normal`           |
-| `--font-size <tamaño>`         | Tamaño del texto en `pt` o `px`, de 6 a 24 pt; p. ej. `10pt`         | `10.5pt`           |
-| `--theme <light\|dark\|css>`   | `light`, `dark` o un `.css` que reemplaza el tema                    | `light`            |
-| `--css <archivo.css>`          | CSS adicional (se puede repetir)                                     | —                  |
-| `--mermaid-theme <tema>`       | `default`, `neutral`, `dark`, `forest`, `base`                       | `neutral` / `dark` |
-| `--mermaid-flip <auto\|never>` | Si el autoajuste puede girar un diagrama de flujo de eje (ver abajo) | `auto`             |
-| `--no-mermaid-autofit`         | Dibujar los diagramas de flujo tal como están escritos               | —                  |
-| `--lang <código>`              | Idioma del documento; `en` para inglés (`pt`, `fr`, `de`…)           | `es`               |
-| `--title <texto>`              | Título del documento (muestra un bloque de título)                   | primer `# título`  |
-| `--config <archivo>`           | Archivo de configuración                                             | el más cercano     |
-| `--no-config`                  | Ignorar `mdrender.config.json`                                       | —                  |
-| `--browser <ruta>`             | Ruta a Chrome/Edge/Chromium (o variable `MDRENDER_BROWSER`)          | autodetección      |
-| `--allow-remote`               | Permitir que el PDF descargue imágenes/CSS de internet               | bloqueado          |
-| `-w, --watch`                  | Regenerar al guardar                                                 | —                  |
-| `-q, --quiet`                  | Mostrar solo advertencias y errores                                  | —                  |
-| `-v, --verbose`                | Mostrar también configuración, navegador y tiempos                   | —                  |
+| Opción                         | Descripción                                                                                      | Por defecto           |
+| ------------------------------ | ------------------------------------------------------------------------------------------------ | --------------------- |
+| `-o, --output <ruta>`          | Archivo de salida, o carpeta con varios archivos                                                 | junto al `.md`        |
+| `-f, --format <pdf\|html>`     | Formato de salida                                                                                | `pdf`                 |
+| `--page-size <tamaño>`         | `Letter`, `A4`, `Legal` (también `A3`, `A5`, `Tabloid`)                                          | `Letter`              |
+| `--margin <valor>`             | Las cuatro márgenes como en CSS: `10mm`, `15mm 20mm`…                                            | `10mm`                |
+| `--margin-top <medida>`        | Margen superior, p. ej. `15mm` (prevalece sobre `--margin`)                                      | `10mm`                |
+| `--margin-right <medida>`      | Margen derecho                                                                                   | `10mm`                |
+| `--margin-bottom <medida>`     | Margen inferior                                                                                  | `10mm`                |
+| `--margin-left <medida>`       | Margen izquierdo                                                                                 | `10mm`                |
+| `--orientation <orientación>`  | `portrait` (vertical) o `landscape` (horizontal)                                                 | `portrait`            |
+| `--landscape`                  | Atajo de `--orientation landscape`                                                               | —                     |
+| `--toc`                        | Tabla de contenidos al inicio (o donde pongas `[[toc]]`)                                         | —                     |
+| `--toc-depth <n>`              | Nivel de título más profundo en la tabla de contenidos                                           | `3`                   |
+| `--header <texto>`             | Encabezado de página (ver abajo)                                                                 | —                     |
+| `--footer <texto>`             | Pie de página (ver abajo)                                                                        | `{page} / {pages}`    |
+| `--no-page-numbers`            | Sin el pie con números de página                                                                 | —                     |
+| `--font <manrope\|inter>`      | Tipografía del texto (ver abajo)                                                                 | `manrope`             |
+| `--no-justify`                 | Párrafos alineados a la izquierda en el PDF (ver abajo)                                          | justificado           |
+| `--density <densidad>`         | `normal` o `compact` (menos espacio entre líneas y bloques)                                      | `normal`              |
+| `--font-size <tamaño>`         | Tamaño del texto en `pt` o `px`, de 6 a 24 pt; p. ej. `10pt`                                     | `10.5pt`              |
+| `--theme <tema\|css>`          | `antigravity`, `antigravity-dark`, `light`, `dark` o un `.css` que reemplaza el tema (ver abajo) | `antigravity`         |
+| `--css <archivo.css>`          | CSS adicional (se puede repetir)                                                                 | —                     |
+| `--mermaid-theme <tema>`       | `default`, `neutral`, `dark`, `forest`, `base`                                                   | el del tema de página |
+| `--mermaid-flip <auto\|never>` | Si el autoajuste puede girar un diagrama de flujo de eje (ver abajo)                             | `auto`                |
+| `--no-mermaid-autofit`         | Dibujar los diagramas de flujo tal como están escritos                                           | —                     |
+| `--lang <código>`              | Idioma del documento; `en` para inglés (`pt`, `fr`, `de`…)                                       | `es`                  |
+| `--title <texto>`              | Título del documento (muestra un bloque de título)                                               | primer `# título`     |
+| `--config <archivo>`           | Archivo de configuración                                                                         | el más cercano        |
+| `--no-config`                  | Ignorar `mdrender.config.json`                                                                   | —                     |
+| `--browser <ruta>`             | Ruta a Chrome/Edge/Chromium (o variable `MDRENDER_BROWSER`)                                      | autodetección         |
+| `--allow-remote`               | Permitir que el PDF descargue imágenes/CSS de internet                                           | bloqueado             |
+| `-w, --watch`                  | Regenerar al guardar                                                                             | —                     |
+| `-q, --quiet`                  | Mostrar solo advertencias y errores                                                              | —                     |
+| `-v, --verbose`                | Mostrar también configuración, navegador y tiempos                                               | —                     |
 
 **Página**: por defecto hoja **Letter vertical con márgenes de 10 mm**. Las medidas aceptan
 `mm`, `cm`, `in` o `px`. `--margin` fija las cuatro márgenes a la vez y `--margin-top`,
@@ -178,6 +180,21 @@ equipo); `--port` fija el puerto y `--no-open` no abre el navegador.
 El encabezado y el pie se dibujan dentro de las márgenes superior e inferior: con menos de
 10 mm pueden tocar el texto y mdrender lo advierte.
 
+**Temas**: por defecto los documentos usan el estilo **Anti-Gravity**, tomado del design system
+del mismo nombre y llevado de diapositivas a páginas:
+
+- Manrope 600 en títulos con interletrado negativo, Manrope 400 en el texto.
+- Etiquetas en JetBrains Mono, en mayúsculas: autor y fecha sobre el título, el índice, el
+  encabezado y el pie.
+- Un único azul de acento para enlaces y etiquetas, superficies suaves sin bordes gruesos, y
+  alertas como tarjetas.
+- Los diagramas Mermaid llevan los mismos colores.
+- En la primera página, junto al título, un campo de luz muy tenue en azul, cian y violeta.
+
+`--theme antigravity-dark` es su versión oscura. `--theme light` conserva el estilo de las
+versiones anteriores y `--theme dark` su variante oscura. El design system pide texto alineado
+a la izquierda: con este tema, usa `--no-justify` si quieres seguirlo al pie de la letra.
+
 **Tipografía**: el texto usa [Manrope](https://fonts.google.com/specimen/Manrope);
 `--font inter` (o `font: inter` en el front matter o en `mdrender.config.json`) vuelve a
 [Inter](https://fonts.google.com/specimen/Inter), la tipografía de las versiones anteriores.

package/dist/assets/theme-antigravity-dark.css

@@ -0,0 +1,37 @@
+/* mdrender Anti-Gravity dark stage: loaded after theme-antigravity.css, swaps its colours. */
+
+:root {
+  --ag-canvas: #0b0e13;
+  --ag-surface-subtle: #10141b;
+  --ag-surface-raised: #141922;
+  --ag-ink: #eef1f6;
+  --ag-ink-secondary: #b6bdc9;
+  --ag-ink-muted: #8f98a7;
+  --ag-hairline: #232a35;
+  --ag-hairline-strong: #3a4352;
+  --ag-accent: #7ea4ff;
+  --ag-accent-soft: #16213b;
+  --ag-opacity-field: 0.22;
+  --ag-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
+
+  --alert-warning: #e3b341;
+  --alert-caution: #ff8a8a;
+  --color-error: #ffa198;
+  --color-error-bg: #2d1416;
+  --color-error-border: #8e1519;
+
+  --code-title: #b9a6ff;
+  --code-constant: #b9a6ff;
+  --code-string: #6fd3ec;
+  --code-builtin: #6fd3ec;
+  --code-added: #aff5b4;
+  --code-added-bg: #0d2e19;
+  --code-removed: #ffdcd7;
+  --code-removed-bg: #4a0f16;
+  color-scheme: dark;
+}
+
+/* Paint the whole sheet, margins included (the root background stops at the margins). */
+@page {
+  background: #0b0e13;
+}

package/dist/assets/theme-antigravity.css

@@ -0,0 +1,239 @@
+/*
+ * mdrender Anti-Gravity theme (the default): loaded after theme.css. Colours, type and surfaces
+ * follow the Anti-Gravity design system (tokens.json), drawn for 1920 × 1080 slides and scaled
+ * here to a printed page. theme-antigravity-dark.css swaps the colours for its dark stage.
+ */
+
+:root {
+  /* Design system tokens */
+  --ag-canvas: #ffffff;
+  --ag-surface-subtle: #f6f8fb;
+  --ag-surface-raised: #ffffff;
+  --ag-ink: #0f1419;
+  --ag-ink-secondary: #454e5c;
+  --ag-ink-muted: #636c7a;
+  --ag-hairline: #e6e9ef;
+  --ag-hairline-strong: #c9d0db;
+  --ag-accent: #2456d3;
+  --ag-accent-soft: #ecf1fd;
+  --ag-field-blue: #4f7cff;
+  --ag-field-cyan: #22c3e6;
+  --ag-field-violet: #8c6cf0;
+  --ag-opacity-field: 0.16;
+  --ag-shadow-card: 0 1px 2px rgba(15, 20, 25, 0.04), 0 12px 32px rgba(15, 20, 25, 0.06);
+
+  /* The variables theme.css is written with */
+  --color-text: var(--ag-ink);
+  --color-muted: var(--ag-ink-muted);
+  --color-heading: var(--ag-ink);
+  --color-link: var(--ag-accent);
+  --color-border: var(--ag-hairline);
+  --color-subtle-bg: var(--ag-surface-subtle);
+  --color-accent: var(--ag-accent);
+  --color-bg: var(--ag-canvas);
+  --color-stripe: var(--ag-canvas);
+  /* Notes, tips and important points in the one accent. Warnings and cautions keep amber and
+     red: they carry risk, a deliberate exception to the system's single blue. */
+  --alert-note: var(--ag-accent);
+  --alert-tip: var(--ag-accent);
+  --alert-important: var(--ag-accent);
+  --alert-warning: #8a5d00;
+  --alert-caution: #c0262d;
+
+  /* Syntax highlighting: restrained, from the accent and the field hues (4.5:1 or better on
+     surface-subtle). */
+  --code-keyword: var(--ag-accent);
+  --code-title: #5b3fc4;
+  --code-constant: #5b3fc4;
+  --code-string: #0a6580;
+  --code-builtin: #0a6580;
+  --code-comment: var(--ag-ink-muted);
+  --code-tag: var(--ag-accent);
+  --code-text: var(--ag-ink);
+  --code-added: #116329;
+  --code-added-bg: #e6f6ea;
+  --code-removed: #a40e26;
+  --code-removed-bg: #fdecee;
+}
+
+/* Headings: Manrope 600, negative tracking, separated by white space rather than rules. */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+}
+
+h1 {
+  font-size: 2.1em;
+  letter-spacing: -0.025em;
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+h2 {
+  font-size: 1.55em;
+  letter-spacing: -0.02em;
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+h3 {
+  font-size: 1.15em;
+  letter-spacing: -0.01em;
+}
+
+h4,
+h5,
+h6 {
+  font-size: 1em;
+  letter-spacing: 0;
+}
+
+h6 {
+  color: var(--ag-ink-secondary);
+}
+
+/* Title block as the system's TitleBlock: eyebrow (author · date), display title, lead. */
+.doc-header {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2.4em;
+}
+
+.doc-header .doc-meta {
+  order: -1;
+  margin: 0 0 1em;
+  padding-bottom: 0;
+  border-bottom: 0;
+  font-family: var(--font-code);
+  font-size: 0.78em;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ag-accent);
+}
+
+.doc-header .doc-title {
+  margin: 0 0 0.35em;
+  font-size: 2.6em;
+  letter-spacing: -0.03em;
+  line-height: 1.12;
+}
+
+.doc-subtitle {
+  margin: 0;
+  font-size: 1.23em;
+  line-height: 1.4;
+  color: var(--ag-ink-secondary);
+}
+
+/*
+ * The gradient field: soft light in the top-right corner of the title block (so only on the
+ * first page, and only when there is one), never under text: the title block's text keeps to
+ * the left 64%, the system's text measure. Each light fades out inside the box, so no edge shows.
+ */
+.doc-header {
+  position: relative;
+  z-index: 0;
+}
+
+.doc-header > * {
+  max-width: 64%;
+}
+
+.doc-header::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 36%;
+  opacity: var(--ag-opacity-field);
+  pointer-events: none;
+  background:
+    radial-gradient(28% 38% at 58% 45%, var(--ag-field-blue), transparent),
+    radial-gradient(16% 26% at 78% 58%, var(--ag-field-cyan), transparent),
+    radial-gradient(25% 30% at 40% 32%, var(--ag-field-violet), transparent);
+}
+
+/* Text */
+li::marker {
+  color: var(--ag-ink-muted);
+}
+
+blockquote {
+  padding: 0.8em 1.1em;
+  color: var(--ag-ink-secondary);
+  border-left: 0;
+  border-radius: 8px;
+  background: var(--ag-surface-subtle);
+}
+
+hr {
+  background: var(--ag-hairline);
+}
+
+/* Code */
+code {
+  border-radius: 4px;
+  background: var(--ag-accent-soft);
+}
+
+pre {
+  border: 1px solid var(--ag-hairline);
+  border-radius: 8px;
+  background: var(--ag-surface-subtle);
+}
+
+/* Tables: header on surface-subtle, hairline rules, no stripes. */
+th,
+td {
+  border-color: var(--ag-hairline);
+}
+
+th {
+  background: var(--ag-surface-subtle);
+}
+
+/* Alerts as raised cards with a mono label; no left-border accents. */
+.markdown-alert {
+  padding: 0.8em 1.1em;
+  color: var(--ag-ink);
+  border: 1px solid var(--ag-hairline);
+  border-radius: 12px;
+  background: var(--ag-surface-raised);
+  box-shadow: var(--ag-shadow-card);
+}
+
+.markdown-alert-title {
+  font-family: var(--font-code);
+  font-size: 0.78em;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+/* Table of contents as a quiet panel with a mono label. */
+.toc {
+  border-color: var(--ag-hairline);
+  border-radius: 12px;
+  background: var(--ag-surface-subtle);
+}
+
+.toc-title {
+  font-family: var(--font-code);
+  font-size: 0.78em;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ag-accent);
+}
+
+/* Footnotes */
+.footnotes {
+  color: var(--ag-ink-muted);
+}

package/dist/assets.js

@@ -94,6 +94,8 @@ export const MERMAID_JS = "mermaid/dist/mermaid.min.js";
 export const THEMES = [
     "mdrender/assets/theme.css",
     "mdrender/assets/theme-dark.css",
+    "mdrender/assets/theme-antigravity.css",
+    "mdrender/assets/theme-antigravity-dark.css",
     "mdrender/assets/density-compact.css",
 ];
 export const PACKAGE_JSON = "mdrender/package.json";

package/dist/cli.js

@@ -65,9 +65,11 @@ function addDocumentOptions(command) {
         .option("--no-justify", "align paragraphs left in the PDF instead of justifying them")
         .option("--density <density>", "normal or compact (tighter spacing) (default: normal)")
         .option("--font-size <size>", "text size, e.g. 10pt or 11pt (default: 10.5pt)")
-        .option("--theme <theme>", "light, dark, or a .css file replacing the theme (default: light)")
+        .option("--theme <theme>", "antigravity, antigravity-dark, light, dark, or a .css file replacing the theme " +
+        "(default: antigravity)")
         .option("--css <file>", "extra stylesheet (repeatable)", collect)
-        .option("--mermaid-theme <theme>", `Mermaid theme: ${MERMAID_THEMES.join(", ")} (default: neutral; dark with --theme dark)`)
+        .option("--mermaid-theme <theme>", `Mermaid theme: ${MERMAID_THEMES.join(", ")} ` +
+        "(default: the page theme's — base in Anti-Gravity colours, neutral for light, dark for dark)")
         .option("--no-mermaid-autofit", "draw flowcharts exactly as written (no layout search)")
         .option("--mermaid-flip <mode>", "auto: turn a flowchart to the other axis if its text prints too small; never (default: auto)")
         .option("--lang <tag>", "document language, e.g. es or en (default: es)")

package/dist/convert.js

@@ -7,11 +7,12 @@ import { extractFrontMatter } from "./frontmatter.js";
 import { strings } from "./i18n.js";
 import { renderMarkdown } from "./markdown/index.js";
 import { buildToc, tocPlaceholder } from "./markdown/toc.js";
-import { DEFAULT_FONT_SIZE, fontSizePx, mergeOptions, normalizeOptions, OptionsError, resolveMargins, } from "./options.js";
+import { BUILTIN_THEMES, DEFAULT_FONT_SIZE, fontSizePx, isDarkTheme, mergeOptions, normalizeOptions, OptionsError, resolveMargins, } from "./options.js";
 import { BrowserSession } from "./render/browser.js";
 import { DEFAULT_FOOTER, headerFooterTemplate } from "./render/header-footer.js";
 import { fillMermaid, renderMermaid } from "./render/mermaid.js";
 import { SMALL_SCALE } from "./render/mermaid-fit.js";
+import { headerFooterStyle, mermaidThemeVariables } from "./render/antigravity.js";
 import { FONT_FAMILIES, fontStack } from "./render/fonts.js";
 import { contentHeightPx, contentWidthPx, lengthToPx, textWidthPx } from "./render/page.js";
 import { buildHtmlDocument, builtinThemeCss, densityCss } from "./render/template.js";
@@ -52,7 +53,8 @@ function readStylesheet(file) {
     }
 }
 function themeStylesheets(theme) {
-    return theme === "light" || theme === "dark" ? builtinThemeCss(theme) : [readStylesheet(theme)];
+    const builtin = BUILTIN_THEMES.find((name) => name === theme);
+    return builtin ? builtinThemeCss(builtin) : [readStylesheet(theme)];
 }
 /**
  * Chrome draws the header and footer inside the top and bottom margins. Measured: below about
@@ -126,7 +128,11 @@ export function describeLayout(layout) {
 }
 /** Mermaid theme: explicit choice, else dark diagrams for the dark page theme. */
 export function effectiveMermaidTheme(options) {
-    return options.mermaidTheme ?? (options.theme === "dark" ? "dark" : "neutral");
+    if (options.mermaidTheme)
+        return options.mermaidTheme;
+    if (options.theme.startsWith("antigravity"))
+        return "base";
+    return isDarkTheme(options.theme) ? "dark" : "neutral";
 }
 /**
  * Render a Markdown file to a complete HTML document. A browser is only started (through
@@ -188,6 +194,7 @@ paged = false) {
             autofit: options.mermaidAutofit,
             flip: options.mermaidFlip,
             font: options.font,
+            themeVariables: theme === "base" ? mermaidThemeVariables(options.theme) : undefined,
         });
         const filled = fillMermaid(body, md.nonce, md.mermaid, results);
         body = filled.html;
@@ -243,16 +250,17 @@ export async function convertFile(convert) {
             const footer = options.footer ?? (options.pageNumbers ? DEFAULT_FOOTER : undefined);
             const hasHeaderFooter = options.header !== undefined || footer !== undefined;
             doc.diagnostics.push(...headerFooterSpaceWarnings(margin, options.header !== undefined, footer !== undefined));
+            const pageLook = headerFooterStyle(options.theme);
             const session = await browsers.get();
             const { pdf, blocked } = await session.printPdf(doc.html, {
                 format: options.pageSize,
                 landscape: options.orientation === "landscape",
                 margin,
                 headerTemplate: hasHeaderFooter
-                    ? headerFooterTemplate(options.header, values, margin, options.font)
+                    ? headerFooterTemplate(options.header, values, margin, options.font, pageLook)
                     : undefined,
                 footerTemplate: hasHeaderFooter
-                    ? headerFooterTemplate(footer, values, margin, options.font)
+                    ? headerFooterTemplate(footer, values, margin, options.font, pageLook)
                     : undefined,
                 allowRemote: convert.allowRemote,
                 softHyphensWidthPx: options.justify

package/dist/options.d.ts

@@ -13,7 +13,10 @@ export declare const MERMAID_THEMES: readonly ["default", "neutral", "dark", "fo
 export type MermaidTheme = (typeof MERMAID_THEMES)[number];
 export declare const MERMAID_FLIPS: readonly ["auto", "never"];
 export type MermaidFlip = (typeof MERMAID_FLIPS)[number];
-export declare const BUILTIN_THEMES: readonly ["light", "dark"];
+export declare const BUILTIN_THEMES: readonly ["antigravity", "antigravity-dark", "light", "dark"];
+export type BuiltinTheme = (typeof BUILTIN_THEMES)[number];
+/** Built-in themes with a dark page. */
+export declare const isDarkTheme: (theme: string) => boolean;
 export declare const TEXT_FONTS: readonly ["manrope", "inter"];
 export type TextFont = (typeof TEXT_FONTS)[number];
 export declare const DENSITIES: readonly ["normal", "compact"];
@@ -37,7 +40,10 @@ export interface DocumentOptions {
     /** Header/footer text; see render/header-footer.ts for placeholders and `|` columns. */
     header?: string;
     footer?: string;
-    /** Mermaid theme; when unset, "neutral" for light pages and "dark" for the dark theme. */
+    /**
+     * Mermaid theme; when unset, the page theme's: "base" coloured from the Anti-Gravity tokens,
+     * else "neutral" for light pages and "dark" for dark ones.
+     */
     mermaidTheme?: MermaidTheme;
     /** Try several layouts of each flowchart and keep the one whose text prints largest. */
     mermaidAutofit: boolean;
@@ -51,7 +57,7 @@ export interface DocumentOptions {
     density: Density;
     /** Base font size of the text, e.g. "10pt"; when unset, the theme's (10.5pt). */
     fontSize?: string;
-    /** "light", "dark", or the absolute path of a stylesheet that replaces the built-in theme. */
+    /** A built-in theme (BUILTIN_THEMES), or the absolute path of a stylesheet replacing it. */
     theme: string;
     /** Extra stylesheets (absolute paths), applied after the built-in theme. */
     css: string[];

package/dist/options.js

@@ -6,7 +6,9 @@ export const PAGE_SIZES = ["A3", "A4", "A5", "Letter", "Legal", "Tabloid"];
 export const ORIENTATIONS = ["portrait", "landscape"];
 export const MERMAID_THEMES = ["default", "neutral", "dark", "forest", "base"];
 export const MERMAID_FLIPS = ["auto", "never"];
-export const BUILTIN_THEMES = ["light", "dark"];
+export const BUILTIN_THEMES = ["antigravity", "antigravity-dark", "light", "dark"];
+/** Built-in themes with a dark page. */
+export const isDarkTheme = (theme) => theme === "dark" || theme === "antigravity-dark";
 export const TEXT_FONTS = ["manrope", "inter"];
 export const DENSITIES = ["normal", "compact"];
 export const DEFAULT_OPTIONS = {
@@ -21,7 +23,7 @@ export const DEFAULT_OPTIONS = {
     font: "manrope",
     justify: true,
     density: "normal",
-    theme: "light",
+    theme: "antigravity",
     css: [],
     lang: DEFAULT_LANG,
 };
@@ -129,7 +131,7 @@ const VALIDATORS = {
             return builtin;
         if (/\.css$/i.test(theme))
             return path.resolve(baseDir, theme);
-        throw new OptionsError(`${describe} must be light, dark or a .css file`);
+        throw new OptionsError(`${describe} must be ${BUILTIN_THEMES.join(", ")} or a .css file`);
     },
     css: (value, describe, baseDir) => {
         const list = Array.isArray(value) ? value : [value];

package/dist/render/antigravity.d.ts

@@ -0,0 +1,13 @@
+export declare const isAntigravityTheme: (theme: string) => boolean;
+/**
+ * Mermaid "base" theme variables for an Anti-Gravity page: nodes on accent-soft outlined in
+ * accent, edges and arrows in ink-muted, groups on surface-subtle. Undefined for other themes.
+ */
+export declare function mermaidThemeVariables(theme: string): Record<string, string | boolean> | undefined;
+export interface HeaderFooterStyle {
+    color: string;
+    /** Set in the mono family, uppercase and tracked, like the system's slide footers. */
+    mono: boolean;
+}
+/** How page headers and footers look for a page theme. */
+export declare function headerFooterStyle(theme: string): HeaderFooterStyle;

package/dist/render/antigravity.js

@@ -0,0 +1,82 @@
+import { isDarkTheme } from "../options.js";
+/**
+ * Anti-Gravity design system tokens needed outside the stylesheets (theme-antigravity.css):
+ * Mermaid draws its diagrams in a page of its own, and Chrome renders page headers and footers
+ * apart from the document, so neither sees the CSS variables.
+ */
+const TOKENS = {
+    light: {
+        canvas: "#ffffff",
+        surfaceSubtle: "#f6f8fb",
+        ink: "#0f1419",
+        inkSecondary: "#454e5c",
+        inkMuted: "#636c7a",
+        hairline: "#e6e9ef",
+        hairlineStrong: "#c9d0db",
+        accent: "#2456d3",
+        accentSoft: "#ecf1fd",
+    },
+    dark: {
+        canvas: "#0b0e13",
+        surfaceSubtle: "#10141b",
+        ink: "#eef1f6",
+        inkSecondary: "#b6bdc9",
+        inkMuted: "#8f98a7",
+        hairline: "#232a35",
+        hairlineStrong: "#3a4352",
+        accent: "#7ea4ff",
+        accentSoft: "#16213b",
+    },
+};
+export const isAntigravityTheme = (theme) => theme.startsWith("antigravity");
+const tokensFor = (theme) => (isDarkTheme(theme) ? TOKENS.dark : TOKENS.light);
+/**
+ * Mermaid "base" theme variables for an Anti-Gravity page: nodes on accent-soft outlined in
+ * accent, edges and arrows in ink-muted, groups on surface-subtle. Undefined for other themes.
+ */
+export function mermaidThemeVariables(theme) {
+    if (!isAntigravityTheme(theme))
+        return undefined;
+    const t = tokensFor(theme);
+    return {
+        darkMode: isDarkTheme(theme),
+        background: t.canvas,
+        primaryColor: t.accentSoft,
+        primaryBorderColor: t.accent,
+        primaryTextColor: t.ink,
+        secondaryColor: t.surfaceSubtle,
+        secondaryBorderColor: t.hairlineStrong,
+        secondaryTextColor: t.ink,
+        tertiaryColor: t.canvas,
+        tertiaryBorderColor: t.hairlineStrong,
+        tertiaryTextColor: t.ink,
+        mainBkg: t.accentSoft,
+        nodeBorder: t.accent,
+        nodeTextColor: t.ink,
+        lineColor: t.inkMuted,
+        textColor: t.ink,
+        titleColor: t.ink,
+        clusterBkg: t.surfaceSubtle,
+        clusterBorder: t.hairlineStrong,
+        edgeLabelBackground: t.canvas,
+        noteBkgColor: t.surfaceSubtle,
+        noteBorderColor: t.hairlineStrong,
+        noteTextColor: t.ink,
+        actorBkg: t.accentSoft,
+        actorBorder: t.accent,
+        actorTextColor: t.ink,
+        actorLineColor: t.hairlineStrong,
+        signalColor: t.inkMuted,
+        signalTextColor: t.ink,
+        labelBoxBkgColor: t.surfaceSubtle,
+        labelBoxBorderColor: t.hairlineStrong,
+        labelTextColor: t.ink,
+    };
+}
+/** How page headers and footers look for a page theme. */
+export function headerFooterStyle(theme) {
+    if (isAntigravityTheme(theme))
+        return { color: tokensFor(theme).inkMuted, mono: true };
+    return { color: "#59636e", mono: false };
+}
+//# sourceMappingURL=antigravity.js.map

package/dist/render/fonts.d.ts

@@ -20,5 +20,7 @@ export declare function fontStack(font: TextFont): string;
 export declare function inlineFontStylesheet(cssKey: string): string;
 /** @font-face rules for every font a document uses, with the font files embedded. */
 export declare function fontFaceCss(font?: TextFont): string;
+/** JetBrains Mono Regular alone, for page headers/footers set in the mono family. */
+export declare function monoRegularFontFace(): string;
 /** The text font's regular weight alone, for page headers/footers (rendered apart from the page). */
 export declare function regularFontFace(font?: TextFont): string;

package/dist/render/fonts.js

@@ -64,6 +64,12 @@ export function fontFaceCss(font = "manrope") {
     }
     return css;
 }
+let monoRegular;
+/** JetBrains Mono Regular alone, for page headers/footers set in the mono family. */
+export function monoRegularFontFace() {
+    monoRegular ??= inlineFontStylesheet(MONO_STYLESHEETS[0]);
+    return monoRegular;
+}
 const regularFaces = new Map();
 /** The text font's regular weight alone, for page headers/footers (rendered apart from the page). */
 export function regularFontFace(font = "manrope") {

package/dist/render/header-footer.d.ts

@@ -1,4 +1,5 @@
 import type { TextFont } from "../options.js";
+import type { HeaderFooterStyle } from "./antigravity.js";
 /**
  * Header/footer text with placeholders, in up to three columns separated by `|`:
  *
@@ -19,5 +20,5 @@ export interface HeaderFooterValues {
 export declare function headerFooterTemplate(spec: string | undefined, values: HeaderFooterValues, horizontalMargin: {
     left: string;
     right: string;
-}, font?: TextFont): string;
+}, font?: TextFont, style?: HeaderFooterStyle): string;
 export declare const DEFAULT_FOOTER = "{page} / {pages}";

package/dist/render/header-footer.js

@@ -1,5 +1,5 @@
 import { escapeHtml } from "../html.js";
-import { fontStack, regularFontFace } from "./fonts.js";
+import { fontStack, monoRegularFontFace, regularFontFace } from "./fonts.js";
 const CHROME_CLASSES = { page: "pageNumber", pages: "totalPages" };
 function renderText(text, values) {
     return escapeHtml(text.trim()).replace(/\{(\w+)\}/g, (match, name) => {
@@ -23,13 +23,18 @@ function columns(spec) {
  * Chrome header/footer template. Chrome renders it apart from the page, so it carries its own
  * styles and its own copy of the text font.
  */
-export function headerFooterTemplate(spec, values, horizontalMargin, font = "manrope") {
+export function headerFooterTemplate(spec, values, horizontalMargin, font = "manrope", style = { color: "#59636e", mono: false }) {
     if (!spec)
         return "<span></span>";
     const [left, center, right] = columns(spec).map((c) => renderText(c, values));
-    return `<style>${regularFontFace(font)}</style>
+    // The font list sits in a style="…" attribute: single quotes only.
+    const look = style.mono
+        ? `font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 7pt; ` +
+            `letter-spacing: 0.14em; text-transform: uppercase;`
+        : `font-family: ${fontStack(font).replaceAll('"', "'")}; font-size: 8pt;`;
+    return `<style>${style.mono ? monoRegularFontFace() : regularFontFace(font)}</style>
 <div style="box-sizing: border-box; width: 100%; display: flex; padding: 0 ${horizontalMargin.right} 0 ${horizontalMargin.left};
-  font-family: ${fontStack(font).replaceAll('"', "'")}; font-size: 8pt; color: #59636e;">
+  ${look} color: ${style.color};">
   <span style="flex: 1; text-align: left;">${left}</span>
   <span style="flex: 1; text-align: center;">${center}</span>
   <span style="flex: 1; text-align: right;">${right}</span>

package/dist/render/mermaid.d.ts

@@ -39,6 +39,8 @@ export interface MermaidRenderOptions {
     flip?: MermaidFlip;
     /** Text font of the document, used for diagram labels too. */
     font?: TextFont;
+    /** Extra Mermaid theme variables (the Anti-Gravity colours for the "base" theme). */
+    themeVariables?: Record<string, string | boolean>;
 }
 /**
  * Room kept for a heading printed together with the diagram below it (see keep-with-heading in

package/dist/render/mermaid.js

@@ -14,7 +14,7 @@ const DEFAULT_FONT_PX = 14;
  */
 export const HEADING_ALLOWANCE_EM = 5;
 let mermaidJs;
-function mermaidConfig(theme, font, fontPx, wrap) {
+function mermaidConfig(theme, font, fontPx, wrap, themeVariables = {}) {
     const fontFamily = fontStack(font);
     return {
         startOnLoad: false,
@@ -23,7 +23,7 @@ function mermaidConfig(theme, font, fontPx, wrap) {
         fontFamily,
         // Sequence diagrams take their text sizes from here, the others from themeVariables.
         fontSize: fontPx,
-        themeVariables: { fontFamily, fontSize: `${fontPx}px` },
+        themeVariables: { ...themeVariables, fontFamily, fontSize: `${fontPx}px` },
         htmlLabels: true,
         // Actors only at the top of sequence diagrams: repeating them below costs height.
         sequence: { mirrorActors: false },
@@ -61,7 +61,7 @@ body { margin: 0; width: ${widthPx}px; font-family: ${fontStack(font)}; }</style
             catch (error) {
                 return { error: String(error?.message ?? error) };
             }
-        }, source, id, mermaidConfig(theme, font, fontPx, wrap));
+        }, source, id, mermaidConfig(theme, font, fontPx, wrap, options.themeVariables));
         const results = [];
         for (const [i, block] of blocks.entries()) {
             const id = `mermaid-${i + 1}`;

package/dist/render/template.d.ts

@@ -1,8 +1,8 @@
 import { escapeHtml } from "../html.js";
-import type { TextFont } from "../options.js";
+import type { BuiltinTheme, TextFont } from "../options.js";
 export { escapeHtml };
-/** Stylesheets of a built-in theme ("light" or "dark"). */
-export declare function builtinThemeCss(theme: "light" | "dark"): string[];
+/** Stylesheets of a built-in theme. */
+export declare function builtinThemeCss(theme: BuiltinTheme): string[];
 /** Stylesheet for a density other than "normal", applied after the theme. */
 export declare function densityCss(density: "normal" | "compact"): string[];
 export interface DocumentParts {

package/dist/render/template.js

@@ -13,9 +13,16 @@ function asset(name) {
     }
     return css;
 }
-/** Stylesheets of a built-in theme ("light" or "dark"). */
+/** Stylesheets of each built-in theme, applied in order. */
+const THEME_FILES = {
+    antigravity: ["theme.css", "theme-antigravity.css"],
+    "antigravity-dark": ["theme.css", "theme-antigravity.css", "theme-antigravity-dark.css"],
+    light: ["theme.css"],
+    dark: ["theme.css", "theme-dark.css"],
+};
+/** Stylesheets of a built-in theme. */
 export function builtinThemeCss(theme) {
-    return theme === "dark" ? [asset("theme.css"), asset("theme-dark.css")] : [asset("theme.css")];
+    return THEME_FILES[theme].map(asset);
 }
 /** Stylesheet for a density other than "normal", applied after the theme. */
 export function densityCss(density) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imontene/mdrender",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Command-line app for Windows and Linux that renders Markdown — with LaTeX equations and Mermaid diagrams — to PDF and HTML set in Manrope or Inter",
   "keywords": [
     "markdown",