quarto-dev / quarto-dev/quarto-cli
Mermaid diagrams in `typst` don't get brand colors
Open
@cscheid is already working on this.
Since Nov 4, 2024.
brand
bug
diagrams-mermaid
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Bug description
When a mermaid diagram is used in format: typst, the PNG that gets generated doesn't have the same SCSS/CSS applied that the HTML version does. The result is a diagram where the colors don't follow brand.
Steps to reproduce
---
title: "Untitled"
format:
html: default
typst: default
brand:
color:
background: "#000"
foreground: "#fff"
primary: "#f19710"
---
```{mermaid}
%%| fig-width: 6.5
flowchart LR
A[Hard edge] --> B(Round edge)
B --> C{Decision}
```
Expected behavior
The PNG used in typst should look like the HTML version of the diagram:
Actual behavior
The PNG used in typst has default colors:
Your environment
Mac OS 15.0
Quarto check output
quarto check
Quarto 99.9.9
[✓] Checking environment information...
Quarto cache location: /Users/charlottewickham/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.4.0: OK
Dart Sass version 1.70.0: OK
Deno version 1.46.3: OK
Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 99.9.9
commit: bf1664b7ac3049d3775c1eada99bb6841ed9505c
Path: /Users/charlottewickham/Documents/posit/quarto-cli/package/dist/bin
[✓] Checking tools....................OK
TinyTeX: v2024.03.13
Chromium: (not installed)
[✓] Checking LaTeX....................OK
Using: TinyTex
Path: /Users/charlottewickham/Library/TinyTeX/bin/universal-darwin
Version: 2024
[✓] Checking basic markdown render....OK
[✓] Checking Python 3 installation....OK
Version: 3.12.1
Path: /Users/charlottewickham/Documents/posit/quarto-web/.venv/bin/python
Jupyter: 5.7.2
Kernels: julia-1.10, ark, python3
[✓] Checking Jupyter engine render....OK
[✓] Checking R installation...........OK
Version: 4.3.3
Path: /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources
LibPaths:
- /Users/charlottewickham/Library/R/arm64/4.3/library
- /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/library
knitr: 1.45
rmarkdown: 2.28
[✓] Checking Knitr engine render......OK
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.