`background` doesn't work as a color in `revealjs` unless it's explicitly set

[cscheid]

repro:

---
title: Hello, `_brand.yml`!
brand:
  typography: 
    monospace:
      family: Inconsolata
      size: 1em
      color: foreground
      background-color: background
    base:
      family: Open Sans
    headings:
      family: Montserrat
    fonts:
      - family: Inconsolata
        source: google
      - family: Open Sans
        source: google
      - family: Montserrat
        source: google
---

## Links

Download the Positron Beta here: <https://positron.posit.co/download.html>

Docs for `_brand.yml`: <https://posit-dev.github.io/brand-yml/>, <https://quarto.org/docs/authoring/brand.html>

## Placeholder text

This is an example document with a [number](https://quarto.org) of `features` to help you come with a nicely branded document.

Duis ornare ex ac iaculis pretium. Maecenas sagittis odio id erat pharetra, sit amet consectetur quam sollicitudin. Vivamus pharetra quam purus, nec sagittis risus pretium at. Nullam feugiat, turpis ac accumsan interdum, sem tellus blandit neque, id vulputate diam quam semper nisl. Donec sit amet enim at neque porttitor aliquet. Phasellus facilisis nulla eget placerat eleifend. Vestibulum non egestas eros, eget lobortis ipsum. Nulla rutrum massa eget enim aliquam, id porttitor erat luctus. Nunc sagittis quis eros eu sagittis. Pellentesque dictum, erat at pellentesque sollicitudin, justo augue pulvinar metus, quis rutrum est mi nec felis. Vestibulum efficitur mi lorem, at elementum purus tincidunt a. Aliquam finibus enim magna, vitae pellentesque erat faucibus at. Nulla mauris tellus, imperdiet id lobortis et, dignissim condimentum ipsum. Morbi nulla orci, varius at aliquet sed, facilisis id tortor. Donec ut urna nisi.

quarto render --to html works, quarto render --to revealjs doesn.t

[cderv]

FWIW I can handle revealjs issue, even if they are brand related.

[cderv]

This is the error with revealjs

quarto render index.qmd --to revealjs
ERROR: Theme file compilation failed:

Error: $color: background is not a color.
     ╷
2195 │   color: rgb(red($code-block-bg), green($code-block-bg), blue($code-block-bg));
     │              ^^^^^^^^^^^^^^^^^^^

When I look into the SCSS saved from QUARTO_SAVE_SCSS I see

/* typography variables from _brand.yml */
// quarto-scss-analysis-annotation { "action": "push", "origin": "_brand.yml typography" }
$font-family-monospace: Inconsolata !default;
$code-font-size: 1em !default;
$code-color: foreground !default;
$pre-color: foreground !default;
$code-block-font-size: 1em !default;
$code-block-color: foreground !default;
$code-bg: background !default;
$code-block-bg: background !default;
$headings-font-family: Montserrat !default;
$presentation-heading-font: Montserrat !default;
$font-family-base: Open Sans !default;
$mainFont: Open Sans !default;
$mermaid-font-family: Open Sans !default;
// quarto-scss-analysis-annotation { "action": "pop" }
$theme: "brand" !default;

So foreground and background are insereted, but not as variable... 🤔
They should right ?

I think this is the same issue with --to html as I get the same

/* typography variables from _brand.yml */
// quarto-scss-analysis-annotation { "action": "push", "origin": "_brand.yml typography" }
$font-family-monospace: Inconsolata !default;
$code-font-size: 1em !default;
$code-color: foreground !default;
$pre-color: foreground !default;
$code-block-font-size: 1em !default;
$code-block-color: foreground !default;
$code-bg: background !default;
$code-block-bg: background !default;
$headings-font-family: Montserrat !default;
$presentation-heading-font: Montserrat !default;
$font-family-base: Open Sans !default;
$mainFont: Open Sans !default;
$mermaid-font-family: Open Sans !default;

but somehow this is hidden 🤷‍♂

So I have looked into it, but not should what is expected with brand:

• We could expect $foreground to be inserted in the SCSS but we do insert without $
  

  quarto-cli/src/core/sass/brand.ts

  Lines 545 to 553 in e67ce56

  	if (fontInformation[source]) {
  	let value = fontInformation[source];
  	if (["color", "background-color"].includes(source)) {
  	value = brand.getColor(value as string);
  	}
  	typographyVariables.push(
  	`$${target}: ${value} !default;`,
  	);
  	}

• This is probably because we usually resolve the color in getColor()
  

  quarto-cli/src/core/brand/brand.ts

  Lines 175 to 202 in e67ce56

  	// semantics of name resolution for colors:
  	// - if the name is in the "palette" key, use that value as they key for a recursive call (so color names can be aliased or redefined away from scss defaults)
  	// - if the name is a default color name, call getColor recursively (so defaults can use named values)
  	// - otherwise, assume it's a color value and return it
  	getColor(name: string): string {
  	const seenValues = new Set<string>();
  	do {
  	if (seenValues.has(name)) {
  	throw new Error(
  	`Circular reference in _brand.yml color definitions: ${
  	Array.from(seenValues).join(
  	" -> ",
  	)
  	}`,
  	);
  	}
  	seenValues.add(name);
  	if (this.data.color?.palette?.[name]) {
  	name = this.data.color.palette[name] as string;
  	} else if (
  	defaultColorNames.includes(name as BrandNamedThemeColor) &&
  	this.data.color?.[name as BrandNamedThemeColor]
  	) {
  	name = this.data.color[name as BrandNamedThemeColor]!;
  	} else {
  	return name;
  	}

  
  but foreground or background is not defined in the brand config, so it is assumed to be a color value.

Example in specification shows how to use color in brand
https://posit-dev.github.io/brand-yml/brand/typography.html#example-with-color-definitions

Is something missing in the example ? I am unsure if the error is this one, or the fact that setting brand.color may not work.

[cscheid]

Thanks for the clarification!

It turns out the problem comes from our attempt to do format-agnostic name translations, and that foreground and background were actually not working on my example! We'll fix this with better error messages.