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

Aberta
  • Algo errado?
#15,295 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
57/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
sass, typescript, yaml
Domínio
build-system, design

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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
Linguagem predominante
JavaScript
Estrelas
6.2k
Forks
482
Merge médio
17h 46min
PRs com merge (30d)
135

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de quarto-dev/quarto-cli

Todas as issues de quarto-dev/quarto-cli

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.