quarto-dev / quarto-dev/quarto-cli

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

Open
#5,982 5 comments 0 reactions 1 assignee View on GitHub

@cscheid is already working on this.

Since Jun 20, 2023.

enhancement themes
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.