-
Notifications
You must be signed in to change notification settings - Fork 410
Description
Bug description
When using brand.yml with custom theme colours, callout colours differ between HTML and Typst output.
- HTML uses raw Bootstrap palette colour variables:
$blue,$green,$yellow,$red,$orange. - Typst uses semantic Bootstrap theme colour names:
"primary","success","warning","danger".
Setting color.primary (or color.success, color.warning, color.danger) in brand.yml overrides the semantic theme variables ($primary, $success, etc.) but not the raw palette variables ($blue, $green, etc.).
As a result, Typst callouts pick up brand colour overrides while HTML callouts do not.
Root cause
HTML:
quarto-cli/src/resources/formats/html/bootstrap/_bootstrap-rules.scss
Lines 1575 to 1580 in 98be8a6
// Default values for callout colors $callout-color-note: $blue !default; $callout-color-tip: $green !default; $callout-color-important: $red !default; $callout-color-caution: $orange !default; $callout-color-warning: $yellow !default;
Callout colours are bound to raw Bootstrap palette colour variables ($blue, $green, $yellow, $red, $orange) rather than to semantic theme variables ($primary, $success, $warning, $danger).
Setting color.primary in brand.yml creates $primary: <value> in SCSS but does not override $blue, so the note callout stays blue.
The same applies to all other callout types: color.success does not override $green, color.warning does not override $yellow, and color.danger does not override $red.
Typst:
quarto-cli/src/resources/filters/customnodes/callout.lua
Lines 236 to 242 in 98be8a6
local callout_theme_color_map = { note = "primary", warning = "warning", important = "danger", tip = "success", caution = nil -- ? }
Callout colours are bound to semantic Bootstrap theme colour names ("primary", "success", "warning", "danger"), which resolve to brand-color.<name>.
Setting any theme colour in brand.yml directly changes the corresponding Typst callout colour.
Bootstrap defaults (for reference):
$blue: #0d6efd !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; $pink: #d63384 !default; $red: #dc3545 !default; $orange: #fd7e14 !default; $yellow: #ffc107 !default; $green: #198754 !default; $teal: #20c997 !default; $cyan: #0dcaf0 !default; quarto-cli/src/resources/formats/html/bootstrap/dist/scss/_variables.scss
Lines 305 to 314 in 98be8a6
// scss-docs-start theme-color-variables $primary: $blue !default; $secondary: $gray-600 !default; $success: $green !default; $info: $cyan !default; $warning: $yellow !default; $danger: $red !default; $light: $gray-100 !default; $dark: $gray-900 !default; // scss-docs-end theme-color-variables
Full callout-to-colour mapping
| Callout type | HTML SCSS variable | SCSS resolves to | Typst maps to | Bootstrap alias |
|---|---|---|---|---|
| note | $callout-color-note |
$blue = #0d6efd |
"primary" |
$primary = $blue |
| tip | $callout-color-tip |
$green = #198754 |
"success" |
$success = $green |
| warning | $callout-color-warning |
$yellow = #ffc107 |
"warning" |
$warning = $yellow |
| important | $callout-color-important |
$red = #dc3545 |
"danger" |
$danger = $red |
| caution | $callout-color-caution |
$orange = #fd7e14 |
nil |
(no alias) |
Without brand.yml, all colours match because $primary defaults to $blue, $success defaults to $green, etc.
The inconsistency surfaces when brand.yml overrides a theme colour (e.g., color.primary) without also overriding the matching palette colour (e.g., color.palette.blue).
Additional issue: caution maps to nil in the Typst callout_theme_color_map, so it never picks up brand colours in Typst at all:
caution = nil -- ?
Steps to reproduce
callout-test.qmd:
---
title: "Callout Note Colour Inconsistency"
brand:
color:
primary: "#7b2d8e"
---
::: {.callout-note}
This note callout should use the same colour in both HTML and Typst.
With `color.primary: "#7b2d8e"` in `brand.yml`, Typst uses purple but HTML stays blue.
:::quarto render callout-test.qmd --to html
quarto render callout-test.qmd --to typstActual behaviour
| HTML output (note callout stays blue) | Typst output (note callout uses brand primary) |
|---|---|
![]() |
![]() |
- HTML:
border-left-color: #0d6efd(Bootstrap$blue, unchanged by brand). - Typst:
icon_color: brand-color.primaryandbackground_color: brand-color-background.primary(brand purple#7b2d8e).
The same mismatch applies to all other callout types when their corresponding theme colour is overridden in brand.yml (color.success for tip, color.warning for warning, color.danger for important).
Expected behaviour
Both formats should produce the same callout colour when theme colours are set in brand.yml.
Either HTML should use the semantic theme variables ($primary, $success, $warning, $danger) so it picks up brand overrides, or Typst should use the same raw palette colours as HTML.
Your environment
- IDE: VS Code
- OS: macOS 15.4
Quarto check output
Quarto 99.9.9
[✓] Checking environment information...
Quarto cache location: /Users/mcanouil/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.8.3: OK
Dart Sass version 1.87.0: OK
Deno version 2.4.5: OK
Typst version 0.14.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 99.9.9
commit: 98be8a667b39ac101e50bc47ef49cd5de94cbefe
Path: /Users/mcanouil/Projects/quarto-dev/quarto-cli/package/dist/bin
[✓] Checking tools....................OK
TinyTeX: v2026.02
VeraPDF: 1.28.2
Chromium: (not installed)
Chrome Headless Shell: (not installed)
[✓] Checking LaTeX....................OK
Using: TinyTex
Path: /Users/mcanouil/Library/TinyTeX/bin/universal-darwin
Version: 2025
[✓] Checking Chrome Headless....................OK
Using: Chrome from QUARTO_CHROMIUM
Path: /Applications/Brave Browser.app/Contents/MacOS/Brave Browser
[✓] Checking basic markdown render....OK
[✓] Checking R installation...........OK
Version: 4.5.2
Path: /Library/Frameworks/R.framework/Resources
LibPaths:
- /Users/mcanouil/Projects/quarto-dev/quarto-playground/renv/library/macos/R-4.5/aarch64-apple-darwin20
- /Users/mcanouil/Library/Caches/org.R-project.R/R/renv/sandbox/macos/R-4.5/aarch64-apple-darwin20/4cd76b74
knitr: 1.50
rmarkdown: 2.30
[✓] Checking Knitr engine render......OK
[✓] Checking Python 3 installation....OK
Version: 3.14.0
Path: /Users/mcanouil/Projects/quarto-dev/quarto-playground/.venv/bin/python3
Jupyter: 5.9.1
Kernels: uv, julia-1.12, python3
[✓] Checking Jupyter engine render....OK

