Styling with dynamically generated CSS variables

[baptiste]

Description

I may be taking a very weird approach here, but 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>

This seems to work, but I wonder if I've missed a much more direct strategy? I came to this from a similar workaround in Latex (with macros instead of CSS variables), so it's very possible that I missed a more natural solution.

[mcanouil]

Creating a format extension with new YAML meta data (parameters) that you inject seems more straightforward to me (https://quarto.org/docs/extensions/lua-api.html#html-dependencies).

[baptiste]

How would I inject parameters in a CSS file? Do you mean I could use Lua to generate the CSS? That seems harder than using Html partials.

[mcanouil]

It's just another way of doing it.
It's offers more possibilities within Lua than within templates.

In the end, it's 100 % up to you.

[cscheid]

I don't think there's an easier way, because ultimately you're trying to connect YAML metadata semantics (which is visible in Lua and in template expansion) with CSS semantics. Something, somewhere will need to put the former in the latter. Template expansion, as you've found, seems to be the least clunky way to do it.

[baptiste]

Thanks, that makes sense. I do wonder whether it might make sense to add a couple of mappings from Yaml to Quarto's :root CSS. Judging by the developer tools inspector on this example, I see that there are already some like:

: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 many others related to mermaid styling and highlighting. Would it make sense to have a few that could act as a minimalist theming system, defining another colour for emphasis as in this example, and perhaps one or two more base values? (these can then be transformed, e.g. faded, etc. to create a consistent palette with color: color-mix(in srgb, var(--quarto-highlight) 20%, transparent);).

Beamer templates work a bit like this, as far as I remember, and ggplot2 theme system also has this concept of inheritance from parent properties (the way sizes in elements refer to the base size with rel()). I don't fully understand the interaction between SCSS, bootstrap, etc. here, but at least some parameters end up in the :root element and can therefore be reused elsewhere. It could be nice to tune a bit the appearance via dynamic variables, without having to hard code it in the (S)CSS files.

Of course it's also a slippery slope, as it wouldn't be manageable to have too many of those variables interacting with bootstrap etc., I imagine, but maybe there's a case for just a few additions?

[cscheid]

Hm, that might not be a bad idea. Do you want to open an enhancement request? We have our plates pretty full for the next few months, but this might be a good feature to add.

[mcanouil]

FYI the related opened issue #5982.