Consider making warning text and backgrounds different color variables.

[SerratedSharp]

Prerequisites

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

Proposal

Using text-warning in a default context renders a yellow text on a white background, which has poor legibility in my opinion.
Using "card text-dark bg-warning" from card examples renders black text on a yellow back ground, which is legible.

If you try to address the yellow text on white background by adjusting the --bs-warning-rgb to be darker, then you solve one legibility issue while creating another where you have dark text on a now dark background.

If there were separate variables for foreground and background then we could adjust them independently. Is it possible to have a --bs-warning-bg-rgb and --bs-warning-fg-rgb for background and foreground respectively, both assigned from --bs-warning-rgb? This would allow you to derive both from a single color and keep current default, but allow us to assign a color directly to the fg/bg independently as we choose, either disconnecting both of them from --bs-warning-rgb, or only replacing one and allowing the other to continue to derive from --bs-warning-rgb.

Motivation and context

If there were separate variables for foreground and background then we could adjust them independently to ensure the color is appropriate for the given context to ensure proper contrast.

I've used BS since 3 and always found myself having to implement custom CSS to display warnings because there's always legibility issues. With the introduction of CSS variables I thought I could overcome this problem in a more elegant way, but discovered that bg-warning and text-warning use the same color variable. I prefer not to use SASS in order to keep my build pipeline simplified.