Dark mode: migration guide (#2433)

Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>

.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",

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

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;

scss/_pagination.scss

@@ -205,5 +205,3 @@
 //
 
 // Boosted mod: no pagination sizes
-
-// End mod

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: "*";
     }
   }

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>

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>

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>

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

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.
 

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
 

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>

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 >}}
 

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>

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>

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