@diagrammo/dgmo 0.51.0 → 0.52.0

package/dist/{chunk-OU7HLO7I.js → chunk-AUIM2NVH.js}

@@ -18,10 +18,10 @@ import {
 import {
   mix,
   valueRampStops
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
 import {
   tagAttrKey
-} from "./chunk-467TVMQL.js";
+} from "./chunk-HHKO6SKY.js";
 
 // src/utils/legend-d3.ts
 var LEGEND_TEXT_DY = "0.32em";
@@ -293,4 +293,4 @@ export {
   renderLegendD3,
   renderIntegratedLegend
 };
-//# sourceMappingURL=chunk-OU7HLO7I.js.map
+//# sourceMappingURL=chunk-AUIM2NVH.js.map

package/dist/{chunk-RXKTSFDL.js → chunk-BKVOYV6I.js}

@@ -1,18 +1,18 @@
 import {
   buildSwatches
-} from "./chunk-4XFBQT5O.js";
+} from "./chunk-3LK5DNED.js";
 import {
   layoutMap,
   mapLegendConfig,
   mapLegendGroups,
   parsePathRings
-} from "./chunk-32XPAAET.js";
+} from "./chunk-ZJV7GYR4.js";
 import {
   renderIntegratedLegend
-} from "./chunk-OU7HLO7I.js";
+} from "./chunk-AUIM2NVH.js";
 import {
   parseClock
-} from "./chunk-6NFYEQDX.js";
+} from "./chunk-FY5MSZAP.js";
 import {
   fixedParts,
   formatTime,
@@ -34,7 +34,7 @@ import {
 import {
   mix,
   themeBaseBg
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
 
 // src/map/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -72,7 +72,6 @@ function renderClockCards(gCards, layout, resolved, palette, isDark, now, frameW
     const hasCoords = Number.isFinite(poi.lat) && Number.isFinite(poi.lon);
     const isFixed = poi.tzFixedOffsetMin !== void 0;
     const sun = !isFixed && hasCoords ? sunLine(now, poi.lat, poi.lon) : null;
-    const up = sun ? sun.up : parts.h >= 6 && parts.h < 18;
     const ts = formatTime(parts.h, parts.m, parts.s, hours12);
     const status = workStatus(parts, work);
     const viewerWeekday = WEEKDAY_ABBR[new Date(now).getDay()];
@@ -80,16 +79,17 @@ function renderClockCards(gCards, layout, resolved, palette, isDark, now, frameW
     const line2 = [showWeekday ? parts.weekday : null, status?.text].filter(Boolean).join(" \xB7 ");
     const mainFont = 18;
     const sf = 8;
-    const mainW = measureText(ts.main, mainFont);
-    const stackW = Math.max(
-      measureText(`:${ts.sec}`, sf),
-      ts.ap ? measureText(ts.ap, sf) : 0
-    );
-    const stackGap = 3;
-    const dotGap = 15;
+    const advance = (s, f) => [...s].reduce((w, c) => w + f * (c === ":" ? 0.334 : 0.6), 0);
+    const mainW = advance(ts.main, mainFont);
+    const secW = advance(`:${ts.sec}`, sf);
+    const stackW = Math.max(secW, ts.ap ? measureText(ts.ap, sf) : 0);
+    const stackGap = 6;
     const padX = 9;
-    const line1W = dotGap + mainW + stackGap + stackW;
-    const line2W = measureText(line2, 10.5);
+    const iconR = 3.5;
+    const iconGap = 5;
+    const line2Icon = status ? iconR * 2 + iconGap : 0;
+    const line1W = mainW + stackGap + stackW;
+    const line2W = line2Icon + measureText(line2, 10.5);
     const cardW = Math.max(line1W, line2W) + padX * 2;
     const cardH = 44;
     const leaderGap = 7;
@@ -119,27 +119,19 @@ function renderClockCards(gCards, layout, resolved, palette, isDark, now, frameW
     const leaderX = clamp(cx, cardLeft + 10, cardLeft + cardW - 10);
     g.append("line").attr("x1", cx).attr("y1", below ? lp.cy + lp.r : lp.cy - lp.r).attr("x2", leaderX).attr("y2", below ? cardTop : cardTop + cardH).attr("stroke", border).attr("stroke-width", 1);
     g.append("rect").attr("x", cardLeft).attr("y", cardTop).attr("width", cardW).attr("height", cardH).attr("rx", 6).attr("fill", cardFill).attr("stroke", border).attr("stroke-width", 1);
-    const dotCX = cardLeft + padX + 3.5;
+    const statusColor = (cls) => cls === "ok" ? sw.ok : cls === "soon" ? sw.soon : sw.off;
     const line1Y = cardTop + 20;
-    const dot = g.append("circle").attr("data-dgmo-clock-status-dot", "").attr("cx", dotCX).attr("cy", line1Y - mainFont * 0.35).attr("r", 3.5);
-    if (status) {
-      const dc = status.cls === "ok" ? sw.ok : status.cls === "soon" ? sw.soon : sw.off;
-      if (status.cls === "off") {
-        dot.attr("fill", "none").attr("stroke", dc).attr("stroke-width", 1.4);
-      } else {
-        dot.attr("fill", dc);
-      }
-    } else {
-      dot.attr("fill", up ? sw.day : sw.night);
-    }
-    const timeX = cardLeft + padX + dotGap;
-    g.append("text").attr("data-dgmo-clock-digital-part", "main").attr("x", timeX).attr("y", line1Y).attr("font-family", FONT_FAMILY).attr("fill", palette.text).attr("font-size", mainFont).attr("font-weight", 600).style("font-variant-numeric", "tabular-nums").text(ts.main);
+    const timeX = cardLeft + padX;
+    g.append("text").attr("data-dgmo-clock-digital-part", "main").attr("x", timeX).attr("y", line1Y).attr("font-family", FONT_FAMILY).attr("fill", palette.text).attr("font-size", mainFont).attr("font-weight", 600).attr("textLength", mainW).attr("lengthAdjust", "spacing").style("font-variant-numeric", "tabular-nums").text(ts.main);
     const stackX = timeX + mainW + stackGap;
     const capTop = line1Y - mainFont * 0.7;
-    g.append("text").attr("data-dgmo-clock-digital-part", "sec").attr("x", stackX).attr("y", capTop + sf * 0.72).attr("font-family", FONT_FAMILY).attr("fill", muted).attr("font-size", sf).style("font-variant-numeric", "tabular-nums").text(`:${ts.sec}`);
+    g.append("text").attr("data-dgmo-clock-digital-part", "sec").attr("x", stackX).attr("y", capTop + sf * 0.72).attr("font-family", FONT_FAMILY).attr("fill", muted).attr("font-size", sf).attr("textLength", secW).attr("lengthAdjust", "spacing").style("font-variant-numeric", "tabular-nums").text(`:${ts.sec}`);
     g.append("text").attr("data-dgmo-clock-digital-part", "ap").attr("x", stackX).attr("y", line1Y).attr("font-family", FONT_FAMILY).attr("fill", muted).attr("font-size", sf).text(ts.ap);
     const line2Y = cardTop + 36;
-    const l2 = g.append("text").attr("x", cardLeft + padX).attr("y", line2Y).attr("font-family", FONT_FAMILY).attr("font-size", 10.5).attr("fill", muted);
+    if (status) {
+      g.append("circle").attr("data-dgmo-clock-status-icon", "").attr("cx", cardLeft + padX + iconR).attr("cy", line2Y - 3.5).attr("r", iconR).attr("fill", statusColor(status.cls));
+    }
+    const l2 = g.append("text").attr("x", cardLeft + padX + line2Icon).attr("y", line2Y).attr("font-family", FONT_FAMILY).attr("font-size", 10.5).attr("fill", muted);
     let needSep = false;
     if (showWeekday) {
       l2.append("tspan").text(parts.weekday);
@@ -789,4 +781,4 @@ export {
   renderMap,
   renderMapForExport
 };
-//# sourceMappingURL=chunk-RXKTSFDL.js.map
+//# sourceMappingURL=chunk-BKVOYV6I.js.map

package/dist/{chunk-TK2VQQX2.js → chunk-BPIZNB5O.js}

@@ -1,6 +1,6 @@
 import {
   renderIntegratedLegend
-} from "./chunk-OU7HLO7I.js";
+} from "./chunk-AUIM2NVH.js";
 import {
   getMaxLegendReservedHeight
 } from "./chunk-YAA6IID3.js";
@@ -20,14 +20,15 @@ import {
 } from "./chunk-WCT3NYCV.js";
 import {
   isBlockNode
-} from "./chunk-NNAAJVBU.js";
+} from "./chunk-NR5HCAUD.js";
 import {
-  mix
-} from "./chunk-P6T66CCZ.js";
+  mix,
+  themeBaseBg
+} from "./chunk-WBM7ZNDI.js";
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-467TVMQL.js";
+} from "./chunk-HHKO6SKY.js";
 
 // src/block/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -223,7 +224,8 @@ function renderBlock(container, parsed, palette, isDark, exportDims, options = {
     activeGroup,
     activeKey: activeGroup ? tagAttrKey(activeGroup) : null,
     neutral,
-    solidFill: opts.solidFill,
+    fillMode: opts.fillMode,
+    isDark,
     onToggle: options.onToggle
   });
   if (legend) {
@@ -262,7 +264,7 @@ function clipLabel(s, maxWidth, fs) {
 }
 var clipCounter = 0;
 function drawItems(g, items, ctx, path = []) {
-  const { palette, solidFill: solid } = ctx;
+  const { palette, fillMode } = ctx;
   for (const it of items) {
     if (it.type === "empty") {
       g.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 7).attr("fill", "none").attr("stroke", ctx.neutral).attr("stroke-width", 1).attr("stroke-dasharray", "3 4").attr("opacity", 0.7);
@@ -280,17 +282,17 @@ function drawItems(g, items, ctx, path = []) {
       if (v) cell.attr(`data-tag-${ctx.activeKey}`, v);
     }
     if (it.type === "collapsed") {
-      const fill2 = color ? solid ? color : mix(color, palette.bg, 12) : palette.surface;
+      const fill2 = color ? fillMode === "solid" ? color : fillMode === "outline" ? themeBaseBg(palette, ctx.isDark) : mix(color, palette.bg, 12) : palette.surface;
       const cid = `dgmo-block-clip-${clipCounter++}`;
       cell.append("clipPath").attr("id", cid).append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10);
       cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10).attr("fill", fill2).attr("stroke", stroke).attr("stroke-width", 1.5);
       cell.append("text").attr("x", it.x + it.w / 2).attr("y", it.y + it.h / 2 + 4).attr("text-anchor", "middle").attr("font-size", 12.5).attr("font-weight", 700).attr("fill", palette.text).text(clipLabel(it.label ?? "", it.w - 24, 12.5));
-      cell.append("rect").attr("x", it.x).attr("y", it.y + it.h - BLOCK_BAR_H).attr("width", it.w).attr("height", BLOCK_BAR_H).attr("fill", solid && color ? palette.text : stroke).attr("clip-path", `url(#${cid})`);
+      cell.append("rect").attr("x", it.x).attr("y", it.y + it.h - BLOCK_BAR_H).attr("width", it.w).attr("height", BLOCK_BAR_H).attr("fill", fillMode === "solid" && color ? palette.text : stroke).attr("clip-path", `url(#${cid})`);
       bindToggle(cell, it, ctx, it.h);
       continue;
     }
     if (it.type === "container") {
-      const fill2 = color ? solid ? color : mix(color, palette.bg, 7) : palette.surface;
+      const fill2 = color ? fillMode === "solid" ? color : fillMode === "outline" ? themeBaseBg(palette, ctx.isDark) : mix(color, palette.bg, 7) : palette.surface;
       cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10).attr("fill", fill2).attr("stroke", stroke).attr("stroke-width", 1.5);
       const sizeMetric = Math.min(it.w, it.h * 2.5);
       const headerFs = Math.max(
@@ -305,7 +307,7 @@ function drawItems(g, items, ctx, path = []) {
       if (it.inner) drawItems(g, it.inner, ctx, itemPath);
       continue;
     }
-    const fill = color ? solid ? mix(color, palette.bg, 80) : mix(color, palette.bg, 14) : palette.bg;
+    const fill = color ? fillMode === "solid" ? mix(color, palette.bg, 80) : fillMode === "outline" ? themeBaseBg(palette, ctx.isDark) : mix(color, palette.bg, 14) : palette.bg;
     cell.attr("data-leaf", "true");
     cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 8).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", 1.25);
     cell.append("text").attr("x", it.x + it.w / 2).attr("y", it.y + it.h / 2 + 5).attr("text-anchor", "middle").attr("font-size", 13).attr("font-weight", 600).attr("fill", palette.text).text(clipLabel(it.label ?? "", it.w - 16, 13));
@@ -359,4 +361,4 @@ export {
   renderBlock,
   authoredCollapsedIds
 };
-//# sourceMappingURL=chunk-TK2VQQX2.js.map
+//# sourceMappingURL=chunk-BPIZNB5O.js.map

package/dist/{chunk-3LV2NCB6.js → chunk-BPY242XU.js}

@@ -11,7 +11,7 @@ import {
   stripDefaultModifier,
   tagAttrKey,
   validateTagGroupNames
-} from "./chunk-467TVMQL.js";
+} from "./chunk-HHKO6SKY.js";
 import {
   parseInArrowLabel
 } from "./chunk-FFUN5D66.js";
