@chromamark/renderer 0.1.0

package/src/tones.js

@@ -0,0 +1,72 @@
+/**
+ * The ChromaMark color vocabulary: semantic tones plus a hex/name escape hatch.
+ * Shared by containers, pills, colored text, and meters.
+ */
+
+/** Canonical semantic tones, in vocabulary order. */
+export const TONES = ['success', 'danger', 'warning', 'info', 'tip', 'muted'];
+
+/** Aliases mapping to a canonical tone. */
+export const ALIASES = {
+  ok: 'success',
+  pass: 'success',
+  error: 'danger',
+  fail: 'danger',
+  warn: 'warning',
+  note: 'info',
+  hint: 'tip',
+  skip: 'muted',
+};
+
+const HEX = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+const COLOR_NAME = /^[a-zA-Z][a-zA-Z0-9]*$/;
+
+/**
+ * True for a color value safe to emit inside a `style="--fg:…"` attribute:
+ * a hex literal or a plain CSS color name. Functional forms are rejected to
+ * keep untrusted input from injecting arbitrary CSS.
+ */
+export function isSafeColor(value) {
+  return isHex(value) || COLOR_NAME.test(value);
+}
+
+/**
+ * Resolve a token to a canonical tone, or null if it is not a known tone/alias.
+ * Case-insensitive.
+ */
+export function resolveTone(name) {
+  if (typeof name !== 'string') return null;
+  const key = name.toLowerCase();
+  if (TONES.includes(key)) return key;
+  if (Object.prototype.hasOwnProperty.call(ALIASES, key)) return ALIASES[key];
+  return null;
+}
+
+/** True for a valid `#rgb` / `#rrggbb` literal. */
+export function isHex(value) {
+  return typeof value === 'string' && HEX.test(value);
+}
+
+/**
+ * Parse the leading spec token of an inline construct or container attr.
+ * Accepts a tone/alias, `color=<hex|name>`, or a bare `#hex`.
+ * Returns `{ tone, color }` (exactly one non-null) or null when unrecognized.
+ * Bare CSS color names are intentionally rejected here to avoid swallowing
+ * ordinary label words; use the explicit `color=<name>` escape hatch instead.
+ */
+export function parseSpec(token) {
+  if (typeof token !== 'string' || token.length === 0) return null;
+
+  if (token.toLowerCase().startsWith('color=')) {
+    const value = token.slice('color='.length);
+    if (!isSafeColor(value)) return null;
+    return { tone: null, color: value };
+  }
+
+  if (isHex(token)) return { tone: null, color: token };
+
+  const tone = resolveTone(token);
+  if (tone) return { tone, color: null };
+
+  return null;
+}

package/theme/chromamark.css

