SIGN IN SIGN UP

feat(ui): Mermaid diagrams follow the active color theme and mode (#1556)

* feat(ui): derive Mermaid theme variables from the active color theme

Mermaid diagrams rendered from one static config (dark base theme plus a slate
palette) in every palette and both modes. MermaidBlock now reads the live theme
tokens off the document, maps them to a complete themeVariables set for every
diagram family (utils/mermaidTheme), and re-initializes the runtime once per
(palette, mode) key before rendering, re-rendering mounted diagrams when the key
changes. A contrast guard keeps text-on-fill pairs at 4.5:1 and lines at 3:1.

Hosts without theme tokens keep the static MERMAID_CONFIG with no extra
initialize call; securityLevel stays strict.

* docs(ui): document theme-aware Mermaid diagrams and the host fallback contract

* fix(ui): guard Mermaid text and lines against every surface they cross

The first palette sweep (104 combinations) found edges at 2.4-2.9:1 and cluster
titles at 4.0:1 in 20 palettes: the guard measured against the page
background, but the block's bg-muted/30 canvas sits on the document card, and
edges and titles also cross cluster (muted) fills. Guard page-level text and
lines against the canvas over the card and over the page, node, cluster,
popover and ER-row fills, with 0.1 headroom for the browser's own compositing.
The sequence loop frame (labelBoxBorderColor) is a line and now takes the
line colour.

* docs(ui): HANDOFF names the Mermaid canvas mix over card, matching the code
M
Michael Ramos committed
2b264a20fce0cf9d2b93aacec4811b195ec89805
Parent: bcffccb
Committed by GitHub <noreply@github.com> on 9/17/2026, 6:28:52 AM