Docs: handle deprecated dark variants more precisely #39291
+63
−54
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 withdata-bs-theme="dark"
in:.carousel-dark
.carousel-dark
has been replaced withdata-bs-theme="dark"
in:.dropdown-menu-dark
.dropdown-menu-dark
has been removed anddata-bs-theme="dark"
added at the.dropdown
level in:.btn-dark
and not really.btn-secondary
anymore..navbar-dark
.navbar-dark
has been replaced withdata-bs-theme="dark"
in:data-bs-theme="dark"
has not been added at the navbar level since it's already present at the<header>
level)data-bs-theme="dark"
has not been added at the navbar level since it's already present at the<header>
level)-rtl/#navbar))
data-bs-theme="dark"
has not been added at the navbar level since it's already present at the<header>
level)data-bs-theme="dark"
has not been added at the navbar level since it's already present at the<header>
level)js/tests/visual/modal.html
(rendering can only be compared locally but follows the same logic as the previous use cases)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 withdata-bs-theme="dark"
in:Motivation & Context
Consistency throughout the documentation.
Type of changes
Checklist
npm run lint
)Live previews