@brandon_m_behring/book-scaffold-astro 4.29.0 → 4.31.0

package/src/lib/figure-palette.mjs

@@ -0,0 +1,162 @@
+/**
+ * Canonical figure palette contract (#161, #164).
+ *
+ * This pure manifest owns every authored RGB, host token value, and standalone
+ * SVG value. `figure.mjs` derives its exact SVG mappings and embedded theme CSS
+ * from it; `tokens.css` carries a checked generated block rendered below.
+ * Keep semantic Warm–Tol roles separate from ordinal Okabe–Ito series.
+ */
+
+function frozenEntries(entries) {
+  return Object.freeze(entries.map((entry) => Object.freeze(entry)));
+}
+
+export const SEMANTIC_FIGURE_TOKENS = frozenEntries([
+  {
+    family: 'semantic', name: 'blue', token: '--fig-blue', label: 'default / lightweight',
+    authoring: '#3B6FA0', hostLight: '#3B6FA0', standaloneLight: '#3B6FA0',
+    hostDark: '#7297BB', standaloneDark: '#7297BB',
+  },
+  {
+    family: 'semantic', name: 'rose', token: '--fig-rose', label: 'caution / problem',
+    authoring: '#C06858', hostLight: '#C06858', standaloneLight: '#C06858',
+    hostDark: '#D29287', standaloneDark: '#D29287',
+  },
+  {
+    family: 'semantic', name: 'green', token: '--fig-green', label: 'positive outcome',
+    authoring: '#4A7E3F', hostLight: '#4A7E3F', standaloneLight: '#4A7E3F',
+    hostDark: '#7DA275', standaloneDark: '#7DA275',
+  },
+  {
+    family: 'semantic', name: 'plum', token: '--fig-plum', label: 'authority / heaviest',
+    authoring: '#8A4E82', hostLight: '#8A4E82', standaloneLight: '#8A4E82',
+    hostDark: '#AB80A5', standaloneDark: '#AB80A5',
+  },
+  {
+    family: 'semantic', name: 'gold', token: '--fig-gold', label: 'packaging / coordination',
+    // Export the canonical Warm–Tol gold; the light host value is deliberately
+    // darker so an essential stroke clears 3:1 against figure paper.
+    authoring: '#C09840', hostLight: '#9D7D34', standaloneLight: '#9D7D34',
+    hostDark: '#D2B575', standaloneDark: '#D2B575',
+  },
+  {
+    family: 'semantic', name: 'crimson', token: '--fig-crimson', label: 'failure / severe problem',
+    authoring: '#A03838', hostLight: '#A03838', standaloneLight: '#A03838',
+    hostDark: '#BB7070', standaloneDark: '#BB7070',
+  },
+]);
+
+export const STRUCTURAL_FIGURE_TOKENS = frozenEntries([
+  {
+    family: 'structural', name: 'ink', token: '--fig-ink', label: 'labels / axes / outlines',
+    hostLight: 'var(--color-text)', standaloneLight: '#1A1A19',
+    hostDark: 'var(--color-text)', standaloneDark: '#E8E5DD',
+  },
+  {
+    family: 'structural', name: 'paper', token: '--fig-paper', label: 'figure background',
+    hostLight: 'var(--color-bg)', standaloneLight: '#FDFCF9',
+    hostDark: 'var(--color-bg)', standaloneDark: '#1A1816',
+  },
+  {
+    family: 'structural', name: 'grid', token: '--fig-grid', label: 'essential secondary structure',
+    hostLight: '#8C8981', standaloneLight: '#8C8981',
+    hostDark: '#746E67', standaloneDark: '#746E67',
+  },
+]);
+
+export const SERIES_FIGURE_TOKENS = frozenEntries([
+  { family: 'series', ordinal: 1, name: 'orange', token: '--series-1', authoring: '#E69F00', hostLight: '#E69F00', standaloneLight: '#E69F00', hostDark: '#E69F00', standaloneDark: '#E69F00' },
+  { family: 'series', ordinal: 2, name: 'sky blue', token: '--series-2', authoring: '#56B4E9', hostLight: '#56B4E9', standaloneLight: '#56B4E9', hostDark: '#56B4E9', standaloneDark: '#56B4E9' },
+  { family: 'series', ordinal: 3, name: 'bluish green', token: '--series-3', authoring: '#009E73', hostLight: '#009E73', standaloneLight: '#009E73', hostDark: '#009E73', standaloneDark: '#009E73' },
+  { family: 'series', ordinal: 4, name: 'yellow', token: '--series-4', authoring: '#F0E442', hostLight: '#F0E442', standaloneLight: '#F0E442', hostDark: '#F0E442', standaloneDark: '#F0E442' },
+  { family: 'series', ordinal: 5, name: 'blue', token: '--series-5', authoring: '#0072B2', hostLight: '#0072B2', standaloneLight: '#0072B2', hostDark: '#0072B2', standaloneDark: '#0072B2' },
+  { family: 'series', ordinal: 6, name: 'vermillion', token: '--series-6', authoring: '#D55E00', hostLight: '#D55E00', standaloneLight: '#D55E00', hostDark: '#D55E00', standaloneDark: '#D55E00' },
+  { family: 'series', ordinal: 7, name: 'reddish purple', token: '--series-7', authoring: '#CC79A7', hostLight: '#CC79A7', standaloneLight: '#CC79A7', hostDark: '#CC79A7', standaloneDark: '#CC79A7' },
+  {
+    family: 'series', ordinal: 8, name: 'neutral ink', token: '--series-8',
+    authoring: '#000000', hostLight: 'var(--fig-ink)', standaloneLight: 'var(--fig-ink)',
+    hostDark: 'var(--fig-ink)', standaloneDark: 'var(--fig-ink)',
+    // PDF export loses the distinction between categorical black and labels.
+    // Both aliases resolve through --fig-ink, so the rendered value agrees.
+    svgVariable: '--diagram-ink',
+  },
+]);
+
+export const FIGURE_TOKEN_DEFINITIONS = Object.freeze([
+  ...SEMANTIC_FIGURE_TOKENS,
+  ...STRUCTURAL_FIGURE_TOKENS,
+  ...SERIES_FIGURE_TOKENS,
+]);
+
+export const FIGURE_COMPATIBILITY_ALIASES = frozenEntries([
+  { token: '--diagram-ink', value: 'var(--fig-ink)' },
+  { token: '--diagram-paper', value: 'var(--fig-paper)' },
+  { token: '--diagram-grid', value: 'var(--fig-grid)' },
+]);
+
+export const FIGURE_AUTHORING_COLOR_MAP = Object.freeze([
+  ...SEMANTIC_FIGURE_TOKENS,
+  ...SERIES_FIGURE_TOKENS,
+].map((entry) => Object.freeze({
+  family: entry.family,
+  authoring: entry.authoring,
+  token: entry.token,
+  variable: entry.svgVariable ?? entry.token,
+})));
+
+export const FIGURE_TOKEN_BLOCK_START = '/* BEGIN GENERATED FIGURE TOKENS — source: src/lib/figure-palette.mjs */';
+export const FIGURE_TOKEN_BLOCK_END = '/* END GENERATED FIGURE TOKENS */';
+
+function declarations(entries, key, { comments = false } = {}) {
+  return entries.map((entry) => {
+    const comment = comments ? ` /* ${entry.label ?? entry.name} */` : '';
+    return `  ${entry.token}: ${entry[key]};${comment}`;
+  });
+}
+
+/** Render the checked block committed in styles/tokens.css. */
+export function renderFigureTokenCssBlock() {
+  const light = [
+    ...declarations(SEMANTIC_FIGURE_TOKENS, 'hostLight', { comments: true }),
+    ...declarations(STRUCTURAL_FIGURE_TOKENS, 'hostLight', { comments: true }),
+    '',
+    '  /* Canonical Okabe–Ito order. Never reorder ordinals per chart or theme. */',
+    ...declarations(SERIES_FIGURE_TOKENS, 'hostLight', { comments: true }),
+    '',
+    '  /* Backward-compatible aliases used by build-figures since v4.11.0. */',
+    ...FIGURE_COMPATIBILITY_ALIASES.map((entry) => `  ${entry.token}: ${entry.value};`),
+  ];
+  const dark = declarations(FIGURE_TOKEN_DEFINITIONS, 'hostDark');
+
+  return [
+    FIGURE_TOKEN_BLOCK_START,
+    '/* Do not edit this block by hand. Semantic Warm–Tol roles and ordinal',
+    ' * Okabe–Ito series are intentionally separate public contracts. */',
+    ':root {',
+    ...light,
+    '}',
+    '',
+    '@media (prefers-color-scheme: dark) {',
+    '  :root:not([data-theme="light"]) {',
+    ...dark.map((line) => `  ${line}`),
+    '  }',
+    '}',
+    '',
+    ':root[data-theme="dark"] {',
+    ...dark,
+    '}',
+    FIGURE_TOKEN_BLOCK_END,
+  ].join('\n');
+}
+
+/** Render minified defaults embedded into standalone generated SVGs. */
+export function renderStandaloneFigureThemeCss() {
+  const themed = (key) => FIGURE_TOKEN_DEFINITIONS
+    .map((entry) => `${entry.token}:${entry[key]}`)
+    .join(';');
+  const aliases = FIGURE_COMPATIBILITY_ALIASES
+    .map((entry) => `${entry.token}:${entry.value}`)
+    .join(';');
+  return `:root{${themed('standaloneLight')};${aliases}}` +
+    `@media (prefers-color-scheme:dark){:root{${themed('standaloneDark')}}}`;
+}

