Generate color and background-color utils with CSS variables

There are a few unrelated changes here, but the bulk of this is all on topic. Will filter that out in subsequent commits.

Summary

This PR updates our generate-utility() mixin and utilities API to add support for generating CSS variables. Alongside that, I've updated our .text-* color and .bg-* background-color utilities to use CSS variables that support an optional variable for alpha transparency with default fallback. I've enabled this by adding new RGB versions of our :root level theme color variables (e.g., --bs-primary and --bs-primary-rgb), and then using those variables instead of just Sass-generated hex values.

The utilities API has been updated with a new boolean css-var option that, if set to true, will generate just a variable inside a class instead of a property: value pair inside a class.

Example

Here's an example for our updated .text-primary utility:

.text-primary {
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity, 1)) !important;
}

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

Help!?

Right now there are still too many pieces of this that are manual, especially the new $theme-colors-rgb and $utilities-*-colors maps. I'm wondering if there's a way to take the default $theme-colors map and loop over it to generate a new map. My Googling is inconclusive thus far. Any ideas for how to better automate this would be much appreciated!

Todos

• Document new css-var: true option for utility API
• Deprecate .text-white-50 and .text-black-50?

/cc @twbs/css-review