Dark mode: migration guide (#2433)

Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>
Orange-OpenSource · julien-deramond · Jan 2, 2024 · Sep 11, 2023 · Oct 25, 2023 · Oct 25, 2023
commit 6f8e9926f00012ea7415746459433b0d8125cc2f
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -10,15 +10,15 @@
     },
     {
       "path": "./dist/css/boosted-reboot.css",
-      "maxSize": "4.75 kB"
+      "maxSize": "4.5 kB"
     },
     {
       "path": "./dist/css/boosted-reboot.min.css",
       "maxSize": "4.5 kB"
     },
     {
       "path": "./dist/css/boosted-utilities.css",
-      "maxSize": "13.0 kB"
+      "maxSize": "12.75 kB"
     },
     {
       "path": "./dist/css/boosted-utilities.min.css",
@@ -42,11 +42,11 @@
     },
     {
       "path": "./dist/js/boosted.esm.js",
-      "maxSize": "33.25 kB"
+      "maxSize": "33.0 kB"
     },
     {
       "path": "./dist/js/boosted.esm.min.js",
-      "maxSize": "20.5 kB"
+      "maxSize": "20.25 kB"
     },
     {
       "path": "./dist/js/boosted.js",

diff --git a/scss/_close.scss b/scss/_close.scss
@@ -60,6 +60,7 @@
   }
 }
 