package/src/lib/figure.mjs

@@ -11,7 +11,7 @@
  * Why a stylesheet, not presentation attributes: `var()` inside a presentation
  * attribute (`fill="var(--x, …)"`) has unreliable browser support, whereas
  * `var()` in a real <style> rule is universal. So `recolorSvg` injects an
- * attribute-selector rule per distinct neutral color and never mutates a
+ * attribute-selector rule per distinct themeable color and never mutates a
  * drawing element — the untouched `fill=""`/`stroke=""` attribute is the
  * automatic fallback where `var()` is unsupported.
  *
@@ -20,19 +20,22 @@
  * prefers-color-scheme via the embedded <style data-diagram-theme>. Inlining
  * puts the SVG in the host DOM, so the host's tokens.css (which tracks the
  * in-page [data-theme] toggle) themes it. `assembleSvg` therefore STRIPS the
- * embedded theme block so the host is the sole source of --diagram-*.
+ * embedded theme block so the host is the sole source of --fig-*, --series-*,
+ * and the backward-compatible --diagram-* aliases.
  *
  * Pure string ops only — no `node:` imports — so the module bundles for any
  * consumer (Figure.astro imports it; fs lives in the .astro/.mjs callers).
  */
 
+import {
+  FIGURE_AUTHORING_COLOR_MAP,
+  renderStandaloneFigureThemeCss,
+} from './figure-palette.mjs';
+
 // Standalone self-theming defaults: used only when the SVG is NOT inlined
 // (direct file open / <img>). Hex literals because host CSS vars don't exist
