feat(brand): Handling of Bootstrap defaults and brand colors in HTML formats

[gadenbuie]

This PR updates the brand Sass bundles such that the colors in brand.color.palette are mapped to brand-specific Sass and CSS variables:

color:
  palette:
    orange: "#FF6F20"
    purple: "#A500B5"
    pink: "#FF3D7F"
    green: "#28A745"

defaults:
  bootstrap:
    form-switch-color: $brand-purple

With this PR, Bootstrap and reveal projects will have both Sass and CSS definitions for the brand color palette:

$brand-orange: #FF6F20 !default;
$brand-purple: #A500B5 !default;
$brand-pink: #FF3D7F !default;
$brand-green: #28A745 !default;

:root {
  --brand-orange: #FF6F20;
  --brand-purple: #A500B5;
  --brand-pink: #FF3D7F;
  --brand-green: #28A745;
}

In Bootstrap, when a color name in color.palette matches a color in Bootstrap's default color map, we'll also set that color directly:

$orange: #FF6F20 !default;
$purple: #A500B5 !default;
$pink: #FF3D7F !default;
$green: #28A745 !default;

We'll also pass values from brand.defaults.bootstrap directly to the defaults layer of the sass bundle

$form-switch-color: $brand-purple !default;

but ordered so that the brand color definitions appear first in the flattened Sass file.

[cscheid]

Any SASS variable is already always translated to a Quarto CSS variable with

This happens in a different part of the code base so it's not obvious at a glance of the brand code:

https://github.com/quarto-dev/quarto-cli/blob/main/src/core/sass.ts#L359-L377

https://github.com/quarto-dev/quarto-cli/blob/main/src/core/sass/add-css-vars.ts#L26

I'm on board with brand colors getting additional CSS aliases for the sake of the _brand.yml standard, but in that case I think we should talk about it in the document and request that all implementations that go through SCSS/CSS do this.

[gadenbuie]

but in that case I think we should talk about it in the document and request that all implementations that go through SCSS/CSS do this.

Agreed! It is documented and has been from the beginning, but will definitely be clearer now that we're moving out of the design phase.

[cscheid]

Ok, this looks great, and thanks for adding the annotations! (these are currently displayed in tools/sass-analyzer/sass-ui.qmd, if you're curious)