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

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

[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.