-// there. Mirrors styles/tokens.css light + dark neutral values.
-export const DIAGRAM_THEME_CSS =
-  ':root{--diagram-ink:#1A1A19;--diagram-paper:#FDFCF9;--diagram-grid:#B5B3AA}' +
-  '@media (prefers-color-scheme:dark){:root{' +
-  '--diagram-ink:#E8E5DD;--diagram-paper:#1A1816;--diagram-grid:#3A3632}}';
+// there. Generated from the same pure manifest as the host tokens.css block.
+export const DIAGRAM_THEME_CSS = renderStandaloneFigureThemeCss();
 
 const DIAGRAM_VAR = {
   ink: '--diagram-ink',
@@ -40,6 +43,24 @@ const DIAGRAM_VAR = {
   grid: '--diagram-grid',
 };
 
+// Exact canonical authoring colors. Match by parsed RGB rather than source
+// spelling so #3B6FA0, rgb(59,111,160), and Poppler's rgb(23.137%,…) all
+// resolve to one semantic variable. Palette recognition MUST run before the
+// neutral heuristic: base hue + fill-opacity remains themeable, whereas a
+// pre-blended pale tint can otherwise look neutral and collapse to paper.
+function rgbKeyFromHex(hex) {
+  return [1, 3, 5]
+    .map((offset) => Number.parseInt(hex.slice(offset, offset + 2), 16))
+    .join(',');
+}
+
+const PALETTE_VAR_BY_RGB = new Map(
+  FIGURE_AUTHORING_COLOR_MAP.map(({ authoring, variable }) => [
+    rgbKeyFromHex(authoring),
+    variable,
+  ]),
+);
+
 /**
  * Parse a solid SVG paint into {r,g,b} in [0,1], or null when it is not a
  * concrete color we should remap (none / url(...) / currentColor / inherit).
@@ -86,11 +107,32 @@ export function classifyColor(value) {
   return 'grid';
 }
 
+/**
+ * Return the CSS custom property for a known Warm–Tol / Okabe–Ito color, or
+ * for a neutral paint classified as ink/paper/grid. Unknown saturated colors
+ * return null and stay exactly as authored.
+ */
+export function figureColorVariable(value) {
+  const c = parseColor(value);
+  if (c && [c.r, c.g, c.b].every((channel) => channel >= 0 && channel <= 1)) {
+    const key = [c.r, c.g, c.b].map((channel) => Math.round(channel * 255)).join(',');
+    const paletteVar = PALETTE_VAR_BY_RGB.get(key);
+    if (paletteVar) return paletteVar;
+  }
+
+  const cls = classifyColor(value);
+  return cls ? DIAGRAM_VAR[cls] : null;
+}
+
 // Escape a value for use inside a CSS [attr="…"] selector string.
 function cssAttrEscape(s) {
   return s.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
 }
 
+const THEME_BLOCK_RE = /<style\b[^>]*\bdata-diagram-theme\b[^>]*>[\s\S]*?<\/style>/gi;
+const MAP_BLOCK_RE = /<style\b[^>]*\bdata-diagram-map\b[^>]*>[\s\S]*?<\/style>/gi;
+const CURRENT_MAP_RE = /\bdata-diagram-map=(?:"2"|'2')/i;
+
 /**
  * Rewrite a pdftocairo SVG to be theme-aware + carry role="img". Pure and
  * idempotent (a second pass is a no-op). `opts.optOut` short-circuits, returning
@@ -98,55 +140,63 @@ function cssAttrEscape(s) {
  *
  * Injects, right after the opening <svg> tag:
  *   <style data-diagram-theme> — standalone var defaults + @media(dark).
- *   <style data-diagram-map>   — `[fill="C"]{fill:var(--diagram-X, C)}` … per
- *                                 distinct neutral color C. Elements are NOT
- *                                 modified; the attribute stays as fallback.
+ *   <style data-diagram-map="2"> — `[fill="C"]{fill:var(--fig-X, C)}` … per
+ *                                 distinct known-palette or neutral color C.
+ *                                 Elements are NOT modified; the attribute
+ *                                 stays as fallback.
  */
 export function recolorSvg(svg, { optOut = false } = {}) {
   if (typeof svg !== 'string') return svg;
-  if (optOut || svg.includes('data-diagram-map')) return svg;
+  if (optOut || CURRENT_MAP_RE.test(svg)) return svg;
+  if (!/<svg\b[^>]*>/i.test(svg)) return svg;
 
-  const openMatch = svg.match(/<svg\b[^>]*>/i);
-  if (!openMatch) return svg;
+  // A pre-v2 map contains only neutral roles. Remove its generated blocks and
+  // rebuild from the untouched presentation attributes so cached SVGs gain
+  // palette mappings after an upgrade without needing a source-file touch.
+  const cleanSvg = svg.includes('data-diagram-map')
+    ? svg.replace(THEME_BLOCK_RE, '').replace(MAP_BLOCK_RE, '')
+    : svg;
+
+  const openMatch = cleanSvg.match(/<svg\b[^>]*>/i);
+  if (!openMatch) return svg; // defensive: generated-block cleanup never removes <svg>
 
   // Distinct concrete colors used as fill="" / stroke="" attributes.
-  const found = new Map(); // original string → class
+  const found = new Map(); // original string → CSS custom property
   const attrRe = /\b(?:fill|stroke)="([^"]+)"/g;
   let am;
