quarto-dev / quarto-dev/quarto-cli

Mermaid diagrams in `typst` don't get brand colors

Open
#11,308 0 comments 1 reaction 1 assignee View on GitHub

@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:
Image

Actual behavior

The PNG used in typst has default colors:
Image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.