@openpresentation/opf-render 0.22.2 → 0.24.1

package/README.md

@@ -606,6 +606,16 @@ Classic chart previews keep finite axis coordinates for subnormal values and val
 
 Category-axis labels follow PowerPoint's automatic labelling instead of wrapping inside a band (column, bar, line and area charts, including stacked and 100%, and the chartex histogram, pareto, waterfall, funnel and box-and-whisker previews). A label is never broken inside a word: it stays on one line, or splits at its spaces onto two lines when a band is too narrow, so `Category 1` cannot become `Ca` over `t 1`. When the labels do not fit horizontally they turn to -45 degrees, then -90 degrees (the plot area shrinks to make room, by at most 40% of the chart height, and a slanted first label must stay inside the chart), and when even that collides the axis draws every n-th label (Office's automatic `tickLblSkip`): n is the smallest interval that leaves no two drawn labels overlapping, the first label is always drawn, and ties go to the less rotated arrangement. In horizontal bar charts and funnels, where the category axis is vertical, rows shorter than a line of text are skipped the same way, and the label gutter grows with the longest label up to 30% of the chart width. Only a label wider than that gutter (or wider than the whole chart on a horizontal axis) is ellipsized, and then the renderer reports one `chart-label-truncated` diagnostic per chart with the affected label paths in `labels`; nothing is shortened silently, and no arrangement raises `text-overflow` for an axis label. Radar spoke labels use the same one-line, two-line or ellipsis rule and leave out a spoke label that would collide with one already drawn. Rotated labels are wrapped in a `<g transform="rotate(...)">` around their usual text group, so the traced `data-opf-box-*` attributes describe the unrotated box. PowerPoint applies its own automatic rotation and skip to the exported chart: opf-pptx writes an automatic axis text body (`<a:bodyPr/>`, no `rot`) and no `tickLblSkip` for these axes, so nothing forces a wrap, and the preview and the export make the same kind of choice, not identical ones (the export uses 9 pt labels, the preview the readability floor).
 
+### Chart previews and opf-pptx 0.22: same colors, axis and text (since 0.22.2)
+
+Since 0.22.2 the classic chart preview draws what `@openpresentation/opf-pptx` 0.22.0 exports, so a chart looks alike in the preview, PowerPoint and Keynote in these three respects (the paragraph above lists the core functions involved):
+
+- **Series colors.** The preview draws core's palette of the deck's color scheme (`accent1` to `accent6`, then tints) with the chart's `chart.colors` over it, adjusted for contrast against the chart panel; `chart.highlight` still wins. opf-pptx writes the same colors, as theme colors (`a:schemeClr`) where the deck theme holds them, so re-theming a deck recolors both. Before 0.22.2 the preview drew a fixed twelve-color palette and ignored `design.colorScheme` and `chart.colors`.
+- **Value axis.** Column, bar, line and area charts draw the axis core composes for the chart's box (`min`, `max`, `majorUnit`), and opf-pptx writes the same three numbers (`c:min`, `c:max`, `c:majorUnit`), so the gridlines agree. On a short or narrow plot core's estimate of the plot (from the box, without measuring text) can take one larger step than the old fit to the laid-out plot did. Other chart types keep their own scale in the preview, and opf-pptx leaves their axis to the application.
+- **Chart text.** Axis, legend, category and data-label text is 20 px (15 pt) in a roomy box, shrunk only for a small one and never below the minimum font size; before 0.22.2 it was 14 px floored at 16 px (12 pt). The axis core composes is estimated for this size.
+
+Chart previews are still not pixel-identical to PowerPoint or Keynote.
+
 ## Long-lived workers: measured memory and latency (opf-render#171)
 
 A render or export service keeps one fonts handle per worker process and reuses it ("load fonts once per worker"). `npm run bench:soak` (`scripts/soak.mjs`; manual or scheduled, never part of the default CI gate) measures that pattern. Each worker process holds one `loadFonts({ pack: 'office', substitutionPolicy: 'visual', scripts: 'auto' })` handle for its whole life, blocks the network (a guard counts and refuses any attempt) and repeats jobs: `fonts.ensure(deck)`, `toSvg`, `toPng` of those SVGs and `toPptx` (opf-pptx 0.18.0, which is not a dependency of this package: `npm install --no-save @openpresentation/opf-pptx@0.18.0` and run with `--link-renderer`, since opf-pptx imports the renderer as an optional peer; without opf-pptx the PPTX leg is skipped). The jobs take the 127 core example decks in rotation (5 jobs in 6) and a 30-slide script deck built from the script corpora (every sixth job; one slide per script from Latin to Tibetan, with CJK, Arabic and Indic text, so `ensure` loads the script faces), 500 jobs per worker at concurrency 1 and 4. Memory is sampled after every job following a forced garbage collection (`heapUsed`, the retained heap, and `rss`).