-  while ((am = attrRe.exec(svg)) !== null) {
+  while ((am = attrRe.exec(cleanSvg)) !== null) {
     if (found.has(am[1])) continue;
-    const cls = classifyColor(am[1]);
-    if (cls) found.set(am[1], cls);
+    const variable = figureColorVariable(am[1]);
+    if (variable) found.set(am[1], variable);
   }
 
   let openTag = openMatch[0];
   if (!/\srole=/i.test(openTag)) openTag = openTag.replace(/<svg\b/i, '<svg role="img"');
 
-  // Nothing neutral to remap — still surface role="img" for a11y, no <style>.
+  // Nothing themeable to remap — still surface role="img" for a11y, no <style>.
   if (found.size === 0) {
     return openTag === openMatch[0]
-      ? svg
-      : svg.slice(0, openMatch.index) + openTag + svg.slice(openMatch.index + openMatch[0].length);
+      ? cleanSvg
+      : cleanSvg.slice(0, openMatch.index) + openTag + cleanSvg.slice(openMatch.index + openMatch[0].length);
   }
 
   let mapCss = '';
-  for (const [orig, cls] of found) {
-    const v = DIAGRAM_VAR[cls];
+  for (const [orig, variable] of found) {
     const sel = cssAttrEscape(orig);
     mapCss +=
-      `[fill="${sel}"]{fill:var(${v}, ${orig})}` +
-      `[stroke="${sel}"]{stroke:var(${v}, ${orig})}`;
+      `[fill="${sel}"]{fill:var(${variable}, ${orig})}` +
+      `[stroke="${sel}"]{stroke:var(${variable}, ${orig})}`;
   }
 
   const styleBlocks =
     `<style data-diagram-theme>${DIAGRAM_THEME_CSS}</style>` +
-    `<style data-diagram-map>${mapCss}</style>`;
+    `<style data-diagram-map="2">${mapCss}</style>`;
 
   return (
-    svg.slice(0, openMatch.index) +
+    cleanSvg.slice(0, openMatch.index) +
     openTag +
     styleBlocks +
-    svg.slice(openMatch.index + openMatch[0].length)
+    cleanSvg.slice(openMatch.index + openMatch[0].length)
   );
 }
 
@@ -162,10 +212,36 @@ export function shouldInline(src) {
   );
 }
 
