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