Utilities: separate text color from background color

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

For better color themes support, users need to be able to use different colors in text and background. How it’s currently implemented:

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

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

If i override --bs-primary-rgb in .text-primary, the following scenario fails:

<div class="bg-primary bg-opacity-25 text-primary">

Because .bg-primary also inherits new RGB value. In dark theme, text color should be lighter than background color. And current implementation makes it impossible to apply different color without introducing a new color map for text color specifically and a bunch of new color classes.

Motivation and context

To improve theming support

[ffoodd]

This scenario is supposed to fail since primary represents a color and you’re using the same for background and foreground.

There’s no need to allow finer tuning since this use-case does not match how and why our utilities (and color palette) work.

Simply use another utility for one of tour color.

[ffoodd]

I’m sorry but I don’t get the point. Utilities are named after design tokens (in that case, colors). Having primary matching distinct values would totally fail Bootstrap’s conventions.

Moreover, whatever the reason are (and for sure using.bg-primary.text-primary shouldn’t be a thing) one is already able to change color palettes used for each utilities, by overriding it through the utilities API.

We don’t support dark themes for now, that could be something to revisit when we do.

For now I really don’t see how and why we could consider this. Names matching values is the current purpose of utilities, and your suggestion defeats the whole point.

BTW I really think your example doesn’t help. Providing a real use case (and maybe a test case) would have helped to understand your request.