Open hadley opened 2 months ago
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
A bit related to:
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.
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});
}
@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
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)
Maybe with
callout: true
or similar as withcitations-hover: true
,footnotes-hover: true
etc