Should be able to re-enable callouts if `minimal: true`

[hadley]

Maybe with callout: true or similar as with citations-hover: true, footnotes-hover: true etc

[cderv]

For context, this is driven by minimal: true setting theme: none when not theme is specified by the user. So not bootstrap in the HTML https://github.com/quarto-dev/quarto-cli/blob/4ee3e32ca9f3f920f408ea1973beed528170f34b/src/format/html/format-html.ts#L127-L136

And Callout feature is dependent of Boostrap for HTML https://github.com/quarto-dev/quarto-cli/blob/4ee3e32ca9f3f920f408ea1973beed528170f34b/src/resources/filters/customnodes/callout.lua#L135-L137

So when format is HTML and no boostrap, the fallback callout renderer is used https://github.com/quarto-dev/quarto-cli/blob/4ee3e32ca9f3f920f408ea1973beed528170f34b/src/resources/filters/customnodes/callout.lua#L123-L133

I noticed that for EPUB and Revealjs, which are HTML without Bootstrap, we do have a specific renderer https://github.com/quarto-dev/quarto-cli/blob/4ee3e32ca9f3f920f408ea1973beed528170f34b/src/resources/filters/customnodes/callout.lua#L139-L197

which rely on custom CSS style https://github.com/quarto-dev/quarto-cli/blob/fae7085ca4cdba5ff9841c19eda001e1fd9715fe/src/resources/formats/html/styles-callout.html which is inserted in both format https://github.com/quarto-dev/quarto-cli/blob/4ee3e32ca9f3f920f408ea1973beed528170f34b/src/format/formats-shared.ts#L147-L156 https://github.com/quarto-dev/quarto-cli/blob/4ee3e32ca9f3f920f408ea1973beed528170f34b/src/format/reveal/format-reveal.ts#L223-L226

So I wonder if we would also do the same for a HTML with no Bootstrap in it.

At a sum up, I see two situations here:

• minimal: true is set. No bootstrap, but desired is to have Callout still rendered using Using HTML + Bootstrap syntax. This is the case for pkgdown which will use its own bootstrap. #9965 should solve this by allowing a Lua filter to all the renderer function.

• minimal: true is set, so no bootstrap. Though we could have a fallback for Callout that is better than Blockquote. Either as a default or using callouts: true as we do with tabsets: true

Just writing current thoughts to refer too when we'll want to deal with this

[mcanouil]

A bit related to:

• 9305

[gadenbuie]

Callout source styles are here https://github.com/quarto-dev/quarto-cli/blob/240f91cc5ff05ea9e1442ed256a5d60f6f74c252/src/resources/formats/html/bootstrap/_bootstrap-rules.scss#L1349-L1356 which appears to be the source of the static callout styles in https://github.com/quarto-dev/quarto-cli/blob/fae7085ca4cdba5ff9841c19eda001e1fd9715fe/src/resources/formats/html/styles-callout.html.

In theory, the source callout styles could be written to make use of Bootstrap's CSS variables as default color values, which would then mean the static callout styles could be used in a Bootstrap 5+ page without requiring Sass.

The current callout Sass code uses Bootstrap Sass colors like $blue and $green as the basis of the callout color.

https://github.com/quarto-dev/quarto-cli/blob/240f91cc5ff05ea9e1442ed256a5d60f6f74c252/src/resources/formats/html/bootstrap/_bootstrap-rules.scss#L1516-L1521

But for CSS variables to work, you'd want to align the default callout styles with Bootstrap's semantic theme colors so that you can use variables like --bs-primary-bg-subtle and --bs-primary-text-emphasis.

That wouldn't be a small change since there are a number of color calculations that happen on the basis of the single callout color, e.g. https://github.com/quarto-dev/quarto-cli/blob/240f91cc5ff05ea9e1442ed256a5d60f6f74c252/src/resources/formats/html/bootstrap/_bootstrap-rules.scss#L1572-L1576 not to mention some complicated Sass to adjust the icon color https://github.com/quarto-dev/quarto-cli/blob/240f91cc5ff05ea9e1442ed256a5d60f6f74c252/src/resources/formats/html/bootstrap/_bootstrap-rules.scss#L1594-L1600 both of which are tied to the assumption that there's a single $callout-color-note variable driving the Sass calculations.

That said, another option could be to introduce CSS variables throughout the callout CSS, using the Sass-calculated colors as the default value. For example, instead of directly setting border-left-color as above, you'd include a CSS variable in the declaration. In third-party places, like pkgdown, a small set of CSS vars could then be used to customize the callouts.

  div.callout-#{$name}.callout {
    $border-left-color: shift-color(
      quarto-map.get($info, "color"),
      $callout-border-scale
    );
    border-left-color: var(--quarto-callout-#{$name}-border-left-color, #{$border-left-color});
  }

[cscheid]

@gadenbuie Thanks, I like these thoughts. But, be careful with these very helpful suggestions or we'll conscript you to become the SCSS ruler! :D

[hadley]

FWIW I need to do all that work to make callouts work on pkgdown sites, so it would great if I could push it back up to quarto. (OTOH it would \be more work for me, since if I style just for pkgdown, I don't need to worry about preserving the existing styles)