app/lib/content/diagram.mjs

Functions

Imports

It imports app/lib/media/classify.mjs. No module of this repo imports it.

Source

1// Prelum's editorial pack emits the <img> pair and the key (DIAGRAM_TEMPLATE_VERSION in its
2// render-diagram.mjs, bumped there when the token map, the token values in app.css or the mermaid
3// version changes); scripts/build-diagrams.mjs draws the assets they name with this site's colors.
4
5import { ASSET_PREFIX } from "../media/classify.mjs";
6
7export const DIAGRAM_ASSET_DIR = "diagrams";
8
9export const DIAGRAM_THEMES = ["light", "dark"];
10
11// Token names, not colors: build:diagrams resolves them against app.css. Mermaid rejects var(--x)
12// because khroma parses every value, so each theme is a separate render.
13export const DIAGRAM_THEME_TOKENS = {
14  background: "--paper",
15  primaryColor: "--paper",
16  primaryBorderColor: "--border-strong",
17  primaryTextColor: "--text",
18  secondaryColor: "--surface-popover",
19  secondaryBorderColor: "--border",
20  secondaryTextColor: "--text",
21  tertiaryColor: "--tint-brand",
22  tertiaryBorderColor: "--border",
23  tertiaryTextColor: "--text",
24  lineColor: "--border-strong",
25  textColor: "--text",
26  titleColor: "--text-heading",
27  errorBkgColor: "--tint-danger",
28  errorTextColor: "--text-danger",
29
30  mainBkg: "--paper",
31  nodeBorder: "--border-strong",
32  nodeTextColor: "--text",
33  clusterBkg: "--tint-brand",
34  clusterBorder: "--border",
35  // An edge crosses page background, so the label plate must match it or the line shows through.
36  edgeLabelBackground: "--paper",
37  arrowheadColor: "--border-strong",
38
39  actorBkg: "--paper",
40  actorBorder: "--border-strong",
41  actorTextColor: "--text",
42  actorLineColor: "--border",
43  signalColor: "--border-strong",
44  signalTextColor: "--text",
45  labelBoxBkgColor: "--paper",
46  labelBoxBorderColor: "--border-strong",
47  labelTextColor: "--text",
48  loopTextColor: "--text",
49  noteBkgColor: "--surface-popover",
50  noteBorderColor: "--border",
51  noteTextColor: "--text",
52  activationBkgColor: "--surface-popover",
53  activationBorderColor: "--border-strong",
54  sequenceNumberColor: "--on-brand",
55  altBackground: "--paper",
56};
57
58/**
59 * @param {string} key
60 * @param {string} theme one of DIAGRAM_THEMES
61 */
62export function diagramAssetPath(key, theme) {
63  return `/${DIAGRAM_ASSET_DIR}/${ASSET_PREFIX}${key}-${theme}.svg`;
64}