@coldtea/pr-lens-renderer 0.2.2 → 0.2.4

package/src/svg/architecture.ts

@@ -1,5 +1,35 @@
-import type { GraphEdge, GraphNode, LayoutHints } from "@coldtea/pr-lens-schema";
 import { assertNever } from "@coldtea/pr-lens-schema";
+import type { GraphEdge, GraphNode, LayoutHints } from "@coldtea/pr-lens-schema";
+import { truncate } from "../text.js";
+import { glyphGroup } from "./icons.js";
+import type { Palette } from "../theme.js";
+import { DIAGRAM_MARGIN } from "../design.js";
+import { travellingPulses } from "./pulse.js";
+import type { ScopedGraph } from "../scope.js";
+import { canvasFor, union } from "../bounds.js";
+import { coord, type Box } from "../geometry.js";
+import { placeLabelPills } from "../layout/labels.js";
+import { relieveCongestion } from "../layout/congestion.js";
+import { lines, tag, textNode, wrap } from "./primitives.js";
+import { curveBounds, type RoutedEdge } from "../layout/edges.js";
+import { atlasBoxes, emptyAtlas, type RenderAtlas } from "../atlas.js";
+import { markerFor, shifted, toneColour, toneFor, type Tone } from "./document.js";
+import {
+  badgeColours,
+  cardAttributes,
+  cardGroupAttributes,
+  edgeAttributes,
+  stylesFor,
+} from "./styles.js";
+import {
+  badgeRow,
+  badgeWidth,
+  cardBadges,
+  cardTextWidth,
+  deltaBadgeText,
+  laneHeaderText,
+  type PlacedNode,
+} from "../layout/architecture.js";
 import {
   BADGE_GAP,
   BADGE_HEIGHT,
@@ -16,35 +46,13 @@ import {
   LANE_RADIUS,
   SUBTITLE_SIZE,
 } from "../design.js";
-import { atlasBoxes, emptyAtlas, type RenderAtlas } from "../atlas.js";
-import { canvasFor, union } from "../bounds.js";
-import { DIAGRAM_MARGIN } from "../design.js";
-import { coord, type Box } from "../geometry.js";
-import {
-  badgeRow,
-  badgeWidth,
-  cardBadges,
-  cardTextWidth,
-  deltaBadgeText,
-  laneHeaderText,
-  type PlacedNode,
-} from "../layout/architecture.js";
-import { relieveCongestion } from "../layout/congestion.js";
-import { curveBounds, type RoutedEdge } from "../layout/edges.js";
-import { placeLabelPills } from "../layout/labels.js";
-import type { ScopedGraph } from "../scope.js";
-import { truncate } from "../text.js";
-import type { Palette } from "../theme.js";
-import { markerFor, shifted, toneColour, toneFor, type Tone } from "./document.js";
-import { glyphGroup } from "./icons.js";
-import { lines, tag, textNode, wrap } from "./primitives.js";
-import { travellingPulses } from "./pulse.js";
 
 const badgeTone = (node: GraphNode, text: string): Tone =>
   text === deltaBadgeText(node.delta) ? toneFor(node.delta) : "neutral";
 
 /** The badge row, laid left to right across the strip the layout reserved. */
-const paintBadges = (placed: PlacedNode): string => {
+const paintBadges = (placed: PlacedNode, palette: Palette): string => {
+  const styles = stylesFor(palette);
   const row = badgeRow(placed);
   if (row === undefined) return "";
 
@@ -52,6 +60,7 @@ const paintBadges = (placed: PlacedNode): string => {
   return lines(
     row.badges.map((text) => {
       const width = badgeWidth(text);
+      const colours = badgeColours(badgeTone(placed.node, text), palette);
       const painted = wrap(
         "g",
         { class: `bdg bdg-${badgeTone(placed.node, text)}` },
@@ -61,12 +70,17 @@ const paintBadges = (placed: PlacedNode): string => {
           width: coord(width),
           height: BADGE_HEIGHT,
           rx: BADGE_RADIUS,
+          fill: colours.fill,
+          stroke: colours.stroke,
+          "stroke-width": 1,
         }) +
           textNode(
             {
               x: coord(x + width / 2),
               y: coord(row.box.y + BADGE_HEIGHT / 2 + 3),
               "text-anchor": "middle",
+              ...styles.badgeText,
+              fill: colours.text,
             },
             text,
           ),
@@ -91,7 +105,8 @@ const cardOutlineClass = (node: GraphNode): string => {
   }
 };
 
-export const paintCard = (placed: PlacedNode): string => {
+export const paintCard = (placed: PlacedNode, palette: Palette): string => {
+  const styles = stylesFor(palette);
   const { node, box, showIcon, titleSize } = placed;
   const textX = box.x + CARD_PADDING_X + (showIcon ? ICON_CHIP_SIZE + ICON_CHIP_GAP : 0);
   const textWidth = cardTextWidth(box.width, showIcon);
@@ -106,11 +121,13 @@ export const paintCard = (placed: PlacedNode): string => {
         width: ICON_CHIP_SIZE,
         height: ICON_CHIP_SIZE,
         rx: ICON_CHIP_RADIUS,
+        ...styles.chip,
       }) +
       glyphGroup(
         node.kind,
         box.x + CARD_PADDING_X + ICON_CHIP_SIZE / 2,
         box.y + box.height / 2,
+        styles,
       )
     : "";
 
@@ -120,6 +137,8 @@ export const paintCard = (placed: PlacedNode): string => {
       x: coord(textX),
       y: coord(titleBaseline),
       "font-size": titleSize,
+      ...styles.title,
+      "text-decoration": node.delta === "removed" ? "line-through" : undefined,
     },
     truncate(node.label, "sans-bold", titleSize, textWidth),
   );
@@ -128,7 +147,7 @@ export const paintCard = (placed: PlacedNode): string => {
     node.subtitle === undefined
       ? ""
       : textNode(
-          { class: "nsub", x: coord(textX), y: coord(box.y + 45) },
+          { class: "nsub", x: coord(textX), y: coord(box.y + 45), ...styles.subtitle },
           truncate(node.subtitle, "mono", SUBTITLE_SIZE, textWidth),
         );
 
@@ -137,7 +156,7 @@ export const paintCard = (placed: PlacedNode): string => {
 
   return wrap(
     "g",
-    { class: groupClass },
+    { class: groupClass, ...cardGroupAttributes(node.delta, palette) },
     lines([
       tag("rect", {
         class: cardOutlineClass(node),
@@ -146,11 +165,12 @@ export const paintCard = (placed: PlacedNode): string => {
         width: coord(box.width),
         height: coord(box.height),
         rx: CARD_RADIUS,
+        ...cardAttributes(node.delta, palette),
       }),
       chip,
       title,
       subtitle,
-      paintBadges(placed),
+      paintBadges(placed, palette),
     ]),
   );
 };
@@ -181,6 +201,7 @@ const paintEdge = (
   label: Box | undefined,
 ): { markup: string; pill: string } => {
   const { edge, path } = routed;
+  const styles = stylesFor(palette);
   const tone = toneFor(edge.delta);
   const hero = edge.emphasis === "hero";
 
@@ -190,24 +211,25 @@ const paintEdge = (
   if (edge.delta === "unchanged") classes.push("context");
 
   const glow = hero
-    ? tag("path", { class: "glow", stroke: toneColour(palette, tone), d: path })
+    ? tag("path", { class: "glow", stroke: toneColour(palette, tone), d: path, ...styles.glow })
     : "";
 
   return {
     markup: lines([
       glow,
-      tag("path", { class: classes.join(" "), d: path, "marker-end": markerFor(tone) }),
+      tag("path", { class: classes.join(" "), d: path, "marker-end": markerFor(tone), ...edgeAttributes(edge, palette) }),
       pulses(edge, path, palette),
     ]),
     pill:
       label === undefined || edge.label === undefined
         ? ""
-        : paintLabelPill(edge.label, label, tone),
+        : paintLabelPill(edge.label, label, tone, palette),
   };
 };
 
-export const paintLabelPill = (text: string, box: Box, tone: Tone): string =>
-  wrap(
+export const paintLabelPill = (text: string, box: Box, tone: Tone, palette: Palette): string => {
+  const styles = stylesFor(palette);
+  return wrap(
     "g",
     {},
     tag("rect", {
@@ -217,6 +239,7 @@ export const paintLabelPill = (text: string, box: Box, tone: Tone): string =>
       width: coord(box.width),
       height: coord(box.height),
       rx: box.height / 2,
+      ...styles.pill,
     }) +
       textNode(
         {
@@ -224,10 +247,13 @@ export const paintLabelPill = (text: string, box: Box, tone: Tone): string =>
           x: coord(box.x + box.width / 2),
           y: coord(box.y + box.height / 2 + 3.5),
           "text-anchor": "middle",
+          ...styles.pillText,
+          fill: badgeColours(tone, palette).text,
         },
         text,
       ),
   );
+};
 
 export type ArchitecturePainting = {
   width: number;
@@ -242,6 +268,7 @@ export const paintArchitecture = (
   palette: Palette,
 ): ArchitecturePainting => {
   const { layout, routed } = relieveCongestion(graph, hints);
+  const styles = stylesFor(palette);
   const pills = placeLabelPills(routed);
 
   const drawn: Box[] = layout.nodes.flatMap((node) => {
@@ -267,9 +294,10 @@ export const paintArchitecture = (
         width: coord(box.width),
         height: coord(box.height),
         rx: LANE_RADIUS,
+        ...styles.lane,
       }),
       textNode(
-        { class: "lanelabel", x: coord(box.x + LANE_PADDING_X), y: LANE_HEADER_BASELINE },
+        { class: "lanelabel", x: coord(box.x + LANE_PADDING_X), y: LANE_HEADER_BASELINE, ...styles.laneLabel },
         laneHeaderText(lane),
       ),
     ]),
@@ -288,7 +316,7 @@ export const paintArchitecture = (
   const painted = lines([
     wrap("g", {}, lines(lanes)),
     wrap("g", {}, lines(edgeMarkup)),
-    wrap("g", {}, lines(layout.nodes.map(paintCard))),
+    wrap("g", {}, lines(layout.nodes.map((node) => paintCard(node, palette)))),
     wrap("g", {}, lines(pillMarkup)),
   ]);
 

package/src/svg/dataflow.ts

@@ -1,5 +1,16 @@
-import type { Flow, FlowMessage, GraphNode, MessageKind } from "@coldtea/pr-lens-schema";
 import { assertNever } from "@coldtea/pr-lens-schema";
+import type { Flow, FlowMessage, GraphNode, MessageKind } from "@coldtea/pr-lens-schema";
+import { measure } from "../text.js";
+import { coord } from "../geometry.js";
+import type { Box } from "../geometry.js";
+import type { Palette } from "../theme.js";
+import { lines, tag, wrap } from "./primitives.js";
+import { PULSE_RADIUS, TRAIN_RADIUS } from "./pulse.js";
+import { messageAttributes, stylesFor } from "./styles.js";
+import { paintCard, paintLabelPill } from "./architecture.js";
+import { atlasBoxes, emptyAtlas, type RenderAtlas } from "../atlas.js";
+import { canvasFor, covering, union, type Canvas } from "../bounds.js";
+import { markerFor, openMarkerFor, shifted, toneColour, toneFor, type Tone } from "./document.js";
 import {
   DIAGRAM_MARGIN,
   FLOW_CYCLE_MAX,
@@ -12,11 +23,6 @@ import {
   PILL_TEXT_SIZE,
   TITLE_SIZE,
 } from "../design.js";
-import { atlasBoxes, emptyAtlas, type RenderAtlas } from "../atlas.js";
-import { canvasFor, covering, union, type Canvas } from "../bounds.js";
-import type { Box } from "../geometry.js";
-import { measure } from "../text.js";
-import { coord } from "../geometry.js";
 import {
   ACTIVATION_HALF_WIDTH,
   FLOW_BAND_PAD_X,
@@ -32,11 +38,6 @@ import {
   type FlowLayout,
   type PlacedMessage,
 } from "../layout/dataflow.js";
-import type { Palette } from "../theme.js";
-import { paintCard, paintLabelPill } from "./architecture.js";
-import { markerFor, openMarkerFor, shifted, toneColour, toneFor, type Tone } from "./document.js";
-import { lines, tag, wrap } from "./primitives.js";
-import { PULSE_RADIUS, TRAIN_RADIUS } from "./pulse.js";
 
 /** A ratio inside the animation cycle, written to a fixed number of places. */
 const ratio = (value: number): string => String(Math.round(value * 10000) / 10000);
@@ -236,16 +237,17 @@ const paintMessage = (
   const tone = toneFor(placed.message.delta);
   const direction = travelDirection(placed.message.kind, placed.fromX, placed.toX);
   const head = headFor(placed.message.kind, tone);
+  const attributes = messageAttributes(placed.message, palette);
 
   if (direction === 0) {
     const activated = activeAt(placed.message.from, placed.y);
     const path = selfPath(placed.fromX, placed.y, activated);
     return {
       line: lines([
-        tag("path", { class: messageClasses(placed.message, tone), d: path, "marker-end": head }),
+        tag("path", { class: messageClasses(placed.message, tone), d: path, "marker-end": head, ...attributes }),
         pulsesFor(placed, path, slotCount, palette),
       ]),
-      pill: paintLabelPill(placed.label, selfPillBox(placed, activated), tone),
+      pill: paintLabelPill(placed.label, selfPillBox(placed, activated), tone, palette),
     };
   }
 
@@ -254,10 +256,10 @@ const paintMessage = (
 
   return {
     line: lines([
-      tag("path", { class: messageClasses(placed.message, tone), d: path, "marker-end": head }),
+      tag("path", { class: messageClasses(placed.message, tone), d: path, "marker-end": head, ...attributes }),
       pulsesFor(placed, path, slotCount, palette),
     ]),
-    pill: paintLabelPill(placed.label, pillBox(placed, ends), tone),
+    pill: paintLabelPill(placed.label, pillBox(placed, ends), tone, palette),
   };
 };
 
@@ -283,6 +285,7 @@ const paintFlow = (
   palette: Palette,
 ): string => {
   const activeAt = activationLookup(layout);
+  const styles = stylesFor(palette);
 
   const lifelineBottom = layout.top + layout.height;
 
@@ -295,6 +298,7 @@ const paintFlow = (
       width: coord(box.width),
       height: coord(box.height),
       rx: LANE_RADIUS,
+      ...styles.lane,
     });
   });
 
@@ -306,6 +310,7 @@ const paintFlow = (
         y1: coord(layout.lifelineTop),
         x2: coord(participant.centreX),
         y2: coord(lifelineBottom),
+        ...styles.lifeline,
       }),
       ...participant.activations.map((bar) =>
         tag("rect", {
@@ -315,20 +320,24 @@ const paintFlow = (
           width: ACTIVATION_HALF_WIDTH * 2,
           height: coord(bar.bottom - bar.top),
           rx: 4,
+          ...styles.activation,
         }),
       ),
     ]),
   );
 
   const cards = layout.participants.map((participant, index) =>
-    paintCard({
-      node: participant.node,
-      box: participant.card,
-      showIcon: true,
-      titleSize: TITLE_SIZE,
-      row: 0,
-      laneIndex: index,
-    }),
+    paintCard(
+      {
+        node: participant.node,
+        box: participant.card,
+        showIcon: true,
+        titleSize: TITLE_SIZE,
+        row: 0,
+        laneIndex: index,
+      },
+      palette,
+    ),
   );
 
   const lineMarkup: string[] = [];

package/src/svg/document.ts

@@ -1,9 +1,9 @@
 import type { Delta } from "@coldtea/pr-lens-schema";
 import { assertNever } from "@coldtea/pr-lens-schema";
-import type { Canvas } from "../bounds.js";
 import { coord } from "../geometry.js";
+import { SANS_STACK } from "../text.js";
+import type { Canvas } from "../bounds.js";
 import type { Palette } from "../theme.js";
-import { MONO_STACK, SANS_STACK } from "../text.js";
 import { escapeXml, lines, tag, wrap } from "./primitives.js";
 
 /**
@@ -45,55 +45,6 @@ export const toneColour = (palette: Palette, tone: Tone): string => {
 
 const TONES = ["added", "modified", "removed", "neutral"] as const satisfies readonly Tone[];
 
-const stylesheet = (palette: Palette): string =>
-  [
-    `text{font-family:${SANS_STACK}}`,
-    `.lanebox{fill:${palette.lane}}`,
-    `.lanelabel{font-size:10px;font-weight:700;letter-spacing:.12em;fill:${palette.muted}}`,
-    `.card{fill:${palette.card};stroke:${palette.cardBorder};stroke-width:1}`,
-    `.card-added{stroke:${palette.added};stroke-opacity:.55}`,
-    `.card-modified{stroke:${palette.modified};stroke-opacity:.5}`,
-    `.ghost{opacity:.55}`,
-    `.ghost .card{stroke:${palette.removed};stroke-dasharray:4 3;stroke-opacity:.6}`,
-    `.context{opacity:.82}`,
-    `.ntitle{font-weight:600;fill:${palette.foreground}}`,
-    `.strike{text-decoration:line-through}`,
-    `.nsub{font-size:9.5px;fill:${palette.muted};font-family:${MONO_STACK}}`,
-    `.chip{fill:${palette.chip}}`,
-    `.glyph{fill:${palette.muted}}`,
-    `.glyph-stroke{stroke:${palette.muted};stroke-width:1.4;fill:none}`,
-    `.bdg text{font-size:8.5px;font-weight:700;letter-spacing:.06em}`,
-    `.bdg rect{stroke-width:1}`,
-    `.bdg-added rect{fill:${palette.addedFill};stroke:${palette.addedBorder}}`,
-    `.bdg-added text{fill:${palette.addedText}}`,
-    `.bdg-modified rect{fill:${palette.modifiedFill};stroke:${palette.modifiedBorder}}`,
-    `.bdg-modified text{fill:${palette.modifiedText}}`,
-    `.bdg-removed rect{fill:${palette.removedFill};stroke:${palette.removedBorder}}`,
-    `.bdg-removed text{fill:${palette.removedText}}`,
-    `.bdg-neutral rect{fill:${palette.neutralFill};stroke:${palette.cardBorder}}`,
-    `.bdg-neutral text{fill:${palette.muted}}`,
-    `.edge{fill:none;stroke-width:1.5}`,
-    `.edge-added{stroke:${palette.added}}`,
-    `.edge-modified{stroke:${palette.modified}}`,
-    `.edge-removed{stroke:${palette.removed};stroke-dasharray:5 4;opacity:.7}`,
-    `.edge-neutral{stroke:${palette.edge}}`,
-    `.hero{stroke-width:2.25}`,
-    `.faded{opacity:.45}`,
-    `.glow{fill:none;stroke-width:7;opacity:.14}`,
-    `.msg-self{font-size:11px;fill:${palette.foreground}}`,
-    `.lpill{fill:${palette.pill};stroke:${palette.pillBorder};stroke-width:1}`,
-    `.ltext{font-size:9.5px;font-weight:600;fill:${palette.muted}}`,
-    `.ltext-added{fill:${palette.addedText}}`,
-    `.ltext-modified{fill:${palette.modifiedText}}`,
-    `.ltext-removed{fill:${palette.removedText}}`,
-    `.cardsh{filter:drop-shadow(0 1px 2px ${palette.shadow})}`,
-    `.lifeline{stroke:${palette.lifeline};stroke-width:1;stroke-dasharray:3 4}`,
-    `.actbar{fill:${palette.addedFill};stroke:${palette.addedBorder}}`,
-    `.msg{fill:none;stroke-width:1.5}`,
-    `.msg-return{stroke-dasharray:4 3;opacity:.8}`,
-    `.msg-strong{stroke-width:2.25}`,
-  ].join("");
-
 /**
  * Two arrowhead forms per tone, the classic sequence-diagram pair: a filled
  * head for a message the sender waits on, an open line-form head for one it
@@ -174,10 +125,10 @@ export const svgDocument = (input: {
 
   return lines([
     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${coord(width)} ${coord(height)}" ` +
-      `width="${coord(width)}" height="${coord(height)}" role="img" aria-label="${escapeXml(title)}">`,
+      `width="${coord(width)}" height="${coord(height)}" role="img" aria-label="${escapeXml(title)}" ` +
+      `font-family="${escapeXml(SANS_STACK)}">`,
     wrap("title", {}, escapeXml(title)),
     description === undefined ? "" : wrap("desc", {}, escapeXml(description)),
-    wrap("style", {}, stylesheet(palette)),
     defs,
     tag("rect", { x: 0, y: 0, width: coord(width), height: coord(height), rx: 12, fill: palette.background }),
     tag("rect", { x: 0, y: 0, width: coord(width), height: coord(height), rx: 12, fill: "url(#dots)" }),

package/src/svg/icons.ts

@@ -1,33 +1,23 @@
-import type { NodeKind } from "@coldtea/pr-lens-schema";
 import { assertNever } from "@coldtea/pr-lens-schema";
+import type { NodeKind } from "@coldtea/pr-lens-schema";
 import { coord } from "../geometry.js";
 import { MONO_STACK } from "../text.js";
+import type { SvgStyles } from "./styles.js";
+import type { Attributes } from "./primitives.js";
 import { lines, tag, textNode, wrap } from "./primitives.js";
 
-const stroked = (path: string): string => tag("path", { class: "glyph-stroke", d: path });
-
-const glyphText = (cx: number, cy: number, content: string, style: string): string =>
+const glyphText = (cx: number, cy: number, content: string, attributes: Attributes): string =>
   textNode(
     {
       class: "glyph",
       x: coord(cx),
       y: coord(cy + 4.5),
       "text-anchor": "middle",
-      style,
+      ...attributes,
     },
     content,
   );
 
-const box = (cx: number, cy: number, width: number, height: number, radius?: number): string =>
-  tag("rect", {
-    class: "glyph-stroke",
-    x: coord(cx - width / 2),
-    y: coord(cy - height / 2),
-    width: coord(width),
-    height: coord(height),
-    rx: radius === undefined ? undefined : coord(radius),
-  });
-
 /**
  * The chip glyph for a node's kind, centred on a point.
  *
@@ -35,12 +25,26 @@ const box = (cx: number, cy: number, width: number, height: number, radius?: num
  * is why the kind enum is coarse. Every kind draws something: a card with an
  * empty chip reads as a rendering fault rather than as an unknown kind.
  */
-const kindGlyph = (kind: NodeKind, cx: number, cy: number): string => {
+const kindGlyph = (kind: NodeKind, cx: number, cy: number, styles: SvgStyles): string => {
+  const stroked = (path: string): string =>
+    tag("path", { class: "glyph-stroke", d: path, ...styles.glyphStroke });
+
+  const box = (cx: number, cy: number, width: number, height: number, radius?: number): string =>
+    tag("rect", {
+      class: "glyph-stroke",
+      x: coord(cx - width / 2),
+      y: coord(cy - height / 2),
+      width: coord(width),
+      height: coord(height),
+      rx: radius === undefined ? undefined : coord(radius),
+      ...styles.glyphStroke,
+    });
+
   switch (kind) {
     case "service":
       return lines([
         box(cx, cy, 13, 13, 3),
-        tag("circle", { class: "glyph", cx: coord(cx), cy: coord(cy), r: 2 }),
+        tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx), cy: coord(cy), r: 2 }),
       ]);
     case "app":
       return lines([
@@ -48,17 +52,23 @@ const kindGlyph = (kind: NodeKind, cx: number, cy: number): string => {
         stroked(`M${coord(cx - 7)},${coord(cy - 2)} h14`),
       ]);
     case "module":
-      return glyphText(cx, cy, "{ }", `font-size:11px;font-family:${MONO_STACK}`);
+      return glyphText(cx, cy, "{ }", { ...styles.glyph, "font-size": 11, "font-family": MONO_STACK });
     case "function":
-      return glyphText(cx, cy, "ƒ", "font-size:14px;font-style:italic;font-family:Georgia,serif");
+      return glyphText(cx, cy, "ƒ", {
+        ...styles.glyph,
+        "font-size": 14,
+        "font-style": "italic",
+        "font-family": "Georgia,serif",
+      });
     case "route":
       return tag("path", {
         class: "glyph",
+        ...styles.glyph,
         d: `M${coord(cx - 7)},${coord(cy - 6)} L${coord(cx + 7)},${coord(cy)} L${coord(cx - 7)},${coord(cy + 6)} Z`,
       });
     case "job":
       return lines([
-        tag("circle", { class: "glyph-stroke", cx: coord(cx), cy: coord(cy), r: 6.5 }),
+        tag("circle", { class: "glyph-stroke", ...styles.glyphStroke, cx: coord(cx), cy: coord(cy), r: 6.5 }),
         stroked(`M${coord(cx)},${coord(cy - 3.5)} V${coord(cy)} H${coord(cx + 3)}`),
       ]);
     case "queue":
@@ -69,7 +79,7 @@ const kindGlyph = (kind: NodeKind, cx: number, cy: number): string => {
       ]);
     case "datastore":
       return lines([
-        tag("ellipse", { class: "glyph-stroke", cx: coord(cx), cy: coord(cy - 4.5), rx: 6.5, ry: 2.6 }),
+        tag("ellipse", { class: "glyph-stroke", ...styles.glyphStroke, cx: coord(cx), cy: coord(cy - 4.5), rx: 6.5, ry: 2.6 }),
         stroked(
           `M${coord(cx - 6.5)},${coord(cy - 4.5)} v9 a6.5,2.6 0 0 0 13 0 v-9`,
         ),
@@ -77,6 +87,7 @@ const kindGlyph = (kind: NodeKind, cx: number, cy: number): string => {
     case "cache":
       return tag("path", {
         class: "glyph",
+        ...styles.glyph,
         d: `M${coord(cx + 1)},${coord(cy - 7)} L${coord(cx - 6)},${coord(cy + 1)} H${coord(cx - 1)} L${coord(cx - 1)},${coord(cy + 7)} L${coord(cx + 6)},${coord(cy - 1)} H${coord(cx + 1)} Z`,
       });
     case "external":
@@ -93,8 +104,8 @@ const kindGlyph = (kind: NodeKind, cx: number, cy: number): string => {
       return lines([
         stroked(`M${coord(cx - 7)},${coord(cy - 4)} h14`),
         stroked(`M${coord(cx - 7)},${coord(cy + 4)} h14`),
-        tag("circle", { class: "glyph", cx: coord(cx - 2), cy: coord(cy - 4), r: 2.2 }),
-        tag("circle", { class: "glyph", cx: coord(cx + 3), cy: coord(cy + 4), r: 2.2 }),
+        tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx - 2), cy: coord(cy - 4), r: 2.2 }),
+        tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx + 3), cy: coord(cy + 4), r: 2.2 }),
       ]);
     case "test":
       return stroked(`M${coord(cx - 6)},${coord(cy)} l4,4 l8,-8`);
@@ -108,14 +119,14 @@ const kindGlyph = (kind: NodeKind, cx: number, cy: number): string => {
       ]);
     case "other":
       return lines([
-        tag("circle", { class: "glyph", cx: coord(cx - 5), cy: coord(cy), r: 1.8 }),
-        tag("circle", { class: "glyph", cx: coord(cx), cy: coord(cy), r: 1.8 }),
-        tag("circle", { class: "glyph", cx: coord(cx + 5), cy: coord(cy), r: 1.8 }),
+        tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx - 5), cy: coord(cy), r: 1.8 }),
+        tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx), cy: coord(cy), r: 1.8 }),
+        tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx + 5), cy: coord(cy), r: 1.8 }),
       ]);
     default:
       return assertNever(kind, "Unhandled node kind");
   }
 };
 
-export const glyphGroup = (kind: NodeKind, cx: number, cy: number): string =>
-  wrap("g", {}, kindGlyph(kind, cx, cy));
+export const glyphGroup = (kind: NodeKind, cx: number, cy: number, styles: SvgStyles): string =>
+  wrap("g", {}, kindGlyph(kind, cx, cy, styles));