@@ -27,7 +27,7 @@ import {
   splitNameAndMeta,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-LV4BETUU.js";
+} from "./chunk-BRENJ2BQ.js";
 import {
   formatDgmoError,
   makeDgmoError,
@@ -65,7 +65,9 @@ var VALID_SHAPES = /* @__PURE__ */ new Set([
 var KNOWN_C4_OPTIONS = /* @__PURE__ */ new Set(["layout", "active-tag"]);
 var KNOWN_C4_BOOLEANS = /* @__PURE__ */ new Set([
   "direction-tb",
-  "solid-fill",
+  "fill-tint",
+  "fill-solid",
+  "fill-outline",
   "no-title"
 ]);
 var ALL_CHART_TYPES = [
@@ -804,4 +806,4 @@ function validateDeploymentRefs(result, knownNames, pushWarning) {
 export {
   parseC4
 };
-//# sourceMappingURL=chunk-3LV2NCB6.js.map
+//# sourceMappingURL=chunk-BPY242XU.js.map

package/dist/{chunk-LV4BETUU.js → chunk-BRENJ2BQ.js}

@@ -268,10 +268,34 @@ function extractColor(label, palette, diagnostics, line) {
 }
 var OPTION_NOCOLON_RE = /^([a-z][a-z0-9-]*)\s+(.+)$/i;
 var GLOBAL_BOOLEANS = /* @__PURE__ */ new Set([
-  "solid-fill",
+  "fill-tint",
+  "fill-solid",
+  "fill-outline",
   "no-title",
   "no-notes"
 ]);
+var FILL_FAMILY_TOKENS = /* @__PURE__ */ new Set([
+  "fill-tint",
+  "fill-solid",
+  "fill-outline"
+]);
+function fillModeFromToken(token) {
+  switch (token.trim().toLowerCase()) {
+    case "fill-solid":
+      return "solid";
+    case "fill-outline":
+      return "outline";
+    case "fill-tint":
+      return "tint";
+    default:
+      return null;
+  }
+}
+function fillModeFromOptions(options) {
+  if (options["fill-solid"] === "on") return "solid";
+  if (options["fill-outline"] === "on") return "outline";
+  return void 0;
+}
 function recognizeGlobalBoolean(token) {
   const t = token.trim().toLowerCase();
   return GLOBAL_BOOLEANS.has(t) ? t : null;
@@ -279,6 +303,9 @@ function recognizeGlobalBoolean(token) {
 function tryParseSharedOption(line, options) {
   const key = recognizeGlobalBoolean(line);
   if (key) {
+    if (FILL_FAMILY_TOKENS.has(key)) {
+      for (const t of FILL_FAMILY_TOKENS) delete options[t];
+    }
     options[key] = "on";
     return true;
   }
@@ -668,6 +695,9 @@ export {
   measureIndent,
   extractColor,
   OPTION_NOCOLON_RE,
+  FILL_FAMILY_TOKENS,
+  fillModeFromToken,
+  fillModeFromOptions,
   tryParseSharedOption,
   parseFirstLine,
   normalizeNumericToken,
@@ -681,4 +711,4 @@ export {
   splitNameAndMeta,
   warnUnknownMetaKeys
 };
-//# sourceMappingURL=chunk-LV4BETUU.js.map
+//# sourceMappingURL=chunk-BRENJ2BQ.js.map

package/dist/{chunk-Y6GBQTBK.js → chunk-CCNDLW7Z.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-3HDBAXF5.js";
 import {
   renderIntegratedLegend
-} from "./chunk-OU7HLO7I.js";
+} from "./chunk-AUIM2NVH.js";
 import {
   getMaxLegendReservedHeight
 } from "./chunk-YAA6IID3.js";
@@ -22,15 +22,16 @@ import {
   measureText
 } from "./chunk-WCT3NYCV.js";
 import {
+  contrastText,
   getSeriesColors,
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-467TVMQL.js";
+} from "./chunk-HHKO6SKY.js";
 import {
   resolveColor
 } from "./chunk-TLVIHFRO.js";
@@ -628,7 +629,7 @@ function clip(s, maxW, fs) {
   }
   return lo <= 0 ? "" : s.slice(0, lo) + "\u2026";
 }
-function paintForAccent(palette, isDark, accent) {
+function paintForAccent(palette, isDark, accent, fillMode) {
   const base = themeBaseBg(palette, isDark);
   return {
     accent,
@@ -639,12 +640,14 @@ function paintForAccent(palette, isDark, accent) {
     hair: mix(palette.text, base, 34),
     wire: mix(palette.text, base, 30),
     track: mix(palette.border, base, 55),
-    tint: shapeFill(palette, accent, isDark)
+    // §1.9 fill family rides through shapeFill: solid ⇒ raw accent,
+    // outline ⇒ theme base bg (accent stays on the stroke), absent ⇒ 25% tint.
+    tint: shapeFill(palette, accent, isDark, { mode: fillMode })
   };
 }
-function paintFor(palette, isDark, sideColor) {
+function paintFor(palette, isDark, sideColor, fillMode) {
   const accent = sideColor && resolveColor(sideColor, palette) || sideColor || getSeriesColors(palette)[0];
-  return paintForAccent(palette, isDark, accent);
+  return paintForAccent(palette, isDark, accent, fillMode);
 }
 function resolveBracketLegend(parsed, palette) {
   const activeTag = parsed.activeTag;
@@ -740,7 +743,8 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
     });
   }
   const baseAccent = parsed.accentColor ?? resolveColor("blue", palette) ?? getSeriesColors(palette)[0];
-  const basePaint = paintForAccent(palette, isDark, baseAccent);
+  const fillMode = parsed.fillMode;
+  const basePaint = paintForAccent(palette, isDark, baseAccent, fillMode);
   const sideColorByLabel = /* @__PURE__ */ new Map();
   for (const s of parsed.sides) sideColorByLabel.set(s.label, s.color);
   const sideBarH = layout.sideLabels.length ? 30 : 0;
@@ -753,11 +757,20 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
     );
     const top = covered ? bandTop : 2;
     const c = resolveColor(col.color, palette) ?? col.color;
-    root.append("rect").attr("x", col.x - BOX_W / 2 - 10).attr("y", top).attr("width", BOX_W + 20).attr("height", Math.max(0, layout.height - top)).attr("rx", 10).attr("fill", mix(c, palette.bg, isDark ? 12 : 8));
+    root.append("rect").attr("x", col.x - BOX_W / 2 - 10).attr("y", top).attr("width", BOX_W + 20).attr("height", Math.max(0, layout.height - top)).attr("rx", 10).attr(
+      "fill",
+      fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(c, palette.bg, isDark ? 12 : 8)
+    ).call((sel) => {
+      if (fillMode === "outline")
+        sel.attr("stroke", mix(c, palette.bg, 35)).attr("stroke-width", 1);
+    });
   }
   for (const s of layout.sideLabels) {
     const c = s.color ? resolveColor(s.color, palette) ?? s.color : basePaint.accent;
-    root.append("rect").attr("x", s.x0 - 8).attr("y", 2).attr("width", s.x1 - s.x0 + 16).attr("height", 24).attr("rx", 8).attr("fill", mix(c, palette.bg, isDark ? 20 : 14)).attr("stroke", mix(c, palette.bg, 55)).attr("stroke-width", 1);
+    root.append("rect").attr("x", s.x0 - 8).attr("y", 2).attr("width", s.x1 - s.x0 + 16).attr("height", 24).attr("rx", 8).attr(
+      "fill",
+      fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(c, palette.bg, isDark ? 20 : 14)
+    ).attr("stroke", fillMode === "outline" ? c : mix(c, palette.bg, 55)).attr("stroke-width", 1);
     root.append("text").attr("x", (s.x0 + s.x1) / 2).attr("y", 18).attr("text-anchor", "middle").attr("font-size", 13).attr("font-weight", 800).attr("letter-spacing", 0.3).attr("fill", c).text(clip(s.label, s.x1 - s.x0, 13));
   }
   for (const col of layout.columns) {
@@ -772,7 +785,7 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
     drawConnector(root, m, m.botFrom, m.y + HALF_SPAN2, basePaint);
   }
   for (const m of layout.matches) {
-    const sidePaint = m.side && sideColorByLabel.get(m.side) ? paintFor(palette, isDark, sideColorByLabel.get(m.side)) : basePaint;
+    const sidePaint = m.side && sideColorByLabel.get(m.side) ? paintFor(palette, isDark, sideColorByLabel.get(m.side), fillMode) : basePaint;
     const topSeed = seedByName.get(m.top ?? "") ?? null;
     const botSeed = seedByName.get(m.bot ?? "") ?? null;
     let homeName = m.home;
@@ -810,7 +823,8 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
       palette,
       isDark,
       m,
-      activeKey
+      activeKey,
+      fillMode
     );
     drawBox(
       root,
@@ -822,7 +836,8 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
       palette,
       isDark,
       m,
-      activeKey
+      activeKey,
+      fillMode
     );
     if (isUpset) drawUpset(root, m, sidePaint);
     if (m.commentary.length) drawCommentary(root, m, palette);
@@ -841,10 +856,10 @@ function drawConnector(g, m, from, toCy, paint) {
   const d = from.yA !== from.yB ? `M ${childEdge} ${from.yA} H ${midX} M ${childEdge} ${from.yB} H ${midX} M ${midX} ${vLo} V ${vHi} M ${midX} ${toCy} H ${parentEdge}` : `M ${childEdge} ${from.y} H ${midX} V ${toCy} H ${parentEdge}`;
   g.append("path").attr("d", d).attr("fill", "none").attr("stroke", paint.wire).attr("stroke-width", 1.5);
 }
-function drawBox(g, cx, cy, name, info, sidePaint, palette, isDark, m, activeKey) {
+function drawBox(g, cx, cy, name, info, sidePaint, palette, isDark, m, activeKey, fillMode) {
   const x = cx - BOX_W / 2;
   const y = cy - BOX_H / 2;
-  const paint = info.tagColor ? paintForAccent(palette, isDark, info.tagColor) : sidePaint;
+  const paint = info.tagColor ? paintForAccent(palette, isDark, info.tagColor, fillMode) : sidePaint;
   const cell = g.append("g").attr("class", "dgmo-bracket-box");
   if (m.lineNumber !== null) cell.attr("data-line-number", m.lineNumber);
   if (activeKey && info.tagValue)
@@ -878,22 +893,29 @@ function drawBox(g, cx, cy, name, info, sidePaint, palette, isDark, m, activeKey
   } else if (info.pending) {
     stroke = mix(paint.accent, paint.hair, 50);
   }
+  const onSolid = fillMode === "solid" && (info.isChampion || info.isWinner) ? contrastText(
+    paint.tint,
+    palette.textOnFillLight,
+    palette.textOnFillDark
+  ) : null;
+  if (onSolid) textColor = onSolid;
+  const gutterColor = onSolid ?? paint.muted;
   const rect = cell.append("rect").attr("x", x).attr("y", y).attr("width", BOX_W).attr("height", BOX_H).attr("rx", 6).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", sw);
   if (dash) rect.attr("stroke-dasharray", dash);
   let leftPad = 11;
   if (info.seed !== null) {
-    cell.append("text").attr("x", x + 9).attr("y", cy + 4).attr("text-anchor", "start").attr("font-size", 10).attr("font-weight", 700).attr("fill", paint.muted).text(info.seed);
+    cell.append("text").attr("x", x + 9).attr("y", cy + 4).attr("text-anchor", "start").attr("font-size", 10).attr("font-weight", 700).attr("fill", gutterColor).text(info.seed);
     leftPad = 9 + Math.max(12, measureText(String(info.seed), 10)) + 6;
   }
   let rightPad = 11;
   if (info.score) rightPad += 20;
   if (info.isHome) {
-    drawHome(cell, x + BOX_W - rightPad - 6, cy, paint.muted);
+    drawHome(cell, x + BOX_W - rightPad - 6, cy, gutterColor);
     rightPad += 16;
   }
   cell.append("text").attr("x", x + leftPad).attr("y", cy + 4).attr("text-anchor", "start").attr("font-size", 12.5).attr("font-weight", weight).attr("fill", textColor).text(clip(isTBD ? "TBD" : name, BOX_W - leftPad - rightPad, 12.5));
   if (info.score) {
-    cell.append("text").attr("x", x + BOX_W - 11).attr("y", cy + 4).attr("text-anchor", "end").attr("font-size", 12).attr("font-weight", info.isWinner ? 700 : 500).attr("fill", info.isWinner ? textColor : paint.muted).text(info.score);
+    cell.append("text").attr("x", x + BOX_W - 11).attr("y", cy + 4).attr("text-anchor", "end").attr("font-size", 12).attr("font-weight", info.isWinner ? 700 : 500).attr("fill", info.isWinner ? textColor : gutterColor).text(info.score);
   }
 }
 function drawHome(cell, hx, cy, color) {
@@ -937,4 +959,4 @@ export {
   renderBracket,
   renderBracketForExport
 };
-//# sourceMappingURL=chunk-Y6GBQTBK.js.map
+//# sourceMappingURL=chunk-CCNDLW7Z.js.map