While working on the forms update, I noticed we have quite a few ways of reassigning variables for our color system. The $brand-
variables have been around for awhile as a support system for semantic naming, but honestly, it's an unhelpful abstraction. Not everyone's primary color is blue or their error state red.
This PR aims to drastically improve the power of our colors, simplify code by removing the $brand-
and $state-
variables, and increase the number of component variants and utility classes. This has been built in such a way that we can easily expand or add new maps for color shades after v4 ships. I went down a few paths the last couple weeks and ultimately decided this was the one of least resistance given a shorter window.
More specifically, this:
- Removes the
$brand-
variables, replaced by${color}
variables. For example, instead of$brand-primary
it's$blue
. - Removes the
$state-
variables as only alerts and list groups were using them. Fixes #22175 (closed). (For those following along at home, this is the start of the color variable rabbit hole.😆 ) - Renames all component variants from success, info, warning, and danger to their color counterparts.
- Fixes #21311 (closed) by adding
.btn-gray-dark
variant. - Closes #19792 (closed) as a won't fix by removing card variants for background and border utils.
- Fixes #18119 (closed) by adding a color contrast mixin.
- Closes #22062 (closed) and #22363—no need for customizing the color of badges when there are text color utilities.
- Updates buttons to use the
$colors
Sass map to generate more button variants.
More still to come, including:
-
Finish updating Options docs -
Revamp the colors to create an actual color scheme -
Ideally improve contrast ratios -
Consolidate and standardize variant names
See #18462 for first foray into color palette. That PR failed as it started with the brand and state colors vs abandoning them completely for a clearer and more customizable system.