Doc: use .text-bg-{color} for all badges

[julien-deramond]

Description

This PR suggests using .text-bg-{color} all the time when badges are used.

Note that https://deploy-preview-39214--twbs-bootstrap.netlify.app/docs/5.3/utilities/position/#examples still uses .bg-danger as there's no text in this rounded badge.

Motivation & Context

The rendering is the same in Bootstrap documentation because the same color palette is used whether we are in light or dark mode (see our $theme-colors).

However, when a project needs to have specific colors for the dark mode, it needs to create a $theme-colors-dark. It will imply that the background and text colors will be different for .text-bg-{color}.
Without this change, our badges would have the right background color in dark mode, but the text color wouldn't be the right one.

Type of changes

• Enhancement (non-breaking change)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• (N/A) I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-39214--twbs-bootstrap.netlify.app/docs/5.3/migration/
• https://deploy-preview-39214--twbs-bootstrap.netlify.app/docs/versions/
• https://deploy-preview-39214--twbs-bootstrap.netlify.app/docs/5.3/components/badge/
• https://deploy-preview-39214--twbs-bootstrap.netlify.app/docs/5.3/components/list-group/#numbered
• https://deploy-preview-39214--twbs-bootstrap.netlify.app/docs/5.3/components/list-group/#with-badges
• https://deploy-preview-39214--twbs-bootstrap.netlify.app/docs/5.3/helpers/color-background/#with-components
• https://deploy-preview-39214--twbs-bootstrap.netlify.app/docs/5.3/utilities/position/#examples
• https://deploy-preview-39214--twbs-bootstrap.netlify.app/docs/5.3/utilities/text/#text-wrapping-and-overflow

[louismaximepiton]

Since we don't have a different color palette for dark mode, it looks harmful for basic users.

However, for advanced users that might want to implement a different color palette using dark mode, they might have some issues because :

The calculated color value from .text-bg-* helper comes from color-contrast() applied on theme-colors so it won't support CSS variables. -> Should we introduce something to handle this use case ?

[louismaximepiton]

Rethinking about this, I might overthinked a bit on this since we don't have CSS variables right now. Let's go for it !

[julien-deramond]

@mdo friendly ping for a double-check :) Adding you as a reviewer. If not available, don't hesitate to tell me, and then we'll merge the PR.