card, modal, offcanvas and toast can't handle .text-white around

[endcoreAK]

Prerequisites

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

Describe the issue

When I place a card, modal, offcanvas or toast (that's all as far as I've figured out) inside a .text-white container, the text turns white and since the background is also white, it's not readable, you can check the fiddle with an example.

Since the accordions work by .accordion-item { color: var(--bs-accordion-color); }, maybe this could be added to the other 4 components as well?

Reduced test cases

https://jsfiddle.net/expb59g7/

(quick n dirty fixes: https://jsfiddle.net/dkqryw9n/)

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?

v.5.2.0

[nguyenphucminh]

Because the text-white already wraps all the elements inside, and white text color will overlap the child elements. You have to customize it, so this is natural bro

[endcoreAK]

@nguyenphucminh I know how it works and I already work with my fix above on projects, but it feels a bit random, that the accordions has an "own" body color, but not on the other components in my example. :)

[mdo]

This makes sense and I get that it's annoying :). I'm bothered by the inconsistency as well here, but I'm not yet convinced we should add additional color overrides to each component—need to consider what other overrides we might need. For example, if you change the font properties, do we need to redeclare all of those on each component as well?

That aside, how often are you using utilities to override styling this high in your document tree? I personally think of utilities as much more surgical and this feels like you're wanting a lot more to change.

[endcoreAK]

My suggestion would be that the modules where there is explicitly a (white) background, that are only 5-6 pieces, also get a color variable, but which is defined by default to null. So we don't have anything in the variables that has to be overwritten and it will work for light websites / sections, but I could adjust the color if needed. Not sure if this is also a case for he dark theme as well. Perhaps this could be adjusted by adding 2 variables to the $component section, like...

$component-color: $body-color !default; // (or null)
$component-bg: $white !default;

... which is also used in other places, such as ...

$card-color: $component-color !default;
$card-bg: $component-bg: !default;

The point about the other font properties is fair and of course not every element can get 10+ additional, individual CSS properties to reset previously set utilities. That is then hard to define where to start and where to stop.

Alternatively, the accordion color could be removed, in which case it would be more susceptible to the above case, but it would be more consistent with the other components.

Also the fact that accordion uses #000-black as color is not optimal in my eyes. The variable color-contrast-dark should not be used here IMHO. This is, besides the tables and buttons, the only component that uses this color by default.

[mdo]

That's good criteria for making the decision, I'll think on that more. I think focusing first on colors makes the most sense.

And in regards to the accordion color, that's been tackled in #36921.

[mdo]

This is something that will likely be addressed in the color mode work that will make it easier to more surgically change light/dark on components. We already have null colors on all the mentioned components as well.