Define `$component-active-color` with `color-contrast()`

[justin-oh]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

I'm unsure if this is a bug or intended, but the variable $component-active-color is not guaranteed to contrast with $component-active-bg.

These variables are defined as follows:

$component-active-color:      $white !default;
$component-active-bg:         $primary !default;

If $primary is set to a light colour (yellow, teal, cyan, etc.) then it will be difficult to read the white text of an active component against those light backgrounds.

The solution is to set up the variables as follows:

$component-active-bg:         $primary !default;
$component-active-color:      color-contrast($component-active-bg) !default;

Reduced test cases

There is nothing to test. The definition of these variables can be seen in the code and the results should be obvious.

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.3 (but it also exists on main and possibly older versions)

[julien-deramond]

Thanks for this enhancement idea @justin-oh With the current implementation mixing CSS variables and Sass variables, it's maybe something we can do to ensure some automatism. Defining $primary with a CSS variable is not possible already, so it wouldn't break anything here, especially.