@@ -0,0 +1,113 @@
+/*
+ * ChromaMark theme — maps semantic tones to real colors and styles every
+ * rendered construct. Tones are theme-owned: switch light/dark and colors
+ * follow. Load alongside HTML produced by @chromamark/renderer.
+ *
+ * Theme resolution order: explicit [data-theme] wins; otherwise the reader's
+ * prefers-color-scheme is honored.
+ */
+
+:root {
+  --cm-success-fg:#1a7f37; --cm-success-bg:#dafbe1; --cm-success-bd:#2da44e;
+  --cm-danger-fg:#cf222e;  --cm-danger-bg:#ffebe9;  --cm-danger-bd:#ff8182;
+  --cm-warning-fg:#9a6700; --cm-warning-bg:#fff8c5; --cm-warning-bd:#d4a72c;
+  --cm-info-fg:#0969da;    --cm-info-bg:#ddf4ff;    --cm-info-bd:#54aeff;
+  --cm-tip-fg:#0f7b6c;     --cm-tip-bg:#d3f5f0;     --cm-tip-bd:#3bc4b0;
+  --cm-muted-fg:#656d76;   --cm-muted-bg:#f6f8fa;   --cm-muted-bd:#d0d7de;
+  --cm-neutral-bg:#f6f8fa; --cm-neutral-bd:#d0d7de;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --cm-success-fg:#3fb950; --cm-success-bg:#12261e; --cm-success-bd:#238636;
+    --cm-danger-fg:#f85149;  --cm-danger-bg:#25171c;  --cm-danger-bd:#da3633;
+    --cm-warning-fg:#d29922; --cm-warning-bg:#272115; --cm-warning-bd:#9e6a03;
+    --cm-info-fg:#58a6ff;    --cm-info-bg:#0d2233;    --cm-info-bd:#1f6feb;
+    --cm-tip-fg:#56d4c3;     --cm-tip-bg:#0c2620;     --cm-tip-bd:#1c6f63;
+    --cm-muted-fg:#8b949e;   --cm-muted-bg:#161b22;   --cm-muted-bd:#30363d;
+    --cm-neutral-bg:#161b22; --cm-neutral-bd:#30363d;
+  }
+}
+
+[data-theme="dark"] {
+  --cm-success-fg:#3fb950; --cm-success-bg:#12261e; --cm-success-bd:#238636;
+  --cm-danger-fg:#f85149;  --cm-danger-bg:#25171c;  --cm-danger-bd:#da3633;
+  --cm-warning-fg:#d29922; --cm-warning-bg:#272115; --cm-warning-bd:#9e6a03;
+  --cm-info-fg:#58a6ff;    --cm-info-bg:#0d2233;    --cm-info-bd:#1f6feb;
+  --cm-tip-fg:#56d4c3;     --cm-tip-bg:#0c2620;     --cm-tip-bd:#1c6f63;
+  --cm-muted-fg:#8b949e;   --cm-muted-bg:#161b22;   --cm-muted-bd:#30363d;
+  --cm-neutral-bg:#161b22; --cm-neutral-bd:#30363d;
+}
+
+/* Map a tone onto the generic --fg/--bg/--bd consumed by every component. */
+[data-tone="success"]{--fg:var(--cm-success-fg);--bg:var(--cm-success-bg);--bd:var(--cm-success-bd);}
+[data-tone="danger"] {--fg:var(--cm-danger-fg); --bg:var(--cm-danger-bg); --bd:var(--cm-danger-bd);}
+[data-tone="warning"]{--fg:var(--cm-warning-fg);--bg:var(--cm-warning-bg);--bd:var(--cm-warning-bd);}
+[data-tone="info"]   {--fg:var(--cm-info-fg);   --bg:var(--cm-info-bg);   --bd:var(--cm-info-bd);}
+[data-tone="tip"]    {--fg:var(--cm-tip-fg);    --bg:var(--cm-tip-bg);    --bd:var(--cm-tip-bd);}
+[data-tone="muted"]  {--fg:var(--cm-muted-fg);  --bg:var(--cm-muted-bg);  --bd:var(--cm-muted-bd);}
+
+/* Custom color (color=…): derive a tinted bg/border from the chosen --fg. */
+.cm-custom {
+  --bg:color-mix(in srgb, var(--fg) 12%, transparent);
+  --bd:color-mix(in srgb, var(--fg) 45%, transparent);
+}
+
+/* ---- Colored block / callout ---- */
+.cm-block {
+  border:1px solid var(--bd, var(--cm-neutral-bd)); border-left-width:4px;
+  background:var(--bg, var(--cm-neutral-bg));
+  border-radius:8px; padding:10px 14px; margin:12px 0;
+}
+.cm-block > .cm-title { font-weight:700; color:var(--fg, inherit); }
+.cm-block > .cm-body > :first-child { margin-top:0; }
+.cm-block > .cm-body > :last-child { margin-bottom:0; }
+
+/* ---- Pill / badge ---- */
+.cm-pill {
+  display:inline-block; color:var(--fg); background:var(--bg); border:1px solid var(--bd);
+  border-radius:999px; padding:0 .55em; font-size:.82em; font-weight:600; line-height:1.7;
+  white-space:nowrap;
+}
+
+/* ---- Inline colored text (tint, no fill) ---- */
+.cm-text { color:var(--fg); font-weight:600; }
+
+/* ---- Progress meter ---- */
+.cm-meter { display:inline-flex; align-items:center; gap:8px; vertical-align:middle; }
+.cm-meter .cm-track {
+  width:120px; height:8px; border-radius:999px; background:var(--cm-neutral-bg);
+  border:1px solid var(--cm-neutral-bd); overflow:hidden;
+}
+.cm-meter .cm-fill { display:block; height:100%; background:var(--fg, var(--cm-info-fg)); }
+.cm-meter .cm-val { font-size:.82em; font-weight:600; color:var(--fg); }
+
+/* ---- Fields (key/value) ---- */
+.cm-fields {
+  display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin:12px 0;
+  border:1px solid var(--cm-neutral-bd); border-radius:8px; padding:12px 14px;
+  background:var(--cm-neutral-bg);
+}
+.cm-fields dt { font-weight:600; opacity:.75; }
+.cm-fields dd { margin:0; }
+
+/* ---- Collapsible ---- */
+.cm-details { border:1px solid var(--bd); border-radius:8px; margin:12px 0; overflow:hidden; }
+.cm-details > summary {
+  cursor:pointer; padding:8px 14px; font-weight:600; list-style:none; background:var(--cm-neutral-bg);
+}
+.cm-details[data-tone] > summary, .cm-details.cm-custom > summary { color:var(--fg); background:var(--bg); }
+.cm-details > summary::-webkit-details-marker { display:none; }
+.cm-details > summary::before {
+  content:"\25B8"; display:inline-block; margin-right:8px; transition:transform .15s ease;
+}
+.cm-details[open] > summary::before { transform:rotate(90deg); }
+.cm-details > .cm-body { padding:10px 14px; }
+.cm-details > .cm-body > :first-child { margin-top:0; }
+.cm-details > .cm-body > :last-child { margin-bottom:0; }
+
+/* ---- Inline diff (CriticMarkup) ---- */
+.crit-add { background:var(--cm-success-bg); color:var(--cm-success-fg); text-decoration:none; border-radius:3px; padding:0 2px; }
+.crit-del { background:var(--cm-danger-bg); color:var(--cm-danger-fg); text-decoration:line-through; border-radius:3px; padding:0 2px; }
+.crit-mark { background:var(--cm-warning-bg); border-radius:3px; padding:0 2px; }
+.crit-comment { color:var(--cm-muted-fg); font-style:italic; }