Mermaid diagrams fail with `Unsupported color format` in the default theme

[trans-hub]

Mermaid diagrams fail with Unsupported color format in the default theme

Description

Mermaid diagrams fail to render when using the @quartz-themes/default theme.

The browser console reports:

Uncaught (in promise) Error: Unsupported color format:
"hsl(calc(258 - 3), calc(88% * 1.02), calc(66% * 1.15))"

This also appears to be reproducible on the default theme's own Mermaid documentation:

https://quartz-themes.github.io/default/features/mermaid-diagrams

Environment

• Quartz 5
• @quartz-themes/default 1.0.1
• Mermaid 11.4.0

Steps to reproduce

1. Use the @quartz-themes/default theme.
2. Add a normal Mermaid diagram, for example:

flowchart LR
    A[Obsidian] --> B[GitHub]
    B --> C[VPS]
    C --> D[Quartz]

Loading

3. Open the generated page.
4. Check the browser console.

The Mermaid diagram does not render and the following error is reported:

Unsupported color format:
"hsl(calc(258 - 3), calc(88% * 1.02), calc(66% * 1.15))"

Additional investigation

The problematic CSS variable appears to be --tertiary.

Its computed value is:

hsl(calc(258 - 3), calc(88% * 1.02), calc(66% * 1.15))

The corresponding theme definition uses:

--color-accent-2: hsl(
  calc(var(--accent-h) - 3),
  calc(var(--accent-s) * 1.02),
  calc(var(--accent-l) * 1.15)
);

Quartz's Mermaid integration reads the computed CSS variables and passes --tertiary to Mermaid as primaryBorderColor and tertiaryColor.

Using explicit hexadecimal colors in Mermaid's themeVariables makes the diagram render correctly, which suggests that Mermaid itself is functioning but does not accept the CSS calc() expression generated by the theme.

Expected behavior

The default theme should render Mermaid diagrams without requiring users to override Mermaid's theme variables manually.

Actual behavior

Mermaid fails to initialize because one of the colors supplied by the default theme uses an hsl() expression containing calc().

The issue is also reproducible on the theme's own documentation site.