Feature suggestion: map (additional) Yaml variables to CSS :root

[baptiste]

Description

I'm suggesting that it could be useful to map a few additional CSS variables from Yaml to the CSS :root variables. Currently, there are already some variables defined such as:

:root {
--quarto-body-bg: #ffffff;
--quarto-body-color: #212529;
--quarto-text-muted: #6c757d;
--quarto-border-color: #dee2e6;
--quarto-border-width: 1px;
--quarto-border-radius: 0.25rem;

--quarto-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

and, for example, the document's fontcolor, monofont, linkcolor, etc, can be set in the Yaml. I believe it would be useful to add a couple of such mappings, for example to define a "accent" / "highlighting" colour, as a minimal theming system. It's common for a document to have one main colour (black font), and another colour for titles, buttons, etc. This kind of logic is used in other systems, such as Beamer themes or ggplot2 themes. Colour palettes can even be derived from this parent element by CSS transformations, e.g.

color: color-mix(in srgb, var(--quarto-highlight) 20%, transparent);

to create a semi-transparent, lighter shade.

I'm not sure how many of these mappings might make sense – presumably just very few, otherwise it'll get too complicated to follow the possible interactions between Bootstrap and (S)CSS variables.

[baptiste]

For reference, the original discussion here:

Originally posted by @baptiste in https://github.com/quarto-dev/quarto-cli/discussions/5959

Here's a situation I encountered today:

I have a custom Html template, say for Gandalf's resumé,

and I wish to define the font colours in the Yaml header with something like:

fontcolor: "#606060"
highlightcolor: "#8a1313"

where the fontcolor follows the standard Quarto convention, but I could not find a built-in way to specify other colours, such as the "highlight" / "accent" (red, in this case). Changing this colour in the Yaml (and nowhere else) lets me get a different style:

Pandoc variables cannot be inserted into my custom CSS file (defining <h1>, etc.), but I figured I could inject this custom Yaml variable indirectly by referring to CSS variables:

h1 {
  text-transform: uppercase;
    font-weight: 700;
    color: var(--quarto-highlight);
}

and defining the variable in a custom template partial (where pandoc variables can be injected):

  <style type="text/css">
    :root {
      --quarto-highlight: $highlightcolor$;
    }
  </style>

I came to this from a similar workaround in Latex (with macros instead of CSS variables).

[cscheid]

Thanks, this is very helpful.

I don't know when we'll get to it, but at some point we have to make all of the theming options in quarto fit well together, and you've found an important aspect.