package/dist/charts.js

@@ -189,6 +189,12 @@ function chartContext(item, box, bound, options, svg, { rows, columns, formats,
   // RR-90: core's chart text size (20 px, shrunk only for a small box, never below minFontSize), the size core's value-axis density assumes.
   const requested = chartTextSize({ width: box.width, height: box.height, scale: u, minFontSize: composition.minFontSize }), fontPx = requested * u;
   const surface = bound.design.colors.surface;
+  // RR-96: every neutral comes from the slide's variant (core `roles.neutrals`: tx1 mixed into bg1, the colours the PPTX export writes as
+// scheme colours): chart text, gridlines, axis lines and the outline between marks (bg1).
+const neutrals = bound.design.roles.neutrals;
+  // The quiet colour of axis, legend and category text; `labelColor` stays the full text colour (highlight mutes toward it and labels inside
+  // marks contrast against it, as the PPTX export draws them).
+  const chartTextColor = textColorForFill(surface, neutrals.chartText.hex);
   const labelColor = textColorForFill(surface, bound.design.colors.text);
   const style = resolveTextStyle({ fontFamily: bound.design.fonts.body, fontWeight: 400, italic: false, path: item.path }, options.textMeasurement);
   const measure = textWidthMeasurer(style, options.textMeasurement);
@@ -202,7 +208,7 @@ function chartContext(item, box, bound, options, svg, { rows, columns, formats,
     return path.replace(/^(.*\.data\.(?:columns\.|rows\.\d+\.))(\d+)$/, (whole, head, column) => `${head}${trace.columnMap[Number(column)] ?? column}`);
   };
   const c = {
-    item, box, bound, options, svg, rows, columns, formats, combo, children, u, fontPx, surface, labelColor,
+    item, box, bound, options, svg, rows, columns, formats, combo, children, u, fontPx, surface, labelColor, chartTextColor,
     path: item.path,
     pt: u * 4 / 3,
     pad: 10 * u,
@@ -211,11 +217,12 @@ function chartContext(item, box, bound, options, svg, { rows, columns, formats,
     // clear space kept between neighbouring category labels.
     textHeight: fontPx * 1.22,
     labelGap: fontPx * 0.1,
-    colors: chartSeriesPalette(surface, bound.design.colorScheme, item.value?.colors, { roles: bound.design.colors, variables: bound.design.variables }),
+    colors: chartSeriesPalette(surface, bound.design.colorScheme, item.value?.colors, { accents: bound.design.roles.map.accents, roles: bound.design.colors, variables: bound.design.variables }),
     // RR-92: the value axis core composed for a column, bar, line or area chart ({ min, max, majorUnit }); absent for the other types.
     valueAxis: item.chart?.valueAxis,
-    gridColor: bound.design.colors.border,
-    axisColor: "#888888",
+    gridColor: neutrals.gridline.hex,
+    axisColor: neutrals.axisLine.hex,
+    outlineColor: neutrals.outline.hex,
     number: chartNumber,
     label: (value) => value === null || value === undefined ? "" : String(value),
     width: (value) => measure(String(value), fontPx),
@@ -225,7 +232,7 @@ function chartContext(item, box, bound, options, svg, { rows, columns, formats,
       for (const [key, value] of Object.entries(attrs)) out[key] = numericAttrs.has(key) && typeof value === "number" ? n(value) : value;
       children.push(svg.tag(name, { ...out, ...(path ? svg.traceAttrs(options, tracePath(path)) : {}) }));
     },
-    textElement(value, rect, path, align = "center", fill = labelColor) {
+    textElement(value, rect, path, align = "center", fill = chartTextColor) {
       if (!(rect.width > 0 && rect.height > 0)) return "";
       return svg.renderTextBox(String(value), rect, bound, {
         path: tracePath(path), fontSize: requested, fontFamily: bound.design.fonts.body, fontWeight: 400,
@@ -406,7 +413,7 @@ function seriesLegend(c, series, key, marker = false) {
 }
 
 function gridline(c, x1, y1, x2, y2) {
-  c.mark("line", { x1, y1, x2, y2, stroke: c.gridColor, "stroke-opacity": 0.7, "stroke-width": c.pt });
+  c.mark("line", { x1, y1, x2, y2, stroke: c.gridColor, "stroke-width": c.pt });
 }
 
 function axisLine(c, x1, y1, x2, y2) {
@@ -933,7 +940,7 @@ function renderCircularChart(c, spec) {
     c.text("No positive chart values", area, c.path);
     return;
   }
-  const border = { stroke: "#F9F9F9", "stroke-width": 0.75 * c.pt };
+  const border = { stroke: c.outlineColor, "stroke-width": 0.75 * c.pt };
   let angle = -Math.PI / 2;
   values.forEach((value, i) => {
     const delta = value / total * Math.PI * 2, end = angle + delta;
@@ -1059,7 +1066,7 @@ function renderRadarChart(c, spec) {
   for (const tick of scale.ticks) {
     if (tick === scale.min) continue;
     const ring = categories.map((_, i) => point(i, tick).map(n).join(" "));
-    c.mark("path", { d: `M ${ring.join(" L ")} Z`, fill: "none", stroke: c.gridColor, "stroke-opacity": 0.7, "stroke-width": c.pt });
+    c.mark("path", { d: `M ${ring.join(" L ")} Z`, fill: "none", stroke: c.gridColor, "stroke-width": c.pt });
   }
   // A spoke label that would collide with one already drawn is left out; the first is always kept.
   const drawn = [], truncated = [];
@@ -1385,7 +1392,7 @@ function renderTreemapChart(c) {
   const rects = squarify(items, area.x, area.y, area.width, area.height);
   rects.forEach((rect, i) => {
     if (!rect || !(rect.width > 0) || !(rect.height > 0)) return;
-    c.mark("rect", { x: rect.x, y: rect.y, width: rect.width, height: rect.height, fill: c.colors[i % c.colors.length], stroke: "#FFFFFF", "stroke-width": c.pt }, `${c.path}.data.rows.${i}.${column}`);
+    c.mark("rect", { x: rect.x, y: rect.y, width: rect.width, height: rect.height, fill: c.colors[i % c.colors.length], stroke: c.outlineColor, "stroke-width": c.pt }, `${c.path}.data.rows.${i}.${column}`);
     // RR-35: the treemap labels its tiles with category names by default; dataLabels picks the content, false removes them. PowerPoint
     // draws the label at the bottom left of its tile whatever the position attribute says (native check 2026-10-01), so the preview does.
     if (!c.dataLabelsOff && rect.width >= fontPx * 2 && rect.height >= c.lineHeight) {
@@ -1486,12 +1493,12 @@ function renderRegionMapChart(c) {
   const tileWidth = area.width / columns, tileHeight = area.height / rowsCount;
   const finite = values.filter((value) => value !== null);
   const min = finite.length ? Math.min(...finite) : 0, max = finite.length ? Math.max(...finite) : 0;
-  const light = mixHex(/^#[0-9A-Fa-f]{6}$/.test(c.surface) ? c.surface : "#FFFFFF", c.colors[0], 0.15);
+  const light = mixHex(/^#[0-9A-Fa-f]{6}$/.test(c.surface) ? c.surface : c.outlineColor, c.colors[0], 0.15);
   categories.forEach((name, i) => {
     const value = values[i];
     const t = value === null ? 0 : max > min ? axisFraction(value, {min, max}) : 1;
     const x = area.x + (i % columns) * tileWidth, y = area.y + Math.floor(i / columns) * tileHeight;
-    c.mark("rect", { x, y, width: tileWidth, height: tileHeight, fill: value === null ? c.surface : mixHex(light, c.colors[0], t), stroke: "#FFFFFF", "stroke-width": c.pt }, `${c.path}.data.rows.${i}.${column}`);
+    c.mark("rect", { x, y, width: tileWidth, height: tileHeight, fill: value === null ? c.surface : mixHex(light, c.colors[0], t), stroke: c.outlineColor, "stroke-width": c.pt }, `${c.path}.data.rows.${i}.${column}`);
     const inset = { x: x + fontPx * 0.25, width: Math.max(1, tileWidth - fontPx * 0.5) };
     if (tileHeight >= c.lineHeight * 2) {
       c.text(name, { ...inset, y: y + tileHeight / 2 - c.lineHeight, height: c.lineHeight }, `${c.path}.data.rows.${i}.0`);

package/dist/svg.js

@@ -3,8 +3,8 @@
 import {
   layoutTable, fitList, fitRichText, composeSlide, resolveTextStyle, textWidthMeasurer, fitText, textColorForFill, chartColorForFill,
   resolveColorRef as resolveCoreColorRef, resolveScriptFonts, paragraphDirection, physicalAlignment, patternRuns,
-  metricTrendMark as coreMetricTrendMark, tokenizeCode, codeLineRuns, codeSyntaxPaletteForScheme, resolveChartData,
-  resolveColorRoles, defaultSlideBackground, timelineMarkerShapes, timelineTextColor, layoutWatermark,
+  metricTrendMark as coreMetricTrendMark, tokenizeCode, codeLineRuns, codeSyntaxPaletteForRoles, readableSchemeColor, resolveChartData,
+  timelineMarkerShapes, timelineTextColor, layoutWatermark,
   codeHighlightLines, codeLineNumbers, codeHighlightBands, codeHighlightColors, fitImage, intrinsicImageAspect, intrinsicImageSize,
   ENGINE_DEFAULT_THEME, ENGINE_DEFAULT_COLOR_SCHEME, ENGINE_DEFAULT_FONT_SCHEME, ENGINE_DEFAULT_CHART_TYPES
 } from "@openpresentation/opf/composition";
@@ -299,18 +299,18 @@ const IMAGE_BACKGROUND_SOURCE = /^(asset:|https:\/\/|data:|\.\/|\.\.\/)/;
 
 // The slide's single background color, or null when there is none (a gradient, or no color the engine can read).
 // With no definition, or a picture, the scheme's default slide background (core defaultSlideBackground) is the canvas.
-function resolveBackground(background, colorScheme, design) {
-  const canvas = defaultSlideBackground(colorScheme);
+function resolveBackground(background, colorScheme, design, canvas) {
   if (!background) return canvas;
   if (typeof background === "string") return IMAGE_BACKGROUND_SOURCE.test(background) ? canvas : colorFromScheme(colorScheme, background, canvas);
   if (background.type === "theme") return colorFromScheme(colorScheme, background.slot, canvas);
-  if (background.type === "solid") return resolveBackgroundColor(background.color, design, "#FFFFFF");
+  if (background.type === "solid") return resolveBackgroundColor(background.color, design, canvas);
   if (background.type === "gradient") return null;
-  if (background.type === "pattern") return resolveBackgroundColor(background.pattern?.backgroundColor, design, "#FFFFFF");
+  if (background.type === "pattern") return resolveBackgroundColor(background.pattern?.backgroundColor, design, canvas);
   return canvas;
 }
 
 
+// An unparseable colour measures as white: this is a luminance for the contrast tests below, never a colour that is drawn.
 function colorLuminance(color) {
   const hex = normalizeColor(color, "#FFFFFF").replace("#", "");
   const channels = [0, 2, 4].map(offset => {
@@ -342,6 +342,13 @@ const LINK_URL = /^(https?:|mailto:|tel:)/i;
 // sorted keys, so the output does not depend on the order a catalog lists a field in. A reference that resolves nowhere never
 // throws (unless `strictReferences`): the context falls back to core's engine defaults (ENGINE_DEFAULT_THEME, _COLOR_SCHEME,
 // _FONT_SCHEME; a layout to automatic composition) and reports `unresolved-reference`, which is forwarded as a render diagnostic.
+function drawnBackground(levels) {
+  for (const level of levels) {
+    if (level.variant !== undefined) return level.background;
+    if (level.background !== undefined && level.background !== null && level.background !== false) return level.background;
+  }
+  return undefined;
+}
 function resolveDesign(presentation, slide, slideContext) {
   const deckDesign = presentation.design ?? {};
   const slideDesign = slide.design ?? {};
@@ -350,14 +357,13 @@ function resolveDesign(presentation, slide, slideContext) {
   const colorScheme = cloneWithSortedKeys(resolved.colorScheme);
   const fontScheme = cloneWithSortedKeys(resolved.fontScheme);
   const dimensions = { width: composeOptions.width, height: composeOptions.height };
-  const backgroundDefinition = slideDesign.background ?? deckDesign.background ?? theme.background;
-  const { primary, secondary, accent } = resolveColorRoles(colorScheme);
+  // RR-96: core resolves the slide's roles (its variant's map over the scheme, the accents in order, the scheme-derived neutrals) once, in
+  // the slide context every engine shares. A variant hides the background of a less specific level (the slide is then the variant's bg1).
+  const roles = resolved.roles;
+  const backgroundDefinition = drawnBackground([slideDesign, deckDesign, theme]);
   const variables = presentation.variables ?? {};
-  // background/surface/text roles depend on the background itself, so a background reference sees only the scheme and the three accent roles.
-  const backgroundColor = resolveBackground(backgroundDefinition, colorScheme, { colorScheme, colors: { primary, secondary, accent }, variables });
-  // One resolution for every role (core resolveColorRoles), shared with the PPTX export and the validator. Whether the background is dark
-  // (relative luminance under 0.179) is core's decision in the slide context, the one composition uses for logos and bullets.
-  const roles = resolveColorRoles(colorScheme, { background: backgroundColor });
+  // A background reference sees only the scheme and the three accent roles; a picture or no background is the variant's bg1.
+  const backgroundColor = resolveBackground(backgroundDefinition, colorScheme, { colorScheme, colors: { primary: roles.primary, secondary: roles.secondary, accent: roles.accent }, variables }, roles.background);
   const darkBackground = composeOptions.darkBackground === true;
 
   return {
@@ -371,17 +377,20 @@ function resolveDesign(presentation, slide, slideContext) {
     background: backgroundDefinition,
     backgroundColor,
     colors: {
-      background: roles.background,
+      // The slide's drawn single-colour background, else the variant's bg1 (a picture, gradient or none).
+      background: backgroundColor ?? roles.background,
       surface: roles.surface,
       text: roles.text,
       mutedText: roles.textSecondary,
-      primary,
-      secondary,
-      accent,
+      primary: roles.primary,
+      secondary: roles.secondary,
+      accent: roles.accent,
       hyperlink: roles.hyperlink,
       followedHyperlink: roles.followedHyperlink,
       border: roles.border
     },
+    // RR-96: the variant's map, accent order and scheme-derived neutrals (gridline, axis line, chart text, outline, trend, code panel).
+    roles,
     fonts: { ...composeOptions.fontFamilies },
     darkBackground,
     diagnostics: diagnostics.map((entry) => ({ ...entry }))
@@ -766,7 +775,7 @@ function renderBackground(bound, width, height, options) {
     const runs=patternRuns(preset);
     const mark=runs?tag('path',{d:runs.map(run=>`M${run.x} ${run.y}h${run.width}v1h-${run.width}z`).join(''),fill:color,'shape-rendering':'crispEdges'}):'';
     if(!mark)reportDiagnostic({code:'unsupported-pattern',path:`${bound.path}.design.background.pattern.preset`,message:`Pattern ${preset} is not implemented by the SVG preview.`},options);
-    return tag('g',{...HIDDEN,opacity:background.opacity??1},tag('rect',{width,height,fill:bound.design.backgroundColor??'#FFFFFF'})+tag('defs',{},tag('pattern',{id,width:8,height:8,patternUnits:'userSpaceOnUse'},mark))+tag('rect',{width,height,fill:`url(#${id})`}));
+    return tag('g',{...HIDDEN,opacity:background.opacity??1},tag('rect',{width,height,fill:bound.design.backgroundColor??bound.design.colors.background})+tag('defs',{},tag('pattern',{id,width:8,height:8,patternUnits:'userSpaceOnUse'},mark))+tag('rect',{width,height,fill:`url(#${id})`}));
   }
   return tag("rect", {
     ...HIDDEN,
@@ -797,7 +806,17 @@ function renderBackgroundImage(background, bound, width, height, options) {
   const id = `opf-s${bound.index + 1}-background`, matrix = imageRecolorMatrix(background.recolor, bound);
   const defs = matrix ? tag("defs", {}, tag("filter", { id: `${id}-recolor`, "color-interpolation-filters": "sRGB" }, tag("feColorMatrix", { type: "matrix", values: matrix }))) : "";
   const pixels = matrix || background.opacity !== undefined ? tag("g", { filter: matrix ? `url(#${id}-recolor)` : undefined, opacity: background.opacity === undefined ? undefined : preciseNumber(background.opacity) }, picture) : picture;
-  return [canvas, defs, pixels, background.overlay ? renderImageOverlay(background.overlay, bound, options) : ""].filter(Boolean).join("\n");
+  return [canvas, defs, pixels, background.overlay ? renderImageOverlay(background.overlay, bound, options) : toneOverlay(bound, width, height, options)].filter(Boolean).join("\n");
+}
+
+// RR-96: a picture that names its tone (`dark` or `light`) is a picture the text must read on: with no overlay of its own, the slide
+// background colour (bg1 of the tone's variant, so dark text colours get a dark scrim and light ones a light one) covers it at 40%.
+// Core resolves the variant from the tone but exposes no overlay for it, so this scrim is the renderer's own (reported in RR-96).
+const TONE_OVERLAY_OPACITY = 0.4;
+function toneOverlay(bound, width, height, options) {
+  const tone = isPlainObject(bound.design.background) ? bound.design.background.tone : undefined;
+  if (tone !== "dark" && tone !== "light") return "";
+  return tag("rect", { ...HIDDEN, x: 0, y: 0, width, height, fill: bound.design.colors.background, opacity: TONE_OVERLAY_OPACITY, ...(options.trace ? { "data-opf-tone-overlay": tone } : {}) });
 }
 
 // tile: a pattern cell of the picture's intrinsic size, anchored at the canvas origin.
@@ -868,7 +887,7 @@ function imageRecolorMatrix(recolor, bound) {
   if (!recolor) return undefined;
   const weights = [0.299, 0.587, 0.114];
   const channels = recolor.type === 'duotone'
-    ? [imagePaint(recolor.dark, bound, '#000000'), imagePaint(recolor.light, bound, '#FFFFFF')].map(paint => [1, 3, 5].map(at => parseInt(paint.color.slice(at, at + 2), 16) / 255))
+    ? [imagePaint(recolor.dark, bound, bound.design.colorScheme.dark1 ?? ENGINE_DEFAULT_COLOR_SCHEME.dark1), imagePaint(recolor.light, bound, bound.design.colorScheme.light1 ?? ENGINE_DEFAULT_COLOR_SCHEME.light1)].map(paint => [1, 3, 5].map(at => parseInt(paint.color.slice(at, at + 2), 16) / 255))
     : [[0, 0, 0], [1, 1, 1]];
   const [dark, light] = channels;
   const rows = [0, 1, 2].map(channel => [...weights.map(weight => preciseNumber((light[channel] - dark[channel]) * weight)), 0, preciseNumber(dark[channel])].join(' '));
@@ -1274,7 +1293,8 @@ function renderMedia(item, box, bound, options) {
     tag("path", {
       ...HIDDEN,
       d: trianglePath(iconBox.x + 28, iconBox.y + 22, 28, 28),
-      fill: "#FFFFFF",
+      // The play triangle sits on the primary circle: bg1 or tx1, whichever reads better on it (core readableSchemeColor).
+      fill: readableSchemeColor(bound.design.colors.primary, bound.design.roles).hex,
       ...traceAttrs(options, item.path)
     }),
     renderTextBox(asset.title || asset.src || "Media", { ...box, y: iconBox.y + iconBox.height + 20, height: 50 }, bound, {
@@ -1308,8 +1328,8 @@ function renderCode(item, box, bound, options) {
       y: box.y,
       width: box.width,
       height: box.height,
-      fill: "#111827",
-      stroke: "#334155",
+      fill: bound.design.roles.neutrals.codePanel.hex,
+      stroke: bound.design.colors.border,
       "stroke-width": 1,
       ...traceAttrs(options, item.path)
     })
@@ -1335,7 +1355,7 @@ function renderCode(item, box, bound, options) {
       x:stableNumber(part.box.x),y:stableNumber(part.box.y+part.fit.fontSize+index*part.fit.lineHeight),
       'text-anchor':'start','font-family':fontStack(part.style.fontFamily,'monospace'),
       'font-size':stableNumber(part.fit.fontSize),'font-weight':part.style.fontWeight,'font-style':part.style.italic?'italic':undefined,
-      'xml:space':'preserve',style:'white-space:pre','text-rendering':'geometricPrecision',fill:part.role==='body'?(lineColors?.plain??'#E5E7EB'):'#93C5FD',
+      'xml:space':'preserve',style:'white-space:pre','text-rendering':'geometricPrecision',fill:part.role==='body'?(lineColors?.plain??syntax?.palette.plain??bound.design.roles.neutrals.codeText.hex):codeLabelColor(bound),
       ...traceAttrs(options,part.path),...(options.trace?{'data-opf-code-role':part.role,'data-opf-generated':part.generated?'true':undefined,
         'data-opf-text-start':line.start,'data-opf-text-end':line.end,'data-opf-text-next-start':line.nextStart,'data-opf-line-boundary':line.boundary}:{}),
     },line.segments.map(segment=>segmentSpan({
@@ -1402,7 +1422,7 @@ function renderMetric(item, box, bound, options) {
 
 // The trend arrow and colour for a laid-out metric (core metricTrendMark); undefined without a trend.
 function metricTrendMark(layout,bound,options) {
-  return coreMetricTrendMark(layout,{background:bound.design.backgroundColor??bound.design.colors.background});
+  return coreMetricTrendMark(layout,{background:bound.design.backgroundColor??bound.design.colors.background,neutral:bound.design.roles.neutrals.trendNeutral.hex});
 }
 
 function renderQuote(item, box, bound, options) {
@@ -1471,7 +1491,7 @@ function renderTable(item, box, bound, options) {
     const fill = style.fill == null
       ? defaultFill
       : resolveColorRef(style.fill, bound, defaultFill);
-    const defaultText = textColorForFill(fill, cell.header ? "#FFFFFF" : bound.design.colors.text);
+    const defaultText = cell.header ? readableSchemeColor(fill, bound.design.roles).hex : textColorForFill(fill, bound.design.colors.text);
     const textFill = style.color == null
       ? defaultText
       : resolveColorRef(style.color, bound, defaultText);
@@ -1855,7 +1875,13 @@ function codeHighlight(item, layout, bound) {
   if (!body?.fit) return undefined;
   const lines = codeHighlightLines(highlight, body.text).lines;
   if (!lines.length) return undefined;
-  return { marked: new Set(lines), numbers: codeLineNumbers(body.fit.sourceLines), bands: codeHighlightBands(body.fit.sourceLines, lines), colors: codeHighlightColors(bound.design.colorScheme) };
+  const palette = codeSyntaxPaletteForRoles(bound.design.roles);
+  return { marked: new Set(lines), numbers: codeLineNumbers(body.fit.sourceLines), bands: codeHighlightBands(body.fit.sourceLines, lines), colors: codeHighlightColors(bound.design.colorScheme, palette, bound.design.roles.neutrals.codePanel.hex) };
+}
+
+// The code language / filename label: the first accent of the variant, legible on the code panel (RR-96).
+function codeLabelColor(bound) {
+  return codeSyntaxPaletteForRoles(bound.design.roles).keyword;
 }
 
 // Token ranges of the code body and the palette to paint them with; undefined for plain code (an unknown language,
@@ -1866,7 +1892,7 @@ function codeSyntax(item, layout, bound, options) {
   if (!body || !language) return undefined;
   const tokens = tokenizeCode(body.text, language);
   if (!tokens.length) return undefined;
-  return { tokens, palette: codeSyntaxPaletteForScheme(bound.design.colorScheme) };
+  return { tokens, palette: codeSyntaxPaletteForRoles(bound.design.roles) };
 }
 
 // RR-61: a face is embedded only when the slide's own markup draws it: the family in a font-family list, at a font-weight and

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-render",
-  "version": "0.22.2",
+  "version": "0.24.1",
   "description": "Deterministic local OPF renderer for SVG, PNG, and PDF output.",
   "license": "MIT",
   "type": "module",
@@ -142,7 +142,7 @@
     "test:forced-colors-browser": "node test/forced-colors-browser.mjs artifacts/forced-colors"
   },
   "dependencies": {
-    "@openpresentation/opf": "^0.22.0",
+    "@openpresentation/opf": "^0.24.0",
     "bidi-js": "1.1.0",
     "fontkit": "^2.0.4",
     "harfbuzzjs": "1.6.3",
@@ -341,7 +341,7 @@
     }
   },
   "devDependencies": {
-    "@openpresentation/gallery": "^3.0.0",
+    "@openpresentation/gallery": "^4.0.0",
     "@expo-google-fonts/arimo": "0.4.3",
     "@expo-google-fonts/caladea": "0.4.2",
     "@expo-google-fonts/cousine": "0.4.3",