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