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

Ouverte
#15,295 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
57/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
sass, typescript, yaml
Domaine
build-system, design

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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
Langage dominant
JavaScript
Étoiles
6.2k
Forks
482
Merge moyen
17 h 46 min
PR mergées (30 j)
135

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de quarto-dev/quarto-cli

Toutes les issues de quarto-dev/quarto-cli

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.