+// Deprecated in v5.3.3
 // Boosted mod: changing color instead of using filter
 .btn-close-white {
   --#{$prefix}btn-close-color: #{$btn-close-white-color}; // Boosted mod

diff --git a/scss/_footer.scss b/scss/_footer.scss
@@ -1,5 +1,5 @@
 .footer {
-  // scss-docs-start footer-part-css-vars
+  // scss-docs-start footer-css-vars
   --#{$prefix}footer-gap: 0;
   --#{$prefix}footer-padding-top: 0;
   --#{$prefix}footer-padding-bottom: 0;
@@ -9,7 +9,7 @@
   --#{$prefix}footer-title-font-weight: #{$footer-title-font-weight};
   --#{$prefix}footer-title-line-height: #{$footer-line-height-md};
   --#{$prefix}footer-title-letter-spacing: #{$footer-letter-spacing};
-  // scss-docs-end footer-part-css-vars
+  // scss-docs-end footer-css-vars
   --#{$prefix}navbar-padding-y: 0;
   --#{$prefix}navbar-nav-link-padding-y: 0;
   --#{$prefix}navbar-nav-link-padding-x: 0;

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
@@ -205,5 +205,3 @@
 //
 
 // Boosted mod: no pagination sizes
-
-// End mod
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -137,7 +137,7 @@
   &:required {
     ~ .form-check-label::after {
       margin-left: $form-label-required-margin-left;
-      color: $primary;
+      color: $form-label-required-color;
       content: "*";
     }
   }

diff --git a/site/content/docs/5.3/about/brand.md b/site/content/docs/5.3/about/brand.md
@@ -19,15 +19,15 @@ Have a need for Boosted's brand resources? Great! We have only a few guidelines
 <div class="row row-cols-md-2 mt-4 mb-5">
   <div class="col">
     <div class="ratio ratio-1x1">
-    <figure class="d-flex bg-dark">
+    <figure class="d-flex bg-black">
       <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" class="figure-img img-fluid m-auto" width="220" height="220" role="img" alt="Orange" loading="lazy">
       <figcaption class="figure-caption fw-bold position-absolute">Master logo</figcaption>
     </figure>
     </div>
   </div>
   <div class="col">
     <div class="ratio ratio-1x1">
-    <figure class="d-flex bg-dark">
+    <figure class="d-flex bg-black">
       <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" class="figure-img m-auto" width="30" height="30" role="img" alt="Orange" loading="lazy">
       <figcaption class="figure-caption fw-bold position-absolute">Small logo</figcaption>
     </figure>
@@ -48,7 +48,7 @@ Orange Business Services has its own logo that contains the Orange logo and the
 <div class="row row-cols-md-2 mt-4 mb-5">
   <div class="col">
     <div class="ratio ratio-1x1">
-    <figure class="d-flex bg-dark">
+    <figure class="d-flex bg-black">
       <img src="/docs/{{< param docs_version >}}/assets/brand/OBS-logo.svg" class="figure-img img-fluid m-auto" width="220" height="220" role="img" alt="Orange" loading="lazy">
       <figcaption class="figure-caption fw-bold position-absolute">Orange Business Services logo</figcaption>
     </figure>

diff --git a/site/content/docs/5.3/components/back-to-top.md b/site/content/docs/5.3/components/back-to-top.md
@@ -29,7 +29,7 @@ Smooth scrolling does not depend on this component. It's turned on only when the
 
 ## Example
 
-<div class="bd-example">
+<div class="bd-example d-flex">
   <nav aria-label="Standard back to top example" class="back-to-top position-static ps-5 ms-5">
     <a href="#top" class="back-to-top-link btn btn-icon btn-outline-secondary position-relative top-0" data-bs-label="Back to top">
       <span class="visually-hidden">Back to top</span>

diff --git a/site/content/docs/5.3/components/card.md b/site/content/docs/5.3/components/card.md
@@ -302,7 +302,7 @@ Add some navigation to a card's header (or block) with Boosted's [nav components
 
 {{< example >}}
 <div class="card text-center">
-  <div class="card-header bg-body">
+  <div class="card-header text-body bg-body">
     <ul class="nav nav-tabs card-header-tabs">
       <li class="nav-item">
         <a class="nav-link active" aria-current="true" href="#">Active</a>
@@ -325,7 +325,7 @@ Add some navigation to a card's header (or block) with Boosted's [nav components
 
 {{< example >}}
 <div class="card text-center">
-  <div class="card-header bg-body">
+  <div class="card-header text-body bg-body">
     <ul class="nav nav-pills card-header-pills">
       <li class="nav-item">
         <a class="nav-link active" href="#">Active</a>

diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md
@@ -395,8 +395,6 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
 
 {{< deprecated-in "5.3.3" >}}
 
-Opt into darker dropdowns to match a dark navbar or custom style by adding `.dropdown-menu-dark` onto an existing `.dropdown-menu`. No changes are required to the dropdown items.
-
 {{< callout-deprecated-dark-variants "dropdown-menu" >}}
 
 ## Directions

diff --git a/site/content/docs/5.3/components/footer.md b/site/content/docs/5.3/components/footer.md
@@ -11,7 +11,7 @@ added: "5.2"
 
 ## How it works
 
-Our footer is basically a `<footer>` tag with a `.bg-dark` class. It comes with 5 ready-to-use fully responsive bars which should be arranged vertically in the following order:
+Our footer is basically a `<footer>` tag with `.footer` and `.navbar` classes. It comes with 5 ready-to-use fully responsive bars which should be arranged vertically in the following order:
 - Title with content bar
 - Follow us bar
 - Navigation bar
@@ -39,7 +39,7 @@ This footer component is based on the [navbar component]({{< docsref "/component
 The `<h2></h2>` and `<h3></h3>` tags used in the following sections are informative, you **need** to adapt those to your website's title hierarchy.
 {{< /callout >}}
 
-The footer bars are independent from each other. Just add a dark separator between each bar of the final footer.
+The footer bars are independent from each other. Just add a separator between each bar of the final footer.
 
 ```html
 <div class="border-bottom border-1 border-dark"></div>
@@ -137,7 +137,7 @@ Please note that you should also add the `aria-current` attribute on the active
 
 As part of Boosted’s evolving CSS variables approach, footers use local CSS variables on every footer part for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
-{{< scss-docs name="footer-part-css-vars" file="scss/_footer.scss" >}}
+{{< scss-docs name="footer-css-vars" file="scss/_footer.scss" >}}
 
 Each bar redefines its own CSS variables.
 

diff --git a/site/content/docs/5.3/components/offcanvas.md b/site/content/docs/5.3/components/offcanvas.md
@@ -148,23 +148,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
 
 {{< deprecated-in "5.3.3" >}}
 
-Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` for proper styling with a dark offcanvas.
-
-{{< callout warning >}}
-**Heads up!** Dark variants for components were deprecated in v5.3.3 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
-{{< /callout >}}
-
-{{< example class="bd-example-offcanvas p-0 bg-body-tertiary overflow-hidden" stackblitz_add_js="true" >}}
-<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
-  <div class="offcanvas-header">
-    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
-    <button type="button" class="btn-close" data-bs-dismiss="offcanvasDark" aria-label="Close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"></button>
-  </div>
-  <div class="offcanvas-body">
-    <p>Place offcanvas content here.</p>
-  </div>
-</div>
-{{< /example >}}
+{{< callout-deprecated-dark-variants "offcanvas" >}}
 
 ## Responsive
 

diff --git a/site/content/docs/5.3/components/orange-navbar.md b/site/content/docs/5.3/components/orange-navbar.md
@@ -450,7 +450,7 @@ To easily integrate it in your project, you can start from our [Navbar mode sele
                 </button>
               </li>
               <li>
-                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="body" aria-pressed="true">
+                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
                   <svg class="me-2"><use href="#ui-auto-mode"></use></svg>
                   Auto
                   <svg class="ms-auto d-none"><use href="#check2"></use></svg>

diff --git a/site/content/docs/5.3/components/progress.md b/site/content/docs/5.3/components/progress.md
@@ -79,7 +79,7 @@ Add labels to your progress bars by placing text within the `.progress-bar`.
 
 {{< example >}}
 <div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
-  <div class="progress-bar" style="width: 25%">25%</div>
+  <div class="progress-bar text-dark" style="width: 25%">25%</div>
 </div>
 {{< /example >}}
 

diff --git a/site/content/docs/5.3/components/title-bars.md b/site/content/docs/5.3/components/title-bars.md
@@ -19,13 +19,13 @@ See them in action in our [examples page]({{<docsref "/examples/title-bars">}}).
 
 ## Background color
 
-To change the appearance of a title bar, use our [background utilities]({{<docsref "/utilities/background">}}). Orange branded background utilities are `.bg-dark`, `.bg-white` and `.bg-supporting-*`.
+To change the appearance of a title bar, use our [background utilities]({{<docsref "/utilities/background">}}) such as `.bg-supporting-*`.
 
-Title bars can be displayed with `.bg-black`, `.bg-dark`, `.bg-white` or with the default background color. When using `.bg-black`, `.bg-dark`, `.bg-white` or the default background color, illustrations can be included as an option, but it's not necessary.
+When using title bars with the default background color, illustrations can be included as an option, but it's not mandatory.
 
 Supporting colors can also be used as the background color for title bars, but not the supporting light and dark tint colors. When using one of the supporting colors, illustrations must be used.
 
-The image should not overlap on title and the title shouldn't wrap. If this happens, please transform your title bar into a title bar with `.bg-black`, `.bg-dark`, `.bg-white` or with the default background color without any image.
+The image should not overlap on title and the title shouldn't wrap. If this happens, please transform your title bar into a title bar with the default background color without any image.
 
 {{< example class="p-0">}}
 <div class="title-bar">
@@ -36,14 +36,6 @@ The image should not overlap on title and the title shouldn't wrap. If this happ
 
 <div class="mt-3"></div>
 
-<div class="bg-dark title-bar" data-bs-theme="dark">
-  <div class="container-xxl">
-    <h1 class="display-1">Title</h1>
-  </div>
-</div>
-
-<div class="mt-3"></div>
-
 <div class="bg-supporting-green title-bar" data-bs-theme="light">
   <div class="container-xxl">
     <h1 class="display-1">Title</h1>

diff --git a/site/content/docs/5.3/customize/color-theme.md b/site/content/docs/5.3/customize/color-theme.md
@@ -251,17 +251,17 @@ Some more contextual CSS variables are provided to create high-level semantic va
         <td>
           {{< markdown >}}Foreground.{{< /markdown >}}
         </td>
-        <td>
+        <td class="border-top-1">
           <div class="border-color">
             <div class="w-100 h-100" style="background-color: var(--bs-body-color);" data-bs-theme="light" title="#000"><p class="visually-hidden">#000</p></div>
           </div>
         </td>
-        <td>
+        <td class="border-top-1">
           <div class="border-color">
             <div class="w-100 h-100" style="background-color: var(--bs-body-color);" data-bs-theme="dark" title="#fff"><p class="visually-hidden">#fff</p></div>
           </div>
         </td>
-        <td>
+        <td class="border-top-1">
           <div>
             <button class="color-copy" data-clipboard-text="--bs-body-color" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-body-color</code></button>
             <button class="color-copy" data-clipboard-text="--bs-body-color-rgb" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-body-color-rgb</code></button>
@@ -296,17 +296,17 @@ Some more contextual CSS variables are provided to create high-level semantic va
         <td>
           {{< markdown >}}Foreground.{{< /markdown >}}
         </td>
-        <td>
+        <td class="border-top-1">
           <div class="border-color">
             <div class="w-100 h-100" style="background-color: var(--bs-secondary-color);" data-bs-theme="light" title="#666"><p class="visually-hidden">#666</p></div>
           </div>
         </td>
-        <td>
+        <td class="border-top-1">
           <div class="border-color">
             <div class="w-100 h-100" style="background-color: var(--bs-secondary-color);" data-bs-theme="dark" title="#999"><p class="visually-hidden">#999</p></div>
           </div>
         </td>
-        <td>
+        <td class="border-top-1">
           <div>
             <button class="color-copy" data-clipboard-text="--bs-secondary-color" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-secondary-color</code></button>
             <button class="color-copy" data-clipboard-text="--bs-secondary-color-rgb" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-secondary-color-rgb</code></button>
@@ -341,17 +341,17 @@ Some more contextual CSS variables are provided to create high-level semantic va
         <td>
           {{< markdown >}}Foreground.{{< /markdown >}}
         </td>
-        <td>
+        <td class="border-top-1">
           <div class="border-color">
             <div class="w-100 h-100" style="background-color: var(--bs-tertiary-color);" data-bs-theme="light" title="#ccc"><p class="visually-hidden">#ccc</p></div>
           </div>
         </td>
-        <td>
+        <td class="border-top-1">
           <div class="border-color">
             <div class="w-100 h-100" style="background-color: var(--bs-tertiary-color);" data-bs-theme="dark" title="#999"><p class="visually-hidden">#999</p></div>
           </div>
         </td>
-        <td>
+        <td class="border-top-1">
           <div>
             <button class="color-copy" data-clipboard-text="--bs-tertiary-color" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-tertiary-color</code></button>
             <button class="color-copy" data-clipboard-text="--bs-tertiary-color-rgb" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-tertiary-color-rgb</code></button>
@@ -406,17 +406,17 @@ Some more contextual CSS variables are provided to create high-level semantic va
         <td>
           {{< markdown >}}Subtle.{{< /markdown >}}
         </td>
-        <td>
+        <td class="border-top-1">
           <div class="border-color">
             <div class="w-100 h-100" style="background-color: var(--bs-border-color-subtle);" data-bs-theme="light" title="#ccc"><p class="visually-hidden">#ccc</p></div>
           </div>
         </td>
-        <td>
+        <td class="border-top-1">
           <div class="border-color">
             <div class="w-100 h-100" style="background-color: var(--bs-border-color-subtle);" data-bs-theme="dark" title="#666"><p class="visually-hidden">#666</p></div>
           </div>
         </td>
-        <td>
+        <td class="border-top-1">
           <div>
             <button class="color-copy" data-clipboard-text="--bs-border-color-subtle" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-border-color-subtle</code></button>
           </div>
@@ -469,17 +469,17 @@ Some more contextual CSS variables are provided to create high-level semantic va
         <td>
           {{< markdown >}}Foreground.{{< /markdown >}}
         </td>
-        <td>
+        <td class="border-top-1">
           <div class="border-color">
             <div class="w-100 h-100" style="background-color: var(--bs-highlight-color);" data-bs-theme="light" title="#fff"><p class="visually-hidden">#fff</p></div>
           </div>
         </td>
-        <td>
+        <td class="border-top-1">
           <div class="border-color">
             <div class="w-100 h-100" style="background-color: var(--bs-highlight-color);" data-bs-theme="dark" title="#000"><p class="visually-hidden">#000</p></div>
           </div>
         </td>
-        <td>
+        <td class="border-top-1">
           <div>
             <button class="color-copy" data-clipboard-text="--bs-highlight-color" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-highlight-color</code></button>
           </div>
@@ -535,17 +535,17 @@ Some more contextual CSS variables are provided to create high-level semantic va
         <td>
           {{< markdown >}}Inner.{{< /markdown >}}
         </td>
-        <td>
+        <td class="border-top-1">
           <div class="border-color">
             <div class="w-100 h-100" style="background-color: var(--bs-focus-visible-inner-color);" data-bs-theme="light" title="#fff"><p class="visually-hidden">#fff</p></div>
           </div>
         </td>
-        <td>
+        <td class="border-top-1">
           <div class="border-color">
             <div class="w-100 h-100" style="background-color: var(--bs-focus-visible-inner-color);" data-bs-theme="dark" title="#000"><p class="visually-hidden">#000</p></div>
           </div>
         </td>
-        <td>
+        <td class="border-top-1">
           <div>
             <button class="color-copy" data-clipboard-text="--bs-focus-visible-inner-color" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-focus-visible-inner-color</code></button>
           </div>

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -2083,7 +2083,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark dropdown variant for retro-compatibility</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-dark">
+<div class="d-flex gap-2 flex-wrap border p-3 bg-black">
   <div class="dropdown">
     <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
       Dropdown button

diff --git a/site/content/docs/5.3/examples/download-app/index.html b/site/content/docs/5.3/examples/download-app/index.html
@@ -72,7 +72,7 @@ <h1 class="two-lined">
                 </button>
               </li>
               <li>
-                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="body" aria-pressed="true">
+                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
                   <svg class="me-2"><use href="#ui-auto-mode"></use></svg>
                   Auto
                   <svg class="ms-auto d-none"><use href="#check2"></use></svg>
@@ -87,13 +87,13 @@ <h1 class="two-lined">
 </header>
 
 <main>
-  <div class="bg-dark mb-0 mb-md-2 border-dark border-bottom border-1 position-relative" data-bs-theme="dark">
+  <div class="bg-black mb-0 mb-md-2 border-dark border-bottom border-1 position-relative" data-bs-theme="dark">
     <div class="col-12 col-lg-7 out-of-grid h-100 end-0 overflow-hidden">
       <img loading="lazy" class="h-100 object-fit-cover" alt="" src="img/Banner_image.png">
     </div>
     <div class="container-xxl position-relative z-1">
       <div class="row">
-        <div class="col-12 col-lg-5 py-2 bg-dark">
+        <div class="col-12 col-lg-5 py-2 bg-black">
           <h2 class="pt-1 pt-md-3 mb-2 mb-md-3 display-2 text-primary">Implementing mobile designs into code</h2>
           <p class="pt-1 mb-2 display-2">A trusted source for developers</p>
           <p class="ll-sm pt-1 pt-md-3 mb-3 mb-md-4 fw-bold">From documentation, though repositories, to a showcase mobile application, the Orange Design System provides the elements for developers to implement experiences on mobile iOS and Android operating systems, by integrating brand foundations, design standards, societal and environmental commitments.</p>
@@ -229,7 +229,7 @@ <h2 class="h1 mb-4 mb-md-5 text-center">Do you want to start building your app?
     </div>
   </div>
 
-  <div class="bg-dark py-4 py-md-5 border-bottom border-1 border-dark" data-bs-theme="dark">
+  <div class="bg-black py-4 py-md-5 border-bottom border-1 border-dark" data-bs-theme="dark">
     <div class="container-xxl pt-md-2 pb-2">
       <h2 class="h1 mb-4 mb-md-5 text-primary text-center">What you get from the showcase app</h2>
       <div class="row">

diff --git a/site/content/docs/5.3/examples/form/index.html b/site/content/docs/5.3/examples/form/index.html
@@ -90,7 +90,7 @@ <h1 class="title">Travel</h1>
                 </button>
               </li>
               <li>
-                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="body" aria-pressed="true">
+                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
                   <svg class="me-2"><use href="#ui-auto-mode"></use></svg>
                   Auto
                   <svg class="ms-auto d-none"><use href="#check2"></use></svg>

diff --git a/site/content/docs/5.3/examples/navbar-mode-selector/index.html b/site/content/docs/5.3/examples/navbar-mode-selector/index.html
@@ -12,7 +12,7 @@
     {{< orange-supra mode="languages" aria_label="Supra navigation - Mode selector example" >}}
     {{< /orange-supra >}}
 
-    {{< orange-global-headers id="global-header-1" mode="theme" supra=true demo=true aria_label="Global navigation - Mode selector example">}}
+    {{< orange-global-headers id="global-header-1" mode="theme" supra=true aria_label="Global navigation - Mode selector example">}}
     {{< /orange-global-headers >}}
   </header>
   <div class="container-xxl pt-4">

diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
diff --git a/site/content/docs/5.3/utilities/borders.md b/site/content/docs/5.3/utilities/borders.md
@@ -190,10 +190,6 @@ These border variants with **a size CSS class different than `.rounded-0`** shou
 ## Dividers
 
 {{< example >}}
-<div class="bg-dark p-1">
-  <div class="border-top border-white my-3"></div>
-  <hr>
-</div>
 <div class="border-top border-light my-3"></div>
 <div class="border-top border-light border-1 my-3"></div>
 <div class="border-top border-dark my-3"></div>

diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
@@ -79,7 +79,7 @@ Here are some compliant combinations examples for texts:
   <p class="text-body-secondary fw-bold">bold secondary text</p>
 </div>
 
-<div class="bg-dark p-1" data-bs-theme="dark">
+<div class="p-1" data-bs-theme="dark">
   <p class="text-white">regular white text</p>
   <p class="text-primary">regular primary text</p>
   <p class="text-body-secondary">regular secondary text</p>
@@ -127,13 +127,13 @@ Consider our default `.text-primary` utility.
 ```css
 .text-primary {
   --bs-text-opacity: 1;
-  color: rgba(var(--bs-primary-text-rgb), var(--bs-text-opacity)) !important;
+  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
 }
 ```
 
-We use an RGB version of our `$primary` (with the value of `241, 110, 0`) Sass variable as a CSS variable and attached a second CSS variable, `--bs-text-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.text-primary` now, your computed `color` value is `rgba(241, 110, 0, 1)`. The local CSS variable inside each `.text-*` class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.
+We use an RGB version of our `--bs-primary` (with the value of `241, 110, 0` in light mode) CSS variable and attached a second CSS variable, `--bs-text-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.text-primary` now, your computed `color` value is `rgba(241, 110, 0, 1)` in light mode. The local CSS variable inside each `.text-*` class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.
 
-When used in dark mode, `--bs-primary-text-rgb` will use the value of `$supporting-orange` (with the value of `255, 121, 0`).
+When used in dark mode, `--bs-primary-rgb` will use the value of (with the value of `255, 121, 0`).
 
 ### Example
 

diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
@@ -5,7 +5,7 @@
         <a href="/docs/{{ .Site.Params.docs_version }}/migration" class="tag me-2">New in v5.3</a>
         <span class="text-body-secondary">Color mode support, expanded color palette, and more!</span>
       </p>
-      <div id="boosted" class="text-bg-dark d-flex align-items-end justify-content-center mx-auto my-3" role="presentation" data-bs-theme="dark">
+      <div id="boosted" class="bg-black d-flex align-items-end justify-content-center mx-auto my-3" role="presentation" data-bs-theme="dark">
         <span class="d-inline-flex mb-3 display-0">B<span class="text-primary bg-transparent">oo</span>sted</span>
       </div>
       <h1 class="mb-3 display-1">Orange B<span class="text-primary">oo</span>sted<br>with Bootstrap</h1>

diff --git a/site/layouts/partials/skippy.html b/site/layouts/partials/skippy.html
@@ -1,9 +1,9 @@
 <a id="top"></a><!-- Boosted mod: anchor for back-to-top link -->
 <div class="skippy visually-hidden-focusable overflow-hidden position-fixed top-0 end-0 start-0">
   <nav aria-label="Skip links" class="container-xxl py-1 ps-5">
-    <a class="d-inline-flex p-2 ms-3 bg-dark" href="#content">Skip to main content</a>
+    <a class="d-inline-flex p-2 ms-3 bg-black" href="#content">Skip to main content</a>
     {{ if (eq .Page.Layout "docs") -}}
-    <a class="d-none d-md-inline-flex p-2 bg-dark" href="#bd-docs-nav">Skip to docs navigation</a>
+    <a class="d-none d-md-inline-flex p-2 bg-black" href="#bd-docs-nav">Skip to docs navigation</a>
     {{- end }}
   </nav>
 </div>
diff --git a/site/layouts/shortcodes/orange-global-headers.html b/site/layouts/shortcodes/orange-global-headers.html
@@ -134,11 +134,11 @@ <h1 class="title">Title</h1>
         </li>
 {{- else if eq $mode "theme" }}
         <li class="nav-item dropdown">
-          <button class="nav-link nav-icon dropdown-toggle" id="bd-theme2" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle mode (auto)">
+          <button class="nav-link nav-icon dropdown-toggle" id="bd-theme{{ cond $demo "2" ""}}" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle mode (auto)">
             <svg class="theme-icon-active"><use href="#ui-auto-mode"></use></svg>
-            <span class="d-lg-none ms-2" id="bd-theme-text2">Toggle mode</span>
+            <span class="d-lg-none ms-2" id="bd-theme-text{{ cond $demo "2" ""}}">Toggle mode</span>
           </button>
-          <ul class="dropdown-menu dropdown-menu-end mb-2" aria-labelledby="bd-theme-text2">
+          <ul class="dropdown-menu dropdown-menu-end mb-2" aria-labelledby="bd-theme-text{{ cond $demo "2" ""}}">
             <li>
               <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
                 <svg class="me-2"><use href="#ui-light-mode"></use></svg>
@@ -154,7 +154,7 @@ <h1 class="title">Title</h1>
               </button>
             </li>
             <li>
-              <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="body" aria-pressed="true">
+              <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
                 <svg class="me-2"><use href="#ui-auto-mode"></use></svg>
                 Auto
                 <svg class="ms-auto d-none"><use href="#check2"></use></svg>

diff --git a/site/static/docs/5.3/assets/img/examples/cards-rtl.png b/site/static/docs/5.3/assets/img/examples/cards-rtl.png
diff --git a/site/static/docs/5.3/assets/img/examples/cards-rtl@2x.png b/site/static/docs/5.3/assets/img/examples/cards-rtl@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/cards.png b/site/static/docs/5.3/assets/img/examples/cards.png
diff --git a/site/static/docs/5.3/assets/img/examples/cards@2x.png b/site/static/docs/5.3/assets/img/examples/cards@2x.png
Original file line number	Diff line number	Diff line change
		@@ -205,5 +205,3 @@
		//

		// Boosted mod: no pagination sizes

		// End mod