-const THEME_BLOCK_RE = /<style\b[^>]*\bdata-diagram-theme\b[^>]*>[\s\S]*?<\/style>/gi;
+/**
+ * Convert a local SVG URL into a path relative to the consumer's `public/`
+ * directory. Astro prefixes dynamic asset URLs with BASE_URL on non-root
+ * deployments, but that prefix is a URL concern and is not present on disk.
+ * Literal root URLs remain supported so this helper is backward-compatible.
+ *
+ * Reject dot segments and backslashes before the filesystem boundary. Figure
+ * sources are author-controlled, but an inline helper should never make an
+ * out-of-tree file available to `set:html` accidentally.
+ */
+export function publicSvgPath(src, base = '/') {
+  if (!shouldInline(src) || src.includes('\\')) return null;
+
+  const baseSegments = typeof base === 'string'
+    ? base.split('/').filter(Boolean)
+    : [];
+  const normalizedBase = baseSegments.length ? `/${baseSegments.join('/')}/` : '/';
+  const withoutBase = normalizedBase !== '/' && src.startsWith(normalizedBase)
+    ? src.slice(normalizedBase.length)
+    : src.replace(/^\/+/, '');
+  const segments = withoutBase.split('/');
+
+  if (!segments.length || segments.some((segment) => !segment || segment === '.' || segment === '..')) {
+    return null;
+  }
+  return segments.join('/');
+}
 
