This PR represents a potential shift in how we're using CSS variables for our components. In previous cases like #34600, I've been creating new CSS variables for each state-property pairing (e.g., --bs-btn-color, --bs-btn-hover-color, and --bs-btn-active-color). This matches our Sass-based customization of variables for almost every property and state, but it does create bloat in the component base class.
In contrast, this PR only sets the essential variables on the base class and uses CSS variable reassignment as needed to modify those properties for each state with their Sass variables. For example, --bs-pagination-color is set on .pagination and then overridden on .page-link:hover using the same --bs-pagination-color variable with a new value.
I think this approach makes more sense and can steer us toward more CSS variable re-use (e.g., --bs-pagination-bg: var(--bs-body-bg)), steering us away from too much Sass variable re-use that led to complicated customization issues.
Updated to use the same method we're using elsewhere, all in on the base class.
/cc @twbs/css-review
-
Revert to all CSS vars on base class -
Update documentation