Docs: handle deprecated dark variants more precisely

[julien-deramond]

Closes #40566

Description

This PR aims to handle deprecated dark variants more precisely in our documentation; in the components pages, in the examples and in the tests:

• .btn-close-white
• .carousel-dark
• .dropdown-menu-dark
• .navbar-dark
• .text-bg-black (for Offcanvas)

This PR has voluntarily not been split as having all the elements at once makes it easier to determine consistency through the pages.

The global idea is to get rid of the dark variants everywhere in the code and replace their usage with data-bs-theme="dark" (even in dark variant descriptions) so that we can have a consistent rendering everywhere, and only show the new way of doing things.

Some new callouts have been added to the documentation to explain the changes where it was necessary.

.btn-close-white

.btn-close-white has been replaced with data-bs-theme="dark" in:

• Navbar > Responsive behaviors > Offcanvas (rendering can be compared with the previous one)
• Offcanvas > Dark offcanvas (rendering can be compared with the previous one).
• Toasts > Color schemes (rendering can be compared with the previous one).
• Navbars offcanvas example (rendering can be compared with the previous one)
• in our documentation rendering when the offcanvas is rendered

.carousel-dark

.carousel-dark has been replaced with data-bs-theme="dark" in:

• Carousel > Dark variant (rendering can be compared with the previous one).

.dropdown-menu-dark

.dropdown-menu-dark has been removed and data-bs-theme="dark" added at the .dropdown level in:

• Dropdowns > Dark dropdowns (rendering can be compared with the previous one).
  • Please note that the rendering in this example is not exactly the same as the contextual dark mode version is darker than the dark variant. The color matches .btn-dark and not really .btn-secondary anymore.

Dark mode (now)	Dark variant (before)

• Navbar > Responsive behaviors > Offcanvas (rendering can be compared with the previous one)
• Sidebars example (rendering can be compared with the previous one)

.navbar-dark

.navbar-dark has been replaced with data-bs-theme="dark" in:

• Bottom Navbar example (rendering can be compared with the previous one)
• Navbar fixed example (rendering can be compared with the previous one)
• Navbar static example (rendering can be compared with the previous one)
• Navbars example (rendering can be compared with the previous one)
• Sticky footer navbar example (rendering can be compared with the previous one)
• Offcanvas navbar example (rendering can be compared with the previous one)
• Cheatsheet example (rendering can be compared with the previous one)
• Cheatsheet RTL example (rendering can be compared with the previous one)
• Carousel example (rendering can be compared with the previous one) (data-bs-theme="dark" has not been added at the navbar level since it's already present at the <header> level)
• Carousel RTL example (rendering can be compared with the previous one) (data-bs-theme="dark" has not been added at the navbar level since it's already present at the <header> level)
  -rtl/#navbar))
• Album example (rendering can be compared with the previous one) (data-bs-theme="dark" has not been added at the navbar level since it's already present at the <header> level)
• Album RTL example (rendering can be compared with the previous one) (data-bs-theme="dark" has not been added at the navbar level since it's already present at the <header> level)
• Dropdowns > Dark dropdowns (in a navbar) (rendering can be compared with the previous one)
• Navbar > Responsive behaviors > External content (rendering can be compared with the previous one)
• Navbar > Responsive behaviors > Offcanvas (rendering can be compared with the previous one)
• Navbars offcanvas example (rendering can be compared with the previous one)
• in js/tests/visual/modal.html (rendering can only be compared locally but follows the same logic as the previous use cases)
• in js/tests/visual/scrollspy.html (rendering can only be compared locally but follows the same logic as the previous use cases)

Please note that .btn-success have been replaced with .btn-outline-success in some places has it was the rendering suggested in some of the examples for a better contrast.

The only difference we can see in the rendering in each and every case is the background color of the dropdowns and inputs which are now using the dark theme color instead of being white. This is linked to #38973 and my corresponding comment. I think right now, for the sake of consistency, we should keep the dark theme color for the dropdowns in this PR so that our documentation remains consistent everywhere.

.text-bg-black (for Offcanvas)

.text-bg-black has been replaced with data-bs-theme="dark" in:

• Offcanvas > Dark offcanvas (rendering can be compared with the previous one).
• Navbar > Responsive behaviors > Offcanvas (rendering can be compared with the previous one)
• Navbars offcanvas example (rendering can be compared with the previous one)

Motivation & Context

Consistency throughout the documentation.

Type of changes

• Enhancement (non-breaking change which fixes an issue)

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-39291--twbs-bootstrap.netlify.app/

[louismaximepiton]

Should we try to use {{< callout-deprecated-dark-variants ... >}} everywhere in the documentation ? Would bring more consistency over the doc imo. If yes, need to change inside https://deploy-preview-39291--twbs-bootstrap.netlify.app/docs/5.3/components/close-button/#dark-variant and https://deploy-preview-39291--twbs-bootstrap.netlify.app/docs/5.3/components/navbar/#color-schemes.

On CSS side (so might be done afterwards), I think the difference you see between .dropdown-menu-dark and using data-bs-theme is mainly due to lack of consistency between CSS files (just compared _carousel.scss, _navbar.scss and _close.scss that still use $*-dark variables and _dropdown.scss that don't use them anymore). I don't know which one we should apply everywhere.

However, the global result is better than what was already there before.

[mdo]

Seems fine by me!

[mdo]

Moving this to v5.4.0 because this changes a good amount of components, want to make sure it's seen properly.