-/** Remove the standalone self-theming block so the host tokens.css is the sole
- *  source of --diagram-* once the SVG is inlined into the page. */
+/** Remove the standalone self-theming block so host tokens.css is the sole
+ *  source of figure variables once the SVG is inlined into the page. */
 export function stripThemeBlock(svg) {
   return typeof svg === 'string' ? svg.replace(THEME_BLOCK_RE, '') : svg;
 }
@@ -204,7 +280,7 @@ function mergeSvgStyle(openTag, css) {
  * Prepare a raw pipeline SVG for inline embedding in <Figure>:
  *   - strip the standalone <style data-diagram-theme> (host tokens.css themes it);
  *   - replace any pre-existing <title>/<desc> with ones from the call-site props
- *     (caption → <title>, desc ?? alt → <desc>) and wire aria-labelledby;
+ *     (alt ?? caption → <title>, desc → <desc>) and wire aria-labelledby;
  *   - ensure role="img" and a responsive width on the root <svg>.
  * Pure string transform; output is a trusted local build artifact (set:html).
  */
@@ -222,23 +298,23 @@ export function assembleSvg(raw, opts = {}) {
     .replace(/<title\b[^>]*>[\s\S]*?<\/title>/gi, '')
     .replace(/<desc\b[^>]*>[\s\S]*?<\/desc>/gi, '');
 
-  const titleText = caption ?? alt ?? '';
-  const descText = desc ?? (alt && alt !== titleText ? alt : '');
+  // Match the raster fallback: `alt` is the short accessible name. A caption
+  // is only its fallback, while `desc` remains the optional long description.
+  const titleText = alt ?? caption ?? '';
+  const descText = desc ?? '';
   const id = String(idBase).replace(/[^a-zA-Z0-9_-]/g, '-');
 
   const a11y = [];
-  const labelledby = [];
   if (titleText) {
     a11y.push(`<title id="${id}-title">${escapeXml(titleText)}</title>`);
-    labelledby.push(`${id}-title`);
   }
   if (descText) {
     a11y.push(`<desc id="${id}-desc">${escapeXml(descText)}</desc>`);
-    labelledby.push(`${id}-desc`);
   }
 
   openTag = ensureSvgAttr(openTag, 'role', 'img');
-  if (labelledby.length) openTag = setSvgAttr(openTag, 'aria-labelledby', labelledby.join(' '));
+  if (titleText) openTag = setSvgAttr(openTag, 'aria-labelledby', `${id}-title`);
+  if (descText) openTag = setSvgAttr(openTag, 'aria-describedby', `${id}-desc`);
   openTag = mergeSvgStyle(openTag, `width:${width};max-width:100%;height:auto`);
 
   return `${svg.slice(0, openMatch.index)}${openTag}${a11y.join('')}${body}`;

package/styles/tokens.css

@@ -54,15 +54,6 @@
   --callout-learn:    var(--warm-gold);
   --callout-diagnostic: color-mix(in srgb, var(--warm-blue) 55%, var(--warm-green)); /* #110 DIKTA self-check — teal blend, distinct from plum Practice */
 
-  /* Diagram semantic roles (v4.11.0, #84): theme-aware TikZ→SVG figures.
-   * build-figures remaps an SVG's neutral fills/strokes to these via
-   * var(--diagram-*, <original>); <Figure> inlines the SVG so this cascade
-   * reaches it. They point at existing roles, so they auto-flip in dark mode
-   * (no dark-block edits) — ink↔text, paper↔page bg, grid↔border. */
-  --diagram-ink:      var(--color-text);
-  --diagram-paper:    var(--color-bg);
-  --diagram-grid:     var(--color-border);
-
   /* ===== Typography scale ===== */
   --font-body: 'Roboto Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-code: 'Source Code Pro Variable', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
@@ -212,3 +203,76 @@
   --astro-code-token-parameter:         color-mix(in srgb, var(--warm-blue)  55%, white);
   --astro-code-token-function:          color-mix(in srgb, var(--warm-gold)  65%, white);
 }
+
+/* BEGIN GENERATED FIGURE TOKENS — source: src/lib/figure-palette.mjs */
+/* Do not edit this block by hand. Semantic Warm–Tol roles and ordinal
+ * Okabe–Ito series are intentionally separate public contracts. */
+:root {
+  --fig-blue: #3B6FA0; /* default / lightweight */
+  --fig-rose: #C06858; /* caution / problem */
+  --fig-green: #4A7E3F; /* positive outcome */
+  --fig-plum: #8A4E82; /* authority / heaviest */
+  --fig-gold: #9D7D34; /* packaging / coordination */
+  --fig-crimson: #A03838; /* failure / severe problem */
+  --fig-ink: var(--color-text); /* labels / axes / outlines */
+  --fig-paper: var(--color-bg); /* figure background */
+  --fig-grid: #8C8981; /* essential secondary structure */
+
+  /* Canonical Okabe–Ito order. Never reorder ordinals per chart or theme. */
+  --series-1: #E69F00; /* orange */
+  --series-2: #56B4E9; /* sky blue */
+  --series-3: #009E73; /* bluish green */
+  --series-4: #F0E442; /* yellow */
+  --series-5: #0072B2; /* blue */
+  --series-6: #D55E00; /* vermillion */
+  --series-7: #CC79A7; /* reddish purple */
+  --series-8: var(--fig-ink); /* neutral ink */
+
+  /* Backward-compatible aliases used by build-figures since v4.11.0. */
+  --diagram-ink: var(--fig-ink);
+  --diagram-paper: var(--fig-paper);
+  --diagram-grid: var(--fig-grid);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --fig-blue: #7297BB;
+    --fig-rose: #D29287;
+    --fig-green: #7DA275;
+    --fig-plum: #AB80A5;
+    --fig-gold: #D2B575;
+    --fig-crimson: #BB7070;
+    --fig-ink: var(--color-text);
+    --fig-paper: var(--color-bg);
+    --fig-grid: #746E67;
+    --series-1: #E69F00;
+    --series-2: #56B4E9;
+    --series-3: #009E73;
+    --series-4: #F0E442;
+    --series-5: #0072B2;
+    --series-6: #D55E00;
+    --series-7: #CC79A7;
+    --series-8: var(--fig-ink);
+  }
+}
+
+:root[data-theme="dark"] {
+  --fig-blue: #7297BB;
+  --fig-rose: #D29287;
+  --fig-green: #7DA275;
+  --fig-plum: #AB80A5;
+  --fig-gold: #D2B575;
+  --fig-crimson: #BB7070;
+  --fig-ink: var(--color-text);
+  --fig-paper: var(--color-bg);
+  --fig-grid: #746E67;
+  --series-1: #E69F00;
+  --series-2: #56B4E9;
+  --series-3: #009E73;
+  --series-4: #F0E442;
+  --series-5: #0072B2;
+  --series-6: #D55E00;
+  --series-7: #CC79A7;
+  --series-8: var(--fig-ink);
+}
+/* END GENERATED FIGURE TOKENS */