Brand palette colours reach Bootstrap colour variables only when `defaults.bootstrap` is set

Aperta
  • Qualcosa non va?
#15,295 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
57/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
sass, typescript, yaml
Ambito
build-system, design

Direzione di ricerca

Start in src/core/sass/brand.ts, especially brandBootstrapSassLayers and brandDefaultsBootstrapLayer; compare how light and dark brand data add the palette mapping. Reproduce with the _brand.yml examples and render index.qmd with quarto render. Done when palette colors reach Bootstrap variables without a defaults.bootstrap block and the precedence of an explicit Bootstrap default is resolved.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bootstrap brand bug themes
I have:
  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide
Bug description

When a color.palette name matches a Bootstrap colour (blue, red, green and the others), #11108 sets the Bootstrap variable to the brand colour, so $blue takes color.palette.blue.
That only happens when the brand also has a defaults.bootstrap block.
With a palette alone, $brand-blue is set but $blue keeps the Bootstrap value.
Anything built on $blue, such as $callout-color-note, then ignores the brand.

The cause is in brandBootstrapSassLayers in src/core/sass/brand.ts.
The palette mapping lives in brandDefaultsBootstrapLayer, and that layer is only added under if (brand?.light?.data?.defaults?.bootstrap) (and the same for dark).
The PR describes the mapping with no such condition, so this looks unintended.

There's a second, smaller point in the same layer.
When both color.palette.blue and defaults.bootstrap.defaults.blue are set, the palette wins.
I'd have expected the explicit Bootstrap default to take precedence.
If the current order is by design, it would help to document it.

Related: #11108, #14092.

Steps to reproduce

_brand.yml:

color:
  palette:
    blue: "#ff00aa"

index.qmd:

---
title: Brand palette
format: html
---

::: {.callout-note}
A note.
:::

Render with quarto render index.qmd, then look at the generated Bootstrap CSS.
Next, add any unrelated key under defaults.bootstrap and render again:

color:
  palette:
    blue: "#ff00aa"
defaults:
  bootstrap:
    defaults:
      enable-shadows: false
Actual behavior

With the palette only:

--bs-blue: #0d6efd
--brand-blue: #ff00aa
div.callout-note.callout{border-left-color:#0d6efd}

With the unrelated defaults.bootstrap key added:

--bs-blue: #ff00aa
--brand-blue: #ff00aa
div.callout-note.callout{border-left-color:#f0a}

With defaults.bootstrap.defaults.blue: "#00aa00" as well, --bs-blue is still #ff00aa.

Expected behavior

$blue (and so --bs-blue and the note callout) takes color.palette.blue whether or not the brand has a defaults.bootstrap block.

Your environment
  • OS: macOS 27.2.
Quarto check output
Quarto 99.9.9
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.107.1: OK
      Deno version 2.9.8: OK
      Typst version 0.15.1: OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: 089ba530b3ed4ec156a355d41b6b7de2db3e44ea
Lingua principale
JavaScript
Stelle
6.2k
Fork
482
Merge medio
17h 46m
PR unite (30g)
135

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di quarto-dev/quarto-cli

Tutte le issue di quarto-dev/quarto-cli

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.