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

quarto-cli/src/format/html/format-html.ts

Lines 127 to 136 in 4ee3e32

	resolveFormat: (format: Format) => {
	if (format.metadata[kMinimal] === true) {
	if (format.metadata[kFigResponsive] === undefined) {
	format.metadata[kFigResponsive] = false;
	}
	if (format.metadata[kTheme] === undefined) {
	format.metadata[kTheme] = "none";
	}
	}
	},

And Callout feature is dependent of Boostrap for HTML

quarto-cli/src/resources/filters/customnodes/callout.lua

Lines 135 to 137 in 4ee3e32

	_quarto.ast.add_renderer("Callout", function(_)
	return _quarto.format.isHtmlOutput() and hasBootstrap()
	end, _quarto.modules.callouts.render_to_bootstrap_div)

So when format is HTML and no boostrap, the fallback callout renderer is used

quarto-cli/src/resources/filters/customnodes/callout.lua

Lines 123 to 133 in 4ee3e32

	-- default renderer first
	_quarto.ast.add_renderer("Callout", function(_)
	return true
	end, function(node)
	node = _quarto.modules.callouts.decorate_callout_title_with_crossref(node)
	local contents = _quarto.modules.callouts.resolveCalloutContents(node, true)
	local callout = pandoc.BlockQuote(contents)
	local result = pandoc.Div(callout, pandoc.Attr(node.attr.identifier or ""))
	return result
	end)

I noticed that for EPUB and Revealjs, which are HTML without Bootstrap, we do have a specific renderer

quarto-cli/src/resources/filters/customnodes/callout.lua

Lines 139 to 197 in 4ee3e32

	_quarto.ast.add_renderer("Callout", function(_)
	return _quarto.format.isEpubOutput() or _quarto.format.isRevealJsOutput()
	end, function (node)
	local title = quarto.utils.as_inlines(node.title)
	local type = node.type
	local calloutAppearance = node.appearance
	local hasIcon = node.icon
	if calloutAppearance == _quarto.modules.constants.kCalloutAppearanceDefault and pandoc.utils.stringify(title) == "" then
	title = _quarto.modules.callouts.displayName(type)
	end
	-- the body of the callout
	local calloutBody = pandoc.Div({}, pandoc.Attr("", {"callout-body"}))
	local imgPlaceholder = pandoc.Plain({pandoc.RawInline("html", "<i class='callout-icon'></i>")});
	local imgDiv = pandoc.Div({imgPlaceholder}, pandoc.Attr("", {"callout-icon-container"}));
	-- title
	if title ~= nil and (pandoc.utils.type(title) == "string" or next(title) ~= nil) then
	local callout_title = pandoc.Div({}, pandoc.Attr("", {"callout-title"}))
	if hasIcon then
	callout_title.content:insert(imgDiv)
	end
	callout_title.content:insert(pandoc.Para(pandoc.Strong(title)))
	calloutBody.content:insert(callout_title)
	else
	if hasIcon then
	calloutBody.content:insert(imgDiv)
	end
	end
	-- contents
	local calloutContents = pandoc.Div(node.content, pandoc.Attr("", {"callout-content"}))
	calloutBody.content:insert(calloutContents)
	-- set attributes (including hiding icon)
	local attributes = pandoc.List({"callout"})
	if type ~= nil then
	attributes:insert("callout-" .. type)
	end
	if hasIcon == false then
	attributes:insert("no-icon")
	end
	if title ~= nil and (pandoc.utils.type(title) == "string" or next(title) ~= nil) then
	attributes:insert("callout-titled")
	end
	attributes:insert("callout-style-" .. calloutAppearance)
	local result = pandoc.Div({ calloutBody }, pandoc.Attr(node.attr.identifier or "", attributes))
	-- in revealjs or epub, if the leftover attr is non-trivial,
	-- then we need to wrap the callout in a div (#5208, #6853)
	if node.attr.identifier ~= "" or #node.attr.classes > 0 or #node.attr.attributes > 0 then
	return pandoc.Div({ result }, node.attr)
	else
	return result
	end
	end)

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

quarto-cli/src/format/formats-shared.ts

Lines 147 to 156 in 4ee3e32

	export function createEbookFormat(displayName: string, ext: string): Format {
	return createFormat(displayName, ext, {
	formatExtras: () => {
	return {
	[kIncludeInHeader]: [
	formatResourcePath("html", "styles-callout.html"),
	formatResourcePath("epub", "styles.html"),
	],
	};
	},

quarto-cli/src/format/reveal/format-reveal.ts

Lines 223 to 226 in 4ee3e32

	[kIncludeInHeader]: [
	formatResourcePath("html", "styles-callout.html"),
	stylesFile,
	],

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. lua - move html bootstrap renderer to module #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:

• Possible features in minimal option, and a working example #9305

[gadenbuie]

Callout source styles are here

quarto-cli/src/resources/formats/html/bootstrap/_bootstrap-rules.scss

Lines 1349 to 1356 in 240f91c

	// Callouts
	.callout {
	margin-top: $callout-margin-top;
	margin-bottom: $callout-margin-bottom;
	border-radius: $border-radius;
	overflow-wrap: break-word;
	}

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.

quarto-cli/src/resources/formats/html/bootstrap/_bootstrap-rules.scss

Lines 1516 to 1521 in 240f91c

	// Default values for callout colors
	$callout-color-note: $blue !default;
	$callout-color-tip: $green !default;
	$callout-color-important: $red !default;
	$callout-color-caution: $orange !default;
	$callout-color-warning: $yellow !default;

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.

quarto-cli/src/resources/formats/html/bootstrap/_bootstrap-rules.scss

Lines 1572 to 1576 in 240f91c

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

not to mention some complicated Sass to adjust the icon color

quarto-cli/src/resources/formats/html/bootstrap/_bootstrap-rules.scss

Lines 1594 to 1600 in 240f91c

	background-image: #{"url('data:image/svg+xml," +
	str-replace(
	quarto-map.get($info, "icon"),
	'fill="currentColor"',
	'style="fill: #{$shifted-color-svg}"'
	) +
	"');"};

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)