From 34273ef380d14e3c0f5dac439f46c36ad44fb293 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Mon, 11 Sep 2023 09:01:45 +0200
Subject: [PATCH 01/71] feat: dark mode

---
 .bundlewatch.config.json                      |    6 +-
 .storybook/main.js                            |    2 +-
 .storybook/preview.js                         |   15 +-
 js/tests/unit/quantity-selector.spec.js       |   36 +-
 js/tests/visual/dropdown.html                 |   20 +-
 js/tests/visual/modal.html                    |    6 +-
 js/tests/visual/scrollspy.html                |    2 +-
 package-lock.json                             |   23 +
 package.json                                  |    1 +
 scss/_accordion.scss                          |   13 -
 scss/_breadcrumb.scss                         |   17 +-
 scss/_buttons.scss                            |  107 +-
 scss/_close.scss                              |    6 +-
 scss/_dropdown.scss                           |    8 +-
 scss/_list-group.scss                         |   18 -
 scss/_local-navigation.scss                   |   12 -
 scss/_maps.scss                               |    7 +
 scss/_navbar.scss                             |    2 -
 scss/_pagination.scss                         |   22 -
 scss/_root.scss                               |   78 +-
 scss/_spinners.scss                           |    1 +
 scss/_stepped-process.scss                    |   13 +-
 scss/_sticker.scss                            |    6 +-
 scss/_tags.scss                               |   15 +-
 scss/_variables-dark.scss                     |   99 +-
 scss/_variables.scss                          |  256 +-
 scss/forms/_form-check.scss                   |    6 +-
 scss/forms/_form-control.scss                 |    6 +-
 scss/forms/_labels.scss                       |   29 +-
 scss/forms/_star-rating.scss                  |   10 +-
 scss/helpers/_color-bg.scss                   |   12 +
 scss/helpers/_colored-links.scss              |   18 +
 scss/mixins/_buttons.scss                     |   51 +-
 scss/tests/mixins/_color-modes.test.scss      |    4 +-
 site/assets/js/tac.js                         |    8 +-
 site/assets/scss/_colors.scss                 |    1 +
 site/assets/scss/_navbar.scss                 |   16 +
 site/assets/scss/_syntax.scss                 |   38 +-
 site/assets/scss/_tarteaucitron.scss          |    4 -
 site/content/docs/5.3/components/accordion.md |   57 +-
 site/content/docs/5.3/components/alerts.md    |    2 +-
 .../docs/5.3/components/back-to-top.md        |   10 +-
 .../content/docs/5.3/components/breadcrumb.md |   30 +-
 .../docs/5.3/components/button-group.md       |   82 +-
 site/content/docs/5.3/components/buttons.md   |  105 +-
 .../docs/5.3/components/close-button.md       |   48 +-
 site/content/docs/5.3/components/dropdowns.md |  121 +-
 .../content/docs/5.3/components/list-group.md |   56 +-
 .../docs/5.3/components/local-navigation.md   |   34 +-
 site/content/docs/5.3/components/modal.md     |   42 +-
 site/content/docs/5.3/components/navbar.md    |   91 +-
 site/content/docs/5.3/components/offcanvas.md |   10 +-
 .../docs/5.3/components/orange-navbar.md      |   18 +-
 .../content/docs/5.3/components/pagination.md |   34 +-
 site/content/docs/5.3/components/spinners.md  |   24 +-
 .../docs/5.3/components/stepped-process.md    |   39 +-
 site/content/docs/5.3/components/tags.md      |   29 +-
 site/content/docs/5.3/components/toasts.md    |    4 +-
 .../content/docs/5.3/customize/color-modes.md |    6 +
 site/content/docs/5.3/customize/color.md      |    5 +-
 .../docs/5.3/customize/css-variables.md       |    8 -
 site/content/docs/5.3/customize/sass.md       |   12 +-
 site/content/docs/5.3/dark-mode.md            | 2303 +++++++++++++++++
 .../docs/5.3/examples/download-app/index.html |    6 +-
 .../content/docs/5.3/examples/form/index.html |    6 +-
 site/content/docs/5.3/forms/checks-radios.md  |   27 +-
 site/content/docs/5.3/forms/input-group.md    |   32 +-
 .../docs/5.3/forms/quantity-selector.md       |   12 +-
 site/content/docs/5.3/forms/validation.md     |    4 +-
 site/content/docs/5.3/helpers/stacks.md       |    8 +-
 site/content/docs/5.3/migration.md            |    7 +-
 site/content/docs/5.3/utilities/background.md |   28 +-
 site/content/docs/5.3/utilities/colors.md     |   26 +-
 site/data/grays.yml                           |    2 +
 site/data/palette.yml                         |   30 +-
 site/data/sidebar.yml                         |   20 +-
 site/data/theme-colors.yml                    |    5 +-
 site/layouts/_default/docs.html               |    4 +-
 site/layouts/_default/examples.html           |   26 +-
 site/layouts/partials/docs-navbar.html        |   15 +-
 site/layouts/partials/docs-subnav.html        |    2 +-
 site/layouts/partials/docs-versions.html      |    2 +-
 site/layouts/partials/footer.html             |    6 +-
 site/layouts/partials/icons.html              |   15 +-
 .../callout-deprecated-dark-variants.html     |    9 +
 site/layouts/shortcodes/card.html             |    2 +-
 site/layouts/shortcodes/orange-footer.html    |   26 +-
 .../shortcodes/orange-global-headers.html     |    4 +-
 site/layouts/shortcodes/orange-supra.html     |    2 +-
 89 files changed, 3243 insertions(+), 1247 deletions(-)
 create mode 100644 site/content/docs/5.3/dark-mode.md
 create mode 100644 site/layouts/shortcodes/callout-deprecated-dark-variants.html

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index b464012415..947731de22 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -18,15 +18,15 @@
     },
     {
       "path": "./dist/css/boosted-utilities.css",
-      "maxSize": "12.5 kB"
+      "maxSize": "13.0 kB"
     },
     {
       "path": "./dist/css/boosted-utilities.min.css",
-      "maxSize": "11.75 kB"
+      "maxSize": "12.0 kB"
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "44.0 kB"
+      "maxSize": "44.25 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
diff --git a/.storybook/main.js b/.storybook/main.js
index d996b9814a..705989b1f2 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -6,7 +6,7 @@ const config = {
     options: {
       measure: false
     }
-  }, "@storybook/preset-scss"],
+  }, "@storybook/addon-themes", "@storybook/preset-scss"],
   "framework": "@storybook/html-webpack5",
   docs: {
     autodocs: true
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 747ba2873d..0a9d9d670c 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,4 +1,5 @@
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import './storybook.scss';
 import prettier from 'prettier/esm/standalone';
 import htmlParser from 'prettier/esm/parser-html';
@@ -21,7 +22,17 @@ export const preview = {
         // Pretty print the Docs code source
         return match ? prettier.format(match[1].trim(), {printWidth: 120, parser: "html", plugins: [htmlParser]}) : src;
       }
-    }
-  }
+    },
+  },
+  decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+      attributeName: 'data-bs-theme',
+    }),
+  ]
 }
 export default preview;
diff --git a/js/tests/unit/quantity-selector.spec.js b/js/tests/unit/quantity-selector.spec.js
index a1b5c1ae65..5403426e22 100644
--- a/js/tests/unit/quantity-selector.spec.js
+++ b/js/tests/unit/quantity-selector.spec.js
@@ -83,10 +83,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -104,10 +104,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -125,10 +125,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="9" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -152,10 +152,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -179,10 +179,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1.25" min="0" max="10" step="0.5" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -202,10 +202,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -227,10 +227,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="8.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -252,10 +252,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -280,10 +280,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="9.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index 7dcb33d54c..d782f47903 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -68,8 +68,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </div>
           </div>
           <div class="btn-group dropup">
-            <button type="button" class="btn btn-secondary">Dropup split</button>
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+            <button type="button" class="btn btn-outline-secondary">Dropup split</button>
+            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Dropup split</span>
             </button>
             <ul class="dropdown-menu">
@@ -104,8 +104,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
         <div class="col-sm-12 mt-4">
           <div class="btn-group dropup">
-            <a href="#" class="btn btn-secondary">Dropup split align end</a>
-            <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-outline-secondary">Dropup split align end</a>
+            <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu dropdown-menu-end">
@@ -126,8 +126,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
         <div class="col-sm-12 mt-4">
           <div class="btn-group dropend">
-            <a href="#" class="btn btn-secondary">Dropend split</a>
-            <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-outline-secondary">Dropend split</a>
+            <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu">
@@ -148,8 +148,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           </div>
           <!-- dropstart -->
           <div class="btn-group dropstart">
-            <a href="#" class="btn btn-secondary">Dropstart split</a>
-            <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-outline-secondary">Dropstart split</a>
+            <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu">
@@ -174,8 +174,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
       <div class="row">
         <div class="col-sm-3 mt-4">
           <div class="btn-group dropdown">
-            <button type="button" class="btn btn-secondary">Dropdown reference</button>
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
+            <button type="button" class="btn btn-outline-secondary">Dropdown reference</button>
+            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
               <span class="visually-hidden">Dropdown split</span>
             </button>
             <ul class="dropdown-menu">
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index 8fb28e99fb..5473a8c6ce 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -116,7 +116,7 @@ <h4>Overflowing text to show scroll behavior</h4>
               <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
               <button type="button" class="btn btn-primary">Save changes</button>
             </div>
           </div>
@@ -140,7 +140,7 @@ <h1 class="modal-title h4" id="firefoxModalLabel">Firefox Bug Test</h1>
               <p>Test result: <strong id="ff-bug-test-result"></strong></p>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
               <button type="button" class="btn btn-primary">Save changes</button>
             </div>
           </div>
@@ -158,7 +158,7 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>
               <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
               <button type="button" class="btn btn-primary">Save changes</button>
             </div>
           </div>
diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index f0d3ae59e9..e5b5559fe7 100644
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -10,7 +10,7 @@
     </style>
   </head>
   <body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">
-    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+    <nav class="navbar navbar-expand-md bg-dark fixed-top">
       <a class="navbar-brand" href="#">Scrollspy test</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
diff --git a/package-lock.json b/package-lock.json
index 9f702086a5..eeac57cb79 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@rollup/plugin-replace": "^5.0.5",
         "@storybook/addon-a11y": "^7.6.7",
         "@storybook/addon-essentials": "^7.6.7",
+        "@storybook/addon-themes": "^7.6.7",
         "@storybook/html": "^7.6.7",
         "@storybook/html-webpack5": "^7.6.7",
         "@storybook/preset-scss": "^1.0.3",
@@ -4601,6 +4602,19 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@storybook/addon-themes": {
+      "version": "7.6.7",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-7.6.7.tgz",
+      "integrity": "sha512-JoXYZxyPWNONbKVzBCFDUEW6bc4GFvyG9i8uJniTCf84pgj8H7Z6qDei8yJgAmQp1AeDdNsx2sYiFwQ45+OXlg==",
+      "dev": true,
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/addon-toolbars": {
       "version": "7.6.7",
       "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.6.7.tgz",
@@ -24427,6 +24441,15 @@
         "ts-dedent": "^2.0.0"
       }
     },
+    "@storybook/addon-themes": {
+      "version": "7.6.7",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-7.6.7.tgz",
+      "integrity": "sha512-JoXYZxyPWNONbKVzBCFDUEW6bc4GFvyG9i8uJniTCf84pgj8H7Z6qDei8yJgAmQp1AeDdNsx2sYiFwQ45+OXlg==",
+      "dev": true,
+      "requires": {
+        "ts-dedent": "^2.0.0"
+      }
+    },
     "@storybook/addon-toolbars": {
       "version": "7.6.7",
       "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.6.7.tgz",
diff --git a/package.json b/package.json
index a900413422..94966acfbc 100644
--- a/package.json
+++ b/package.json
@@ -115,6 +115,7 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@storybook/addon-a11y": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-themes": "^7.6.7",
     "@storybook/html": "^7.6.7",
     "@storybook/html-webpack5": "^7.6.7",
     "@storybook/preset-scss": "^1.0.3",
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index f33ed39e7d..5787e5ea2d 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -155,16 +155,3 @@
   --#{$prefix}accordion-btn-letter-spacing: #{$accordion-button-letter-spacing-lg};
   // scss-docs-end accordion-lg-css-vars
 }
-
-.accordion-dark {
-  // scss-docs-start accordion-dark-css-vars
-  --#{$prefix}accordion-btn-color: #{$accordion-dark-button-color};
-  --#{$prefix}accordion-btn-bg: #{$accordion-dark-button-bg};
-  --#{$prefix}accordion-btn-hover-bg: #{$accordion-dark-button-hover-bg};
-  --#{$prefix}accordion-active-color: #{$accordion-dark-button-active-color};
-  --#{$prefix}accordion-border-color: #{$accordion-dark-border-color};
-  --#{$prefix}accordion-color: #{$accordion-dark-color};
-  --#{$prefix}accordion-bg: #{$accordion-dark-bg};
-  // scss-docs-end accordion-dark-css-vars
-}
-// End mod
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index 7d1fe3cb91..6974b159a4 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -9,6 +9,7 @@
   --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
   --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
   --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
+  --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter}; // Boosted mod
   --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
   --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
   // scss-docs-end breadcrumb-css-vars
@@ -40,6 +41,7 @@
       /* rtl:raw:
       transform: scaleX(-1);
       */
+      filter: var(--#{$prefix}breadcrumb-divider-filter);
       // End mod
     }
   }
@@ -48,18 +50,3 @@
     color: var(--#{$prefix}breadcrumb-item-active-color);
   }
 }
-
-// Boosted mod
-.breadcrumb-dark {
-  // scss-docs-start breadcrumb-dark-css-vars
-  --#{$prefix}breadcrumb-color: #{$breadcrumb-dark-color}; // Boosted mod
-  --#{$prefix}breadcrumb-bg: #{$breadcrumb-dark-bg}; // Boosted mod
-  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-dark-divider-color}; // Boosted mod
-  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-dark-active-color}; // Boosted mod
-  // scss-docs-end breadcrumb-dark-css-vars
-
-  .breadcrumb-item::before {
-    filter: $invert-filter;
-  }
-}
-// End mod
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 7e08d0d2d0..70aff36f5b 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -16,6 +16,7 @@
   --#{$prefix}btn-border-width: #{$btn-border-width};
   --#{$prefix}btn-border-color: transparent;
   --#{$prefix}btn-border-radius: #{$btn-border-radius};
+  --#{$prefix}btn-hover-color: #{$btn-hover-color}; // Boosted mod
   --#{$prefix}btn-hover-border-color: initial; // Boosted mod
   --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
   --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
@@ -95,73 +96,61 @@
 // Alternate buttons
 //
 
-// Boosted mod: inconsistent theming ¯\_(ツ)_/¯
 // scss-docs-start btn-variant-loops
-.btn-primary,
+.btn-primary {
+  @include button-variant($primary, $primary, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}highlight-bg), $active-color: var(--#{$prefix}highlight-bg));
+}
+
+.btn-success {
+  @include button-variant($green, $green, $white);
+}
+
+.btn-danger {
+  @include button-variant($red, $red, $white);
+}
+
 .btn-warning {
-  @include button-variant($primary, $primary, $active-background: $white, $active-border: $black);
-  &.btn-inverse {
-    @include button-variant($primary, $primary, $black, $white, $white, $black, $black, $white, $white, $gray-700, $gray-700, $black, $black);
-  }
+  @include button-variant($yellow, $yellow, $black);
 }
 
-.btn-light,
-.btn-secondary {
-  @include button-variant($white, $black, $disabled-background: $white, $disabled-border: $gray-500, $disabled-color: $gray-500);
-  &.btn-inverse {
-    @include button-variant($black, $white, $white, $white, $white, $black, $primary, $primary, $black, transparent, $gray-700, $gray-700, $black);
-  }
+.btn-info {
+  @include button-variant($blue, $blue, $white);
 }
 
-.btn-success {
-  @include button-variant($success, $success);
-  &.btn-inverse {
-    @include button-variant($success, $success, $black,  $white, $white, $black, $primary, $primary, $black, $gray-700, $gray-700, $black, $black);
-  }
+.btn-light {
+  @include button-variant($light, $light, $black);
 }
 
-.btn-info,
 .btn-dark {
-  @include button-variant($black, $black, $white, $white, $black, $black);
-  &.btn-inverse {
-    @include button-variant($white, $white, $black, $black, $white, $white, $primary, $primary, $black, $gray-700, $gray-700, $black, $black);
-  }
+  @include button-variant($dark, $dark, $white, $hover-background: $white, $hover-border: var(--#{$prefix}highlight-bg), $hover-color: $black);
 }
 
-.btn-danger {
-  @include button-variant($danger, $danger);
-  &.btn-inverse {
-    @include button-variant($danger, $danger, $white, $white, $white, $black, $primary, $primary, $black, $gray-700, $gray-700, $black, $black);
-  }
+.btn-secondary {
+  @include button-variant(var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-color), $hover-background: var(--#{$prefix}highlight-color), $hover-border: var(--#{$prefix}highlight-bg), $hover-color: var(--#{$prefix}highlight-bg));
 }
-// scss-docs-end btn-variant-loops
-// End mod
 
-// Boosted mod: only secondary variant
-.btn-outline-secondary {
-  @include button-variant(transparent, $black, $black, $disabled-background: $white, $disabled-border: $gray-500, $disabled-color: $gray-500);
-  &.btn-inverse {
-    @include button-variant(transparent, $white, $white, $white, $white, $black, $primary, $primary, $black, transparent, $gray-700, $gray-700, $black);
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    $btn-outline-hover-color: $white;
+    @if index(("primary", "warning", "info", "light"), #{$color}) {
+      $btn-outline-hover-color: $black;
+    }
+    @if #{$color} == "secondary" {
+      @include button-outline-variant(var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-color));
+    } @else {
+      @include button-outline-variant($value, $btn-outline-hover-color);
+    }
   }
 }
-// End mod
+// scss-docs-end btn-variant-loops
 
 // Boosted mod: border-only on :hover and :active
 .btn-no-outline {
-  --#{$prefix}btn-hover-border-color: #{$gray-500};
-  --#{$prefix}btn-active-color: #{$accessible-orange};
-  --#{$prefix}btn-active-border-color: #{$gray-500};
-  --#{$prefix}btn-disabled-color: #{$gray-500};
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-color-translucent);
+  --#{$prefix}btn-active-color: var(--#{$prefix}link-hover-color);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}border-color-translucent);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}disabled-color);
   --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-border-color);
-
-  &.btn-inverse {
-    --#{$prefix}btn-color: #{$white};
-    --#{$prefix}btn-hover-color: #{$white};
-    --#{$prefix}btn-hover-border-color: #{$gray-700};
-    --#{$prefix}btn-active-color: #{$brand-orange};
-    --#{$prefix}btn-active-border-color: #{$gray-700};
-    --#{$prefix}btn-disabled-color: #{$gray-700};
-  }
 }
 // End mod
 
@@ -197,12 +186,6 @@
 
   // Boosted mod: no focus-visible color change
 
-  // Boosted mod: btn inverse
-  &.btn-inverse {
-    --#{$prefix}btn-disabled-color: #{$gray-700};
-  }
-  // End mod
-
   // No need for an active state here
 }
 
@@ -233,21 +216,13 @@
   --#{$prefix}btn-hover-color: #{$white};
   --#{$prefix}btn-hover-bg: var(--#{$prefix}network-color, #{$black});
   --#{$prefix}btn-hover-border-color: var(--#{$prefix}network-color, #{$black});
-  --#{$prefix}btn-active-color: #{$white};
-  --#{$prefix}btn-active-bg: #{$black};
-  --#{$prefix}btn-active-border-color: #{$black};
-  --#{$prefix}btn-disabled-color: #{$gray-500};
+  --#{$prefix}btn-active-color: var(--#{$prefix}highlight-color);
+  --#{$prefix}btn-active-bg: var(--#{$prefix}highlight-bg);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}highlight-bg);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}disabled-color);
   --#{$prefix}btn-disabled-bg: transparent;
   @include border-radius(50%, 50%);
   @include button-icon(var(--#{$prefix}network-logo));
-
-  &.btn-inverse {
-    --#{$prefix}btn-color: #{$white};
-    --#{$prefix}btn-active-color: #{$black};
-    --#{$prefix}btn-active-bg: #{$white};
-    --#{$prefix}btn-active-border-color: #{$white};
-    --#{$prefix}btn-disabled-color: #{$gray-700};
-  }
 }
 
 @each $name in map-keys($btn-social-networks) {
diff --git a/scss/_close.scss b/scss/_close.scss
index a80ae6f06a..d732d85dc0 100644
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -60,11 +60,8 @@
   }
 }
 
-// Boosted mod:
-// - no dark mode management so we keep our .btn-close-white
-// - changing color instead of using filter
+// Boosted mod: changing color instead of using filter
 .btn-close-white {
-  // scss-docs-start btn-close-white-css-vars
   --#{$prefix}btn-close-color: #{$btn-close-white-color}; // Boosted mod
   --#{$prefix}btn-close-bg: #{$btn-close-white-bg}; // Boosted mod
   --#{$prefix}btn-close-border-color: #{$btn-close-white-border-color}; // Boosted mod
@@ -72,6 +69,5 @@
   --#{$prefix}btn-close-active-color: #{$btn-close-white-active-color}; // Boosted mod
   --#{$prefix}btn-close-active-border-color: #{$btn-close-white-active-border-color}; // Boosted mod
   --#{$prefix}btn-close-disabled-color: #{$btn-close-white-disabled-color}; // Boosted mod
-  // scss-docs-end btn-close-white-css-vars
 }
 // End mod
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 0319460808..6a7bce24da 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -18,11 +18,7 @@
   // Boosted mod
   // TODO: should probably be a `.btn-*` class
   &:not(.dropdown-toggle-split) {
-    @include button-variant($dropdown-bg, $dropdown-border-color, $dropdown-color, $white, $dropdown-border-color, $black, $white, $black, $black, $dropdown-bg, $gray-500, $gray-500);
-
-    &.btn-inverse {
-      @include button-variant($black, $gray-700, $white, $black, $gray-700, $white, $black, $white, $white, transparent, $gray-700, $gray-700);
-    }
+    @include button-variant($dropdown-bg, $dropdown-border-color, $dropdown-color, $dropdown-bg, $dropdown-border-color, $dropdown-color, $dropdown-bg, $dropdown-color, $dropdown-color, $dropdown-bg, var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-color));
   }
   // End mod
 }
@@ -256,7 +252,6 @@
 
 // Dark dropdowns
 .dropdown-menu-dark {
-  // scss-docs-start dropdown-dark-css-vars
   --#{$prefix}dropdown-color: #{$dropdown-dark-color};
   --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
   --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
@@ -269,5 +264,4 @@
   --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
   --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
   --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
-  // scss-docs-end dropdown-dark-css-vars
 }
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index a4b7b4f611..1ef7858d9e 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -257,24 +257,6 @@
 }
 // scss-docs-end list-group-modifiers
 
-.list-group-dark {
-  // scss-docs-start list-group-dark-css-vars
-  --#{$prefix}list-group-color: #{$list-group-dark-color}; // Boosted mod
-  --#{$prefix}list-group-bg: #{$list-group-dark-bg}; // Boosted mod
-  --#{$prefix}list-group-border-color: #{$list-group-dark-border-color}; // Boosted mod
-  --#{$prefix}list-group-action-color: #{$list-group-dark-action-color}; // Boosted mod
-  --#{$prefix}list-group-action-hover-color: #{$list-group-dark-action-hover-color}; // Boosted mod
-  --#{$prefix}list-group-action-active-color: #{$list-group-dark-action-active-color}; // Boosted mod
-  --#{$prefix}list-group-action-hover-bg: #{$list-group-dark-hover-bg}; // Boosted mod
-  --#{$prefix}list-group-action-active-bg: #{$list-group-dark-action-active-bg}; // Boosted mod
-  --#{$prefix}list-group-disabled-color: #{$list-group-dark-disabled-color}; // Boosted mod
-  --#{$prefix}list-group-disabled-bg: #{$list-group-dark-disabled-bg}; // Boosted mod
-  --#{$prefix}list-group-active-color: #{$list-group-dark-active-color}; // Boosted mod
-  --#{$prefix}list-group-active-bg: #{$list-group-dark-active-bg}; // Boosted mod
-  --#{$prefix}list-group-active-border-color: #{$list-group-dark-active-border-color}; // Boosted mod
-  // scss-docs-end list-group-dark-css-vars
-}
-
 .card .list-group {
   --#{$prefix}list-group-item-padding-x: #{var(--#{$prefix}card-spacer-x)};
 }
diff --git a/scss/_local-navigation.scss b/scss/_local-navigation.scss
index 9acd8b49e1..5ee8f9baee 100644
--- a/scss/_local-navigation.scss
+++ b/scss/_local-navigation.scss
@@ -117,15 +117,3 @@
     }
   }
 }
-
-.local-nav-dark {
-  // scss-docs-start local-nav-dark-css-vars
-  --#{$prefix}local-nav-color: #{$local-nav-dark-color};
-  --#{$prefix}local-nav-bg: #{$local-nav-dark-bg};
-  --#{$prefix}local-nav-hover-color: #{$local-nav-dark-hover-color};
-  --#{$prefix}local-nav-hover-bg: #{$local-nav-dark-hover-bg};
-  --#{$prefix}local-nav-active-color: #{$local-nav-dark-active-color};
-  --#{$prefix}local-nav-active-bg: #{$local-nav-dark-active-bg};
-  --#{$prefix}local-nav-border-color: #{$local-nav-dark-border-color};
-  // scss-docs-end local-nav-dark-css-vars
-}
diff --git a/scss/_maps.scss b/scss/_maps.scss
index 0db510c299..ef322d15a5 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -45,11 +45,18 @@ $theme-colors-border-subtle: (
 ) !default;
 // scss-docs-end theme-border-subtle-map
 
+$theme-colors-rgb-dark: null !default;
 $theme-colors-text-dark: null !default;
 $theme-colors-bg-subtle-dark: null !default;
 $theme-colors-border-subtle-dark: null !default;
 
 @if $enable-dark-mode {
+  // Boosted mod
+  // scss-docs-start theme-colors-rgb-dark
+  $theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value") !default;
+  // scss-docs-end theme-colors-rgb-dark
+  // End mod
+
   // scss-docs-start theme-text-dark-map
   $theme-colors-text-dark: (
     "primary": $primary-text-emphasis-dark,
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 542060574f..2858cf63c8 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -511,7 +511,6 @@
 
 .navbar-dark,
 .navbar[data-bs-theme="dark"] {
-  // scss-docs-start navbar-dark-css-vars
   --#{$prefix}navbar-border-color: #{$navbar-dark-border-color}; // Boosted mod
   --#{$prefix}navbar-color: #{$navbar-dark-color};
   --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
@@ -522,7 +521,6 @@
   --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
   // Boosted mod: No --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; since we handle the variant with filter
   --#{$prefix}navbar-toggler-icon-filter: #{$invert-filter}; // Boosted mod
-  // scss-docs-end navbar-dark-css-vars
 }
 
 // Boosted mod: no `@if enable-dark-mode` since Boosted doesn't have any dark mode for now
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 162d068ce5..e15322c14b 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -211,26 +211,4 @@
 
 // Boosted mod: no pagination sizes
 
-// Boosted mod: dark variant
-.pagination-dark {
-  // scss-docs-start pagination-dark-css-vars
-  --#{$prefix}pagination-color: #{$pagination-dark-color}; // Boosted mod
-  --#{$prefix}pagination-bg: #{$pagination-dark-bg}; // Boosted mod
-  --#{$prefix}pagination-border-color: #{$pagination-dark-border-color}; // Boosted mod
-  --#{$prefix}pagination-hover-color: #{$pagination-dark-hover-color}; // Boosted mod
-  --#{$prefix}pagination-hover-bg: #{$pagination-dark-hover-bg}; // Boosted mod
-  --#{$prefix}pagination-hover-border-color: #{$pagination-dark-hover-border-color}; // Boosted mod
-  --#{$prefix}pagination-focus-color: #{$pagination-dark-focus-color}; // Boosted mod
-  --#{$prefix}pagination-focus-bg: #{$pagination-dark-focus-bg}; // Boosted mod
-  --#{$prefix}pagination-active-color: #{$pagination-dark-active-color}; // Boosted mod
-  --#{$prefix}pagination-active-bg: #{$pagination-dark-active-bg}; // Boosted mod
-  --#{$prefix}pagination-active-border-color: #{$pagination-dark-active-border-color}; // Boosted mod
-  --#{$prefix}pagination-active-item-color: #{$pagination-dark-active-item-color}; // Boosted mod
-  --#{$prefix}pagination-active-item-bg: #{$pagination-dark-active-item-bg}; // Boosted mod
-  --#{$prefix}pagination-active-item-border-color: #{$pagination-dark-active-item-border-color}; // Boosted mod
-  --#{$prefix}pagination-disabled-color: #{$pagination-dark-disabled-color}; // Boosted mod
-  --#{$prefix}pagination-disabled-bg: #{$pagination-dark-disabled-bg}; // Boosted mod
-  --#{$prefix}pagination-disabled-border-color: #{$pagination-dark-disabled-border-color}; // Boosted mod
-  // scss-docs-end pagination-dark-css-vars
-}
 // End mod
diff --git a/scss/_root.scss b/scss/_root.scss
index b865d662c4..40a2883d1f 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -137,52 +137,18 @@
   --#{$prefix}form-invalid-color: #{$form-invalid-color};
   --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
   // scss-docs-end root-form-validation-variables
-}
 
-// scss-docs-start root-dark-rule
-// Boosted mod
-[class*="bg-black"],
-[class*="-dark"]:not(.border-dark):not(.text-dark):not(.btn-dark):not(.focus-ring-dark):not(.link-underline-dark):not(.link-dark),
-[class*="bg-secondary"] {
-  --#{$prefix}primary-text-rgb: #{to-rgb($brand-orange)};
-  --#{$prefix}link-color: #{$link-color-inverted};
-  --#{$prefix}link-hover-color: #{$link-hover-color-inverted};
-  --#{$prefix}link-color-rgb: #{to-rgb($link-color-inverted)};
-  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-inverted)};
-  --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color-inverted};
-  --#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color-inverted};
-  --#{$prefix}caption-color: #{$table-caption-color-inverted};
-  --#{$prefix}code-color: #{$code-color-inverted};
-  --#{$prefix}highlight-color: #{$mark-color-inverted};
-  --#{$prefix}highlight-bg: #{$mark-bg-inverted};
-  --#{$prefix}kbd-color: #{$kbd-color-inverted};
-  --#{$prefix}kbd-bg: #{$kbd-bg-inverted};
-  --#{$prefix}pre-color: #{$pre-color-inverted};
-  --#{$prefix}body-color: #{$body-color-dark};
-  --#{$prefix}heading-color: #{$headings-color-dark};
-
-  // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
-  [class*="bg-"]:not(&):not(.bg-transparent) {
-    --#{$prefix}primary-text-rgb: #{to-rgb($accessible-orange)};
-    --#{$prefix}link-color: #{$link-color};
-    --#{$prefix}link-hover-color: #{$link-hover-color};
-    --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
-    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
-    --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color};
-    --#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color};
-    --#{$prefix}caption-color: #{$table-caption-color};
-    --#{$prefix}code-color: #{$code-color};
-    --#{$prefix}highlight-color: #{$mark-color};
-    --#{$prefix}highlight-bg: #{$mark-bg};
-    --#{$prefix}kbd-color: #{$kbd-color};
-    --#{$prefix}kbd-bg: #{$kbd-bg};
-    --#{$prefix}pre-color: #{$pre-color};
-    --#{$prefix}body-color: #{$body-color};
-    --#{$prefix}heading-color: #{$headings-color};
-  }
+  // ******* Additions for dark-mode
+  --#{$prefix}hover-color: #{$body-color};
+  --#{$prefix}active-bg: #{$gray-400};
+  --#{$prefix}disabled-color: #{$gray-500};
+  --#{$prefix}disabled-filter: #{$disabled-filter};
+  --#{$prefix}placeholder-color: #{$gray-700};
+  --#{$prefix}gray-tweak: #{$gray-900};
+  --#{$prefix}input-filter: #{$invert-filter};
+  --#{$prefix}icon-filter: none;
+  // ******* End additions for dark-mode
 }
-// End mod
-// scss-docs-end root-dark-rule
 
 @if $enable-dark-mode {
   @include color-mode(dark, true) {
@@ -207,6 +173,16 @@
     --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
     --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
 
+    // Boosted mod
+    @each $color, $value in $theme-colors-dark {
+      --#{$prefix}#{$color}: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-rgb-dark {
+      --#{$prefix}#{$color}-rgb: #{$value};
+    }
+    // End mod
+
     @each $color, $value in $theme-colors-text-dark {
       --#{$prefix}#{$color}-text-emphasis: #{$value};
     }
@@ -233,10 +209,24 @@
     --#{$prefix}border-color: #{$border-color-dark};
     --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
 
+    --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color-dark}; // Boosted mod
+    --#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color-dark}; // Boosted mod
+
     --#{$prefix}form-valid-color: #{$form-valid-color-dark};
     --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
     --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
     --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
+
+    // ******* Additions for dark-mode
+    --#{$prefix}hover-color: #{$brand-orange};
+    --#{$prefix}active-bg: #{$gray-700};
+    --#{$prefix}disabled-color: #{$gray-700};
+    --#{$prefix}disabled-filter: #{$disabled-filter-dark};
+    --#{$prefix}placeholder-color: #{$gray-600};
+    --#{$prefix}gray-tweak: #{$gray-700};
+    --#{$prefix}input-filter: none;
+    --#{$prefix}icon-filter: #{$invert-filter};
+    // ******* End additions for dark-mode
     // scss-docs-end root-dark-mode-vars
   }
 }
diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index 3784d8fe70..d4b4641b5c 100644
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -7,6 +7,7 @@
   display: inline-block;
   width: var(--#{$prefix}spinner-width);
   height: var(--#{$prefix}spinner-height);
+  color: #{$spinner-color}; // Boosted mod
   vertical-align: var(--#{$prefix}spinner-vertical-align);
   // stylelint-disable-next-line property-disallowed-list
   border-radius: 50%;
diff --git a/scss/_stepped-process.scss b/scss/_stepped-process.scss
index 54d70ea5b7..7ca186c62a 100644
--- a/scss/_stepped-process.scss
+++ b/scss/_stepped-process.scss
@@ -7,6 +7,7 @@
   --#{$prefix}stepped-process-font-size: #{$stepped-process-font-size};
   --#{$prefix}stepped-process-font-weight: #{$stepped-process-font-weight};
   --#{$prefix}stepped-process-counter: #{$stepped-process-counter};
+  --#{$prefix}stepped-process-bg: #{$stepped-process-bg};
   --#{$prefix}stepped-process-item-padding-y: #{$step-item-padding};
   --#{$prefix}stepped-process-item-padding-x: 0;
   --#{$prefix}stepped-process-item-margin-end: #{$step-item-margin-end};
@@ -143,15 +144,3 @@
     flex: $stepped-process-max-items - 1;
   }
 }
-
-.stepped-process-dark {
-  // scss-docs-start stepped-process-dark-css-vars
-  --#{$prefix}stepped-process-item-bg: #{$step-item-dark-bg};
-  --#{$prefix}stepped-process-item-active-bg: #{$step-item-dark-active-bg};
-  --#{$prefix}stepped-process-item-next-bg: #{$step-item-dark-next-bg};
-  --#{$prefix}stepped-process-item-drop-shadow: #{$step-item-dark-drop-shadow};
-  --#{$prefix}stepped-process-link-color: #{$step-link-dark-color};
-  --#{$prefix}stepped-process-link-active-color: #{$step-link-dark-active-color};
-  --#{$prefix}stepped-process-link-next-color: #{$step-link-dark-next-color};
-  // scss-docs-end stepped-process-dark-css-vars
-}
diff --git a/scss/_sticker.scss b/scss/_sticker.scss
index 704c34bf1a..8bb9e66de1 100644
--- a/scss/_sticker.scss
+++ b/scss/_sticker.scss
@@ -1,8 +1,9 @@
 .sticker {
   // scss-docs-start sticker-css-vars
   --#{$prefix}sticker-size: #{$sticker-size-md};
-  --#{$prefix}sticker-font-weight: #{$font-weight-bold};
-  --#{$prefix}sticker-background-color: #{$brand-orange};
+  --#{$prefix}sticker-font-weight: #{$sticker-font-weight};
+  --#{$prefix}sticker-color: #{$sticker-color};
+  --#{$prefix}sticker-background-color: #{$sticker-background-color};
   --#{$prefix}sticker-content-max-width: #{$sticker-content-max-width-md};
   // scss-docs-end sticker-css-vars
 
@@ -13,6 +14,7 @@
   width: var(--#{$prefix}sticker-size);
   height: var(--#{$prefix}sticker-size);
   font-weight: var(--#{$prefix}sticker-font-weight);
+  color: var(--#{$prefix}sticker-color);
   text-align: center;
   word-wrap: break-word;
   background-color: var(--#{$prefix}sticker-background-color);
diff --git a/scss/_tags.scss b/scss/_tags.scss
index 090fa7019f..642c740274 100644
--- a/scss/_tags.scss
+++ b/scss/_tags.scss
@@ -2,6 +2,8 @@
 
 .tag {
   // scss-docs-start tag-css-vars
+  --#{$prefix}tag-color: #{$tag-color};
+  --#{$prefix}tag-bg: #{$tag-bg};
   --#{$prefix}tag-gap: #{$tag-gap};
   --#{$prefix}tag-padding-x: #{$tag-padding-x};
   --#{$prefix}tag-padding-y: #{$tag-padding-y};
@@ -28,8 +30,8 @@
   @include font-size(var(--#{$prefix}tag-font-size));
   font-weight: var(--#{$prefix}tag-font-weight);
   line-height: add(var(--#{$prefix}tag-font-size), .125rem);
-  color: var(--#{$prefix}body-color);
-  background-color: transparent;
+  color: var(--#{$prefix}tag-color);
+  background-color: var(--#{$prefix}tag-bg);
   border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color);
   @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius));
 
@@ -129,12 +131,3 @@ label.tag {
   --#{$prefix}tag-close-margin-start: #{$tag-close-margin-start-sm};
   // scss-docs-end tag-sm-css-vars
 }
-
-.tag-dark {
-  // scss-docs-start tag-dark-css-vars
-  --#{$prefix}tag-border-color: #{$tag-border-color-dark};
-  --#{$prefix}tag-active-color: #{$tag-active-color-dark};
-  --#{$prefix}tag-active-decoration-color: #{$tag-active-decoration-color-dark};
-  --#{$prefix}tag-disabled-color: #{$tag-disabled-color-dark};
-  // scss-docs-end tag-dark-css-vars
-}
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index c86e29bfa3..22a7eeea31 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -6,46 +6,79 @@
 // Global colors
 //
 
+// Boosted mod
+// scss-docs-start brand-colors-dark
+$functional-green-dark:  #32c832 !default;
+$functional-blue-dark:   #527edb !default;
+$functional-yellow-dark: $functional-yellow !default;
+$functional-red-dark:    #d53f15 !default;
+// scss-docs-end brand-colors-dark
+
 // scss-docs-start sass-dark-mode-vars
+// scss-docs-start theme-color-dark-variables
+$primary-dark:                      $orange !default;
+$secondary-dark:                    $black !default;
+$success-dark:                      $functional-green-dark !default;
+$info-dark:                         $functional-blue-dark !default;
+$warning-dark:                      $functional-yellow-dark !default;
+$danger-dark:                       $functional-red-dark !default;
+$light-dark:                        $gray-500 !default;
+$dark-dark:                         $black !default;
+// scss-docs-end theme-color-dark-variables
+
+// scss-docs-start theme-colors-dark-map
+$theme-colors-dark: (
+  "primary": $primary-dark,
+  "secondary": $secondary-dark,
+  "success": $success-dark,
+  "info": $info-dark,
+  "warning": $warning-dark,
+  "danger": $danger-dark,
+  "light": $light-dark,
+  "dark": $dark-dark,
+) !default;
+// scss-docs-end theme-colors-dark-map
+// End mod
+
 // scss-docs-start theme-text-dark-variables
-$primary-text-emphasis-dark:        $primary !default; // Boosted mod: isntead of `tint-color($primary, 40%)`
-$secondary-text-emphasis-dark:      $secondary !default; // Boosted mod: instead of `tint-color($secondary, 40%)`
-$success-text-emphasis-dark:        $success !default; // Boosted mod: instead of `tint-color($success, 40%)`
-$info-text-emphasis-dark:           $info !default; // Boosted mod: instead of `tint-color($info, 40%)`
-$warning-text-emphasis-dark:        $warning !default; // Boosted mod: instead of `tint-color($warning, 40%)`
-$danger-text-emphasis-dark:         $danger !default; // Boosted mod: instead of `tint-color($danger, 40%)`
-$light-text-emphasis-dark:          $light !default; // Boosted mod: instead of `$gray-100`
-$dark-text-emphasis-dark:           $dark !default; // Boosted mod: instead of `$gray-300`
+$primary-text-emphasis-dark:        $primary-dark !default; // Boosted mod: isntead of `tint-color($primary, 40%)`
+$secondary-text-emphasis-dark:      $secondary-dark !default; // Boosted mod: instead of `tint-color($secondary, 40%)`
+$success-text-emphasis-dark:        $success-dark !default; // Boosted mod: instead of `tint-color($success, 40%)`
+$info-text-emphasis-dark:           $info-dark !default; // Boosted mod: instead of `tint-color($info, 40%)`
+$warning-text-emphasis-dark:        $warning-dark !default; // Boosted mod: instead of `tint-color($warning, 40%)`
+$danger-text-emphasis-dark:         $danger-dark !default; // Boosted mod: instead of `tint-color($danger, 40%)`
+$light-text-emphasis-dark:          $light-dark !default; // Boosted mod: instead of `$gray-100`
+$dark-text-emphasis-dark:           $dark-dark !default; // Boosted mod: instead of `$gray-300`
 // scss-docs-end theme-text-dark-variables
 
 // scss-docs-start theme-bg-subtle-dark-variables
-$primary-bg-subtle-dark:            $primary !default; // Boosted mod: instead of `shade-color($primary, 80%)`
-$secondary-bg-subtle-dark:          $secondary !default; // Boosted mod: instead of `shade-color($secondary, 80%)`
-$success-bg-subtle-dark:            $success !default; // Boosted mod: instead of `shade-color($success, 80%)`
-$info-bg-subtle-dark:               $info !default; // Boosted mod: instead of `shade-color($info, 80%)`
-$warning-bg-subtle-dark:            $warning !default; // Boosted mod: instead of `shade-color($warning, 80%)`
-$danger-bg-subtle-dark:             $danger !default; // Boosted mod: instead of `shade-color($danger, 80%)`
-$light-bg-subtle-dark:              $light !default; // Boosted mod: instead of `$gray-800`
-$dark-bg-subtle-dark:               $dark !default; // Boosted mod: instead of `mix($gray-800, $black)`
+$primary-bg-subtle-dark:            $primary-dark !default; // Boosted mod: instead of `shade-color($primary, 80%)`
+$secondary-bg-subtle-dark:          $secondary-dark !default; // Boosted mod: instead of `shade-color($secondary, 80%)`
+$success-bg-subtle-dark:            $success-dark !default; // Boosted mod: instead of `shade-color($success, 80%)`
+$info-bg-subtle-dark:               $info-dark !default; // Boosted mod: instead of `shade-color($info, 80%)`
+$warning-bg-subtle-dark:            $warning-dark !default; // Boosted mod: instead of `shade-color($warning, 80%)`
+$danger-bg-subtle-dark:             $danger-dark !default; // Boosted mod: instead of `shade-color($danger, 80%)`
+$light-bg-subtle-dark:              $light-dark !default; // Boosted mod: instead of `$gray-800`
+$dark-bg-subtle-dark:               $dark-dark !default; // Boosted mod: instead of `mix($gray-800, $black)`
 // scss-docs-end theme-bg-subtle-dark-variables
 
 // scss-docs-start theme-border-subtle-dark-variables
-$primary-border-subtle-dark:        $primary !default; // Boosted mod: instead of `shade-color($primary, 40%)`
-$secondary-border-subtle-dark:      $secondary !default; // Boosted mod: instead of `shade-color($secondary, 40%)`
-$success-border-subtle-dark:        $success !default; // Boosted mod: instead of `shade-color($success, 40%)`
-$info-border-subtle-dark:           $info !default; // Boosted mod: instead of `shade-color($info, 40%)`
-$warning-border-subtle-dark:        $warning !default; // Boosted mod: instead of `shade-color($warning, 40%)`
-$danger-border-subtle-dark:         $danger !default; // Boosted mod: instead of `shade-color($danger, 40%)`
-$light-border-subtle-dark:          $light !default; // Boosted mod: instead of `$gray-700`
-$dark-border-subtle-dark:           $dark !default; // Boosted mod: instead of `$gray-800`
+$primary-border-subtle-dark:        $primary-dark !default; // Boosted mod: instead of `shade-color($primary, 40%)`
+$secondary-border-subtle-dark:      $secondary-dark !default; // Boosted mod: instead of `shade-color($secondary, 40%)`
+$success-border-subtle-dark:        $success-dark !default; // Boosted mod: instead of `shade-color($success, 40%)`
+$info-border-subtle-dark:           $info-dark !default; // Boosted mod: instead of `shade-color($info, 40%)`
+$warning-border-subtle-dark:        $warning-dark !default; // Boosted mod: instead of `shade-color($warning, 40%)`
+$danger-border-subtle-dark:         $danger-dark !default; // Boosted mod: instead of `shade-color($danger, 40%)`
+$light-border-subtle-dark:          $light-dark !default; // Boosted mod: instead of `$gray-700`
+$dark-border-subtle-dark:           $dark-dark !default; // Boosted mod: instead of `$gray-800`
 // scss-docs-end theme-border-subtle-dark-variables
 
 $body-color-dark:                   $white !default; // Boosted mod: instead of `$gray-300`
-$body-bg-dark:                      $black !default; // Boosted mod: instead of `$gray-900`
-$body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
-$body-secondary-bg-dark:            $gray-800 !default;
-$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
-$body-tertiary-bg-dark:             #414141 !default; // Boosted mod: instead of `mix($gray-800, $gray-900, 50%)`
+$body-bg-dark:                      $gray-950 !default; // Boosted mod: instead of `$gray-900`
+$body-secondary-color-dark:         $gray-500 !default; // Boosted mod: instead of `rgba($body-color-dark, .75)`
+$body-secondary-bg-dark:            $gray-900 !default; // Boosted mod: instead of `$gray-800`
+$body-tertiary-color-dark:          $gray-600 !default; // Boosted mod: instead of `rgba($body-color-dark, .5)`
+$body-tertiary-bg-dark:             $black !default; // Boosted mod: instead of `mix($gray-800, $gray-900, 50%)`
 $body-emphasis-color-dark:          $white !default; // Boosted mod: instead of `$gray-100`
 $border-color-dark:                 $gray-700 !default;
 $border-color-translucent-dark:     $gray-700 !default; // Boosted mod instead of `rgba($white, .15)`
@@ -53,9 +86,13 @@ $headings-color-dark:               $white !default; // Boosted mod: instead of
 $link-color-dark:                   $white !default; // Boosted mod: instead of `tint-color($primary, 40%)`
 $link-hover-color-dark:             $primary !default; // Boosted mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)`
 $code-color-dark:                   tint-color($code-color, 40%) !default;
-$mark-color-dark:                   $body-color-dark !default;
-$mark-bg-dark:                      $yellow-800 !default;
+$mark-color-dark:                   $black !default; // Boosted mod: instead of `$body-color-dark`
+$mark-bg-dark:                      $white !default; // Boosted mod: instead of `$yellow-800`
+
+$disabled-filter-dark:  brightness(0) invert(1) brightness(.4) !default; // Boosted mod
 
+$focus-visible-inner-color-dark:    $black !default; // Boosted mod
+$focus-visible-outer-color-dark:    $white !default; // Boosted mod
 
 //
 // Forms
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 553a33d482..60e18672d5 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -16,6 +16,7 @@ $gray-600: #999 !default;
 $gray-700: #666 !default;
 $gray-800: #595959 !default;
 $gray-900: #333 !default;
+$gray-950: #141414 !default;
 $black:    #000 !default;
 // scss-docs-end gray-color-variables
 
@@ -30,19 +31,20 @@ $grays: (
   "600": $gray-600,
   "700": $gray-700,
   "800": $gray-800,
-  "900": $gray-900
+  "900": $gray-900,
+  "950": $gray-950,
 ) !default;
 // scss-docs-end gray-colors-map
 // fusv-enable
 
-// scss-docs-start brand-colors
 // Boosted mod
+// scss-docs-start brand-colors
 //// Core colors
 $accessible-orange: #f16e00 !default;
 $brand-orange:      #ff7900 !default;
 //// Functional colors
-$functional-green:  #32c832 !default;
-$functional-blue:   #527edb !default;
+$functional-green:  #228722 !default;
+$functional-blue:   #4170d8 !default;
 $functional-yellow: #fc0 !default;
 $functional-red:    #cd3c14 !default;
 //// Supporting colors
@@ -417,6 +419,8 @@ $svg-as-custom-props: (
 // see https://codepen.io/sosuke/pen/Pjoqqp
 $invert-filter:         invert(1) !default;
 $orange-filter:         invert(46%) sepia(60%) saturate(2878%) hue-rotate(6deg) brightness(98%) contrast(104%) !default;
+
+$disabled-filter:       brightness(0) invert(1) brightness(.8) !default;
 // End mod
 
 // Options
@@ -515,11 +519,9 @@ $body-emphasis-color:       $black !default;
 // Style anchor elements.
 
 $link-color:                              $black !default; // Boosted mod
-$link-color-inverted:                     $white !default; // Boosted mod
 $link-decoration:                         underline !default;
 $link-shade-percentage:                   20% !default;
 $link-hover-color:                        $accessible-orange !default; // Boosted mod
-$link-hover-color-inverted:               $brand-orange !default; // Boosted mod
 $link-hover-decoration:                   null !default;
 
 $stretched-link-pseudo-element:           after !default;
@@ -651,13 +653,11 @@ $outline-offset:              $outline-width !default; // Deprecated in v5.2.3
 $focus-visible-zindex:                5 !default; // Boosted mod
 
 $focus-visible-inner-width:           2px !default; // Boosted mod
-$focus-visible-inner-color:           var(--#{$prefix}body-bg) !default; // Boosted mod
-$focus-visible-inner-color-inverted:  var(--#{$prefix}emphasis-color) !default; // Boosted mod
+$focus-visible-inner-color:           $white !default; // Boosted mod
 
 $focus-visible-outer-width:           3px !default;  // Boosted mod
 $focus-visible-outer-offset:          $focus-visible-inner-width !default; // Boosted mod
-$focus-visible-outer-color:           var(--#{$prefix}emphasis-color) !default; // Boosted mod
-$focus-visible-outer-color-inverted:  var(--#{$prefix}body-bg) !default; // Boosted mod
+$focus-visible-outer-color:           $black !default; // Boosted mod
 // scss-docs-end focus-visible-variables
 
 // scss-docs-start box-shadow-variables
@@ -862,9 +862,6 @@ $list-inline-padding:         $spacer * .25 !default;
 $mark-padding:                0 .1875em !default; // Boosted mod
 $mark-color:                  $white !default; // Boosted mod: instead of `$body-color`
 $mark-bg:                     $black !default; // Boosted mod: instead of `$yellow-100`
-
-$mark-color-inverted:         $black !default; // Boosted mod
-$mark-bg-inverted:            $white !default; // Boosted mod
 // scss-docs-end type-variables
 // End mod
 
@@ -919,7 +916,6 @@ $table-striped-columns-order:           even !default;
 $table-group-separator-color:           currentcolor !default;
 
 $table-caption-color:                   var(--#{$prefix}caption-color, var(--#{$prefix}emphasis-color)) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
-$table-caption-color-inverted:          var(--#{$prefix}body-bg) !default; // Boosted mod
 $table-caption-padding-y:               .75rem !default; // Boosted mod
 
 // Boosted mod: no $table-bg-scale
@@ -965,6 +961,7 @@ $input-btn-border-width:      var(--#{$prefix}border-width) !default;
 
 // scss-docs-start btn-variables
 $btn-color:                   var(--#{$prefix}body-color) !default;
+$btn-hover-color:             $btn-color !default; // Boosted mod
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;
@@ -987,6 +984,26 @@ $btn-letter-spacing-lg:       $letter-spacing-base * 2 !default; // Boosted mod
 
 $btn-border-width:            $input-btn-border-width !default;
 
+$btn-default-hover-bg:        var(--#{$prefix}highlight-bg) !default; // Boosted mod
+$btn-default-hover-border:    var(--#{$prefix}highlight-bg) !default; // Boosted mod
+$btn-default-hover-color:     var(--#{$prefix}highlight-color) !default; // Boosted mod
+$btn-default-active-bg:       $primary !default; // Boosted mod
+$btn-default-active-border:   $primary !default; // Boosted mod
+$btn-default-active-color:    $black !default; // Boosted mod
+$btn-default-disabled-bg:     var(--#{$prefix}disabled-color) !default; // Boosted mod
+$btn-default-disabled-border: var(--#{$prefix}disabled-color) !default; // Boosted mod
+$btn-default-disabled-color:  var(--#{$prefix}highlight-color) !default; // Boosted mod
+
+$btn-outline-default-hover-bg:        var(--#{$prefix}btn-color) !default; // Boosted mod
+$btn-outline-default-hover-border:    var(--#{$prefix}btn-border-color) !default; // Boosted mod
+$btn-outline-default-hover-color:     $white !default; // Boosted mod
+$btn-outline-default-active-bg:       $primary !default; // Boosted mod
+$btn-outline-default-active-border:   $primary !default; // Boosted mod
+$btn-outline-default-active-color:    $black !default; // Boosted mod
+$btn-outline-default-disabled-bg:     transparent !default; // Boosted mod
+$btn-outline-default-disabled-border: var(--#{$prefix}disabled-color) !default; // Boosted mod
+$btn-outline-default-disabled-color:  var(--#{$prefix}disabled-color) !default; // Boosted mod
+
 $btn-font-weight:             $font-weight-bold !default;
 $btn-box-shadow:              null !default;
 $btn-focus-width:             $input-btn-focus-width !default;
@@ -996,7 +1013,7 @@ $btn-active-box-shadow:       null !default;
 
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
-$btn-link-disabled-color:     $gray-500 !default;
+$btn-link-disabled-color:     var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `$gray-600`
 // Boosted mod: no `$btn-link-focus-shadow-rgb`
 
 // Allows for customizing button radius independently from global border radius
@@ -1068,7 +1085,7 @@ $form-text-font-size:                   $small-font-size !default;
 $form-text-font-style:                  null !default;
 $form-text-font-weight:                 $font-weight-bold !default; // Boosted mod: instead of `null`
 $form-text-line-height:                 $line-height-sm !default; // Boosted mod
-$form-text-color:                       var(--#{$prefix}secondary-color) !default;
+$form-text-color:                       var(--#{$prefix}placeholder-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 // scss-docs-end form-text-variables
 
 // scss-docs-start form-label-variables
@@ -1076,13 +1093,17 @@ $form-label-margin-bottom:              .5rem !default; // Boosted mod
 $form-label-font-size:                  null !default;
 $form-label-font-style:                 null !default;
 $form-label-font-weight:                $font-weight-bold !default;
-$form-label-color:                      null !default;
-$form-label-disabled-color:             $gray-500 !default; // Boosted mod
+$form-label-color:                      var(--#{$prefix}body-color) !default; // Boosted mod: instead of `null`
+$form-label-disabled-color:             var(--#{$prefix}disabled-color) !default; // Boosted mod
 $form-label-required-margin-left:       .1875rem !default; // Boosted mod
+$form-label-required-color:             var(--#{$prefix}link-hover-color) !default; // Boosted mod
 // scss-docs-end form-label-variables
 
 // scss-docs-start form-helper-variables
 $form-helper-size:                      1.25rem !default; // Boosted mod
+$form-helper-color:                     var(--#{$prefix}info) !default; // Boosted mod
+$form-helper-bg:                        var(--#{$prefix}highlight-color) !default; // Boosted mod
+$form-helper-icon:                      escape-svg($helper-icon) !default; // Boosted mod
 $form-helper-label-margin-bottom:       $form-label-margin-bottom - divide(($form-helper-size - $font-size-base), 2) !default; // Boosted mod
 // scss-docs-end form-helper-variables
 
@@ -1102,12 +1123,12 @@ $input-padding-y-lg:                    $input-btn-padding-y-lg !default;
 $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
 $input-font-size-lg:                    $input-btn-font-size-lg !default;
 
-$input-bg:                              $white !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
-$input-disabled-color:                  $gray-700 !default; // Boosted mod
+$input-bg:                              var(--#{$prefix}body-bg) !default;
+$input-disabled-color:                  var(--#{$prefix}placeholder-color) !default; // Boosted mod
 $input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
 $input-disabled-border-color:           null !default;
 
-$input-color:                           $black !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
+$input-color:                           var(--#{$prefix}body-color) !default;
 $input-border-color:                    var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of var(--#{$prefix}border-color)
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      none !default; // Boosted mod
@@ -1122,7 +1143,7 @@ $input-focus-color:                     $input-color !default;
 $input-focus-width:                     $input-btn-focus-width !default;
 $input-focus-box-shadow:                none !default; // Boosted mod
 
-$input-placeholder-color:               var(--#{$prefix}secondary-color) !default;
+$input-placeholder-color:               var(--#{$prefix}placeholder-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $input-plaintext-color:                 var(--#{$prefix}body-color) !default;
 
 // Boosted mod: no $input-height-border
@@ -1139,8 +1160,11 @@ $input-line-height-lg:                  $h5-line-height !default; // Boosted mod
 $input-transition:                      border-color $transition-duration $transition-timing, $transition-focus !default;
 
 $form-color-width:                      2.5rem !default; // Boosted mod: instead of `3rem`
-$form-color-disabled-border-color:      $gray-500 !default; // Boosted mod
-$form-color-disabled-background-swatch: brightness(0) invert(1) brightness(.8) !default; // Boosted mod
+$form-color-border-color:               var(--#{$prefix}emphasis-color) !default; // Boosted mod
+$form-color-hover-bg-color:             var(--#{$prefix}emphasis-color) !default; // Boosted mod
+$form-color-disabled-bg-color:          $input-bg !default; // Boosted mod
+$form-color-disabled-border-color:      var(--#{$prefix}disabled-color) !default; // Boosted mod
+$form-color-disabled-background-swatch: var(--#{$prefix}disabled-filter) !default; // Boosted mod
 // scss-docs-end form-input-variables
 
 // scss-docs-start form-check-variables
@@ -1167,7 +1191,8 @@ $form-check-input-checked-color:          $component-active-color !default;
 $form-check-input-checked-bg-color:       $component-active-bg !default;
 $form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
 $form-check-input-checked-bg-image:       var(--#{$prefix}check-icon) !default;
-$form-check-input-disabled-color:         $gray-900 !default; // Boosted mod
+$form-check-input-disabled-color:         var(--#{$prefix}gray-tweak) !default; // Boosted mod
+$form-check-input-disabled-filter:        var(--#{$prefix}input-filter) !default; // Boosted mod
 $form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
 
 $form-check-input-indeterminate-color:          $form-check-input-checked-color !default;
@@ -1186,13 +1211,10 @@ $form-star-size:                        1.5625rem !default;
 $form-star-size-sm:                     1.25rem !default;
 $form-star-margin-between:              -.125rem !default;
 
-$form-star-rating-checked-color:        $accessible-orange !default;
-$form-star-rating-unchecked-color:      $gray-700 !default;
-$form-star-rating-hover-color:          $black !default;
-
-$form-star-rating-dark-checked-color:   $primary !default;
-$form-star-rating-dark-unchecked-color: $gray-500 !default;
-$form-star-rating-dark-hover-color:     $white !default;
+$form-star-rating-checked-color:        var(--#{$prefix}link-hover-color) !default;
+$form-star-rating-unchecked-color:      var(--#{$prefix}secondary-color) !default;
+$form-star-rating-hover-color:          var(--#{$prefix}highlight-bg) !default;
+$form-star-rating-disabled-color:       var(--#{$prefix}disabled-color) !default;
 
 $form-star-rating-checked-icon:         escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path fill='#000' stroke='#000' d='m12.5 4.523 2.016 6.227 6.542-.005-5.296 3.843 2.027 6.224L12.5 16.96l-5.289 3.852 2.027-6.224-5.296-3.843 6.542.005L12.5 4.523Z'/></svg>")) !default;
 $form-star-rating-unchecked-icon:       escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path fill='transparent' stroke='#000' d='m12.5 4.523 2.016 6.227 6.542-.005-5.296 3.843 2.027 6.224L12.5 16.96l-5.289 3.852 2.027-6.224-5.296-3.843 6.542.005L12.5 4.523Z'/></svg>")) !default;
@@ -1234,7 +1256,7 @@ $form-switch-checked-bg-position: calc(var(--#{$prefix}border-width) * 3) 50% !d
 $input-group-addon-padding-y:           $input-padding-y !default;
 $input-group-addon-padding-x:           $input-padding-x !default;
 $input-group-addon-font-weight:         $input-font-weight !default;
-$input-group-addon-color:               null !default;
+$input-group-addon-color:               $input-color !default; // Boosted mod: instead of `null`
 $input-group-addon-bg:                  null !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
 $input-group-addon-border-color:        null !default;
 // scss-docs-end input-group-variables
@@ -1290,26 +1312,26 @@ $form-range-track-cursor:         pointer !default;
 $form-range-track-bg:             var(--#{$prefix}secondary-bg) !default;
 $form-range-track-filled-bg:      $primary !default; // Boosted mod
 $form-range-track-border-radius:  null !default; // Boosted mod: instead of `1rem`
-$form-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default; // Boosted mod: instead of `var(--#{$prefix}box-shadow-inset)`
+$form-range-track-box-shadow:     var(--#{$prefix}box-shadow-inset) !default;
 
 $form-range-thumb-width:                   1rem !default;
 $form-range-thumb-height:                  $form-range-thumb-width !default;
-$form-range-thumb-bg:                      $white !default;
-$form-range-thumb-border:                  var(--#{$prefix}border-width) solid $black !default; // Boosted mod
+$form-range-thumb-bg:                      var(--#{$prefix}body-bg) !default; // Boosted mod: instead of `$component-active-bg`
+$form-range-thumb-border:                  var(--#{$prefix}border-width) solid var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `0`
 $form-range-thumb-border-radius:           50% !default;
 $form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
 $form-range-thumb-focus-box-shadow:        null !default; // Boosted mod
 $form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
-$form-range-thumb-hover-bg:                $black !default; // Boosted mod
+$form-range-thumb-hover-bg:                var(--#{$prefix}highlight-bg) !default; // Boosted mod
 $form-range-thumb-active-bg:               $primary !default; // Boosted mod: instead of `tint-color($component-active-bg, 70%)`
 $form-range-thumb-active-border:           $primary !default; // Boosted mod
-$form-range-thumb-disabled-bg:             $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
+$form-range-thumb-disabled-bg:             var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $form-range-thumb-transition:              background-color $transition-duration $transition-timing, border-color $transition-duration $transition-timing !default; // Boosted mod: no box shadow
 // scss-docs-end form-range-variables
 
 // scss-docs-start form-file-variables
 $form-file-button-color:          $input-color !default;
-$form-file-button-bg:             var(--#{$prefix}body-bg) !default;
+$form-file-button-bg:             $input-bg !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
 $form-file-button-hover-bg:       var(--#{$prefix}secondary-bg) !default;
 // scss-docs-end form-file-variables
 
@@ -1400,7 +1422,7 @@ $nav-link-font-weight:              $font-weight-bold !default;
 $nav-link-color:                    var(--#{$prefix}link-color) !default;
 $nav-link-hover-color:              var(--#{$prefix}link-hover-color) !default;
 $nav-link-transition:               null !default; // Boosted mod
-$nav-link-disabled-color:           $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
+$nav-link-disabled-color:           var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 // Boosted mod: no `$nav-link-focus-box-shadow`
 
 $nav-tabs-border-color:             var(--#{$prefix}border-color) !default;
@@ -1461,7 +1483,7 @@ $navbar-toggler-transition:           $transition-focus !default; // Boosted mod
 $navbar-light-color:                  var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .65)`
 $navbar-light-hover-color:            $accessible-orange !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .8)`
 $navbar-light-active-color:           $accessible-orange !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), 1)`
-$navbar-light-disabled-color:         $gray-500 !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .3)`
+$navbar-light-disabled-color:         var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .3)`
 // Boosted mod: no $navbar-light-icon-color
 $navbar-light-toggler-icon-bg:        $burger-icon !default; // Boosted mod: instead of inline SVG
 $navbar-light-toggler-icon-bg-small:  $burger-icon-small !default; // Boosted mod: slightly different burger icon for small breakpoints
@@ -1519,7 +1541,6 @@ $navbar-badge-margin-top:                   .375rem !default;
 // scss-docs-end orange-navbar-variables
 // End mod
 
-// scss-docs-start navbar-dark-variables
 $navbar-dark-border-color:          $gray-700 !default; // Boosted mod
 $navbar-dark-color:                 $white !default; // Boosted mod: instead of `rgba($white, .55)`
 $navbar-dark-hover-color:           $primary !default; // Boosted mod: instead of `rgba($white, .75)`
@@ -1530,7 +1551,6 @@ $navbar-dark-disabled-color:        $gray-700 !default; // Boosted mod: instead
 $navbar-dark-toggler-border-color:  transparent !default; // Boosted mod: instead of `rgba($white, .1)`
 $navbar-dark-brand-color:           inherit !default; // Boosted mod: instead of `$navbar-dark-active-color`
 $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
-// scss-docs-end navbar-dark-variables
 
 
 // Dropdowns
@@ -1556,17 +1576,17 @@ $dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
 
 $dropdown-link-color:               var(--#{$prefix}body-color) !default;
 $dropdown-link-hover-color:         $dropdown-link-color !default;
-$dropdown-link-hover-bg:            $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
+$dropdown-link-hover-bg:            var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
 
-$dropdown-link-active-color:        color-contrast($component-active-color) !default; // Boosted mod: instead of `$component-active-color`
-$dropdown-link-active-bg:           $component-active-color !default; // Boosted mod: instead of `$component-active-bg`
+$dropdown-link-active-color:        var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `$component-active-color`
+$dropdown-link-active-bg:           var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `$component-active-bg`
 
-$dropdown-link-disabled-color:      $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-color)`
+$dropdown-link-disabled-color:      var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-color)`
 
 $dropdown-item-padding-y:           $spacer * .5 !default; // Boosted mod: instead of `$spacer * .25`
 $dropdown-item-padding-x:           $spacer * .5 !default; // Boosted mod: instead of `$spacer`
 
-$dropdown-header-color:             $black !default; // Boosted mod: instead of `$gray-600`
+$dropdown-header-color:             var(--#{$prefix}body-color) !default; // Boosted mod: instead of `$gray-600`
 $dropdown-header-padding-x:         $dropdown-item-padding-x !default;
 $dropdown-header-padding-y:         $spacer !default; // Boosted mod: instead of `$dropdown-padding-y`
 // fusv-disable
@@ -1574,7 +1594,6 @@ $dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-
 // fusv-enable
 // scss-docs-end dropdown-variables
 
-// scss-docs-start dropdown-dark-variables
 $dropdown-dark-color:               $white !default; // Boosted mod
 $dropdown-dark-bg:                  $black !default; // Boosted mod
 $dropdown-dark-border-color:        $gray-700 !default; // Boosted mod
@@ -1587,7 +1606,6 @@ $dropdown-dark-link-active-color:   $black !default; // Boosted mod
 $dropdown-dark-link-active-bg:      $white !default; // Boosted mod
 $dropdown-dark-link-disabled-color: $gray-700 !default; // Boosted mod
 $dropdown-dark-header-color:        $white !default; // Boosted mod
-// scss-docs-end dropdown-dark-variables
 
 // Pagination
 
@@ -1641,33 +1659,6 @@ $pagination-active-item-border:     $pagination-active-item-bg !default;
 // End mod
 // scss-docs-end pagination-variables
 
-// scss-docs-start pagination-dark-variables
-// Boosted mod
-$pagination-dark-bg:                        $black !default;
-$pagination-dark-color:                     color-contrast($pagination-dark-bg) !default;
-$pagination-dark-border-color:              transparent !default;
-
-$pagination-dark-hover-bg:                  $black !default;
-$pagination-dark-hover-color:               color-contrast($pagination-dark-hover-bg) !default;
-$pagination-dark-hover-border-color:        $gray-700 !default;
-
-$pagination-dark-focus-bg:                  $black !default;
-$pagination-dark-focus-color:               color-contrast($pagination-dark-focus-bg) !default;
-
-$pagination-dark-active-bg:                 $white !default;
-$pagination-dark-active-color:              color-contrast($pagination-dark-active-bg) !default;
-$pagination-dark-active-border-color:       $white !default;
-
-$pagination-dark-active-item-bg:            $brand-orange !default;
-$pagination-dark-active-item-color:         color-contrast($pagination-dark-active-item-bg) !default;
-$pagination-dark-active-item-border-color:  $brand-orange !default;
-
-$pagination-dark-disabled-bg:               $black !default;
-$pagination-dark-disabled-color:            $gray-700 !default;
-$pagination-dark-disabled-border-color:     $gray-700 !default;
-// End mod
-// scss-docs-end pagination-dark-variables
-
 
 // Placeholders
 
@@ -1712,10 +1703,10 @@ $card-footer-color:                 $gray-700 !default; // Boosted mod
 $accordion-padding-y:                     $spacer * .5 !default; // Boosted mod
 $accordion-padding-x:                     0 !default; // Boosted mod
 $accordion-color:                         var(--#{$prefix}body-color) !default;
-$accordion-bg:                            var(--#{$prefix}body-bg) !default;
+$accordion-bg:                            transparent !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 // stylelint-disable-next-line function-disallowed-list
 $accordion-border-width:                  calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod
-$accordion-border-color:                  $gray-500 !default; // Boosted mod
+$accordion-border-color:                  var(--#{$prefix}border-color-translucent) !default; // Boosted mod
 $accordion-border-radius:                 var(--#{$prefix}border-radius) !default;
 $accordion-inner-border-radius:           subtract($accordion-border-radius, #{$accordion-border-width}) !default;
 
@@ -1735,7 +1726,7 @@ $accordion-button-bg:                     var(--#{$prefix}accordion-bg) !default
 $accordion-transition:                    $btn-transition, border-radius .15s ease !default;
 $accordion-button-hover-bg:               var(--#{$prefix}secondary-bg) !default; // Boosted mod
 $accordion-button-active-bg:              null !default; // Boosted mod: instead of `var(--#{$prefix}primary-bg-subtle)`
-$accordion-button-active-color:           var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `var(--#{$prefix}primary-text-emphasis)`
+$accordion-button-active-color:           var(--#{$prefix}body-color) !default; // Boosted mod: instead of `var(--#{$prefix}primary-text-emphasis)`
 
 // Boosted mod: no $accordion-button-focus-border-color
 // Boosted mod: no $accordion-button-focus-box-shadow
@@ -1763,16 +1754,6 @@ $accordion-button-letter-spacing-lg:      $h2-spacing !default;
 // End mod
 // scss-docs-end accordion-variables
 
-// scss-docs-start accordion-dark-variables
-$accordion-dark-color:                    $white !default; // Boosted mod
-$accordion-dark-bg:                       $black !default; // Boosted mod
-$accordion-dark-border-color:             $gray-700 !default; // Boosted mod
-$accordion-dark-button-color:             $accordion-dark-color !default; // Boosted mod
-$accordion-dark-button-bg:                $accordion-dark-bg !default; // Boosted mod
-$accordion-dark-button-hover-bg:          $gray-900 !default; // Boosted mod
-$accordion-dark-button-active-color:      $white !default; // Boosted mod
-// scss-docs-end accordion-dark-variables
-
 // Tooltips
 
 // scss-docs-start tooltip-variables
@@ -2035,22 +2016,6 @@ $list-group-icons: (
 // End mod
 // scss-docs-end list-group-variables
 
-// scss-docs-start list-group-dark-variables
-$list-group-dark-color:               $white !default; // Boosted mod
-$list-group-dark-bg:                  $black !default; // Boosted mod
-$list-group-dark-hover-bg:            $gray-900 !default; // Boosted mod
-$list-group-dark-border-color:        $gray-700 !default; // Boosted mod
-$list-group-dark-action-color:        $white !default; // Boosted mod
-$list-group-dark-action-hover-color:  $white !default; // Boosted mod
-$list-group-dark-action-active-color: $white !default; // Boosted mod
-$list-group-dark-action-active-bg:    no-repeat linear-gradient(to right, var(--#{$prefix}link-hover-color) 4px, $gray-700 4px) !default; // Boosted mod
-$list-group-dark-disabled-color:      $gray-700 !default; // Boosted mod
-$list-group-dark-disabled-bg:         transparent !default; // Boosted mod
-$list-group-dark-active-color:        $white !default; // Boosted mod
-$list-group-dark-active-bg:           no-repeat linear-gradient(to right, var(--#{$prefix}link-hover-color) 4px, $gray-700 4px) !default; // Boosted mod
-$list-group-dark-active-border-color: $gray-700 !default; // Boosted mod
-// scss-docs-end list-group-dark-variables
-
 
 // Image thumbnails
 
@@ -2105,20 +2070,14 @@ $breadcrumb-item-padding-x:         $spacer * .5 !default;
 $breadcrumb-margin-bottom:          1rem !default;
 $breadcrumb-color:                  var(--#{$prefix}emphasis-color) !default; // Boosted mod
 $breadcrumb-bg:                     null !default;
-$breadcrumb-divider-color:          null !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
+$breadcrumb-divider-color:          $black !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
+$breadcrumb-divider-filter:         var(--#{$prefix}icon-filter) !default; // Boosted mod
 $breadcrumb-active-color:           null !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $breadcrumb-divider:                url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14' width='7' height='10'><path d='m-.4 12 2 2 7-7-7-7-2 2 5 5z'/></svg>") !default;
 $breadcrumb-divider-flipped:        $breadcrumb-divider !default;
 $breadcrumb-border-radius:          null !default;
 // scss-docs-end breadcrumb-variables
 
-// scss-docs-start breadcrumb-dark-variables
-$breadcrumb-dark-color:             $white !default; // Boosted mod
-$breadcrumb-dark-bg:                null !default; // Boosted mod
-$breadcrumb-dark-divider-color:     $black !default; // Boosted mod: since the divider is inverted for SVG reasons
-$breadcrumb-dark-active-color:      null !default; // Boosted mod
-// scss-docs-end breadcrumb-dark-variables
-
 
 // Carousel
 
@@ -2176,6 +2135,7 @@ $carousel-transition:                transform $carousel-transition-duration $tr
 // Spinners
 
 // scss-docs-start spinner-variables
+$spinner-color:           var(--#{$prefix}body-color) !default; // Boosted mod
 $spinner-width:           $spacer * 2 !default;
 $spinner-height:          $spinner-width !default;
 $spinner-vertical-align:  -.125em !default;
@@ -2224,7 +2184,6 @@ $btn-close-padding-sm:          subtract($btn-icon-padding-x, $spacer * .25) !de
 // End mod
 // scss-docs-end close-variables
 
-// scss-docs-start close-white-variables
 $btn-close-white-color:               $white !default; // Boosted mod
 $btn-close-white-bg:                  transparent !default; // Boosted mod
 $btn-close-white-border-color:        transparent !default; // Boosted mod
@@ -2232,7 +2191,6 @@ $btn-close-white-hover-color:         $btn-close-white-color !default; // Booste
 $btn-close-white-active-color:        $primary !default; // Boosted mod
 $btn-close-white-active-border-color: $gray-700 !default; // Boosted mod
 $btn-close-white-disabled-color:      $gray-700 !default; // Boosted mod
-// scss-docs-end close-white-variables
 
 // Offcanvas
 
@@ -2256,19 +2214,15 @@ $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
 // Boosted mod
 $code-font-size:                    .875em !default;
 $code-color:                        $gray-700 !default;
-$code-color-inverted:               $gray-600 !default;
 
 $kbd-padding-y:                     $spacer * .05 !default;
 $kbd-padding-x:                     $spacer * .05 !default;
 $kbd-font-size:                     $code-font-size !default;
 $kbd-color:                         var(--#{$prefix}kbd-color, $black) !default;
-$kbd-color-inverted:                $white !default;
 $kbd-bg:                            var(--#{$prefix}kbd-bg, $gray-300) !default;
-$kbd-bg-inverted:                   $gray-900 !default;
 $nested-kbd-font-weight:            null !default; // Deprecated in v5.2.0, removing in v6
 
 $pre-color:                         var(--#{$prefix}pre-color, $gray-900) !default;
-$pre-color-inverted:                $gray-300 !default;
 $pre-line-height:                   1.25 !default;
 // End mod
 
@@ -2303,44 +2257,40 @@ $stepped-process-font-size:   $small-font-size !default;
 $stepped-process-font-weight: $font-weight-bold !default;
 $stepped-process-max-items:   5 !default;
 $stepped-process-counter:     step !default; // Used as a counter name
+$stepped-process-bg:          var(--#{$prefix}body-bg) !default;
 
 $step-item-padding:           7px !default;
 // fusv-disable
 $step-item-padding-end:       $step-item-padding * 2 !default; // Deprecated in v5.2.0
 // fusv-enable
 $step-item-margin-end:        var(--#{$prefix}border-width) !default;
-$step-item-bg:                $black !default;
+$step-item-bg:                var(--#{$prefix}highlight-bg) !default;
 $step-item-active-bg:         $primary !default;
-$step-item-next-bg:           $gray-400 !default;
+$step-item-next-bg:           var(--#{$prefix}border-color-translucent) !default;
 $step-item-shadow-size:       calc(var(--#{$prefix}border-width) * 1.5) !default; // stylelint-disable-line function-disallowed-list
-$step-item-drop-shadow:       drop-shadow($step-item-shadow-size 0 0 $white) #{"/* rtl:"} drop-shadow(calc(-1 * #{$step-item-shadow-size}) 0 0 $white) #{"*/"} !default; // stylelint-disable-line function-disallowed-list
+$step-item-drop-shadow:       drop-shadow($step-item-shadow-size 0 0 var(--#{$prefix}stepped-process-bg)) #{"/* rtl:"} drop-shadow(calc(-1 * #{$step-item-shadow-size}) 0 0 var(--#{$prefix}stepped-process-bg)) #{"*/"} !default; // stylelint-disable-line function-disallowed-list
 
 $step-item-arrow-width:       .8125rem !default;
 $step-item-arrow-shape:       polygon(0% 0%, 1px 0%, subtract(100%, var(--#{$prefix}border-width)) 50%, 1px 100%, 0% 100%) #{"/* rtl:"} polygon(100% 0%, subtract(100%, 1px) 0%, var(--#{$prefix}border-width) 50%, subtract(100%, 1px) 100%, 100% 100%) #{"*/"} !default; // Used in clip-path
 
 $step-link-width:             1.25ch !default; // Matches width of a single number
-$step-link-color:             $white !default;
+$step-link-color:             var(--#{$prefix}highlight-color) !default;
 $step-link-active-color:      $black !default;
 $step-link-active-outline:    $black !default;
-$step-link-next-color:        $black !default;
+$step-link-next-color:        var(--#{$prefix}link-color) !default;
 $step-link-line-height:       $line-height-sm !default;
 $step-link-marker:            counter(var(--bs-stepped-process-counter)) inspect("\A0") !default;
 $step-link-marker-lg:         counter(var(--bs-stepped-process-counter)) inspect(".\A0") !default;
 $step-link-text-decoration:   $link-decoration !default;
 // scss-docs-end stepped-process
 
-// scss-docs-start stepped-process-dark-variables
-$step-item-dark-bg:           $white !default;
-$step-item-dark-active-bg:    $brand-orange !default;
-$step-item-dark-next-bg:      $gray-700 !default;
-$step-item-dark-drop-shadow:  drop-shadow($step-item-shadow-size 0 0 $black) #{"/* rtl:"} drop-shadow(calc(-1 * #{$step-item-shadow-size}) 0 0 $black) #{"*/"} !default; // stylelint-disable-line function-disallowed-list
-$step-link-dark-color:        $black !default;
-$step-link-dark-active-color: $black !default;
-$step-link-dark-next-color:   $white !default;
-// scss-docs-end stepped-process-dark-variables
 
 //// Sticker
 // scss-docs-start sticker
+$sticker-color:                         $black !default;
+$sticker-background-color:              $brand-orange !default;
+$sticker-font-weight:                   $font-weight-bold !default;
+
 $sticker-size-sm:                       $spacer * 7 !default;
 $sticker-size-md:                       $spacer * 9 !default;
 $sticker-size-lg:                       $spacer * 14 !default;
@@ -2423,6 +2373,9 @@ $footer-gap-xl:                           $spacer * 1.7 !default;
 // Tags
 
 // scss-docs-start tag-variables
+$tag-color:                         var(--#{$prefix}body-color) !default;
+$tag-bg:                            var(--#{$prefix}body-bg) !default;
+
 $tag-gap:                           map-get($spacers, 1) !default;
 $tag-font-shift:                    $spacer * .1 !default;
 $tag-font-weight:                   $font-weight-bold !default;
@@ -2437,10 +2390,10 @@ $tag-close-margin-end:              -$spacer * .3 !default;
 $tag-close-margin-start:            $spacer * .2 !default;
 $tag-font-size:                     $font-size-base !default;
 
-$tag-active-color:                  $white !default;
-$tag-disabled-color:                $gray-500 !default;
-$tag-border-color:                  $gray-500 !default;
-$tag-active-decoration-color:       $black !default;
+$tag-active-color:                  var(--#{$prefix}highlight-color) !default;
+$tag-disabled-color:                var(--#{$prefix}disabled-color) !default;
+$tag-border-color:                  var(--#{$prefix}border-color-translucent) !default;
+$tag-active-decoration-color:       var(--#{$prefix}highlight-bg) !default;
 // scss-docs-end tag-variables
 
 // scss-docs-start tag-sm-variables
@@ -2453,13 +2406,6 @@ $tag-close-margin-start-sm:         0 !default;
 $tag-font-size-sm:                  $font-size-sm !default;
 // scss-docs-end tag-sm-variables
 
-// scss-docs-start tag-dark-variables
-$tag-active-color-dark:             $black !default;
-$tag-disabled-color-dark:           $gray-700 !default;
-$tag-border-color-dark:             $gray-700 !default;
-$tag-active-decoration-color-dark:  $white !default;
-// scss-docs-end tag-dark-variables
-
 
 // Local navigation
 
@@ -2467,24 +2413,14 @@ $tag-active-decoration-color-dark:  $white !default;
 $local-nav-padding-y:           $navbar-nav-link-padding-y !default;
 $local-nav-color:               var(--#{$prefix}body-color) !default;
 $local-nav-bg:                  var(--#{$prefix}body-bg) !default;
-$local-nav-hover-color:         $local-nav-color !default;
-$local-nav-hover-bg:            $gray-300 !default;
-$local-nav-active-color:        $accessible-orange !default;
-$local-nav-active-bg:           $gray-400 !default;
+$local-nav-hover-color:         var(--#{$prefix}hover-color) !default;
+$local-nav-hover-bg:            var(--#{$prefix}secondary-bg) !default;
+$local-nav-active-color:        var(--#{$prefix}link-hover-color) !default;
+$local-nav-active-bg:           var(--#{$prefix}active-bg) !default;
 $local-nav-active-marker-width: $spacer * .2 !default;
-$local-nav-border-color:        $gray-500 !default;
+$local-nav-border-color:        var(--#{$prefix}border-color-translucent) !default;
 $local-nav-border-width:        calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list
 // scss-docs-end local-nav-variables
-
-// scss-docs-start local-nav-dark-variables
-$local-nav-dark-color:          $white !default;
-$local-nav-dark-bg:             $black !default;
-$local-nav-dark-hover-color:    $brand-orange !default;
-$local-nav-dark-hover-bg:       $gray-900 !default;
-$local-nav-dark-active-color:   $local-nav-dark-hover-color !default;
-$local-nav-dark-active-bg:      $gray-700 !default;
-$local-nav-dark-border-color:   $gray-700 !default;
-// scss-docs-end local-nav-dark-variables
 // End mod
 
 @import "variables-dark"; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index bd3ce9acc2..e68035014b 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -113,9 +113,9 @@
 
     // Boosted mod
     &:checked,
-    &:indeterminate {
+    &[type="checkbox"]:indeterminate {
       background-color: $form-check-input-disabled-color;
-      filter: $invert-filter;
+      filter: $form-check-input-disabled-filter;
       border-color: $form-check-input-disabled-color;
     }
     // End mod
@@ -387,4 +387,4 @@
   // End mod
 }
 
-// Boosted mod: no `@if enable-dark-mode` since Boosted doesn't have any dark mode for now
+// Boosted mod: no `@if enable-dark-mode`
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index eae6ba1707..42fa2fca40 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -205,15 +205,15 @@ textarea {
   width: $form-color-width;
   height: $input-height;
   padding: $input-padding-y;
-  border-color: var(--#{$prefix}body-color); // Boosted mod
+  border-color: $form-color-border-color; // Boosted mod
 
   // Boosted mod
   &:hover {
-    background-color: var(--#{$prefix}body-color);
+    background-color: $form-color-hover-bg-color;
   }
 
   &:disabled {
-    background-color: var(--#{$prefix}body-bg);
+    background-color: $form-color-disabled-bg-color;
     border-color: $form-color-disabled-border-color;
 
     &::-moz-color-swatch {
diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
index 69cdae120f..7db1a63238 100644
--- a/scss/forms/_labels.scss
+++ b/scss/forms/_labels.scss
@@ -18,18 +18,39 @@
 
 .is-required::after {
   margin-left: $form-label-required-margin-left;
-  color: $accessible-orange;
+  color: $form-label-required-color;
   content: "*";
 }
 
 .form-helper {
+  position: relative;
   display: inline-block;
   flex-shrink: 0;
-  width: $form-helper-size;
-  height: $form-helper-size;
-  background: no-repeat center/100% escape-svg($helper-icon);
+  padding: 0;
+  background: transparent;
   border: 0;
 
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: calc(#{$form-helper-size} - 5px); // stylelint-disable-line function-disallowed-list
+    height: calc(#{$form-helper-size} - 5px); // stylelint-disable-line function-disallowed-list
+    content: "";
+    background-color: $form-helper-bg;
+    border-radius: 50%; // stylelint-disable-line property-disallowed-list
+    transform: translate(-50%, -50%);
+  }
+
+  &::after {
+    display: block;
+    width: $form-helper-size;
+    height: $form-helper-size;
+    content: "";
+    background-color: $form-helper-color;
+    mask: no-repeat center/100% $form-helper-icon;
+  }
+
   .form-label + & {
     margin-bottom: $form-helper-label-margin-bottom;
     vertical-align: bottom;
diff --git a/scss/forms/_star-rating.scss b/scss/forms/_star-rating.scss
index 1527320fd1..4fb08aabfd 100644
--- a/scss/forms/_star-rating.scss
+++ b/scss/forms/_star-rating.scss
@@ -12,8 +12,8 @@
 
   &:disabled {
     pointer-events: none;
-    --#{$prefix}star-rating-checked-color: var(--#{$prefix}border-color-translucent);
-    --#{$prefix}star-rating-unchecked-color: var(--#{$prefix}border-color-translucent);
+    --#{$prefix}star-rating-checked-color: #{$form-star-rating-disabled-color};
+    --#{$prefix}star-rating-unchecked-color: #{$form-star-rating-disabled-color};
   }
 
   > label {
@@ -73,12 +73,6 @@
   }
 }
 
-.star-rating-dark {
-  --#{$prefix}star-rating-checked-color: #{$form-star-rating-dark-checked-color};
-  --#{$prefix}star-rating-unchecked-color: #{$form-star-rating-dark-unchecked-color};
-  --#{$prefix}star-rating-hover-color: #{$form-star-rating-dark-hover-color};
-}
-
 .star-rating-sm {
   --#{$prefix}star-rating-checked-icon: #{$form-star-rating-sm-checked-icon};
   --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-sm-unchecked-icon};
diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss
index 1a3a4cffd6..e188b9ae95 100644
--- a/scss/helpers/_color-bg.scss
+++ b/scss/helpers/_color-bg.scss
@@ -5,3 +5,15 @@
     background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
   }
 }
+
+// Boosted mod
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    @each $color, $value in $theme-colors-dark {
+      .text-bg-#{$color} {
+        color: color-contrast($value) if($enable-important-utilities, !important, null);
+      }
+    }
+  }
+}
+// End mod
diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
index 9e5774943f..f47bd3bbd1 100644
--- a/scss/helpers/_colored-links.scss
+++ b/scss/helpers/_colored-links.scss
@@ -15,6 +15,24 @@
   }
 }
 
+// Boosted mod
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    @each $color, $value in $theme-colors-dark {
+      .link-#{$color} {
+        @if $link-shade-percentage != 0 {
+          &:hover {
+            $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+            color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+            text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+          }
+        }
+      }
+    }
+  }
+}
+// End mod
+
 // One-off special link helper as a bridge until v6
 .link-body-emphasis {
   color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 6d9597cf34..54ec815cda 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -3,23 +3,21 @@
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 //
-// Boosted mod: Extra parameter to handle shadow color for inverted buttons
 
 // scss-docs-start btn-variant-mixin
 @mixin button-variant(
   $background,
   $border,
-  $color: color-contrast($background),
-  $hover-background: $black, // Boosted mod
-  $hover-border: $black, // Boosted mod
-  $hover-color: color-contrast($hover-background),
-  $active-background: $primary, // Boosted mod
-  $active-border: $primary, // Boosted mod
-  $active-color: color-contrast($active-background),
-  $disabled-background: $gray-500, // Boosted mod
-  $disabled-border: $gray-500, // Boosted mod
-  $disabled-color: $white, // Boosted mod
-  $btn-focus-shadow-color: $white // Boosted mod
+  $color, // Boosted mod
+  $hover-background: $btn-default-hover-bg, // Boosted mod
+  $hover-border: $btn-default-hover-border, // Boosted mod
+  $hover-color: $btn-default-hover-color, // Boosted mod
+  $active-background: $btn-default-active-bg, // Boosted mod
+  $active-border: $btn-default-active-border, // Boosted mod
+  $active-color: $btn-default-active-color, // Boosted mod
+  $disabled-background: $btn-default-disabled-bg, // Boosted mod
+  $disabled-border: $btn-default-disabled-border, // Boosted mod
+  $disabled-color: $btn-default-disabled-color, // Boosted mod
 ) {
   --#{$prefix}btn-color: #{$color};
   --#{$prefix}btn-bg: #{$background};
@@ -27,7 +25,7 @@
   --#{$prefix}btn-hover-color: #{$hover-color};
   --#{$prefix}btn-hover-bg: #{$hover-background};
   --#{$prefix}btn-hover-border-color: #{$hover-border};
-  --#{$prefix}btn-focus-shadow-rgb: #{$btn-focus-shadow-color}; // Boosted mod
+  --#{$prefix}btn-focus-shadow-rgb: #{$white}; // Boosted mod
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-background};
   --#{$prefix}btn-active-border-color: #{$active-border};
@@ -38,7 +36,32 @@
 }
 // scss-docs-end btn-variant-mixin
 
-// Boosted mod: no `@mixin button-outline-variant`
+// scss-docs-start btn-outline-variant-mixin
+@mixin button-outline-variant(
+  $color,
+  $color-hover: $btn-outline-default-hover-color, // Boosted mod: instead of `color-contrast($color)`
+  $active-background: $btn-outline-default-active-bg, // Boosted mod: instead of `$color`
+  $active-border: $btn-outline-default-active-border, // Boosted mod: instead of `$color`
+  $active-color: $btn-outline-default-active-color, // Booted mod: `color-contrast($active-background)`
+  $hover-background: $btn-outline-default-hover-bg, // Boosted mod
+  $hover-border: $btn-outline-default-hover-border // Boosted mod
+) {
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-border-color: #{$color};
+  --#{$prefix}btn-hover-color: #{$color-hover};
+  --#{$prefix}btn-hover-bg: #{$hover-background}; // Boosted mod: instead of using `#{$active-background}`
+  --#{$prefix}btn-hover-border-color: #{$hover-border}; // Boosted mod: instead of using `#{$active-border}`
+  --#{$prefix}btn-focus-shadow-rgb: #{$color};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$btn-outline-default-disabled-color};
+  --#{$prefix}btn-disabled-bg: #{$btn-outline-default-disabled-bg};
+  --#{$prefix}btn-disabled-border-color: #{$btn-outline-default-disabled-border};
+  --#{$prefix}gradient: none;
+}
+// scss-docs-end btn-outline-variant-mixin
 
 // scss-docs-start btn-size-mixin
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius, $line-height: null, $icon-spacing: $btn-icon-padding-x, $letter-spacing: $letter-spacing-base) {
diff --git a/scss/tests/mixins/_color-modes.test.scss b/scss/tests/mixins/_color-modes.test.scss
index 35e588e549..df1b65f661 100644
--- a/scss/tests/mixins/_color-modes.test.scss
+++ b/scss/tests/mixins/_color-modes.test.scss
@@ -26,7 +26,7 @@
           background-color: var(--bs-primary-bg-subtle);
         }
         [data-bs-theme=dark] {
-          --custom-color: #7d82da; // Boosted mod: instead of `#3aff8`
+          --custom-color: #757bd8; // Boosted mod: instead of `#3aff8`
         }
       }
     }
@@ -58,7 +58,7 @@
         }
         @media (prefers-color-scheme: dark) {
           :root {
-            --custom-color: #7d82da; // Boosted mod: instead of `#3aff8`
+            --custom-color: #757bd8; // Boosted mod: instead of `#3aff8`
           }
         }
       }
diff --git a/site/assets/js/tac.js b/site/assets/js/tac.js
index cb95808bd0..930fb579a5 100644
--- a/site/assets/js/tac.js
+++ b/site/assets/js/tac.js
@@ -29,10 +29,12 @@
   window.addEventListener('tac.open_alert', () => {
     const alert = document.getElementById('tarteaucitronAlertBig')
 
-    document.getElementById('tarteaucitronCloseAlert').classList.add('btn', 'btn-sm', 'btn-info', 'btn-inverse', 'ms-lg-2')
-    alert.querySelector('.tarteaucitronAllow').classList.add('btn', 'btn-sm', 'btn-success', 'btn-inverse', 'mx-sm-2', 'ms-lg-auto', 'my-2', 'my-lg-0')
+    alert.setAttribute('data-bs-theme', 'dark');
+
+    document.getElementById('tarteaucitronCloseAlert').classList.add('btn', 'btn-sm', 'btn-secondary', 'ms-lg-2')
+    alert.querySelector('.tarteaucitronAllow').classList.add('btn', 'btn-sm', 'btn-success', 'mx-sm-2', 'ms-lg-auto', 'my-2', 'my-lg-0')
     alert.querySelector('.tarteaucitronAllow').innerHTML = tarteaucitron.lang.acceptAll
-    alert.querySelector('.tarteaucitronDeny').classList.add('btn', 'btn-sm', 'btn-danger', 'btn-inverse', 'mx-sm-2', 'my-2', 'my-lg-0')
+    alert.querySelector('.tarteaucitronDeny').classList.add('btn', 'btn-sm', 'btn-danger', 'mx-sm-2', 'my-2', 'my-lg-0')
     alert.querySelector('.tarteaucitronDeny').innerHTML = tarteaucitron.lang.denyAll
   }, { once: true })
 
diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss
index 17bd1e9e81..c0dc4273b0 100644
--- a/site/assets/scss/_colors.scss
+++ b/site/assets/scss/_colors.scss
@@ -150,6 +150,7 @@
 .bd-gray-700 { color: color-contrast($gray-700); background-color: $gray-700; }
 .bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
 .bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }
+.bd-gray-950 { color: color-contrast($gray-950); background-color: $gray-950; }
 
 .bd-white { color: color-contrast($white); background-color: $white; }
 .bd-black { color: color-contrast($black); background-color: $black; }
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 55be8d6e09..4feb557f00 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -1,4 +1,6 @@
 .bd-navbar {
+  --bd-navbar-dropdown-item-icon-size: 1.25rem; // Boosted mod
+
   // Boosted mod: no padding
   // Boosted mod: no background-color
   // Boosted mod: no box-shadow
@@ -20,6 +22,11 @@
     &.active {
       color: var(--bs-link-hover-color);
     }
+
+    .bi {
+      width: var(--bd-navbar-dropdown-item-icon-size);
+      height: var(--bd-navbar-dropdown-item-icon-size);
+    }
   }
   // End mod
 
@@ -36,6 +43,15 @@
     --bs-dropdown-line-height: #{$line-height-sm};
     --bs-dropdown-item-padding-y: #{$dropdown-item-padding-y + .0625rem};
 
+    .dropdown-item {
+      height: 2.5rem;
+    }
+
+    .bi {
+      width: var(--bd-navbar-dropdown-item-icon-size);
+      height: var(--bd-navbar-dropdown-item-icon-size);
+    }
+
     .active .bi {
       display: block !important; // stylelint-disable-line declaration-no-important
     }
diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
index 1f2b935178..f4df917f1d 100644
--- a/site/assets/scss/_syntax.scss
+++ b/site/assets/scss/_syntax.scss
@@ -27,26 +27,26 @@
 // TODO: these values will need to be modified in order to work with Boosted dark mode
 // Right now, values are from Bootstrap from `--base00` to `--baseOF` and the 4 remaining one are copied from Boosted's light mode
 @include color-mode(dark, true) {
-  // --base00: #282c34;
-  // --base01: #353b45;
-  --base02: #3e4451;
-  --base03: #868e96;
-  --base04: #868e96;
-  --base05: #abb2bf;
-  --base06: #b6bdca;
-  --base07: #{$orange-300}; // #d19a66
+  --base00: #{$gray-950};
+  --base01: #{$gray-500};
+  --base02: #{$teal-300};
+  --base03: #{$cyan-300};
+  --base04: #{$yellow-300};
+  --base05: #{$cyan-400};
+  --base06: #{$gray-400};
+  --base07: #{$pink-800};
   --base08: #{$cyan-300};
-  --base09: #{$orange-300}; // #d19a66
-  --base0A: #{$yellow-200}; // #e5c07b
-  --base0B: #{$teal-300}; // #98c379
-  --base0C: #{$teal-300}; // #56b6c2
-  --base0D: #{$blue-300}; // #61afef
-  --base0E: #{$indigo-200}; // #c678dd
-  --base0F: #{$red-300}; // #be5046
-  --base10: #{$gray-400};
-  --base11: #{$yellow-800};
-  --base12: #{$cyan-900};
-  --base13: #{$pink-800};
+  --base09: #{$green-800};
+  --base0A: #{$blue-200};
+  --base0B: #{$cyan-500};
+  --base0C: #{$orange-300};
+  --base0D: #{$purple-300};
+  --base0E: #{$teal-400};
+  --base0F: #{$white};
+  --base10: #{$gray-700};
+  --base11: #{$green-400};
+  --base12: #{$cyan-500};
+  --base13: #{$pink-500};
 }
 
 // From there this file was generated by running `hugo gen chromastyles > chroma.css` and modified in order to respect formatting rules
diff --git a/site/assets/scss/_tarteaucitron.scss b/site/assets/scss/_tarteaucitron.scss
index 1b6b2738a3..31ad52f109 100644
--- a/site/assets/scss/_tarteaucitron.scss
+++ b/site/assets/scss/_tarteaucitron.scss
@@ -71,10 +71,6 @@
   font-size: $font-size-sm;
 }
 
-@include tac("CloseAlert") {
-  @include button-variant($white, $white, $disabled-background: $white, $disabled-border: $gray-500, $disabled-color: $gray-500);
-}
-
 @include tac("ClosePanel") {
   position: absolute;
   right: $modal-content-padding;
diff --git a/site/content/docs/5.3/components/accordion.md b/site/content/docs/5.3/components/accordion.md
index ca99b8707f..3613ee7be8 100644
--- a/site/content/docs/5.3/components/accordion.md
+++ b/site/content/docs/5.3/components/accordion.md
@@ -206,50 +206,13 @@ Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accord
 
 ## Dark variant
 
-{{< added-in "5.2.0" >}}
+{{< deprecated-in "5.3.3" >}}
 
-Add `.accordion-dark` to the `.accordion` for a dark variant.
+{{< callout warning >}}
+**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
 
-{{< example class="bg-dark" >}}
-<div class="accordion accordion-dark" id="accordionPanelsDarkExample">
-  <div class="accordion-item">
-    <h2 class="accordion-header">
-      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsDark-collapseOne" aria-expanded="true" aria-controls="panelsDark-collapseOne">
-        Accordion Item #1
-      </button>
-    </h2>
-    <div id="panelsDark-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionPanelsDarkExample">
-      <div class="accordion-body">
-        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
-      </div>
-    </div>
-  </div>
-  <div class="accordion-item">
-    <h2 class="accordion-header">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsDark-collapseTwo" aria-expanded="false" aria-controls="panelsDark-collapseTwo">
-        Accordion Item #2
-      </button>
-    </h2>
-    <div id="panelsDark-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionPanelsDarkExample">
-      <div class="accordion-body">
-        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
-      </div>
-    </div>
-  </div>
-  <div class="accordion-item">
-    <h2 class="accordion-header">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsDark-collapseThree" aria-expanded="false" aria-controls="panelsDark-collapseThree">
-        Accordion Item #3
-      </button>
-    </h2>
-    <div id="panelsDark-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionPanelsDarkExample">
-      <div class="accordion-body">
-        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
-      </div>
-    </div>
-  </div>
-</div>
-{{< /example >}}
+Add `data-bs-theme="dark"` to the `.accordion` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
+{{< /callout >}}
 
 ## Accessibility
 
@@ -271,16 +234,6 @@ Small and large accordion modifier classes are used to update the value of these
 
 {{< scss-docs name="accordion-lg-css-vars" file="scss/_accordion.scss" >}}
 
-Customization through CSS variables can be seen on the `.accordion-dark` modifier class where we override specific values without adding duplicate CSS selectors.
-
-{{< scss-docs name="accordion-dark-css-vars" file="scss/_accordion.scss" >}}
-
 ### Sass variables
 
-Variables for all accordions:
-
 {{< scss-docs name="accordion-variables" file="scss/_variables.scss" >}}
-
-Variables for the [dark accordion](#dark-variant):
-
-{{< scss-docs name="accordion-dark-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.3/components/alerts.md b/site/content/docs/5.3/components/alerts.md
index 44c2612178..2c7360e917 100644
--- a/site/content/docs/5.3/components/alerts.md
+++ b/site/content/docs/5.3/components/alerts.md
@@ -150,7 +150,7 @@ Add `.bg-dark` to the `.alert` for a dark variant. Close button can be inverted
 <div class="alert alert-warning alert-dismissible fade show bg-dark" role="alert">
   <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
   <p>Warning notification text goes here.</p>
-  <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
 </div>
 {{< /example >}}
 
diff --git a/site/content/docs/5.3/components/back-to-top.md b/site/content/docs/5.3/components/back-to-top.md
index 6564cf69da..66bda336d5 100644
--- a/site/content/docs/5.3/components/back-to-top.md
+++ b/site/content/docs/5.3/components/back-to-top.md
@@ -31,14 +31,14 @@ Smooth scrolling does not depend on this component. It's turned on only when the
 
 <div class="bd-example">
   <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-secondary position-relative top-0" data-bs-label="Back to top">
+    <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>
     </a>
   </nav>
 </div>
 {{< example show_preview="false" >}}
 <nav aria-label="Back to top" class="back-to-top">
-  <a href="#top" class="back-to-top-link btn btn-icon btn-secondary" data-bs-label="Back to top">
+  <a href="#top" class="back-to-top-link btn btn-icon btn-outline-secondary" data-bs-label="Back to top">
     <span class="visually-hidden">Back to top</span>
   </a>
 </nav>
@@ -57,7 +57,7 @@ Add `.position-fixed` utility to your `.back-to-top-link` to make your back-to-t
 
 {{< example show_preview="false" >}}
 <nav aria-label="Fixed back to top example" class="back-to-top">
-  <a href="#top" class="back-to-top-link position-fixed btn btn-icon btn-secondary" data-bs-label="Back to top">
+  <a href="#top" class="back-to-top-link position-fixed btn btn-icon btn-outline-secondary" data-bs-label="Back to top">
     <span class="visually-hidden">Back to top</span>
   </a>
 </nav>
@@ -69,14 +69,14 @@ Use a `title` attribute instead of `data-bs-label` to ensure a visible label is
 
 <div class="bd-example">
   <nav aria-label="Icon only back to top example" class="back-to-top position-static">
-    <a href="#top" class="back-to-top-link position-static btn btn-icon btn-secondary" title="Back to top">
+    <a href="#top" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
       <span class="visually-hidden">Back to top</span>
     </a>
   </nav>
 </div>
 {{< example show_preview="false" >}}
 <nav aria-label="Back to top" class="back-to-top">
-  <a href="#top" class="back-to-top-link btn btn-icon btn-secondary" title="Back to top">
+  <a href="#top" class="back-to-top-link btn btn-icon btn-outline-secondary" title="Back to top">
     <span class="visually-hidden">Back to top</span>
   </a>
 </nav>
diff --git a/site/content/docs/5.3/components/breadcrumb.md b/site/content/docs/5.3/components/breadcrumb.md
index c4367460c2..a7183bf4f1 100644
--- a/site/content/docs/5.3/components/breadcrumb.md
+++ b/site/content/docs/5.3/components/breadcrumb.md
@@ -98,19 +98,13 @@ $breadcrumb-divider: none;
 <!-- Boosted mod: Dark variant -->
 ## Dark variant
 
-{{< added-in "5.2.1" >}}
+{{< deprecated-in "5.3.3" >}}
 
-Add `.breadcrumb-dark` to the `.breadcrumb` for a dark variant.
+{{< callout warning >}}
+**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
 
-{{< example class="bg-dark" >}}
-<nav aria-label="dark breadcrumb">
-  <ol class="breadcrumb breadcrumb-dark">
-    <li class="breadcrumb-item"><a href="#">Home</a></li>
-    <li class="breadcrumb-item"><a href="#">Library</a></li>
-    <li class="breadcrumb-item active" aria-current="page">Data</li>
-  </ol>
-</nav>
-{{< /example >}}
+Add `data-bs-theme="dark"` to the `.breadcrumb` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
+{{< /callout >}}
 <!-- End mod -->
 
 ## Accessibility
@@ -129,20 +123,6 @@ As part of Boosted's evolving CSS variables approach, breadcrumbs now use local
 
 {{< scss-docs name="breadcrumb-css-vars" file="scss/_breadcrumb.scss" >}}
 
-<!-- Boosted mod: Dark variant -->
-Customization through CSS variables can be seen on the `.breadcrumb-dark` modifier class where we override specific values without adding duplicate CSS selectors.
-
-{{< scss-docs name="breadcrumb-dark-css-vars" file="scss/_breadcrumb.scss" >}}
-<!-- End mod -->
-
 ### Sass variables
 
-Variables for all breadcrumbs:
-
 {{< scss-docs name="breadcrumb-variables" file="scss/_variables.scss" >}}
-
-<!-- Boosted mod: Dark variant -->
-Variables for [dark breadcrumb](#dark-variant):
-
-{{< scss-docs name="breadcrumb-dark-variables" file="scss/_variables.scss" >}}
-<!-- End mod -->
diff --git a/site/content/docs/5.3/components/button-group.md b/site/content/docs/5.3/components/button-group.md
index 41c7f0683d..02b3c124c8 100644
--- a/site/content/docs/5.3/components/button-group.md
+++ b/site/content/docs/5.3/components/button-group.md
@@ -14,9 +14,9 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
 
 {{< example >}}
 <div class="btn-group" role="group" aria-label="Basic example">
-  <button type="button" class="btn btn-secondary">Left</button>
-  <button type="button" class="btn btn-secondary">Middle</button>
-  <button type="button" class="btn btn-secondary">Right</button>
+  <button type="button" class="btn btn-outline-secondary">Left</button>
+  <button type="button" class="btn btn-outline-secondary">Middle</button>
+  <button type="button" class="btn btn-outline-secondary">Right</button>
 </div>
 {{< /example >}}
 
@@ -28,9 +28,9 @@ These classes can also be added to groups of links, as an alternative to the [`.
 
 {{< example >}}
 <div class="btn-group" role="group">
-  <a href="#" class="btn btn-secondary active" aria-current="page">Active link</a>
-  <a href="#" class="btn btn-secondary">Link</a>
-  <a href="#" class="btn btn-secondary">Link</a>
+  <a href="#" class="btn btn-outline-secondary active" aria-current="page">Active link</a>
+  <a href="#" class="btn btn-outline-secondary">Link</a>
+  <a href="#" class="btn btn-outline-secondary">Link</a>
 </div>
 {{< /example >}}
 
@@ -105,12 +105,12 @@ This variant should not be used because it does not respect the Orange Design Sy
     <button type="button" class="btn btn-primary">4</button>
   </div>
   <div class="btn-group me-2" role="group" aria-label="Second group">
-    <button type="button" class="btn btn-secondary">5</button>
-    <button type="button" class="btn btn-secondary">6</button>
-    <button type="button" class="btn btn-secondary">7</button>
+    <button type="button" class="btn btn-outline-secondary">5</button>
+    <button type="button" class="btn btn-outline-secondary">6</button>
+    <button type="button" class="btn btn-outline-secondary">7</button>
   </div>
   <div class="btn-group" role="group" aria-label="Third group">
-    <button type="button" class="btn btn-info">8</button>
+    <button type="button" class="btn btn-secondary">8</button>
   </div>
 </div>
 {{< /example >}}
@@ -120,10 +120,10 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
 {{< example >}}
 <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
   <div class="btn-group me-2" role="group" aria-label="First group">
-    <button type="button" class="btn btn-secondary">1</button>
-    <button type="button" class="btn btn-secondary">2</button>
-    <button type="button" class="btn btn-secondary">3</button>
-    <button type="button" class="btn btn-secondary">4</button>
+    <button type="button" class="btn btn-outline-secondary">1</button>
+    <button type="button" class="btn btn-outline-secondary">2</button>
+    <button type="button" class="btn btn-outline-secondary">3</button>
+    <button type="button" class="btn btn-outline-secondary">4</button>
   </div>
   <div class="input-group">
     <div class="input-group-text" id="btnGroupAddon">@</div>
@@ -133,10 +133,10 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
 
 <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
   <div class="btn-group" role="group" aria-label="First group">
-    <button type="button" class="btn btn-secondary">1</button>
-    <button type="button" class="btn btn-secondary">2</button>
-    <button type="button" class="btn btn-secondary">3</button>
-    <button type="button" class="btn btn-secondary">4</button>
+    <button type="button" class="btn btn-outline-secondary">1</button>
+    <button type="button" class="btn btn-outline-secondary">2</button>
+    <button type="button" class="btn btn-outline-secondary">3</button>
+    <button type="button" class="btn btn-outline-secondary">4</button>
   </div>
   <div class="input-group">
     <div class="input-group-text" id="btnGroupAddon2">@</div>
@@ -151,21 +151,21 @@ Instead of applying button sizing classes to every button in a group, just add `
 
 {{< example >}}
 <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
-  <button type="button" class="btn btn-secondary">Left</button>
-  <button type="button" class="btn btn-secondary">Middle</button>
-  <button type="button" class="btn btn-secondary">Right</button>
+  <button type="button" class="btn btn-outline-secondary">Left</button>
+  <button type="button" class="btn btn-outline-secondary">Middle</button>
+  <button type="button" class="btn btn-outline-secondary">Right</button>
 </div>
 <br>
 <div class="btn-group" role="group" aria-label="Default button group">
-  <button type="button" class="btn btn-secondary">Left</button>
-  <button type="button" class="btn btn-secondary">Middle</button>
-  <button type="button" class="btn btn-secondary">Right</button>
+  <button type="button" class="btn btn-outline-secondary">Left</button>
+  <button type="button" class="btn btn-outline-secondary">Middle</button>
+  <button type="button" class="btn btn-outline-secondary">Right</button>
 </div>
 <br>
 <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
-  <button type="button" class="btn btn-secondary">Left</button>
-  <button type="button" class="btn btn-secondary">Middle</button>
-  <button type="button" class="btn btn-secondary">Right</button>
+  <button type="button" class="btn btn-outline-secondary">Left</button>
+  <button type="button" class="btn btn-outline-secondary">Middle</button>
+  <button type="button" class="btn btn-outline-secondary">Right</button>
 </div>
 {{< /example >}}
 
@@ -179,12 +179,12 @@ This variant should not be used because it does not respect the Orange Design Sy
 
 {{< example >}}
 <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
-  <button type="button" class="btn btn-secondary">1</button>
-  <button type="button" class="btn btn-secondary">2</button>
+  <button type="button" class="btn btn-outline-secondary">1</button>
+  <button type="button" class="btn btn-outline-secondary">2</button>
 
   <div class="btn-group" role="group">
-    <button type="button" class="btn btn-secondary">Split button</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary">Split button</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -214,11 +214,11 @@ These 2 vertical variants should not be used because they do not respect the Ora
 
 {{< example >}}
 <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
-  <button type="button" class="btn btn-secondary">Button</button>
-  <button type="button" class="btn btn-secondary">Button</button>
+  <button type="button" class="btn btn-outline-secondary">Button</button>
+  <button type="button" class="btn btn-outline-secondary">Button</button>
   <div class="btn-group" role="group">
-    <button type="button" class="btn btn-secondary">Split button</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary">Split button</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -227,8 +227,8 @@ These 2 vertical variants should not be used because they do not respect the Ora
     </ul>
   </div>
   <div class="btn-group dropstart" role="group">
-    <button type="button" class="btn btn-secondary">Split button</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary">Split button</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -237,8 +237,8 @@ These 2 vertical variants should not be used because they do not respect the Ora
     </ul>
   </div>
   <div class="btn-group dropend" role="group">
-    <button type="button" class="btn btn-secondary">Split button</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary">Split button</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -247,8 +247,8 @@ These 2 vertical variants should not be used because they do not respect the Ora
     </ul>
   </div>
   <div class="btn-group dropup" role="group">
-    <button type="button" class="btn btn-secondary">Split button</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary">Split button</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md
index 635340318f..c447f11a10 100644
--- a/site/content/docs/5.3/components/buttons.md
+++ b/site/content/docs/5.3/components/buttons.md
@@ -24,6 +24,24 @@ The `.btn` class is intended to be used in conjunction with our button variants,
 
 Boosted includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control.
 
+{{< example >}}
+<button type="button" class="btn btn-primary">Primary</button>
+<button type="button" class="btn btn-secondary">Secondary</button>
+<button type="button" class="btn btn-success">Success</button>
+<button type="button" class="btn btn-danger">Danger</button>
+
+<button type="button" class="btn btn-link">Link</button>
+{{< /example >}}
+
+<details>
+<summary>Other variants from Bootstrap</summary>
+<br>
+{{< design-callout-alert >}}
+Warning, info, light and dark variants should not be used because they do not respect the Orange Design System specifications as they are inherited from Bootstrap.
+
+Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
+{{< /design-callout-alert >}}
+
 {{< example >}}
 {{< buttons.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
@@ -37,6 +55,7 @@ Boosted includes several button variants, each serving its own semantic purpose,
 {{< callout info >}}
 {{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
+</details>
 
 <!-- Boosted mod -->
 ## With icon
@@ -74,19 +93,19 @@ The recommended way of using an icon in a button is [an embedded SVG]({{< docsre
 Add `.btn-icon` to get a squared button, meant to only contain an icon. Make sure to provide an accessible name to your button, either using a `.visually-hidden` content or a `aria-label` attribute.
 
 {{< example >}}
-<button type="button" class="btn btn-icon btn-secondary btn-sm">
+<button type="button" class="btn btn-icon btn-outline-secondary btn-sm">
   <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
   </svg>
   <span class="visually-hidden">Secondary</span>
 </button>
-<button type="button" class="btn btn-icon btn-secondary">
+<button type="button" class="btn btn-icon btn-outline-secondary">
   <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
   </svg>
   <span class="visually-hidden">Secondary</span>
 </button>
-<button type="button" class="btn btn-icon btn-secondary btn-lg">
+<button type="button" class="btn btn-icon btn-outline-secondary btn-lg">
   <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
   </svg>
@@ -142,53 +161,13 @@ Supported social networks are declared in a dedicated Sass map—meaning you're
 
 ## Dark variant
 
-{{< added-in "5.2.0" >}}
-
-Add `.btn-inverse` to the `.btn` for a dark variant.
-
-{{< example class="bg-dark" >}}
-{{< buttons.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-<button type="button" class="btn btn-inverse btn-{{ .name }}">{{ .name | title }}</button>
-{{- end -}}
-{{< /buttons.inline >}}
+{{< deprecated-in "5.3.3" >}}
 
-<button type="button" class="btn btn-inverse btn-link">Link</button>
-{{< /example >}}
+{{< callout warning >}}
+**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
 
-{{< example class="bg-dark" >}}
-<button type="button" class="btn btn-inverse btn-primary">
-  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
-  </svg>
-  Primary
-</button>
-<button type="button" class="btn btn-icon btn-inverse btn-secondary">
-  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
-  </svg>
-  <span class="visually-hidden">Secondary</span>
-</button>
-<button type="button" class="btn btn-icon btn-inverse btn-no-outline">
-  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
-  </svg>
-  <span class="visually-hidden">No outline</span>
-</button>
-{{< /example >}}
-
-{{< example class="bg-dark" >}}
-<a href="#" class="btn btn-icon btn-inverse btn-social btn-twitter"><span class="visually-hidden">Twitter</span></a>
-<a href="#" class="btn btn-icon btn-inverse btn-social btn-facebook"><span class="visually-hidden">Facebook</span></a>
-<a href="#" class="btn btn-icon btn-inverse btn-social btn-instagram"><span class="visually-hidden">Instagram</span></a>
-<a href="#" class="btn btn-icon btn-inverse btn-social btn-whatsapp"><span class="visually-hidden">Whatsapp</span></a>
-<a href="#" class="btn btn-icon btn-inverse btn-social btn-linkedin"><span class="visually-hidden">LinkedIn</span></a>
-<a href="#" class="btn btn-icon btn-inverse btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a>
-<a href="#" class="btn btn-icon btn-inverse btn-social btn-snapchat"><span class="visually-hidden">Snapchat</span></a>
-<a href="#" class="btn btn-icon btn-inverse btn-social btn-pinterest"><span class="visually-hidden">Pinterest</span></a>
-<a href="#" class="btn btn-icon btn-inverse btn-social btn-mail"><span class="visually-hidden">Mail</span></a>
-<a href="#" class="btn btn-icon btn-inverse btn-social btn-tiktok"><span class="visually-hidden">TikTok</span></a>
-{{< /example >}}
+Add `data-bs-theme="dark"` to the `.btn` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
+{{< /callout >}}
 <!-- End mod -->
 
 ## Disable text wrapping
@@ -211,15 +190,34 @@ When using button classes on `<a>` elements that are used to trigger in-page fun
 
 ## Outline buttons
 
-In need of a button with a transparent default background color? Replace the default modifier classes with the `.btn-outline-secondary` one to remove all background colors on buttons.
+In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
 
-{{< example class="bg-supporting-blue" >}}
+{{< example >}}
 <button type="button" class="btn btn-outline-secondary">Secondary</button>
 {{< /example >}}
 
+<details>
+<summary>Other variants from Bootstrap</summary>
+<br>
+
+{{< design-callout-alert >}}
+The only variant of outline buttons that should be used is the `.btn-outline-secondary` one. The other variants should not be used because they do not respect the Orange Design System specifications as they are inherited from Bootstrap.
+
+Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
+{{< /design-callout-alert >}}
+
+{{< example >}}
+{{< buttons.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<button type="button" class="btn btn-outline-{{ .name }}">{{ .name | title }}</button>
+{{- end -}}
+{{< /buttons.inline >}}
+{{< /example >}}
+
 {{< callout info >}}
-This button should only be used on a light background in order to have sufficient contrast, otherwise use its dark variant.
+Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
 {{< /callout >}}
+</details>
 
 ## Sizes
 
@@ -258,6 +256,7 @@ Make buttons look inactive by adding the `disabled` boolean attribute to any `<b
 {{< example >}}
 <button type="button" class="btn btn-primary" disabled>Primary button</button>
 <button type="button" class="btn btn-secondary" disabled>Button</button>
+<button type="button" class="btn btn-outline-secondary" disabled>Button</button>
 {{< /example >}}
 
 Disabled buttons using the `<a>` element behave a bit different:
@@ -402,11 +401,11 @@ Each `.btn-*` modifier class updates the appropriate CSS variables to minimize a
 
 ### Sass mixins
 
-There are three mixins for buttons: button mixins (based on `$theme-colors`), a button size mixin and a button icon mixin.
+There are four mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin, and a button icon mixin.
 
 {{< scss-docs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" >}}
 
-<!-- Boosted mod: no .btn-outline -->
+{{< scss-docs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" >}}
 
 {{< scss-docs name="btn-size-mixin" file="scss/mixins/_buttons.scss" >}}
 
diff --git a/site/content/docs/5.3/components/close-button.md b/site/content/docs/5.3/components/close-button.md
index 29f2a749c2..da014c8624 100644
--- a/site/content/docs/5.3/components/close-button.md
+++ b/site/content/docs/5.3/components/close-button.md
@@ -26,11 +26,17 @@ Disabled close buttons change their `color`. We've also applied `pointer-events:
 
 ## Dark variant
 
-Add `.btn-close-white` to the `.btn-close` for a dark variant.
+{{< deprecated-in "5.3.3" >}}
+
+{{< callout warning >}}
+**Heads up!** As of v5.3.3, the `.btn-close-white` class is deprecated. Instead, use `data-bs-theme="dark"` to change the color mode of the close button.
+{{< /callout >}}
+
+Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value.
 
 {{< example class="bg-dark" stackblitz_add_js="true" >}}
-<button type="button" class="btn-close btn-close-white" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
-<button type="button" class="btn-close btn-close-white" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+<button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+<button type="button" class="btn-close" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
 {{< /example >}}
 
 ## Eco-design variant
@@ -52,34 +58,12 @@ If you choose this option, please be aware that if the design of close buttons c
   <span class="visually-hidden">Close</span>
 </button>
 
-<button type="button" class="btn btn-icon btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+<button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
   <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
   <span class="visually-hidden">Close</span>
 </button>
 
-<button type="button" class="btn btn-icon btn-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
-  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
-  <span class="visually-hidden">Close</span>
-</button>
-{{< /example >}}
-
-{{< example class="bg-dark" >}}
-<button type="button" class="btn btn-icon btn-no-outline btn-inverse" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
-  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
-  <span class="visually-hidden">Close</span>
-</button>
-
-<button type="button" class="btn btn-icon btn-no-outline btn-inverse" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
-  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
-  <span class="visually-hidden">Close</span>
-</button>
-
-<button type="button" class="btn btn-icon btn-secondary btn-inverse" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
-  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
-  <span class="visually-hidden">Close</span>
-</button>
-
-<button type="button" class="btn btn-icon btn-secondary btn-inverse" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+<button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
   <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
   <span class="visually-hidden">Close</span>
 </button>
@@ -97,16 +81,6 @@ As part of Boosted’s evolving CSS variables approach, close button now use loc
 
 {{< scss-docs name="close-css-vars" file="scss/_close.scss" >}}
 
-Customization through CSS variables can be seen on the `.btn-close-white` modifier class where we override specific values without adding duplicate CSS selectors.
-
-{{< scss-docs name="btn-close-white-css-vars" file="scss/_close.scss" >}}
-
 ### Sass variables
 
-Variables for all close buttons:
-
 {{< scss-docs name="close-variables" file="scss/_variables.scss" >}}
-
-Variables for the [dark close button](#dark-variant):
-
-{{< scss-docs name="close-white-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md
index 3f1a590940..79c5615058 100644
--- a/site/content/docs/5.3/components/dropdowns.md
+++ b/site/content/docs/5.3/components/dropdowns.md
@@ -71,8 +71,8 @@ We use this extra class to reduce the horizontal `padding` on either side of the
 
 {{< example >}}
 <div class="btn-group">
-  <button type="button" class="btn btn-secondary">Action</button>
-  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-outline-secondary">Action</button>
+  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
@@ -103,8 +103,8 @@ Button dropdowns work with buttons of all sizes, including default and split dro
     </ul>
   </div>
   <div class="btn-group">
-    <button type="button" class="btn btn-lg btn-secondary">Large split button</button>
-    <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-lg btn-outline-secondary">Large split button</button>
+    <button type="button" class="btn btn-lg btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -128,10 +128,10 @@ Button dropdowns work with buttons of all sizes, including default and split dro
   </ul>
 </div>
 <div class="btn-group">
-  <button class="btn btn-secondary btn-lg" type="button">
+  <button class="btn btn-outline-secondary btn-lg" type="button">
     Large split button
   </button>
-  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-lg btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
@@ -160,8 +160,8 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
     </ul>
   </div>
   <div class="btn-group">
-    <button type="button" class="btn btn-sm btn-secondary">Small split button</button>
-    <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-sm btn-outline-secondary">Small split button</button>
+    <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -184,10 +184,10 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
   </ul>
 </div>
 <div class="btn-group">
-  <button class="btn btn-secondary btn-sm" type="button">
+  <button class="btn btn-outline-secondary btn-sm" type="button">
     Small split button
   </button>
-  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
@@ -198,70 +198,11 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
 
 ## Dark dropdowns
 
-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.
+{{< deprecated-in "5.3.3" >}}
 
-{{< example class="bg-dark" >}}
-<div class="btn-group">
-  <div class="dropdown">
-    <button class="btn btn-secondary btn-inverse dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-      Dropdown button
-    </button>
-    <ul class="dropdown-menu dropdown-menu-dark">
-      <li><a class="dropdown-item active" href="#">Action</a></li>
-      <li><a class="dropdown-item" href="#">Another action</a></li>
-      <li><a class="dropdown-item" href="#">Something else here</a></li>
-      <li><hr class="dropdown-divider"></li>
-      <li><a class="dropdown-item" href="#">Separated link</a></li>
-    </ul>
-  </div>
-</div>
-
-<div class="btn-group">
-  <button type="button" class="btn btn-secondary btn-inverse">Action</button>
-  <button type="button" class="btn btn-secondary btn-inverse dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-    <span class="visually-hidden">Toggle Dropdown</span>
-  </button>
-  <ul class="dropdown-menu dropdown-menu-dark">
-    <li><a class="dropdown-item active" href="#">Action</a></li>
-    <li><a class="dropdown-item" href="#">Another action</a></li>
-    <li><a class="dropdown-item" href="#">Something else here</a></li>
-    <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item" href="#">Separated link</a></li>
-  </ul>
-</div>
-{{< /example >}}
-
-And putting it to use in a navbar:
+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.
 
-{{< example >}}
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-  <div class="container-fluid">
-    <div class="navbar-brand">
-      <a class="stretched-link" href="#">
-        <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
-      </a>
-      <h1 class="title">Navbar</h1>
-    </div>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
-      <ul class="navbar-nav">
-        <li class="nav-item dropdown">
-          <button class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-            Dropdown
-          </button>
-          <ul class="dropdown-menu dropdown-menu-dark">
-            <li><a class="dropdown-item" href="#">Action</a></li>
-            <li><a class="dropdown-item" href="#">Another action</a></li>
-            <li><a class="dropdown-item" href="#">Something else here</a></li>
-          </ul>
-        </li>
-      </ul>
-    </div>
-  </div>
-</nav>
-{{< /example >}}
+{{< callout-deprecated-dark-variants "dropdown-menu" >}}
 
 ## Directions
 
@@ -310,10 +251,10 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
     </ul>
   </div>
   <div class="btn-group dropup">
-    <button type="button" class="btn btn-secondary">
+    <button type="button" class="btn btn-outline-secondary">
       Split dropup
     </button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -339,10 +280,10 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
 
 <!-- Split dropup button -->
 <div class="btn-group dropup">
-  <button type="button" class="btn btn-secondary">
+  <button type="button" class="btn btn-outline-secondary">
     Split dropup
   </button>
-  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
@@ -392,10 +333,10 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the
     </ul>
   </div>
   <div class="btn-group dropend">
-    <button type="button" class="btn btn-secondary">
+    <button type="button" class="btn btn-outline-secondary">
       Split dropend
     </button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropend</span>
     </button>
     <ul class="dropdown-menu">
@@ -421,10 +362,10 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the
 
 <!-- Split dropend button -->
 <div class="btn-group dropend">
-  <button type="button" class="btn btn-secondary">
+  <button type="button" class="btn btn-outline-secondary">
     Split dropend
   </button>
-  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropend</span>
   </button>
   <ul class="dropdown-menu">
@@ -451,7 +392,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropstart` to the
     </ul>
   </div>
   <div class="btn-group dropstart">
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropstart</span>
     </button>
     <ul class="dropdown-menu">
@@ -461,7 +402,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropstart` to the
       <li><hr class="dropdown-divider"></li>
       <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
-    <button type="button" class="btn btn-secondary">
+    <button type="button" class="btn btn-outline-secondary">
       Split dropstart
     </button>
   </div>
@@ -480,13 +421,13 @@ Trigger dropdown menus at the left of the elements by adding `.dropstart` to the
 
 <!-- Split dropstart button -->
 <div class="btn-group dropstart">
-  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropstart</span>
   </button>
   <ul class="dropdown-menu">
     <!-- Dropdown menu links -->
   </ul>
-  <button type="button" class="btn btn-secondary">
+  <button type="button" class="btn btn-outline-secondary">
     Split dropstart
   </button>
 </div>
@@ -816,8 +757,8 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
     </ul>
   </div>
   <div class="btn-group">
-    <button type="button" class="btn btn-secondary">Reference</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
+    <button type="button" class="btn btn-outline-secondary">Reference</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -901,20 +842,12 @@ Dropdown items include at least one variable that is not set on `.dropdown`. Thi
 - `--bs-dropdown-item-border-radius`
 {{< /callout >}}
 
-Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
-
-{{< scss-docs name="dropdown-dark-css-vars" file="scss/_dropdown.scss" >}}
-
 ### Sass variables
 
 Variables for all dropdowns:
 
 {{< scss-docs name="dropdown-variables" file="scss/_variables.scss" >}}
 
-Variables for the [dark dropdown](#dark-dropdowns):
-
-{{< scss-docs name="dropdown-dark-variables" file="scss/_variables.scss" >}}
-
 Variables for the CSS-based carets that indicate a dropdown's interactivity:
 
 {{< scss-docs name="caret-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md
index 5edd699ac2..bad3094b8c 100644
--- a/site/content/docs/5.3/components/list-group.md
+++ b/site/content/docs/5.3/components/list-group.md
@@ -335,45 +335,13 @@ You can use `.stretched-link` on `<label>`s to make the whole list group item cl
 <!-- Boosted mod -->
 ## Dark variant
 
-{{< added-in "5.2.1" >}}
+{{< deprecated-in "5.3.3" >}}
 
-Add `.list-group-dark` to the `.list-group` for a dark variant.
+{{< callout warning >}}
+**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
 
-{{< example class="bg-dark" >}}
-<ul class="list-group list-group-dark">
-  <li class="list-group-item">A simple default list group item</li>
-{{< list.inline >}}
-{{- range (index $.Site.Data "palette") }}
-  {{- if (eq .category "Functional colors") }}
-    {{- range (index .colors) }}
-  <li class="list-group-item list-group-item-{{ .level }}">A simple {{ .level }} list group item</li>
-    {{- end -}}
-  {{- end -}}
-{{- end -}}
-{{< /list.inline >}}
-  <li class="list-group-item list-group-item-info active">A simple active info list group item</li>
-  <li class="list-group-item list-group-item-info disabled" aria-disabled="true">A simple disabled info list group item</li>
-</ul>
-{{< /example >}}
-
-Dark variant also work with `.list-group-item-action`.
-
-{{< example class="bg-dark" >}}
-<div class="list-group list-group-dark">
-  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
-{{< list.inline >}}
-{{- range (index $.Site.Data "palette") -}}
-  {{- if (eq .category "Functional colors") -}}
-    {{- range (index .colors) }}
-  <a href="#" class="list-group-item list-group-item-action list-group-item-{{ .level }}">A simple {{ .level }} list group item</a>
-    {{- end -}}
-  {{- end -}}
-{{- end -}}
-{{< /list.inline >}}
-  <a href="#" class="list-group-item list-group-item-action list-group-item-success active">A simple active success list group item</a>
-  <a class="list-group-item list-group-item-action list-group-item-info disabled">A simple disabled info list group item</a>
-</div>
-{{< /example >}}
+Add `data-bs-theme="dark"` to the `.list-group` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
+{{< /callout >}}
 <!-- End mod -->
 
 ## CSS
@@ -386,24 +354,10 @@ As part of Boosted's evolving CSS variables approach, list groups now use local
 
 {{< scss-docs name="list-group-css-vars" file="scss/_list-group.scss" >}}
 
-<!-- Boosted mod -->
-Customization through CSS variables can be seen on the `.list-group-dark` modifier class where we override specific values without adding duplicate CSS selectors.
-
-{{< scss-docs name="list-group-dark-css-vars" file="scss/_list-group.scss" >}}
-<!-- End mod -->
-
 ### Sass variables
 
-Variables for all list groups:
-
 {{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}}
 
-<!-- Boosted mod -->
-Variables for the [dark list group](#dark-variant):
-
-{{< scss-docs name="list-group-dark-variables" file="scss/_variables.scss" >}}
-<!-- End mod -->
-
 ### Sass mixins
 
 {{< deprecated-in "5.3.0" >}}
diff --git a/site/content/docs/5.3/components/local-navigation.md b/site/content/docs/5.3/components/local-navigation.md
index e317fa9389..f1e1cea3d0 100644
--- a/site/content/docs/5.3/components/local-navigation.md
+++ b/site/content/docs/5.3/components/local-navigation.md
@@ -37,25 +37,13 @@ Since the component is supposed to be rendered on a full-size page, there are so
 
 ## Dark variant
 
-Add `.local-nav-dark` to the `.local-nav` for a dark variant. Don't forget to add `.navbar-dark` to the navbar.
+{{< deprecated-in "5.3.3" >}}
 
-{{< example class="bg-dark" >}}
-<nav class="local-nav local-nav-dark" aria-label="Local navigation on dark">
-  <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNavDark" aria-expanded="false" aria-controls="collapseLocalNavDark">
-    <span class="container-xxl">Shop</span>
-  </button>
-  <div id="collapseLocalNavDark" class="container-xxl local-nav-collapse d-lg-block collapse">
-      <div class="navbar navbar-dark navbar-expand-lg">
-        <ul class="navbar-nav w-100">
-          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
-          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
-          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
-          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
-        </ul>
-      </div>
-  </div>
-</nav>
-{{< /example >}}
+{{< callout warning >}}
+**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
+
+Add `data-bs-theme="dark"` to the `.local-nav` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
+{{< /callout >}}
 
 ## CSS
 
@@ -65,16 +53,6 @@ Values for the CSS variables are set via Sass, so Sass customization is still su
 
 {{< scss-docs name="local-nav-css-vars" file="scss/_local-navigation.scss" >}}
 
-Customization through CSS variables can be seen on the `.local-nav-dark` class where we override specific values without adding duplicate CSS selectors.
-
-{{< scss-docs name="local-nav-dark-css-vars" file="scss/_local-navigation.scss" >}}
-
 ### Sass variables
 
-Variables for all local navigations:
-
 {{< scss-docs name="local-nav-variables" file="scss/_variables.scss" >}}
-
-Variables for the [dark local navigation](#dark-variant):
-
-{{< scss-docs name="local-nav-dark-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md
index 23bbb43cb4..46620d1a78 100644
--- a/site/content/docs/5.3/components/modal.md
+++ b/site/content/docs/5.3/components/modal.md
@@ -52,7 +52,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
           <p>Modal body text goes here.</p>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary">Save changes</button>
         </div>
       </div>
@@ -72,7 +72,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
         <p>Modal body text goes here.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -98,7 +98,7 @@ Modals may start with a picture. Add `.modal-img` to your `<img>` or `<svg>` tag
           <p>Modal body text goes here.</p>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary">Save changes</button>
         </div>
       </div>
@@ -119,7 +119,7 @@ Modals may start with a picture. Add `.modal-img` to your `<img>` or `<svg>` tag
         <p>Modal body text goes here.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -147,7 +147,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
         <p>Woo-hoo, you're reading this text in a modal!</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -178,7 +178,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -201,7 +201,7 @@ When backdrop is set to static, the modal will not close when clicking outside o
         <p>I will not close if you click outside of me. Don't even try to press escape key.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Understood</button>
       </div>
     </div>
@@ -232,7 +232,7 @@ When backdrop is set to static, the modal will not close when clicking outside o
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Understood</button>
       </div>
     </div>
@@ -255,7 +255,7 @@ When modals become too long for the user's viewport or device, they scroll indep
         <p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -283,7 +283,7 @@ You can also create a scrollable modal that allows scrolling the modal body by a
         <p>This content should appear at the bottom after you scroll.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -318,7 +318,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
         <p>This is a vertically centered modal.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -338,7 +338,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
         <p>Just like that.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -385,7 +385,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
         <p><a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -448,7 +448,7 @@ Utilize the Boosted grid system within a modal by nesting `.container-fluid` wit
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -523,7 +523,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
         </form>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Send message</button>
       </div>
     </div>
@@ -725,7 +725,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -742,7 +742,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -759,7 +759,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -776,7 +776,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -793,7 +793,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -810,7 +810,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md
index 70638127f5..90ddae8de8 100644
--- a/site/content/docs/5.3/components/navbar.md
+++ b/site/content/docs/5.3/components/navbar.md
@@ -45,7 +45,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
 Here's an example of all the sub-components included in a responsive dark-themed navbar that automatically collapses at the `lg` (large) breakpoint.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+<nav class="navbar navbar-expand-lg bg-dark">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -67,7 +67,7 @@ Here's an example of all the sub-components included in a responsive dark-themed
           <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
             Dropdown
           </a>
-          <ul class="dropdown-menu dropdown-menu-dark">
+          <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><hr class="dropdown-divider"></li>
@@ -80,7 +80,7 @@ Here's an example of all the sub-components included in a responsive dark-themed
       </ul>
       <form class="d-flex navbar-item ms-3" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-primary btn-inverse" type="submit">Search</button>
+        <button class="btn btn-primary" type="submit">Search</button>
       </form>
     </div>
   </div>
@@ -97,7 +97,7 @@ The `.navbar-brand` can be used to contain most elements, but an anchor works be
 {{< example >}}
 <!-- As a link -->
 <header>
-  <nav class="navbar navbar-dark bg-dark">
+  <nav class="navbar bg-dark">
     <div class="container-fluid">
       <div class="navbar-brand">
         <a class="stretched-link" href="#">
@@ -111,7 +111,7 @@ The `.navbar-brand` can be used to contain most elements, but an anchor works be
 
 <!-- As a heading -->
 <header class="mt-3">
-  <nav class="navbar navbar-dark bg-dark">
+  <nav class="navbar bg-dark">
     <div class="container-fluid">
       <div class="navbar-brand">
         <span class="stretched-link">
@@ -134,7 +134,7 @@ Add the `.active` class on `.nav-link` to indicate the current page.
 Please note that you should also add the `aria-current` attribute on the active `.nav-link`.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+<nav class="navbar navbar-expand-lg bg-dark">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -167,7 +167,7 @@ Please note that you should also add the `aria-current` attribute on the active
 And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+<nav class="navbar navbar-expand-lg bg-dark">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -192,7 +192,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
 You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+<nav class="navbar navbar-expand-lg bg-dark">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -217,7 +217,7 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
           <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
             Dropdown link
           </a>
-          <ul class="dropdown-menu dropdown-menu-dark">
+          <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -234,11 +234,11 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
 Place various form controls and components within a navbar:
 
 {{< example >}}
-<nav class="navbar navbar-dark bg-dark">
+<nav class="navbar bg-dark">
   <div class="container-fluid">
     <form class="d-flex" role="search">
       <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-      <button class="btn btn-primary btn-inverse" type="submit">Search</button>
+      <button class="btn btn-primary" type="submit">Search</button>
     </form>
   </div>
 </nav>
@@ -247,7 +247,7 @@ Place various form controls and components within a navbar:
 Immediate child elements of `.navbar` use flex layout<!-- Boosted mod: no justify-content -->. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.
 
 {{< example >}}
-<nav class="navbar navbar-dark bg-dark">
+<nav class="navbar bg-dark">
   <div class="container-fluid">
     <div class="navbar-brand me-auto">
       <a class="stretched-link" href="#">
@@ -256,7 +256,7 @@ Immediate child elements of `.navbar` use flex layout<!-- Boosted mod: no justif
     </div>
     <form class="d-flex navbar-item" role="search">
       <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-      <button class="btn btn-primary btn-inverse" type="submit">Search</button>
+      <button class="btn btn-primary" type="submit">Search</button>
     </form>
   </div>
 </nav>
@@ -265,7 +265,7 @@ Immediate child elements of `.navbar` use flex layout<!-- Boosted mod: no justif
 Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<form>` element as the container and save some HTML. Applies to the option above and below this copy.
 
 {{< example >}}
-<nav class="navbar navbar-dark bg-dark">
+<nav class="navbar bg-dark">
   <form class="container-fluid">
     <div class="input-group">
       <span class="input-group-text text-white" id="basic-addon1">@</span>
@@ -278,10 +278,10 @@ Input groups work, too. If your navbar is an entire form, or mostly a form, you
 Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
 
 {{< example >}}
-<nav class="navbar navbar-dark bg-dark">
+<nav class="navbar bg-dark">
   <form class="container-fluid justify-content-start align-items-center">
-    <button class="btn btn-primary btn-inverse me-2" type="button">Main button</button>
-    <button class="btn btn-sm btn-primary btn-inverse" type="button">Smaller button</button>
+    <button class="btn btn-primary me-2" type="button">Main button</button>
+    <button class="btn btn-sm btn-primary" type="button">Smaller button</button>
   </form>
 </nav>
 {{< /example >}}
@@ -291,7 +291,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a
 Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
 
 {{< example >}}
-<nav class="navbar navbar-dark bg-dark">
+<nav class="navbar bg-dark">
   <div class="container-fluid">
     <span class="navbar-text">
       Navbar text with an inline element
@@ -303,7 +303,7 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
 Mix and match with other components and utilities as needed.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+<nav class="navbar navbar-expand-lg bg-dark">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -336,14 +336,14 @@ Mix and match with other components and utilities as needed.
 ## Color schemes
 
 {{< callout warning >}}
-**New in v5.2.0:** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the "light" appearance, and can be overridden with `.navbar-dark`.
-{{< /callout >}}
+**New dark navbars in v5.3.3 —** We've deprecated `.navbar-dark` in favor of the new `data-bs-theme="dark"`. Add `data-bs-theme="dark"` to the `.navbar` to enable a component-specific color mode. [Learn more about our color modes.]({{< docsref "/customize/color-modes" >}})
 
-Navbar themes are easier than ever thanks to Boosted's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.
+---
 
-Please note that "light navbar" is not compatible with Orange Design System. You will mostly find examples using a combination of `.navbar-dark` and `.bg-dark`.
+**New in v5.2.0  —** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the "light" appearance, and can be overridden with `.navbar-dark`.
+{{< /callout >}}
 
-<!-- Boosted mod: hide the .navbar-light example since it is not valid by design but keep the possibility to use it anyway -->
+Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.
 
 ## Containers
 
@@ -351,7 +351,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
 
 {{< example >}}
 <div class="container">
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+  <nav class="navbar navbar-expand-lg bg-dark">
     <div class="container-fluid">
       <div class="navbar-brand">
         <a class="stretched-link" href="#">
@@ -366,7 +366,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
 Use any of the responsive containers to change how wide the content in your navbar is presented.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+<nav class="navbar navbar-expand-lg bg-dark">
   <div class="container-md">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -384,7 +384,7 @@ Use our [position utilities]({{< docsref "/utilities/position" >}}) to place nav
 Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
 
 {{< example >}}
-<nav class="navbar navbar-dark bg-dark">
+<nav class="navbar bg-dark">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -397,7 +397,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
 {{< /example >}}
 
 {{< example >}}
-<nav class="navbar fixed-top navbar-dark bg-dark">
+<nav class="navbar fixed-top bg-dark">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -410,7 +410,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
 {{< /example >}}
 
 {{< example >}}
-<nav class="navbar fixed-bottom navbar-dark bg-dark">
+<nav class="navbar fixed-bottom bg-dark">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -423,7 +423,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
 {{< /example >}}
 
 {{< example >}}
-<nav class="navbar sticky-top navbar-dark bg-dark">
+<nav class="navbar sticky-top bg-dark">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -436,7 +436,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
 {{< /example >}}
 
 {{< example >}}
-<nav class="navbar sticky-bottom navbar-dark bg-dark">
+<nav class="navbar sticky-bottom bg-dark">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -457,7 +457,7 @@ Please note that this behavior comes with a potential drawback of `overflow`—w
 Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-height: 100px;"`, with some extra margin utilities for optimum spacing.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+<nav class="navbar navbar-expand-lg bg-dark">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -480,7 +480,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei
           <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
             Link
           </a>
-          <ul class="dropdown-menu dropdown-menu-dark">
+          <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><hr class="dropdown-divider"></li>
@@ -490,7 +490,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei
       </ul>
       <form class="d-flex navbar-item ms-3 mt-md-4" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-primary btn-inverse" type="submit">Search</button>
+        <button class="btn btn-primary" type="submit">Search</button>
       </form>
     </div>
   </div>
@@ -516,7 +516,7 @@ Sometimes you want to use the collapse plugin to trigger a container element for
     <span class="text-body-secondary">Toggleable via the navbar brand.</span>
   </div>
 </div>
-<nav class="navbar navbar-dark bg-dark">
+<nav class="navbar bg-dark">
   <div class="container-fluid">
     <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -589,19 +589,18 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br
 </nav>
 ```
 
-When using offcanvas in a dark navbar, be aware that you may need to have a dark background on the offcanvas content to avoid the text becoming illegible. In the example below, we add `.navbar-dark` and `.bg-dark` to the `.navbar`, `.text-bg-dark` to the `.offcanvas`, `.dropdown-menu-dark` to `.dropdown-menu`, and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas.
+When using offcanvas in a dark navbar, be aware that you may need to have a dark background on the offcanvas content to avoid the text becoming illegible. In the example below, we add `.bg-dark` to the `.navbar`, `.text-bg-dark` to the `.offcanvas` for proper styling with a dark offcanvas.
 
 {{< example stackblitz_add_js="true" >}}
-<nav class="navbar navbar-dark bg-dark fixed-top">
+<nav class="navbar bg-dark fixed-top">
   <div class="container-fluid">
-    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
     <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
-        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"></button>
       </div>
       <div class="offcanvas-body">
         <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
@@ -615,7 +614,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
             <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Dropdown
             </a>
-            <ul class="dropdown-menu dropdown-menu-dark">
+            <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li>
@@ -627,7 +626,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
         </ul>
         <form class="d-flex mt-3" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-          <button class="btn btn btn-primary btn-inverse" type="submit">Search</button>
+          <button class="btn btn btn-primary" type="submit">Search</button>
         </form>
       </div>
     </div>
@@ -651,20 +650,10 @@ Some additional CSS variables are also present on `.navbar-nav`:
 
 {{< scss-docs name="navbar-nav-css-vars" file="scss/_navbar.scss" >}}
 
-Customization through CSS variables can be seen on the `.navbar-dark` class where we override specific values without adding duplicate CSS selectors.
-
-{{< scss-docs name="navbar-dark-css-vars" file="scss/_navbar.scss" >}}
-
 ### Sass variables
 
-Variables for all navbars:
-
 {{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}}
 
-Variables for the [dark navbar](#color-schemes):
-
-{{< scss-docs name="navbar-dark-variables" file="scss/_variables.scss" >}}
-
 ### Sass loops
 
 [Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.
diff --git a/site/content/docs/5.3/components/offcanvas.md b/site/content/docs/5.3/components/offcanvas.md
index 7a06b329bc..7f4b3619f0 100644
--- a/site/content/docs/5.3/components/offcanvas.md
+++ b/site/content/docs/5.3/components/offcanvas.md
@@ -146,15 +146,19 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
 
 ## Dark offcanvas
 
-{{< added-in "5.2.0" >}}
+{{< 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.
 
-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` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
+{{< 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 btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"></button>
+    <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>
diff --git a/site/content/docs/5.3/components/orange-navbar.md b/site/content/docs/5.3/components/orange-navbar.md
index 71201bc892..cf0ac1d7a3 100644
--- a/site/content/docs/5.3/components/orange-navbar.md
+++ b/site/content/docs/5.3/components/orange-navbar.md
@@ -87,7 +87,7 @@ An additional navbar (with text or icon items) can be added on the right of the
 ```html
 <header>
   <!-- Supra bar -->
-  <nav class="navbar navbar-dark navbar-expand-lg bg-dark supra" aria-label="Supra navigation - Responsive behavior example">
+  <nav class="navbar navbar-expand-lg bg-dark supra" aria-label="Supra navigation - Responsive behavior example">
     <div class="container-xxl">
       <!-- Left navbar of the Supra bar -->
       <ul class="navbar-nav me-auto">
@@ -101,7 +101,7 @@ An additional navbar (with text or icon items) can be added on the right of the
   </nav>
 
   <!-- Global header -->
-  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - Responsive behavior with a supra bar example">
+  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation - Responsive behavior with a supra bar example">
     <div class="container-xxl">
 
       <!-- Orange brand logo -->
@@ -151,7 +151,7 @@ An additional navbar (with text or icon items) can be added on the right of the
 
 ```html
 <header>
-  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - Standard example">
+  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation - Standard example">
     <div class="container-xxl">
 
       <!-- Orange brand logo -->
@@ -231,7 +231,7 @@ If you do not intend to use your own SVG, you should explore the DOM solution an
 
 ```html
 <header>
-  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - With custom logo example">
+  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation - With custom logo example">
     <div class="container-xxl">
 
       <!-- Orange brand logo -->
@@ -268,7 +268,7 @@ Next to the brand logo, you can add a title that can be displayed on one or two
 
 ```html
 <header>
-  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - With one line title example">
+  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation - With one line title example">
     <div class="container-xxl">
 
       <!-- Orange brand logo -->
@@ -302,7 +302,7 @@ Next to the brand logo, you can add a title that can be displayed on one or two
 
 ```html
 <header>
-  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - With two lines title example">
+  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation - With two lines title example">
     <div class="container-xxl">
 
       <!-- Orange brand logo -->
@@ -343,7 +343,7 @@ You can add a search input into your Global header.
 
 ```html
 <header>
-  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - With search box example">
+  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation - With search box example">
     <div class="container-xxl">
 
       <!-- Orange brand logo -->
@@ -408,7 +408,7 @@ It should be visible only for the larger screens (`lg` to `xxl` breakpoints) usi
 
 ```html
 <header>
-  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - Standard example with nav-under">
+  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation - Standard example with nav-under">
     <div class="container-xxl">
 
       <!-- Orange brand logo -->
@@ -425,7 +425,7 @@ It should be visible only for the larger screens (`lg` to `xxl` breakpoints) usi
     </div>
   </nav>
 
-  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - Nav-under example">
+  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation - Nav-under example">
     <div class="container-xxl">
       <div id="global-header-6.1" class="navbar-collapse collapse m-0 global-header-6">
         <ul class="navbar-nav">
diff --git a/site/content/docs/5.3/components/pagination.md b/site/content/docs/5.3/components/pagination.md
index 6711464e36..d9d28ea5fd 100644
--- a/site/content/docs/5.3/components/pagination.md
+++ b/site/content/docs/5.3/components/pagination.md
@@ -146,27 +146,13 @@ To avoid pagination wrapping or overflowing, we limit the number or pagination i
 
 ## Dark variant
 
-{{< added-in "5.2.1" >}}
+{{< deprecated-in "5.3.3" >}}
 
-Add `.pagination-dark` to the `.pagination` for a dark variant.
+{{< callout warning >}}
+**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
 
-{{< example class="bg-dark" >}}
-<nav aria-label="Dark page navigation example">
-  <ul class="pagination pagination-dark">
-    <li class="page-item disabled">
-      <a class="page-link">Previous</a>
-    </li>
-    <li class="page-item active" aria-current="page">
-      <a class="page-link" href="#">1</a>
-    </li>
-    <li class="page-item"><a class="page-link" href="#">2</a></li>
-    <li class="page-item"><a class="page-link" href="#">3</a></li>
-    <li class="page-item">
-      <a class="page-link" href="#">Next</a>
-    </li>
-  </ul>
-</nav>
-{{< /example >}}
+Add `data-bs-theme="dark"` to the `.pagination` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
+{{< /callout >}}
 <!-- End mod -->
 
 ## CSS
@@ -179,20 +165,10 @@ As part of Boosted's evolving CSS variables approach, pagination now uses local
 
 {{< scss-docs name="pagination-css-vars" file="scss/_pagination.scss" >}}
 
-Customization through CSS variables can be seen on the `.pagination-dark` modifier class where we override specific values without adding duplicate CSS selectors.
-
-{{< scss-docs name="pagination-dark-css-vars" file="scss/_pagination.scss" >}}
-
 ### Sass variables
 
-Variables for all paginations:
-
 {{< scss-docs name="pagination-variables" file="scss/_variables.scss" >}}
 
-Variables for the [dark pagination](#dark-variant):
-
-{{< scss-docs name="pagination-dark-variables" file="scss/_variables.scss" >}}
-
 ### Sass mixins
 
 {{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}}
diff --git a/site/content/docs/5.3/components/spinners.md b/site/content/docs/5.3/components/spinners.md
index f7689a5613..53b57d1294 100644
--- a/site/content/docs/5.3/components/spinners.md
+++ b/site/content/docs/5.3/components/spinners.md
@@ -43,13 +43,7 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c
 <div class="spinner-border text-primary" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
-{{< /example >}}
-
-{{< example class="bg-dark" >}}
-<div class="spinner-border text-primary" role="status">
-  <span class="visually-hidden">Loading...</span>
-</div>
-<div class="spinner-border text-white" role="status">
+<div class="spinner-border text-body" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}
@@ -78,13 +72,7 @@ Once again, this spinner is built with `currentColor`, so you can easily change
 <div class="spinner-grow text-primary" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
-{{< /example >}}
-
-{{< example class="bg-dark" >}}
-<div class="spinner-grow text-primary" role="status">
-  <span class="visually-hidden">Loading...</span>
-</div>
-<div class="spinner-grow text-white" role="status">
+<div class="spinner-grow text-body" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}
@@ -172,22 +160,22 @@ Use spinners within buttons to indicate an action is currently processing or tak
 
 {{< example >}}
 <button class="btn btn-primary" type="button" disabled>
-  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+  <span class="spinner-border spinner-border-sm" aria-hidden="true" data-bs-theme="dark"></span>
   <span class="visually-hidden" role="status">Loading...</span>
 </button>
 <button class="btn btn-primary" type="button" disabled>
-  <span class="spinner-border spinner-border-sm me-2" aria-hidden="true"></span>
+  <span class="spinner-border spinner-border-sm me-2" aria-hidden="true" data-bs-theme="dark"></span>
   <span role="status">Loading...</span>
 </button>
 {{< /example >}}
 
 {{< example >}}
 <button class="btn btn-primary" type="button" disabled>
-  <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
+  <span class="spinner-grow spinner-grow-sm" aria-hidden="true" data-bs-theme="dark"></span>
   <span class="visually-hidden" role="status">Loading...</span>
 </button>
 <button class="btn btn-primary" type="button" disabled>
-  <span class="spinner-grow spinner-grow-sm me-2" aria-hidden="true"></span>
+  <span class="spinner-grow spinner-grow-sm me-2" aria-hidden="true" data-bs-theme="dark"></span>
   <span role="status">Loading...</span>
 </button>
 {{< /example >}}
diff --git a/site/content/docs/5.3/components/stepped-process.md b/site/content/docs/5.3/components/stepped-process.md
index 205f2f7208..9665076a7a 100644
--- a/site/content/docs/5.3/components/stepped-process.md
+++ b/site/content/docs/5.3/components/stepped-process.md
@@ -47,32 +47,13 @@ Add `.active` to a `.stepped-process-item` to indicate the current step, alongsi
 
 ## Dark variant
 
-{{< added-in "5.2.1" >}}
+{{< deprecated-in "5.3.3" >}}
 
-Add `.stepped-process-dark` to the `.stepped-process` for a dark variant.
+{{< callout warning >}}
+**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
 
-{{< example class="bg-dark" >}}
-<nav class="stepped-process stepped-process-dark" aria-label="Checkout process">
-  <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
-  <ol>
-    <li class="stepped-process-item">
-      <a class="stepped-process-link" href="#" title="1. Sign in">Sign in</a>
-    </li>
-    <li class="stepped-process-item active">
-      <a class="stepped-process-link" title="2. Review" aria-current="step">Review</a>
-    </li>
-    <li class="stepped-process-item">
-      <a class="stepped-process-link" href="#" title="3. Delivery">Delivery</a>
-    </li>
-    <li class="stepped-process-item">
-      <a class="stepped-process-link" href="#" title="4. Payment">Payment</a>
-    </li>
-    <li class="stepped-process-item">
-      <a class="stepped-process-link" href="#" title="5. Place order">Place order</a>
-    </li>
-  </ol>
-</nav>
-{{< /example >}}
+Add `data-bs-theme="dark"` to the `.stepped-process` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
+{{< /callout >}}
 
 ## CSS
 
@@ -84,16 +65,6 @@ As part of Boosted's evolving CSS variables approach, stepped processes now use
 
 {{< scss-docs name="stepped-process-css-vars" file="scss/_stepped-process.scss" >}}
 
-Customization through CSS variables can be seen on the `.stepped-process-dark` modifier class where we override specific values without adding duplicate CSS selectors.
-
-{{< scss-docs name="stepped-process-dark-css-vars" file="scss/_stepped-process.scss" >}}
-
 ### Sass variables
 
-Variables for all stepped processes:
-
 {{< scss-docs name="stepped-process" file="scss/_variables.scss" >}}
-
-Variables for the [dark stepped process](#dark-variant):
-
-{{< scss-docs name="stepped-process-dark-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.3/components/tags.md b/site/content/docs/5.3/components/tags.md
index 6e1f151943..02da425c1d 100644
--- a/site/content/docs/5.3/components/tags.md
+++ b/site/content/docs/5.3/components/tags.md
@@ -118,24 +118,13 @@ Here is an [accessible example](https://a11y-guidelines.orange.com/en/web/compon
 
 ## Dark variant
 
-{{< callout info >}}
-We add an extra `<p>` around the `<span>` here for accessibility concerns.
-{{< /callout >}}
+{{< deprecated-in "5.3.3" >}}
 
-Add `.tag-dark` to the `.tag` for a dark variant.
+{{< callout warning >}}
+**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
 
-{{< example class="d-flex flex-wrap gap-2 align-items-center bg-dark" >}}
-<p class="mb-0"><span class="tag tag-dark">Informative</span></p>
-<button class="tag tag-dark">Filter</button>
-<a class="tag tag-dark" href="#">Navigation</a>
-<p><span class="tag tag-dark" id="labelTag3">
-  <svg fill="currentColor" width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
-  </svg>
-  Input
-  <button class="close" aria-labelledby="labelTag3"><span class="visually-hidden">Close</span></button>
-</span></p>
-{{< /example >}}
+Add `data-bs-theme="dark"` to the `.tag` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
+{{< /callout >}}
 
 ## Sizes
 
@@ -196,10 +185,6 @@ Values for the CSS variables are set via Sass, so Sass customization is still su
 
 {{< scss-docs name="tag-css-vars" file="scss/_tags.scss" >}}
 
-Customization through CSS variables can be seen on the `.tag-dark` class where we override specific values without adding duplicate CSS selectors.
-
-{{< scss-docs name="tag-dark-css-vars" file="scss/_tags.scss" >}}
-
 Customization through CSS variables can be seen on the `.tag-sm` class where we override specific values without adding duplicate CSS selectors.
 
 {{< scss-docs name="tag-sm-css-vars" file="scss/_tags.scss" >}}
@@ -210,10 +195,6 @@ Variables for all tags:
 
 {{< scss-docs name="tag-variables" file="scss/_variables.scss" >}}
 
-Variables for the [dark tag](#dark-variant):
-
-{{< scss-docs name="tag-dark-variables" file="scss/_variables.scss" >}}
-
 Variables for the [small tag](#sizes):
 
 {{< scss-docs name="tag-sm-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.3/components/toasts.md b/site/content/docs/5.3/components/toasts.md
index 40383e4122..d5793fb4ba 100644
--- a/site/content/docs/5.3/components/toasts.md
+++ b/site/content/docs/5.3/components/toasts.md
@@ -172,7 +172,7 @@ Alternatively, you can also add additional controls and components to toasts.
 
 ### Color schemes
 
-Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-secondary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
+Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-secondary` to the `.toast`. For a crisp edge, we remove the default border with `.border-0`.
 
 {{< example stackblitz_add_js="true" >}}
 <div class="toast align-items-center text-bg-secondary border-0" role="alert" aria-live="assertive" aria-atomic="true">
@@ -180,7 +180,7 @@ Building on the above example, you can create different toast color schemes with
     <div class="toast-body my-auto">
       Hello, world! This is a toast message.
     </div>
-    <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
   </div>
 </div>
 {{< /example >}}
diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md
index c1c93e2c28..0552cc33cf 100644
--- a/site/content/docs/5.3/customize/color-modes.md
+++ b/site/content/docs/5.3/customize/color-modes.md
@@ -217,6 +217,12 @@ $custom-colors: (
 );
 $theme-colors: map-merge($theme-colors, $custom-colors);
 
+// Add a custom color to $theme-colors
+$custom-colors-dark: (
+  "custom-color": #e1d2f2
+);
+$theme-colors-dark: map-merge($theme-colors-dark, $custom-colors-dark);
+
 @import "maps";
 @import "mixins";
 @import "utilities";
diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md
index 68d4892b1c..74d1c2d703 100644
--- a/site/content/docs/5.3/customize/color.md
+++ b/site/content/docs/5.3/customize/color.md
@@ -137,6 +137,7 @@ Boosted core uses Bootstrap's naming for maintenance ease, but **you're encourag
     <div class="col">
         <h4>Orange color tokens</h4>
 {{< scss-docs name="brand-colors" file="scss/_variables.scss" >}}
+{{< scss-docs name="brand-colors-dark" file="scss/_variables-dark.scss" >}}
     </div>
     <div class="col">
         <h4>Bootstrap core variables</h4>
@@ -509,10 +510,12 @@ We use a subset of all colors to create a smaller color palette for generating c
   {{< /theme-colors.inline >}}
 </div>
 
-All these colors are available as a Sass map, `$theme-colors`.
+All these colors are available as a Sass map, `$theme-colors` or `$theme-colors-dark`.
 
 {{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
 
+{{< scss-docs name="theme-colors-dark-map" file="scss/_variables-dark.scss" >}}
+
 Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.
 
 ### All colors
diff --git a/site/content/docs/5.3/customize/css-variables.md b/site/content/docs/5.3/customize/css-variables.md
index edc208ced0..273e98a09b 100644
--- a/site/content/docs/5.3/customize/css-variables.md
+++ b/site/content/docs/5.3/customize/css-variables.md
@@ -57,14 +57,6 @@ Have a look at our table documentation for some [insight into how we're using CS
 
 Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.
 
-### Dark text rule
-
-Using CSS variables allows a better flexibility on certain rules. This way we adapt our text variant color to our dark variants components instead of rewriting rules for each component. This process implies to override some existing CSS variables and to re-initialize those in some cases.
-
-Here is our proposal to handle the different text variants over the website:
-
-{{< scss-docs name="root-dark-rule" file="scss/_root.scss" >}}
-
 ## Prefix
 
 Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable.
diff --git a/site/content/docs/5.3/customize/sass.md b/site/content/docs/5.3/customize/sass.md
index 88855693de..1f721fccb6 100644
--- a/site/content/docs/5.3/customize/sass.md
+++ b/site/content/docs/5.3/customize/sass.md
@@ -273,7 +273,7 @@ In order to meet the [Web Content Accessibility Guidelines (WCAG)](https://www.w
 
 To help with this, we included the `color-contrast` function in Boosted. It uses the [WCAG contrast ratio algorithm](https://www.w3.org/TR/WCAG/#dfn-contrast-ratio) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/TR/WCAG/#dfn-relative-luminance) in an `sRGB` color space to automatically return a light (`#fff`), dark (`#212529`) or black (`#000`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes.
 
-For example, to generate color swatches from our `$theme-colors` map:
+For example, to generate color swatches from our `$theme-colors` and `$theme-colors-dark` maps:
 
 ```scss
 @each $color, $value in $theme-colors {
@@ -281,6 +281,16 @@ For example, to generate color swatches from our `$theme-colors` map:
     color: color-contrast($value);
   }
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    @each $color, $value in $theme-colors-dark {
+      .swatch-#{$color} {
+        color: color-contrast($value);
+      }
+    }
+  }
+}
 ```
 
 It can also be used for one-off contrast needs:
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
new file mode 100644
index 0000000000..0faf554a3f
--- /dev/null
+++ b/site/content/docs/5.3/dark-mode.md
@@ -0,0 +1,2303 @@
+---
+layout: docs
+title: Dark mode helper
+description: Dark mode page helping to debug dark mode
+aliases: "/dark-mode/"
+toc: true
+robots: noindex,follow
+sitemap_exclude: true
+---
+
+## CSS variables
+
+<div class="d-flex flex-column gap-2">
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-body-bg</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-body-bg)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-body-bg)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-body-color</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-body-color)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-body-color)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-highlight-bg</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-highlight-bg)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-highlight-bg)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-highlight-color</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-highlight-color)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-highlight-color)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-secondary-bg</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-secondary-bg)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-secondary-bg)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-tertiary-bg</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-tertiary-bg)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-tertiary-bg)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-border-color-translucent</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-border-color-translucent)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-border-color-translucent)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-secondary-color</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-secondary-color)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-secondary-color)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-link-color</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-link-color)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-link-color)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-link-hover-color</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-link-hover-color)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-link-hover-color)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-primary</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-primary)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-primary)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-success</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-success)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-success)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-info</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-info)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-info)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-warning</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-warning)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-warning)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-danger</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-danger)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-danger)" data-bs-theme="dark"></div>
+  </div>
+</div>
+
+### Additional CSS variables for dark-mode
+
+<div class="d-flex flex-column gap-2">
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-hover-color</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-hover-color)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-hover-color)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-active-bg</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-active-bg)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-active-bg)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-disabled-color</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-disabled-color)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-disabled-color)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-placeholder-color</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-placeholder-color)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-placeholder-color)" data-bs-theme="dark"></div>
+  </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-gray-tweak</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-gray-tweak)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-gray-tweak)" data-bs-theme="dark"></div>
+  </div>
+</div>
+
+## Components
+
+### Accordions
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <div class="accordion" id="accordionExample1">
+    <div class="accordion-item">
+      <h2 class="accordion-header">
+        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne1"
+                aria-expanded="true" aria-controls="collapseOne1">
+          Accordion Item #1
+        </button>
+      </h2>
+      <div id="collapseOne1" class="accordion-collapse collapse show" data-bs-parent="#accordionExample1">
+        <div class="accordion-body">
+          <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin
+          adds the appropriate classes that we use to style each element. These classes control the overall
+          appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
+          CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </div>
+      </div>
+    </div>
+    <div class="accordion-item">
+      <h2 class="accordion-header">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1">
+          Accordion Item #2
+        </button>
+      </h2>
+      <div id="collapseTwo1" class="accordion-collapse collapse" data-bs-parent="#accordionExample1">
+        <div class="accordion-body">
+          <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse
+          plugin adds the appropriate classes that we use to style each element. These classes control the overall
+          appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
+          CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="accordion" id="accordionExample2">
+    <div class="accordion-item">
+      <h2 class="accordion-header">
+        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne2"
+                aria-expanded="true" aria-controls="collapseOne2">
+          Accordion Item #1
+        </button>
+      </h2>
+      <div id="collapseOne2" class="accordion-collapse collapse show" data-bs-parent="#accordionExample2">
+        <div class="accordion-body">
+          <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin
+          adds the appropriate classes that we use to style each element. These classes control the overall
+          appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
+          CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </div>
+      </div>
+    </div>
+    <div class="accordion-item">
+      <h2 class="accordion-header">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
+          Accordion Item #2
+        </button>
+      </h2>
+      <div id="collapseTwo2" class="accordion-collapse collapse" data-bs-parent="#accordionExample2">
+        <div class="accordion-body">
+          <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse
+          plugin adds the appropriate classes that we use to style each element. These classes control the overall
+          appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
+          CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="accordion" id="accordionExample3">
+    <div class="accordion-item">
+      <h2 class="accordion-header">
+        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne3"
+                aria-expanded="true" aria-controls="collapseOne3">
+          Accordion Item #1
+        </button>
+      </h2>
+      <div id="collapseOne3" class="accordion-collapse collapse show" data-bs-parent="#accordionExample3">
+        <div class="accordion-body">
+          <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin
+          adds the appropriate classes that we use to style each element. These classes control the overall
+          appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
+          CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </div>
+      </div>
+    </div>
+    <div class="accordion-item">
+      <h2 class="accordion-header">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#collapseTwo3" aria-expanded="false" aria-controls="collapseTwo3">
+          Accordion Item #2
+        </button>
+      </h2>
+      <div id="collapseTwo3" class="accordion-collapse collapse" data-bs-parent="#accordionExample3">
+        <div class="accordion-body">
+          <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse
+          plugin adds the appropriate classes that we use to style each element. These classes control the overall
+          appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
+          CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55">
+  <div class="accordion" id="accordionExample6" data-bs-theme="dark">
+    <div class="accordion-item">
+      <h2 class="accordion-header">
+        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne6"
+                aria-expanded="true" aria-controls="collapseOne6">
+          Accordion Item #1
+        </button>
+      </h2>
+      <div id="collapseOne6" class="accordion-collapse collapse show" data-bs-parent="#accordionExample6">
+        <div class="accordion-body">
+          <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin
+          adds the appropriate classes that we use to style each element. These classes control the overall
+          appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
+          CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </div>
+      </div>
+    </div>
+    <div class="accordion-item">
+      <h2 class="accordion-header">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#collapseTwo6" aria-expanded="false" aria-controls="collapseTwo6">
+          Accordion Item #2
+        </button>
+      </h2>
+      <div id="collapseTwo6" class="accordion-collapse collapse" data-bs-parent="#accordionExample6">
+        <div class="accordion-body">
+          <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse
+          plugin adds the appropriate classes that we use to style each element. These classes control the overall
+          appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
+          CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="accordion" id="accordionExample7" data-bs-theme="light">
+    <div class="accordion-item">
+      <h2 class="accordion-header">
+        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne7"
+                aria-expanded="true" aria-controls="collapseOne7">
+          Accordion Item #1
+        </button>
+      </h2>
+      <div id="collapseOne7" class="accordion-collapse collapse show" data-bs-parent="#accordionExample7">
+        <div class="accordion-body">
+          <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin
+          adds the appropriate classes that we use to style each element. These classes control the overall
+          appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
+          CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </div>
+      </div>
+    </div>
+    <div class="accordion-item">
+      <h2 class="accordion-header">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#collapseTwo7" aria-expanded="false" aria-controls="collapseTwo7">
+          Accordion Item #2
+        </button>
+      </h2>
+      <div id="collapseTwo7" class="accordion-collapse collapse" data-bs-parent="#accordionExample7">
+        <div class="accordion-body">
+          <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse
+          plugin adds the appropriate classes that we use to style each element. These classes control the overall
+          appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
+          CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+### Alerts
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <div class="alert alert-success" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Success</span></span>
+    <p>Success notification text goes here.</p>
+  </div>
+  <div class="alert alert-info" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Info</span></span>
+    <p>Information notification text goes here.</p>
+  </div>
+  <div class="alert alert-warning" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
+    <p>Warning notification text goes here.</p>
+  </div>
+  <div class="alert alert-danger" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Error</span></span>
+    <p>Error notification text goes here.</p>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="alert alert-success" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Success</span></span>
+    <p>Success notification text goes here.</p>
+  </div>
+  <div class="alert alert-info" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Info</span></span>
+    <p>Information notification text goes here.</p>
+  </div>
+  <div class="alert alert-warning" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
+    <p>Warning notification text goes here.</p>
+  </div>
+  <div class="alert alert-danger" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Error</span></span>
+    <p>Error notification text goes here.</p>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="alert alert-success" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Success</span></span>
+    <p>Success notification text goes here.</p>
+  </div>
+  <div class="alert alert-info" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Info</span></span>
+    <p>Information notification text goes here.</p>
+  </div>
+  <div class="alert alert-warning" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
+    <p>Warning notification text goes here.</p>
+  </div>
+  <div class="alert alert-danger" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Error</span></span>
+    <p>Error notification text goes here.</p>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55">
+  <div class="alert alert-success" role="alert" data-bs-theme="dark">
+    <span class="alert-icon"><span class="visually-hidden">Success</span></span>
+    <p>Success notification text goes here.</p>
+  </div>
+  <div class="alert alert-info" role="alert" data-bs-theme="dark">
+    <span class="alert-icon"><span class="visually-hidden">Info</span></span>
+    <p>Information notification text goes here.</p>
+  </div>
+  <div class="alert alert-warning" role="alert" data-bs-theme="dark">
+    <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
+    <p>Warning notification text goes here.</p>
+  </div>
+  <div class="alert alert-danger" role="alert" data-bs-theme="dark">
+    <span class="alert-icon"><span class="visually-hidden">Error</span></span>
+    <p>Error notification text goes here.</p>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="alert alert-success" role="alert" data-bs-theme="light">
+    <span class="alert-icon"><span class="visually-hidden">Success</span></span>
+    <p>Success notification text goes here.</p>
+  </div>
+  <div class="alert alert-info" role="alert" data-bs-theme="light">
+    <span class="alert-icon"><span class="visually-hidden">Info</span></span>
+    <p>Information notification text goes here.</p>
+  </div>
+  <div class="alert alert-warning" role="alert" data-bs-theme="light">
+    <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
+    <p>Warning notification text goes here.</p>
+  </div>
+  <div class="alert alert-danger" role="alert" data-bs-theme="light">
+    <span class="alert-icon"><span class="visually-hidden">Error</span></span>
+    <p>Error notification text goes here.</p>
+  </div>
+</div>
+
+### Buttons
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3">
+  <button type="button" class="btn btn-primary">Primary</button>
+  <button type="button" class="btn btn-primary" disabled>Primary</button>
+  <button type="button" class="btn btn-secondary">Secondary</button>
+  <button type="button" class="btn btn-secondary" disabled>Secondary</button>
+  <button type="button" class="btn btn-success">Success</button>
+  <button type="button" class="btn btn-success" disabled>Success</button>
+  <button type="button" class="btn btn-danger">Danger</button>
+  <button type="button" class="btn btn-danger" disabled>Danger</button>
+  <button type="button" class="btn btn-warning">Warning</button>
+  <button type="button" class="btn btn-warning" disabled>Warning</button>
+  <button type="button" class="btn btn-info">Info</button>
+  <button type="button" class="btn btn-info" disabled>Info</button>
+  <button type="button" class="btn btn-light">Light</button>
+  <button type="button" class="btn btn-light" disabled>Light</button>
+  <button type="button" class="btn btn-dark">Dark</button>
+  <button type="button" class="btn btn-dark" disabled>Dark</button>
+  <button type="button" class="btn btn-link">Link</button>
+  <button type="button" class="btn btn-link" disabled>Link</button>
+  <button type="button" class="btn btn-outline-primary">Outline primary</button>
+  <button type="button" class="btn btn-outline-primary" disabled>Outline primary</button>
+  <button type="button" class="btn btn-outline-secondary">Outline secondary</button>
+  <button type="button" class="btn btn-outline-secondary" disabled>Outline secondary</button>
+  <button type="button" class="btn btn-outline-success">Outline success</button>
+  <button type="button" class="btn btn-outline-success" disabled>Outline success</button>
+  <button type="button" class="btn btn-outline-danger">Outline danger</button>
+  <button type="button" class="btn btn-outline-danger" disabled>Outline danger</button>
+  <button type="button" class="btn btn-outline-warning">Outline warning</button>
+  <button type="button" class="btn btn-outline-warning" disabled>Outline warning</button>
+  <button type="button" class="btn btn-outline-info">Outline info</button>
+  <button type="button" class="btn btn-outline-info" disabled>Outline info</button>
+  <button type="button" class="btn btn-outline-light">Outline light</button>
+  <button type="button" class="btn btn-outline-light" disabled>Outline light</button>
+  <button type="button" class="btn btn-outline-dark">Outline dark</button>
+  <button type="button" class="btn btn-outline-dark" disabled>Outline dark</button>
+  <button type="button" class="btn btn-primary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
+  <button type="button" class="btn btn-primary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
+  <button type="button" class="btn btn-icon btn-outline-secondary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a>
+  <a class="btn btn-icon btn-social btn-youtube disabled"><span class="visually-hidden">YouTube</span></a>
+  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button">Large button</button></div>
+  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" disabled>Large button</button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"><span class="visually-hidden">Toggle Dropdown</span></button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled>Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled><span class="visually-hidden">Toggle Dropdown</span></button></div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <button type="button" class="btn btn-primary">Primary</button>
+  <button type="button" class="btn btn-primary" disabled>Primary</button>
+  <button type="button" class="btn btn-secondary">Secondary</button>
+  <button type="button" class="btn btn-secondary" disabled>Secondary</button>
+  <button type="button" class="btn btn-success">Success</button>
+  <button type="button" class="btn btn-success" disabled>Success</button>
+  <button type="button" class="btn btn-danger">Danger</button>
+  <button type="button" class="btn btn-danger" disabled>Danger</button>
+  <button type="button" class="btn btn-warning">Warning</button>
+  <button type="button" class="btn btn-warning" disabled>Warning</button>
+  <button type="button" class="btn btn-info">Info</button>
+  <button type="button" class="btn btn-info" disabled>Info</button>
+  <button type="button" class="btn btn-light">Light</button>
+  <button type="button" class="btn btn-light" disabled>Light</button>
+  <button type="button" class="btn btn-dark">Dark</button>
+  <button type="button" class="btn btn-dark" disabled>Dark</button>
+  <button type="button" class="btn btn-link">Link</button>
+  <button type="button" class="btn btn-link" disabled>Link</button>
+  <button type="button" class="btn btn-outline-primary">Outline primary</button>
+  <button type="button" class="btn btn-outline-primary" disabled>Outline primary</button>
+  <button type="button" class="btn btn-outline-secondary">Outline secondary</button>
+  <button type="button" class="btn btn-outline-secondary" disabled>Outline secondary</button>
+  <button type="button" class="btn btn-outline-success">Outline success</button>
+  <button type="button" class="btn btn-outline-success" disabled>Outline success</button>
+  <button type="button" class="btn btn-outline-danger">Outline danger</button>
+  <button type="button" class="btn btn-outline-danger" disabled>Outline danger</button>
+  <button type="button" class="btn btn-outline-warning">Outline warning</button>
+  <button type="button" class="btn btn-outline-warning" disabled>Outline warning</button>
+  <button type="button" class="btn btn-outline-info">Outline info</button>
+  <button type="button" class="btn btn-outline-info" disabled>Outline info</button>
+  <button type="button" class="btn btn-outline-light">Outline light</button>
+  <button type="button" class="btn btn-outline-light" disabled>Outline light</button>
+  <button type="button" class="btn btn-outline-dark">Outline dark</button>
+  <button type="button" class="btn btn-outline-dark" disabled>Outline dark</button>
+  <button type="button" class="btn btn-primary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
+  <button type="button" class="btn btn-primary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
+  <button type="button" class="btn btn-icon btn-outline-secondary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a>
+  <a class="btn btn-icon btn-social btn-youtube disabled"><span class="visually-hidden">YouTube</span></a>
+  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button">Large button</button></div>
+  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" disabled>Large button</button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"><span class="visually-hidden">Toggle Dropdown</span></button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled>Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled><span class="visually-hidden">Toggle Dropdown</span></button></div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <button type="button" class="btn btn-primary">Primary</button>
+  <button type="button" class="btn btn-primary" disabled>Primary</button>
+  <button type="button" class="btn btn-secondary">Secondary</button>
+  <button type="button" class="btn btn-secondary" disabled>Secondary</button>
+  <button type="button" class="btn btn-success">Success</button>
+  <button type="button" class="btn btn-success" disabled>Success</button>
+  <button type="button" class="btn btn-danger">Danger</button>
+  <button type="button" class="btn btn-danger" disabled>Danger</button>
+  <button type="button" class="btn btn-warning">Warning</button>
+  <button type="button" class="btn btn-warning" disabled>Warning</button>
+  <button type="button" class="btn btn-info">Info</button>
+  <button type="button" class="btn btn-info" disabled>Info</button>
+  <button type="button" class="btn btn-light">Light</button>
+  <button type="button" class="btn btn-light" disabled>Light</button>
+  <button type="button" class="btn btn-dark">Dark</button>
+  <button type="button" class="btn btn-dark" disabled>Dark</button>
+  <button type="button" class="btn btn-link">Link</button>
+  <button type="button" class="btn btn-link" disabled>Link</button>
+  <button type="button" class="btn btn-outline-primary">Outline primary</button>
+  <button type="button" class="btn btn-outline-primary" disabled>Outline primary</button>
+  <button type="button" class="btn btn-outline-secondary">Outline secondary</button>
+  <button type="button" class="btn btn-outline-secondary" disabled>Outline secondary</button>
+  <button type="button" class="btn btn-outline-success">Outline success</button>
+  <button type="button" class="btn btn-outline-success" disabled>Outline success</button>
+  <button type="button" class="btn btn-outline-danger">Outline danger</button>
+  <button type="button" class="btn btn-outline-danger" disabled>Outline danger</button>
+  <button type="button" class="btn btn-outline-warning">Outline warning</button>
+  <button type="button" class="btn btn-outline-warning" disabled>Outline warning</button>
+  <button type="button" class="btn btn-outline-info">Outline info</button>
+  <button type="button" class="btn btn-outline-info" disabled>Outline info</button>
+  <button type="button" class="btn btn-outline-light">Outline light</button>
+  <button type="button" class="btn btn-outline-light" disabled>Outline light</button>
+  <button type="button" class="btn btn-outline-dark">Outline dark</button>
+  <button type="button" class="btn btn-outline-dark" disabled>Outline dark</button>
+  <button type="button" class="btn btn-primary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
+  <button type="button" class="btn btn-primary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
+  <button type="button" class="btn btn-icon btn-outline-secondary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a>
+  <a class="btn btn-icon btn-social btn-youtube disabled"><span class="visually-hidden">YouTube</span></a>
+  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button">Large button</button></div>
+  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" disabled>Large button</button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"><span class="visually-hidden">Toggle Dropdown</span></button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled>Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled><span class="visually-hidden">Toggle Dropdown</span></button></div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3" style="background-color: #282d55;">
+  <button type="button" class="btn btn-primary" data-bs-theme="dark">Primary</button>
+  <button type="button" class="btn btn-primary" disabled data-bs-theme="dark">Primary</button>
+  <button type="button" class="btn btn-secondary" data-bs-theme="dark">Secondary</button>
+  <button type="button" class="btn btn-secondary" disabled data-bs-theme="dark">Secondary</button>
+  <button type="button" class="btn btn-success" data-bs-theme="dark">Success</button>
+  <button type="button" class="btn btn-success" disabled data-bs-theme="dark">Success</button>
+  <button type="button" class="btn btn-danger" data-bs-theme="dark">Danger</button>
+  <button type="button" class="btn btn-danger" disabled data-bs-theme="dark">Danger</button>
+  <button type="button" class="btn btn-warning" data-bs-theme="dark">Warning</button>
+  <button type="button" class="btn btn-warning" disabled data-bs-theme="dark">Warning</button>
+  <button type="button" class="btn btn-info" data-bs-theme="dark">Info</button>
+  <button type="button" class="btn btn-info" disabled data-bs-theme="dark">Info</button>
+  <button type="button" class="btn btn-light" data-bs-theme="dark">Light</button>
+  <button type="button" class="btn btn-light" disabled data-bs-theme="dark">Light</button>
+  <button type="button" class="btn btn-dark" data-bs-theme="dark">Dark</button>
+  <button type="button" class="btn btn-dark" disabled data-bs-theme="dark">Dark</button>
+  <button type="button" class="btn btn-link" data-bs-theme="dark">Link</button>
+  <button type="button" class="btn btn-link" disabled data-bs-theme="dark">Link</button>
+  <button type="button" class="btn btn-outline-primary" data-bs-theme="dark">Outline primary</button>
+  <button type="button" class="btn btn-outline-primary" disabled data-bs-theme="dark">Outline primary</button>
+  <button type="button" class="btn btn-outline-secondary" data-bs-theme="dark">Outline secondary</button>
+  <button type="button" class="btn btn-outline-secondary" disabled data-bs-theme="dark">Outline secondary</button>
+  <button type="button" class="btn btn-outline-success" data-bs-theme="dark">Outline success</button>
+  <button type="button" class="btn btn-outline-success" disabled data-bs-theme="dark">Outline success</button>
+  <button type="button" class="btn btn-outline-danger" data-bs-theme="dark">Outline danger</button>
+  <button type="button" class="btn btn-outline-danger" disabled data-bs-theme="dark">Outline danger</button>
+  <button type="button" class="btn btn-outline-warning" data-bs-theme="dark">Outline warning</button>
+  <button type="button" class="btn btn-outline-warning" disabled data-bs-theme="dark">Outline warning</button>
+  <button type="button" class="btn btn-outline-info" data-bs-theme="dark">Outline info</button>
+  <button type="button" class="btn btn-outline-info" disabled data-bs-theme="dark">Outline info</button>
+  <button type="button" class="btn btn-outline-light" data-bs-theme="dark">Outline light</button>
+  <button type="button" class="btn btn-outline-light" disabled data-bs-theme="dark">Outline light</button>
+  <button type="button" class="btn btn-outline-dark" data-bs-theme="dark">Outline dark</button>
+  <button type="button" class="btn btn-outline-dark" disabled data-bs-theme="dark">Outline dark</button>
+  <button type="button" class="btn btn-primary" data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
+  <button type="button" class="btn btn-primary" disabled data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline" data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <a href="#" class="btn btn-icon btn-social btn-youtube" data-bs-theme="dark"><span class="visually-hidden">YouTube</span></a>
+  <a class="btn btn-icon btn-social btn-youtube disabled" data-bs-theme="dark"><span class="visually-hidden">YouTube</span></a>
+  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" data-bs-theme="dark">Large button</button></div>
+  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" disabled data-bs-theme="dark">Large button</button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button" data-bs-theme="dark">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-theme="dark"><span class="visually-hidden">Toggle Dropdown</span></button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled data-bs-theme="dark">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled data-bs-theme="dark"><span class="visually-hidden">Toggle Dropdown</span></button></div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3" style="background-color: #b5e8f7">
+  <button type="button" class="btn btn-primary" data-bs-theme="light">Primary</button>
+  <button type="button" class="btn btn-primary" disabled data-bs-theme="light">Primary</button>
+  <button type="button" class="btn btn-secondary" data-bs-theme="light">Secondary</button>
+  <button type="button" class="btn btn-secondary" disabled data-bs-theme="light">Secondary</button>
+  <button type="button" class="btn btn-success" data-bs-theme="light">Success</button>
+  <button type="button" class="btn btn-success" disabled data-bs-theme="light">Success</button>
+  <button type="button" class="btn btn-danger" data-bs-theme="light">Danger</button>
+  <button type="button" class="btn btn-danger" disabled data-bs-theme="light">Danger</button>
+  <button type="button" class="btn btn-warning" data-bs-theme="light">Warning</button>
+  <button type="button" class="btn btn-warning" disabled data-bs-theme="light">Warning</button>
+  <button type="button" class="btn btn-info" data-bs-theme="light">Info</button>
+  <button type="button" class="btn btn-info" disabled data-bs-theme="light">Info</button>
+  <button type="button" class="btn btn-light" data-bs-theme="light">Light</button>
+  <button type="button" class="btn btn-light" disabled data-bs-theme="light">Light</button>
+  <button type="button" class="btn btn-dark" data-bs-theme="light">Dark</button>
+  <button type="button" class="btn btn-dark" disabled data-bs-theme="light">Dark</button>
+  <button type="button" class="btn btn-link" data-bs-theme="light">Link</button>
+  <button type="button" class="btn btn-link" disabled data-bs-theme="light">Link</button>
+  <button type="button" class="btn btn-outline-primary" data-bs-theme="light">Outline primary</button>
+  <button type="button" class="btn btn-outline-primary" disabled data-bs-theme="light">Outline primary</button>
+  <button type="button" class="btn btn-outline-secondary" data-bs-theme="light">Outline secondary</button>
+  <button type="button" class="btn btn-outline-secondary" disabled data-bs-theme="light">Outline secondary</button>
+  <button type="button" class="btn btn-outline-success" data-bs-theme="light">Outline success</button>
+  <button type="button" class="btn btn-outline-success" disabled data-bs-theme="light">Outline success</button>
+  <button type="button" class="btn btn-outline-danger" data-bs-theme="light">Outline danger</button>
+  <button type="button" class="btn btn-outline-danger" disabled data-bs-theme="light">Outline danger</button>
+  <button type="button" class="btn btn-outline-warning" data-bs-theme="light">Outline warning</button>
+  <button type="button" class="btn btn-outline-warning" disabled data-bs-theme="light">Outline warning</button>
+  <button type="button" class="btn btn-outline-info" data-bs-theme="light">Outline info</button>
+  <button type="button" class="btn btn-outline-info" disabled data-bs-theme="light">Outline info</button>
+  <button type="button" class="btn btn-outline-light" data-bs-theme="light">Outline light</button>
+  <button type="button" class="btn btn-outline-light" disabled data-bs-theme="light">Outline light</button>
+  <button type="button" class="btn btn-outline-dark" data-bs-theme="light">Outline dark</button>
+  <button type="button" class="btn btn-outline-dark" disabled data-bs-theme="light">Outline dark</button>
+  <button type="button" class="btn btn-primary" data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
+  <button type="button" class="btn btn-primary" disabled data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline" data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <a href="#" class="btn btn-icon btn-social btn-youtube" data-bs-theme="light"><span class="visually-hidden">YouTube</span></a>
+  <a class="btn btn-icon btn-social btn-youtube disabled" data-bs-theme="light"><span class="visually-hidden">YouTube</span></a>
+  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" data-bs-theme="light">Large button</button></div>
+  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" disabled data-bs-theme="light">Large button</button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button" data-bs-theme="light">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-theme="light"><span class="visually-hidden">Toggle Dropdown</span></button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled data-bs-theme="light">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled data-bs-theme="light"><span class="visually-hidden">Toggle Dropdown</span></button></div>
+</div>
+
+### Dropdowns
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <div class="btn-group">
+    <div class="dropdown">
+      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+        Dropdown button
+      </button>
+      <ul class="dropdown-menu">
+        <li><a class="dropdown-item" href="#">Action</a></li>
+        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-secondary">Action</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+      <span class="visually-hidden">Toggle Dropdown</span>
+    </button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="btn-group">
+    <div class="dropdown">
+      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+        Dropdown button
+      </button>
+      <ul class="dropdown-menu">
+        <li><a class="dropdown-item" href="#">Action</a></li>
+        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-secondary">Action</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+      <span class="visually-hidden">Toggle Dropdown</span>
+    </button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="btn-group">
+    <div class="dropdown">
+      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+        Dropdown button
+      </button>
+      <ul class="dropdown-menu">
+        <li><a class="dropdown-item" href="#">Action</a></li>
+        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-secondary">Action</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+      <span class="visually-hidden">Toggle Dropdown</span>
+    </button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55">
+  <div class="btn-group">
+    <div class="dropdown">
+      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">
+        Dropdown button
+      </button>
+      <ul class="dropdown-menu" data-bs-theme="dark">
+        <li><a class="dropdown-item" href="#">Action</a></li>
+        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-secondary" data-bs-theme="dark">Action</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">
+      <span class="visually-hidden">Toggle Dropdown</span>
+    </button>
+    <ul class="dropdown-menu" data-bs-theme="dark">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="btn-group">
+    <div class="dropdown">
+      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="light">
+        Dropdown button
+      </button>
+      <ul class="dropdown-menu" data-bs-theme="light">
+        <li><a class="dropdown-item" href="#">Action</a></li>
+        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-secondary" data-bs-theme="light">Action</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="light">
+      <span class="visually-hidden">Toggle Dropdown</span>
+    </button>
+    <ul class="dropdown-menu" data-bs-theme="light">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark dropdown variant for retro-compatibility</h4>
+
+<div class="border border-tertiary p-3 bg-dark">
+  <div class="dropdown">
+    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+      Dropdown button
+    </button>
+    <ul class="dropdown-menu dropdown-menu-dark">
+      <li><a class="dropdown-item active" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div>
+
+  <div class="btn-group">
+    <button type="button" class="btn btn-secondary">Action</button>
+    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+      <span class="visually-hidden">Toggle Dropdown</span>
+    </button>
+    <ul class="dropdown-menu dropdown-menu-dark">
+      <li><a class="dropdown-item active" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div>
+</div>
+
+
+### Local navigation
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <nav class="local-nav" aria-label="Basic local navigation">
+    <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav1" aria-expanded="false" aria-controls="collapseLocalNav1">
+      <span class="container-xxl">Shop</span>
+    </button>
+    <div id="collapseLocalNav1" class="container-xxl local-nav-collapse d-lg-block collapse">
+        <div class="navbar navbar-expand-lg">
+          <ul class="navbar-nav w-100">
+            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+            <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+          </ul>
+        </div>
+    </div>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <nav class="local-nav" aria-label="Basic local navigation">
+    <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav2" aria-expanded="false" aria-controls="collapseLocalNav2">
+      <span class="container-xxl">Shop</span>
+    </button>
+    <div id="collapseLocalNav2" class="container-xxl local-nav-collapse d-lg-block collapse">
+        <div class="navbar navbar-expand-lg">
+          <ul class="navbar-nav w-100">
+            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+            <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+          </ul>
+        </div>
+    </div>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <nav class="local-nav" aria-label="Basic local navigation">
+    <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav3" aria-expanded="false" aria-controls="collapseLocalNav3">
+      <span class="container-xxl">Shop</span>
+    </button>
+    <div id="collapseLocalNav3" class="container-xxl local-nav-collapse d-lg-block collapse">
+        <div class="navbar navbar-expand-lg">
+          <ul class="navbar-nav w-100">
+            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+            <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+          </ul>
+        </div>
+    </div>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55">
+  <nav class="local-nav" aria-label="Basic local navigation" data-bs-theme="dark">
+    <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav4" aria-expanded="false" aria-controls="collapseLocalNav4">
+      <span class="container-xxl">Shop</span>
+    </button>
+    <div id="collapseLocalNav4" class="container-xxl local-nav-collapse d-lg-block collapse">
+        <div class="navbar navbar-expand-lg">
+          <ul class="navbar-nav w-100">
+            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+            <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+          </ul>
+        </div>
+    </div>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <nav class="local-nav" aria-label="Basic local navigation" data-bs-theme="light">
+    <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav5" aria-expanded="false" aria-controls="collapseLocalNav5">
+      <span class="container-xxl">Shop</span>
+    </button>
+    <div id="collapseLocalNav5" class="container-xxl local-nav-collapse d-lg-block collapse">
+        <div class="navbar navbar-expand-lg">
+          <ul class="navbar-nav w-100">
+            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+            <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+          </ul>
+        </div>
+    </div>
+  </nav>
+</div>
+
+### Spinners
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <div class="spinner-border" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-primary" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-body" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-primary" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-body" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="spinner-border" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-primary" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-body" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-primary" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-body" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="spinner-border" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-primary" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-body" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-primary" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-body" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <div class="spinner-border" role="status" data-bs-theme="dark">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-primary" role="status" data-bs-theme="dark">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-body" role="status" data-bs-theme="dark">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow" role="status" data-bs-theme="dark">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-primary" role="status" data-bs-theme="dark">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-body" role="status" data-bs-theme="dark">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="spinner-border" role="status" data-bs-theme="light">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-primary" role="status" data-bs-theme="light">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-body" role="status" data-bs-theme="light">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow" role="status" data-bs-theme="light">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-primary" role="status" data-bs-theme="light">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-body" role="status" data-bs-theme="light">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+</div>
+
+### Stepped process
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <nav class="stepped-process" aria-label="Checkout process">
+    <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
+    <ol>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="1. Sign in">Sign in</a>
+      </li>
+      <li class="stepped-process-item active">
+        <a class="stepped-process-link" title="2. Review" aria-current="step">Review</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="3. Delivery">Delivery</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="4. Payment">Payment</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="5. Place order">Place order</a>
+      </li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <nav class="stepped-process" aria-label="Checkout process">
+    <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
+    <ol>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="1. Sign in">Sign in</a>
+      </li>
+      <li class="stepped-process-item active">
+        <a class="stepped-process-link" title="2. Review" aria-current="step">Review</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="3. Delivery">Delivery</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="4. Payment">Payment</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="5. Place order">Place order</a>
+      </li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <nav class="stepped-process" aria-label="Checkout process">
+    <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
+    <ol>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="1. Sign in">Sign in</a>
+      </li>
+      <li class="stepped-process-item active">
+        <a class="stepped-process-link" title="2. Review" aria-current="step">Review</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="3. Delivery">Delivery</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="4. Payment">Payment</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="5. Place order">Place order</a>
+      </li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <nav class="stepped-process" aria-label="Checkout process" data-bs-theme="dark" style="--bs-stepped-process-bg: #282d55;">
+    <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
+    <ol>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="1. Sign in">Sign in</a>
+      </li>
+      <li class="stepped-process-item active">
+        <a class="stepped-process-link" title="2. Review" aria-current="step">Review</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="3. Delivery">Delivery</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="4. Payment">Payment</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="5. Place order">Place order</a>
+      </li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <nav class="stepped-process" aria-label="Checkout process" data-bs-theme="light" style="--bs-stepped-process-bg: #b5e8f7;">
+    <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
+    <ol>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="1. Sign in">Sign in</a>
+      </li>
+      <li class="stepped-process-item active">
+        <a class="stepped-process-link" title="2. Review" aria-current="step">Review</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="3. Delivery">Delivery</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="4. Payment">Payment</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="5. Place order">Place order</a>
+      </li>
+    </ol>
+  </nav>
+</div>
+
+### Stickers
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3 d-flex">
+  <div class="sticker sticker-sm">
+    <p class="mb-0">
+      <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
+      <span class="sticker-fs-xl mb-0 d-block" aria-hidden="true">39.99 €</span>
+      <span aria-hidden="true">Per month</span>
+      <span class="visually-hidden">39.99 € per month instead of 69.99 €</span>
+    </p>
+  </div>
+  <div class="sticker sticker-sm">
+    <svg width="35" height="35" aria-hidden="true" focusable="false">
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    </svg>
+    <p class="mb-2">
+      <span class="sticker-fs-m">Free delivery</span>
+    </p>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body d-flex" data-bs-theme="dark">
+  <div class="sticker sticker-sm">
+    <p class="mb-0">
+      <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
+      <span class="sticker-fs-xl mb-0 d-block" aria-hidden="true">39.99 €</span>
+      <span aria-hidden="true">Per month</span>
+      <span class="visually-hidden">39.99 € per month instead of 69.99 €</span>
+    </p>
+  </div>
+  <div class="sticker sticker-sm">
+    <svg width="35" height="35" aria-hidden="true" focusable="false">
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    </svg>
+    <p class="mb-2">
+      <span class="sticker-fs-m">Free delivery</span>
+    </p>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body d-flex" data-bs-theme="light">
+  <div class="sticker sticker-sm">
+    <p class="mb-0">
+      <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
+      <span class="sticker-fs-xl mb-0 d-block" aria-hidden="true">39.99 €</span>
+      <span aria-hidden="true">Per month</span>
+      <span class="visually-hidden">39.99 € per month instead of 69.99 €</span>
+    </p>
+  </div>
+  <div class="sticker sticker-sm">
+    <svg width="35" height="35" aria-hidden="true" focusable="false">
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    </svg>
+    <p class="mb-2">
+      <span class="sticker-fs-m">Free delivery</span>
+    </p>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3 d-flex" style="background-color: #282d55;">
+  <div class="sticker sticker-sm" data-bs-theme="dark">
+    <p class="mb-0">
+      <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
+      <span class="sticker-fs-xl mb-0 d-block" aria-hidden="true">39.99 €</span>
+      <span aria-hidden="true">Per month</span>
+      <span class="visually-hidden">39.99 € per month instead of 69.99 €</span>
+    </p>
+  </div>
+  <div class="sticker sticker-sm" data-bs-theme="dark">
+    <svg width="35" height="35" aria-hidden="true" focusable="false">
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    </svg>
+    <p class="mb-2">
+      <span class="sticker-fs-m">Free delivery</span>
+    </p>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3 d-flex" style="background-color: #b5e8f7">
+  <div class="sticker sticker-sm" data-bs-theme="light">
+    <p class="mb-0">
+      <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
+      <span class="sticker-fs-xl mb-0 d-block" aria-hidden="true">39.99 €</span>
+      <span aria-hidden="true">Per month</span>
+      <span class="visually-hidden">39.99 € per month instead of 69.99 €</span>
+    </p>
+  </div>
+  <div class="sticker sticker-sm" data-bs-theme="light">
+    <svg width="35" height="35" aria-hidden="true" focusable="false">
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    </svg>
+    <p class="mb-2">
+      <span class="sticker-fs-m">Free delivery</span>
+    </p>
+  </div>
+</div>
+
+### Tags
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <ul class="list-unstyled d-flex gap-2 flex-wrap m-0">
+    <li>
+      <input type="checkbox" class="btn-check" id="btncheck-mobile1" autocomplete="off">
+      <label class="tag" for="btncheck-mobile1"><span class="visually-hidden">Filter by</span>Mobile</label>
+    </li>
+    <li>
+      <input type="checkbox" class="btn-check" id="btncheck-tv1" autocomplete="off" checked>
+      <label class="tag" for="btncheck-tv1">
+        <svg width="1.5rem" height="1.5rem" viewBox="0 0 1000 1000" aria-hidden="true" focusable="false">
+          <path fill="currentColor" d="M75,200V720H225v80H775V720H925V200H75ZM500,755a30,30,0,1,1,30-30A30,30,0,0,1,500,755Zm365-95H135V260H865V660Z"></path>
+        </svg>
+        <span class="visually-hidden">Filter by</span>TV
+      </label>
+    </li>
+    <li><a class="tag" href="#">1. Introduction</a></li>
+    <li>
+      <span class="tag" id="labelTag11">
+        Dismissible tag
+        <button class="close" aria-labelledby="labelTag11"><span class="visually-hidden">Close</span></button>
+      </span>
+    </li>
+    <li><span class="tag tag-sm" id="labelTag21">
+      <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
+      </svg>
+      Dismissible tag
+      <button class="close" aria-labelledby="labelTag21"><span class="visually-hidden">Close</span></button>
+    </span></li>
+    <li>
+      <p><span class="tag disabled" id="labelTag51" aria-disabled="true">
+        <svg fill="currentColor" width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
+          <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
+        </svg>
+        Input
+        <button class="close" aria-labelledby="labelTag51" disabled><span class="visually-hidden">Close</span></button>
+      </span></p>
+    </li>
+  </ul>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <ul class="list-unstyled d-flex gap-2 flex-wrap m-0">
+    <li>
+      <input type="checkbox" class="btn-check" id="btncheck-mobile2" autocomplete="off">
+      <label class="tag" for="btncheck-mobile2"><span class="visually-hidden">Filter by</span>Mobile</label>
+    </li>
+    <li>
+      <input type="checkbox" class="btn-check" id="btncheck-tv2" autocomplete="off" checked>
+      <label class="tag" for="btncheck-tv2">
+        <svg width="1.5rem" height="1.5rem" viewBox="0 0 1000 1000" aria-hidden="true" focusable="false">
+          <path fill="currentColor" d="M75,200V720H225v80H775V720H925V200H75ZM500,755a30,30,0,1,1,30-30A30,30,0,0,1,500,755Zm365-95H135V260H865V660Z"></path>
+        </svg>
+        <span class="visually-hidden">Filter by</span>TV
+      </label>
+    </li>
+    <li><a class="tag" href="#">1. Introduction</a></li>
+    <li>
+      <span class="tag" id="labelTag12">
+        Dismissible tag
+        <button class="close" aria-labelledby="labelTag12"><span class="visually-hidden">Close</span></button>
+      </span>
+    </li>
+    <li><span class="tag tag-sm" id="labelTag22">
+      <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
+      </svg>
+      Dismissible tag
+      <button class="close" aria-labelledby="labelTag22"><span class="visually-hidden">Close</span></button>
+    </span></li>
+    <li>
+      <p><span class="tag disabled" id="labelTag52" aria-disabled="true">
+        <svg fill="currentColor" width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
+          <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
+        </svg>
+        Input
+        <button class="close" aria-labelledby="labelTag52" disabled><span class="visually-hidden">Close</span></button>
+      </span></p>
+    </li>
+  </ul>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <ul class="list-unstyled d-flex gap-2 flex-wrap m-0">
+    <li>
+      <input type="checkbox" class="btn-check" id="btncheck-mobile3" autocomplete="off">
+      <label class="tag" for="btncheck-mobile3"><span class="visually-hidden">Filter by</span>Mobile</label>
+    </li>
+    <li>
+      <input type="checkbox" class="btn-check" id="btncheck-tv3" autocomplete="off" checked>
+      <label class="tag" for="btncheck-tv3">
+        <svg width="1.5rem" height="1.5rem" viewBox="0 0 1000 1000" aria-hidden="true" focusable="false">
+          <path fill="currentColor" d="M75,200V720H225v80H775V720H925V200H75ZM500,755a30,30,0,1,1,30-30A30,30,0,0,1,500,755Zm365-95H135V260H865V660Z"></path>
+        </svg>
+        <span class="visually-hidden">Filter by</span>TV
+      </label>
+    </li>
+    <li><a class="tag" href="#">1. Introduction</a></li>
+    <li>
+      <span class="tag" id="labelTag13">
+        Dismissible tag
+        <button class="close" aria-labelledby="labelTag13"><span class="visually-hidden">Close</span></button>
+      </span>
+    </li>
+    <li><span class="tag tag-sm" id="labelTag23">
+      <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
+      </svg>
+      Dismissible tag
+      <button class="close" aria-labelledby="labelTag23"><span class="visually-hidden">Close</span></button>
+    </span></li>
+    <li>
+      <p><span class="tag disabled" id="labelTag53" aria-disabled="true">
+        <svg fill="currentColor" width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
+          <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
+        </svg>
+        Input
+        <button class="close" aria-labelledby="labelTag53" disabled><span class="visually-hidden">Close</span></button>
+      </span></p>
+    </li>
+  </ul>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55">
+  <ul class="list-unstyled d-flex gap-2 flex-wrap m-0">
+    <li>
+      <input type="checkbox" class="btn-check" id="btncheck-mobile4" autocomplete="off">
+      <label class="tag" for="btncheck-mobile4" data-bs-theme="dark"><span class="visually-hidden">Filter by</span>Mobile</label>
+    </li>
+    <li>
+      <input type="checkbox" class="btn-check" id="btncheck-tv4" autocomplete="off" checked>
+      <label class="tag" for="btncheck-tv4" data-bs-theme="dark">
+        <svg width="1.5rem" height="1.5rem" viewBox="0 0 1000 1000" aria-hidden="true" focusable="false">
+          <path fill="currentColor" d="M75,200V720H225v80H775V720H925V200H75ZM500,755a30,30,0,1,1,30-30A30,30,0,0,1,500,755Zm365-95H135V260H865V660Z"></path>
+        </svg>
+        <span class="visually-hidden">Filter by</span>TV
+      </label>
+    </li>
+    <li><a class="tag" href="#" data-bs-theme="dark">1. Introduction</a></li>
+    <li>
+      <span class="tag" id="labelTag14" data-bs-theme="dark">
+        Dismissible tag
+        <button class="close" aria-labelledby="labelTag14"><span class="visually-hidden">Close</span></button>
+      </span>
+    </li>
+    <li><span class="tag tag-sm" id="labelTag24" data-bs-theme="dark">
+      <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
+      </svg>
+      Dismissible tag
+      <button class="close" aria-labelledby="labelTag24"><span class="visually-hidden">Close</span></button>
+    </span></li>
+    <li>
+      <p><span class="tag disabled" id="labelTag54" aria-disabled="true" data-bs-theme="dark">
+        <svg fill="currentColor" width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
+          <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
+        </svg>
+        Input
+        <button class="close" aria-labelledby="labelTag54" disabled><span class="visually-hidden">Close</span></button>
+      </span></p>
+    </li>
+  </ul>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <ul class="list-unstyled d-flex gap-2 flex-wrap m-0">
+    <li>
+      <input type="checkbox" class="btn-check" id="btncheck-mobile5" autocomplete="off">
+      <label class="tag" for="btncheck-mobile5" data-bs-theme="light"><span class="visually-hidden">Filter by</span>Mobile</label>
+    </li>
+    <li>
+      <input type="checkbox" class="btn-check" id="btncheck-tv5" autocomplete="off" checked>
+      <label class="tag" for="btncheck-tv5" data-bs-theme="light">
+        <svg width="1.5rem" height="1.5rem" viewBox="0 0 1000 1000" aria-hidden="true" focusable="false">
+          <path fill="currentColor" d="M75,200V720H225v80H775V720H925V200H75ZM500,755a30,30,0,1,1,30-30A30,30,0,0,1,500,755Zm365-95H135V260H865V660Z"></path>
+        </svg>
+        <span class="visually-hidden">Filter by</span>TV
+      </label>
+    </li>
+    <li><a class="tag" href="#" data-bs-theme="light">1. Introduction</a></li>
+    <li>
+      <span class="tag" id="labelTag15" data-bs-theme="light">
+        Dismissible tag
+        <button class="close" aria-labelledby="labelTag15"><span class="visually-hidden">Close</span></button>
+      </span>
+    </li>
+    <li><span class="tag tag-sm" id="labelTag25" data-bs-theme="light">
+      <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
+      </svg>
+      Dismissible tag
+      <button class="close" aria-labelledby="labelTag25"><span class="visually-hidden">Close</span></button>
+    </span></li>
+    <li>
+      <p><span class="tag disabled" id="labelTag55" aria-disabled="true" data-bs-theme="light">
+        <svg fill="currentColor" width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
+          <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
+        </svg>
+        Input
+        <button class="close" aria-labelledby="labelTag55" disabled><span class="visually-hidden">Close</span></button>
+      </span></p>
+    </li>
+  </ul>
+</div>
+
+## Forms
+
+### Color
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" disabled>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" disabled>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" disabled>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" data-bs-theme="dark">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" data-bs-theme="dark" disabled>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" data-bs-theme="light">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" data-bs-theme="light" disabled>
+</div>
+
+### Checkboxes & Radios
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3 bd-example-indeterminate">
+  <input class="form-check-input" type="checkbox" value="">
+  <input class="form-check-input" type="checkbox" value="" checked>
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate">
+  <input class="form-check-input" type="checkbox" value="" disabled>
+  <input class="form-check-input" type="checkbox" value="" checked disabled>
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate0" disabled>
+  <input class="form-check-input" type="radio">
+  <input class="form-check-input" type="radio" checked>
+  <input class="form-check-input" type="radio" disabled>
+  <input class="form-check-input" type="radio" checked disabled>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body bd-example-indeterminate" data-bs-theme="dark">
+  <input class="form-check-input" type="checkbox" value="">
+  <input class="form-check-input" type="checkbox" value="" checked>
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate1">
+  <input class="form-check-input" type="checkbox" value="" disabled>
+  <input class="form-check-input" type="checkbox" value="" checked disabled>
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate2" disabled>
+  <input class="form-check-input" type="radio">
+  <input class="form-check-input" type="radio" checked>
+  <input class="form-check-input" type="radio" disabled>
+  <input class="form-check-input" type="radio" checked disabled>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body bd-example-indeterminate" data-bs-theme="light">
+  <input class="form-check-input" type="checkbox" value="">
+  <input class="form-check-input" type="checkbox" value="" checked>
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate3">
+  <input class="form-check-input" type="checkbox" value="" disabled>
+  <input class="form-check-input" type="checkbox" value="" checked disabled>
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate4" disabled>
+  <input class="form-check-input" type="radio">
+  <input class="form-check-input" type="radio" checked>
+  <input class="form-check-input" type="radio" disabled>
+  <input class="form-check-input" type="radio" checked disabled>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3 bd-example-indeterminate" style="background-color: #282d55;">
+  <input class="form-check-input" type="checkbox" value="" data-bs-theme="dark">
+  <input class="form-check-input" type="checkbox" value="" checked data-bs-theme="dark">
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate5" data-bs-theme="dark">
+  <input class="form-check-input" type="checkbox" value="" disabled data-bs-theme="dark">
+  <input class="form-check-input" type="checkbox" value="" checked disabled data-bs-theme="dark">
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate6" disabled data-bs-theme="dark">
+  <input class="form-check-input" type="radio" data-bs-theme="dark">
+  <input class="form-check-input" type="radio" checked data-bs-theme="dark">
+  <input class="form-check-input" type="radio" disabled data-bs-theme="dark">
+  <input class="form-check-input" type="radio" checked disabled data-bs-theme="dark">
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3 bd-example-indeterminate" style="background-color: #b5e8f7">
+  <input class="form-check-input" type="checkbox" value="" data-bs-theme="light">
+  <input class="form-check-input" type="checkbox" value="" checked data-bs-theme="light">
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate7" data-bs-theme="light">
+  <input class="form-check-input" type="checkbox" value="" disabled data-bs-theme="light">
+  <input class="form-check-input" type="checkbox" value="" checked disabled data-bs-theme="light">
+  <input class="form-check-input" type="checkbox" value="" id="Indeterminate8" disabled data-bs-theme="light">
+  <input class="form-check-input" type="radio" data-bs-theme="light">
+  <input class="form-check-input" type="radio" checked data-bs-theme="light">
+  <input class="form-check-input" type="radio" disabled data-bs-theme="light">
+  <input class="form-check-input" type="radio" checked disabled data-bs-theme="light">
+</div>
+
+### Controls
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <input type="text" class="form-control" placeholder="Input placeholder">
+  <textarea class="form-control" rows="2" placeholder="Textarea placeholder"></textarea>
+  <input type="text" class="form-control" placeholder="Disabled input placeholder" disabled>
+  <textarea class="form-control" rows="2" disabled>Disabled textarea placeholder</textarea>
+  <input type="text" class="form-control" value="Readonly input value" readonly>
+  <textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" readonly></textarea>
+  <input type="text" class="form-control-plaintext" value="Readonly plaintext input" readonly>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <input type="text" class="form-control" placeholder="Input placeholder">
+  <textarea class="form-control" rows="2" placeholder="Textarea placeholder"></textarea>
+  <input type="text" class="form-control" placeholder="Disabled input placeholder" disabled>
+  <textarea class="form-control" rows="2" disabled>Disabled textarea placeholder</textarea>
+  <input type="text" class="form-control" value="Readonly input value" readonly>
+  <textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" readonly></textarea>
+  <input type="text" class="form-control-plaintext" value="Readonly plaintext input" readonly>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <input type="text" class="form-control" placeholder="Input placeholder">
+  <textarea class="form-control" rows="2" placeholder="Textarea placeholder"></textarea>
+  <input type="text" class="form-control" placeholder="Disabled input placeholder" disabled>
+  <textarea class="form-control" rows="2" disabled>Disabled textarea placeholder</textarea>
+  <input type="text" class="form-control" value="Readonly input value" readonly>
+  <textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" readonly></textarea>
+  <input type="text" class="form-control-plaintext" value="Readonly plaintext input" readonly>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <input type="text" class="form-control" placeholder="Input placeholder" data-bs-theme="dark">
+  <textarea class="form-control" rows="2" placeholder="Textarea placeholder" data-bs-theme="dark"></textarea>
+  <input type="text" class="form-control" placeholder="Disabled input placeholder" data-bs-theme="dark" disabled>
+  <textarea class="form-control" rows="2" data-bs-theme="dark" disabled>Disabled textarea placeholder</textarea>
+  <input type="text" class="form-control" value="Readonly input value" data-bs-theme="dark" readonly>
+  <textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" data-bs-theme="dark" readonly></textarea>
+  <input type="text" class="form-control-plaintext" value="Readonly plaintext input" data-bs-theme="dark" readonly>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <input type="text" class="form-control" placeholder="Input placeholder" data-bs-theme="light">
+  <textarea class="form-control" rows="2" placeholder="Textarea placeholder" data-bs-theme="light"></textarea>
+  <input type="text" class="form-control" placeholder="Disabled input placeholder" data-bs-theme="light" disabled>
+  <textarea class="form-control" rows="2" data-bs-theme="light" disabled>Disabled textarea placeholder</textarea>
+  <input type="text" class="form-control" value="Readonly input value" data-bs-theme="light" readonly>
+  <textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" data-bs-theme="light" readonly></textarea>
+  <input type="text" class="form-control-plaintext" value="Readonly plaintext input" data-bs-theme="light" readonly>
+</div>
+
+### File input
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <input class="form-control" type="file">
+  <input class="form-control" type="file" disabled>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <input class="form-control" type="file">
+  <input class="form-control" type="file" disabled>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <input class="form-control" type="file">
+  <input class="form-control" type="file" disabled>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <input class="form-control" type="file" data-bs-theme="dark">
+  <input class="form-control" type="file" data-bs-theme="dark" disabled>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <input class="form-control" type="file" data-bs-theme="light">
+  <input class="form-control" type="file" data-bs-theme="light" disabled>
+</div>
+
+### Helper
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input"><span class="visually-hidden">Helper for input</span></button>
+  <div>
+    <label class="form-label is-required">Input label</label>
+    <button type="button" class="form-helper" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Help for input"><span class="visually-hidden">Helper for input</span></button>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input"><span class="visually-hidden">Helper for input</span></button>
+  <div>
+    <label class="form-label is-required">Input label</label>
+    <button type="button" class="form-helper" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Help for input"><span class="visually-hidden">Helper for input</span></button>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input"><span class="visually-hidden">Helper for input</span></button>
+  <div>
+    <label class="form-label is-required">Input label</label>
+    <button type="button" class="form-helper" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Help for input"><span class="visually-hidden">Helper for input</span></button>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input" data-bs-theme="dark"><span class="visually-hidden">Helper for input</span></button>
+  <div>
+    <label class="form-label is-required" data-bs-theme="dark">Input label</label>
+    <button type="button" class="form-helper" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Help for input" data-bs-theme="dark"><span class="visually-hidden">Helper for input</span></button>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input" data-bs-theme="light"><span class="visually-hidden">Helper for input</span></button>
+  <div>
+    <label class="form-label is-required" data-bs-theme="light">Input label</label>
+    <button type="button" class="form-helper" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Help for input" data-bs-theme="light"><span class="visually-hidden">Helper for input</span></button>
+  </div>
+</div>
+
+### Input group
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <div class="mb-3">
+    <div class="input-group">
+      <span class="input-group-text">Input group text</span>
+      <input type="text" class="form-control">
+    </div>
+  </div>
+  <div class="input-group">
+    <button class="btn btn-secondary" type="button" disabled>Button</button>
+    <select class="form-select" disabled>
+      <option selected>Choose...</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </select>
+    <span class="input-group-text">Options</span>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="mb-3">
+    <div class="input-group">
+      <span class="input-group-text">Input group text</span>
+      <input type="text" class="form-control">
+    </div>
+  </div>
+  <div class="input-group">
+    <button class="btn btn-secondary" type="button" disabled>Button</button>
+    <select class="form-select" disabled>
+      <option selected>Choose...</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </select>
+    <span class="input-group-text">Options</span>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="mb-3">
+    <div class="input-group">
+      <span class="input-group-text">Input group text</span>
+      <input type="text" class="form-control">
+    </div>
+  </div>
+  <div class="input-group">
+    <button class="btn btn-secondary" type="button" disabled>Button</button>
+    <select class="form-select" disabled>
+      <option selected>Choose...</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </select>
+    <span class="input-group-text">Options</span>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <div class="mb-3">
+    <div class="input-group" data-bs-theme="dark">
+      <span class="input-group-text">Input group text</span>
+      <input type="text" class="form-control">
+    </div>
+  </div>
+  <div class="input-group" data-bs-theme="dark">
+    <button class="btn btn-secondary" type="button" disabled>Button</button>
+    <select class="form-select" disabled>
+      <option selected>Choose...</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </select>
+    <span class="input-group-text">Options</span>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="mb-3">
+    <div class="input-group" data-bs-theme="light">
+      <span class="input-group-text">Input group text</span>
+      <input type="text" class="form-control">
+    </div>
+  </div>
+  <div class="input-group" data-bs-theme="light">
+    <button class="btn btn-secondary" type="button" disabled>Button</button>
+    <select class="form-select" disabled>
+      <option selected>Choose...</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </select>
+    <span class="input-group-text">Options</span>
+  </div>
+</div>
+
+### Labels, required fields & text
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex flex-column border border-tertiary p-3">
+  <label class="form-label">Form label</label>
+  <label class="form-label is-required">Form label</label>
+  <label class="form-label is-disabled">Form label</label>
+  <label class="form-label is-required is-disabled">Form label</label>
+  <div class="form-text">Form text helper</div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex flex-column border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <label class="form-label">Form label</label>
+  <label class="form-label is-required">Form label</label>
+  <label class="form-label is-disabled">Form label</label>
+  <label class="form-label is-required is-disabled">Form label</label>
+  <div class="form-text">Form text helper</div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex flex-column border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <label class="form-label">Form label</label>
+  <label class="form-label is-required">Form label</label>
+  <label class="form-label is-disabled">Form label</label>
+  <label class="form-label is-required is-disabled">Form label</label>
+  <div class="form-text">Form text helper</div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex flex-column border border-tertiary p-3" style="background-color: #282d55;">
+  <label class="form-label" data-bs-theme="dark">Form label</label>
+  <label class="form-label is-required" data-bs-theme="dark">Form label</label>
+  <label class="form-label is-disabled" data-bs-theme="dark">Form label</label>
+  <label class="form-label is-required is-disabled" data-bs-theme="dark">Form label</label>
+  <div class="form-text" data-bs-theme="dark">Form text helper</div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex flex-column border border-tertiary p-3" style="background-color: #b5e8f7">
+  <label class="form-label" data-bs-theme="light">Form label</label>
+  <label class="form-label is-required" data-bs-theme="light">Form label</label>
+  <label class="form-label is-disabled" data-bs-theme="light">Form label</label>
+  <label class="form-label is-required is-disabled" data-bs-theme="light">Form label</label>
+  <div class="form-text" data-bs-theme="light">Form text helper</div>
+</div>
+
+### Range
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <input type="range" class="form-range">
+  <input type="range" class="form-range" disabled>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <input type="range" class="form-range">
+  <input type="range" class="form-range" disabled>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <input type="range" class="form-range">
+  <input type="range" class="form-range" disabled>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <input type="range" class="form-range" data-bs-theme="dark">
+  <input type="range" class="form-range" data-bs-theme="dark" disabled>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <input type="range" class="form-range" data-bs-theme="light">
+  <input type="range" class="form-range" data-bs-theme="light" disabled>
+</div>
+
+### Star rating
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <form><fieldset class="star-rating">
+    <legend class="visually-hidden">Results relevance</legend>
+    <input type="radio" id="terrible1" name="rating" value="1" class="visually-hidden">
+    <label for="terrible1" title="Terrible"><span class="visually-hidden">Terrible</span></label>
+    <input type="radio" id="bad1" name="rating" value="2" class="visually-hidden">
+    <label for="bad1" title="Bad"><span class="visually-hidden">Bad</span></label>
+    <input type="radio" id="mixed1" name="rating" value="3" class="visually-hidden">
+    <label for="mixed1" title="Mixed"><span class="visually-hidden">Mixed</span></label>
+    <input type="radio" id="good1" name="rating" value="4" class="visually-hidden" checked>
+    <label for="good1" title="Good"><span class="visually-hidden">Good</span></label>
+    <input type="radio" id="excellent1" name="rating" value="5" class="visually-hidden">
+    <label for="excellent1" title="Excellent"><span class="visually-hidden">Excellent</span></label>
+  </fieldset></form>
+  <div class="d-flex star-rating">
+    <p class="visually-hidden">Star rating: rated 3 out of 5</p>
+    <div aria-hidden="true">
+      <span></span>
+      <span></span>
+      <span class="checked"></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+  <form><fieldset class="star-rating" disabled>
+    <legend class="visually-hidden">Results relevance</legend>
+    <input type="radio" id="terrible11" name="rating" value="1" class="visually-hidden">
+    <label for="terrible11" title="Terrible"><span class="visually-hidden">Terrible</span></label>
+    <input type="radio" id="bad11" name="rating" value="2" class="visually-hidden">
+    <label for="bad11" title="Bad"><span class="visually-hidden">Bad</span></label>
+    <input type="radio" id="mixed11" name="rating" value="3" class="visually-hidden">
+    <label for="mixed11" title="Mixed"><span class="visually-hidden">Mixed</span></label>
+    <input type="radio" id="good11" name="rating" value="4" class="visually-hidden" checked>
+    <label for="good11" title="Good"><span class="visually-hidden">Good</span></label>
+    <input type="radio" id="excellent11" name="rating" value="5" class="visually-hidden">
+    <label for="excellent11" title="Excellent"><span class="visually-hidden">Excellent</span></label>
+  </fieldset></form>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <form><fieldset class="star-rating">
+    <legend class="visually-hidden">Results relevance</legend>
+    <input type="radio" id="terrible2" name="rating" value="1" class="visually-hidden">
+    <label for="terrible2" title="Terrible"><span class="visually-hidden">Terrible</span></label>
+    <input type="radio" id="bad2" name="rating" value="2" class="visually-hidden">
+    <label for="bad2" title="Bad"><span class="visually-hidden">Bad</span></label>
+    <input type="radio" id="mixed2" name="rating" value="3" class="visually-hidden">
+    <label for="mixed2" title="Mixed"><span class="visually-hidden">Mixed</span></label>
+    <input type="radio" id="good2" name="rating" value="4" class="visually-hidden" checked>
+    <label for="good2" title="Good"><span class="visually-hidden">Good</span></label>
+    <input type="radio" id="excellent2" name="rating" value="5" class="visually-hidden">
+    <label for="excellent2" title="Excellent"><span class="visually-hidden">Excellent</span></label>
+  </fieldset></form>
+  <div class="d-flex star-rating">
+    <p class="visually-hidden">Star rating: rated 3 out of 5</p>
+    <div aria-hidden="true">
+      <span></span>
+      <span></span>
+      <span class="checked"></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+  <form><fieldset class="star-rating" disabled>
+    <legend class="visually-hidden">Results relevance</legend>
+    <input type="radio" id="terrible21" name="rating" value="1" class="visually-hidden">
+    <label for="terrible21" title="Terrible"><span class="visually-hidden">Terrible</span></label>
+    <input type="radio" id="bad21" name="rating" value="2" class="visually-hidden">
+    <label for="bad21" title="Bad"><span class="visually-hidden">Bad</span></label>
+    <input type="radio" id="mixed21" name="rating" value="3" class="visually-hidden">
+    <label for="mixed21" title="Mixed"><span class="visually-hidden">Mixed</span></label>
+    <input type="radio" id="good21" name="rating" value="4" class="visually-hidden" checked>
+    <label for="good21" title="Good"><span class="visually-hidden">Good</span></label>
+    <input type="radio" id="excellent21" name="rating" value="5" class="visually-hidden">
+    <label for="excellent21" title="Excellent"><span class="visually-hidden">Excellent</span></label>
+  </fieldset></form>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <form><fieldset class="star-rating">
+    <legend class="visually-hidden">Results relevance</legend>
+    <input type="radio" id="terrible3" name="rating" value="1" class="visually-hidden">
+    <label for="terrible3" title="Terrible"><span class="visually-hidden">Terrible</span></label>
+    <input type="radio" id="bad3" name="rating" value="2" class="visually-hidden">
+    <label for="bad3" title="Bad"><span class="visually-hidden">Bad</span></label>
+    <input type="radio" id="mixed3" name="rating" value="3" class="visually-hidden">
+    <label for="mixed3" title="Mixed"><span class="visually-hidden">Mixed</span></label>
+    <input type="radio" id="good3" name="rating" value="4" class="visually-hidden" checked>
+    <label for="good3" title="Good"><span class="visually-hidden">Good</span></label>
+    <input type="radio" id="excellent3" name="rating" value="5" class="visually-hidden">
+    <label for="excellent3" title="Excellent"><span class="visually-hidden">Excellent</span></label>
+  </fieldset></form>
+  <div class="d-flex star-rating">
+    <p class="visually-hidden">Star rating: rated 3 out of 5</p>
+    <div aria-hidden="true">
+      <span></span>
+      <span></span>
+      <span class="checked"></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+  <form><fieldset class="star-rating" disabled>
+    <legend class="visually-hidden">Results relevance</legend>
+    <input type="radio" id="terrible31" name="rating" value="1" class="visually-hidden">
+    <label for="terrible31" title="Terrible"><span class="visually-hidden">Terrible</span></label>
+    <input type="radio" id="bad31" name="rating" value="2" class="visually-hidden">
+    <label for="bad31" title="Bad"><span class="visually-hidden">Bad</span></label>
+    <input type="radio" id="mixed31" name="rating" value="3" class="visually-hidden">
+    <label for="mixed31" title="Mixed"><span class="visually-hidden">Mixed</span></label>
+    <input type="radio" id="good31" name="rating" value="4" class="visually-hidden" checked>
+    <label for="good31" title="Good"><span class="visually-hidden">Good</span></label>
+    <input type="radio" id="excellent31" name="rating" value="5" class="visually-hidden">
+    <label for="excellent31" title="Excellent"><span class="visually-hidden">Excellent</span></label>
+  </fieldset></form>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <form><fieldset class="star-rating" data-bs-theme="dark">
+    <legend class="visually-hidden">Results relevance</legend>
+    <input type="radio" id="terrible4" name="rating" value="1" class="visually-hidden">
+    <label for="terrible4" title="Terrible"><span class="visually-hidden">Terrible</span></label>
+    <input type="radio" id="bad4" name="rating" value="2" class="visually-hidden">
+    <label for="bad4" title="Bad"><span class="visually-hidden">Bad</span></label>
+    <input type="radio" id="mixed4" name="rating" value="3" class="visually-hidden">
+    <label for="mixed4" title="Mixed"><span class="visually-hidden">Mixed</span></label>
+    <input type="radio" id="good4" name="rating" value="4" class="visually-hidden" checked>
+    <label for="good4" title="Good"><span class="visually-hidden">Good</span></label>
+    <input type="radio" id="excellent4" name="rating" value="5" class="visually-hidden">
+    <label for="excellent4" title="Excellent"><span class="visually-hidden">Excellent</span></label>
+  </fieldset></form>
+  <div class="d-flex star-rating" data-bs-theme="dark">
+    <p class="visually-hidden">Star rating: rated 3 out of 5</p>
+    <div aria-hidden="true">
+      <span></span>
+      <span></span>
+      <span class="checked"></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+  <form><fieldset class="star-rating" data-bs-theme="dark" disabled>
+    <legend class="visually-hidden">Results relevance</legend>
+    <input type="radio" id="terrible41" name="rating" value="1" class="visually-hidden">
+    <label for="terrible41" title="Terrible"><span class="visually-hidden">Terrible</span></label>
+    <input type="radio" id="bad41" name="rating" value="2" class="visually-hidden">
+    <label for="bad41" title="Bad"><span class="visually-hidden">Bad</span></label>
+    <input type="radio" id="mixed41" name="rating" value="3" class="visually-hidden">
+    <label for="mixed41" title="Mixed"><span class="visually-hidden">Mixed</span></label>
+    <input type="radio" id="good41" name="rating" value="4" class="visually-hidden" checked>
+    <label for="good41" title="Good"><span class="visually-hidden">Good</span></label>
+    <input type="radio" id="excellent41" name="rating" value="5" class="visually-hidden">
+    <label for="excellent41" title="Excellent"><span class="visually-hidden">Excellent</span></label>
+  </fieldset></form>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <form><fieldset class="star-rating" data-bs-theme="light">
+    <legend class="visually-hidden">Results relevance</legend>
+    <input type="radio" id="terrible5" name="rating" value="1" class="visually-hidden">
+    <label for="terrible5" title="Terrible"><span class="visually-hidden">Terrible</span></label>
+    <input type="radio" id="bad5" name="rating" value="2" class="visually-hidden">
+    <label for="bad5" title="Bad"><span class="visually-hidden">Bad</span></label>
+    <input type="radio" id="mixed5" name="rating" value="3" class="visually-hidden">
+    <label for="mixed5" title="Mixed"><span class="visually-hidden">Mixed</span></label>
+    <input type="radio" id="good5" name="rating" value="4" class="visually-hidden" checked>
+    <label for="good5" title="Good"><span class="visually-hidden">Good</span></label>
+    <input type="radio" id="excellent5" name="rating" value="5" class="visually-hidden">
+    <label for="excellent5" title="Excellent"><span class="visually-hidden">Excellent</span></label>
+  </fieldset></form>
+  <div class="d-flex star-rating" data-bs-theme="light">
+    <p class="visually-hidden">Star rating: rated 3 out of 5</p>
+    <div aria-hidden="true">
+      <span></span>
+      <span></span>
+      <span class="checked"></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+  <form><fieldset class="star-rating" data-bs-theme="light" disabled>
+    <legend class="visually-hidden">Results relevance</legend>
+    <input type="radio" id="terrible51" name="rating" value="1" class="visually-hidden">
+    <label for="terrible51" title="Terrible"><span class="visually-hidden">Terrible</span></label>
+    <input type="radio" id="bad51" name="rating" value="2" class="visually-hidden">
+    <label for="bad51" title="Bad"><span class="visually-hidden">Bad</span></label>
+    <input type="radio" id="mixed51" name="rating" value="3" class="visually-hidden">
+    <label for="mixed51" title="Mixed"><span class="visually-hidden">Mixed</span></label>
+    <input type="radio" id="good51" name="rating" value="4" class="visually-hidden" checked>
+    <label for="good51" title="Good"><span class="visually-hidden">Good</span></label>
+    <input type="radio" id="excellent51" name="rating" value="5" class="visually-hidden">
+    <label for="excellent51" title="Excellent"><span class="visually-hidden">Excellent</span></label>
+  </fieldset></form>
+</div>
+
+### Breadcrumb
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <nav aria-label="breadcrumb1">
+    <ol class="breadcrumb mb-0">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+    <ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Library</li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <nav aria-label="breadcrumb2">
+    <ol class="breadcrumb mb-0">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+    <ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Library</li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <nav aria-label="breadcrumb3">
+    <ol class="breadcrumb mb-0">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+    <ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Library</li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <nav aria-label="breadcrumb4">
+    <ol class="breadcrumb mb-0" data-bs-theme="dark">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+    <ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';" data-bs-theme="dark">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Library</li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <nav aria-label="breadcrumb5">
+    <ol class="breadcrumb mb-0" data-bs-theme="light">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+    <ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';" data-bs-theme="light">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Library</li>
+    </ol>
+  </nav>
+</div>
diff --git a/site/content/docs/5.3/examples/download-app/index.html b/site/content/docs/5.3/examples/download-app/index.html
index cfd573e3c0..ff0190b611 100644
--- a/site/content/docs/5.3/examples/download-app/index.html
+++ b/site/content/docs/5.3/examples/download-app/index.html
@@ -33,7 +33,7 @@
 </svg>
 
 <header class="sticky-top">
-  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation of download app example page">
+  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation of download app example page">
     <div class="container-xxl">
       <div class="navbar-brand">
         <a class="stretched-link" href="/">
@@ -284,7 +284,7 @@ <h2 class="h1 mb-0 mb-md-5 text-primary text-center" id="download-notice">How to
               <li>
                 <span class="tag mt-md-3 mb-3 border-primary">1</span>
                 <span class="d-inline-block fw-bold mb-3">Register with your Google store account to our <a href="https://groups.google.com/g/odsapp" target="_blank" rel="noopener">Beta program list</a></span>
-                <a href="https://groups.google.com/g/odsapp" target="_blank" rel="noopener" class="btn btn-secondary mb-md-3">Register</a>
+                <a href="https://groups.google.com/g/odsapp" target="_blank" rel="noopener" class="btn btn-outline-secondary mb-md-3">Register</a>
               </li>
               <li class="vr mx-auto my-4 bg-light custom-vr"></li>
               <li>
@@ -349,7 +349,7 @@ <h2 class="h1 mb-2 mb-md-3 text-center">Your feedback is valued</h2>
   </div>
 </main>
 
-<footer class="footer bg-dark navbar-dark">
+<footer class="footer bg-dark ">
   <h2 class="visually-hidden">Sitemap & information</h2>
   <div class="container-xxl footer-terms">
     <ul class="navbar-nav gap-md-3">
diff --git a/site/content/docs/5.3/examples/form/index.html b/site/content/docs/5.3/examples/form/index.html
index f637073d95..c040d8d440 100644
--- a/site/content/docs/5.3/examples/form/index.html
+++ b/site/content/docs/5.3/examples/form/index.html
@@ -15,7 +15,7 @@
 </svg>
 
 <header class="sticky-top">
-  <nav class="navbar navbar-dark navbar-expand-lg bg-dark supra" aria-label="Supra navigation">
+  <nav class="navbar navbar-expand-lg bg-dark supra" aria-label="Supra navigation">
     <div class="container-xxl">
       <ul class="navbar-nav ms-auto">
         <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
@@ -23,7 +23,7 @@
       </ul>
     </div>
   </nav>
-  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation">
+  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation">
     <div class="container-xxl">
       <div class="navbar-brand me-auto me-lg-4">
         <a class="stretched-link" href="#">
@@ -213,7 +213,7 @@ <h1 class="display-1">Become a reseller</h1>
     </div>
   </div>
 </main>
-<footer class="footer bg-dark navbar-dark">
+<footer class="footer bg-dark ">
   <h2 class="visually-hidden">Sitemap and information</h2>
   <div class="container-xxl footer-terms">
     <ul class="navbar-nav gap-md-3">
diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md
index 78a3d3c86d..bba03788cd 100644
--- a/site/content/docs/5.3/forms/checks-radios.md
+++ b/site/content/docs/5.3/forms/checks-radios.md
@@ -414,30 +414,13 @@ Star ratings come with a smaller variant: `.star-rating-sm`.
 
 ### Dark variant
 
-Add `.star-rating-dark` to the `.star-rating` for a dark variant.
+{{< deprecated-in "5.3.3" >}}
 
-{{< example class="bg-dark" >}}
-<form>
-  <fieldset class="star-rating star-rating-dark">
-    <legend class="visually-hidden">Results relevance</legend>
-
-    <input type="radio" id="terrible3" name="rating" value="1" class="visually-hidden">
-    <label for="terrible3" title="Terrible"><span class="visually-hidden">Terrible</span></label>
-
-    <input type="radio" id="bad3" name="rating" value="2" class="visually-hidden">
-    <label for="bad3" title="Bad"><span class="visually-hidden">Bad</span></label>
-
-    <input type="radio" id="mixed3" name="rating" value="3" class="visually-hidden">
-    <label for="mixed3" title="Mixed"><span class="visually-hidden">Mixed</span></label>
+{{< callout warning >}}
+**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
 
-    <input type="radio" id="good3" name="rating" value="4" class="visually-hidden" checked>
-    <label for="good3" title="Good"><span class="visually-hidden">Good</span></label>
-
-    <input type="radio" id="excellent3" name="rating" value="5" class="visually-hidden">
-    <label for="excellent3" title="Excellent"><span class="visually-hidden">Excellent</span></label>
-  </fieldset>
-</form>
-{{< /example >}}
+Add `data-bs-theme="dark"` to the `.star-rating` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
+{{< /callout >}}
 
 ### Readonly
 
diff --git a/site/content/docs/5.3/forms/input-group.md b/site/content/docs/5.3/forms/input-group.md
index 074a73d1aa..cc3839289b 100644
--- a/site/content/docs/5.3/forms/input-group.md
+++ b/site/content/docs/5.3/forms/input-group.md
@@ -162,25 +162,25 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
 
 {{< example >}}
 <div class="input-group mb-3">
-  <button class="btn btn-secondary" type="button" id="button-addon1">Button</button>
+  <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
   <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
 </div>
 
 <div class="input-group mb-3">
   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
-  <button class="btn btn-secondary" type="button" id="button-addon2">Button</button>
+  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
 </div>
 
 <div class="input-group mb-3">
-  <button class="btn btn-secondary" type="button">Button</button>
-  <button class="btn btn-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
   <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
 </div>
 
 <div class="input-group">
   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
-  <button class="btn btn-secondary" type="button">Button</button>
-  <button class="btn btn-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
 </div>
 {{< /example >}}
 
@@ -242,8 +242,8 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
 
 {{< example >}}
 <div class="input-group mb-3">
-  <button type="button" class="btn btn-secondary">Action</button>
-  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-outline-secondary">Action</button>
+  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
@@ -258,8 +258,8 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
 
 <div class="input-group">
   <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
-  <button type="button" class="btn btn-secondary">Action</button>
-  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-outline-secondary">Action</button>
+  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu dropdown-menu-end">
@@ -300,7 +300,7 @@ Input groups include support for custom selects and custom file inputs. Browser
 </div>
 
 <div class="input-group mb-3">
-  <button class="btn btn-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
   <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
     <option selected>Choose...</option>
     <option value="1">One</option>
@@ -316,7 +316,7 @@ Input groups include support for custom selects and custom file inputs. Browser
     <option value="2">Two</option>
     <option value="3">Three</option>
   </select>
-  <button class="btn btn-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
 </div>
 {{< /example >}}
 
@@ -324,23 +324,23 @@ Input groups include support for custom selects and custom file inputs. Browser
 
 {{< example >}}
 <div class="input-group mb-3">
-  <label for="inputGroupFile01" class="input-group-text">Upload</label>
+  <label class="input-group-text" for="inputGroupFile01">Upload</label>
   <input type="file" class="form-control" id="inputGroupFile01">
 </div>
 
 <div class="input-group mb-3">
   <input type="file" class="form-control" id="inputGroupFile02">
-  <label for="inputGroupFile02" class="input-group-text">Upload</label>
+  <label class="input-group-text" for="inputGroupFile02">Upload</label>
 </div>
 
 <div class="input-group mb-3">
-  <button class="btn btn-secondary" type="button" id="inputGroupFileAddon03">Button</button>
+  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
   <input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload">
 </div>
 
 <div class="input-group">
   <input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
-  <button class="btn btn-secondary" type="button" id="inputGroupFileAddon04">Button</button>
+  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
 </div>
 {{< /example >}}
 
diff --git a/site/content/docs/5.3/forms/quantity-selector.md b/site/content/docs/5.3/forms/quantity-selector.md
index efe6a504d2..d8f710606e 100644
--- a/site/content/docs/5.3/forms/quantity-selector.md
+++ b/site/content/docs/5.3/forms/quantity-selector.md
@@ -24,10 +24,10 @@ Value will vary between the values defined for the `min` and `max` attributes (n
 {{< example >}}
 <div class="quantity-selector">
   <input type="number" id="inputQuantitySelector" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
-  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
+  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
     <span class="visually-hidden">Step down</span>
   </button>
-  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector" data-bs-step="up">
+  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="up">
     <span class="visually-hidden">Step up</span>
   </button>
 </div>
@@ -40,10 +40,10 @@ Set small size using the contextual class `.quantity-selector-sm`.
 {{< example >}}
 <div class="quantity-selector quantity-selector-sm">
   <input type="number" id="inputQuantitySelectorSm" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
-  <button type="button" class="btn btn-icon btn-secondary btn-sm" aria-describedby="inputQuantitySelectorSm" data-bs-step="down">
+  <button type="button" class="btn btn-icon btn-outline-secondary btn-sm" aria-describedby="inputQuantitySelectorSm" data-bs-step="down">
     <span class="visually-hidden">Step down</span>
   </button>
-  <button type="button" class="btn btn-icon btn-secondary btn-sm" aria-describedby="inputQuantitySelectorSm" data-bs-step="up">
+  <button type="button" class="btn btn-icon btn-outline-secondary btn-sm" aria-describedby="inputQuantitySelectorSm" data-bs-step="up">
     <span class="visually-hidden">Step up</span>
   </button>
 </div>
@@ -56,10 +56,10 @@ Add the `disabled` boolean attribute on quantity selector elements to give it a
 {{< example >}}
 <div class="quantity-selector">
   <input type="number" id="inputQuantitySelectorDisabled" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
-  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="down" disabled>
+  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="down" disabled>
     <span class="visually-hidden">Step down</span>
   </button>
-  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="up" disabled>
+  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="up" disabled>
     <span class="visually-hidden">Step up</span>
   </button>
 </div>
diff --git a/site/content/docs/5.3/forms/validation.md b/site/content/docs/5.3/forms/validation.md
index 098e92f0a9..e8a81764c6 100644
--- a/site/content/docs/5.3/forms/validation.md
+++ b/site/content/docs/5.3/forms/validation.md
@@ -286,10 +286,10 @@ Validation styles are available for the following form controls and components:
     <label for="inputQuantitySelector" class="form-label">Quantity selector</label>
     <div class="quantity-selector w-100">
       <input type="number" id="inputQuantitySelector" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="11" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
-      <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
+      <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
         <span class="visually-hidden">Step down</span>
       </button>
-      <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector" data-bs-step="up">
+      <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="up">
         <span class="visually-hidden">Step up</span>
       </button>
       <div class="invalid-feedback">Please enter a valid number.</div>
diff --git a/site/content/docs/5.3/helpers/stacks.md b/site/content/docs/5.3/helpers/stacks.md
index 2e1512358b..488a6545ce 100644
--- a/site/content/docs/5.3/helpers/stacks.md
+++ b/site/content/docs/5.3/helpers/stacks.md
@@ -64,23 +64,23 @@ And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}):
 
 Use `.vstack` to stack buttons and other elements:
 
-<!-- Boosted mod: primary and secondary buttons -->
+<!-- Boosted mod: primary and outline secondary buttons -->
 {{< example >}}
 <div class="vstack gap-2 col-md-5 mx-auto">
   <button type="button" class="btn btn-primary">Save changes</button>
-  <button type="button" class="btn btn-secondary">Cancel</button>
+  <button type="button" class="btn btn-outline-secondary">Cancel</button>
 </div>
 {{< /example >}}
 
 Create an inline form with `.hstack`:
 
-<!-- Boosted mod: primary and secondary button -->
+<!-- Boosted mod: primary and outline secondary button -->
 {{< example >}}
 <div class="hstack gap-3">
   <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
   <button type="button" class="btn btn-primary">Submit</button>
   <div class="vr"></div>
-  <button type="button" class="btn btn-secondary">Reset</button>
+  <button type="button" class="btn btn-outline-secondary">Reset</button>
 </div>
 {{< /example >}}
 
diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
index 9985af6848..d38f9d7cfc 100644
--- a/site/content/docs/5.3/migration.md
+++ b/site/content/docs/5.3/migration.md
@@ -82,6 +82,11 @@ Boosted v5.3.2 has landed also including specific Boosted content as usual.
 
 If you need more details about the changes, please refer to the [v5.3.2 release](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/releases/tag/v5.3.2).
 
+### Color modes!
+
+- **New colors available.** We introduced the following variables based on brand introduction.
+  - `$gray-950`: `#141414`, a darker gray. Use as body background (dark): `.bg-body`.
+
 ### Components
 
 - **Accordion**
@@ -1282,7 +1287,7 @@ If you need more details about the changes, please refer to the [v5.2.1 release]
     </ul>
   </details>
 
-- Dark text variants handling is now explained in [Customize > CSS variables > Dark text rule]({{< docsref "/customize/css-variables#dark-text-rule" >}}).
+- Dark text variants handling is now explained in [Customize > CSS variables > Dark text rule](https://boosted.orange.com/docs/5.2/customize/css-variables#dark-text-rule).
 
 ## v5.2.0
 
diff --git a/site/content/docs/5.3/utilities/background.md b/site/content/docs/5.3/utilities/background.md
index c19eb58c06..d007b6efad 100644
--- a/site/content/docs/5.3/utilities/background.md
+++ b/site/content/docs/5.3/utilities/background.md
@@ -22,20 +22,24 @@ Background utilities like `.bg-*` that generated from our original `$theme-color
 
 <!-- Boosted mod: inconsistent background color & naming, showing only supporting color naming -->
 {{< example >}}
-<div class="p-3 mb-2 fw-bold bg-primary">.bg-primary</div>
+<div class="p-3 mb-2 fw-bold bg-primary text-black">.bg-primary</div>
 <div class="p-3 mb-2 fw-bold bg-secondary text-white">.bg-secondary</div>
-<div class="p-3 mb-2 fw-bold bg-supporting-green">.bg-supporting-green</div>
-<div class="p-3 mb-2 fw-bold bg-supporting-purple">.bg-supporting-purple</div>
-<div class="p-3 mb-2 fw-bold bg-supporting-yellow">.bg-supporting-yellow</div>
-<div class="p-3 mb-2 fw-bold bg-supporting-blue">.bg-supporting-blue</div>
-<div class="p-3 mb-2 fw-bold bg-supporting-pink">.bg-supporting-pink</div>
-<div class="p-3 mb-2 fw-bold bg-light">.bg-light</div>
+<div class="p-3 mb-2 fw-bold bg-success text-white">.bg-success</div>
+<div class="p-3 mb-2 fw-bold bg-danger text-white">.bg-danger</div>
+<div class="p-3 mb-2 fw-bold bg-warning text-black">.bg-warning</div>
+<div class="p-3 mb-2 fw-bold bg-info text-white">.bg-info</div>
+<div class="p-3 mb-2 fw-bold bg-supporting-green text-black">.bg-supporting-green</div>
+<div class="p-3 mb-2 fw-bold bg-supporting-purple text-black">.bg-supporting-purple</div>
+<div class="p-3 mb-2 fw-bold bg-supporting-yellow text-black">.bg-supporting-yellow</div>
+<div class="p-3 mb-2 fw-bold bg-supporting-blue text-black">.bg-supporting-blue</div>
+<div class="p-3 mb-2 fw-bold bg-supporting-pink text-black">.bg-supporting-pink</div>
+<div class="p-3 mb-2 fw-bold bg-light text-black">.bg-light</div>
 <div class="p-3 mb-2 fw-bold bg-dark text-white">.bg-dark</div>
 <div class="p-3 mb-2 fw-bold bg-body-secondary">.bg-body-secondary</div>
 <div class="p-3 mb-2 fw-bold bg-body-tertiary">.bg-body-tertiary</div>
 <div class="p-3 mb-2 fw-bold bg-body">.bg-body</div>
 <div class="p-3 mb-2 fw-bold bg-black text-white">.bg-black</div>
-<div class="p-3 mb-2 fw-bold bg-white">.bg-white</div>
+<div class="p-3 mb-2 fw-bold bg-white text-black">.bg-white</div>
 <div class="p-3 mb-2 fw-bold bg-transparent">.bg-transparent</div>
 {{< /example >}}
 
@@ -110,10 +114,14 @@ Boosted supersedes Bootstrap color variables with Orange brand color.
 
 {{< scss-docs name="brand-colors" file="scss/_variables.scss" >}}
 
+{{< scss-docs name="brand-colors-dark" file="scss/_variables-dark.scss" >}}
+
 {{< scss-docs name="color-variables" file="scss/_variables.scss" >}}
 
 {{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}}
 
+{{< scss-docs name="theme-color-dark-variables" file="scss/_variables-dark.scss" >}}
+
 <!-- Boosted mod: no background gradient -->
 
 Grayscale colors are also available, but only a subset are used to generate any utilities.
@@ -132,6 +140,8 @@ Theme colors are then put into a Sass map so we can loop over them to generate o
 
 {{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
 
+{{< scss-docs name="theme-colors-dark-map" file="scss/_variables-dark.scss" >}}
+
 Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.**
 
 {{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}}
@@ -140,6 +150,8 @@ RGB colors are generated from a separate Sass map:
 
 {{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}
 
+{{< scss-docs name="theme-colors-rgb-dark" file="scss/_maps.scss" >}}
+
 Background color opacities build on that with their own map that's consumed by the utilities API:
 
 {{< scss-docs name="utilities-bg-colors" file="scss/_maps.scss" >}}
diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index 135d6e8004..56df4a8ad3 100644
--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -40,9 +40,9 @@ Color utilities like `.text-*` that generated from our original `$theme-colors`
 <p class="text-body-tertiary">.text-body-tertiary</p>
 
 <p class="text-black bg-white">.text-black</p>
-<p class="text-white bg-dark">.text-white</p>
+<p class="text-white bg-black">.text-white</p>
 <p class="text-black-50 bg-white">.text-black-50</p>
-<p class="text-white-50 bg-dark">.text-white-50</p>
+<p class="text-white-50 bg-black">.text-white-50</p>
 {{< /example >}}
 
 {{< callout warning >}}
@@ -101,20 +101,6 @@ Here are some compliant combinations examples for non-texts elements, such as SV
   <svg width="1.875em" height="1.875em" class="text-info" aria-hidden="true" focusable="false">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
   </svg>
-</p>
-<p class="bg-dark p-2">
-  <svg width="1.875em" height="1.875em" class="text-primary" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#settings"/>
-  </svg>
-  <svg width="1.875em" height="1.875em" class="text-success" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
-  </svg>
-  <svg width="1.875em" height="1.875em" class="text-danger" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#danger"/>
-  </svg>
-  <svg width="1.875em" height="1.875em" class="text-info" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
-  </svg>
   <svg width="1.875em" height="1.875em" class="text-warning" aria-hidden="true" focusable="false">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning"/>
   </svg>
@@ -179,10 +165,14 @@ Boosted supersedes Bootstrap color variables with Orange brand color.
 
 {{< scss-docs name="brand-colors" file="scss/_variables.scss" >}}
 
+{{< scss-docs name="brand-colors-dark" file="scss/_variables-dark.scss" >}}
+
 {{< scss-docs name="color-variables" file="scss/_variables.scss" >}}
 
 {{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}}
 
+{{< scss-docs name="theme-color-dark-variables" file="scss/_variables-dark.scss" >}}
+
 Grayscale colors are also available, but only a subset are used to generate any utilities.
 
 {{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}
@@ -201,6 +191,8 @@ Theme colors are then put into a Sass map so we can loop over them to generate o
 
 {{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
 
+{{< scss-docs name="theme-colors-dark-map" file="scss/_variables-dark.scss" >}}
+
 Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.**
 
 {{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}}
@@ -209,6 +201,8 @@ RGB colors are generated from a separate Sass map:
 
 {{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}
 
+{{< scss-docs name="theme-colors-rgb-dark" file="scss/_maps.scss" >}}
+
 Color opacities build on that with their own map that's consumed by the utilities API:
 
 {{< scss-docs name="utilities-text-colors" file="scss/_maps.scss" >}}
diff --git a/site/data/grays.yml b/site/data/grays.yml
index a75faaab05..40e090dfc4 100644
--- a/site/data/grays.yml
+++ b/site/data/grays.yml
@@ -16,3 +16,5 @@
   hex: "#595959"
 - name: 900
   hex: "#333"
+- name: 950
+  hex: "#141414"
diff --git a/site/data/palette.yml b/site/data/palette.yml
index 9bf51266d6..05caf52cb2 100644
--- a/site/data/palette.yml
+++ b/site/data/palette.yml
@@ -53,23 +53,43 @@
     - name: Green
       class: green
       level: success
-      hex: "#32c832"
+      hex: "#228722"
       variable: $functional-green
+    - name: Green on dark
+      class: green
+      level: success
+      hex: "#32c832"
+      variable: $functional-green-dark
     - name: Blue
       class: blue
       level: info
-      hex: "#527edb"
+      hex: "#4170d8"
       variable: $functional-blue
+    - name: Blue on dark
+      class: blue
+      level: info
+      hex: "#527edb"
+      variable: $functional-blue-dark
     - name: Yellow
       class: yellow
       level: warning
-      hex: "#fc0"
+      hex: "#8f7200"
       variable: $functional-yellow
+    - name: Yellow on dark
+      class: yellow
+      level: warning
+      hex: "#fc0"
+      variable: $functional-yellow-dark
     - name: Red
       class: red
       level: danger
       hex: "#cd3c14"
       variable: $functional-red
+    - name: Red on dark
+      class: red
+      level: danger
+      hex: "#d53f15"
+      variable: $functional-red-dark
 - category: Grays
   name: "Grays"
   colors:
@@ -97,3 +117,7 @@
       class: 900
       hex: "#333"
       variable: $gray-900
+    - name: 950
+      class: 950
+      hex: "#141414"
+      variable: $gray-950
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index 0a0b31f419..558b1ea556 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -3,7 +3,7 @@
 
 - title: Getting started
   icon: book-half
-  icon_color: black
+  icon_color: body-color
   pages:
     - title: Introduction
     - title: Download
@@ -20,7 +20,7 @@
 
 - title: Customize
   icon: palette2
-  icon_color: black
+  icon_color: body-color
   pages:
     - title: Overview
     - title: Sass
@@ -33,7 +33,7 @@
 
 - title: Layout
   icon: grid-fill
-  icon_color: black
+  icon_color: body-color
   pages:
     - title: Breakpoints
     - title: Containers
@@ -46,7 +46,7 @@
 
 - title: Content
   icon: file-earmark-richtext
-  icon_color: black
+  icon_color: body-color
   pages:
     - title: Reboot
     - title: Typography
@@ -56,7 +56,7 @@
 
 - title: Forms
   icon: ui-radios
-  icon_color: black
+  icon_color: body-color
   pages:
     - title: Overview
     - title: Form control
@@ -70,7 +70,7 @@
 
 - title: Components
   icon: menu-button-wide-fill
-  icon_color: black
+  icon_color: body-color
   pages:
     - title: Accordion
     - title: Alerts
@@ -107,7 +107,7 @@
 
 - title: Helpers
   icon: magic
-  icon_color: black
+  icon_color: body-color
   pages:
     - title: Clearfix
     - title: Color & background
@@ -124,7 +124,7 @@
 
 - title: Utilities
   icon: braces-asterisk
-  icon_color: black
+  icon_color: body-color
   pages:
     - title: API
     - title: Background
@@ -149,14 +149,14 @@
 
 - title: Extend
   icon: tools
-  icon_color: black
+  icon_color: body-color
   pages:
     - title: Approach
     - title: Icons
 
 - title: About
   icon: globe2
-  icon_color: black
+  icon_color: body-color
   pages:
     - title: Overview
     - title: Team
diff --git a/site/data/theme-colors.yml b/site/data/theme-colors.yml
index 576e47303b..63a99e0bf7 100644
--- a/site/data/theme-colors.yml
+++ b/site/data/theme-colors.yml
@@ -3,19 +3,20 @@
   contrast_color: dark
 - name: secondary
   hex: "#000"
+  contrast_color: white
 - name: success
   hex: "#32c832"
-  contrast_color: dark
 - name: danger
   hex: "#cd3c14"
+  contrast_color: white
 - name: warning
   hex: "#fc0"
   contrast_color: dark
 - name: info
   hex: "#527edb"
-  contrast_color: dark
 - name: light
   hex: "#ddd"
   contrast_color: dark
 - name: dark
   hex: "#000"
+  contrast_color: white
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index 78fcc39fc1..7be9d3a220 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -21,7 +21,7 @@ <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
             {{- if .Page.Params.added -}}
               <p class="mb-0 me-2"><span class="tag tag-sm">Added in v{{ .Page.Params.added }}</span></p>
             {{- end -}}
-            <a class="btn btn-sm" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
+            <a class="btn btn-sm btn-outline-secondary" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
               View on GitHub
             </a>
           </div>
@@ -33,7 +33,7 @@ <h1 class="bd-title mb-0" id="content">{{ .Title | markdownify }}</h1>
 
       {{ if (eq .Page.Params.toc true) }}
         <div class="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary">
-          <button class="btn btn-secondary p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
+          <button class="btn btn-outline-secondary p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
             On this page
             <svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
           </button>
diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html
index d3ca70acb0..044ab22b64 100644
--- a/site/layouts/_default/examples.html
+++ b/site/layouts/_default/examples.html
@@ -76,12 +76,21 @@
       /* Boosted mod: no `.btn-bd-primary` custom style */
 
       .bd-mode-toggle {
+        --bd-mode-toggle-icon-size: 1.25rem; /* Boosted mod */
         z-index: 1500;
       }
 
       .bd-mode-toggle .dropdown-menu .active .bi {
         display: block !important;
       }
+
+      /* Boosted mod */
+      .bd-mode-toggle .dropdown-item .bi,
+      #bd-theme .bi {
+        width: var(--bd-mode-toggle-icon-size);
+        height: var(--bd-mode-toggle-icon-size);
+      }
+      /* End mod */
     </style>
 
     {{ range .Page.Params.extra_css }}
@@ -91,18 +100,17 @@
   </head>
   <body{{ with .Page.Params.body_class }} class="{{ . }}"{{ end }}>
     <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-      <symbol id="check2" viewBox="0 0 16 16">
-        <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
+      <symbol id="check2" viewBox="0 0 15 12">
+        <polygon points="13 0 5 8 2 5 0 7 3 10 5 12 7 10 15 2 13 0"/>
       </symbol>
       <symbol id="circle-half" viewBox="0 0 16 16">
         <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
       </symbol>
-      <symbol id="moon-stars-fill" viewBox="0 0 16 16">
-        <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
-        <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
+      <symbol id="ui-dark-mode" viewBox="0 0 1000 1000">
+        <path d="M675 649.88c-179.493 0-325-145.57-325-325.141A324.478 324.478 0 0 1 465.721 76C247.03 93.463 75 276.537 75 499.815 75 734.638 265.279 925 500 925c223.181 0 406.175-172.106 423.63-390.891A324.222 324.222 0 0 1 675 649.88Z"/>
       </symbol>
-      <symbol id="sun-fill" viewBox="0 0 16 16">
-        <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
+      <symbol id="ui-light-mode" viewBox="0 0 1000 1000">
+        <path d="M287.868 712.132a25.073 25.073 0 0 0-35.355 0l-53.033 53.033a25 25 0 0 0 35.355 35.355l53.033-53.033a25.073 25.073 0 0 0 0-35.355Zm424.264-424.264a25.073 25.073 0 0 0 35.355 0l53.033-53.033a25 25 0 0 0-35.355-35.355l-53.033 53.033a25.073 25.073 0 0 0 0 35.355Zm35.355 424.264a25.073 25.073 0 0 0-35.355 0 25.073 25.073 0 0 0 0 35.355l53.033 53.033a25 25 0 0 0 35.355-35.355ZM252.513 287.868a25.073 25.073 0 0 0 35.355 0 25.073 25.073 0 0 0 0-35.355l-53.033-53.033a25 25 0 0 0-35.355 35.355ZM200 500a25.073 25.073 0 0 0-25-25h-75a25 25 0 0 0 0 50h75a25.073 25.073 0 0 0 25-25Zm700-25h-75a25 25 0 0 0 0 50h75a25 25 0 0 0 0-50ZM500 800a25.073 25.073 0 0 0-25 25v75a25 25 0 0 0 50 0v-75a25.073 25.073 0 0 0-25-25Zm0-600a25.073 25.073 0 0 0 25-25v-75a25 25 0 0 0-50 0v75a25.073 25.073 0 0 0 25 25Zm0 50c-138.071 0-250 111.929-250 250s111.929 250 250 250 250-111.929 250-250-111.929-250-250-250Z"/>
       </symbol>
     </svg>
 
@@ -119,14 +127,14 @@
       <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
         <li>
           <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
-            <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#sun-fill"></use></svg>
+            <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#ui-light-mode"></use></svg>
             Light
             <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
           </button>
         </li>
         <li>
           <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
-            <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
+            <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#ui-dark-mode"></use></svg>
             Dark
             <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
           </button>
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 58524d91dc..8b9ab6c0af 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -1,5 +1,5 @@
 <header class="sticky-top bd-header">
-  <nav class="navbar navbar-dark navbar-expand bg-dark supra d-none" aria-label="Supra-navigation - New release banner">
+  <nav class="navbar navbar-expand bg-dark supra d-none" aria-label="Supra-navigation - New release banner">
     <div class="container-xxl d-flex justify-content-center">
       <ul class="navbar-nav">
         <li class="nav-item">
@@ -8,7 +8,7 @@
       </ul>
     </div>
   </nav>
-  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Main navigation">
+  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Main navigation">
     <div class="container-xxl">
       <div class="navbar-brand me-auto me-lg-4">
         <a class="stretched-link" href="/">
@@ -59,19 +59,26 @@
           <li class="nav-item dropdown">
             <button class="nav-link nav-icon dropdown-toggle" id="bd-theme" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)">
               <svg class="bi theme-icon-active"><use href="#circle-half"></use></svg>
+<<<<<<< HEAD
               <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
             </button>
             <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark mb-2" aria-labelledby="bd-theme-text">
+=======
+              <span class="d-lg-none ms-2" aria-hidden="true" id="bd-theme-text">Toggle theme</span>
+              <span class="visually-hidden">Toggle theme</span>
+            </a>
+            <ul class="dropdown-menu dropdown-menu-end position-absolute" aria-labelledby="bd-theme-text">
+>>>>>>> 7b5fa29ed (feat: dark mode)
               <li>
                 <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
-                  <svg class="bi me-2"><use href="#sun-fill"></use></svg>
+                  <svg class="bi me-2"><use href="#ui-light-mode"></use></svg>
                   Light
                   <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
                 </button>
               </li>
               <li>
                 <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
-                  <svg class="bi me-2"><use href="#moon-stars-fill"></use></svg>
+                  <svg class="bi me-2"><use href="#ui-dark-mode"></use></svg>
                   Dark
                   <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
                 </button>
diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html
index 1d7f62c4fd..a01ee5b565 100644
--- a/site/layouts/partials/docs-subnav.html
+++ b/site/layouts/partials/docs-subnav.html
@@ -2,7 +2,7 @@
 
 <nav class="bd-subnavbar py-2 d-lg-none" aria-label="Secondary navigation">
   <div class="container-xxl d-flex justify-content-end">
-    <button class="btn btn-secondary btn-icon p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
+    <button class="btn btn-outline-secondary btn-icon p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
         <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"></path>
       </svg>
diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html
index 4eba0d9e30..405f2101da 100644
--- a/site/layouts/partials/docs-versions.html
+++ b/site/layouts/partials/docs-versions.html
@@ -14,7 +14,7 @@
   <button class="nav-link nav-icon dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
     <span class="d-lg-none" aria-hidden="true">Boosted&nbsp;</span><span class="visually-hidden">Boosted&nbsp;</span>v{{ .Site.Params.docs_version }} <span class="visually-hidden">(switch to other versions)</span>
   </button>
-  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark mb-2 mb-lg-0">
+  <ul class="dropdown-menu dropdown-menu-end mb-2 mb-lg-0">
     <li><h6 class="dropdown-header">v5 releases</h6></li>
     <li>
       <a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index 411cb1bea9..ff343d6a73 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -2,10 +2,10 @@
 {{- $category_slug := index $url (sub (len $url) 3) -}}
 {{- $page_slug := index $url (sub (len $url) 2) -}}
 
-<footer class="footer bg-dark navbar-dark bd-footer">
+<footer class="footer bg-dark bd-footer">
   <h2 class="visually-hidden">Boosted sitemap & information</h2>
   <div class="container-xxl footer-nav">
-    <nav class="accordion accordion-dark" id="sitemapAccordion" aria-label="Boosted sitemap footer">
+    <nav class="accordion" id="sitemapAccordion" aria-label="Boosted sitemap footer">
       <div class="row">
         <div class="footer-column col-md-6 col-lg-2">
           <h3 class="accordion-header footer-heading" id="headingLinks">
@@ -91,7 +91,7 @@ <h3 class="accordion-header footer-heading" id="headingCommunity">
 </footer>
 <!-- Boosted mod: back-to-top component -->
 <nav aria-label="Back to top" class="back-to-top">
-  <a href="#top" class="back-to-top-link btn btn-icon btn-secondary" data-bs-label="Back to top">
+  <a href="#top" class="back-to-top-link btn btn-icon btn-outline-secondary" data-bs-label="Back to top">
     <span class="visually-hidden">Back to top</span>
   </a>
 </nav>
diff --git a/site/layouts/partials/icons.html b/site/layouts/partials/icons.html
index 4d54a360e6..d8b6ccd838 100644
--- a/site/layouts/partials/icons.html
+++ b/site/layouts/partials/icons.html
@@ -15,7 +15,7 @@
     <path fill-rule="evenodd" d="M198.29,196.607a125,125,0,0,1,176.776,0L799.331,620.871A125,125,0,0,1,622.554,797.648L198.29,373.384A125,125,0,0,1,198.29,196.607Zm53.033,53.033a50,50,0,1,1,0,70.711A50,50,0,0,1,251.323,249.64ZM587.2,479.45L551.843,514.8,587.2,550.16l-35.355,35.356L516.488,550.16l-35.356,35.356L445.777,550.16,481.132,514.8,445.777,479.45l35.355-35.356,35.356,35.356,35.355-35.356ZM529.207,741.656a17.812,17.812,0,0,0-25.456,0L464.86,780.547l-39.082-38.874a17.583,17.583,0,0,0-25.264-.017l-40.305,40.305-53.033-3.535,0,0L348.1,819.351a17.917,17.917,0,0,0,25.544.087l38.89-38.891,38.891,38.891c7.122,7.122,19.013,6.443,26.163-.707l38.184-38.184,38.891,38.891c7.122,7.122,18.857,6.6,26.007-.55L593.554,806Zm68.606-566.422-195.748.018L526.94,300.127l195.748-.018h0C722.694,231.421,666.5,175.227,597.813,175.234Zm-84.88,35.727a12.5,12.5,0,0,1,12.5-12.5h75a12.5,12.5,0,0,1,0,25h-75A12.5,12.5,0,0,1,512.933,210.961Z"/>
   </symbol>
   <symbol id="check2" viewBox="0 0 15 12">
-    <polygon id="tick" points="13 0 5 8 2 5 0 7 3 10 5 12 7 10 15 2 13 0"/>
+    <polygon points="13 0 5 8 2 5 0 7 3 10 5 12 7 10 15 2 13 0"/>
   </symbol>
   <symbol id="chevron-expand" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
@@ -47,10 +47,6 @@
   <symbol id="menu-button-wide-fill" viewBox="0 0 1000 1000">
     <path fill-rule="evenodd" d="M837.5,275H450L375,175H100V762.5A62.5,62.5,0,0,0,162.5,825H900V337.5A62.5,62.5,0,0,0,837.5,275ZM275,625H175L275,450,375,625H275Zm325,0H425V450H600V625Zm137.5,0A87.5,87.5,0,1,1,825,537.5,87.5,87.5,0,0,1,737.5,625Z"/>
   </symbol>
-  <symbol id="moon-stars-fill" viewBox="0 0 16 16">
-    <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
-    <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
-  </symbol>
   <symbol id="palette2" viewBox="0 0 1000 1000">
     <path fill-rule="evenodd" class="cls-1" d="M843.715,331.562l-159.1,159.1-17.678-17.678,159.1-159.1a25.073,25.073,0,0,0,0-35.355L719.971,172.463a25.073,25.073,0,0,0-35.355,0l-17.678,17.678,44.194,44.194a12.5,12.5,0,0,1-17.678,17.678L649.26,207.818l-35.355,35.356,26.516,26.516a12.5,12.5,0,0,1-17.677,17.678l-26.517-26.517-35.355,35.356L605.066,340.4a12.5,12.5,0,1,1-17.678,17.678l-44.194-44.195-17.677,17.678-17.678-17.678,159.1-159.1a50.148,50.148,0,0,1,70.711,0L843.715,260.851A50.148,50.148,0,0,1,843.715,331.562Zm-30.633,322.01a58.843,58.843,0,0,1,13.786,21.609c0.008,0.02.013,0.042,0.021,0.063,0.546,1.567,1.014,3.156,1.417,4.757s0.724,3.194.984,4.807c0.079,0.491.155,0.982,0.221,1.475a56.109,56.109,0,0,1-15.976,47.253l-44.21,44.179-34.84,34.814A56.12,56.12,0,0,1,694.7,829l-0.064,0q-2.571,0-5.135-.241c-0.172-.016-0.344-0.035-0.515-0.052q-2.3-.234-4.581-0.657c-0.309-.057-0.617-0.117-0.926-0.18-10.465-2.117-21.09-6.433-29.2-14.542l-246.5-246.7L225.222,384.567h0l-36.335-121.63h0l-17.561-57.828-3.482-13.9c0-.012-0.006-0.024-0.01-0.036q-0.2-.669-0.353-1.335c-0.036-.162-0.06-0.323-0.093-0.485-0.058-.293-0.119-0.586-0.164-0.877-0.028-.189-0.044-0.375-0.067-0.563-0.032-.263-0.067-0.526-0.088-0.787-0.015-.2-0.019-0.392-0.028-0.588-0.011-.25-0.026-0.5-0.027-0.748,0-.038-0.005-0.078-0.005-0.116,0-.281.013-0.558,0.026-0.836,0-.081,0-0.163.007-0.244,0.024-.4.062-0.8,0.111-1.2,0.013-.1.032-0.2,0.046-0.3,0.042-.292.087-0.582,0.143-0.869,0.027-.14.059-0.278,0.089-0.417,0.053-.245.109-0.491,0.172-0.734,0.039-.148.081-0.3,0.123-0.442,0.067-.231.137-0.46,0.212-0.688,0.049-.146.1-0.292,0.15-0.436,0.081-.228.169-0.454,0.259-0.678,0.055-.137.109-0.274,0.167-0.409,0.1-.239.214-0.474,0.327-0.708,0.054-.114.106-0.229,0.162-0.341q0.249-.492.525-0.967l0.025-.046c0.194-.331.4-0.654,0.613-0.972,0.069-.1.143-0.2,0.214-0.3,0.149-.213.3-0.424,0.456-0.631,0.09-.117.182-0.231,0.274-0.346q0.222-.278.453-0.548c0.1-.117.2-0.231,0.307-0.345q0.234-.26.478-0.51c0.106-.109.213-0.219,0.322-0.326,0.172-.168.349-0.331,0.527-0.493,0.106-.1.21-0.194,0.318-0.288,0.206-.179.417-0.35,0.63-0.52,0.087-.068.171-0.141,0.258-0.208q0.454-.35.929-0.671c0.061-.042.126-0.08,0.189-0.121,0.257-.17.518-0.336,0.784-0.493,0.116-.069.236-0.133,0.354-0.2,0.217-.123.436-0.243,0.659-0.357,0.134-.069.27-0.134,0.405-0.2,0.214-.1.43-0.2,0.648-0.3q0.211-.093.427-0.18c0.221-.09.444-0.174,0.67-0.256,0.142-.051.284-0.1,0.427-0.151,0.241-.081.484-0.153,0.728-0.224,0.132-.038.261-0.079,0.394-0.114,0.3-.081.613-0.151,0.923-0.217,0.075-.015.148-0.035,0.223-0.05q0.579-.114,1.171-0.191c0.1-.014.211-0.021,0.315-0.033,0.291-.033.583-0.062,0.877-0.081,0.145-.009.292-0.013,0.438-0.018,0.258-.011.516-0.018,0.777-0.018,0.158,0,.317,0,0.477.009,0.253,0.007.507,0.02,0.762,0.037,0.162,0.011.323,0.024,0.485,0.039,0.261,0.025.522,0.058,0.784,0.093,0.156,0.022.312,0.042,0.469,0.068,0.286,0.046.573,0.1,0.86,0.164,0.133,0.028.265,0.051,0.4,0.082,0.42,0.1.842,0.208,1.264,0.336L232.8,179.7l30.221,9.164h0l121.462,36.412ZM249.008,201.918l-46.532,46.5,36.59,122.164,21.524-21.716L694.169,782.137l17.682-17.67L278.272,331.2l53.048-53.011L764.9,711.457l17.683-17.67L349,260.514l22.256-22.032Zm82.054,324.1-17.678,17.677,44.195,44.194A12.5,12.5,0,1,1,339.9,605.566l-44.194-44.194-35.356,35.355,26.517,26.517a12.5,12.5,0,0,1-17.678,17.677l-26.516-26.516L207.318,649.76l44.195,44.194a12.5,12.5,0,0,1-17.678,17.678l-44.194-44.194-17.678,17.678a25.073,25.073,0,0,0,0,35.355L278.029,826.537a25.073,25.073,0,0,0,35.355,0l159.1-159.1,17.677,17.678-159.1,159.1a50.148,50.148,0,0,1-70.711,0L154.285,738.149a50.148,50.148,0,0,1,0-70.711l159.1-159.1Z"/>
   </symbol>
@@ -60,12 +56,15 @@
   <symbol id="plus" viewBox="0 0 14 14">
     <polygon fill-rule="evenodd" points="14 6 8 6 8 0 6 0 6 6 0 6 0 8 6 8 6 14 8 14 8 8 14 8 14 6"/>
   </symbol>
-  <symbol id="sun-fill" viewBox="0 0 16 16">
-    <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
-  </symbol>
   <symbol id="tools" viewBox="0 0 1000 1000">
     <path fill-rule="evenodd" d="M889,746.184l-0.079-.076-259.2-259.2L481.566,635.065,740.842,894.342h0A104.763,104.763,0,1,0,889,746.184Zm-370.4-370.395L439.8,296.981A183.371,183.371,0,0,0,197.732,91.954L314.889,209.111a26.192,26.192,0,0,1,0,37.039h0l-74.078,74.078a26.192,26.192,0,0,1-37.04,0l-0.015-.015L86.613,203.072A183.374,183.374,0,0,0,291.639,445.139l78.808,78.808ZM851.92,79.433L685.243,209.071,648.2,283.15l-277.795,277.8-37.04-37.04L110.147,747.128l0.013,0.013A104.755,104.755,0,0,0,258.292,895.274l0.013,0.013,0.985-.984h0L481.526,672.065l-37.04-37.04,277.8-277.8,74.079-37.039L926,153.512ZM166.69,801.7a13.1,13.1,0,0,1-18.521-18.52h0L314.848,616.505a13.1,13.1,0,0,1,18.52,18.521ZM388.926,690.585L222.25,857.262h0a13.1,13.1,0,1,1-18.519-18.52h0L370.408,672.064A13.1,13.1,0,0,1,388.926,690.585Z"/>
   </symbol>
+  <symbol id="ui-dark-mode" viewBox="0 0 1000 1000">
+    <path d="M675 649.88c-179.493 0-325-145.57-325-325.141A324.478 324.478 0 0 1 465.721 76C247.03 93.463 75 276.537 75 499.815 75 734.638 265.279 925 500 925c223.181 0 406.175-172.106 423.63-390.891A324.222 324.222 0 0 1 675 649.88Z"/>
+  </symbol>
+  <symbol id="ui-light-mode" viewBox="0 0 1000 1000">
+    <path d="M287.868 712.132a25.073 25.073 0 0 0-35.355 0l-53.033 53.033a25 25 0 0 0 35.355 35.355l53.033-53.033a25.073 25.073 0 0 0 0-35.355Zm424.264-424.264a25.073 25.073 0 0 0 35.355 0l53.033-53.033a25 25 0 0 0-35.355-35.355l-53.033 53.033a25.073 25.073 0 0 0 0 35.355Zm35.355 424.264a25.073 25.073 0 0 0-35.355 0 25.073 25.073 0 0 0 0 35.355l53.033 53.033a25 25 0 0 0 35.355-35.355ZM252.513 287.868a25.073 25.073 0 0 0 35.355 0 25.073 25.073 0 0 0 0-35.355l-53.033-53.033a25 25 0 0 0-35.355 35.355ZM200 500a25.073 25.073 0 0 0-25-25h-75a25 25 0 0 0 0 50h75a25.073 25.073 0 0 0 25-25Zm700-25h-75a25 25 0 0 0 0 50h75a25 25 0 0 0 0-50ZM500 800a25.073 25.073 0 0 0-25 25v75a25 25 0 0 0 50 0v-75a25.073 25.073 0 0 0-25-25Zm0-600a25.073 25.073 0 0 0 25-25v-75a25 25 0 0 0-50 0v75a25.073 25.073 0 0 0 25 25Zm0 50c-138.071 0-250 111.929-250 250s111.929 250 250 250 250-111.929 250-250-111.929-250-250-250Z"/>
+  </symbol>
   <symbol id="ui-radios" viewBox="0 0 1000 1000">
     <path fill-rule="evenodd" d="M500,100C265.279,100,75,251.1,75,437.5c0,144.464,114.3,267.724,275,315.873V925L500,775c234.722,0,425-151.1,425-337.5S734.722,100,500,100Zm0,475H325a25,25,0,0,1,0-50H500A25,25,0,0,1,500,575ZM675,450H325a25,25,0,0,1,0-50H675A25,25,0,0,1,675,450Zm0-125H325a25,25,0,0,1,0-50H675A25,25,0,0,1,675,325Z"/>
   </symbol>
diff --git a/site/layouts/shortcodes/callout-deprecated-dark-variants.html b/site/layouts/shortcodes/callout-deprecated-dark-variants.html
new file mode 100644
index 0000000000..062a28c354
--- /dev/null
+++ b/site/layouts/shortcodes/callout-deprecated-dark-variants.html
@@ -0,0 +1,9 @@
+{{- /* Outputs message about dark mode component variants being deprecated in v5.3. */ -}}
+
+{{- $component := .Get 0 -}}
+
+<div class="bd-callout bd-callout-warning">
+  <p>
+    <strong>Heads up!</strong> Dark variants for components were deprecated in v5.3.3 with the introduction of color modes.<br>Add <code>data-bs-theme="dark"</code> to the <code>.{{ $component }}</code> or any ancestor element to enable a component-specific color mode. <a href="/docs/customize/color-modes">Learn more about our color modes</a>.
+  </p>
+</div>
diff --git a/site/layouts/shortcodes/card.html b/site/layouts/shortcodes/card.html
index a562101e75..c95af1aedd 100644
--- a/site/layouts/shortcodes/card.html
+++ b/site/layouts/shortcodes/card.html
@@ -57,7 +57,7 @@ <h3 class="card-title{{ if and $metadata (not $caption) }} mb-3{{ end }}">{{ if
     </ul>
     {{- end -}}
     {{- if $action -}}
-    <a href="#" class="btn btn-secondary{{ if eq $background "dark" }} btn-inverse{{ end }}" aria-label="{{ if $rtl }}وصف الارتباط{{ else }}Link description{{ end }}" title="{{ if $rtl }}وصف الارتباط{{ else }}Link description{{ end }}">{{ if $rtl }}وصلة{{ else }}Link{{ end }}</a>
+    <a href="#" class="btn btn-outline-secondary" aria-label="{{ if $rtl }}وصف الارتباط{{ else }}Link description{{ end }}" title="{{ if $rtl }}وصف الارتباط{{ else }}Link description{{ end }}">{{ if $rtl }}وصلة{{ else }}Link{{ end }}</a>
     {{- end -}}
   </div>
 </div>
diff --git a/site/layouts/shortcodes/orange-footer.html b/site/layouts/shortcodes/orange-footer.html
index c33f406f82..9259373da6 100644
--- a/site/layouts/shortcodes/orange-footer.html
+++ b/site/layouts/shortcodes/orange-footer.html
@@ -22,7 +22,7 @@
 {{- $id := .Get "id" -}}
 {{- $input := .Inner -}}
 
-<footer class="footer bg-dark navbar-dark">
+<footer class="footer bg-dark">
   <h2 class="visually-hidden">Sitemap & information</h2>
 {{- if $title_content }}
   <div class="container-xxl footer-title-content">
@@ -31,7 +31,7 @@ <h3 class="footer-heading">Sign up to our mailing list</h3>
       <form class="d-flex col-12 col-md-9 col-lg-7 col-xl-6 col-xxl-5 gap-2 gap-md-3">
         <label for="inputEmail{{ $id }}" class="visually-hidden">Email</label>
         <input type="email" class="form-control text-bg-dark border-dark" id="inputEmail{{ $id }}" placeholder="Enter your email">
-        <button type="submit" class="btn btn-secondary btn-inverse text-nowrap">Sign up</button>
+        <button type="submit" class="btn btn-outline-secondary text-nowrap">Sign up</button>
       </form>
     </div>
   </div>
@@ -43,17 +43,17 @@ <h3 class="footer-heading">Sign up to our mailing list</h3>
   <div class="container-xxl footer-social">
     <h3 class="footer-heading me-md-3">Follow us</h3>
     <ul class="navbar-nav gap-2 flex-row align-self-start">
-      <li><a href="#" class="btn btn-icon btn-social btn-twitter btn-inverse"><span class="visually-hidden">Twitter</span></a></li>
-      <li><a href="#" class="btn btn-icon btn-social btn-facebook btn-inverse"><span class="visually-hidden">Facebook</span></a></li>
-      <li><a href="#" class="btn btn-icon btn-social btn-instagram btn-inverse"><span class="visually-hidden">Instagram</span></a></li>
-      <li><a href="#" class="btn btn-icon btn-social btn-whatsapp btn-inverse"><span class="visually-hidden">WhatsApp</span></a></li>
-      <li><a href="#" class="btn btn-icon btn-social btn-linkedin btn-inverse"><span class="visually-hidden">LinkedIn</span></a></li>
-      <li><a href="#" class="btn btn-icon btn-social btn-youtube btn-inverse"><span class="visually-hidden">YouTube</span></a></li>
+      <li><a href="#" class="btn btn-icon btn-social btn-twitter"><span class="visually-hidden">Twitter</span></a></li>
+      <li><a href="#" class="btn btn-icon btn-social btn-facebook"><span class="visually-hidden">Facebook</span></a></li>
+      <li><a href="#" class="btn btn-icon btn-social btn-instagram"><span class="visually-hidden">Instagram</span></a></li>
+      <li><a href="#" class="btn btn-icon btn-social btn-whatsapp"><span class="visually-hidden">WhatsApp</span></a></li>
+      <li><a href="#" class="btn btn-icon btn-social btn-linkedin"><span class="visually-hidden">LinkedIn</span></a></li>
+      <li><a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a></li>
       {{- if $extra_social }}
-        <li><a href="#" class="btn btn-icon btn-social btn-snapchat btn-inverse"><span class="visually-hidden">Snapchat</span></a></li>
-        <li><a href="#" class="btn btn-icon btn-social btn-pinterest btn-inverse"><span class="visually-hidden">Pinterest</span></a></li>
-        <li><a href="#" class="btn btn-icon btn-social btn-mail btn-inverse"><span class="visually-hidden">Mail</span></a></li>
-        <li><a href="#" class="btn btn-icon btn-social btn-tiktok btn-inverse"><span class="visually-hidden">TikTok</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-snapchat"><span class="visually-hidden">Snapchat</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-pinterest"><span class="visually-hidden">Pinterest</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-mail"><span class="visually-hidden">Mail</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-tiktok"><span class="visually-hidden">TikTok</span></a></li>
       {{- end }}
     </ul>
   </div>
@@ -63,7 +63,7 @@ <h3 class="footer-heading me-md-3">Follow us</h3>
 {{- end }}
 {{- if $nav }}
   <div class="container-xxl footer-nav">
-    <nav class="accordion accordion-dark" id="accordion{{ $id }}" aria-label="Sitemap footer {{ $id }}">
+    <nav class="accordion" id="accordion{{ $id }}" aria-label="Sitemap footer {{ $id }}">
       <div class="row">
         <div class="footer-column col-md-3">
           <h3 class="accordion-header footer-heading" id="headingOne{{ $id }}">
diff --git a/site/layouts/shortcodes/orange-global-headers.html b/site/layouts/shortcodes/orange-global-headers.html
index 4bf1c93da2..8fc57e56c2 100644
--- a/site/layouts/shortcodes/orange-global-headers.html
+++ b/site/layouts/shortcodes/orange-global-headers.html
@@ -28,7 +28,7 @@
 {{- $aria_label := .Get "aria_label"}}
 {{- $input := .Inner -}}
 
-<nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="{{ $aria_label }}">
+<nav class="navbar bg-dark navbar-expand-lg" aria-label="{{ $aria_label }}">
   <div class="container-xxl">
     <div class="navbar-brand me-auto{{ cond (or $navigation $responsive_logo) "" " me-lg-4" }}">
       <a class="stretched-link" href="#">
@@ -138,7 +138,7 @@ <h1 class="title">Title</h1>
   </div>
 </nav>
 {{- if $navigation }}
-<nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="{{ $aria_label }}.2">
+<nav class="navbar bg-dark navbar-expand-lg" aria-label="{{ $aria_label }}.2">
   <div class="container-xxl">
     <div id="{{ $id }}.1" class="navbar-collapse collapse m-0 {{ $id }}">
 {{- if $supra }}
diff --git a/site/layouts/shortcodes/orange-supra.html b/site/layouts/shortcodes/orange-supra.html
index 713d7d2246..c47a96574e 100644
--- a/site/layouts/shortcodes/orange-supra.html
+++ b/site/layouts/shortcodes/orange-supra.html
@@ -10,7 +10,7 @@
 {{- $aria_label := .Get "aria_label" -}}
 {{- $input := .Inner -}}
 
-<nav class="navbar navbar-dark navbar-expand-lg bg-dark supra" aria-label="{{ $aria_label }}">
+<nav class="navbar navbar-expand-lg bg-dark supra" aria-label="{{ $aria_label }}">
   <div class="container-xxl">
     <ul class="navbar-nav me-auto">
       <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>

From a6c063d822f99605b25a6c85154d4c32cf119c25 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Wed, 25 Oct 2023 08:42:10 +0200
Subject: [PATCH 02/71] Dark mode: Navs Tabs (#2307)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_nav.scss                     |   7 +-
 scss/_variables-dark.scss          |   2 +-
 scss/_variables.scss               |  18 +-
 site/content/docs/5.3/dark-mode.md | 565 ++++++++++++++++++++++++-----
 4 files changed, 498 insertions(+), 94 deletions(-)

diff --git a/scss/_nav.scss b/scss/_nav.scss
index cc840dcbe5..94b203eda1 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -60,8 +60,8 @@
   --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
   --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
   --#{$prefix}nav-tabs-link-padding-x: #{$nav-tabs-link-padding-x}; // Boosted mod
-  --#{$prefix}nav-tabs-link-hover-color: #{color-contrast($nav-tabs-link-hover-border-color)}; // Boosted mod
-  --#{$prefix}nav-tabs-link-hover-bg: var(--#{$prefix}nav-tabs-link-hover-border-color); // Boosted mod
+  --#{$prefix}nav-tabs-link-hover-color: #{$nav-tabs-link-hover-color}; // Boosted mod
+  --#{$prefix}nav-tabs-link-hover-bg: #{$nav-tabs-link-hover-bg}; // Boosted mod
   --#{$prefix}nav-tabs-link-border-width: var(--#{$prefix}nav-tabs-border-width) var(--#{$prefix}nav-tabs-border-width) 0; // Boosted mod
   --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
   --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
@@ -236,10 +236,11 @@
   --#{$prefix}tab-content-padding-y: #{$spacer};
   --#{$prefix}tab-content-padding-x: #{subtract($nav-tabs-link-padding-x, var(--#{$prefix}tab-content-border-width))};
   --#{$prefix}tab-content-border-width: #{$nav-tabs-border-width};
+  --#{$prefix}tab-content-border-color: #{$nav-tabs-border-color};
   // scss-docs-end tab-content-css-vars
 
   padding: var(--#{$prefix}tab-content-padding-y) var(--#{$prefix}tab-content-padding-x);
-  border: var(--#{$prefix}tab-content-border-width) solid;
+  border: var(--#{$prefix}tab-content-border-width) solid var(--#{$prefix}tab-content-border-color);
   border-top: 0;
   // End mod
 
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 22a7eeea31..65a02315cb 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -80,7 +80,7 @@ $body-secondary-bg-dark:            $gray-900 !default; // Boosted mod: instead
 $body-tertiary-color-dark:          $gray-600 !default; // Boosted mod: instead of `rgba($body-color-dark, .5)`
 $body-tertiary-bg-dark:             $black !default; // Boosted mod: instead of `mix($gray-800, $gray-900, 50%)`
 $body-emphasis-color-dark:          $white !default; // Boosted mod: instead of `$gray-100`
-$border-color-dark:                 $gray-700 !default;
+$border-color-dark:                 $white !default; // Boosted mod: instead of `$gray-700`
 $border-color-translucent-dark:     $gray-700 !default; // Boosted mod instead of `rgba($white, .15)`
 $headings-color-dark:               $white !default; // Boosted mod: instead of `inherit`
 $link-color-dark:                   $white !default; // Boosted mod: instead of `tint-color($primary, 40%)`
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 60e18672d5..efb474bf1c 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -628,7 +628,7 @@ $border-widths: (
   5: $border-width * 2.5
 ) !default;
 $border-style:                solid !default;
-$border-color:                $black !default; // Boosted mod
+$border-color:                $black !default; // Boosted mod: instead of `$gray-300`
 $border-color-translucent:    $gray-500 !default; // Boosted mod: gray value instead of rgba($black, .175)
 // scss-docs-end border-variables
 
@@ -1429,7 +1429,9 @@ $nav-tabs-border-color:             var(--#{$prefix}border-color) !default;
 $nav-tabs-border-width:             var(--#{$prefix}border-width) !default;
 $nav-tabs-border-radius:            var(--#{$prefix}border-radius) !default;
 $nav-tabs-link-padding-x:           1.8125rem !default; // Boosted mod
-$nav-tabs-link-hover-border-color:  $border-color !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color`
+$nav-tabs-link-hover-color:         var(--#{$prefix}highlight-color) !default; // Boosted mod
+$nav-tabs-link-hover-bg:            var(--#{$prefix}highlight-bg) !default; // Boosted mod
+$nav-tabs-link-hover-border-color:  var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color`
 $nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color) !default;
 $nav-tabs-link-active-bg:           var(--#{$prefix}body-bg) !default;
 $nav-tabs-link-active-border-color: $nav-tabs-link-active-color !default; // Boosted mod: instead of `var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg`
@@ -1442,16 +1444,16 @@ $nav-pills-link-active-bg:          $component-active-bg !default;
 $nav-underline-gap:                       0 !default; // Boosted mod: instead of 1rem
 $nav-underline-gap-lg:                    $spacer * .5 !default; // Boosted mod
 // stylelint-disable-next-line function-disallowed-list
-$nav-underline-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod: instead of .125rem
-$nav-underline-border-color:              $gray-500 !default; // Boosted mod
+$nav-underline-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod: instead of `.125rem`
+$nav-underline-border-color:              var(--#{$prefix}border-color-translucent) !default; // Boosted mod
 $nav-underline-border-radius:             var(--#{$prefix}border-radius) !default; // Boosted mod
-$nav-underline-link-active-color:         var(--#{$prefix}emphasis-color) !default;
+$nav-underline-link-active-color:         var(--#{$prefix}hover-color) !default; // Boosted mod instead of `var(--#{$prefix}emphasis-color)`
 $nav-underline-link-padding-x:            1.8125rem !default; // Boosted mod
-$nav-underline-link-hover-color:          $accessible-orange !default; // Boosted mod
+$nav-underline-link-hover-color:          var(--#{$prefix}link-hover-color) !default; // Boosted mod
 // stylelint-disable-next-line function-disallowed-list
 $nav-underline-link-border-width:         0 0 calc(var(--#{$prefix}nav-underline-border-width) * 4) !default; // Boosted mod
-$nav-underline-link-active-bg:            var(--#{$prefix}body-bg) !default; // Boosted mod
-$nav-underline-link-active-border-color:  $accessible-orange !default; // Boosted mod
+$nav-underline-link-active-bg:            transparent !default; // Boosted mod
+$nav-underline-link-active-border-color:  var(--#{$prefix}link-hover-color) !default; // Boosted mod
 // scss-docs-end nav-variables
 
 
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 0faf554a3f..879b4193c1 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -41,6 +41,11 @@ sitemap_exclude: true
     <div style="width: 50px; height: 50px; background-color:var(--bs-tertiary-bg)" data-bs-theme="light"></div>
     <div style="width: 50px; height: 50px; background-color:var(--bs-tertiary-bg)" data-bs-theme="dark"></div>
   </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-border-color</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-border-color)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-border-color)" data-bs-theme="dark"></div>
+  </div>
   <div class="d-flex flex-row gap-2 align-items-center">
     <div style="width: 200px">--bs-border-color-translucent</div>
     <div style="width: 50px; height: 50px; background-color:var(--bs-border-color-translucent)" data-bs-theme="light"></div>
@@ -434,6 +439,88 @@ sitemap_exclude: true
   </div>
 </div>
 
+### Breadcrumb
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <nav aria-label="breadcrumb1">
+    <ol class="breadcrumb mb-0">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+    <ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Library</li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <nav aria-label="breadcrumb2">
+    <ol class="breadcrumb mb-0">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+    <ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Library</li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <nav aria-label="breadcrumb3">
+    <ol class="breadcrumb mb-0">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+    <ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Library</li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <nav aria-label="breadcrumb4">
+    <ol class="breadcrumb mb-0" data-bs-theme="dark">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+    <ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';" data-bs-theme="dark">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Library</li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <nav aria-label="breadcrumb5">
+    <ol class="breadcrumb mb-0" data-bs-theme="light">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+    <ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';" data-bs-theme="light">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Library</li>
+    </ol>
+  </nav>
+</div>
+
 ### Buttons
 
 <h4 class="mt-3">No theme</h4>
@@ -982,6 +1069,402 @@ sitemap_exclude: true
   </nav>
 </div>
 
+### Navs & tabs
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <ul class="nav">
+    <li class="nav-item">
+      <a class="nav-link active" aria-current="page" href="#">Active</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Link</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Link</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+    </li>
+  </ul>
+
+  <ul class="nav nav-underline mt-2">
+    <li class="nav-item">
+      <a class="nav-link active" aria-current="page" href="#">Active</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Link</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Link</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+    </li>
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+      <ul class="dropdown-menu">
+        <li><a class="dropdown-item" href="#">Action</a></li>
+        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item" href="#">Something else here</a></li>
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="#">Separated link</a></li>
+      </ul>
+    </li>
+  </ul>
+
+  <ul class="nav nav-tabs mt-2">
+    <li class="nav-item">
+      <a class="nav-link active" aria-current="page" href="#">Active</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Link</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Link</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+    </li>
+  </ul>
+
+  <ul role="tablist" aria-owns="nav-tab1 nav-tab2 nav-tab3 nav-tab4" class="nav nav-tabs mt-2" id="nav-tab-with-nested-tabs">
+    <li class="nav-item" role="presentation">
+      <a class="nav-link active" aria-current="page" id="nav-tab1" href="#tab1-content" data-bs-toggle="tab" data-bs-target="#tab1-content" role="tab" aria-controls="tab1-content" aria-selected="true">Tab 1</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link" id="nav-tab2" data-bs-toggle="tab" href="#tab2-content" data-bs-target="#tab2-content" role="tab" aria-controls="tab2-content" aria-selected="false">Tab 2</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link" id="nav-tab3" data-bs-toggle="tab" href="#tab3-content" data-bs-target="#tab3-content" role="tab" aria-controls="tab3-content" aria-selected="false">Tab 3</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link disabled" id="nav-tab4" data-bs-toggle="tab" data-bs-target="#tab4-content" role="tab" aria-controls="tab4-content" aria-selected="false" aria-disabled="true">Tab 4</a>
+    </li>
+  </ul>
+
+  <div class="tab-content" id="nav-tabs-content">
+    <div class="tab-pane-with-nested-tab fade show active" id="tab1-content" role="tabpanel" aria-labelledby="nav-tab1">
+      <ul role="tablist" aria-owns="nav-linkA nav-linkB nav-linkC nav-linkD" class="nav nav-underline mt-0">
+        <li class="nav-item" role="presentation">
+          <a class="nav-link active" id="nav-linkA" href="#linkA" data-bs-toggle="tab" data-bs-target="#linkA" role="tab" aria-current="page">Link A</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" id="nav-linkB" href="#linkB" data-bs-toggle="tab" data-bs-target="#linkB" role="tab">Link B</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" id="nav-linkC" href="#linkC" data-bs-toggle="tab" data-bs-target="#linkC" role="tab">Link C</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link disabled" id="nav-linkD" data-bs-toggle="tab" data-bs-target="#linkD" role="tab" aria-disabled="true">Link D</a>
+        </li>
+      </ul>
+      <div class="tab-content border-0">
+        <div class="tab-pane fade show active" id="linkA" role="tabpanel" aria-labelledby="nav-linkA">Content of Link A</div>
+        <div class="tab-pane" id="linkB" role="tabpanel" aria-labelledby="nav-linkB">Content of Link B</div>
+        <div class="tab-pane" id="linkC" role="tabpanel" aria-labelledby="nav-linkC">Content of Link C</div>
+        <div class="tab-pane" id="linkD" role="tabpanel" aria-labelledby="nav-linkD">Content of Link D</div>
+      </div>
+    </div>
+    <div class="tab-pane" id="tab2-content" role="tabpanel" aria-labelledby="nav-tab2">Content of Tab 2</div>
+    <div class="tab-pane" id="tab3-content" role="tabpanel" aria-labelledby="nav-tab3">Content of Tab 3</div>
+    <div class="tab-pane" id="tab4-content" role="tabpanel" aria-labelledby="nav-tab4">Content of Tab 4</div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <ul class="nav nav-underline">
+    <li class="nav-item">
+      <a class="nav-link active" aria-current="page" href="#">Active</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Link</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Link</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+    </li>
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+      <ul class="dropdown-menu">
+        <li><a class="dropdown-item" href="#">Action</a></li>
+        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item" href="#">Something else here</a></li>
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="#">Separated link</a></li>
+      </ul>
+    </li>
+  </ul>
+
+
+  <ul role="tablist" aria-owns="nav-tab1 nav-tab2 nav-tab3 nav-tab4" class="nav nav-tabs mt-2" id="nav-tab-with-nested-tabs-2">
+    <li class="nav-item" role="presentation">
+      <a class="nav-link active" aria-current="page" id="nav-tab1-2" href="#" data-bs-toggle="tab" data-bs-target="#tab1-content-2" role="tab" aria-controls="tab1-content-2" aria-selected="true">Tab 1</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link" id="nav-tab2-2" data-bs-toggle="tab" href="#" data-bs-target="#tab2-content-2" role="tab" aria-controls="tab2-content-2" aria-selected="false">Tab 2</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link" id="nav-tab3-2" data-bs-toggle="tab" href="#" data-bs-target="#tab3-content-2" role="tab" aria-controls="tab3-content-2" aria-selected="false">Tab 3</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link disabled" id="nav-tab4-2" data-bs-toggle="tab" data-bs-target="#tab4-content-2" role="tab" aria-controls="tab4-content-2" aria-selected="false" aria-disabled="true">Tab 4</a>
+    </li>
+  </ul>
+
+  <div class="tab-content" id="nav-tabs-content-2">
+    <div class="tab-pane-with-nested-tab fade show active" id="tab1-content-2" role="tabpanel" aria-labelledby="nav-tab1">
+      <ul role="tablist" aria-owns="nav-linkA nav-linkB nav-linkC nav-linkD" class="nav nav-underline mt-0">
+        <li class="nav-item" role="presentation">
+          <a class="nav-link active" id="nav-linkA-2" href="#" data-bs-toggle="tab" data-bs-target="#linkA-2" role="tab" aria-current="page">Link A</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" id="nav-linkB-2" href="#" data-bs-toggle="tab" data-bs-target="#linkB-2" role="tab">Link B</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" id="nav-linkC-2" href="#" data-bs-toggle="tab" data-bs-target="#linkC-2" role="tab">Link C</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link disabled" id="nav-linkD-2" data-bs-toggle="tab" data-bs-target="#linkD-2" role="tab" aria-disabled="true">Link D</a>
+        </li>
+      </ul>
+      <div class="tab-content border-0">
+        <div class="tab-pane fade show active" id="linkA-2" role="tabpanel" aria-labelledby="nav-linkA">Content of Link A</div>
+        <div class="tab-pane" id="linkB-2" role="tabpanel" aria-labelledby="nav-linkB-2">Content of Link B</div>
+        <div class="tab-pane" id="linkC-2" role="tabpanel" aria-labelledby="nav-linkC-2">Content of Link C</div>
+        <div class="tab-pane" id="linkD-2" role="tabpanel" aria-labelledby="nav-linkD-2">Content of Link D</div>
+      </div>
+    </div>
+    <div class="tab-pane" id="tab2-content-2" role="tabpanel" aria-labelledby="nav-tab2">Content of Tab 2</div>
+    <div class="tab-pane" id="tab3-content-2" role="tabpanel" aria-labelledby="nav-tab3">Content of Tab 3</div>
+    <div class="tab-pane" id="tab4-content-2" role="tabpanel" aria-labelledby="nav-tab4">Content of Tab 4</div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <ul class="nav nav-underline">
+    <li class="nav-item">
+      <a class="nav-link active" aria-current="page" href="#">Active</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Link</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Link</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+    </li>
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+      <ul class="dropdown-menu">
+        <li><a class="dropdown-item" href="#">Action</a></li>
+        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item" href="#">Something else here</a></li>
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="#">Separated link</a></li>
+      </ul>
+    </li>
+  </ul>
+
+
+  <ul role="tablist" aria-owns="nav-tab1 nav-tab2 nav-tab3 nav-tab4" class="nav nav-tabs mt-2" id="nav-tab-with-nested-tabs-3">
+    <li class="nav-item" role="presentation">
+      <a class="nav-link active" aria-current="page" id="nav-tab1-3" href="#" data-bs-toggle="tab" data-bs-target="#tab1-content-3" role="tab" aria-controls="tab1-content-3" aria-selected="true">Tab 1</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link" id="nav-tab2-3" data-bs-toggle="tab" href="#" data-bs-target="#tab2-content-3" role="tab" aria-controls="tab2-content-3" aria-selected="false">Tab 2</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link" id="nav-tab3-3" data-bs-toggle="tab" href="#" data-bs-target="#tab3-content-3" role="tab" aria-controls="tab3-content-3" aria-selected="false">Tab 3</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link disabled" id="nav-tab4-3" data-bs-toggle="tab" data-bs-target="#tab4-content-3" role="tab" aria-controls="tab4-content-3" aria-selected="false" aria-disabled="true">Tab 4</a>
+    </li>
+  </ul>
+
+  <div class="tab-content" id="nav-tabs-content-3">
+    <div class="tab-pane-with-nested-tab fade show active" id="tab1-content-3" role="tabpanel" aria-labelledby="nav-tab1">
+      <ul role="tablist" aria-owns="nav-linkA nav-linkB nav-linkC nav-linkD" class="nav nav-underline mt-0">
+        <li class="nav-item" role="presentation">
+          <a class="nav-link active" id="nav-linkA-3" href="#" data-bs-toggle="tab" data-bs-target="#linkA-3" role="tab" aria-current="page">Link A</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" id="nav-linkB-3" href="#" data-bs-toggle="tab" data-bs-target="#linkB-3" role="tab">Link B</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" id="nav-linkC-3" href="#" data-bs-toggle="tab" data-bs-target="#linkC-3" role="tab">Link C</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link disabled" id="nav-linkD-3" data-bs-toggle="tab" data-bs-target="#linkD-3" role="tab" aria-disabled="true">Link D</a>
+        </li>
+      </ul>
+      <div class="tab-content border-0">
+        <div class="tab-pane fade show active" id="linkA-3" role="tabpanel" aria-labelledby="nav-linkA">Content of Link A</div>
+        <div class="tab-pane" id="linkB-3" role="tabpanel" aria-labelledby="nav-linkB">Content of Link B</div>
+        <div class="tab-pane" id="linkC-3" role="tabpanel" aria-labelledby="nav-linkC">Content of Link C</div>
+        <div class="tab-pane" id="linkD-3" role="tabpanel" aria-labelledby="nav-linkD">Content of Link D</div>
+      </div>
+    </div>
+    <div class="tab-pane" id="tab2-content-3" role="tabpanel" aria-labelledby="nav-tab2">Content of Tab 2</div>
+    <div class="tab-pane" id="tab3-content-3" role="tabpanel" aria-labelledby="nav-tab3">Content of Tab 3</div>
+    <div class="tab-pane" id="tab4-content-3" role="tabpanel" aria-labelledby="nav-tab4">Content of Tab 4</div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <ul class="nav nav-underline" data-bs-theme="dark">
+    <li class="nav-item">
+      <a class="nav-link active" aria-current="page" href="#">Active</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Link</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Link</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+    </li>
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+      <ul class="dropdown-menu">
+        <li><a class="dropdown-item" href="#">Action</a></li>
+        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item" href="#">Something else here</a></li>
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="#">Separated link</a></li>
+      </ul>
+    </li>
+  </ul>
+
+
+  <ul role="tablist" aria-owns="nav-tab1 nav-tab2 nav-tab3 nav-tab4" class="nav nav-tabs mt-2" id="nav-tab-with-nested-tabs-4" data-bs-theme="dark" style="--bs-nav-tabs-link-active-bg: #282d55;">
+    <li class="nav-item" role="presentation">
+      <a class="nav-link active" aria-current="page" id="nav-tab1-4" href="#" data-bs-toggle="tab" data-bs-target="#tab1-content-4" role="tab" aria-controls="tab1-content-4" aria-selected="true">Tab 1</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link" id="nav-tab2-4" data-bs-toggle="tab" href="#" data-bs-target="#tab2-content-4" role="tab" aria-controls="tab2-content-4" aria-selected="false">Tab 2</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link" id="nav-tab3-4" data-bs-toggle="tab" href="#" data-bs-target="#tab3-content-4" role="tab" aria-controls="tab3-content-4" aria-selected="false">Tab 3</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link disabled" id="nav-tab4-4" data-bs-toggle="tab" data-bs-target="#tab4-content-4" role="tab" aria-controls="tab4-content-4" aria-selected="false" aria-disabled="true">Tab 4</a>
+    </li>
+  </ul>
+
+  <div class="tab-content" id="nav-tabs-content-4" data-bs-theme="dark">
+    <div class="tab-pane-with-nested-tab fade show active" id="tab1-content-4" role="tabpanel" aria-labelledby="nav-tab1">
+      <ul role="tablist" aria-owns="nav-linkA nav-linkB nav-linkC nav-linkD" class="nav nav-underline mt-0">
+        <li class="nav-item" role="presentation">
+          <a class="nav-link active" id="nav-linkA-4" href="#" data-bs-toggle="tab" data-bs-target="#linkA-4" role="tab" aria-current="page">Link A</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" id="nav-linkB-4" href="#" data-bs-toggle="tab" data-bs-target="#linkB-4" role="tab">Link B</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" id="nav-linkC-4" href="#" data-bs-toggle="tab" data-bs-target="#linkC-4" role="tab">Link C</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link disabled" id="nav-linkD-4" data-bs-toggle="tab" data-bs-target="#linkD-4" role="tab" aria-disabled="true">Link D</a>
+        </li>
+      </ul>
+      <div class="tab-content border-0">
+        <div class="tab-pane fade show active" id="linkA-4" role="tabpanel" aria-labelledby="nav-linkA">Content of Link A</div>
+        <div class="tab-pane" id="linkB-4" role="tabpanel" aria-labelledby="nav-linkB">Content of Link B</div>
+        <div class="tab-pane" id="linkC-4" role="tabpanel" aria-labelledby="nav-linkC">Content of Link C</div>
+        <div class="tab-pane" id="linkD-4" role="tabpanel" aria-labelledby="nav-linkD">Content of Link D</div>
+      </div>
+    </div>
+    <div class="tab-pane" id="tab2-content-4" role="tabpanel" aria-labelledby="nav-tab2">Content of Tab 2</div>
+    <div class="tab-pane" id="tab3-content-4" role="tabpanel" aria-labelledby="nav-tab3">Content of Tab 3</div>
+    <div class="tab-pane" id="tab4-content-4" role="tabpanel" aria-labelledby="nav-tab4">Content of Tab 4</div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <ul class="nav nav-underline" data-bs-theme="light">
+    <li class="nav-item">
+      <a class="nav-link active" aria-current="page" href="#">Active</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Link</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Link</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+    </li>
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+      <ul class="dropdown-menu">
+        <li><a class="dropdown-item" href="#">Action</a></li>
+        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item" href="#">Something else here</a></li>
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="#">Separated link</a></li>
+      </ul>
+    </li>
+  </ul>
+
+
+  <ul role="tablist" aria-owns="nav-tab1 nav-tab2 nav-tab3 nav-tab4" class="nav nav-tabs mt-2" id="nav-tab-with-nested-tabs-5" data-bs-theme="light" style="--bs-nav-tabs-link-active-bg: #b5e8f7;">
+    <li class="nav-item" role="presentation">
+      <a class="nav-link active" aria-current="page" id="nav-tab1-5" href="#" data-bs-toggle="tab" data-bs-target="#tab1-content-5" role="tab" aria-controls="tab1-content-5" aria-selected="true">Tab 1</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link" id="nav-tab2-5" data-bs-toggle="tab" href="#" data-bs-target="#tab2-content-5" role="tab" aria-controls="tab2-content-5" aria-selected="false">Tab 2</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link" id="nav-tab3-5" data-bs-toggle="tab" href="#" data-bs-target="#tab3-content-5" role="tab" aria-controls="tab3-content-5" aria-selected="false">Tab 3</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link disabled" id="nav-tab4-5" data-bs-toggle="tab" data-bs-target="#tab4-content-5" role="tab" aria-controls="tab4-content-5" aria-selected="false" aria-disabled="true">Tab 4</a>
+    </li>
+  </ul>
+
+  <div class="tab-content" id="nav-tabs-content-5" data-bs-theme="light">
+    <div class="tab-pane-with-nested-tab fade show active" id="tab1-content-5" role="tabpanel" aria-labelledby="nav-tab1">
+      <ul role="tablist" aria-owns="nav-linkA nav-linkB nav-linkC nav-linkD" class="nav nav-underline mt-0">
+        <li class="nav-item" role="presentation">
+          <a class="nav-link active" id="nav-linkA-5" href="#" data-bs-toggle="tab" data-bs-target="#linkA-5" role="tab" aria-current="page">Link A</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" id="nav-linkB-5" href="#" data-bs-toggle="tab" data-bs-target="#linkB-5" role="tab">Link B</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" id="nav-linkC-5" href="#" data-bs-toggle="tab" data-bs-target="#linkC-5" role="tab">Link C</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link disabled" id="nav-linkD-5" data-bs-toggle="tab" data-bs-target="#linkD-5" role="tab" aria-disabled="true">Link D</a>
+        </li>
+      </ul>
+      <div class="tab-content border-0">
+        <div class="tab-pane fade show active" id="linkA-5" role="tabpanel" aria-labelledby="nav-linkA">Content of Link A</div>
+        <div class="tab-pane" id="linkB-5" role="tabpanel" aria-labelledby="nav-linkB">Content of Link B</div>
+        <div class="tab-pane" id="linkC-5" role="tabpanel" aria-labelledby="nav-linkC">Content of Link C</div>
+        <div class="tab-pane" id="linkD-5" role="tabpanel" aria-labelledby="nav-linkD">Content of Link D</div>
+      </div>
+    </div>
+    <div class="tab-pane" id="tab2-content-5" role="tabpanel" aria-labelledby="nav-tab2">Content of Tab 2</div>
+    <div class="tab-pane" id="tab3-content-5" role="tabpanel" aria-labelledby="nav-tab3">Content of Tab 3</div>
+    <div class="tab-pane" id="tab4-content-5" role="tabpanel" aria-labelledby="nav-tab4">Content of Tab 4</div>
+  </div>
+</div>
+
 ### Spinners
 
 <h4 class="mt-3">No theme</h4>
@@ -2219,85 +2702,3 @@ sitemap_exclude: true
     <label for="excellent51" title="Excellent"><span class="visually-hidden">Excellent</span></label>
   </fieldset></form>
 </div>
-
-### Breadcrumb
-
-<h4 class="mt-3">No theme</h4>
-
-<div class="border border-tertiary p-3">
-  <nav aria-label="breadcrumb1">
-    <ol class="breadcrumb mb-0">
-      <li class="breadcrumb-item"><a href="#">Home</a></li>
-      <li class="breadcrumb-item"><a href="#">Library</a></li>
-      <li class="breadcrumb-item active" aria-current="page">Data</li>
-    </ol>
-    <ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';">
-      <li class="breadcrumb-item"><a href="#">Home</a></li>
-      <li class="breadcrumb-item active" aria-current="page">Library</li>
-    </ol>
-  </nav>
-</div>
-
-<h4 class="mt-3">Dark theme on container</h4>
-
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
-  <nav aria-label="breadcrumb2">
-    <ol class="breadcrumb mb-0">
-      <li class="breadcrumb-item"><a href="#">Home</a></li>
-      <li class="breadcrumb-item"><a href="#">Library</a></li>
-      <li class="breadcrumb-item active" aria-current="page">Data</li>
-    </ol>
-    <ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';">
-      <li class="breadcrumb-item"><a href="#">Home</a></li>
-      <li class="breadcrumb-item active" aria-current="page">Library</li>
-    </ol>
-  </nav>
-</div>
-
-<h4 class="mt-3">Light theme on container</h4>
-
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
-  <nav aria-label="breadcrumb3">
-    <ol class="breadcrumb mb-0">
-      <li class="breadcrumb-item"><a href="#">Home</a></li>
-      <li class="breadcrumb-item"><a href="#">Library</a></li>
-      <li class="breadcrumb-item active" aria-current="page">Data</li>
-    </ol>
-    <ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';">
-      <li class="breadcrumb-item"><a href="#">Home</a></li>
-      <li class="breadcrumb-item active" aria-current="page">Library</li>
-    </ol>
-  </nav>
-</div>
-
-<h4 class="mt-3">Dark theme on component</h4>
-
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
-  <nav aria-label="breadcrumb4">
-    <ol class="breadcrumb mb-0" data-bs-theme="dark">
-      <li class="breadcrumb-item"><a href="#">Home</a></li>
-      <li class="breadcrumb-item"><a href="#">Library</a></li>
-      <li class="breadcrumb-item active" aria-current="page">Data</li>
-    </ol>
-    <ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';" data-bs-theme="dark">
-      <li class="breadcrumb-item"><a href="#">Home</a></li>
-      <li class="breadcrumb-item active" aria-current="page">Library</li>
-    </ol>
-  </nav>
-</div>
-
-<h4 class="mt-3">Light theme on component</h4>
-
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
-  <nav aria-label="breadcrumb5">
-    <ol class="breadcrumb mb-0" data-bs-theme="light">
-      <li class="breadcrumb-item"><a href="#">Home</a></li>
-      <li class="breadcrumb-item"><a href="#">Library</a></li>
-      <li class="breadcrumb-item active" aria-current="page">Data</li>
-    </ol>
-    <ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';" data-bs-theme="light">
-      <li class="breadcrumb-item"><a href="#">Home</a></li>
-      <li class="breadcrumb-item active" aria-current="page">Library</li>
-    </ol>
-  </nav>
-</div>

From 877fa753a264ef26bd7b96d3dca0e4722956e27d Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Wed, 25 Oct 2023 08:55:37 +0200
Subject: [PATCH 03/71] Dark mode: modal (#2322)

---
 scss/_variables.scss               |   2 +-
 site/content/docs/5.3/dark-mode.md | 157 +++++++++++++++++++++++++++++
 2 files changed, 158 insertions(+), 1 deletion(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index efb474bf1c..f5d96d883b 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1871,7 +1871,7 @@ $modal-title-line-height:           $line-height-base !default;
 $modal-content-padding-y:           $spacer !default; // Boosted mod
 $modal-content-padding-x:           0 !default; // Boosted mod
 $modal-content-padding:             $modal-content-padding-y $modal-content-padding-x !default; // Boosted mod
-$modal-content-color:               null !default;
+$modal-content-color:               var(--#{$prefix}body-color) !default; // Boosted mod: instead of `null`
 $modal-content-bg:                  var(--#{$prefix}body-bg) !default;
 $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 879b4193c1..b88b1e6ba2 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -1069,6 +1069,163 @@ sitemap_exclude: true
   </nav>
 </div>
 
+### Modal
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalExample1">
+    Launch modal
+  </button>
+
+  <div class="modal fade" id="modalExample1" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <svg class="modal-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
+          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-secondary-color)">
+            <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+          </svg>
+        </svg>
+        <div class="modal-header">
+          <h5 class="modal-title">Modal title</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+        </div>
+        <div class="modal-body">
+          <p>Modal body text goes here.</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-primary">Save changes</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalExample2">
+    Launch modal
+  </button>
+
+  <div class="modal fade" id="modalExample2" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <svg class="modal-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
+          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-secondary-color)">
+            <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+          </svg>
+        </svg>
+        <div class="modal-header">
+          <h5 class="modal-title">Modal title</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+        </div>
+        <div class="modal-body">
+          <p>Modal body text goes here.</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-primary">Save changes</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalExample3">
+    Launch modal
+  </button>
+
+  <div class="modal fade" id="modalExample3" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <svg class="modal-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
+          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-secondary-color)">
+            <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+          </svg>
+        </svg>
+        <div class="modal-header">
+          <h5 class="modal-title">Modal title</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+        </div>
+        <div class="modal-body">
+          <p>Modal body text goes here.</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-primary">Save changes</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalExample4" data-bs-theme="dark">
+    Launch modal
+  </button>
+
+  <div class="modal fade" id="modalExample4" tabindex="-1" aria-hidden="true" data-bs-theme="dark">
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <svg class="modal-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
+          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-secondary-color)">
+            <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+          </svg>
+        </svg>
+        <div class="modal-header">
+          <h5 class="modal-title">Modal title</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+        </div>
+        <div class="modal-body">
+          <p>Modal body text goes here.</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-primary">Save changes</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalExample5" data-bs-theme="light">
+    Launch modal
+  </button>
+
+  <div class="modal fade" id="modalExample5" tabindex="-1" aria-hidden="true" data-bs-theme="light">
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <svg class="modal-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
+          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-secondary-color)">
+            <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+          </svg>
+        </svg>
+        <div class="modal-header">
+          <h5 class="modal-title">Modal title</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+        </div>
+        <div class="modal-body">
+          <p>Modal body text goes here.</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-primary">Save changes</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
 ### Navs & tabs
 
 <h4 class="mt-3">No theme</h4>

From ca92d34b8ffbf767a57ad671555d72c75f72e374 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Wed, 25 Oct 2023 09:11:50 +0200
Subject: [PATCH 04/71] Dark mode: Switches (#2285)

---
 scss/_root.scss                    |  2 +
 scss/_variables.scss               | 14 +++++
 scss/forms/_form-check.scss        | 22 +++----
 site/content/docs/5.3/dark-mode.md | 92 ++++++++++++++++++++++++++++++
 4 files changed, 119 insertions(+), 11 deletions(-)

diff --git a/scss/_root.scss b/scss/_root.scss
index 40a2883d1f..e60b518695 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -145,6 +145,7 @@
   --#{$prefix}disabled-filter: #{$disabled-filter};
   --#{$prefix}placeholder-color: #{$gray-700};
   --#{$prefix}gray-tweak: #{$gray-900};
+  --#{$prefix}black-tweak: #{$black};
   --#{$prefix}input-filter: #{$invert-filter};
   --#{$prefix}icon-filter: none;
   // ******* End additions for dark-mode
@@ -224,6 +225,7 @@
     --#{$prefix}disabled-filter: #{$disabled-filter-dark};
     --#{$prefix}placeholder-color: #{$gray-600};
     --#{$prefix}gray-tweak: #{$gray-700};
+    --#{$prefix}black-tweak: #{$gray-950};
     --#{$prefix}input-filter: none;
     --#{$prefix}icon-filter: #{$invert-filter};
     // ******* End additions for dark-mode
diff --git a/scss/_variables.scss b/scss/_variables.scss
index f5d96d883b..9c5f5b916f 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1242,6 +1242,13 @@ $form-switch-bg-square-size:      add(1rem, $spacer * .5) !default;  // Boosted
 $form-switch-border-radius:       null !default; // Boosted mod
 $form-switch-transition:          background-position .15s ease-in-out, $transition-focus !default; // Boosted mod
 
+$form-switch-square-bg:             var(--#{$prefix}black-tweak) !default; // Boosted mod
+$form-switch-bg:                    $white !default; // Boosted mod
+$form-switch-border-color:          $white !default; // Boosted mod
+$form-switch-filter:                var(--#{$prefix}input-filter) !default; // Boosted mod
+$form-switch-focus-visible-inner:   $black !default; // Boosted mod
+$form-switch-focus-visible-outer:   $white !default; // Boosted mod
+
 // Boosted mod: no $form-switch-focus-color
 // Boosted mod: no $form-switch-focus-bg-image
 
@@ -1250,6 +1257,13 @@ $form-switch-checked-bg-image:    $form-check-input-checked-bg-image !default; /
 $form-switch-checked-bg-size:     add(map-get($spacers, 2), map-get($spacers, 1)) !default; // Boosted mod
 // stylelint-disable-next-line function-disallowed-list
 $form-switch-checked-bg-position: calc(var(--#{$prefix}border-width) * 3) 50% !default; // Boosted mod
+
+$form-switch-checked-square-bg:     var(--#{$prefix}body-bg) !default; // Boosted mod
+$form-switch-checked-bg:            $primary !default; // Boosted mod
+$form-switch-checked-border-color:  $primary !default; // Boosted mod
+$form-switch-checked-filter:        none !default; // Boosted mod
+$form-switch-checked-focus-inner:   var(--#{$prefix}focus-visible-inner-color) !default; // Boosted mod
+$form-switch-checked-focus-outer:   var(--#{$prefix}focus-visible-outer-color) !default; // Boosted mod
 // scss-docs-end form-switch-variables
 
 // scss-docs-start input-group-variables
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index e68035014b..52b60744b1 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -154,7 +154,7 @@
 
 .form-switch {
   // Boosted mod
-  --#{$prefix}switch-gradient: #{linear-gradient(to right, $black $form-switch-bg-square-size, transparent)};
+  --#{$prefix}switch-gradient: #{linear-gradient(to right, $form-switch-square-bg $form-switch-bg-square-size, transparent)};
 
   min-height: $form-switch-width * .5;
   padding-left: $form-switch-padding-start;
@@ -166,29 +166,29 @@
     width: $form-switch-width;
     height: $form-switch-width * .5;
     margin-left: $form-switch-padding-start * -1;
-    background-color: $white; // Boosted mod
+    background-color: $form-switch-bg; // Boosted mod
     background-image: var(--#{$prefix}form-switch-bg), var(--#{$prefix}switch-gradient); // Boosted mod: extra param `var(--#{$prefix}switch-gradient)`
-    filter: $invert-filter; // Boosted mod
+    filter: $form-switch-filter; // Boosted mod
     background-position: $form-switch-bg-position, 0 0;
     background-size: $form-switch-bg-size, $form-switch-bg-square-size 100%; // Get a 1px separation
-    border-color: $white; // Boosted mod
+    border-color: $form-switch-border-color; // Boosted mod
     @include border-radius($form-switch-border-radius, 0);
     @include transition($form-switch-transition);
 
     &:focus {
       &[data-focus-visible-added] {
-        @include focus-visible($color: var(--#{$prefix}focus-visible-inner-color), $box-color: var(--#{$prefix}focus-visible-outer-color));
+        @include focus-visible($color: $form-switch-focus-visible-outer, $box-color: $form-switch-focus-visible-inner);
       }
     }
 
     &:checked {
-      background-color: $primary;
-      filter: none; // Boosted mod
-      border-color: $primary;
+      background-color: $form-switch-checked-bg;
+      filter: $form-switch-checked-filter; // Boosted mod
+      border-color: $form-switch-checked-border-color;
 
       &:focus {
         &[data-focus-visible-added] {
-          @include focus-visible($color: var(--#{$prefix}focus-visible-outer-color), $box-color: var(--#{$prefix}focus-visible-inner-color));
+          @include focus-visible($color: $form-switch-checked-focus-outer, $box-color: $form-switch-checked-focus-inner);
         }
       }
 
@@ -203,7 +203,7 @@
       }
 
       &:not(:disabled) {
-        --#{$prefix}switch-gradient: #{linear-gradient(to right, $white $form-switch-bg-square-size, transparent)};
+        --#{$prefix}switch-gradient: #{linear-gradient(to right, $form-switch-checked-square-bg $form-switch-bg-square-size, transparent)};
       }
     }
 
@@ -215,7 +215,7 @@
 
     &:disabled {
       background-color: $form-check-input-disabled-color;
-      filter: $invert-filter;
+      filter: $form-check-input-disabled-filter;
       border-color: $form-check-input-disabled-color;
     }
   }
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index b88b1e6ba2..1405d41ad4 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -121,6 +121,11 @@ sitemap_exclude: true
     <div style="width: 50px; height: 50px; background-color:var(--bs-gray-tweak)" data-bs-theme="light"></div>
     <div style="width: 50px; height: 50px; background-color:var(--bs-gray-tweak)" data-bs-theme="dark"></div>
   </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-black-tweak</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-black-tweak)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-black-tweak)" data-bs-theme="dark"></div>
+  </div>
 </div>
 
 ## Components
@@ -2859,3 +2864,90 @@ sitemap_exclude: true
     <label for="excellent51" title="Excellent"><span class="visually-hidden">Excellent</span></label>
   </fieldset></form>
 </div>
+
+### Switches
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex border border-tertiary p-3">
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch">
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" checked>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" disabled>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" checked disabled>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch">
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" checked>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" disabled>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" checked disabled>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch">
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" checked>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" disabled>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" checked disabled>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex border border-tertiary p-3" style="background-color: #282d55;">
+  <div class="form-check form-switch" data-bs-theme="dark">
+    <input class="form-check-input" type="checkbox" role="switch">
+  </div>
+  <div class="form-check form-switch" data-bs-theme="dark">
+    <input class="form-check-input" type="checkbox" role="switch" checked>
+  </div>
+  <div class="form-check form-switch" data-bs-theme="dark">
+    <input class="form-check-input" type="checkbox" role="switch" disabled>
+  </div>
+  <div class="form-check form-switch" data-bs-theme="dark">
+    <input class="form-check-input" type="checkbox" role="switch" checked disabled>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="form-check form-switch" data-bs-theme="light">
+    <input class="form-check-input" type="checkbox" role="switch">
+  </div>
+  <div class="form-check form-switch" data-bs-theme="light">
+    <input class="form-check-input" type="checkbox" role="switch" checked>
+  </div>
+  <div class="form-check form-switch" data-bs-theme="light">
+    <input class="form-check-input" type="checkbox" role="switch" disabled>
+  </div>
+  <div class="form-check form-switch" data-bs-theme="light">
+    <input class="form-check-input" type="checkbox" role="switch" checked disabled>
+  </div>
+</div>

From ee082900f6d40dffdb9537f1af78e2898f259a32 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Wed, 25 Oct 2023 09:45:13 +0200
Subject: [PATCH 05/71] Dark mode: Form select (#2286)

---
 scss/_root.scss                    |  4 ++
 scss/_variables-dark.scss          |  3 +-
 scss/_variables.scss               |  6 +--
 scss/forms/_form-select.scss       |  4 +-
 site/content/docs/5.3/dark-mode.md | 87 ++++++++++++++++++++++++++++++
 5 files changed, 98 insertions(+), 6 deletions(-)

diff --git a/scss/_root.scss b/scss/_root.scss
index e60b518695..3684f7bd8d 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -148,6 +148,8 @@
   --#{$prefix}black-tweak: #{$black};
   --#{$prefix}input-filter: #{$invert-filter};
   --#{$prefix}icon-filter: none;
+  --#{$prefix}select-indicator: #{$form-select-indicator};
+  --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator};
   // ******* End additions for dark-mode
 }
 
@@ -228,6 +230,8 @@
     --#{$prefix}black-tweak: #{$gray-950};
     --#{$prefix}input-filter: none;
     --#{$prefix}icon-filter: #{$invert-filter};
+    --#{$prefix}select-indicator: #{$form-select-indicator-dark};
+    --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator-dark};
     // ******* End additions for dark-mode
     // scss-docs-end root-dark-mode-vars
   }
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 65a02315cb..501db9f13f 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -99,7 +99,8 @@ $focus-visible-outer-color-dark:    $white !default; // Boosted mod
 //
 
 // Boosted mod: no $form-select-indicator-color-dark
-// Boosted mod: no $form-select-indicator-dark
+$form-select-indicator-dark:          escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#fff' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod: instead of Bootstrap svg
+$form-select-disabled-indicator-dark: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#999' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod
 
 // Boosted mod: no $form-switch-color-dark
 // Boosted mod: no $form-switch-bg-image-dark
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 9c5f5b916f..d7f8fb0128 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1285,13 +1285,13 @@ $form-select-font-weight:           $input-font-weight !default;
 $form-select-line-height:           $input-line-height !default;
 $form-select-color:                 $input-color !default;
 $form-select-bg:                    $input-bg !default;
-$form-select-disabled-color:        $gray-700 !default;
+$form-select-disabled-color:        $input-disabled-color !default; // Boosted mod: instead of `null`
 $form-select-disabled-bg:           $input-disabled-bg !default;
 $form-select-disabled-border-color: $input-disabled-border-color !default;
 $form-select-bg-position:           right $form-select-padding-x top add(50%, 1px) !default;
 $form-select-bg-size:               .875rem 1rem !default; // In pixels because image dimensions
-$form-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path d='M7 7 0 0h14L7 7z'/></svg>") !default;
-$form-select-disabled-indicator:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$form-select-disabled-color}' d='M7 7 0 0h14L7 7z'/></svg>") !default; // Boosted mod
+$form-select-indicator:             escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod: instead of Bootstrap svg
+$form-select-disabled-indicator:    escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#666' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod
 
 $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
 $form-select-feedback-icon-position:    center right $form-select-indicator-padding !default;
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 3b4483f54a..4360ce2cae 100644
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -4,7 +4,7 @@
 // https://primer.github.io/.
 
 .form-select {
-  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
+  --#{$prefix}form-select-bg-img: var(--#{$prefix}select-indicator); // Boosted mod: instead of `#{escape-svg($form-select-indicator)}`
 
   display: block;
   width: 100%;
@@ -45,7 +45,7 @@
   &:disabled {
     color: $form-select-disabled-color;
     background-color: $form-select-disabled-bg;
-    background-image: escape-svg($form-select-disabled-indicator); // Boosted mod
+    background-image: var(--#{$prefix}select-disabled-indicator); // Boosted mod
     border-color: $form-select-disabled-border-color;
   }
 
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 1405d41ad4..35434394b5 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -2658,6 +2658,93 @@ sitemap_exclude: true
   <input type="range" class="form-range" data-bs-theme="light" disabled>
 </div>
 
+### Select
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <select class="form-select" aria-label="Default select example">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <select class="form-select" aria-label="Default select example" disabled>
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <select class="form-select" aria-label="Default select example">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <select class="form-select" aria-label="Default select example" disabled>
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <select class="form-select" aria-label="Default select example">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <select class="form-select" aria-label="Default select example" disabled>
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <select class="form-select" aria-label="Default select example" data-bs-theme="dark">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <select class="form-select" aria-label="Default select example" data-bs-theme="dark" disabled>
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <select class="form-select" aria-label="Default select example" data-bs-theme="light">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <select class="form-select" aria-label="Default select example" data-bs-theme="light" disabled>
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+</div>
+
 ### Star rating
 
 <h4 class="mt-3">No theme</h4>

From 942a3cdd182a5a9a9d71b8dd74792095122a5919 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Wed, 25 Oct 2023 10:47:53 +0200
Subject: [PATCH 06/71] Dark mode: Quantity selector (#2287)

---
 scss/_variables.scss               |   5 ++
 scss/forms/_quantity-selector.scss |  11 ++-
 site/content/docs/5.3/dark-mode.md | 117 +++++++++++++++++++++++++++++
 3 files changed, 130 insertions(+), 3 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index d7f8fb0128..aad3b86a6d 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2324,6 +2324,11 @@ $quantity-selector-sm-width:              5.625rem !default;
 
 $quantity-selector-btn-padding-x:         add($btn-icon-padding-x, 2px) !default;
 $quantity-selector-btn-padding-x-sm:      add($btn-icon-padding-x-sm, 2px) !default;
+$quantity-selector-btn-bg:                var(--#{$prefix}body-bg) !default;
+$quantity-selector-btn-border:            var(--#{$prefix}border-width) solid var(--#{$prefix}border-color-translucent) !default;
+
+$quantity-selector-disabled-color:        var(--#{$prefix}disabled-color) !default;
+$quantity-selector-disabled-bg:           var(--#{$prefix}body-bg) !default;
 
 $quantity-selector-icon-width:            .875rem !default;
 $quantity-selector-icon-sm-width:         .625rem !default;
diff --git a/scss/forms/_quantity-selector.scss b/scss/forms/_quantity-selector.scss
index 0bcfd834ea..7ca212339d 100644
--- a/scss/forms/_quantity-selector.scss
+++ b/scss/forms/_quantity-selector.scss
@@ -24,13 +24,18 @@
     }
 
     &:disabled {
-      color: $gray-500;
-      background-color: $white;
+      color: $quantity-selector-disabled-color;
+      background-color: $quantity-selector-disabled-bg;
     }
   }
 
   button {
-    border: var(--#{$prefix}border-width) solid $gray-500;
+    background-color: $quantity-selector-btn-bg;
+    border: $quantity-selector-btn-border;
+
+    &:disabled {
+      background-color: $quantity-selector-btn-bg;
+    }
 
     &:first-of-type {
       @include button-icon($quantity-selector-icon-remove, $size: $quantity-selector-icon-width $quantity-selector-icon-remove-height, $pseudo: "after");
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 35434394b5..c2447c513c 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -2621,6 +2621,123 @@ sitemap_exclude: true
   <div class="form-text" data-bs-theme="light">Form text helper</div>
 </div>
 
+### Quantity selector
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 border border-tertiary p-3">
+  <div class="input-group quantity-selector">
+    <input type="number" id="inputQuantitySelector" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
+      <span class="visually-hidden">Step down</span>
+    </button>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="up">
+      <span class="visually-hidden">Step up</span>
+    </button>
+  </div>
+  <div class="input-group quantity-selector">
+    <input type="number" id="inputQuantitySelectorDisabled" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="down" disabled>
+      <span class="visually-hidden">Step down</span>
+    </button>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="up" disabled>
+      <span class="visually-hidden">Step up</span>
+    </button>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="input-group quantity-selector">
+    <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">
+      <span class="visually-hidden">Step down</span>
+    </button>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">
+      <span class="visually-hidden">Step up</span>
+    </button>
+  </div>
+  <div class="input-group quantity-selector">
+    <input type="number" id="inputQuantitySelectorDisabled1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled1" data-bs-step="down" disabled>
+      <span class="visually-hidden">Step down</span>
+    </button>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled1" data-bs-step="up" disabled>
+      <span class="visually-hidden">Step up</span>
+    </button>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="input-group quantity-selector">
+    <input type="number" id="inputQuantitySelector2" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector2" data-bs-step="down">
+      <span class="visually-hidden">Step down</span>
+    </button>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector2" data-bs-step="up">
+      <span class="visually-hidden">Step up</span>
+    </button>
+  </div>
+  <div class="input-group quantity-selector">
+    <input type="number" id="inputQuantitySelectorDisabled2" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled2" data-bs-step="down" disabled>
+      <span class="visually-hidden">Step down</span>
+    </button>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled2" data-bs-step="up" disabled>
+      <span class="visually-hidden">Step up</span>
+    </button>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 border border-tertiary p-3" style="background-color: #282d55;">
+  <div class="input-group quantity-selector" data-bs-theme="dark">
+    <input type="number" id="inputQuantitySelector3" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector3" data-bs-step="down">
+      <span class="visually-hidden">Step down</span>
+    </button>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector3" data-bs-step="up">
+      <span class="visually-hidden">Step up</span>
+    </button>
+  </div>
+  <div class="input-group quantity-selector" data-bs-theme="dark">
+    <input type="number" id="inputQuantitySelectorDisabled3" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled3" data-bs-step="down" disabled>
+      <span class="visually-hidden">Step down</span>
+    </button>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled3" data-bs-step="up" disabled>
+      <span class="visually-hidden">Step up</span>
+    </button>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="input-group quantity-selector" data-bs-theme="light">
+    <input type="number" id="inputQuantitySelector4" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector4" data-bs-step="down">
+      <span class="visually-hidden">Step down</span>
+    </button>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector4" data-bs-step="up">
+      <span class="visually-hidden">Step up</span>
+    </button>
+  </div>
+  <div class="input-group quantity-selector" data-bs-theme="light">
+    <input type="number" id="inputQuantitySelectorDisabled4" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled4" data-bs-step="down" disabled>
+      <span class="visually-hidden">Step down</span>
+    </button>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled4" data-bs-step="up" disabled>
+      <span class="visually-hidden">Step up</span>
+    </button>
+  </div>
+</div>
+
 ### Range
 
 <h4 class="mt-3">No theme</h4>

From c6e30273fbffb30afc390d8853a974fd0c4ca6f8 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Wed, 25 Oct 2023 12:57:17 +0200
Subject: [PATCH 07/71] Dark mode: tarteaucitron (#2339)

---
 site/assets/js/tac.js                | 2 +-
 site/assets/scss/_tarteaucitron.scss | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/assets/js/tac.js b/site/assets/js/tac.js
index 930fb579a5..68f1257f23 100644
--- a/site/assets/js/tac.js
+++ b/site/assets/js/tac.js
@@ -29,7 +29,7 @@
   window.addEventListener('tac.open_alert', () => {
     const alert = document.getElementById('tarteaucitronAlertBig')
 
-    alert.setAttribute('data-bs-theme', 'dark');
+    alert.setAttribute('data-bs-theme', 'dark')
 
     document.getElementById('tarteaucitronCloseAlert').classList.add('btn', 'btn-sm', 'btn-secondary', 'ms-lg-2')
     alert.querySelector('.tarteaucitronAllow').classList.add('btn', 'btn-sm', 'btn-success', 'mx-sm-2', 'ms-lg-auto', 'my-2', 'my-lg-0')
diff --git a/site/assets/scss/_tarteaucitron.scss b/site/assets/scss/_tarteaucitron.scss
index 31ad52f109..2b4857d300 100644
--- a/site/assets/scss/_tarteaucitron.scss
+++ b/site/assets/scss/_tarteaucitron.scss
@@ -12,7 +12,7 @@
   [role="heading"] {
     display: block;
     font-weight: $font-weight-bold;
-    color: $black;
+    color: $modal-content-color;
   }
 
   @include media-breakpoint-up(sm) {
@@ -112,7 +112,7 @@
 }
 
 @include tac("Info") {
-  padding: $modal-inner-padding 0;
+  padding: $spacer * .5 0;
   margin-bottom: $spacer;
   font-weight: $font-weight-bold;
 }
@@ -120,7 +120,7 @@
 @include tac("Name", true) {
   float: left;
   font-size: $font-size-sm;
-  color: var(--bs-secondary-color);
+  color: var(--bs-placeholder-color);
 }
 
 @include tac("Ask", true) {
@@ -135,7 +135,7 @@
 @include tac("MainLine", true) {
   padding-bottom: $spacer;
   margin-bottom: $spacer;
-  border-bottom: $modal-content-border-width solid $gray-400;
+  border-bottom: $modal-content-border-width solid $modal-content-border-color;
 }
 
 @include tac("Services") {

From 142b9e596a0457be47d2a87311fd175ce28a0101 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Thu, 26 Oct 2023 07:09:09 +0200
Subject: [PATCH 08/71] Dark mode: Close button (#2317)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_variables.scss               |   6 +-
 site/content/docs/5.3/dark-mode.md | 117 +++++++++++++++++++++++++++++
 2 files changed, 120 insertions(+), 3 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index aad3b86a6d..38191bb560 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2191,9 +2191,9 @@ $btn-close-focus-shadow:        $btn-focus-box-shadow !default; // Deprecated in
 
 // Boosted mod
 $btn-close-hover-color:         $btn-close-color !default;
-$btn-close-active-color:        $primary !default;
-$btn-close-active-border-color: $gray-500 !default;
-$btn-close-disabled-color:      $gray-500 !default;
+$btn-close-active-color:        var(--#{$prefix}link-hover-color) !default;
+$btn-close-active-border-color: var(--#{$prefix}border-color-translucent) !default;
+$btn-close-disabled-color:      var(--#{$prefix}disabled-color) !default;
 
 $btn-close-icon-size:           1rem auto !default;
 $btn-close-padding-sm:          subtract($btn-icon-padding-x, $spacer * .25) !default;
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index c2447c513c..b9fa8d675b 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -783,6 +783,123 @@ sitemap_exclude: true
   <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled data-bs-theme="light">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled data-bs-theme="light"><span class="visually-hidden">Toggle Dropdown</span></button></div>
 </div>
 
+### Close button
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+  <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" disabled><span class="visually-hidden">Close</span></button>
+  <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+  <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+  <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" disabled><span class="visually-hidden">Close</span></button>
+  <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+  <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+  <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" disabled><span class="visually-hidden">Close</span></button>
+  <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+  <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark"><span class="visually-hidden">Close</span></button>
+  <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark" disabled><span class="visually-hidden">Close</span></button>
+  <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+  <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light"><span class="visually-hidden">Close</span></button>
+  <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light" disabled><span class="visually-hidden">Close</span></button>
+  <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+  <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light">
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <span class="visually-hidden">Close</span>
+  </button>
+</div>
+
 ### Dropdowns
 
 <h4 class="mt-3">No theme</h4>

From 63c7c05848732944b5fda55bb2a1c7cc5afa6e7a Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Fri, 27 Oct 2023 08:18:41 +0200
Subject: [PATCH 09/71] Dark mode: Form Validation (#2302)

---
 scss/_root.scss                    |   6 ++
 scss/_variables-dark.scss          |  18 ++++-
 scss/_variables.scss               |   1 +
 scss/mixins/_forms.scss            |   1 +
 site/content/docs/5.3/dark-mode.md | 119 ++++++++++++++++++++++++++++-
 5 files changed, 140 insertions(+), 5 deletions(-)

diff --git a/scss/_root.scss b/scss/_root.scss
index 3684f7bd8d..4776bff64f 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -198,6 +198,12 @@
       --#{$prefix}#{$color}-border-subtle: #{$value};
     }
 
+    // Boosted mod
+    @each $icon, $svg in $svg-as-custom-props-dark {
+      --#{$prefix}#{$icon}-icon: #{escape-svg($svg)};
+    }
+    // End mod
+
     --#{$prefix}heading-color: #{$headings-color-dark};
 
     --#{$prefix}link-color: #{$link-color-dark};
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 501db9f13f..abd521b9bf 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -94,6 +94,16 @@ $disabled-filter-dark:  brightness(0) invert(1) brightness(.4) !default; // Boos
 $focus-visible-inner-color-dark:    $black !default; // Boosted mod
 $focus-visible-outer-color-dark:    $white !default; // Boosted mod
 
+$success-icon-dark:                 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{$functional-green-dark}' d='M62.5 0a62.5 62.5 0 1 0 0 125 62.5 62.5 0 0 0 0-125zm28 29.4c3.3 0 6 2.6 6 5.9a5.9 5.9 0 0 1-1.3 3.7L57.7 86a5.8 5.8 0 0 1-9.1 0L29.8 62.5c-.8-1-1.2-2.3-1.2-3.7a5.9 5.9 0 0 1 1.7-4.1l2.3-2.4a5.8 5.8 0 0 1 4.2-1.7 5.8 5.8 0 0 1 3.8 1.4L52 64.7 86.6 31a5.8 5.8 0 0 1 4-1.6z'/></svg>") !default; // Boosted mod
+$danger-icon-dark:                  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 125'><path fill='#{$functional-red-dark}' d='M70.3 0c-5.8 0-10.8 3.1-13.5 7.8L2.3 101.3l-.2.2A15.6 15.6 0 0 0 15.6 125H125a15.6 15.6 0 0 0 13.5-23.5L83.8 7.8A15.6 15.6 0 0 0 70.3 0zm19.2 50a6.4 6.4 0 0 1 4.4 1.9 6.4 6.4 0 0 1 0 9L79.4 75.6l15 15a6.4 6.4 0 0 1 0 9.2 6.4 6.4 0 0 1-4.5 1.9 6.4 6.4 0 0 1-4.6-2l-15-15-15 15a6.4 6.4 0 0 1-4.6 2 6.4 6.4 0 0 1-4.6-2 6.4 6.4 0 0 1 0-9l15-15L46.8 61a6.4 6.4 0 1 1 9-9.1l14.6 14.5L84.8 52a6.4 6.4 0 0 1 4.7-1.9z'/></svg>") !default; // Boosted mod
+
+// Boosted mod
+$svg-as-custom-props-dark: (
+  "success": $success-icon-dark,
+  "error":   $danger-icon-dark
+) !default;
+// End mod
+
 //
 // Forms
 //
@@ -106,10 +116,10 @@ $form-select-disabled-indicator-dark: escape-svg(url("data:image/svg+xml,<svg xm
 // Boosted mod: no $form-switch-bg-image-dark
 
 // scss-docs-start form-validation-colors-dark
-$form-valid-color-dark:             $green-300 !default;
-$form-valid-border-color-dark:      $green-300 !default;
-$form-invalid-color-dark:           $red-300 !default;
-$form-invalid-border-color-dark:    $red-300 !default;
+$form-valid-color-dark:             var(--#{$prefix}success-text-emphasis) !default; // Boosted mod: instead of `$green-300`
+$form-valid-border-color-dark:      var(--#{$prefix}success) !default; // Boosted mod: instead of `$green-300`
+$form-invalid-color-dark:           var(--#{$prefix}danger-text-emphasis) !default; // Boosted mod: instead of `$red-300`
+$form-invalid-border-color-dark:    var(--#{$prefix}danger) !default; // Boosted mod: instead of `$red-300`
 // scss-docs-end form-validation-colors-dark
 
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 38191bb560..0961f26ae7 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1366,6 +1366,7 @@ $form-feedback-icon-valid:          var(--#{$prefix}success-icon) !default;
 $form-feedback-icon-invalid:        var(--#{$prefix}error-icon) !default;
 $form-feedback-icon-size:           add($spacer * .25, $spacer * .5) !default; // Boosted mod
 $form-feedback-line-height:         $line-height-sm !default; // Boosted mod
+$form-feedback-color:               var(--#{$prefix}body-color) !default; // Boosted mod
 // scss-docs-end form-feedback-variables
 
 // scss-docs-start form-validation-colors
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index eaf85bb688..9cc075a39c 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -62,6 +62,7 @@
       font-style: $form-feedback-font-style;
       font-weight: $font-weight-bold; // Boosted mod
       line-height: $form-feedback-line-height; // Boosted mod
+      color: $form-feedback-color; // Boosted mod
 
       // Boosted mod: status should not rely on color only
       @if $enable-validation-icons {
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index b9fa8d675b..b6cf9b3b6e 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -2686,7 +2686,7 @@ sitemap_exclude: true
   </div>
 </div>
 
-### Labels, required fields & text
+### Labels, fields & text
 
 <h4 class="mt-3">No theme</h4>
 
@@ -3272,3 +3272,120 @@ sitemap_exclude: true
     <input class="form-check-input" type="checkbox" role="switch" checked disabled>
   </div>
 </div>
+
+### Form validation
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 flex-column border border-tertiary p-3">
+  <input type="text" class="form-control is-valid" value="Mark">
+  <select class="form-select is-valid"><option selected disabled value="">Choose...</option><option>...</option></select>
+  <input type="file" class="form-control is-valid">
+  <input type="color" class="form-control form-control-color is-valid" value="#a885d8" title="Choose your color">
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value=""></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value="" checked></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value=""></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" checked></div>
+  <div class="input-group quantity-selector"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
+  <div><input type="text" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><select class="form-select is-invalid"><option selected disabled value="">Choose...</option><option>...</option></select><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><input type="file" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><input type="color" class="form-control form-control-color is-invalid" value="#a885d8" title="Choose your color"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value=""><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value=""><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="input-group quantity-selector w-100"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 flex-column border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <input type="text" class="form-control is-valid" value="Mark">
+  <select class="form-select is-valid"><option selected disabled value="">Choose...</option><option>...</option></select>
+  <input type="file" class="form-control is-valid">
+  <input type="color" class="form-control form-control-color is-valid" value="#a885d8" title="Choose your color">
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value=""></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value="" checked></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value=""></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" checked></div>
+  <div class="input-group quantity-selector"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
+  <div><input type="text" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><select class="form-select is-invalid"><option selected disabled value="">Choose...</option><option>...</option></select><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><input type="file" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><input type="color" class="form-control form-control-color is-invalid" value="#a885d8" title="Choose your color"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value=""><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value=""><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="input-group quantity-selector w-100"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 flex-column border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <input type="text" class="form-control is-valid" value="Mark">
+  <select class="form-select is-valid"><option selected disabled value="">Choose...</option><option>...</option></select>
+  <input type="file" class="form-control is-valid">
+  <input type="color" class="form-control form-control-color is-valid" value="#a885d8" title="Choose your color">
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value=""></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value="" checked></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value=""></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" checked></div>
+  <div class="input-group quantity-selector"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
+  <div><input type="text" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><select class="form-select is-invalid"><option selected disabled value="">Choose...</option><option>...</option></select><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><input type="file" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div><input type="color" class="form-control form-control-color is-invalid" value="#a885d8" title="Choose your color"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value=""><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value=""><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="input-group quantity-selector w-100"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 flex-column border border-tertiary p-3" style="background-color: #282d55;">
+  <input type="text" class="form-control is-valid" value="Mark" data-bs-theme="dark">
+  <select class="form-select is-valid" data-bs-theme="dark"><option selected disabled value="">Choose...</option><option>...</option></select>
+  <input type="file" class="form-control is-valid" data-bs-theme="dark">
+  <input type="color" class="form-control form-control-color is-valid" value="#a885d8" title="Choose your color" data-bs-theme="dark">
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value="" data-bs-theme="dark"></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value="" data-bs-theme="dark" checked></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" data-bs-theme="dark"></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" data-bs-theme="dark" checked></div>
+  <div class="input-group quantity-selector" data-bs-theme="dark"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
+  <div><input type="text" class="form-control is-invalid" data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div><select class="form-select is-invalid" data-bs-theme="dark"><option selected disabled value="">Choose...</option><option>...</option></select><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div><input type="file" class="form-control is-invalid" data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div><input type="color" class="form-control form-control-color is-invalid" value="#a885d8" title="Choose your color" data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" checked data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div class="input-group quantity-selector w-100" data-bs-theme="dark"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 flex-column border border-tertiary p-3" style="background-color: #b5e8f7">
+  <input type="text" class="form-control is-valid" value="Mark" data-bs-theme="light">
+  <select class="form-select is-valid" data-bs-theme="light"><option selected disabled value="">Choose...</option><option>...</option></select>
+  <input type="file" class="form-control is-valid" data-bs-theme="light">
+  <input type="color" class="form-control form-control-color is-valid" value="#a885d8" title="Choose your color" data-bs-theme="light">
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value="" data-bs-theme="light"></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value=""  data-bs-theme="light" checked></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" data-bs-theme="light"></div>
+  <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" data-bs-theme="light" checked></div>
+  <div class="input-group quantity-selector" data-bs-theme="light"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
+  <div><input type="text" class="form-control is-invalid" data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div><select class="form-select is-invalid" data-bs-theme="light"><option selected disabled value="">Choose...</option><option>...</option></select><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div><input type="file" class="form-control is-invalid" data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div><input type="color" class="form-control form-control-color is-invalid" value="#a885d8" title="Choose your color" data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" checked data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div class="input-group quantity-selector w-100" data-bs-theme="light"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+</div>

From 446511b09d1129a769d2a9fb233cd44b21a84725 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Fri, 27 Oct 2023 08:27:18 +0200
Subject: [PATCH 10/71] Dark mode: Back to top (#2329)

---
 scss/_back-to-top.scss             |  4 +-
 scss/_variables.scss               |  4 +-
 site/content/docs/5.3/dark-mode.md | 79 +++++++++++++++++++++++++++++-
 3 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/scss/_back-to-top.scss b/scss/_back-to-top.scss
index 2e2e3b0623..051b68401f 100644
--- a/scss/_back-to-top.scss
+++ b/scss/_back-to-top.scss
@@ -16,9 +16,10 @@
   --#{$prefix}back-to-top-link-icon: #{$back-to-top-icon};
   --#{$prefix}back-to-top-link-width: #{$back-to-top-icon-width};
   --#{$prefix}back-to-top-link-height: #{$back-to-top-icon-height};
+  --#{$prefix}back-to-top-link-bg: #{$back-to-top-bg};
   --#{$prefix}back-to-top-title-offset-right: #{$back-to-top-title-offset-right};
   --#{$prefix}back-to-top-title-padding: #{$back-to-top-title-padding};
-  --#{$prefix}back-to-top-title-color: #{color-contrast($back-to-top-title-bg-color)};
+  --#{$prefix}back-to-top-title-color: #{$back-to-top-title-color};
   --#{$prefix}back-to-top-title-bg-color: #{$back-to-top-title-bg-color};
   --#{$prefix}back-to-top-title-active-decoration: #{$link-decoration};
   // scss-docs-end back-to-top-css-vars
@@ -43,6 +44,7 @@
   position: sticky;
   top: var(--#{$prefix}back-to-top-link-offset-top);
   pointer-events: all;
+  background-color: var(--#{$prefix}back-to-top-link-bg);
   @include button-icon(var(--#{$prefix}back-to-top-link-icon), $size: var(--#{$prefix}back-to-top-link-width) var(--#{$prefix}back-to-top-link-height), $pseudo: "after", $position: calc(50% - 1px));
 
   &::after {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 0961f26ae7..21291e15b1 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2262,7 +2262,9 @@ $back-to-top-link-offset-top:    subtract(100vh, $back-to-top-offset * 4) !defau
 $back-to-top-link-offset-top-xl: subtract(100vh, $spacer * 5) !default;
 $back-to-top-title-offset-right: add(100%, var(--#{$prefix}border-width)) !default;
 $back-to-top-title-padding:      subtract($btn-padding-y, 1px) $btn-padding-x add($btn-padding-y, 1px) !default;
-$back-to-top-title-bg-color:     $white !default;
+$back-to-top-title-color:        var(--#{$prefix}body-color) !default;
+$back-to-top-title-bg-color:     var(--#{$prefix}body-bg) !default;
+$back-to-top-bg:                 var(--#{$prefix}highlight-color) !default;
 $back-to-top-icon:               var(--#{$prefix}chevron-icon) !default;
 $back-to-top-icon-width:         add(.5rem, 1px) !default;
 $back-to-top-icon-height:        subtract(1rem, 1px) !default;
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index b6cf9b3b6e..94e94a00e8 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -444,6 +444,83 @@ sitemap_exclude: true
   </div>
 </div>
 
+### Back to top
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3">
+  <nav aria-label="Standard back to top example" class="back-to-top position-static ps-5 ms-5">
+    <a href="#" 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>
+    </a>
+  </nav>
+  <nav aria-label="Icon only back to top example" class="back-to-top position-static">
+    <a href="#" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
+      <span class="visually-hidden">Back to top</span>
+    </a>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <nav aria-label="Standard back to top example2" class="back-to-top position-static ps-5 ms-5">
+    <a href="#" 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>
+    </a>
+  </nav>
+  <nav aria-label="Icon only back to top example2" class="back-to-top position-static">
+    <a href="#" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
+      <span class="visually-hidden">Back to top</span>
+    </a>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <nav aria-label="Standard back to top example3" class="back-to-top position-static ps-5 ms-5">
+    <a href="#" 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>
+    </a>
+  </nav>
+  <nav aria-label="Icon only back to top example3" class="back-to-top position-static">
+    <a href="#" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
+      <span class="visually-hidden">Back to top</span>
+    </a>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3" style="background-color: #282d55;">
+  <nav aria-label="Standard back to top example4" class="back-to-top position-static ps-5 ms-5" data-bs-theme="dark">
+    <a href="#" 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>
+    </a>
+  </nav>
+  <nav aria-label="Icon only back to top example4" class="back-to-top position-static" data-bs-theme="dark">
+    <a href="#" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
+      <span class="visually-hidden">Back to top</span>
+    </a>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3" style="background-color: #b5e8f7">
+  <nav aria-label="Standard back to top example5" class="back-to-top position-static ps-5 ms-5" data-bs-theme="light">
+    <a href="#" 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>
+    </a>
+  </nav>
+  <nav aria-label="Icon only back to top example5" class="back-to-top position-static" data-bs-theme="light">
+    <a href="#" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
+      <span class="visually-hidden">Back to top</span>
+    </a>
+  </nav>
+</div>
+
 ### Breadcrumb
 
 <h4 class="mt-3">No theme</h4>
@@ -3273,7 +3350,7 @@ sitemap_exclude: true
   </div>
 </div>
 
-### Form validation
+### Validation
 
 <h4 class="mt-3">No theme</h4>
 

From 3f034901afe3f65a43b098e599aaf4dbc227d8d4 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Fri, 27 Oct 2023 08:45:42 +0200
Subject: [PATCH 11/71] Dark mode: Popovers (#2325)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_variables.scss               |  4 ++--
 site/content/docs/5.3/dark-mode.md | 37 ++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 21291e15b1..0e4b883029 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -797,7 +797,7 @@ $headings-font-family:        null !default;
 $headings-font-style:         null !default;
 $headings-font-weight:        700 !default;
 $headings-line-height:        $h6-line-height !default;
-$headings-color:              inherit !default;
+$headings-color:              $black !default; // Boosted mod: instead of `inherit`
 // scss-docs-end headings-variables
 
 // scss-docs-start display-headings
@@ -1817,7 +1817,7 @@ $popover-box-shadow:                var(--#{$prefix}box-shadow) !default;
 $popover-header-font-size:          $font-size-lg !default; // Boosted mod: instead of `$font-size-base`
 $popover-header-line-height:        1.11 !default; // Boosted mod
 $popover-header-bg:                 $popover-bg !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
-$popover-header-color:              $headings-color !default;
+$popover-header-color:              var(--#{$prefix}heading-color) !default; // Boosted mod: instead of `$headings-color`
 $popover-header-padding-top:        $popover-padding-y !default; // Boosted mod
 $popover-header-padding-bottom:     map-get($spacers, 2) !default; // Boosted mod
 $popover-header-padding-y:          initial !default; // Boosted mod: instead of `.5rem`
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 94e94a00e8..e3aaaa9e00 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -1821,6 +1821,43 @@ sitemap_exclude: true
   </div>
 </div>
 
+### Popovers
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3">
+  <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
+  <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
+  <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
+  <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3" style="background-color: #282d55;">
+  <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right" data-bs-theme="dark"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
+  <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-bs-theme="dark">Click to toggle popover</button>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right" data-bs-theme="light"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
+  <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-bs-theme="light">Click to toggle popover</button>
+</div>
+
 ### Spinners
 
 <h4 class="mt-3">No theme</h4>

From 79e5ef9a69d238431efa3706bd890c2905c8c6ae Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Fri, 27 Oct 2023 09:26:51 +0200
Subject: [PATCH 12/71] Dark mode: pagination (#2314)

---
 scss/_pagination.scss              |  14 +--
 scss/_variables.scss               |  35 ++++---
 site/content/docs/5.3/dark-mode.md | 157 +++++++++++++++++++++++++++++
 3 files changed, 182 insertions(+), 24 deletions(-)

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index e15322c14b..f09e31f8a2 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -15,9 +15,9 @@
   --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
   --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
   --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
-  --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
-  --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
-  --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
+  // Boosted mod: no --#{$prefix}pagination-focus-color
+  // Boosted mod: no --#{$prefix}pagination-focus-bg
+  // Boosted mod: no --#{$prefix}pagination-focus-box-shadow
   --#{$prefix}pagination-active-color: #{$pagination-active-color};
   --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
   --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
@@ -71,13 +71,7 @@
     border-color: var(--#{$prefix}pagination-hover-border-color);
   }
 
-  &:focus {
-    z-index: 5; // Boosted mod
-    color: var(--#{$prefix}pagination-focus-color);
-    background-color: var(--#{$prefix}pagination-focus-bg);
-    outline: $pagination-focus-outline;
-    box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
-  }
+  // Boosted mod: no focus
 
   // Boosted mod
   &:active,
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 0e4b883029..3974877077 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1627,13 +1627,17 @@ $dropdown-dark-header-color:        $white !default; // Boosted mod
 // Pagination
 
 // scss-docs-start pagination-variables
-$pagination-padding-y:              null !default;
-$pagination-padding-x:              null !default;
+$pagination-padding-y:              null !default; // Boosted mod: instead of `.375rem`
+$pagination-padding-x:              null !default; // Boosted mod: instead of `.75rem`
+// Boosted mod: no $pagination-padding-y-sm
+// Boosted mod: no $pagination-padding-x-sm
+// Boosted mod: no $pagination-padding-y-lg
+// Boosted mod: no $pagination-padding-x-lg
 
 $pagination-font-size:              $font-size-base !default;
 
-$pagination-color:                  null !default;
-$pagination-bg:                     var(--#{$prefix}body-bg) !default;
+$pagination-color:                  var(--#{$prefix}link-color) !default;
+$pagination-bg:                     transparent !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 $pagination-border-radius:          var(--#{$prefix}border-radius) !default;
 $pagination-border-width:           var(--#{$prefix}border-width) !default;
 $pagination-margin-y:               $spacer !default; // Boosted mod
@@ -1641,24 +1645,27 @@ $pagination-margin-start:           0 !default; // Boosted mod: instead of `calc
 $pagination-margin-x-first-last:    $spacer * .5 !default; // Boosted mod
 $pagination-border-color:           transparent !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 
+// Deprecated in v5.3.3
+// fusv-disable
 $pagination-focus-color:            null !default; // Boosted mod
 $pagination-focus-bg:               null !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
 $pagination-focus-box-shadow:       0 0 0 $focus-visible-inner-width var(--#{$prefix}focus-visible-inner-color) !default; // Boosted mod: no `$focus-ring-box-shadow`
 $pagination-focus-outline:          null !default; // Boosted mod
+// fusv-enable
 
-$pagination-hover-color:            var(--#{$prefix}link-color) !default; // Boosted mod
-$pagination-hover-bg:               null !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
-$pagination-hover-border-color:     $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
+$pagination-hover-color:            var(--#{$prefix}link-color) !default; // Boosted mod: instead of `var(--#{$prefix}link-hover-color)`
+$pagination-hover-bg:               var(--#{$prefix}active-bg) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
+$pagination-hover-border-color:     $pagination-hover-bg !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 
-$pagination-active-color:           $white !default;
-$pagination-active-bg:              $black !default;
+$pagination-active-color:           var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `$component-active-color`
+$pagination-active-bg:              var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `$component-active-bg`
 $pagination-active-border-color:    $pagination-active-bg !default; // Boosted mod: instead of `$component-active-bg`
 
-$pagination-disabled-color:         $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
-$pagination-disabled-bg:            $white !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
-$pagination-disabled-border-color:  $pagination-disabled-color !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
+$pagination-disabled-color:         var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
+$pagination-disabled-bg:            transparent !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
+$pagination-disabled-border-color:  transparent !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 
-$pagination-transition:             $transition-focus !default;
+$pagination-transition:             $transition-focus !default; // Boosted mod: no color, bg-color, border-color, box-shadow
 
 // Boosted mod: no $pagination-border-radius-sm
 // Boosted mod: no $pagination-border-radius-lg
@@ -1671,7 +1678,7 @@ $pagination-icon-width:             add(.5rem, 1px) !default;
 $pagination-icon-height:            subtract(1rem, 1px) !default;
 
 $pagination-active-item-bg:         $primary !default;
-$pagination-active-item-color:      color-contrast($pagination-active-item-bg) !default;
+$pagination-active-item-color:      $black !default;
 $pagination-active-item-border:     $pagination-active-item-bg !default;
 // End mod
 // scss-docs-end pagination-variables
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index e3aaaa9e00..5fd04c5d3b 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -1821,6 +1821,163 @@ sitemap_exclude: true
   </div>
 </div>
 
+### Pagination
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3">
+  <nav aria-label="Page navigation example">
+    <ul class="pagination mb-0">
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
+      <li class="page-item"><a class="page-link" href="#">Next</a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example icons">
+    <ul class="pagination mb-0">
+      <li class="page-item"><a class="page-link" href="#" aria-label="Previous"></a></li>
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true"></a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example complete">
+    <ul class="pagination mb-0">
+      <li class="page-item disabled">
+        <a class="page-link">Previous</a>
+      </li>
+      <li class="page-item"><a class="page-link" href="#">1</a></li>
+      <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
+      <li class="page-item"><a class="page-link disabled">3</a></li>
+      <li class="page-item disabled"><a class="page-link">4</a></li>
+      <li class="page-item">
+        <a class="page-link" href="#" aria-label="Next"></a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <nav aria-label="Page navigation example2">
+    <ul class="pagination mb-0">
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
+      <li class="page-item"><a class="page-link" href="#">Next</a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example icons2">
+    <ul class="pagination mb-0">
+      <li class="page-item"><a class="page-link" href="#" aria-label="Previous"></a></li>
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true"></a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example complete2">
+    <ul class="pagination mb-0">
+      <li class="page-item disabled">
+        <a class="page-link">Previous</a>
+      </li>
+      <li class="page-item"><a class="page-link" href="#">1</a></li>
+      <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
+      <li class="page-item"><a class="page-link disabled">3</a></li>
+      <li class="page-item disabled"><a class="page-link">4</a></li>
+      <li class="page-item">
+        <a class="page-link" href="#" aria-label="Next"></a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <nav aria-label="Page navigation example3">
+    <ul class="pagination mb-0">
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
+      <li class="page-item"><a class="page-link" href="#">Next</a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example icons3">
+    <ul class="pagination mb-0">
+      <li class="page-item"><a class="page-link" href="#" aria-label="Previous"></a></li>
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true"></a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example complete3">
+    <ul class="pagination mb-0">
+      <li class="page-item disabled">
+        <a class="page-link">Previous</a>
+      </li>
+      <li class="page-item"><a class="page-link" href="#">1</a></li>
+      <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
+      <li class="page-item"><a class="page-link disabled">3</a></li>
+      <li class="page-item disabled"><a class="page-link">4</a></li>
+      <li class="page-item">
+        <a class="page-link" href="#" aria-label="Next"></a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #282d55;">
+  <nav aria-label="Page navigation example4">
+    <ul class="pagination mb-0" data-bs-theme="dark">
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
+      <li class="page-item"><a class="page-link" href="#">Next</a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example icons4">
+    <ul class="pagination mb-0" data-bs-theme="dark">
+      <li class="page-item"><a class="page-link" href="#" aria-label="Previous"></a></li>
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true"></a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example complete4">
+    <ul class="pagination mb-0" data-bs-theme="dark">
+      <li class="page-item disabled">
+        <a class="page-link">Previous</a>
+      </li>
+      <li class="page-item"><a class="page-link" href="#">1</a></li>
+      <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
+      <li class="page-item"><a class="page-link disabled">3</a></li>
+      <li class="page-item disabled"><a class="page-link">4</a></li>
+      <li class="page-item">
+        <a class="page-link" href="#" aria-label="Next"></a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #b5e8f7">
+  <nav aria-label="Page navigation example5">
+    <ul class="pagination mb-0" data-bs-theme="light">
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
+      <li class="page-item"><a class="page-link" href="#">Next</a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example icons5">
+    <ul class="pagination mb-0" data-bs-theme="light">
+      <li class="page-item"><a class="page-link" href="#" aria-label="Previous"></a></li>
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true"></a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example complete5">
+    <ul class="pagination mb-0" data-bs-theme="light">
+      <li class="page-item disabled">
+        <a class="page-link">Previous</a>
+      </li>
+      <li class="page-item"><a class="page-link" href="#">1</a></li>
+      <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
+      <li class="page-item"><a class="page-link disabled">3</a></li>
+      <li class="page-item disabled"><a class="page-link">4</a></li>
+      <li class="page-item">
+        <a class="page-link" href="#" aria-label="Next"></a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
 ### Popovers
 
 <h4 class="mt-3">No theme</h4>

From 55b33577188d216604b42223ffb347eb8e2125a5 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Fri, 27 Oct 2023 09:38:45 +0200
Subject: [PATCH 13/71] Dark mode: Carousel (#2316)

---
 scss/_carousel.scss                |   3 +-
 scss/_variables.scss               |   4 +-
 site/content/docs/5.3/dark-mode.md | 242 +++++++++++++++++++++++++++++
 3 files changed, 247 insertions(+), 2 deletions(-)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index d7147b7bbe..eecc2466de 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -312,6 +312,7 @@
 
   .carousel-control-play-pause {
     margin-bottom: $carousel-indicators-margin-bottom;
+    color: $carousel-control-icon-color;
     background: rgba($carousel-indicator-active-bg, .5);
     border: 0;
     @include border-radius($spacer, $spacer);
@@ -354,7 +355,7 @@
   left: (100% - $carousel-caption-width) * .5;
   padding: $carousel-caption-padding-y $carousel-caption-padding-x; // Boosted mod
   color: $carousel-caption-color;
-  background-color: color-contrast($carousel-caption-color); // Boosted mod: ensure contrast
+  background-color: $carousel-caption-bg; // Boosted mod
 }
 
 // Boosted mod: no dark carousel nor carousel in dark mode since Boosted doesn't have any dark mode for now
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 3974877077..51e95c375e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2131,7 +2131,8 @@ $carousel-indicators-margin-bottom:     $spacer !default;
 // End mod
 
 $carousel-caption-width:             70% !default;
-$carousel-caption-color:             $black !default;
+$carousel-caption-color:             var(--#{$prefix}body-color) !default;
+$carousel-caption-bg:                var(--#{$prefix}body-bg) !default; // Boosted mod
 $carousel-caption-padding-y:         $spacer !default;
 $carousel-caption-padding-x:         $spacer !default; // Boosted mod
 $carousel-caption-spacer:            $spacer * 3 !default;
@@ -2140,6 +2141,7 @@ $carousel-control-icon-width:        2.5rem !default;
 // Boosted mod
 $carousel-control-icon-size:         1rem 1.5rem !default;
 $carousel-control-icon-bg:           var(--#{$prefix}chevron-icon) !default;
+$carousel-control-icon-color:        $black !default; // Boosted mod
 $carousel-control-icon-active-bg:    $component-active-bg !default;
 
 $carousel-control-pause-indicators-spacing: 10px !default;
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 5fd04c5d3b..bfb1e03bb1 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -860,6 +860,248 @@ sitemap_exclude: true
   <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled data-bs-theme="light">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled data-bs-theme="light"><span class="visually-hidden">Toggle Dropdown</span></button></div>
 </div>
 
+### Carousel
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-wrap="false">
+    <div class="carousel-action-bar">
+      <button type="button" class="btn btn-icon carousel-control-play-pause pause" data-bs-target="#carouselExample" data-bs-play-text="Play Carousel" data-bs-pause-text="Pause Carousel" title="Pause Carousel">
+        <span class="visually-hidden">Pause Carousel</span>
+      </button>
+      <div class="carousel-indicators">
+        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
+        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
+      </div>
+    </div>
+    <div class="carousel-inner">
+      <div class="carousel-item active">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-body-bg)"></rect><text x="50%" y="50%" fill="var(--bs-body-color)" dy=".3em">First slide</text></svg>
+        <div class="carousel-caption d-none d-md-block">
+          <h5 class="mb-0">First slide label</h5>
+          <p class="mb-0">Some representative placeholder content for the first slide.</p>
+        </div>
+      </div>
+      <div class="carousel-item">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-body-color)"></rect><text x="50%" y="50%" fill="var(--bs-body-bg)" dy=".3em">Second slide</text></svg>
+        <div class="carousel-caption d-none d-md-block">
+          <h5 class="mb-0">Second slide label</h5>
+          <p class="mb-0">Some representative placeholder content for the second slide.</p>
+        </div>
+      </div>
+      <div class="carousel-item">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#4bb4e6"></rect><text x="50%" y="50%" fill="#000" dy=".3em">Third slide</text></svg>
+        <div class="carousel-caption d-none d-md-block">
+          <h5 class="mb-0">Third slide label</h5>
+          <p class="mb-0">Some representative placeholder content for the third slide.</p>
+        </div>
+      </div>
+    </div>
+    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Previous</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Next</span>
+    </button>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div id="carouselExample2" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-wrap="false">
+    <div class="carousel-action-bar">
+      <button type="button" class="btn btn-icon carousel-control-play-pause pause" data-bs-target="#carouselExample2" data-bs-play-text="Play Carousel" data-bs-pause-text="Pause Carousel" title="Pause Carousel">
+        <span class="visually-hidden">Pause Carousel</span>
+      </button>
+      <div class="carousel-indicators">
+        <button type="button" data-bs-target="#carouselExample2" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+        <button type="button" data-bs-target="#carouselExample2" data-bs-slide-to="1" aria-label="Slide 2"></button>
+        <button type="button" data-bs-target="#carouselExample2" data-bs-slide-to="2" aria-label="Slide 3"></button>
+      </div>
+    </div>
+    <div class="carousel-inner">
+      <div class="carousel-item active">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-body-bg)"></rect><text x="50%" y="50%" fill="var(--bs-body-color)" dy=".3em">First slide</text></svg>
+        <div class="carousel-caption d-none d-md-block">
+          <h5 class="mb-0">First slide label</h5>
+          <p class="mb-0">Some representative placeholder content for the first slide.</p>
+        </div>
+      </div>
+      <div class="carousel-item">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-body-color)"></rect><text x="50%" y="50%" fill="var(--bs-body-bg)" dy=".3em">Second slide</text></svg>
+        <div class="carousel-caption d-none d-md-block">
+          <h5 class="mb-0">Second slide label</h5>
+          <p class="mb-0">Some representative placeholder content for the second slide.</p>
+        </div>
+      </div>
+      <div class="carousel-item">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#4bb4e6"></rect><text x="50%" y="50%" fill="#000" dy=".3em">Third slide</text></svg>
+        <div class="carousel-caption d-none d-md-block">
+          <h5 class="mb-0">Third slide label</h5>
+          <p class="mb-0">Some representative placeholder content for the third slide.</p>
+        </div>
+      </div>
+    </div>
+    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample2" data-bs-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Previous</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample2" data-bs-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Next</span>
+    </button>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div id="carouselExample3" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-wrap="false">
+    <div class="carousel-action-bar">
+      <button type="button" class="btn btn-icon carousel-control-play-pause pause" data-bs-target="#carouselExample3" data-bs-play-text="Play Carousel" data-bs-pause-text="Pause Carousel" title="Pause Carousel">
+        <span class="visually-hidden">Pause Carousel</span>
+      </button>
+      <div class="carousel-indicators">
+        <button type="button" data-bs-target="#carouselExample3" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+        <button type="button" data-bs-target="#carouselExample3" data-bs-slide-to="1" aria-label="Slide 2"></button>
+        <button type="button" data-bs-target="#carouselExample3" data-bs-slide-to="2" aria-label="Slide 3"></button>
+      </div>
+    </div>
+    <div class="carousel-inner">
+      <div class="carousel-item active">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-body-bg)"></rect><text x="50%" y="50%" fill="var(--bs-body-color)" dy=".3em">First slide</text></svg>
+        <div class="carousel-caption d-none d-md-block">
+          <h5 class="mb-0">First slide label</h5>
+          <p class="mb-0">Some representative placeholder content for the first slide.</p>
+        </div>
+      </div>
+      <div class="carousel-item">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-body-color)"></rect><text x="50%" y="50%" fill="var(--bs-body-bg)" dy=".3em">Second slide</text></svg>
+        <div class="carousel-caption d-none d-md-block">
+          <h5 class="mb-0">Second slide label</h5>
+          <p class="mb-0">Some representative placeholder content for the second slide.</p>
+        </div>
+      </div>
+      <div class="carousel-item">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#4bb4e6"></rect><text x="50%" y="50%" fill="#000" dy=".3em">Third slide</text></svg>
+        <div class="carousel-caption d-none d-md-block">
+          <h5 class="mb-0">Third slide label</h5>
+          <p class="mb-0">Some representative placeholder content for the third slide.</p>
+        </div>
+      </div>
+    </div>
+    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample3" data-bs-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Previous</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample3" data-bs-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Next</span>
+    </button>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <div id="carouselExample4" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-wrap="false" data-bs-theme="dark">
+    <div class="carousel-action-bar">
+      <button type="button" class="btn btn-icon carousel-control-play-pause pause" data-bs-target="#carouselExample4" data-bs-play-text="Play Carousel" data-bs-pause-text="Pause Carousel" title="Pause Carousel">
+        <span class="visually-hidden">Pause Carousel</span>
+      </button>
+      <div class="carousel-indicators">
+        <button type="button" data-bs-target="#carouselExample4" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+        <button type="button" data-bs-target="#carouselExample4" data-bs-slide-to="1" aria-label="Slide 2"></button>
+        <button type="button" data-bs-target="#carouselExample4" data-bs-slide-to="2" aria-label="Slide 3"></button>
+      </div>
+    </div>
+    <div class="carousel-inner">
+      <div class="carousel-item active">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-body-bg)"></rect><text x="50%" y="50%" fill="var(--bs-body-color)" dy=".3em">First slide</text></svg>
+        <div class="carousel-caption d-none d-md-block">
+          <h5 class="mb-0">First slide label</h5>
+          <p class="mb-0">Some representative placeholder content for the first slide.</p>
+        </div>
+      </div>
+      <div class="carousel-item">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-body-color)"></rect><text x="50%" y="50%" fill="var(--bs-body-bg)" dy=".3em">Second slide</text></svg>
+        <div class="carousel-caption d-none d-md-block">
+          <h5 class="mb-0">Second slide label</h5>
+          <p class="mb-0">Some representative placeholder content for the second slide.</p>
+        </div>
+      </div>
+      <div class="carousel-item">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#4bb4e6"></rect><text x="50%" y="50%" fill="#000" dy=".3em">Third slide</text></svg>
+        <div class="carousel-caption d-none d-md-block">
+          <h5 class="mb-0">Third slide label</h5>
+          <p class="mb-0">Some representative placeholder content for the third slide.</p>
+        </div>
+      </div>
+    </div>
+    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample4" data-bs-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Previous</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample4" data-bs-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Next</span>
+    </button>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div id="carouselExample5" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-wrap="false" data-bs-theme="light">
+    <div class="carousel-action-bar">
+      <button type="button" class="btn btn-icon carousel-control-play-pause pause" data-bs-target="#carouselExample5" data-bs-play-text="Play Carousel" data-bs-pause-text="Pause Carousel" title="Pause Carousel">
+        <span class="visually-hidden">Pause Carousel</span>
+      </button>
+      <div class="carousel-indicators">
+        <button type="button" data-bs-target="#carouselExample5" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+        <button type="button" data-bs-target="#carouselExample5" data-bs-slide-to="1" aria-label="Slide 2"></button>
+        <button type="button" data-bs-target="#carouselExample5" data-bs-slide-to="2" aria-label="Slide 3"></button>
+      </div>
+    </div>
+    <div class="carousel-inner">
+      <div class="carousel-item active">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-body-bg)"></rect><text x="50%" y="50%" fill="var(--bs-body-color)" dy=".3em">First slide</text></svg>
+        <div class="carousel-caption d-none d-md-block">
+          <h5 class="mb-0">First slide label</h5>
+          <p class="mb-0">Some representative placeholder content for the first slide.</p>
+        </div>
+      </div>
+      <div class="carousel-item">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-body-color)"></rect><text x="50%" y="50%" fill="var(--bs-body-bg)" dy=".3em">Second slide</text></svg>
+        <div class="carousel-caption d-none d-md-block">
+          <h5 class="mb-0">Second slide label</h5>
+          <p class="mb-0">Some representative placeholder content for the second slide.</p>
+        </div>
+      </div>
+      <div class="carousel-item">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#4bb4e6"></rect><text x="50%" y="50%" fill="#000" dy=".3em">Third slide</text></svg>
+        <div class="carousel-caption d-none d-md-block">
+          <h5 class="mb-0">Third slide label</h5>
+          <p class="mb-0">Some representative placeholder content for the third slide.</p>
+        </div>
+      </div>
+    </div>
+    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample5" data-bs-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Previous</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample5" data-bs-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Next</span>
+    </button>
+  </div>
+</div>
+
 ### Close button
 
 <h4 class="mt-3">No theme</h4>

From 98b005e1635df363289d094b8c7ca7b358c4faa8 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Fri, 27 Oct 2023 14:12:08 +0200
Subject: [PATCH 14/71] Dark mode: Cards (#2318)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_variables.scss                          |   6 +-
 site/content/docs/5.3/components/card.md      |   4 +-
 site/content/docs/5.3/content/figures.md      |   4 +-
 site/content/docs/5.3/content/images.md       |  12 +-
 site/content/docs/5.3/dark-mode.md            | 327 +++++++++++++++++-
 .../docs/5.3/examples/cards-rtl/index.html    | 154 +--------
 .../docs/5.3/examples/cards/index.html        | 154 +--------
 .../docs/5.3/examples/masonry/index.html      |   2 +-
 site/content/docs/5.3/layout/columns.md       |   2 +-
 site/content/docs/5.3/utilities/borders.md    |  36 +-
 site/content/docs/5.3/utilities/object-fit.md |  20 +-
 site/layouts/shortcodes/card.html             |  12 +-
 site/layouts/shortcodes/placeholder.html      |  20 +-
 13 files changed, 405 insertions(+), 348 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 51e95c375e..1a6a355697 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1710,15 +1710,15 @@ $card-box-shadow:                   null !default;
 $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
 $card-cap-padding-y:                $card-spacer-bottom * .5 !default; // Boosted mod
 $card-cap-padding-x:                $card-spacer-x !default;
-$card-cap-bg:                       $black !default; // Boosted mod: instead of `rgba(var(--#{$prefix}body-color-rgb), .03)`
-$card-cap-color:                    $white !default; // Boosted mod: instead of `null`
+$card-cap-bg:                       var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}body-color-rgb), .03)`
+$card-cap-color:                    var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `null`
 $card-cap-font-weight:              $font-weight-bold !default; // Boosted mod
 $card-height:                       null !default;
 $card-color:                        null !default;
 $card-bg:                           var(--#{$prefix}body-bg) !default;
 $card-img-overlay-padding:          $spacer !default;
 $card-group-margin:                 $grid-gutter-width * .5 !default;
-$card-footer-color:                 $gray-700 !default; // Boosted mod
+$card-footer-color:                 var(--#{$prefix}placeholder-color) !default; // Boosted mod
 // scss-docs-end card-variables
 
 // Accordion
diff --git a/site/content/docs/5.3/components/card.md b/site/content/docs/5.3/components/card.md
index a8c7a9b834..d44b3adacb 100644
--- 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-white">
+  <div class="card-header 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-white">
+  <div class="card-header 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/content/figures.md b/site/content/docs/5.3/content/figures.md
index ee8ccfebac..036b17e795 100644
--- a/site/content/docs/5.3/content/figures.md
+++ b/site/content/docs/5.3/content/figures.md
@@ -14,7 +14,7 @@ Use the included `.figure`, `.figure-img` and `.figure-caption` classes to provi
 
 {{< example >}}
 <figure class="figure">
-  {{< placeholder width="400" height="300" class="figure-img img-fluid" >}}
+  {{< placeholder width="400" height="300" class="figure-img img-fluid" color="#999" >}}
   <figcaption class="figure-caption">A caption for the above image.</figcaption>
 </figure>
 {{< /example >}}
@@ -23,7 +23,7 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut
 
 {{< example >}}
 <figure class="figure">
-  {{< placeholder width="400" height="300" class="figure-img img-fluid" >}}
+  {{< placeholder width="400" height="300" class="figure-img img-fluid" color="#999" >}}
   <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
 </figure>
 {{< /example >}}
diff --git a/site/content/docs/5.3/content/images.md b/site/content/docs/5.3/content/images.md
index a97f0c57ef..fd12d66bb1 100644
--- a/site/content/docs/5.3/content/images.md
+++ b/site/content/docs/5.3/content/images.md
@@ -13,7 +13,7 @@ toc: true
 Images in Boosted are made responsive with `.img-fluid`. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent width.
 
 {{< example >}}
-{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
+{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" color="#999" >}}
 {{< /example >}}
 
 ## Image thumbnails
@@ -21,7 +21,7 @@ Images in Boosted are made responsive with `.img-fluid`. This applies `max-width
 In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a 2px border appearance.
 
 {{< example >}}
-{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a gray border around it" >}}
+{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a gray border around it" color="#999" >}}
 {{< /example >}}
 
 ## Aligning images
@@ -29,18 +29,18 @@ In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}
 Align images with the [helper float classes]({{< docsref "/utilities/float" >}}) or [text alignment classes]({{< docsref "/utilities/text#text-alignment" >}}). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{< docsref "/utilities/spacing#horizontal-centering" >}}).
 
 {{< example >}}
-{{< placeholder width="200" height="200" class="float-start" >}}
-{{< placeholder width="200" height="200" class="float-end" >}}
+{{< placeholder width="200" height="200" class="float-start" color="#999" >}}
+{{< placeholder width="200" height="200" class="float-end" color="#999" >}}
 {{< /example >}}
 
 
 {{< example >}}
-{{< placeholder width="200" height="200" class="mx-auto d-block" >}}
+{{< placeholder width="200" height="200" class="mx-auto d-block" color="#999" >}}
 {{< /example >}}
 
 {{< example >}}
 <div class="text-center">
-  {{< placeholder width="200" height="200" >}}
+  {{< placeholder width="200" height="200" color="#999" >}}
 </div>
 {{< /example >}}
 
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index bfb1e03bb1..01d075ab80 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -860,6 +860,323 @@ sitemap_exclude: true
   <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled data-bs-theme="light">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled data-bs-theme="light"><span class="visually-hidden">Toggle Dropdown</span></button></div>
 </div>
 
+### Card
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="row row-cols-1 row-cols-xl-3 border border-tertiary p-3">
+  <div class="col">
+    <div class="card">
+      <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
+        <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+          <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+        </svg>
+      </svg>
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text fw-bold mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        <a href="#" class="btn btn-primary">Go somewhere</a>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card">
+      <div class="row g-0">
+        <div class="col-md-4">
+          <svg class="bd-placeholder-img card-img-top" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
+            <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+              <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+            </svg>
+          </svg>
+        </div>
+        <div class="col-md-8">
+          <div class="card-body">
+            <h5 class="card-title">Card title</h5>
+            <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+            <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card">
+      <div class="card-header">
+        Featured
+      </div>
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <h6 class="card-subtitle">Card subtitle</h6>
+        <p class="card-text fw-bold">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+      <ul class="list-group list-group-flush">
+        <li class="list-group-item">An item</li>
+        <li class="list-group-item">A second item</li>
+        <li class="list-group-item">A third item</li>
+      </ul>
+      <div class="card-body">
+        <a href="#" class="card-link">Card link</a>
+        <a href="#" class="card-link">Another link</a>
+      </div>
+      <div class="card-footer">
+        Featured
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="row row-cols-1 row-cols-xl-3 border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="col">
+    <div class="card">
+      <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
+        <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+          <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+        </svg>
+      </svg>
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text fw-bold mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        <a href="#" class="btn btn-primary">Go somewhere</a>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card">
+      <div class="row g-0">
+        <div class="col-md-4">
+          <svg class="bd-placeholder-img card-img-top" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
+            <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+              <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+            </svg>
+          </svg>
+        </div>
+        <div class="col-md-8">
+          <div class="card-body">
+            <h5 class="card-title">Card title</h5>
+            <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+            <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card">
+      <div class="card-header">
+        Featured
+      </div>
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <h6 class="card-subtitle">Card subtitle</h6>
+        <p class="card-text fw-bold">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+      <ul class="list-group list-group-flush">
+        <li class="list-group-item">An item</li>
+        <li class="list-group-item">A second item</li>
+        <li class="list-group-item">A third item</li>
+      </ul>
+      <div class="card-body">
+        <a href="#" class="card-link">Card link</a>
+        <a href="#" class="card-link">Another link</a>
+      </div>
+      <div class="card-footer">
+        Featured
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="row row-cols-1 row-cols-xl-3 border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="col">
+    <div class="card">
+      <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
+        <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+          <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+        </svg>
+      </svg>
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text fw-bold mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        <a href="#" class="btn btn-primary">Go somewhere</a>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card">
+      <div class="row g-0">
+        <div class="col-md-4">
+          <svg class="bd-placeholder-img card-img-top" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
+            <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+              <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+            </svg>
+          </svg>
+        </div>
+        <div class="col-md-8">
+          <div class="card-body">
+            <h5 class="card-title">Card title</h5>
+            <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+            <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card">
+      <div class="card-header">
+        Featured
+      </div>
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <h6 class="card-subtitle">Card subtitle</h6>
+        <p class="card-text fw-bold">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+      <ul class="list-group list-group-flush">
+        <li class="list-group-item">An item</li>
+        <li class="list-group-item">A second item</li>
+        <li class="list-group-item">A third item</li>
+      </ul>
+      <div class="card-body">
+        <a href="#" class="card-link">Card link</a>
+        <a href="#" class="card-link">Another link</a>
+      </div>
+      <div class="card-footer">
+        Featured
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="row row-cols-1 row-cols-xl-3 border border-tertiary p-3" style="background-color: #282d55;">
+  <div class="col">
+    <div class="card" data-bs-theme="dark">
+      <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
+        <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+          <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+        </svg>
+      </svg>
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text fw-bold mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        <a href="#" class="btn btn-primary">Go somewhere</a>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card" data-bs-theme="dark">
+      <div class="row g-0">
+        <div class="col-md-4">
+          <svg class="bd-placeholder-img card-img-top" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
+            <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+              <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+            </svg>
+          </svg>
+        </div>
+        <div class="col-md-8">
+          <div class="card-body">
+            <h5 class="card-title">Card title</h5>
+            <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+            <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card" data-bs-theme="dark">
+      <div class="card-header">
+        Featured
+      </div>
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <h6 class="card-subtitle">Card subtitle</h6>
+        <p class="card-text fw-bold">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+      <ul class="list-group list-group-flush">
+        <li class="list-group-item">An item</li>
+        <li class="list-group-item">A second item</li>
+        <li class="list-group-item">A third item</li>
+      </ul>
+      <div class="card-body">
+        <a href="#" class="card-link">Card link</a>
+        <a href="#" class="card-link">Another link</a>
+      </div>
+      <div class="card-footer">
+        Featured
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="row row-cols-1 row-cols-xl-3 border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="col">
+    <div class="card" data-bs-theme="light">
+      <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
+        <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+          <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+        </svg>
+      </svg>
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text fw-bold mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        <a href="#" class="btn btn-primary">Go somewhere</a>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card" data-bs-theme="light">
+      <div class="row g-0">
+        <div class="col-md-4">
+          <svg class="bd-placeholder-img card-img-top" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
+            <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+              <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+            </svg>
+          </svg>
+        </div>
+        <div class="col-md-8">
+          <div class="card-body">
+            <h5 class="card-title">Card title</h5>
+            <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+            <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card" data-bs-theme="light">
+      <div class="card-header">
+        Featured
+      </div>
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <h6 class="card-subtitle">Card subtitle</h6>
+        <p class="card-text fw-bold">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+      <ul class="list-group list-group-flush">
+        <li class="list-group-item">An item</li>
+        <li class="list-group-item">A second item</li>
+        <li class="list-group-item">A third item</li>
+      </ul>
+      <div class="card-body">
+        <a href="#" class="card-link">Card link</a>
+        <a href="#" class="card-link">Another link</a>
+      </div>
+      <div class="card-footer">
+        Featured
+      </div>
+    </div>
+  </div>
+</div>
+
 ### Carousel
 
 <h4 class="mt-3">No theme</h4>
@@ -1523,7 +1840,7 @@ sitemap_exclude: true
     <div class="modal-dialog modal-dialog-scrollable">
       <div class="modal-content">
         <svg class="modal-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-secondary-color)">
+          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
             <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
           </svg>
         </svg>
@@ -1554,7 +1871,7 @@ sitemap_exclude: true
     <div class="modal-dialog modal-dialog-scrollable">
       <div class="modal-content">
         <svg class="modal-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-secondary-color)">
+          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
             <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
           </svg>
         </svg>
@@ -1585,7 +1902,7 @@ sitemap_exclude: true
     <div class="modal-dialog modal-dialog-scrollable">
       <div class="modal-content">
         <svg class="modal-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-secondary-color)">
+          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
             <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
           </svg>
         </svg>
@@ -1616,7 +1933,7 @@ sitemap_exclude: true
     <div class="modal-dialog modal-dialog-scrollable">
       <div class="modal-content">
         <svg class="modal-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-secondary-color)">
+          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
             <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
           </svg>
         </svg>
@@ -1647,7 +1964,7 @@ sitemap_exclude: true
     <div class="modal-dialog modal-dialog-scrollable">
       <div class="modal-content">
         <svg class="modal-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-secondary-color)">
+          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
             <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
           </svg>
         </svg>
diff --git a/site/content/docs/5.3/examples/cards-rtl/index.html b/site/content/docs/5.3/examples/cards-rtl/index.html
index 3e68338c0a..3383f5f981 100644
--- a/site/content/docs/5.3/examples/cards-rtl/index.html
+++ b/site/content/docs/5.3/examples/cards-rtl/index.html
@@ -20,185 +20,55 @@ <h1 class="visually-hidden">أمثلة على البطاقة</h1>
   </svg>
 
   <div class="container-xxl pt-5">
-    <div class="row mx-0">
-     <h2>بطاقات ممتلئة باللون الأسود</h2>
-    </div>
     <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
       <div class="col">
-        {{< card rtl=true >}}
+        {{< card rtl=true borders=true >}}
       </div>
 
       <div class="col">
-        {{< card rtl=true metadata=true >}}
+        {{< card rtl=true borders=true metadata=true >}}
       </div>
 
       <div class="col">
-        {{< card rtl=true caption=true >}}
+        {{< card rtl=true borders=true caption=true >}}
       </div>
 
       <div class="col">
-        {{< card rtl=true caption=true metadata="true" >}}
+        {{< card rtl=true borders=true caption=true metadata=true >}}
       </div>
 
       <div class="col">
-        {{< card rtl=true caption=true buttons="true" >}}
+        {{< card rtl=true borders=true caption=true buttons=true >}}
       </div>
 
       <div class="col">
-        {{< card rtl=true caption=true action="true" >}}
+        {{< card rtl=true borders=true caption=true action=true >}}
       </div>
     </div>
 
-
-    <div class="row mx-0 mt-4">
-      <h2>بطاقات موضحة باللون الأبيض</h2>
-    </div>
     <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
       <div class="col">
-        {{< card rtl=true borders=true background="body" >}}
-      </div>
-
-      <div class="col">
-        {{< card rtl=true borders=true background="body" metadata=true >}}
-      </div>
-
-      <div class="col">
-        {{< card rtl=true borders=true background="body" caption=true >}}
+        {{< card rtl=true open=true >}}
       </div>
 
       <div class="col">
-        {{< card rtl=true borders=true background="body" caption=true metadata=true >}}
+        {{< card rtl=true open=true metadata=true >}}
       </div>
 
       <div class="col">
-        {{< card rtl=true borders=true background="body" caption=true buttons=true >}}
+        {{< card rtl=true open=true caption=true >}}
       </div>
 
       <div class="col">
-        {{< card rtl=true borders=true background="body" caption=true action=true >}}
+        {{< card rtl=true open=true caption=true metadata=true >}}
       </div>
-    </div>
-
 
-    <div class="row mx-0 mt-4">
-      <h2>بطاقات بيضاء</h2>
-    </div>
-    <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
       <div class="col">
-        {{< card rtl=true background="body" open=true >}}
+        {{< card rtl=true open=true caption=true buttons=true >}}
       </div>
 
       <div class="col">
-        {{< card rtl=true background="body" open=true metadata=true >}}
-      </div>
-
-      <div class="col">
-        {{< card rtl=true background="body" open=true caption=true >}}
-      </div>
-
-      <div class="col">
-        {{< card rtl=true background="body" open=true caption=true metadata=true >}}
-      </div>
-
-      <div class="col">
-        {{< card rtl=true background="body" open=true caption=true buttons=true >}}
-      </div>
-
-      <div class="col">
-        {{< card rtl=true background="body" open=true caption=true action=true >}}
-      </div>
-    </div>
-  </div>
-
-  <div class="bg-dark pt-5">
-    <div class="container-xxl">
-      <div class="row mx-0 mt-4">
-        <h2>بطاقات مملوءة باللون الأبيض</h2>
-      </div>
-      <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
-        <div class="col">
-          {{< card rtl=true background="body" >}}
-        </div>
-
-        <div class="col">
-          {{< card rtl=true background="body" metadata=true >}}
-        </div>
-
-        <div class="col">
-          {{< card rtl=true background="body" caption=true >}}
-        </div>
-
-        <div class="col">
-          {{< card rtl=true background="body" caption=true metadata=true >}}
-        </div>
-
-        <div class="col">
-          {{< card rtl=true background="body" caption=true buttons=true >}}
-        </div>
-
-        <div class="col">
-          {{< card rtl=true background="body" caption=true action=true >}}
-        </div>
-      </div>
-
-
-      <div class="row mx-0 mt-4">
-        <h2>بطاقات موضحة باللون الأسود</h2>
-      </div>
-      <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
-        <div class="col">
-          {{< card rtl=true borders=true >}}
-        </div>
-
-        <div class="col">
-          {{< card rtl=true borders=true metadata=true >}}
-        </div>
-
-        <div class="col">
-          {{< card rtl=true borders=true caption=true >}}
-        </div>
-
-        <div class="col">
-          {{< card rtl=true borders=true caption=true metadata=true >}}
-        </div>
-
-        <div class="col">
-          {{< card rtl=true borders=true caption=true buttons=true >}}
-        </div>
-
-        <div class="col">
-          {{< card rtl=true borders=true caption=true action=true >}}
-        </div>
-      </div>
-
-
-      <div class="row mx-0 mt-4">
-        <h2>بطاقات على الأسود</h2>
-      </div>
-      <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
-        <div class="col">
-          {{< card rtl=true open=true >}}
-        </div>
-
-        <div class="col">
-          {{< card rtl=true open=true metadata=true >}}
-        </div>
-
-        <div class="col">
-          {{< card rtl=true open=true caption=true >}}
-        </div>
-
-        <div class="col">
-          {{< card rtl=true open=true caption=true metadata=true >}}
-        </div>
-
-        <div class="col">
-          {{< card rtl=true open=true caption=true buttons=true >}}
-        </div>
-
-        <div class="col">
-          {{< card rtl=true open=true caption=true action=true >}}
-        </div>
+        {{< card rtl=true open=true caption=true action=true >}}
       </div>
     </div>
   </div>
diff --git a/site/content/docs/5.3/examples/cards/index.html b/site/content/docs/5.3/examples/cards/index.html
index bf21db5737..833282ea6c 100644
--- a/site/content/docs/5.3/examples/cards/index.html
+++ b/site/content/docs/5.3/examples/cards/index.html
@@ -19,185 +19,55 @@ <h1 class="visually-hidden">Card examples</h1>
   </svg>
 
   <div class="container-xxl pt-5">
-    <div class="row mx-0">
-     <h2>Cards filled black</h2>
-    </div>
     <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
       <div class="col">
-        {{< card >}}
+        {{< card borders=true >}}
       </div>
 
       <div class="col">
-        {{< card metadata=true >}}
+        {{< card borders=true metadata=true >}}
       </div>
 
       <div class="col">
-        {{< card caption=true >}}
+        {{< card borders=true caption=true >}}
       </div>
 
       <div class="col">
-        {{< card caption=true metadata=true >}}
+        {{< card borders=true caption=true metadata=true >}}
       </div>
 
       <div class="col">
-        {{< card caption=true buttons=true >}}
+        {{< card borders=true caption=true buttons=true >}}
       </div>
 
       <div class="col">
-        {{< card caption=true action=true >}}
+        {{< card borders=true caption=true action=true >}}
       </div>
     </div>
 
-
-    <div class="row mx-0 mt-4">
-      <h2>Cards outlined on white</h2>
-    </div>
     <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
       <div class="col">
-        {{< card borders=true background="body" >}}
-      </div>
-
-      <div class="col">
-        {{< card borders=true background="body" metadata=true >}}
-      </div>
-
-      <div class="col">
-        {{< card borders=true background="body" caption=true >}}
+        {{< card open=true >}}
       </div>
 
       <div class="col">
-        {{< card borders=true background="body" caption=true metadata=true >}}
+        {{< card open=true metadata=true >}}
       </div>
 
       <div class="col">
-        {{< card borders=true background="body" caption=true buttons=true >}}
+        {{< card open=true caption=true >}}
       </div>
 
       <div class="col">
-        {{< card borders=true background="body" caption=true action=true >}}
+        {{< card open=true caption=true metadata=true >}}
       </div>
-    </div>
-
 
-    <div class="row mx-0 mt-4">
-      <h2>Cards on white</h2>
-    </div>
-    <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
       <div class="col">
-        {{< card background="body" open=true >}}
+        {{< card open=true caption=true buttons=true >}}
       </div>
 
       <div class="col">
-        {{< card background="body" open=true metadata=true >}}
-      </div>
-
-      <div class="col">
-        {{< card background="body" open=true caption=true >}}
-      </div>
-
-      <div class="col">
-        {{< card background="body" open=true caption=true metadata=true >}}
-      </div>
-
-      <div class="col">
-        {{< card background="body" open=true caption=true buttons=true >}}
-      </div>
-
-      <div class="col">
-        {{< card background="body" open=true caption=true action=true >}}
-      </div>
-    </div>
-  </div>
-
-  <div class="bg-dark pt-5">
-    <div class="container-xxl">
-      <div class="row mx-0 mt-4">
-        <h2>Cards filled white</h2>
-      </div>
-      <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
-        <div class="col">
-          {{< card background="body" >}}
-        </div>
-
-        <div class="col">
-          {{< card background="body" metadata=true >}}
-        </div>
-
-        <div class="col">
-          {{< card background="body" caption=true >}}
-        </div>
-
-        <div class="col">
-          {{< card background="body" caption=true metadata=true >}}
-        </div>
-
-        <div class="col">
-          {{< card background="body" caption=true buttons=true >}}
-        </div>
-
-        <div class="col">
-          {{< card background="body" caption=true action=true >}}
-        </div>
-      </div>
-
-
-      <div class="row mx-0 mt-4">
-        <h2>Cards outlined on black</h2>
-      </div>
-      <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
-        <div class="col">
-          {{< card borders=true >}}
-        </div>
-
-        <div class="col">
-          {{< card borders=true metadata=true >}}
-        </div>
-
-        <div class="col">
-          {{< card borders=true caption=true >}}
-        </div>
-
-        <div class="col">
-          {{< card borders=true caption=true metadata=true >}}
-        </div>
-
-        <div class="col">
-          {{< card borders=true caption=true buttons=true >}}
-        </div>
-
-        <div class="col">
-          {{< card borders=true caption=true action=true >}}
-        </div>
-      </div>
-
-
-      <div class="row mx-0 mt-4">
-        <h2>Cards on black</h2>
-      </div>
-      <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
-        <div class="col">
-          {{< card open=true >}}
-        </div>
-
-        <div class="col">
-          {{< card open=true metadata=true >}}
-        </div>
-
-        <div class="col">
-          {{< card open=true caption=true >}}
-        </div>
-
-        <div class="col">
-          {{< card open=true caption=true metadata=true >}}
-        </div>
-
-        <div class="col">
-          {{< card open=true caption=true buttons=true >}}
-        </div>
-
-        <div class="col">
-          {{< card open=true caption=true action=true >}}
-        </div>
+        {{< card open=true caption=true action=true >}}
       </div>
     </div>
   </div>
diff --git a/site/content/docs/5.3/examples/masonry/index.html b/site/content/docs/5.3/examples/masonry/index.html
index de4f7cc098..8d4e5d393c 100644
--- a/site/content/docs/5.3/examples/masonry/index.html
+++ b/site/content/docs/5.3/examples/masonry/index.html
@@ -79,7 +79,7 @@ <h5 class="card-title">Card title</h5>
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">
       <div class="card">
-        {{< placeholder width="100%" height="260" class="card-img" text="Card image" >}}
+        {{< placeholder width="100%" height="260" class="card-img" text="Card image" color="#999" >}}
       </div>
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">
diff --git a/site/content/docs/5.3/layout/columns.md b/site/content/docs/5.3/layout/columns.md
index 8eb1151ad5..6b76e1a726 100644
--- a/site/content/docs/5.3/layout/columns.md
+++ b/site/content/docs/5.3/layout/columns.md
@@ -319,7 +319,7 @@ The classes can be used together with utilities to create responsive floated ima
 
 {{< example >}}
 <div class="clearfix">
-  {{< placeholder width="100%" height="210" class="col-md-6 float-md-end mb-3 ms-md-3" text="Responsive floated image" >}}
+  {{< placeholder width="100%" height="210" class="col-md-6 float-md-end mb-3 ms-md-3" text="Responsive floated image" color="#999" >}}
 
   <p>
     A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
diff --git a/site/content/docs/5.3/utilities/borders.md b/site/content/docs/5.3/utilities/borders.md
index 8c7afff098..8d874ce442 100644
--- a/site/content/docs/5.3/utilities/borders.md
+++ b/site/content/docs/5.3/utilities/borders.md
@@ -151,13 +151,13 @@ These border variants with **a radius CSS class different than `.rounded-circle`
 {{< /design-callout-alert >}}
 
 {{< example >}}
-{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
-{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
+{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" color="#999" >}}
+{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" color="#999" >}}
+{{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" color="#999" >}}
+{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" color="#999" >}}
+{{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" color="#999" >}}
+{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" color="#999" >}}
+{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" color="#999" >}}
 {{< /example >}}
 
 ### Sizes
@@ -171,20 +171,20 @@ These border variants with **a size CSS class different than `.rounded-0`** shou
 {{< /design-callout-alert >}}
 
 {{< example class="bd-example-rounded-utils" >}}
-{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" color="#999" >}}
+{{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" color="#999" >}}
+{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" color="#999" >}}
+{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" color="#999" >}}
+{{< placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" color="#999" >}}
+{{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" color="#999" >}}
 {{< /example >}}
 
 {{< example class="bd-example-rounded-utils" >}}
-{{< placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" >}}
-{{< placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" >}}
-{{< placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" color="#999" >}}
+{{< placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" color="#999" >}}
+{{< placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" color="#999" >}}
+{{< placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" color="#999" >}}
+{{< placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" color="#999" >}}
 {{< /example >}}
 
 ## Dividers
diff --git a/site/content/docs/5.3/utilities/object-fit.md b/site/content/docs/5.3/utilities/object-fit.md
index 2cece77df0..b306f5e209 100644
--- a/site/content/docs/5.3/utilities/object-fit.md
+++ b/site/content/docs/5.3/utilities/object-fit.md
@@ -25,11 +25,11 @@ Classes for the value of `object-fit` are named using the format `.object-fit-{v
 Add the `object-fit-{value}` class to the [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element):
 
 {{< example class="d-flex overflow-auto" >}}
-{{< placeholder width="140" height="120" class="object-fit-contain border" text="Object fit contain" markup="img" color="#666" background="#ddd" >}}
-{{< placeholder width="140" height="120" class="object-fit-cover border" text="Object fit cover" markup="img" color="666" background="#ddd" >}}
-{{< placeholder width="140" height="120" class="object-fit-fill border" text="Object fit fill" markup="img" color="666" background="#ddd" >}}
-{{< placeholder width="140" height="120" class="object-fit-scale border" text="Object fit scale down" markup="img" color="666" background="#ddd" >}}
-{{< placeholder width="140" height="120" class="object-fit-none border" text="Object fit none" markup="img" color="666" background="#ddd" >}}
+{{< placeholder width="140" height="120" class="object-fit-contain border" text="Object fit contain" markup="img" color="#333" background="#bbb" >}}
+{{< placeholder width="140" height="120" class="object-fit-cover border" text="Object fit cover" markup="img" color="#333" background="#bbb" >}}
+{{< placeholder width="140" height="120" class="object-fit-fill border" text="Object fit fill" markup="img" color="#333" background="#bbb" >}}
+{{< placeholder width="140" height="120" class="object-fit-scale border" text="Object fit scale down" markup="img" color="#333" background="#bbb" >}}
+{{< placeholder width="140" height="120" class="object-fit-none border" text="Object fit none" markup="img" color="#333" background="#bbb" >}}
 {{< /example >}}
 
 ## Responsive
@@ -37,11 +37,11 @@ Add the `object-fit-{value}` class to the [replaced element](https://developer.m
 Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need.
 
 {{< example class="d-flex overflow-auto" >}}
-{{< placeholder width="140" height="80" class="object-fit-sm-contain border" text="Contain on sm" markup="img" color="666" background="#ddd" >}}
-{{< placeholder width="140" height="80" class="object-fit-md-contain border" text="Contain on md" markup="img" color="666" background="#ddd" >}}
-{{< placeholder width="140" height="80" class="object-fit-lg-contain border" text="Contain on lg" markup="img" color="666" background="#ddd" >}}
-{{< placeholder width="140" height="80" class="object-fit-xl-contain border" text="Contain on xl" markup="img" color="666" background="#ddd" >}}
-{{< placeholder width="140" height="80" class="object-fit-xxl-contain border" text="Contain on xxl" markup="img" color="666" background="#ddd" >}}
+{{< placeholder width="140" height="80" class="object-fit-sm-contain border" text="Contain on sm" markup="img" color="#333" background="#bbb" >}}
+{{< placeholder width="140" height="80" class="object-fit-md-contain border" text="Contain on md" markup="img" color="#333" background="#bbb" >}}
+{{< placeholder width="140" height="80" class="object-fit-lg-contain border" text="Contain on lg" markup="img" color="#333" background="#bbb" >}}
+{{< placeholder width="140" height="80" class="object-fit-xl-contain border" text="Contain on xl" markup="img" color="#333" background="#bbb" >}}
+{{< placeholder width="140" height="80" class="object-fit-xxl-contain border" text="Contain on xxl" markup="img" color="#333" background="#bbb" >}}
 {{< /example >}}
 
 ## Video
diff --git a/site/layouts/shortcodes/card.html b/site/layouts/shortcodes/card.html
index c95af1aedd..a2ebcec9d2 100644
--- a/site/layouts/shortcodes/card.html
+++ b/site/layouts/shortcodes/card.html
@@ -3,7 +3,6 @@
 
   `args` are all optional and can be one of the following:
     * action: Display action button - default = false
-    * background: Define the card background - default = "dark"
     * borders: Add some borders to the card - default = false
     * buttons: Display share and favorite buttons - default = false
     * caption: Display caption - default = false
@@ -13,7 +12,6 @@
 */ -}}
 
 {{- $action := .Get "action" | default false -}}
-{{- $background := .Get "background" | default "dark" -}}
 {{- $borders := .Get "borders" | default false -}}
 {{- $buttons := .Get "buttons" | default false -}}
 {{- $caption := .Get "caption" | default false -}}
@@ -21,20 +19,20 @@
 {{- $open := .Get "open" | default false -}}
 {{- $rtl := .Get "rtl" | default false -}}
 
-<div class="card{{ if eq $borders false }} border-0{{ end }}{{ if and $borders (eq $background "dark") }} border-dark{{ end }}">
+<div class="card{{ if eq $borders false }} border-0{{ end }}">
   <svg class="bd-placeholder-img card-img-top" width="100%" height="169" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="{{ if $rtl }}العنصر النائب: شرح الصورة{{ else }}Placeholder: Image caption{{ end }}" preserveAspectRatio="xMidYMid slice" focusable="false">
-    <rect width="100%" height="100%" fill="{{ (index $.Site.Data.grays 3).hex }}"/>
-    <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="#00000014" aria-hidden="true" focusable="false">
+    <rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
+    <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)" aria-hidden="true" focusable="false">
       <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
     </svg>
   </svg>
-  <div class="card-body text-{{ if eq $background "dark" }}white{{ else }}black{{ end }} bg-{{ $background }}{{ if $open }} px-0{{ end }}">
+  <div class="card-body{{ if $open }} px-0{{ end }}">
     <h3 class="card-title{{ if and $metadata (not $caption) }} mb-3{{ end }}">{{ if $rtl }}عنوان{{ else }}Title{{ end }}</h3>
     {{- if $caption -}}
     <p class="card-text fw-bold mb-{{ if or (or $metadata $buttons) $action }}4{{ else }}2{{ end }}">{{ if $rtl }}شرح{{ else }}Caption{{ end }}</p>
     {{- end -}}
     {{- if $metadata -}}
-    <p class="card-text fw-bold text-{{ if eq $background "dark" }}light{{ else }}muted{{ end }}">{{ if $rtl }}البيانات الوصفية{{ else }}Meta data{{ end }}</p>
+    <p class="card-text fw-bold text-body-secondary">{{ if $rtl }}البيانات الوصفية{{ else }}Meta data{{ end }}</p>
     {{- end -}}
     {{- if $buttons -}}
     <ul class="nav flex-row gap-3 lh-1">
diff --git a/site/layouts/shortcodes/placeholder.html b/site/layouts/shortcodes/placeholder.html
index a62878f7aa..41eb8a9a3b 100644
--- a/site/layouts/shortcodes/placeholder.html
+++ b/site/layouts/shortcodes/placeholder.html
@@ -5,16 +5,16 @@
     * title: Used in the SVG `title` tag - default: "Placeholder"
     * text: The text to show in the image - default: "width x height"
     * class: Class to add to the `svg` or `img` - default: "bd-placeholder-img"
-    * color: The text color (foreground) - default: "#dee2e6"
-    * background: The background color - default: "#868e96"
+    * color: The text color (foreground) - default: "var(--bs-border-color-translucent)"
+    * background: The background color - default: "var(--bs-secondary-bg)"
     * width: default: "100%"
     * height: default: "180px"
     * markup: If it should render `svg` or `img` tags - default: "svg"
 */ -}}
 
 {{- $grays := $.Site.Data.grays -}}
-{{- $default_color := (index $grays 5).hex -}} <!--Boosted mod: 5 instead of 2-->
-{{- $default_background := (index $grays 3).hex -}} <!--Boosted mod: 3 instead of 5-->
+{{- $default_color := "var(--bs-border-color-translucent)" -}} <!--Boosted mod: instead of `(index $grays 2).hex`-->
+{{- $default_background := "var(--bs-secondary-bg)" -}} <!--Boosted mod: instead of `(index $grays 5).hex`-->
 
 {{- $title := .Get "title" | default "Placeholder" -}}
 {{- $class := .Get "class" -}}
@@ -25,26 +25,28 @@
 {{- $text := .Get "text" | default (printf "%sx%s" $width $height) -}}
 
 {{- $show_title := not (eq $title "false") -}}
-{{- $show_text := not (or (eq $text "false") (eq $text "icon")) -}}
-{{- $show_icon := eq $text "icon" -}}
+{{- $show_text := not (or (eq $text "false") (eq $text "icon")) -}} <!--Boosted mod: handle "icon" text-->
+{{- $show_icon := eq $text "icon" -}} <!--Boosted mod-->
 
 {{- $markup := .Get "markup" | default "svg" -}}
 
 {{- if eq $markup "img" -}}
-  <img class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" alt="{{ $title }} : {{ $text }}" width="{{ $width }}" height="{{ $height }}" src="data:image/svg+xml,%3Csvg%20style='font-size:%201.125rem;%20font-family:system-ui,-apple-system,%22Segoe%20UI%22,Roboto,%22Helvetica%20Neue%22,%22Noto%20Sans%22,%22Liberation%20Sans%22,Arial,sans-serif,%22Apple%20Color%20Emoji%22,%22Segoe%20UI%20Emoji%22,%22Segoe%20UI%20Symbol%22,%22Noto%20Color%20Emoji%22;%20-webkit-user-select:%20none;%20-moz-user-select:%20none;%20user-select:%20none;%20text-anchor:%20middle;'%20width='200'%20height='200'%20xmlns='http://www.w3.org/2000/svg'%3E
+  <img class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" style="filter:var(--bs-icon-filter)" alt="{{ $title }} : {{ $text }}" width="{{ $width }}" height="{{ $height }}" src="data:image/svg+xml,%3Csvg%20style='font-size:%201.125rem;%20font-family:system-ui,-apple-system,%22Segoe%20UI%22,Roboto,%22Helvetica%20Neue%22,%22Noto%20Sans%22,%22Liberation%20Sans%22,Arial,sans-serif,%22Apple%20Color%20Emoji%22,%22Segoe%20UI%20Emoji%22,%22Segoe%20UI%20Symbol%22,%22Noto%20Color%20Emoji%22;%20-webkit-user-select:%20none;%20-moz-user-select:%20none;%20user-select:%20none;%20text-anchor:%20middle;'%20width='200'%20height='200'%20xmlns='http://www.w3.org/2000/svg'%3E
       {{- if $show_title }}%3Ctitle%3E{{ $title }}%3C/title%3E{{ end -}}
       %3Crect%20width='100%25'%20height='100%25'%20fill='{{ replace $background "#" "%23" }}'%3E%3C/rect%3E
       {{- if $show_text }}%3Ctext%20x='50%25'%20y='50%25'%20fill='{{ replace $color "#" "%23" }}'%20dy='.3em'%3E{{ $text }}%3C/text%3E{{ end -}}
-    %3C/svg%3E">
+    %3C/svg%3E"> <!-- Boosted mod: filter used to handle light/dark mode switch -->
 {{- else -}}
   <svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice" focusable="false">
     {{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
     <rect width="100%" height="100%" fill="{{ $background }}"/>
     {{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
+    <!-- Boosted mod -->
     {{- if $show_icon }}
-    <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="#{{ if eq $background "#000" }}ffffff30{{ else }}00000014{{ end }}">
+    <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="{{ if in $background "var(--" }}{{$color}}{{ else if eq $background "#000" }}#ffffff30{{ else }}#00000014{{ end }}">
       <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
     </svg>
     {{ end -}}
+    <!-- End mod -->
   </svg>
 {{- end -}}

From 58764c908f2b85197716e10e755cb836eb671ece Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Mon, 30 Oct 2023 08:54:52 +0100
Subject: [PATCH 15/71] Dark mode: Algolia search modal (#2338)

---
 site/assets/scss/_search.scss | 75 ++++++++++++++---------------------
 1 file changed, 30 insertions(+), 45 deletions(-)

diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
index 106902c6d4..15bb6cde2f 100644
--- a/site/assets/scss/_search.scss
+++ b/site/assets/scss/_search.scss
@@ -4,52 +4,32 @@
 
 :root {
   // All available CSS vars and specific modifications for Boosted
-  --docsearch-primary-color: #{$primary};
-  --docsearch-text-color: #{$black};
+  --docsearch-primary-color: var(--bs-link-hover-color);
+  --docsearch-text-color: var(--bs-body-color);
   // --docsearch-spacing
   // --docsearch-icon-stroke-width
   --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-muted-color: var(--bs-secondary-color);
-  // --docsearch-container-background
-  --docsearch-logo-color: #{$black};
+  --docsearch-muted-color: var(--bs-placeholder-color);
+  --docsearch-container-background: #{rgba($modal-backdrop-bg, $modal-backdrop-opacity)};
+  --docsearch-logo-color: var(--bs-body-color);
   // --docsearch-modal-width
   // --docsearch-modal-height
   --docsearch-modal-background: #{$modal-content-bg};
-  // --docsearch-modal-shadow;
+  --docsearch-modal-shadow: none;
   // --docsearch-searchbox-height;
   // --docsearch-searchbox-background;
-  // --docsearch-searchbox-focus-background;
+  --docsearch-searchbox-focus-background: transparent;
   --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-text-color);
   // --docsearch-hit-height;
-  --docsearch-hit-color: #{$gray-700};
-  // --docsearch-hit-active-color;
-  // --docsearch-hit-background;
+  --docsearch-hit-color: var(--bs-placeholder-color);
+  --docsearch-hit-active-color: var(--bs-highlight-color);
+  --docsearch-hit-background: transparent;
   // --docsearch-hit-shadow;
   --docsearch-key-gradient: null;
   --docsearch-key-shadow: null;
   // --docsearch-footer-height;
-  --docsearch-footer-background: #{$modal-footer-bg};
-  --docsearch-footer-shadow: 0 -1px #{$black};
-}
-
-@include color-mode(dark, true) {
-  // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
-  // in html[data-theme="dark"] selector
-  // and are slightly modified for formatting purpose
-  --docsearch-text-color: #f5f6f7;
-  --docsearch-container-background: rgba(9, 10, 17, .8);
-  --docsearch-modal-background: #15172a;
-  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
-  --docsearch-searchbox-background: #090a11;
-  --docsearch-searchbox-focus-background: #000;
-  --docsearch-hit-color: #bec3c9;
-  --docsearch-hit-shadow: none;
-  --docsearch-hit-background: #090a11;
-  --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
-  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
-  --docsearch-footer-background: #1e2136;
-  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
-  --docsearch-muted-color: #7f8497;
+  --docsearch-footer-background: transparent;
+  --docsearch-footer-shadow: 0 -1px var(--bs-border-color);
 }
 
 .bd-search {
@@ -69,13 +49,14 @@
 }
 
 .DocSearch-Modal {
+  border: var(--bs-border-width) solid var(--bs-border-color-translucent);
   @include border-radius(0, 0);
 }
 
 .DocSearch-Button {
-  --docsearch-searchbox-background: #{$black};
-  --docsearch-searchbox-focus-background: #{$black};
-  --docsearch-text-color: #{$white};
+  --docsearch-searchbox-background: var(--bs-highlight-color);
+  --docsearch-searchbox-focus-background: var(--bs-highlight-color);
+  --docsearch-text-color: var(--bs-highlight-bg);
 
   height: auto;
   padding: 0;
@@ -99,7 +80,7 @@
   }
 
   .DocSearch-Search-Icon {
-    color: $white;
+    color: var(--bs-body-color);
   }
 }
 
@@ -118,11 +99,11 @@
 }
 
 .DocSearch-Form {
-  box-shadow: $gray-500 0 0 0 .125rem inset;
+  box-shadow: var(--bs-border-color-translucent) 0 0 0 .125rem inset;
   @include border-radius(0, 0);
 
   &:focus-within {
-    box-shadow: $black 0 0 0 .125rem inset;
+    box-shadow: var(--bs-body-color) 0 0 0 .125rem inset;
   }
 }
 
@@ -150,7 +131,7 @@
 }
 
 .DocSearch-Commands-Key {
-  background-color: var(--bs-white);
+  background-color: var(--bs-highlight-color);
 }
 
 .DocSearch-Hits {
@@ -171,19 +152,19 @@
   }
 
   mark {
-    color: var(--bs-white);
-    background: var(--bs-black);
+    color: var(--bs-highlight-color);
+    background: var(--bs-highlight-bg);
   }
 
   &[aria-selected="true"] {
     a {
-      background-color: var(--bs-black);
+      background-color: var(--bs-highlight-bg);
     }
 
     mark {
-      --docsearch-hit-active-color: var(--bs-black);
+      --docsearch-hit-active-color: var(--bs-body-color);
       text-decoration: none;
-      background: var(--bs-white);
+      background: var(--bs-highlight-color);
     }
   }
 }
@@ -194,11 +175,15 @@
   &:hover,
   &:focus {
     background: transparent;
+
+    path {
+      fill: var(--bs-highlight-color);
+    }
   }
 }
 
 .DocSearch-Prefill {
-  color: $black;
+  color: var(--bs-body-color);
   text-decoration: underline;
   @include border-radius(0, 0);
 

From ba01403c06278a62c1117ae72b9a38eabd0c2aec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Mon, 30 Oct 2023 21:28:20 +0100
Subject: [PATCH 16/71] Fix bundlewatch values

---
 .bundlewatch.config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 947731de22..78760c6d53 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "41.0 kB"
+      "maxSize": "41.25 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

From 9aee957f0e220346a6746958d0e91d70b62e8834 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Tue, 31 Oct 2023 06:30:00 +0100
Subject: [PATCH 17/71] Dark mode: Offcanvas (#2348)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_variables.scss               |   4 +-
 site/content/docs/5.3/dark-mode.md | 147 +++++++++++++++++++++++++++++
 2 files changed, 149 insertions(+), 2 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 1a6a355697..31203ca8f3 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2229,8 +2229,8 @@ $offcanvas-transition-duration:     .3s !default;
 $offcanvas-border-color:            $modal-content-border-color !default;
 $offcanvas-border-width:            $modal-content-border-width !default;
 $offcanvas-title-line-height:       $modal-title-line-height !default;
-$offcanvas-bg-color:                var(--#{$prefix}body-bg) !default;
-$offcanvas-color:                   null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
+$offcanvas-bg-color:                $modal-content-bg !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
+$offcanvas-color:                   $modal-content-color !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $offcanvas-box-shadow:              none !default; // Boosted mod
 $offcanvas-backdrop-bg:             $modal-backdrop-bg !default;
 $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 01d075ab80..ed4916db7f 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -2380,6 +2380,153 @@ sitemap_exclude: true
   </div>
 </div>
 
+### Offcanvas
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample1" aria-controls="offcanvasExample1">
+    Button with data-bs-target
+  </button>
+  <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample1">
+    <div class="offcanvas-header">
+      <h5 class="offcanvas-title">Offcanvas</h5>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+    </div>
+    <div class="offcanvas-body">
+      <div>
+        Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
+      </div>
+      <div class="dropdown mt-3">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
+          Dropdown button
+        </button>
+        <ul class="dropdown-menu">
+          <li><a class="dropdown-item" href="#">Action</a></li>
+          <li><a class="dropdown-item" href="#">Another action</a></li>
+          <li><a class="dropdown-item" href="#">Something else here</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample2" aria-controls="offcanvasExample2">
+    Button with data-bs-target
+  </button>
+  <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample2">
+    <div class="offcanvas-header">
+      <h5 class="offcanvas-title">Offcanvas</h5>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+    </div>
+    <div class="offcanvas-body">
+      <div>
+        Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
+      </div>
+      <div class="dropdown mt-3">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
+          Dropdown button
+        </button>
+        <ul class="dropdown-menu">
+          <li><a class="dropdown-item" href="#">Action</a></li>
+          <li><a class="dropdown-item" href="#">Another action</a></li>
+          <li><a class="dropdown-item" href="#">Something else here</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample3" aria-controls="offcanvasExample3">
+    Button with data-bs-target
+  </button>
+  <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample3">
+    <div class="offcanvas-header">
+      <h5 class="offcanvas-title">Offcanvas</h5>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+    </div>
+    <div class="offcanvas-body">
+      <div>
+        Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
+      </div>
+      <div class="dropdown mt-3">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
+          Dropdown button
+        </button>
+        <ul class="dropdown-menu">
+          <li><a class="dropdown-item" href="#">Action</a></li>
+          <li><a class="dropdown-item" href="#">Another action</a></li>
+          <li><a class="dropdown-item" href="#">Something else here</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <button class="btn btn-primary" data-bs-theme="dark" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample4" aria-controls="offcanvasExample4">
+    Button with data-bs-target
+  </button>
+  <div class="offcanvas offcanvas-start" data-bs-theme="dark" tabindex="-1" id="offcanvasExample4">
+    <div class="offcanvas-header">
+      <h5 class="offcanvas-title">Offcanvas</h5>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+    </div>
+    <div class="offcanvas-body">
+      <div>
+        Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
+      </div>
+      <div class="dropdown mt-3">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
+          Dropdown button
+        </button>
+        <ul class="dropdown-menu">
+          <li><a class="dropdown-item" href="#">Action</a></li>
+          <li><a class="dropdown-item" href="#">Another action</a></li>
+          <li><a class="dropdown-item" href="#">Something else here</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <button class="btn btn-primary" data-bs-theme="light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample5" aria-controls="offcanvasExample5">
+    Button with data-bs-target
+  </button>
+  <div class="offcanvas offcanvas-start" data-bs-theme="light" tabindex="-1" id="offcanvasExample5">
+    <div class="offcanvas-header">
+      <h5 class="offcanvas-title">Offcanvas</h5>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+    </div>
+    <div class="offcanvas-body">
+      <div>
+        Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
+      </div>
+      <div class="dropdown mt-3">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
+          Dropdown button
+        </button>
+        <ul class="dropdown-menu">
+          <li><a class="dropdown-item" href="#">Action</a></li>
+          <li><a class="dropdown-item" href="#">Another action</a></li>
+          <li><a class="dropdown-item" href="#">Something else here</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
 ### Pagination
 
 <h4 class="mt-3">No theme</h4>

From ee02130f5b40c46b85508a205ab176b36e9745ce Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Tue, 31 Oct 2023 09:32:15 +0100
Subject: [PATCH 18/71] Dark mode: Progress bars (#2326)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_variables.scss                         |   6 +-
 site/content/docs/5.3/components/progress.md |   4 +-
 site/content/docs/5.3/dark-mode.md           | 327 +++++++++++++++++++
 3 files changed, 332 insertions(+), 5 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 31203ca8f3..bf9506da2c 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1981,13 +1981,13 @@ $alert-dismissible-padding-r:       $alert-padding-y * 3 !default; // 3x covers
 // scss-docs-start progress-variables
 $progress-height:                   $spacer !default;
 $progress-font-size:                $font-size-base !default;
-$progress-bg:                       var(--#{$prefix}secondary-bg) !default;
+$progress-bg:                       var(--#{$prefix}active-bg) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
 $progress-border-radius:            var(--#{$prefix}border-radius) !default;
 $progress-box-shadow:               var(--#{$prefix}box-shadow-inset) !default;
-$progress-bar-color:                $black !default;
+$progress-bar-color:                var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `$white`
 $progress-bar-font-weight:          $font-weight-bold !default; // Boosted mod
 $progress-bar-text-indent:          map-get($spacers, 2) !default; // Boosted mod
-$progress-bar-bg:                   $primary !default;
+$progress-bar-bg:                   var(--#{$prefix}link-hover-color) !default; // Boosted mod: instead of `$primary`
 $progress-bar-animation-timing:     1s linear infinite !default;
 $progress-bar-transition:           width .6s ease !default;
 
diff --git a/site/content/docs/5.3/components/progress.md b/site/content/docs/5.3/components/progress.md
index c32e3e75bc..f63d554397 100644
--- a/site/content/docs/5.3/components/progress.md
+++ b/site/content/docs/5.3/components/progress.md
@@ -142,13 +142,13 @@ If you're adding labels to progress bars with a custom background color, make su
   <div class="progress-bar bg-success" style="width: 25%">25%</div>
 </div>
 <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
-  <div class="progress-bar bg-info text-dark" style="width: 50%">50%</div>
+  <div class="progress-bar bg-info" style="width: 50%">50%</div>
 </div>
 <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
 </div>
 <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-  <div class="progress-bar text-white bg-danger" style="width: 100%">100%</div>
+  <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
 </div>
 {{< /example >}}
 
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index ed4916db7f..f116c13bcf 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -4366,3 +4366,330 @@ sitemap_exclude: true
   <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
   <div class="input-group quantity-selector w-100" data-bs-theme="light"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
 </div>
+
+### Progress
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3">
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar" style="width: 30%">30%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-primary" style="width: 30%">30% (.bg-primary)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success" style="width: 25%">25%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-success" style="width: 25%">25% (.text-bg-success)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-info" style="width: 50%">50% (.text-bg-info)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-warning" style="width: 75%">75% (.text-bg-warning)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-danger" style="width: 100%">100% (.text-bg-danger)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-warning overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-danger overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success" style="width: 40%"></div>
+  </div>
+  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar" style="width: 30%">30%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-primary" style="width: 30%">30% (.bg-primary)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success" style="width: 25%">25%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-success" style="width: 25%">25% (.text-bg-success)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-info" style="width: 50%">50% (.text-bg-info)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-warning" style="width: 75%">75% (.text-bg-warning)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-danger" style="width: 100%">100% (.text-bg-danger)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-warning overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-danger overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success" style="width: 40%"></div>
+  </div>
+  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar" style="width: 30%">30%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-primary" style="width: 30%">30% (.bg-primary)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success" style="width: 25%">25%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-success" style="width: 25%">25% (.text-bg-success)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-info" style="width: 50%">50% (.text-bg-info)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-warning" style="width: 75%">75% (.text-bg-warning)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-danger" style="width: 100%">100% (.text-bg-danger)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-warning overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-danger overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success" style="width: 40%"></div>
+  </div>
+  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #282d55;">
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar" style="width: 30%">30%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-primary" style="width: 30%">30% (.bg-primary)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-success" style="width: 25%">25%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar text-bg-success" style="width: 25%">25% (.text-bg-success)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar text-bg-info" style="width: 50%">50% (.text-bg-info)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar text-bg-warning" style="width: 75%">75% (.text-bg-warning)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar text-bg-danger" style="width: 100%">100% (.text-bg-danger)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-success overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-info overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-warning overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-danger overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-success" style="width: 40%"></div>
+  </div>
+  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar" style="width: 30%">30%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-primary" style="width: 30%">30% (.bg-primary)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-success" style="width: 25%">25%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar text-bg-success" style="width: 25%">25% (.text-bg-success)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar text-bg-info" style="width: 50%">50% (.text-bg-info)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar text-bg-warning" style="width: 75%">75% (.text-bg-warning)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar text-bg-danger" style="width: 100%">100% (.text-bg-danger)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-success overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-info overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-warning overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-danger overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-success" style="width: 40%"></div>
+  </div>
+  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
+  </div>
+</div>

From 55ce2062b9df511a2b35294ccc16c3e3e64ca587 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Tue, 31 Oct 2023 09:46:01 +0100
Subject: [PATCH 19/71] Move Progress to the right place

---
 site/content/docs/5.3/dark-mode.md | 866 ++++++++++++++---------------
 1 file changed, 433 insertions(+), 433 deletions(-)

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index f116c13bcf..264200deeb 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -2721,153 +2721,455 @@ sitemap_exclude: true
   <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-bs-theme="light">Click to toggle popover</button>
 </div>
 
-### Spinners
+### Progress
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
-  <div class="spinner-border" role="status">
-    <span class="visually-hidden">Loading...</span>
+<div class="d-flex flex-column gap-2 border border-tertiary p-3">
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar" style="width: 30%">30%</div>
   </div>
-  <div class="spinner-border text-primary" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-primary" style="width: 30%">30% (.bg-primary)</div>
   </div>
-  <div class="spinner-border text-body" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success" style="width: 25%">25%</div>
   </div>
-  <div class="spinner-grow" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
   </div>
-  <div class="spinner-grow text-primary" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
   </div>
-  <div class="spinner-grow text-body" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-success" style="width: 25%">25% (.text-bg-success)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-info" style="width: 50%">50% (.text-bg-info)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-warning" style="width: 75%">75% (.text-bg-warning)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-danger" style="width: 100%">100% (.text-bg-danger)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-warning overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-danger overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success" style="width: 40%"></div>
+  </div>
+  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
   </div>
 </div>
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
-  <div class="spinner-border" role="status">
-    <span class="visually-hidden">Loading...</span>
+<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar" style="width: 30%">30%</div>
   </div>
-  <div class="spinner-border text-primary" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-primary" style="width: 30%">30% (.bg-primary)</div>
   </div>
-  <div class="spinner-border text-body" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success" style="width: 25%">25%</div>
   </div>
-  <div class="spinner-grow" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
   </div>
-  <div class="spinner-grow text-primary" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
   </div>
-  <div class="spinner-grow text-body" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-success" style="width: 25%">25% (.text-bg-success)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-info" style="width: 50%">50% (.text-bg-info)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-warning" style="width: 75%">75% (.text-bg-warning)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-danger" style="width: 100%">100% (.text-bg-danger)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-warning overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-danger overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success" style="width: 40%"></div>
+  </div>
+  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
   </div>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
-  <div class="spinner-border" role="status">
-    <span class="visually-hidden">Loading...</span>
+<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar" style="width: 30%">30%</div>
   </div>
-  <div class="spinner-border text-primary" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-primary" style="width: 30%">30% (.bg-primary)</div>
   </div>
-  <div class="spinner-border text-body" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success" style="width: 25%">25%</div>
   </div>
-  <div class="spinner-grow" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
   </div>
-  <div class="spinner-grow text-primary" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
   </div>
-  <div class="spinner-grow text-body" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
   </div>
-</div>
-
-<h4 class="mt-3">Dark theme on component</h4>
-
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
-  <div class="spinner-border" role="status" data-bs-theme="dark">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
   </div>
-  <div class="spinner-border text-primary" role="status" data-bs-theme="dark">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-success" style="width: 25%">25% (.text-bg-success)</div>
   </div>
-  <div class="spinner-border text-body" role="status" data-bs-theme="dark">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-info" style="width: 50%">50% (.text-bg-info)</div>
   </div>
-  <div class="spinner-grow" role="status" data-bs-theme="dark">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-warning" style="width: 75%">75% (.text-bg-warning)</div>
   </div>
-  <div class="spinner-grow text-primary" role="status" data-bs-theme="dark">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar text-bg-danger" style="width: 100%">100% (.text-bg-danger)</div>
   </div>
-  <div class="spinner-grow text-body" role="status" data-bs-theme="dark">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Primary example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
   </div>
-</div>
-
-<h4 class="mt-3">Light theme on component</h4>
-
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
-  <div class="spinner-border" role="status" data-bs-theme="light">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Success example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
   </div>
-  <div class="spinner-border text-primary" role="status" data-bs-theme="light">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Info example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
   </div>
-  <div class="spinner-border text-body" role="status" data-bs-theme="light">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Warning example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-warning overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
   </div>
-  <div class="spinner-grow" role="status" data-bs-theme="light">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-danger overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
   </div>
-  <div class="spinner-grow text-primary" role="status" data-bs-theme="light">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success" style="width: 40%"></div>
   </div>
-  <div class="spinner-grow text-body" role="status" data-bs-theme="light">
-    <span class="visually-hidden">Loading...</span>
+  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
   </div>
 </div>
 
-### Stepped process
-
-<h4 class="mt-3">No theme</h4>
-
-<div class="border border-tertiary p-3">
-  <nav class="stepped-process" aria-label="Checkout process">
-    <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
-    <ol>
-      <li class="stepped-process-item">
-        <a class="stepped-process-link" href="#" title="1. Sign in">Sign in</a>
-      </li>
-      <li class="stepped-process-item active">
-        <a class="stepped-process-link" title="2. Review" aria-current="step">Review</a>
-      </li>
-      <li class="stepped-process-item">
-        <a class="stepped-process-link" href="#" title="3. Delivery">Delivery</a>
-      </li>
-      <li class="stepped-process-item">
-        <a class="stepped-process-link" href="#" title="4. Payment">Payment</a>
-      </li>
-      <li class="stepped-process-item">
-        <a class="stepped-process-link" href="#" title="5. Place order">Place order</a>
-      </li>
-    </ol>
-  </nav>
-</div>
+<h4 class="mt-3">Dark theme on component</h4>
 
-<h4 class="mt-3">Dark theme on container</h4>
+<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #282d55;">
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar" style="width: 30%">30%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-primary" style="width: 30%">30% (.bg-primary)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-success" style="width: 25%">25%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar text-bg-success" style="width: 25%">25% (.text-bg-success)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar text-bg-info" style="width: 50%">50% (.text-bg-info)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar text-bg-warning" style="width: 75%">75% (.text-bg-warning)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar text-bg-danger" style="width: 100%">100% (.text-bg-danger)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-success overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-info overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-warning overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-danger overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-success" style="width: 40%"></div>
+  </div>
+  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar" style="width: 30%">30%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-primary" style="width: 30%">30% (.bg-primary)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-success" style="width: 25%">25%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar text-bg-success" style="width: 25%">25% (.text-bg-success)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar text-bg-info" style="width: 50%">50% (.text-bg-info)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar text-bg-warning" style="width: 75%">75% (.text-bg-warning)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar text-bg-danger" style="width: 100%">100% (.text-bg-danger)</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Primary example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Success example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-success overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Info example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-info overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Warning example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-warning overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-danger overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-success" style="width: 40%"></div>
+  </div>
+  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
+  </div>
+</div>
+
+### Spinners
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <div class="spinner-border" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-primary" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-body" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-primary" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-body" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
 
 <div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="spinner-border" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-primary" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-body" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-primary" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-body" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="spinner-border" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-primary" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-body" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-primary" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-body" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <div class="spinner-border" role="status" data-bs-theme="dark">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-primary" role="status" data-bs-theme="dark">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-body" role="status" data-bs-theme="dark">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow" role="status" data-bs-theme="dark">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-primary" role="status" data-bs-theme="dark">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-body" role="status" data-bs-theme="dark">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="spinner-border" role="status" data-bs-theme="light">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-primary" role="status" data-bs-theme="light">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-border text-body" role="status" data-bs-theme="light">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow" role="status" data-bs-theme="light">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-primary" role="status" data-bs-theme="light">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div class="spinner-grow text-body" role="status" data-bs-theme="light">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+</div>
+
+### Stepped process
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
   <nav class="stepped-process" aria-label="Checkout process">
     <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
     <ol>
@@ -2890,9 +3192,9 @@ sitemap_exclude: true
   </nav>
 </div>
 
-<h4 class="mt-3">Light theme on container</h4>
+<h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
   <nav class="stepped-process" aria-label="Checkout process">
     <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
     <ol>
@@ -2915,10 +3217,35 @@ sitemap_exclude: true
   </nav>
 </div>
 
-<h4 class="mt-3">Dark theme on component</h4>
+<h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
-  <nav class="stepped-process" aria-label="Checkout process" data-bs-theme="dark" style="--bs-stepped-process-bg: #282d55;">
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <nav class="stepped-process" aria-label="Checkout process">
+    <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
+    <ol>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="1. Sign in">Sign in</a>
+      </li>
+      <li class="stepped-process-item active">
+        <a class="stepped-process-link" title="2. Review" aria-current="step">Review</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="3. Delivery">Delivery</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="4. Payment">Payment</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="5. Place order">Place order</a>
+      </li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <nav class="stepped-process" aria-label="Checkout process" data-bs-theme="dark" style="--bs-stepped-process-bg: #282d55;">
     <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
     <ol>
       <li class="stepped-process-item">
@@ -4366,330 +4693,3 @@ sitemap_exclude: true
   <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
   <div class="input-group quantity-selector w-100" data-bs-theme="light"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
 </div>
-
-### Progress
-
-<h4 class="mt-3">No theme</h4>
-
-<div class="d-flex flex-column gap-2 border border-tertiary p-3">
-  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar" style="width: 30%">30%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-primary" style="width: 30%">30% (.bg-primary)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-success" style="width: 25%">25%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-info" style="width: 50%">50%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar text-bg-success" style="width: 25%">25% (.text-bg-success)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar text-bg-info" style="width: 50%">50% (.text-bg-info)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar text-bg-warning" style="width: 75%">75% (.text-bg-warning)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar text-bg-danger" style="width: 100%">100% (.text-bg-danger)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Primary example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Success example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-success overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Info example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-info overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Warning example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-warning overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-danger overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-success" style="width: 40%"></div>
-  </div>
-  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-info" style="width: 50%">50%</div>
-  </div>
-  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
-  </div>
-  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
-  </div>
-</div>
-
-<h4 class="mt-3">Dark theme on container</h4>
-
-<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="dark">
-  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar" style="width: 30%">30%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-primary" style="width: 30%">30% (.bg-primary)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-success" style="width: 25%">25%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-info" style="width: 50%">50%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar text-bg-success" style="width: 25%">25% (.text-bg-success)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar text-bg-info" style="width: 50%">50% (.text-bg-info)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar text-bg-warning" style="width: 75%">75% (.text-bg-warning)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar text-bg-danger" style="width: 100%">100% (.text-bg-danger)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Primary example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Success example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-success overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Info example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-info overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Warning example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-warning overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-danger overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-success" style="width: 40%"></div>
-  </div>
-  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-info" style="width: 50%">50%</div>
-  </div>
-  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
-  </div>
-  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
-  </div>
-</div>
-
-<h4 class="mt-3">Light theme on container</h4>
-
-<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="light">
-  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar" style="width: 30%">30%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-primary" style="width: 30%">30% (.bg-primary)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-success" style="width: 25%">25%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-info" style="width: 50%">50%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar text-bg-success" style="width: 25%">25% (.text-bg-success)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar text-bg-info" style="width: 50%">50% (.text-bg-info)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar text-bg-warning" style="width: 75%">75% (.text-bg-warning)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar text-bg-danger" style="width: 100%">100% (.text-bg-danger)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Primary example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Success example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-success overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Info example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-info overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Warning example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-warning overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-danger overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-success" style="width: 40%"></div>
-  </div>
-  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-info" style="width: 50%">50%</div>
-  </div>
-  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
-  </div>
-  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
-  </div>
-</div>
-
-<h4 class="mt-3">Dark theme on component</h4>
-
-<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #282d55;">
-  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar" style="width: 30%">30%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar bg-primary" style="width: 30%">30% (.bg-primary)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar bg-success" style="width: 25%">25%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar bg-info" style="width: 50%">50%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar text-bg-success" style="width: 25%">25% (.text-bg-success)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar text-bg-info" style="width: 50%">50% (.text-bg-info)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar text-bg-warning" style="width: 75%">75% (.text-bg-warning)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar text-bg-danger" style="width: 100%">100% (.text-bg-danger)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Primary example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Success example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar bg-success overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Info example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar bg-info overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Warning example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar bg-warning overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar bg-danger overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar bg-success" style="width: 40%"></div>
-  </div>
-  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar bg-info" style="width: 50%">50%</div>
-  </div>
-  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
-  </div>
-  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
-  </div>
-</div>
-
-<h4 class="mt-3">Light theme on component</h4>
-
-<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #b5e8f7">
-  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar" style="width: 30%">30%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar bg-primary" style="width: 30%">30% (.bg-primary)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar bg-success" style="width: 25%">25%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar bg-info" style="width: 50%">50%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar text-bg-success" style="width: 25%">25% (.text-bg-success)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar text-bg-info" style="width: 50%">50% (.text-bg-info)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar text-bg-warning" style="width: 75%">75% (.text-bg-warning)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar text-bg-danger" style="width: 100%">100% (.text-bg-danger)</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Primary example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Success example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar bg-success overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Info example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar bg-info overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Warning example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar bg-warning overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar bg-danger overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-  </div>
-  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar bg-success" style="width: 40%"></div>
-  </div>
-  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar bg-info" style="width: 50%">50%</div>
-  </div>
-  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
-  </div>
-  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
-  </div>
-</div>

From d4a9de3fc1244a55915c8a9c26c703f4fd14da74 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Fri, 3 Nov 2023 12:35:39 +0100
Subject: [PATCH 20/71] Dark mode: Tooltips (#2352)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 site/content/docs/5.3/dark-mode.md | 52 ++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 264200deeb..717f2d3576 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -3616,6 +3616,58 @@ sitemap_exclude: true
   </ul>
 </div>
 
+### Tooltips
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3">
+  <div class="tooltip bs-tooltip-auto show position-relative" role="tooltip" data-popper-placement="right">
+    <div class="tooltip-arrow position-absolute " style="transform: translate(0px, 14px);"></div>
+    <div class="tooltip-inner">Tooltip</div>
+  </div>
+  <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="Tooltip title">Click to toggle tooltip</button>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="tooltip bs-tooltip-auto show position-relative" role="tooltip" data-popper-placement="right">
+    <div class="tooltip-arrow position-absolute " style="transform: translate(0px, 14px);"></div>
+    <div class="tooltip-inner">Tooltip</div>
+  </div>
+  <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="Tooltip title">Click to toggle tooltip</button>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="tooltip bs-tooltip-auto show position-relative" role="tooltip" data-popper-placement="right">
+    <div class="tooltip-arrow position-absolute " style="transform: translate(0px, 14px);"></div>
+    <div class="tooltip-inner">Tooltip</div>
+  </div>
+  <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="Tooltip title">Click to toggle tooltip</button>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3" style="background-color: #282d55;">
+  <div class="tooltip bs-tooltip-auto show position-relative" role="tooltip" data-popper-placement="right" data-bs-theme="dark">
+    <div class="tooltip-arrow position-absolute " style="transform: translate(0px, 14px);"></div>
+    <div class="tooltip-inner">Tooltip</div>
+  </div>
+  <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="Tooltip title" data-bs-theme="dark">Click to toggle tooltip</button>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="tooltip bs-tooltip-auto show position-relative" role="tooltip" data-popper-placement="right" data-bs-theme="light">
+    <div class="tooltip-arrow position-absolute " style="transform: translate(0px, 14px);"></div>
+    <div class="tooltip-inner">Tooltip</div>
+  </div>
+  <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="Tooltip title" data-bs-theme="light">Click to toggle tooltip</button>
+</div>
+
 ## Forms
 
 ### Color

From a7dfe63ae7aaa26a546639fb830cadbd1654f8de Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Fri, 3 Nov 2023 13:06:00 +0100
Subject: [PATCH 21/71] Dark mode: List group (#2321)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_variables.scss               |   6 +-
 site/content/docs/5.3/dark-mode.md | 177 +++++++++++++++++++++++++++++
 site/data/palette.yml              |  22 +---
 3 files changed, 181 insertions(+), 24 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index bf9506da2c..f204adab53 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2002,7 +2002,7 @@ $progress-height-xs:                $spacer * .25 !default;
 // scss-docs-start list-group-variables
 $list-group-font-weight:              $font-weight-bold !default; // Boosted mod
 $list-group-color:                    var(--#{$prefix}body-color) !default;
-$list-group-bg:                       var(--#{$prefix}body-bg) !default;
+$list-group-bg:                       transparent !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 $list-group-border-color:             var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 $list-group-border-width:             var(--#{$prefix}border-width) !default;
 $list-group-border-radius:            var(--#{$prefix}border-radius) !default;
@@ -2018,10 +2018,10 @@ $list-group-numbered-item-margin-end: 14px !default; // Boosted mod
 
 $list-group-hover-bg:                 var(--#{$prefix}secondary-bg) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
 $list-group-active-color:             var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `$component-active-color`
-$list-group-active-bg:                no-repeat linear-gradient(to right, var(--#{$prefix}link-hover-color) 4px, $gray-400 4px) !default; // Boosted mod: instead of `$component-active-bg`
+$list-group-active-bg:                no-repeat linear-gradient(to right, var(--#{$prefix}link-hover-color) 4px, var(--#{$prefix}active-bg) 4px) !default; // Boosted mod: instead of `$component-active-bg`
 $list-group-active-border-color:      $list-group-border-color !default; // Boosted mod: instead of `$list-group-active-bg`
 
-$list-group-disabled-color:           $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
+$list-group-disabled-color:           var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $list-group-disabled-bg:              $list-group-bg !default;
 
 $list-group-action-color:             var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 717f2d3576..b7da01dfce 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -1725,6 +1725,183 @@ sitemap_exclude: true
 </div>
 
 
+### List group
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3">
+  <ol class="list-group list-group-numbered">
+    <li class="list-group-item">A list item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+    <li class="list-group-item list-group-item-success">A simple success list group item</li>
+    <li class="list-group-item list-group-item-info">A simple info list group item</li>
+    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
+    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
+    <li class="list-group-item list-group-item-info disabled" aria-disabled="true">A simple disabled info list group item</li>
+  </ol>
+  <div class="list-group">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-success">A simple success list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info">A simple info list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-warning">A simple warning list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-danger">A simple danger list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info" disabled>A simple disabled info list group item</button>
+  </div>
+  <ul class="list-group list-group-horizontal-xxl">
+    <li class="list-group-item">An item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+  </ul>
+  <div class="list-group list-group-horizontal-xxl">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <ol class="list-group list-group-numbered">
+    <li class="list-group-item">A list item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+    <li class="list-group-item list-group-item-success">A simple success list group item</li>
+    <li class="list-group-item list-group-item-info">A simple info list group item</li>
+    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
+    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
+    <li class="list-group-item list-group-item-info disabled" aria-disabled="true">A simple disabled info list group item</li>
+  </ol>
+  <div class="list-group">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-success">A simple success list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info">A simple info list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-warning">A simple warning list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-danger">A simple danger list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info" disabled>A simple disabled info list group item</button>
+  </div>
+  <ul class="list-group list-group-horizontal-xxl">
+    <li class="list-group-item">An item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+  </ul>
+  <div class="list-group list-group-horizontal-xxl">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <ol class="list-group list-group-numbered">
+    <li class="list-group-item">A list item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+    <li class="list-group-item list-group-item-success">A simple success list group item</li>
+    <li class="list-group-item list-group-item-info">A simple info list group item</li>
+    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
+    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
+    <li class="list-group-item list-group-item-info disabled" aria-disabled="true">A simple disabled info list group item</li>
+  </ol>
+  <div class="list-group">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-success">A simple success list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info">A simple info list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-warning">A simple warning list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-danger">A simple danger list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info" disabled>A simple disabled info list group item</button>
+  </div>
+  <ul class="list-group list-group-horizontal-xxl">
+    <li class="list-group-item">An item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+  </ul>
+  <div class="list-group list-group-horizontal-xxl">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3" style="background-color: #282d55;">
+  <ol class="list-group list-group-numbered" data-bs-theme="dark">
+    <li class="list-group-item">A list item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+    <li class="list-group-item list-group-item-success">A simple success list group item</li>
+    <li class="list-group-item list-group-item-info">A simple info list group item</li>
+    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
+    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
+    <li class="list-group-item list-group-item-info disabled" aria-disabled="true">A simple disabled info list group item</li>
+  </ol>
+  <div class="list-group" data-bs-theme="dark">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-success">A simple success list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info">A simple info list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-warning">A simple warning list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-danger">A simple danger list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info" disabled>A simple disabled info list group item</button>
+  </div>
+  <ul class="list-group list-group-horizontal-xxl" data-bs-theme="dark">
+    <li class="list-group-item">An item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+  </ul>
+  <div class="list-group list-group-horizontal-xxl" data-bs-theme="dark">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3" style="background-color: #b5e8f7">
+  <ol class="list-group list-group-numbered" data-bs-theme="light">
+    <li class="list-group-item">A list item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+    <li class="list-group-item list-group-item-success">A simple success list group item</li>
+    <li class="list-group-item list-group-item-info">A simple info list group item</li>
+    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
+    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
+    <li class="list-group-item list-group-item-info disabled" aria-disabled="true">A simple disabled info list group item</li>
+  </ol>
+  <div class="list-group" data-bs-theme="light">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-success">A simple success list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info">A simple info list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-warning">A simple warning list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-danger">A simple danger list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info" disabled>A simple disabled info list group item</button>
+  </div>
+  <ul class="list-group list-group-horizontal-xxl" data-bs-theme="light">
+    <li class="list-group-item">An item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+  </ul>
+  <div class="list-group list-group-horizontal-xxl" data-bs-theme="light">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+  </div>
+</div>
+
 ### Local navigation
 
 <h4 class="mt-3">No theme</h4>
diff --git a/site/data/palette.yml b/site/data/palette.yml
index 05caf52cb2..ca6a921757 100644
--- a/site/data/palette.yml
+++ b/site/data/palette.yml
@@ -55,41 +55,21 @@
       level: success
       hex: "#228722"
       variable: $functional-green
-    - name: Green on dark
-      class: green
-      level: success
-      hex: "#32c832"
-      variable: $functional-green-dark
     - name: Blue
       class: blue
       level: info
       hex: "#4170d8"
       variable: $functional-blue
-    - name: Blue on dark
-      class: blue
-      level: info
-      hex: "#527edb"
-      variable: $functional-blue-dark
     - name: Yellow
-      class: yellow
-      level: warning
-      hex: "#8f7200"
-      variable: $functional-yellow
-    - name: Yellow on dark
       class: yellow
       level: warning
       hex: "#fc0"
-      variable: $functional-yellow-dark
+      variable: $functional-yellow
     - name: Red
       class: red
       level: danger
       hex: "#cd3c14"
       variable: $functional-red
-    - name: Red on dark
-      class: red
-      level: danger
-      hex: "#d53f15"
-      variable: $functional-red-dark
 - category: Grays
   name: "Grays"
   colors:

From 71bb1eb46c7a1927aa9d3484117aae00cca57f55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Fri, 3 Nov 2023 14:43:01 +0100
Subject: [PATCH 22/71] Fix QS after merge main

---
 site/content/docs/5.3/dark-mode.md | 40 +++++++++++++++---------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index b7da01dfce..a05d44cdfb 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -4276,7 +4276,7 @@ sitemap_exclude: true
 <h4 class="mt-3">No theme</h4>
 
 <div class="d-flex gap-2 border border-tertiary p-3">
-  <div class="input-group quantity-selector">
+  <div class="quantity-selector">
     <input type="number" id="inputQuantitySelector" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
       <span class="visually-hidden">Step down</span>
@@ -4285,7 +4285,7 @@ sitemap_exclude: true
       <span class="visually-hidden">Step up</span>
     </button>
   </div>
-  <div class="input-group quantity-selector">
+  <div class="quantity-selector">
     <input type="number" id="inputQuantitySelectorDisabled" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="down" disabled>
       <span class="visually-hidden">Step down</span>
@@ -4299,7 +4299,7 @@ sitemap_exclude: true
 <h4 class="mt-3">Dark theme on container</h4>
 
 <div class="d-flex gap-2 border border-tertiary p-3 bg-body" data-bs-theme="dark">
-  <div class="input-group quantity-selector">
+  <div class="quantity-selector">
     <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">
       <span class="visually-hidden">Step down</span>
@@ -4308,7 +4308,7 @@ sitemap_exclude: true
       <span class="visually-hidden">Step up</span>
     </button>
   </div>
-  <div class="input-group quantity-selector">
+  <div class="quantity-selector">
     <input type="number" id="inputQuantitySelectorDisabled1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled1" data-bs-step="down" disabled>
       <span class="visually-hidden">Step down</span>
@@ -4322,7 +4322,7 @@ sitemap_exclude: true
 <h4 class="mt-3">Light theme on container</h4>
 
 <div class="d-flex gap-2 border border-tertiary p-3 bg-body" data-bs-theme="light">
-  <div class="input-group quantity-selector">
+  <div class="quantity-selector">
     <input type="number" id="inputQuantitySelector2" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector2" data-bs-step="down">
       <span class="visually-hidden">Step down</span>
@@ -4331,7 +4331,7 @@ sitemap_exclude: true
       <span class="visually-hidden">Step up</span>
     </button>
   </div>
-  <div class="input-group quantity-selector">
+  <div class="quantity-selector">
     <input type="number" id="inputQuantitySelectorDisabled2" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled2" data-bs-step="down" disabled>
       <span class="visually-hidden">Step down</span>
@@ -4345,7 +4345,7 @@ sitemap_exclude: true
 <h4 class="mt-3">Dark theme on component</h4>
 
 <div class="d-flex gap-2 border border-tertiary p-3" style="background-color: #282d55;">
-  <div class="input-group quantity-selector" data-bs-theme="dark">
+  <div class="quantity-selector" data-bs-theme="dark">
     <input type="number" id="inputQuantitySelector3" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector3" data-bs-step="down">
       <span class="visually-hidden">Step down</span>
@@ -4354,7 +4354,7 @@ sitemap_exclude: true
       <span class="visually-hidden">Step up</span>
     </button>
   </div>
-  <div class="input-group quantity-selector" data-bs-theme="dark">
+  <div class="quantity-selector" data-bs-theme="dark">
     <input type="number" id="inputQuantitySelectorDisabled3" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled3" data-bs-step="down" disabled>
       <span class="visually-hidden">Step down</span>
@@ -4368,7 +4368,7 @@ sitemap_exclude: true
 <h4 class="mt-3">Light theme on component</h4>
 
 <div class="d-flex gap-2 border border-tertiary p-3" style="background-color: #b5e8f7">
-  <div class="input-group quantity-selector" data-bs-theme="light">
+  <div class="quantity-selector" data-bs-theme="light">
     <input type="number" id="inputQuantitySelector4" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector4" data-bs-step="down">
       <span class="visually-hidden">Step down</span>
@@ -4377,7 +4377,7 @@ sitemap_exclude: true
       <span class="visually-hidden">Step up</span>
     </button>
   </div>
-  <div class="input-group quantity-selector" data-bs-theme="light">
+  <div class="quantity-selector" data-bs-theme="light">
     <input type="number" id="inputQuantitySelectorDisabled4" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled4" data-bs-step="down" disabled>
       <span class="visually-hidden">Step down</span>
@@ -4819,7 +4819,7 @@ sitemap_exclude: true
   <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value="" checked></div>
   <div class="form-check"><input class="form-check-input is-valid" type="radio" value=""></div>
   <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" checked></div>
-  <div class="input-group quantity-selector"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
+  <div class="quantity-selector"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
   <div><input type="text" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
   <div><select class="form-select is-invalid"><option selected disabled value="">Choose...</option><option>...</option></select><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
   <div><input type="file" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
@@ -4828,7 +4828,7 @@ sitemap_exclude: true
   <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
   <div class="form-check"><input class="form-check-input is-invalid" type="radio" value=""><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
   <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
-  <div class="input-group quantity-selector w-100"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="quantity-selector w-100"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
 </div>
 
 <h4 class="mt-3">Dark theme on container</h4>
@@ -4842,7 +4842,7 @@ sitemap_exclude: true
   <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value="" checked></div>
   <div class="form-check"><input class="form-check-input is-valid" type="radio" value=""></div>
   <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" checked></div>
-  <div class="input-group quantity-selector"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
+  <div class="quantity-selector"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
   <div><input type="text" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
   <div><select class="form-select is-invalid"><option selected disabled value="">Choose...</option><option>...</option></select><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
   <div><input type="file" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
@@ -4851,7 +4851,7 @@ sitemap_exclude: true
   <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
   <div class="form-check"><input class="form-check-input is-invalid" type="radio" value=""><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
   <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
-  <div class="input-group quantity-selector w-100"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="quantity-selector w-100"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
@@ -4865,7 +4865,7 @@ sitemap_exclude: true
   <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value="" checked></div>
   <div class="form-check"><input class="form-check-input is-valid" type="radio" value=""></div>
   <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" checked></div>
-  <div class="input-group quantity-selector"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
+  <div class="quantity-selector"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
   <div><input type="text" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
   <div><select class="form-select is-invalid"><option selected disabled value="">Choose...</option><option>...</option></select><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
   <div><input type="file" class="form-control is-invalid"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
@@ -4874,7 +4874,7 @@ sitemap_exclude: true
   <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
   <div class="form-check"><input class="form-check-input is-invalid" type="radio" value=""><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
   <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
-  <div class="input-group quantity-selector w-100"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+  <div class="quantity-selector w-100"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
 </div>
 
 <h4 class="mt-3">Dark theme on component</h4>
@@ -4888,7 +4888,7 @@ sitemap_exclude: true
   <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value="" data-bs-theme="dark" checked></div>
   <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" data-bs-theme="dark"></div>
   <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" data-bs-theme="dark" checked></div>
-  <div class="input-group quantity-selector" data-bs-theme="dark"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
+  <div class="quantity-selector" data-bs-theme="dark"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
   <div><input type="text" class="form-control is-invalid" data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
   <div><select class="form-select is-invalid" data-bs-theme="dark"><option selected disabled value="">Choose...</option><option>...</option></select><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
   <div><input type="file" class="form-control is-invalid" data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
@@ -4897,7 +4897,7 @@ sitemap_exclude: true
   <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" checked data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
   <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
   <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked data-bs-theme="dark"><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
-  <div class="input-group quantity-selector w-100" data-bs-theme="dark"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
+  <div class="quantity-selector w-100" data-bs-theme="dark"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback" data-bs-theme="dark">Invalid feedback</p></div>
 </div>
 
 <h4 class="mt-3">Light theme on component</h4>
@@ -4911,7 +4911,7 @@ sitemap_exclude: true
   <div class="form-check"><input class="form-check-input is-valid" type="checkbox" value=""  data-bs-theme="light" checked></div>
   <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" data-bs-theme="light"></div>
   <div class="form-check"><input class="form-check-input is-valid" type="radio" value="" data-bs-theme="light" checked></div>
-  <div class="input-group quantity-selector" data-bs-theme="light"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
+  <div class="quantity-selector" data-bs-theme="light"><input type="number" class="form-control is-valid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button></div>
   <div><input type="text" class="form-control is-invalid" data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
   <div><select class="form-select is-invalid" data-bs-theme="light"><option selected disabled value="">Choose...</option><option>...</option></select><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
   <div><input type="file" class="form-control is-invalid" data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
@@ -4920,5 +4920,5 @@ sitemap_exclude: true
   <div class="form-check"><input class="form-check-input is-invalid" type="checkbox" value="" checked data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
   <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
   <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
-  <div class="input-group quantity-selector w-100" data-bs-theme="light"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
+  <div class="quantity-selector w-100" data-bs-theme="light"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
 </div>

From 0de3e285063afbfc4f883faf53e724a4d2661441 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Fri, 3 Nov 2023 14:49:46 +0100
Subject: [PATCH 23/71] Fix bundlewatch values

---
 .bundlewatch.config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 78760c6d53..265bc953de 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "44.25 kB"
+      "maxSize": "44.5 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",

From ebb9b94d684d651f2dc8966269d664497fc67048 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Mon, 6 Nov 2023 10:20:58 +0100
Subject: [PATCH 24/71] Dark mode: Navbar & Orange navbar (#2345)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 js/tests/visual/scrollspy.html                |   4 +-
 scss/_navbar.scss                             |  26 +-
 scss/_variables.scss                          |  12 +-
 site/assets/scss/_subnav.scss                 |   4 +-
 site/content/docs/5.3/components/navbar.md    |  52 +-
 .../docs/5.3/components/orange-navbar.md      |  56 +-
 site/content/docs/5.3/dark-mode.md            | 659 ++++++++++++++++++
 .../docs/5.3/examples/download-app/index.html |   4 +-
 .../content/docs/5.3/examples/form/index.html |   6 +-
 .../5.3/examples/navbar-sticky/index.html     |   2 +-
 .../docs/5.3/examples/navbars/index.html      |  24 +-
 site/layouts/partials/docs-navbar.html        |  13 +-
 .../shortcodes/orange-global-headers.html     |   8 +-
 site/layouts/shortcodes/orange-supra.html     |  11 +-
 14 files changed, 771 insertions(+), 110 deletions(-)

diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index e5b5559fe7..5562aa0d6d 100644
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -10,8 +10,8 @@
     </style>
   </head>
   <body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">
-    <nav class="navbar navbar-expand-md bg-dark fixed-top">
-      <a class="navbar-brand" href="#">Scrollspy test</a>
+    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+      <a class="navbar-brand text-white" href="#">Scrollspy test</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 2858cf63c8..24eda6b505 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -10,6 +10,7 @@
   --#{$prefix}navbar-font-weight: #{$navbar-font-weight}; // Boosted mod
   --#{$prefix}navbar-border-width: #{$navbar-border-width}; // Boosted mod
   --#{$prefix}navbar-border-color: #{$navbar-border-color}; // Boosted mod
+  --#{$prefix}navbar-bg: #{$navbar-light-bg}; // Boosted mod
   --#{$prefix}navbar-color: #{$navbar-light-color};
   --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
   --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
@@ -37,7 +38,8 @@
   --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
   --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size-xs}; // Boosted mod
   --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg-small)}; // Boosted mod
-  --#{$prefix}navbar-toggler-icon-filter: none; // Boosted mod
+  --#{$prefix}navbar-toggler-icon-color: #{$navbar-light-icon-color}; // Boosted mod
+  --#{$prefix}navbar-toggler-icon-hover-color: #{$navbar-light-icon-hover-color}; // Boosted mod
   --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
   --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
   --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
@@ -55,7 +57,7 @@
   box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 var(--#{$prefix}navbar-border-color); // stylelint-disable-line function-disallowed-list
   @include transition($navbar-transition);
   // End mod
-  @include gradient-bg();
+  @include gradient-bg(var(--#{$prefix}navbar-bg)); // Boosted mod: instead of `@include gradient-bg()`
 
   // Boosted mod: Difference between xs and md breakpoints
   // scss-docs-start orange-navbar-css-vars
@@ -322,7 +324,9 @@
   // Boosted mod: close icon when opened & color state
   &:hover,
   &:active {
-    --#{$prefix}navbar-toggler-icon-filter: #{$orange-filter};
+    .navbar-toggler-icon {
+      background-color: var(--#{$prefix}navbar-toggler-icon-hover-color);
+    }
   }
 
   &[aria-expanded="true"] {
@@ -342,11 +346,12 @@
   width: 1.5em;
   height: 1.5em;
   vertical-align: middle;
-  background-image: var(--#{$prefix}navbar-toggler-icon-bg);
-  filter: var(--#{$prefix}navbar-toggler-icon-filter); // Boosted mod
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100%;
+  // Boosted mod: no `background-image`
+  // Boosted mod: no `background-repeat`
+  // Boosted mod: no `background-position`
+  // Boosted mod: no `background-size`
+  background-color: var(--#{$prefix}navbar-toggler-icon-color); // Boosted mod
+  mask: var(--#{$prefix}navbar-toggler-icon-bg) no-repeat center 100%; // Boosted mod
 }
 
 .navbar-nav-scroll {
@@ -509,8 +514,8 @@
   @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
 }
 
-.navbar-dark,
-.navbar[data-bs-theme="dark"] {
+// Boosted mod: no `navbar[data-bs-theme="dark"]` selector
+.navbar-dark {
   --#{$prefix}navbar-border-color: #{$navbar-dark-border-color}; // Boosted mod
   --#{$prefix}navbar-color: #{$navbar-dark-color};
   --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
@@ -520,7 +525,6 @@
   --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
   --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
   // Boosted mod: No --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; since we handle the variant with filter
-  --#{$prefix}navbar-toggler-icon-filter: #{$invert-filter}; // Boosted mod
 }
 
 // Boosted mod: no `@if enable-dark-mode` since Boosted doesn't have any dark mode for now
diff --git a/scss/_variables.scss b/scss/_variables.scss
index f204adab53..36e392e903 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1498,14 +1498,16 @@ $navbar-toggler-focus-width:          null !default; // Boosted mod
 $navbar-toggler-transition:           $transition-focus !default; // Boosted mod
 
 $navbar-light-color:                  var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .65)`
-$navbar-light-hover-color:            $accessible-orange !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .8)`
-$navbar-light-active-color:           $accessible-orange !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), 1)`
+$navbar-light-bg:                     var(--#{$prefix}highlight-color) !default; // Boosted mod
+$navbar-light-hover-color:            var(--#{$prefix}link-hover-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .8)`
+$navbar-light-active-color:           var(--#{$prefix}link-hover-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), 1)`
 $navbar-light-disabled-color:         var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .3)`
-// Boosted mod: no $navbar-light-icon-color
+$navbar-light-icon-color:             var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `rgba($body-color, .75)`
+$navbar-light-icon-hover-color:       var(--#{$prefix}link-hover-color) !default; // Boosted mod
 $navbar-light-toggler-icon-bg:        $burger-icon !default; // Boosted mod: instead of inline SVG
 $navbar-light-toggler-icon-bg-small:  $burger-icon-small !default; // Boosted mod: slightly different burger icon for small breakpoints
 $navbar-light-toggler-border-color:   null !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .15)`
-$navbar-light-brand-color:            $navbar-light-active-color !default;
+$navbar-light-brand-color:            $navbar-light-color !default; // Boosted mod: instead of `$navbar-light-active-color`
 $navbar-light-brand-hover-color:      $navbar-light-active-color !default;
 // scss-docs-end navbar-variables
 
@@ -1519,7 +1521,7 @@ $navbar-brand-logo-transition:              width $navbar-transition-duration $n
 $navbar-active-transition:                  bottom $navbar-transition-duration $navbar-transition-timing-function !default;
 
 $navbar-border-width:                       calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list
-$navbar-border-color:                       $gray-500 !default;
+$navbar-border-color:                       var(--#{$prefix}border-color-translucent) !default;
 
 $navbar-brand-margin-y-xs:                  $spacer * .5 !default;
 $navbar-brand-logo-size-xs:                 $spacer * 1.5 !default;
diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss
index 8d0309f2bb..eda590f9ce 100644
--- a/site/assets/scss/_subnav.scss
+++ b/site/assets/scss/_subnav.scss
@@ -3,6 +3,6 @@
 .bd-subnavbar {
   // The z-index is needed for the dropdown to stay on top of the content
   z-index: $zindex-dropdown - 1; // goes under the navbar + dropdown.
-  background-color: rgba($white, .95);
-  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15);
+  background-color: rgba(var(--bs-body-bg-rgb), .95);
+  box-shadow: 0 .5rem 1rem rgba(var(--bs-body-color-rgb), .05), inset 0 -1px 0 rgba(var(--bs-body-color-rgb), .15);
 }
diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md
index 90ddae8de8..1a76e6319e 100644
--- a/site/content/docs/5.3/components/navbar.md
+++ b/site/content/docs/5.3/components/navbar.md
@@ -9,7 +9,7 @@ toc: true
 ---
 
 {{< design-callout-alert >}}
-This component explains the basic behavior, structure and concepts of navbars from a Bootstrap point of view. Some discrepancies exist with Boosted due to a different HTML structure.
+This component explains the basic behavior, structure and concepts of navbars from a Bootstrap point of view. Some discrepancies exist with Boosted due to a different HTML structure. Moreover, Orange navbars have the same rendering in light and dark mode.
 
 In order to build an Orange navbar please refer to [Orange navbar]({{< docsref "/components/orange-navbar" >}}).
 {{< /design-callout-alert >}}
@@ -45,7 +45,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
 Here's an example of all the sub-components included in a responsive dark-themed navbar that automatically collapses at the `lg` (large) breakpoint.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg bg-dark">
+<nav class="navbar navbar-expand-lg">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -97,7 +97,7 @@ The `.navbar-brand` can be used to contain most elements, but an anchor works be
 {{< example >}}
 <!-- As a link -->
 <header>
-  <nav class="navbar bg-dark">
+  <nav class="navbar">
     <div class="container-fluid">
       <div class="navbar-brand">
         <a class="stretched-link" href="#">
@@ -111,7 +111,7 @@ The `.navbar-brand` can be used to contain most elements, but an anchor works be
 
 <!-- As a heading -->
 <header class="mt-3">
-  <nav class="navbar bg-dark">
+  <nav class="navbar">
     <div class="container-fluid">
       <div class="navbar-brand">
         <span class="stretched-link">
@@ -134,7 +134,7 @@ Add the `.active` class on `.nav-link` to indicate the current page.
 Please note that you should also add the `aria-current` attribute on the active `.nav-link`.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg bg-dark">
+<nav class="navbar navbar-expand-lg">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -167,7 +167,7 @@ Please note that you should also add the `aria-current` attribute on the active
 And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg bg-dark">
+<nav class="navbar navbar-expand-lg">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -192,7 +192,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
 You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg bg-dark">
+<nav class="navbar navbar-expand-lg">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -234,7 +234,7 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
 Place various form controls and components within a navbar:
 
 {{< example >}}
-<nav class="navbar bg-dark">
+<nav class="navbar">
   <div class="container-fluid">
     <form class="d-flex" role="search">
       <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
@@ -247,7 +247,7 @@ Place various form controls and components within a navbar:
 Immediate child elements of `.navbar` use flex layout<!-- Boosted mod: no justify-content -->. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.
 
 {{< example >}}
-<nav class="navbar bg-dark">
+<nav class="navbar">
   <div class="container-fluid">
     <div class="navbar-brand me-auto">
       <a class="stretched-link" href="#">
@@ -265,10 +265,10 @@ Immediate child elements of `.navbar` use flex layout<!-- Boosted mod: no justif
 Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<form>` element as the container and save some HTML. Applies to the option above and below this copy.
 
 {{< example >}}
-<nav class="navbar bg-dark">
+<nav class="navbar">
   <form class="container-fluid">
     <div class="input-group">
-      <span class="input-group-text text-white" id="basic-addon1">@</span>
+      <span class="input-group-text" id="basic-addon1">@</span>
       <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
     </div>
   </form>
@@ -278,7 +278,7 @@ Input groups work, too. If your navbar is an entire form, or mostly a form, you
 Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
 
 {{< example >}}
-<nav class="navbar bg-dark">
+<nav class="navbar">
   <form class="container-fluid justify-content-start align-items-center">
     <button class="btn btn-primary me-2" type="button">Main button</button>
     <button class="btn btn-sm btn-primary" type="button">Smaller button</button>
@@ -291,7 +291,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a
 Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
 
 {{< example >}}
-<nav class="navbar bg-dark">
+<nav class="navbar">
   <div class="container-fluid">
     <span class="navbar-text">
       Navbar text with an inline element
@@ -303,7 +303,7 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
 Mix and match with other components and utilities as needed.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg bg-dark">
+<nav class="navbar navbar-expand-lg">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -351,7 +351,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
 
 {{< example >}}
 <div class="container">
-  <nav class="navbar navbar-expand-lg bg-dark">
+  <nav class="navbar navbar-expand-lg">
     <div class="container-fluid">
       <div class="navbar-brand">
         <a class="stretched-link" href="#">
@@ -366,7 +366,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
 Use any of the responsive containers to change how wide the content in your navbar is presented.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg bg-dark">
+<nav class="navbar navbar-expand-lg">
   <div class="container-md">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -384,7 +384,7 @@ Use our [position utilities]({{< docsref "/utilities/position" >}}) to place nav
 Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
 
 {{< example >}}
-<nav class="navbar bg-dark">
+<nav class="navbar">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -397,7 +397,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
 {{< /example >}}
 
 {{< example >}}
-<nav class="navbar fixed-top bg-dark">
+<nav class="navbar fixed-top">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -410,7 +410,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
 {{< /example >}}
 
 {{< example >}}
-<nav class="navbar fixed-bottom bg-dark">
+<nav class="navbar fixed-bottom">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -423,7 +423,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
 {{< /example >}}
 
 {{< example >}}
-<nav class="navbar sticky-top bg-dark">
+<nav class="navbar sticky-top">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -436,7 +436,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
 {{< /example >}}
 
 {{< example >}}
-<nav class="navbar sticky-bottom bg-dark">
+<nav class="navbar sticky-bottom">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -457,7 +457,7 @@ Please note that this behavior comes with a potential drawback of `overflow`—w
 Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-height: 100px;"`, with some extra margin utilities for optimum spacing.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg bg-dark">
+<nav class="navbar navbar-expand-lg">
   <div class="container-fluid">
     <div class="navbar-brand">
       <a class="stretched-link" href="#">
@@ -516,7 +516,7 @@ Sometimes you want to use the collapse plugin to trigger a container element for
     <span class="text-body-secondary">Toggleable via the navbar brand.</span>
   </div>
 </div>
-<nav class="navbar bg-dark">
+<nav class="navbar" data-bs-theme="dark">
   <div class="container-fluid">
     <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -589,15 +589,15 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br
 </nav>
 ```
 
-When using offcanvas in a dark navbar, be aware that you may need to have a dark background on the offcanvas content to avoid the text becoming illegible. In the example below, we add `.bg-dark` to the `.navbar`, `.text-bg-dark` to the `.offcanvas` for proper styling with a dark offcanvas.
+When using offcanvas in a dark navbar, be aware that you may need to have a dark background on the offcanvas content to avoid the text becoming illegible. In the example below, we add `[data-bs-theme="dark"]` to the `.navbar` for proper styling with a dark offcanvas.
 
 {{< example stackblitz_add_js="true" >}}
-<nav class="navbar bg-dark fixed-top">
+<nav class="navbar fixed-top" data-bs-theme="dark">
   <div class="container-fluid">
     <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
         <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"></button>
diff --git a/site/content/docs/5.3/components/orange-navbar.md b/site/content/docs/5.3/components/orange-navbar.md
index cf0ac1d7a3..75b9dfb515 100644
--- a/site/content/docs/5.3/components/orange-navbar.md
+++ b/site/content/docs/5.3/components/orange-navbar.md
@@ -39,7 +39,7 @@ For more details, please refer to the [navbar supported content]({{<docsref "/co
 ## Example
 
 {{< example class="p-0" show_markup=false >}}
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-supra mode="languages" aria_label="Supra navigation - Main example with languages" >}}
     {{< /orange-supra >}}
     {{< orange-global-headers id="global-header" mode="actions" navigation=true supra=true aria_label="Global navigation - Standard example with nav-under" >}}
@@ -61,7 +61,7 @@ Refer to [Responsive behavior](#responsive-behavior) to have more details.
 ### Standard
 
 {{< example class="p-0" >}}
-{{< orange-supra aria_label="Supra-navigation - Only left navbar example">}}
+{{< orange-supra theme_dark=true aria_label="Supra-navigation - Only left navbar example">}}
 {{< /orange-supra >}}
 {{< /example >}}
 
@@ -69,14 +69,14 @@ Refer to [Responsive behavior](#responsive-behavior) to have more details.
 An additional navbar (with text or icon items) can be added on the right of the Supra bar.
 
 {{< example class="p-0" >}}
-{{< orange-supra mode="languages" aria_label="Supra navigation - With an additional languages navbar example">}}
+{{< orange-supra mode="languages" theme_dark=true aria_label="Supra navigation - With an additional languages navbar example">}}
 {{< /orange-supra >}}
 {{< /example >}}
 
 ### Responsive behavior
 
 <div class="bd-example p-0">
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-supra mode="languages" aria_label="Supra navigation - Responsive behavior example" >}}
     {{< /orange-supra >}}
     {{< orange-global-headers id="global-header-0" demo=true mode="actions" supra=true aria_label="Global navigation - Responsive behavior with a supra bar example" >}}
@@ -85,9 +85,9 @@ An additional navbar (with text or icon items) can be added on the right of the
 </div>
 
 ```html
-<header>
+<header data-bs-theme="dark">
   <!-- Supra bar -->
-  <nav class="navbar navbar-expand-lg bg-dark supra" aria-label="Supra navigation - Responsive behavior example">
+  <nav class="navbar navbar-expand-lg supra" aria-label="Supra navigation - Responsive behavior example">
     <div class="container-xxl">
       <!-- Left navbar of the Supra bar -->
       <ul class="navbar-nav me-auto">
@@ -101,7 +101,7 @@ An additional navbar (with text or icon items) can be added on the right of the
   </nav>
 
   <!-- Global header -->
-  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation - Responsive behavior with a supra bar example">
+  <nav class="navbar navbar-expand-lg" aria-label="Global navigation - Responsive behavior with a supra bar example">
     <div class="container-xxl">
 
       <!-- Orange brand logo -->
@@ -143,15 +143,15 @@ An additional navbar (with text or icon items) can be added on the right of the
 ### Standard
 
 <div class="bd-example p-0">
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-global-headers id="global-header-1" mode="actions" demo=true aria_label="Global navigation - Standard example">}}
     {{< /orange-global-headers >}}
   </header>
 </div>
 
 ```html
-<header>
-  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation - Standard example">
+<header data-bs-theme="dark">
+  <nav class="navbar navbar-expand-lg" aria-label="Global navigation - Standard example">
     <div class="container-xxl">
 
       <!-- Orange brand logo -->
@@ -192,7 +192,7 @@ An additional navbar (with text or icon items) can be added on the right of the
               </svg>
               <span class="visually-hidden">Basket</span>
               <span class="position-relative align-self-start">
-                <span class="badge text-bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
+                <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
                   1
                   <span class="visually-hidden">shopping basket items</span>
                 </span>
@@ -223,15 +223,15 @@ If you do not intend to use your own SVG, you should explore the DOM solution an
 {{< /callout >}}
 
 <div class="bd-example p-0">
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-global-headers id="global-header-2" mode="actions" responsive_logo=true labels_end=true demo=true aria_label="Global navigation - With custom logo example">}}
     {{< /orange-global-headers >}}
   </header>
 </div>
 
 ```html
-<header>
-  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation - With custom logo example">
+<header data-bs-theme="dark">
+  <nav class="navbar navbar-expand-lg" aria-label="Global navigation - With custom logo example">
     <div class="container-xxl">
 
       <!-- Orange brand logo -->
@@ -260,15 +260,15 @@ Next to the brand logo, you can add a title that can be displayed on one or two
 
 <div class="bd-example p-0">
   <!-- On one line -->
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-global-headers id="global-header-3" mode="actions" title=true demo=true aria_label="Global navigation - With one line title example">}}
     {{< /orange-global-headers >}}
   </header>
 </div>
 
 ```html
-<header>
-  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation - With one line title example">
+<header data-bs-theme="dark">
+  <nav class="navbar navbar-expand-lg" aria-label="Global navigation - With one line title example">
     <div class="container-xxl">
 
       <!-- Orange brand logo -->
@@ -294,15 +294,15 @@ Next to the brand logo, you can add a title that can be displayed on one or two
 
 <div class="bd-example p-0">
   <!-- On two lines -->
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-global-headers id="global-header-4" mode="actions" title=true title_2=true labels=true demo=true aria_label="Global navigation - With two lines title example">}}
     {{< /orange-global-headers >}}
   </header>
 </div>
 
 ```html
-<header>
-  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation - With two lines title example">
+<header data-bs-theme="dark">
+  <nav class="navbar navbar-expand-lg" aria-label="Global navigation - With two lines title example">
     <div class="container-xxl">
 
       <!-- Orange brand logo -->
@@ -335,15 +335,15 @@ Next to the brand logo, you can add a title that can be displayed on one or two
 You can add a search input into your Global header.
 
 <div class="bd-example p-0">
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-global-headers id="global-header-5" mode="search" demo=true aria_label="Global navigation - With search box example">}}
     {{< /orange-global-headers >}}
   </header>
 </div>
 
 ```html
-<header>
-  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation - With search box example">
+<header data-bs-theme="dark">
+  <nav class="navbar navbar-expand-lg" aria-label="Global navigation - With search box example">
     <div class="container-xxl">
 
       <!-- Orange brand logo -->
@@ -357,7 +357,7 @@ You can add a search input into your Global header.
 
       <!-- Navbar with action icons -->
       <form class="d-flex d-none d-lg-flex col-3 navbar-item" role="search">
-        <input class="form-control bg-transparent text-white border border-2 border-dark" type="search" placeholder="Search" aria-label="Search">
+        <input class="form-control bg-transparent" type="search" placeholder="Search" aria-label="Search">
       </form>
       <div id="global-header-5.2" class="navbar-collapse collapse d-sm-flex global-header-5">
         <ul class="navbar-nav flex-row">
@@ -400,15 +400,15 @@ A Navigation under bar is a simple navigation bar, different than a Supra bar. I
 It should be visible only for the larger screens (`lg` to `xxl` breakpoints) using `.navbar-expand-*`.
 
 <div class="bd-example p-0">
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-global-headers id="global-header-6" mode="actions" title=true title_2=true labels=true navigation=true aria_label="Global navigation - Standard example with nav-under">}}
     {{< /orange-global-headers >}}
   </header>
 </div>
 
 ```html
-<header>
-  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation - Standard example with nav-under">
+<header data-bs-theme="dark">
+  <nav class="navbar navbar-expand-lg" aria-label="Global navigation - Standard example with nav-under">
     <div class="container-xxl">
 
       <!-- Orange brand logo -->
@@ -425,7 +425,7 @@ It should be visible only for the larger screens (`lg` to `xxl` breakpoints) usi
     </div>
   </nav>
 
-  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation - Nav-under example">
+  <nav class="navbar navbar-expand-lg" aria-label="Global navigation - Nav-under example">
     <div class="container-xxl">
       <div id="global-header-6.1" class="navbar-collapse collapse m-0 global-header-6">
         <ul class="navbar-nav">
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index a05d44cdfb..4d8df2a11e 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -2161,6 +2161,223 @@ sitemap_exclude: true
   </div>
 </div>
 
+### Navbar
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <nav class="navbar navbar-expand-lg">
+    <div class="container-fluid">
+      <div class="navbar-brand">
+        <a class="stretched-link" href="#">
+          <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
+        </a>
+        <h1 class="title">Ii</h1>
+      </div>
+      <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarExample" aria-controls="navbarExample" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse align-items-end flex-grow-1" id="navbarExample">
+        <ul class="navbar-nav me-auto my-2 my-lg-0">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link disabled">Link</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Link
+            </a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </li>
+        </ul>
+        <form class="d-flex navbar-item ms-lg-auto mt-lg-4" role="search">
+          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+          <button class="btn btn-primary" type="submit">Search</button>
+        </form>
+      </div>
+    </div>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <nav class="navbar navbar-expand-lg">
+    <div class="container-fluid">
+      <div class="navbar-brand">
+        <a class="stretched-link" href="#">
+          <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
+        </a>
+        <h1 class="title">Ii</h1>
+      </div>
+      <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarExample2" aria-controls="navbarExample2" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse align-items-end flex-grow-1" id="navbarExample2">
+        <ul class="navbar-nav me-auto my-2 my-lg-0">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link disabled">Link</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Link
+            </a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </li>
+        </ul>
+        <form class="d-flex navbar-item ms-lg-auto mt-lg-4" role="search">
+          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+          <button class="btn btn-primary" type="submit">Search</button>
+        </form>
+      </div>
+    </div>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <nav class="navbar navbar-expand-lg">
+    <div class="container-fluid">
+      <div class="navbar-brand">
+        <a class="stretched-link" href="#">
+          <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
+        </a>
+        <h1 class="title">Ii</h1>
+      </div>
+      <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarExample3" aria-controls="navbarExample3" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse align-items-end flex-grow-1" id="navbarExample3">
+        <ul class="navbar-nav me-auto my-2 my-lg-0">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link disabled">Link</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Link
+            </a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </li>
+        </ul>
+        <form class="d-flex navbar-item ms-lg-auto mt-lg-4" role="search">
+          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+          <button class="btn btn-primary" type="submit">Search</button>
+        </form>
+      </div>
+    </div>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <nav class="navbar navbar-expand-lg" data-bs-theme="dark">
+    <div class="container-fluid">
+      <div class="navbar-brand">
+        <a class="stretched-link" href="#">
+          <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
+        </a>
+        <h1 class="title">Ii</h1>
+      </div>
+      <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarExample4" aria-controls="navbarExample4" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse align-items-end flex-grow-1" id="navbarExample4">
+        <ul class="navbar-nav me-auto my-2 my-lg-0">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link disabled">Link</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Link
+            </a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </li>
+        </ul>
+        <form class="d-flex navbar-item ms-lg-auto mt-lg-4" role="search">
+          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+          <button class="btn btn-primary" type="submit">Search</button>
+        </form>
+      </div>
+    </div>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <nav class="navbar navbar-expand-lg" data-bs-theme="light">
+    <div class="container-fluid">
+      <div class="navbar-brand">
+        <a class="stretched-link" href="#">
+          <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
+        </a>
+        <h1 class="title">Ii</h1>
+      </div>
+      <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarExample5" aria-controls="navbarExample5" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse align-items-end flex-grow-1" id="navbarExample5">
+        <ul class="navbar-nav me-auto my-2 my-lg-0">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link disabled">Link</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Link
+            </a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </li>
+        </ul>
+        <form class="d-flex navbar-item ms-lg-auto mt-lg-4" role="search">
+          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+          <button class="btn btn-primary" type="submit">Search</button>
+        </form>
+      </div>
+    </div>
+  </nav>
+</div>
+
 ### Navs & tabs
 
 <h4 class="mt-3">No theme</h4>
@@ -2704,6 +2921,448 @@ sitemap_exclude: true
   </div>
 </div>
 
+### Orange navbar
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <header>
+    <nav class="navbar navbar-expand-lg supra" aria-label="Supra navigation1">
+      <div class="container-xxl">
+        <ul class="navbar-nav me-auto">
+          <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
+          <li class="nav-item"><a href="#" class="nav-link">Business</a></li>
+        </ul>
+        <ul class="navbar-nav">
+          <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
+          <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" hreflang="fr" lang="fr">FR</a></li>
+          <li class="nav-item"><a class="nav-link" href="#" aria-label="ES Versión en español" hreflang="es" lang="es">ES</a></li>
+        </ul>
+      </div>
+    </nav>
+    <nav class="navbar navbar-expand-lg" aria-label="Global navigation1">
+      <div class="container-xxl">
+        <div class="navbar-brand me-auto">
+          <a class="stretched-link" href="#">
+            <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" alt="Boosted - Back to Home" loading="lazy" width="50" height="50">
+          </a>
+          <h1 class="title">Test</h1>
+        </div>
+        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".global-header1" aria-controls="global-header.11 global-header.21" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div id="global-header.21" class="navbar-collapse collapse d-sm-flex global-header1">
+          <ul class="navbar-nav flex-row">
+            <li class="nav-item">
+              <a href="#" class="nav-link nav-icon">
+                <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+                  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#search"></use>
+                </svg>
+                <span class="visually-hidden">Search</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link nav-icon">
+                <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+                  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"></use>
+                </svg>
+                <span class="visually-hidden">Basket</span>
+                <span class="position-relative align-self-start">
+                  <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
+                    1
+                    <span class="visually-hidden">shopping basket items</span>
+                  </span>
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link nav-icon">
+                <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
+                <span class="visually-hidden">My account</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <nav class="navbar navbar-expand-lg" aria-label="Global navigation - Standard example with nav-under.2">
+      <div class="container-xxl">
+        <div id="global-header.11" class="navbar-collapse collapse m-0 global-header1">
+          <ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none supra">
+            <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
+            <li class="nav-item"><a href="#" class="nav-link">Business</a></li>
+          </ul>
+          <ul class="navbar-nav">
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+          </ul>
+          <ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none supra">
+            <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
+            <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" hreflang="fr" lang="fr">FR</a></li>
+            <li class="nav-item"><a class="nav-link" href="#" aria-label="ES Versión en español" hreflang="es" lang="es">ES</a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  </header>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <header>
+    <nav class="navbar navbar-expand-lg supra" aria-label="Supra navigation2">
+      <div class="container-xxl">
+        <ul class="navbar-nav me-auto">
+          <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
+          <li class="nav-item"><a href="#" class="nav-link">Business</a></li>
+        </ul>
+        <ul class="navbar-nav">
+          <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
+          <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" hreflang="fr" lang="fr">FR</a></li>
+          <li class="nav-item"><a class="nav-link" href="#" aria-label="ES Versión en español" hreflang="es" lang="es">ES</a></li>
+        </ul>
+      </div>
+    </nav>
+    <nav class="navbar navbar-expand-lg" aria-label="Global navigation2">
+      <div class="container-xxl">
+        <div class="navbar-brand me-auto">
+          <a class="stretched-link" href="#">
+            <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" alt="Boosted - Back to Home" loading="lazy" width="50" height="50">
+          </a>
+          <h1 class="title">Test</h1>
+        </div>
+        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".global-header2" aria-controls="global-header.12 global-header.22" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div id="global-header.22" class="navbar-collapse collapse d-sm-flex global-header2">
+          <ul class="navbar-nav flex-row">
+            <li class="nav-item">
+              <a href="#" class="nav-link nav-icon">
+                <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+                  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#search"></use>
+                </svg>
+                <span class="visually-hidden">Search</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link nav-icon">
+                <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+                  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"></use>
+                </svg>
+                <span class="visually-hidden">Basket</span>
+                <span class="position-relative align-self-start">
+                  <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
+                    1
+                    <span class="visually-hidden">shopping basket items</span>
+                  </span>
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link nav-icon">
+                <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
+                <span class="visually-hidden">My account</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <nav class="navbar navbar-expand-lg" aria-label="Global navigation - Standard example with nav-under.2">
+      <div class="container-xxl">
+        <div id="global-header.12" class="navbar-collapse collapse m-0 global-header2">
+          <ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none supra">
+            <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
+            <li class="nav-item"><a href="#" class="nav-link">Business</a></li>
+          </ul>
+          <ul class="navbar-nav">
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+          </ul>
+          <ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none supra">
+            <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
+            <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" hreflang="fr" lang="fr">FR</a></li>
+            <li class="nav-item"><a class="nav-link" href="#" aria-label="ES Versión en español" hreflang="es" lang="es">ES</a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  </header>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <header>
+    <nav class="navbar navbar-expand-lg supra" aria-label="Supra navigation3">
+      <div class="container-xxl">
+        <ul class="navbar-nav me-auto">
+          <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
+          <li class="nav-item"><a href="#" class="nav-link">Business</a></li>
+        </ul>
+        <ul class="navbar-nav">
+          <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
+          <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" hreflang="fr" lang="fr">FR</a></li>
+          <li class="nav-item"><a class="nav-link" href="#" aria-label="ES Versión en español" hreflang="es" lang="es">ES</a></li>
+        </ul>
+      </div>
+    </nav>
+    <nav class="navbar navbar-expand-lg" aria-label="Global navigation3">
+      <div class="container-xxl">
+        <div class="navbar-brand me-auto">
+          <a class="stretched-link" href="#">
+            <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" alt="Boosted - Back to Home" loading="lazy" width="50" height="50">
+          </a>
+          <h1 class="title">Test</h1>
+        </div>
+        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".global-header3" aria-controls="global-header.13 global-header.23" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div id="global-header.23" class="navbar-collapse collapse d-sm-flex global-header3">
+          <ul class="navbar-nav flex-row">
+            <li class="nav-item">
+              <a href="#" class="nav-link nav-icon">
+                <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+                  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#search"></use>
+                </svg>
+                <span class="visually-hidden">Search</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link nav-icon">
+                <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+                  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"></use>
+                </svg>
+                <span class="visually-hidden">Basket</span>
+                <span class="position-relative align-self-start">
+                  <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
+                    1
+                    <span class="visually-hidden">shopping basket items</span>
+                  </span>
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link nav-icon">
+                <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
+                <span class="visually-hidden">My account</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <nav class="navbar navbar-expand-lg" aria-label="Global navigation - Standard example with nav-under.2">
+      <div class="container-xxl">
+        <div id="global-header.13" class="navbar-collapse collapse m-0 global-header3">
+          <ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none supra">
+            <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
+            <li class="nav-item"><a href="#" class="nav-link">Business</a></li>
+          </ul>
+          <ul class="navbar-nav">
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+          </ul>
+          <ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none supra">
+            <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
+            <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" hreflang="fr" lang="fr">FR</a></li>
+            <li class="nav-item"><a class="nav-link" href="#" aria-label="ES Versión en español" hreflang="es" lang="es">ES</a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  </header>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <header>
+    <nav class="navbar navbar-expand-lg supra" data-bs-theme="dark" aria-label="Supra navigation4">
+      <div class="container-xxl">
+        <ul class="navbar-nav me-auto">
+          <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
+          <li class="nav-item"><a href="#" class="nav-link">Business</a></li>
+        </ul>
+        <ul class="navbar-nav">
+          <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
+          <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" hreflang="fr" lang="fr">FR</a></li>
+          <li class="nav-item"><a class="nav-link" href="#" aria-label="ES Versión en español" hreflang="es" lang="es">ES</a></li>
+        </ul>
+      </div>
+    </nav>
+    <nav class="navbar navbar-expand-lg" data-bs-theme="dark" aria-label="Global navigation4">
+      <div class="container-xxl">
+        <div class="navbar-brand me-auto">
+          <a class="stretched-link" href="#">
+            <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" alt="Boosted - Back to Home" loading="lazy" width="50" height="50">
+          </a>
+          <h1 class="title">Test</h1>
+        </div>
+        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".global-header4" aria-controls="global-header.14 global-header.24" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div id="global-header.24" class="navbar-collapse collapse d-sm-flex global-header4">
+          <ul class="navbar-nav flex-row">
+            <li class="nav-item">
+              <a href="#" class="nav-link nav-icon">
+                <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+                  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#search"></use>
+                </svg>
+                <span class="visually-hidden">Search</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link nav-icon">
+                <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+                  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"></use>
+                </svg>
+                <span class="visually-hidden">Basket</span>
+                <span class="position-relative align-self-start">
+                  <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
+                    1
+                    <span class="visually-hidden">shopping basket items</span>
+                  </span>
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link nav-icon">
+                <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
+                <span class="visually-hidden">My account</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <nav class="navbar navbar-expand-lg" data-bs-theme="dark" aria-label="Global navigation - Standard example with nav-under.2">
+      <div class="container-xxl">
+        <div id="global-header.14" class="navbar-collapse collapse m-0 global-header4">
+          <ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none supra">
+            <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
+            <li class="nav-item"><a href="#" class="nav-link">Business</a></li>
+          </ul>
+          <ul class="navbar-nav">
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+          </ul>
+          <ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none supra">
+            <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
+            <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" hreflang="fr" lang="fr">FR</a></li>
+            <li class="nav-item"><a class="nav-link" href="#" aria-label="ES Versión en español" hreflang="es" lang="es">ES</a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  </header>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <header>
+    <nav class="navbar navbar-expand-lg supra" data-bs-theme="light" aria-label="Supra navigation5">
+      <div class="container-xxl">
+        <ul class="navbar-nav me-auto">
+          <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
+          <li class="nav-item"><a href="#" class="nav-link">Business</a></li>
+        </ul>
+        <ul class="navbar-nav">
+          <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
+          <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" hreflang="fr" lang="fr">FR</a></li>
+          <li class="nav-item"><a class="nav-link" href="#" aria-label="ES Versión en español" hreflang="es" lang="es">ES</a></li>
+        </ul>
+      </div>
+    </nav>
+    <nav class="navbar navbar-expand-lg" data-bs-theme="light" aria-label="Global navigation5">
+      <div class="container-xxl">
+        <div class="navbar-brand me-auto">
+          <a class="stretched-link" href="#">
+            <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" alt="Boosted - Back to Home" loading="lazy" width="50" height="50">
+          </a>
+          <h1 class="title">Test</h1>
+        </div>
+        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".global-header5" aria-controls="global-header.15 global-header.25" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div id="global-header.25" class="navbar-collapse collapse d-sm-flex global-header5">
+          <ul class="navbar-nav flex-row">
+            <li class="nav-item">
+              <a href="#" class="nav-link nav-icon">
+                <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+                  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#search"></use>
+                </svg>
+                <span class="visually-hidden">Search</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link nav-icon">
+                <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+                  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"></use>
+                </svg>
+                <span class="visually-hidden">Basket</span>
+                <span class="position-relative align-self-start">
+                  <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
+                    1
+                    <span class="visually-hidden">shopping basket items</span>
+                  </span>
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link nav-icon">
+                <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
+                <span class="visually-hidden">My account</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <nav class="navbar navbar-expand-lg" data-bs-theme="light" aria-label="Global navigation - Standard example with nav-under.2">
+      <div class="container-xxl">
+        <div id="global-header.15" class="navbar-collapse collapse m-0 global-header5">
+          <ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none supra">
+            <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
+            <li class="nav-item"><a href="#" class="nav-link">Business</a></li>
+          </ul>
+          <ul class="navbar-nav">
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+          </ul>
+          <ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none supra">
+            <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
+            <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" hreflang="fr" lang="fr">FR</a></li>
+            <li class="nav-item"><a class="nav-link" href="#" aria-label="ES Versión en español" hreflang="es" lang="es">ES</a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  </header>
+</div>
+
 ### Pagination
 
 <h4 class="mt-3">No theme</h4>
diff --git a/site/content/docs/5.3/examples/download-app/index.html b/site/content/docs/5.3/examples/download-app/index.html
index ff0190b611..3f341c59fd 100644
--- a/site/content/docs/5.3/examples/download-app/index.html
+++ b/site/content/docs/5.3/examples/download-app/index.html
@@ -32,8 +32,8 @@
   </symbol>
 </svg>
 
-<header class="sticky-top">
-  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation of download app example page">
+<header class="sticky-top" data-bs-theme="dark">
+  <nav class="navbar navbar-expand-lg" aria-label="Global navigation of download app example page">
     <div class="container-xxl">
       <div class="navbar-brand">
         <a class="stretched-link" href="/">
diff --git a/site/content/docs/5.3/examples/form/index.html b/site/content/docs/5.3/examples/form/index.html
index c040d8d440..031bab5e28 100644
--- a/site/content/docs/5.3/examples/form/index.html
+++ b/site/content/docs/5.3/examples/form/index.html
@@ -14,8 +14,8 @@
   </symbol>
 </svg>
 
-<header class="sticky-top">
-  <nav class="navbar navbar-expand-lg bg-dark supra" aria-label="Supra navigation">
+<header class="sticky-top" data-bs-theme="dark">
+  <nav class="navbar navbar-expand-lg supra" aria-label="Supra navigation">
     <div class="container-xxl">
       <ul class="navbar-nav ms-auto">
         <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
@@ -23,7 +23,7 @@
       </ul>
     </div>
   </nav>
-  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Global navigation">
+  <nav class="navbar navbar-expand-lg" aria-label="Global navigation">
     <div class="container-xxl">
       <div class="navbar-brand me-auto me-lg-4">
         <a class="stretched-link" href="#">
diff --git a/site/content/docs/5.3/examples/navbar-sticky/index.html b/site/content/docs/5.3/examples/navbar-sticky/index.html
index 1b2346830f..485da1268a 100644
--- a/site/content/docs/5.3/examples/navbar-sticky/index.html
+++ b/site/content/docs/5.3/examples/navbar-sticky/index.html
@@ -12,7 +12,7 @@
 
 <main>
   <h1 class="visually-hidden">Difference between sticky and fixed navbar</h1>
-  <header class="sticky-top">
+  <header class="sticky-top" data-bs-theme="dark">
     {{< orange-supra mode="languages" aria_label="Supra navigation - Sticky example" >}}
     {{< /orange-supra >}}
 
diff --git a/site/content/docs/5.3/examples/navbars/index.html b/site/content/docs/5.3/examples/navbars/index.html
index f36142a0af..78bc57b5c7 100644
--- a/site/content/docs/5.3/examples/navbars/index.html
+++ b/site/content/docs/5.3/examples/navbars/index.html
@@ -8,76 +8,76 @@
 
 <main>
   <h1 class="visually-hidden">Navbars Boosted example</h1>
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-supra aria_label="Supra navigation - Left navbar only example" >}}
     {{< /orange-supra >}}
   </header>
 
   <div class="b-example-divider"></div>
 
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-supra mode="languages" aria_label="Supra navigation - Both navbars with languages example" >}}
     {{< /orange-supra >}}
   </header>
 
   <div class="b-example-divider"></div>
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-supra mode="actions" aria_label="Supra navigation - Both navbars with actions example" >}}
     {{< /orange-supra >}}
   </header>
 
   <div class="b-example-divider"></div>
-  <header class="header-minimized">
+  <header class="header-minimized" data-bs-theme="dark">
     {{< orange-global-headers id="global-header-0" mode="actions" aria_label="Global navigation - Minimized without title example" >}}
     {{< /orange-global-headers >}}
   </header>
 
   <div class="b-example-divider"></div>
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-global-headers id="global-header-1" mode="actions" aria_label="Global navigation - No title example" >}}
     {{< /orange-global-headers >}}
   </header>
 
   <div class="b-example-divider"></div>
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-global-headers id="global-header-2" mode="search" aria_label="Global navigation - No title with nav-under example" >}}
     {{< /orange-global-headers >}}
   </header>
 
   <div class="b-example-divider"></div>
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-global-headers id="global-header-3" mode="actions" title=true aria_label="Global navigation - With title example" >}}
     {{< /orange-global-headers >}}
   </header>
 
   <div class="b-example-divider"></div>
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-global-headers id="global-header-3-1" mode="actions" title=true labels=true navigation=true aria_label="Global navigation - With title and nav-under example" >}}
     {{< /orange-global-headers >}}
   </header>
 
   <div class="b-example-divider"></div>
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-global-headers id="global-header-4" mode="actions" title=true title_2=true labels=true aria_label="Global navigation - With two lined title example" >}}
     {{< /orange-global-headers >}}
   </header>
 
   <div class="b-example-divider"></div>
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-global-headers id="global-header-4-1" mode="actions" title=true title_2=true labels=true navigation=true aria_label="Global navigation - With two lined title and nav-under example" >}}
     {{< /orange-global-headers >}}
   </header>
 
   <div class="b-example-divider"></div>
   <!-- Should not have buy icon -->
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-global-headers id="global-header-5" mode="actions" responsive_logo=true labels_end=true  aria_label="Global navigation - With custom logo example" >}}
     {{< /orange-global-headers >}}
   </header>
 
   <div class="b-example-divider"></div>
   <!-- Should not have buy icon -->
-  <header>
+  <header data-bs-theme="dark">
     {{< orange-global-headers id="global-header-5-1" mode="actions" responsive_logo=true navigation=true  aria_label="Global navigation - With custom logo and nav-under example" >}}
     {{< /orange-global-headers >}}
   </header>
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 8b9ab6c0af..834b24ff61 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -1,5 +1,5 @@
 <header class="sticky-top bd-header">
-  <nav class="navbar navbar-expand bg-dark supra d-none" aria-label="Supra-navigation - New release banner">
+  <nav class="navbar navbar-expand supra d-none" data-bs-theme="dark" aria-label="Supra-navigation - New release banner">
     <div class="container-xxl d-flex justify-content-center">
       <ul class="navbar-nav">
         <li class="nav-item">
@@ -8,7 +8,7 @@
       </ul>
     </div>
   </nav>
-  <nav class="navbar bg-dark navbar-expand-lg" aria-label="Main navigation">
+  <nav class="navbar navbar-expand-lg" data-bs-theme="dark" aria-label="Main navigation">
     <div class="container-xxl">
       <div class="navbar-brand me-auto me-lg-4">
         <a class="stretched-link" href="/">
@@ -59,16 +59,9 @@
           <li class="nav-item dropdown">
             <button class="nav-link nav-icon dropdown-toggle" id="bd-theme" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)">
               <svg class="bi theme-icon-active"><use href="#circle-half"></use></svg>
-<<<<<<< HEAD
               <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
             </button>
-            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark mb-2" aria-labelledby="bd-theme-text">
-=======
-              <span class="d-lg-none ms-2" aria-hidden="true" id="bd-theme-text">Toggle theme</span>
-              <span class="visually-hidden">Toggle theme</span>
-            </a>
-            <ul class="dropdown-menu dropdown-menu-end position-absolute" aria-labelledby="bd-theme-text">
->>>>>>> 7b5fa29ed (feat: dark mode)
+            <ul class="dropdown-menu dropdown-menu-end mb-2" aria-labelledby="bd-theme-text">
               <li>
                 <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
                   <svg class="bi me-2"><use href="#ui-light-mode"></use></svg>
diff --git a/site/layouts/shortcodes/orange-global-headers.html b/site/layouts/shortcodes/orange-global-headers.html
index 8fc57e56c2..8742ade5ec 100644
--- a/site/layouts/shortcodes/orange-global-headers.html
+++ b/site/layouts/shortcodes/orange-global-headers.html
@@ -28,7 +28,7 @@
 {{- $aria_label := .Get "aria_label"}}
 {{- $input := .Inner -}}
 
-<nav class="navbar bg-dark navbar-expand-lg" aria-label="{{ $aria_label }}">
+<nav class="navbar navbar-expand-lg" aria-label="{{ $aria_label }}">
   <div class="container-xxl">
     <div class="navbar-brand me-auto{{ cond (or $navigation $responsive_logo) "" " me-lg-4" }}">
       <a class="stretched-link" href="#">
@@ -89,7 +89,7 @@ <h1 class="title">Title</h1>
 {{- end }}
 {{- if eq $mode "search" }}
     <form class="d-flex d-none d-lg-flex col-3 navbar-item" role="search">
-      <input class="form-control bg-transparent text-white border border-2 border-dark" type="search" placeholder="Search" aria-label="Search">
+      <input class="form-control bg-transparent" type="search" placeholder="Search" aria-label="Search">
     </form>
 {{- end }}
     <div id="{{ $id }}.2" class="navbar-collapse collapse d-sm-flex{{ cond $responsive_logo " ms-lg-3" "" }} {{ $id }}">
@@ -110,7 +110,7 @@ <h1 class="title">Title</h1>
             </svg>
             <span class="visually-hidden">Basket</span>
             <span class="position-relative align-self-start">
-              <span class="badge text-bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
+              <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
                 1
                 <span class="visually-hidden">shopping basket items</span>
               </span>
@@ -138,7 +138,7 @@ <h1 class="title">Title</h1>
   </div>
 </nav>
 {{- if $navigation }}
-<nav class="navbar bg-dark navbar-expand-lg" aria-label="{{ $aria_label }}.2">
+<nav class="navbar navbar-expand-lg" aria-label="{{ $aria_label }}.2">
   <div class="container-xxl">
     <div id="{{ $id }}.1" class="navbar-collapse collapse m-0 {{ $id }}">
 {{- if $supra }}
diff --git a/site/layouts/shortcodes/orange-supra.html b/site/layouts/shortcodes/orange-supra.html
index c47a96574e..c0f69b009b 100644
--- a/site/layouts/shortcodes/orange-supra.html
+++ b/site/layouts/shortcodes/orange-supra.html
@@ -2,15 +2,18 @@
   Usage: `orange-supra args`
 
   `args` are all optional and can be one of the following:
-    * mode: mode used to display specific content if defined (choose one among ["languages", "actions"])
     * aria_label: set the aria-label for the current supra bar
+    * mode: mode used to display specific content if defined (choose one among ["languages", "actions"])
+    * theme_dark: set the `data-bs-theme="dark"` for the current supra bar (default: false)
 */ -}}
 
-{{- $mode := .Get "mode" -}}
 {{- $aria_label := .Get "aria_label" -}}
+{{- $mode := .Get "mode" -}}
+{{- $theme_dark := .Get "theme_dark" | default false -}}
+
 {{- $input := .Inner -}}
 
-<nav class="navbar navbar-expand-lg bg-dark supra" aria-label="{{ $aria_label }}">
+<nav class="navbar navbar-expand-lg supra"{{- if $theme_dark }} data-bs-theme="dark"{{- end }} aria-label="{{ $aria_label }}">
   <div class="container-xxl">
     <ul class="navbar-nav me-auto">
       <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
@@ -40,7 +43,7 @@
           </svg>
           <span class="visually-hidden">Basket</span>
           <span class="position-relative align-self-start">
-            <span class="badge text-bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
+            <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
               1
               <span class="visually-hidden">shopping basket items</span>
             </span>

From 9da374357500280f2f27566240d309151fc1499c Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Mon, 6 Nov 2023 15:25:07 +0100
Subject: [PATCH 25/71] Dark mode: Tables (#2349)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_root.scss                         |   8 +
 scss/_variables.scss                    |  12 +-
 site/content/docs/5.3/content/tables.md |   6 +-
 site/content/docs/5.3/dark-mode.md      | 379 ++++++++++++++++++++++++
 4 files changed, 396 insertions(+), 9 deletions(-)

diff --git a/scss/_root.scss b/scss/_root.scss
index 4776bff64f..c869697de4 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -150,6 +150,10 @@
   --#{$prefix}icon-filter: none;
   --#{$prefix}select-indicator: #{$form-select-indicator};
   --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator};
+  --#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor};
+  --#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor};
+  --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor};
+  --#{$prefix}table-active-bg-factor: #{$table-active-bg-factor};
   // ******* End additions for dark-mode
 }
 
@@ -238,6 +242,10 @@
     --#{$prefix}icon-filter: #{$invert-filter};
     --#{$prefix}select-indicator: #{$form-select-indicator-dark};
     --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator-dark};
+    --#{$prefix}table-striped-bg-factor: .135; // .2 if solid bg
+    --#{$prefix}table-striped-hover-bg-factor: .855; // .865 if solid bg
+    --#{$prefix}table-hover-bg-factor: .135; // .2 if solid bg
+    --#{$prefix}table-active-bg-factor: .565; // .6 if solid bg
     // ******* End additions for dark-mode
     // scss-docs-end root-dark-mode-vars
   }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 36e392e903..b494744c18 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -888,21 +888,21 @@ $table-th-font-weight:                  null !default;
 
 $table-striped-color:                   $table-color !default;
 $table-striped-bg-factor:               .065 !default; // Boosted mod
-$table-striped-bg:                      rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
-$table-striped-hover-color:             $table-color !default; // Boosted mod
+$table-striped-bg:                      rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-striped-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor)`
+$table-striped-hover-color:             var(--#{$prefix}black) !default; // Boosted mod
 $table-striped-hover-bg-factor:         .4 !default; // Boosted mod
-$table-striped-hover-bg:                rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-hover-bg-factor) !default; // Boosted mod
+$table-striped-hover-bg:                rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-striped-hover-bg-factor)) !default; // Boosted mod
 $table-variant-striped-bg-factor:       .2 !default; // Boosted mod
 $table-variant-striped-hover-bg-factor: .865 !default; // Boosted mod
 
-$table-active-color:                    $table-color !default;
+$table-active-color:                    var(--#{$prefix}black) !default; // Boosted mod: instead of `$table-color`
 $table-active-bg-factor:                .135 !default; // Boosted mod
-$table-active-bg:                       rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
+$table-active-bg:                       rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-active-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor)`
 $table-variant-active-bg-factor:        .6 !default; // Boosted mod
 
 $table-hover-color:                     $table-color !default;
 $table-hover-bg-factor:                 .065 !default; // Boosted mod
-$table-hover-bg:                        rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
+$table-hover-bg:                        rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-hover-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor)`
 $table-variant-hover-bg-factor:         .2 !default; // Boosted mod
 
 $table-border-factor:                   .4 !default; // Boosted mod
diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md
index 6bc770bc16..e2071fcc6a 100644
--- a/site/content/docs/5.3/content/tables.md
+++ b/site/content/docs/5.3/content/tables.md
@@ -914,7 +914,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
             </div>
           </td>
           <td>
-            <img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
+            <img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
             Cell text
           </td>
           <td>Cell text</td>
@@ -951,7 +951,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
             </div>
           </td>
           <td>
-            <img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
+            <img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
             Cell text
           </td>
           <td>Cell text</td>
@@ -1068,7 +1068,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
   <table class="table table-sm table-hover align-middle has-checkbox">
     ...
     <td>
-      <img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
+      <img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
       Cell text
     </td>
     ...
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 4d8df2a11e..9becb00320 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -4504,6 +4504,385 @@ sitemap_exclude: true
   <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="Tooltip title" data-bs-theme="light">Click to toggle tooltip</button>
 </div>
 
+## Contents
+
+### Tables
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <table class="table table-hover mb-5">
+    <caption>Boosted tables basic and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover caption-bottom mb-5">
+    <caption>Boosted tables striped and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover">
+    <caption>Boosted tables when nested</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in active row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+    </tbody>
+  </table>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <table class="table table-hover mb-5">
+    <caption>Boosted tables basic and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover caption-bottom mb-5">
+    <caption>Boosted tables striped and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover">
+    <caption>Boosted tables when nested</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in active row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+    </tbody>
+  </table>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <table class="table table-hover mb-5">
+    <caption>Boosted tables basic and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover caption-bottom mb-5">
+    <caption>Boosted tables striped and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover">
+    <caption>Boosted tables when nested</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in active row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+    </tbody>
+  </table>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <table class="table table-hover mb-5" data-bs-theme="dark">
+    <caption>Boosted tables basic and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover caption-bottom mb-5" data-bs-theme="dark">
+    <caption>Boosted tables striped and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover" data-bs-theme="dark">
+    <caption>Boosted tables when nested</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in active row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+    </tbody>
+  </table>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <table class="table table-hover mb-5" data-bs-theme="light">
+    <caption>Boosted tables basic and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover caption-bottom mb-5" data-bs-theme="light">
+    <caption>Boosted tables striped and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover" data-bs-theme="light">
+    <caption>Boosted tables when nested</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in active row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+    </tbody>
+  </table>
+</div>
+
 ## Forms
 
 ### Color

From a6b94d77b2be6933002caad6d683f38fba595483 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Tue, 7 Nov 2023 08:30:52 +0100
Subject: [PATCH 26/71] Dark mode: basic elements (#2355)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_reboot.scss                  |    9 +-
 scss/_root.scss                    |    3 +
 scss/_variables.scss               |    2 +-
 site/content/docs/5.3/dark-mode.md | 1009 ++++++++++++++++++++++++++++
 4 files changed, 1018 insertions(+), 5 deletions(-)

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 2c0312daa7..9c7fdebad7 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -246,9 +246,9 @@ li::marker {
   }
 }
 
-li li::marker { color: $gray-600; }
+li li::marker { color: var(--#{$prefix}placeholder-color); }
 
-li li li::marker { color: $gray-500; }
+li li li::marker { color: var(--#{$prefix}border-color-translucent); }
 
 // Bullet-proof markers' color
 // @todo To remove when ::marker support is OK
@@ -262,9 +262,9 @@ li::before {
   }
 }
 
-li li::before { color: $gray-600; }
+li li::before { color: var(--#{$prefix}placeholder-color); }
 
-li li li::before { color: $gray-500; }
+li li li::before { color: var(--#{$prefix}border-color-translucent); }
 // stylelint-enable selector-max-type
 // End mod
 
@@ -501,6 +501,7 @@ th {
 label {
   display: inline-block; // 1
   font-weight: $form-label-font-weight; // Boosted mod
+  color: var(--#{$prefix}body-color); // Boosted mod
 }
 
 // Remove the default `border-radius` that macOS Chrome adds.
diff --git a/scss/_root.scss b/scss/_root.scss
index c869697de4..e4326df544 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -1,5 +1,6 @@
 :root,
 [data-bs-theme="light"] {
+  color-scheme: light; // Boosted mod
   // Note: Custom variable values only support SassScript inside `#{}`.
 
   // Colors
@@ -154,6 +155,7 @@
   --#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor};
   --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor};
   --#{$prefix}table-active-bg-factor: #{$table-active-bg-factor};
+  --#{$prefix}body-color-subtle: #{$gray-900};
   // ******* End additions for dark-mode
 }
 
@@ -246,6 +248,7 @@
     --#{$prefix}table-striped-hover-bg-factor: .855; // .865 if solid bg
     --#{$prefix}table-hover-bg-factor: .135; // .2 if solid bg
     --#{$prefix}table-active-bg-factor: .565; // .6 if solid bg
+    --#{$prefix}body-color-subtle: #{$gray-300};
     // ******* End additions for dark-mode
     // scss-docs-end root-dark-mode-vars
   }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index b494744c18..1540e78663 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2250,7 +2250,7 @@ $kbd-color:                         var(--#{$prefix}kbd-color, $black) !default;
 $kbd-bg:                            var(--#{$prefix}kbd-bg, $gray-300) !default;
 $nested-kbd-font-weight:            null !default; // Deprecated in v5.2.0, removing in v6
 
-$pre-color:                         var(--#{$prefix}pre-color, $gray-900) !default;
+$pre-color:                         var(--#{$prefix}body-color-subtle) !default;
 $pre-line-height:                   1.25 !default;
 // End mod
 
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 9becb00320..0751771c46 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -126,6 +126,11 @@ sitemap_exclude: true
     <div style="width: 50px; height: 50px; background-color:var(--bs-black-tweak)" data-bs-theme="light"></div>
     <div style="width: 50px; height: 50px; background-color:var(--bs-black-tweak)" data-bs-theme="dark"></div>
   </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-body-color-subtle</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-body-color-subtle)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-body-color-subtle)" data-bs-theme="dark"></div>
+  </div>
 </div>
 
 ## Components
@@ -4506,6 +4511,1010 @@ sitemap_exclude: true
 
 ## Contents
 
+### Basic text elements
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex flex-column align-items-start border border-tertiary p-3">
+  <h1>H1</h1>
+  <h2>H2</h2>
+  <h3>H3</h3>
+  <h4>H4</h4>
+  <p>Paragraph</p>
+  <a href="#">Link</a>
+  <hr class="w-100">
+  <ul>
+    <li>First layer
+      <ul>
+        <li>Second layer
+          <ul>
+            <li>Third layer</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <ol>
+    <li>First layer
+      <ol>
+        <li>Second layer
+          <ol>
+            <li>Third layer</li>
+          </ol>
+        </li>
+      </ol>
+    </li>
+  </ol>
+  <dl>
+    <dt>Description lists</dt>
+    <dd>First description</dd>
+    <dt>Second title</dt>
+    <dd>Second description</dd>
+  </dl>
+  <code>Code example</code>
+  <pre>Preformatted text</pre>
+  <var>Variable text</var>
+  <kbd>Keyboard input</kbd>
+  <samp>Sample output</samp>
+  <address>
+    <strong>Address</strong><br>
+    1123 Fictional St,<br>
+    San Francisco, CA 94103<br>
+    <abbr title="Phone">P:</abbr> (123) 456-7890
+  </address>
+  <blockquote>
+    Blockquote
+  </blockquote>
+  <figure>
+    <blockquote class="blockquote">
+      <p>Styles Blockquote</p>
+    </blockquote>
+    <figcaption class="blockquote-footer">
+      Figcaption <cite title="Source Title">Source</cite>
+    </figcaption>
+  </figure>
+  <abbr title="Abbreviation">Abbr</abbr>
+  <details>
+    <summary>Summary</summary>
+    <p>Details</p>
+  </details>
+  <p><mark>highlight</mark></p>
+  <p><del>This line of text is meant to be treated as deleted text.</del></p>
+  <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+  <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+  <p><u>This line of text will render as underlined.</u></p>
+  <p><small>This line of text is meant to be treated as fine print.</small></p>
+  <p><strong>This line rendered as bold text.</strong></p>
+  <p><em>This line rendered as bold text too.</em></p>
+  <svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a gray border around it: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a gray border around it</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/><text x="50%" y="50%" fill="#999" dy=".3em">200x200</text></svg>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex flex-column align-items-start border border-tertiary p-3 bg-body text-body" data-bs-theme="dark">
+  <h1>H1</h1>
+  <h2>H2</h2>
+  <h3>H3</h3>
+  <h4>H4</h4>
+  <p>Paragraph</p>
+  <a href="#">Link</a>
+  <hr class="w-100">
+  <ul>
+    <li>First layer
+      <ul>
+        <li>Second layer
+          <ul>
+            <li>Third layer</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <ol>
+    <li>First layer
+      <ol>
+        <li>Second layer
+          <ol>
+            <li>Third layer</li>
+          </ol>
+        </li>
+      </ol>
+    </li>
+  </ol>
+  <dl>
+    <dt>Description lists</dt>
+    <dd>First description</dd>
+    <dt>Second title</dt>
+    <dd>Second description</dd>
+  </dl>
+  <code>Code example</code>
+  <pre>Preformatted text</pre>
+  <var>Variable text</var>
+  <kbd>Keyboard input</kbd>
+  <samp>Sample output</samp>
+  <address>
+    <strong>Address</strong><br>
+    1123 Fictional St,<br>
+    San Francisco, CA 94103<br>
+    <abbr title="Phone">P:</abbr> (123) 456-7890
+  </address>
+  <blockquote>
+    Blockquote
+  </blockquote>
+  <figure>
+    <blockquote class="blockquote">
+      <p>Styles Blockquote</p>
+    </blockquote>
+    <figcaption class="blockquote-footer">
+      Figcaption <cite title="Source Title">Source</cite>
+    </figcaption>
+  </figure>
+  <abbr title="Abbreviation">Abbr</abbr>
+  <details>
+    <summary>Summary</summary>
+    <p>Details</p>
+  </details>
+  <p><mark>highlight</mark></p>
+  <p><del>This line of text is meant to be treated as deleted text.</del></p>
+  <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+  <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+  <p><u>This line of text will render as underlined.</u></p>
+  <p><small>This line of text is meant to be treated as fine print.</small></p>
+  <p><strong>This line rendered as bold text.</strong></p>
+  <p><em>This line rendered as bold text too.</em></p>
+  <svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a gray border around it: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a gray border around it</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/><text x="50%" y="50%" fill="#999" dy=".3em">200x200</text></svg>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex flex-column align-items-start border border-tertiary p-3 bg-body text-body" data-bs-theme="light">
+  <h1>H1</h1>
+  <h2>H2</h2>
+  <h3>H3</h3>
+  <h4>H4</h4>
+  <p>Paragraph</p>
+  <a href="#">Link</a>
+  <hr class="w-100">
+  <ul>
+    <li>First layer
+      <ul>
+        <li>Second layer
+          <ul>
+            <li>Third layer</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <ol>
+    <li>First layer
+      <ol>
+        <li>Second layer
+          <ol>
+            <li>Third layer</li>
+          </ol>
+        </li>
+      </ol>
+    </li>
+  </ol>
+  <dl>
+    <dt>Description lists</dt>
+    <dd>First description</dd>
+    <dt>Second title</dt>
+    <dd>Second description</dd>
+  </dl>
+  <code>Code example</code>
+  <pre>Preformatted text</pre>
+  <var>Variable text</var>
+  <kbd>Keyboard input</kbd>
+  <samp>Sample output</samp>
+  <address>
+    <strong>Address</strong><br>
+    1123 Fictional St,<br>
+    San Francisco, CA 94103<br>
+    <abbr title="Phone">P:</abbr> (123) 456-7890
+  </address>
+  <blockquote>
+    Blockquote
+  </blockquote>
+  <figure>
+    <blockquote class="blockquote">
+      <p>Styles Blockquote</p>
+    </blockquote>
+    <figcaption class="blockquote-footer">
+      Figcaption <cite title="Source Title">Source</cite>
+    </figcaption>
+  </figure>
+  <abbr title="Abbreviation">Abbr</abbr>
+  <details>
+    <summary>Summary</summary>
+    <p>Details</p>
+  </details>
+  <p><mark>highlight</mark></p>
+  <p><del>This line of text is meant to be treated as deleted text.</del></p>
+  <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+  <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+  <p><u>This line of text will render as underlined.</u></p>
+  <p><small>This line of text is meant to be treated as fine print.</small></p>
+  <p><strong>This line rendered as bold text.</strong></p>
+  <p><em>This line rendered as bold text too.</em></p>
+  <svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a gray border around it: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a gray border around it</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/><text x="50%" y="50%" fill="#999" dy=".3em">200x200</text></svg>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex flex-column align-items-start border border-tertiary p-3" style="background-color: #282d55;">
+  <h1 data-bs-theme="dark">H1</h1>
+  <h2 data-bs-theme="dark">H2</h2>
+  <h3 data-bs-theme="dark">H3</h3>
+  <h4 data-bs-theme="dark">H4</h4>
+  <p class="text-body" data-bs-theme="dark">Paragraph</p>
+  <a data-bs-theme="dark" href="#">Link</a>
+  <hr class="w-100" data-bs-theme="dark">
+  <ul class="text-body" data-bs-theme="dark">
+    <li>First layer
+      <ul>
+        <li>Second layer
+          <ul>
+            <li>Third layer</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <ol class="text-body" data-bs-theme="dark">
+    <li>First layer
+      <ol>
+        <li>Second layer
+          <ol>
+            <li>Third layer</li>
+          </ol>
+        </li>
+      </ol>
+    </li>
+  </ol>
+  <dl class="text-body" data-bs-theme="dark">
+    <dt>Description lists</dt>
+    <dd>First description</dd>
+    <dt>Second title</dt>
+    <dd>Second description</dd>
+  </dl>
+  <code data-bs-theme="dark">Code example</code>
+  <pre data-bs-theme="dark">Preformatted text</pre>
+  <var data-bs-theme="dark">Variable text</var>
+  <kbd data-bs-theme="dark">Keyboard input</kbd>
+  <samp class="text-body" data-bs-theme="dark">Sample output</samp>
+  <address class="text-body" data-bs-theme="dark">
+    <strong>Address</strong><br>
+    1123 Fictional St,<br>
+    San Francisco, CA 94103<br>
+    <abbr title="Phone">P:</abbr> (123) 456-7890
+  </address>
+  <blockquote class="text-body" data-bs-theme="dark">
+    Blockquote
+  </blockquote>
+  <figure class="text-body" data-bs-theme="dark">
+    <blockquote class="blockquote">
+      <p>Styles Blockquote</p>
+    </blockquote>
+    <figcaption class="blockquote-footer">
+      Figcaption <cite title="Source Title">Source</cite>
+    </figcaption>
+  </figure>
+  <abbr class="text-body" data-bs-theme="dark" title="Abbreviation">Abbr</abbr>
+  <details class="text-body" data-bs-theme="dark">
+    <summary>Summary</summary>
+    <p>Details</p>
+  </details>
+  <p><mark data-bs-theme="dark">highlight</mark></p>
+  <p><del class="text-body" data-bs-theme="dark">This line of text is meant to be treated as deleted text.</del></p>
+  <p><s class="text-body" data-bs-theme="dark">This line of text is meant to be treated as no longer accurate.</s></p>
+  <p><ins class="text-body" data-bs-theme="dark">This line of text is meant to be treated as an addition to the document.</ins></p>
+  <p><u class="text-body" data-bs-theme="dark">This line of text will render as underlined.</u></p>
+  <p><small class="text-body" data-bs-theme="dark">This line of text is meant to be treated as fine print.</small></p>
+  <p><strong class="text-body" data-bs-theme="dark">This line rendered as bold text.</strong></p>
+  <p><em class="text-body" data-bs-theme="dark">This line rendered as bold text too.</em></p>
+  <svg data-bs-theme="dark" class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a gray border around it: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a gray border around it</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/><text x="50%" y="50%" fill="#999" dy=".3em">200x200</text></svg>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex flex-column align-items-start border border-tertiary p-3" style="background-color: #b5e8f7">
+  <h1 data-bs-theme="light">H1</h1>
+  <h2 data-bs-theme="light">H2</h2>
+  <h3 data-bs-theme="light">H3</h3>
+  <h4 data-bs-theme="light">H4</h4>
+  <p class="text-body" data-bs-theme="light">Paragraph</p>
+  <a data-bs-theme="light" href="#">Link</a>
+  <hr class="w-100" data-bs-theme="light">
+  <ul class="text-body" data-bs-theme="light">
+    <li>First layer
+      <ul>
+        <li>Second layer
+          <ul>
+            <li>Third layer</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <ol class="text-body" data-bs-theme="light">
+    <li>First layer
+      <ol>
+        <li>Second layer
+          <ol>
+            <li>Third layer</li>
+          </ol>
+        </li>
+      </ol>
+    </li>
+  </ol>
+  <dl class="text-body" data-bs-theme="light">
+    <dt>Description lists</dt>
+    <dd>First description</dd>
+    <dt>Second title</dt>
+    <dd>Second description</dd>
+  </dl>
+  <code data-bs-theme="light">Code example</code>
+  <pre data-bs-theme="light">Preformatted text</pre>
+  <var data-bs-theme="light">Variable text</var>
+  <kbd data-bs-theme="light">Keyboard input</kbd>
+  <samp class="text-body" data-bs-theme="light">Sample output</samp>
+  <address class="text-body" data-bs-theme="light">
+    <strong>Address</strong><br>
+    1123 Fictional St,<br>
+    San Francisco, CA 94103<br>
+    <abbr title="Phone">P:</abbr> (123) 456-7890
+  </address>
+  <blockquote class="text-body" data-bs-theme="light">
+    Blockquote
+  </blockquote>
+  <figure class="text-body" data-bs-theme="light">
+    <blockquote class="blockquote">
+      <p>Styles Blockquote</p>
+    </blockquote>
+    <figcaption class="blockquote-footer">
+      Figcaption <cite title="Source Title">Source</cite>
+    </figcaption>
+  </figure>
+  <abbr class="text-body" data-bs-theme="light" title="Abbreviation">Abbr</abbr>
+  <details class="text-body" data-bs-theme="light">
+    <summary>Summary</summary>
+    <p>Details</p>
+  </details>
+  <p><mark data-bs-theme="light">highlight</mark></p>
+  <p><del class="text-body" data-bs-theme="light">This line of text is meant to be treated as deleted text.</del></p>
+  <p><s class="text-body" data-bs-theme="light">This line of text is meant to be treated as no longer accurate.</s></p>
+  <p><ins class="text-body" data-bs-theme="light">This line of text is meant to be treated as an addition to the document.</ins></p>
+  <p><u class="text-body" data-bs-theme="light">This line of text will render as underlined.</u></p>
+  <p><small class="text-body" data-bs-theme="light">This line of text is meant to be treated as fine print.</small></p>
+  <p><strong class="text-body" data-bs-theme="light">This line rendered as bold text.</strong></p>
+  <p><em class="text-body" data-bs-theme="light">This line rendered as bold text too.</em></p>
+  <svg data-bs-theme="light" class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a gray border around it: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a gray border around it</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/><text x="50%" y="50%" fill="#999" dy=".3em">200x200</text></svg>
+</div>
+
+### Basic form elements
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex flex-column border border-tertiary p-3">
+  <fieldset>
+    <legend>Example legend</legend>
+    <p>
+      <label for="input1">Example input</label>
+      <input type="text" id="input1" placeholder="Example input">
+    </p>
+    <p>
+      <label for="email1">Example email</label>
+      <input type="email" id="email1" placeholder="test@example.com" class="">
+    </p>
+    <p>
+      <label for="tel1">Example telephone</label>
+      <input type="tel" id="tel1">
+    </p>
+    <p>
+      <label for="url1">Example url</label>
+      <input type="url" id="url1" class="">
+    </p>
+    <p>
+      <label for="number1">Example number</label>
+      <input type="number" id="number1">
+    </p>
+    <p>
+      <label for="search1">Example search</label>
+      <input type="search" id="search1">
+    </p>
+    <p>
+      <label for="range1">Example range</label>
+      <input type="range" id="range1" min="0" max="10">
+    </p>
+    <p>
+      <label for="file1">Example file input</label>
+      <input type="file" id="file1">
+    </p>
+    <p>
+      <label for="select1">Example select</label>
+      <select id="select1">
+        <option value="">Choose...</option>
+        <optgroup label="Option group 1">
+          <option value="">Option 1</option>
+          <option value="">Option 2</option>
+          <option value="">Option 3</option>
+        </optgroup>
+        <optgroup label="Option group 2">
+          <option value="">Option 4</option>
+          <option value="">Option 5</option>
+          <option value="">Option 6</option>
+        </optgroup>
+      </select>
+    </p>
+    <p>
+      <label>
+        <input type="checkbox" value="">
+        Check this checkbox
+      </label>
+    </p>
+    <p>
+      <label>
+        <input type="radio" name="optionsRadios1" id="optionsRadios11" value="option1" checked="">
+        Option one is this and that
+      </label>
+      <label>
+        <input type="radio" name="optionsRadios1" id="optionsRadios21" value="option2">
+        Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
+      </label>
+      <label>
+        <input type="radio" name="optionsRadios1" id="optionsRadios31" value="option3" disabled="">
+        Option three is disabled
+      </label>
+    </p>
+    <p>
+      <label for="textarea1">Example textarea</label>
+      <textarea id="textarea1" rows="3"></textarea>
+    </p>
+    <p>
+      <label for="date1">Example date</label>
+      <input type="date" id="date1">
+    </p>
+    <p>
+      <label for="time1">Example time</label>
+      <input type="time" id="time1">
+    </p>
+    <p>
+      <label for="password1">Example password</label>
+      <input type="password" id="password1">
+    </p>
+    <p>
+      <label for="datetime-local1">Example datetime-local</label>
+      <input type="datetime-local" id="datetime-local1">
+    </p>
+    <p>
+      <label for="week1">Example week</label>
+      <input type="week" id="week1">
+    </p>
+    <p>
+      <label for="month1">Example month</label>
+      <input type="month" id="month1">
+    </p>
+    <p>
+      <label for="color1">Example color</label>
+      <input type="color" id="color1">
+    </p>
+    <p>
+      <label for="output1">Example output</label>
+      <output name="result1" id="output1" class="text-body">100</output>
+    </p>
+    <p>
+      <button type="submit">Button submit</button>
+      <input type="submit" value="Input submit button">
+      <input type="reset" value="Input reset button">
+      <input type="button" value="Input button">
+    </p>
+    <p>
+      <button type="submit" disabled="">Button submit</button>
+      <input type="submit" value="Input submit button" disabled="">
+      <input type="reset" value="Input reset button" disabled="">
+      <input type="button" value="Input button" disabled="">
+    </p>
+  </fieldset>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <fieldset>
+    <legend>Example legend</legend>
+    <p>
+      <label for="input2">Example input</label>
+      <input type="text" id="input2" placeholder="Example input">
+    </p>
+    <p>
+      <label for="email2">Example email</label>
+      <input type="email" id="email2" placeholder="test@example.com" class="">
+    </p>
+    <p>
+      <label for="tel2">Example telephone</label>
+      <input type="tel" id="tel2">
+    </p>
+    <p>
+      <label for="url2">Example url</label>
+      <input type="url" id="url2" class="">
+    </p>
+    <p>
+      <label for="number2">Example number</label>
+      <input type="number" id="number2">
+    </p>
+    <p>
+      <label for="search2">Example search</label>
+      <input type="search" id="search2">
+    </p>
+    <p>
+      <label for="range2">Example range</label>
+      <input type="range" id="range2" min="0" max="10">
+    </p>
+    <p>
+      <label for="file2">Example file input</label>
+      <input type="file" id="file2">
+    </p>
+    <p>
+      <label for="select2">Example select</label>
+      <select id="select2">
+        <option value="">Choose...</option>
+        <optgroup label="Option group 1">
+          <option value="">Option 1</option>
+          <option value="">Option 2</option>
+          <option value="">Option 3</option>
+        </optgroup>
+        <optgroup label="Option group 2">
+          <option value="">Option 4</option>
+          <option value="">Option 5</option>
+          <option value="">Option 6</option>
+        </optgroup>
+      </select>
+    </p>
+    <p>
+      <label>
+        <input type="checkbox" value="">
+        Check this checkbox
+      </label>
+    </p>
+    <p>
+      <label>
+        <input type="radio" name="optionsRadios2" id="optionsRadios12" value="option1" checked="">
+        Option one is this and that
+      </label>
+      <label>
+        <input type="radio" name="optionsRadios2" id="optionsRadios22" value="option2">
+        Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
+      </label>
+      <label>
+        <input type="radio" name="optionsRadios2" id="optionsRadios32" value="option3" disabled="">
+        Option three is disabled
+      </label>
+    </p>
+    <p>
+      <label for="textarea2">Example textarea</label>
+      <textarea id="textarea2" rows="3"></textarea>
+    </p>
+    <p>
+      <label for="date2">Example date</label>
+      <input type="date" id="date2">
+    </p>
+    <p>
+      <label for="time2">Example time</label>
+      <input type="time" id="time2">
+    </p>
+    <p>
+      <label for="password2">Example password</label>
+      <input type="password" id="password2">
+    </p>
+    <p>
+      <label for="datetime-local2">Example datetime-local</label>
+      <input type="datetime-local" id="datetime-local2">
+    </p>
+    <p>
+      <label for="week2">Example week</label>
+      <input type="week" id="week2">
+    </p>
+    <p>
+      <label for="month2">Example month</label>
+      <input type="month" id="month2">
+    </p>
+    <p>
+      <label for="color2">Example color</label>
+      <input type="color" id="color2">
+    </p>
+    <p>
+      <label for="output2">Example output</label>
+      <output name="result2" id="output2" class="text-body">100</output>
+    </p>
+    <p>
+      <button type="submit">Button submit</button>
+      <input type="submit" value="Input submit button">
+      <input type="reset" value="Input reset button">
+      <input type="button" value="Input button">
+    </p>
+    <p>
+      <button type="submit" disabled="">Button submit</button>
+      <input type="submit" value="Input submit button" disabled="">
+      <input type="reset" value="Input reset button" disabled="">
+      <input type="button" value="Input button" disabled="">
+    </p>
+  </fieldset>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <fieldset>
+    <legend>Example legend</legend>
+    <p>
+      <label for="input3">Example input</label>
+      <input type="text" id="input3" placeholder="Example input">
+    </p>
+    <p>
+      <label for="email3">Example email</label>
+      <input type="email" id="email3" placeholder="test@example.com" class="">
+    </p>
+    <p>
+      <label for="tel3">Example telephone</label>
+      <input type="tel" id="tel3">
+    </p>
+    <p>
+      <label for="url3">Example url</label>
+      <input type="url" id="url3" class="">
+    </p>
+    <p>
+      <label for="number3">Example number</label>
+      <input type="number" id="number3">
+    </p>
+    <p>
+      <label for="search3">Example search</label>
+      <input type="search" id="search3">
+    </p>
+    <p>
+      <label for="range3">Example range</label>
+      <input type="range" id="range3" min="0" max="10">
+    </p>
+    <p>
+      <label for="file3">Example file input</label>
+      <input type="file" id="file3">
+    </p>
+    <p>
+      <label for="select3">Example select</label>
+      <select id="select3">
+        <option value="">Choose...</option>
+        <optgroup label="Option group 1">
+          <option value="">Option 1</option>
+          <option value="">Option 2</option>
+          <option value="">Option 3</option>
+        </optgroup>
+        <optgroup label="Option group 2">
+          <option value="">Option 4</option>
+          <option value="">Option 5</option>
+          <option value="">Option 6</option>
+        </optgroup>
+      </select>
+    </p>
+    <p>
+      <label>
+        <input type="checkbox" value="">
+        Check this checkbox
+      </label>
+    </p>
+    <p>
+      <label>
+        <input type="radio" name="optionsRadios3" id="optionsRadios13" value="option1" checked="">
+        Option one is this and that
+      </label>
+      <label>
+        <input type="radio" name="optionsRadios3" id="optionsRadios23" value="option2">
+        Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
+      </label>
+      <label>
+        <input type="radio" name="optionsRadios3" id="optionsRadios33" value="option3" disabled="">
+        Option three is disabled
+      </label>
+    </p>
+    <p>
+      <label for="textarea3">Example textarea</label>
+      <textarea id="textarea3" rows="3"></textarea>
+    </p>
+    <p>
+      <label for="date3">Example date</label>
+      <input type="date" id="date3">
+    </p>
+    <p>
+      <label for="time3">Example time</label>
+      <input type="time" id="time3">
+    </p>
+    <p>
+      <label for="password3">Example password</label>
+      <input type="password" id="password3">
+    </p>
+    <p>
+      <label for="datetime-local3">Example datetime-local</label>
+      <input type="datetime-local" id="datetime-local3">
+    </p>
+    <p>
+      <label for="week3">Example week</label>
+      <input type="week" id="week3">
+    </p>
+    <p>
+      <label for="month3">Example month</label>
+      <input type="month" id="month3">
+    </p>
+    <p>
+      <label for="color3">Example color</label>
+      <input type="color" id="color3">
+    </p>
+    <p>
+      <label for="output3">Example output</label>
+      <output name="result3" id="output3" class="text-body">100</output>
+    </p>
+    <p>
+      <button type="submit">Button submit</button>
+      <input type="submit" value="Input submit button">
+      <input type="reset" value="Input reset button">
+      <input type="button" value="Input button">
+    </p>
+    <p>
+      <button type="submit" disabled="">Button submit</button>
+      <input type="submit" value="Input submit button" disabled="">
+      <input type="reset" value="Input reset button" disabled="">
+      <input type="button" value="Input button" disabled="">
+    </p>
+  </fieldset>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <fieldset>
+    <legend class="text-body" data-bs-theme="dark">Example legend</legend>
+    <p>
+      <label for="input4" data-bs-theme="dark">Example input</label>
+      <input type="text" id="input4" data-bs-theme="dark" placeholder="Example input">
+    </p>
+    <p>
+      <label for="email4" data-bs-theme="dark">Example email</label>
+      <input type="email" id="email4" data-bs-theme="dark" placeholder="test@example.com" class="">
+    </p>
+    <p>
+      <label for="tel4" data-bs-theme="dark">Example telephone</label>
+      <input type="tel" id="tel4" data-bs-theme="dark">
+    </p>
+    <p>
+      <label for="url4" data-bs-theme="dark">Example url</label>
+      <input type="url" id="url4" data-bs-theme="dark" class="">
+    </p>
+    <p>
+      <label for="number4" data-bs-theme="dark">Example number</label>
+      <input type="number" id="number4" data-bs-theme="dark">
+    </p>
+    <p>
+      <label for="search4" data-bs-theme="dark">Example search</label>
+      <input type="search" id="search4" data-bs-theme="dark">
+    </p>
+    <p>
+      <label for="range4" data-bs-theme="dark">Example range</label>
+      <input type="range" id="range4" data-bs-theme="dark" min="0" max="10">
+    </p>
+    <p>
+      <label for="file4" data-bs-theme="dark">Example file input</label>
+      <input type="file" id="file4" data-bs-theme="dark">
+    </p>
+    <p>
+      <label for="select4" data-bs-theme="dark">Example select</label>
+      <select id="select4" data-bs-theme="dark">
+        <option value="">Choose...</option>
+        <optgroup label="Option group 1">
+          <option value="">Option 1</option>
+          <option value="">Option 2</option>
+          <option value="">Option 3</option>
+        </optgroup>
+        <optgroup label="Option group 2">
+          <option value="">Option 4</option>
+          <option value="">Option 5</option>
+          <option value="">Option 6</option>
+        </optgroup>
+      </select>
+    </p>
+    <p>
+      <label data-bs-theme="dark">
+        <input type="checkbox" value="">
+        Check this checkbox
+      </label>
+    </p>
+    <p>
+      <label data-bs-theme="dark">
+        <input type="radio" name="optionsRadios4" id="optionsRadios14" value="option1" checked="">
+        Option one is this and that
+      </label>
+      <label data-bs-theme="dark">
+        <input type="radio" name="optionsRadios4" id="optionsRadios24" value="option2">
+        Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
+      </label>
+      <label data-bs-theme="dark">
+        <input type="radio" name="optionsRadios4" id="optionsRadios34" value="option3" disabled="">
+        Option three is disabled
+      </label>
+    </p>
+    <p>
+      <label for="textarea4" data-bs-theme="dark">Example textarea</label>
+      <textarea id="textarea4" data-bs-theme="dark" rows="3"></textarea>
+    </p>
+    <p>
+      <label for="date4" data-bs-theme="dark">Example date</label>
+      <input type="date" id="date4" data-bs-theme="dark">
+    </p>
+    <p>
+      <label for="time4" data-bs-theme="dark">Example time</label>
+      <input type="time" id="time4" data-bs-theme="dark">
+    </p>
+    <p>
+      <label for="password4" data-bs-theme="dark">Example password</label>
+      <input type="password" id="password4" data-bs-theme="dark">
+    </p>
+    <p>
+      <label for="datetime-local4" data-bs-theme="dark">Example datetime-local</label>
+      <input type="datetime-local" id="datetime-local4" data-bs-theme="dark">
+    </p>
+    <p>
+      <label for="week4" data-bs-theme="dark">Example week</label>
+      <input type="week" id="week4" data-bs-theme="dark">
+    </p>
+    <p>
+      <label for="month4" data-bs-theme="dark">Example month</label>
+      <input type="month" id="month4" data-bs-theme="dark">
+    </p>
+    <p>
+      <label for="color4" data-bs-theme="dark">Example color</label>
+      <input type="color" id="color4" data-bs-theme="dark">
+    </p>
+    <p>
+      <label for="output4" data-bs-theme="dark">Example output</label>
+      <output name="result4" id="output4" data-bs-theme="dark" class="text-body">100</output>
+    </p>
+    <p>
+      <button type="submit" data-bs-theme="dark">Button submit</button>
+      <input type="submit" data-bs-theme="dark" value="Input submit button">
+      <input type="reset" data-bs-theme="dark" value="Input reset button">
+      <input type="button" data-bs-theme="dark" value="Input button">
+    </p>
+    <p>
+      <button type="submit" data-bs-theme="dark" disabled="">Button submit</button>
+      <input type="submit" data-bs-theme="dark" value="Input submit button" disabled="">
+      <input type="reset" data-bs-theme="dark" value="Input reset button" disabled="">
+      <input type="button" data-bs-theme="dark" value="Input button" disabled="">
+    </p>
+  </fieldset>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <fieldset>
+    <legend class="text-body" data-bs-theme="light">Example legend</legend>
+    <p>
+      <label for="input5" data-bs-theme="light">Example input</label>
+      <input type="text" id="input5" data-bs-theme="light" placeholder="Example input">
+    </p>
+    <p>
+      <label for="email5" data-bs-theme="light">Example email</label>
+      <input type="email" id="email5" data-bs-theme="light" placeholder="test@example.com" class="">
+    </p>
+    <p>
+      <label for="tel5" data-bs-theme="light">Example telephone</label>
+      <input type="tel" id="tel5" data-bs-theme="light">
+    </p>
+    <p>
+      <label for="url5" data-bs-theme="light">Example url</label>
+      <input type="url" id="url5" data-bs-theme="light" class="">
+    </p>
+    <p>
+      <label for="number5" data-bs-theme="light">Example number</label>
+      <input type="number" id="number5" data-bs-theme="light">
+    </p>
+    <p>
+      <label for="search5" data-bs-theme="light">Example search</label>
+      <input type="search" id="search5" data-bs-theme="light">
+    </p>
+    <p>
+      <label for="range5" data-bs-theme="light">Example range</label>
+      <input type="range" id="range5" data-bs-theme="light" min="0" max="10">
+    </p>
+    <p>
+      <label for="file5" data-bs-theme="light">Example file input</label>
+      <input type="file" id="file5" data-bs-theme="light">
+    </p>
+    <p>
+      <label for="select5" data-bs-theme="light">Example select</label>
+      <select id="select5" data-bs-theme="light">
+        <option value="">Choose...</option>
+        <optgroup label="Option group 1">
+          <option value="">Option 1</option>
+          <option value="">Option 2</option>
+          <option value="">Option 3</option>
+        </optgroup>
+        <optgroup label="Option group 2">
+          <option value="">Option 4</option>
+          <option value="">Option 5</option>
+          <option value="">Option 6</option>
+        </optgroup>
+      </select>
+    </p>
+    <p>
+      <label data-bs-theme="light">
+        <input type="checkbox" value="">
+        Check this checkbox
+      </label>
+    </p>
+    <p>
+      <label data-bs-theme="light">
+        <input type="radio" name="optionsRadios5" id="optionsRadios15" value="option1" checked="">
+        Option one is this and that
+      </label>
+      <label data-bs-theme="light">
+        <input type="radio" name="optionsRadios5" id="optionsRadios25" value="option2">
+        Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
+      </label>
+      <label data-bs-theme="light">
+        <input type="radio" name="optionsRadios5" id="optionsRadios35" value="option3" disabled="">
+        Option three is disabled
+      </label>
+    </p>
+    <p>
+      <label for="textarea5" data-bs-theme="light">Example textarea</label>
+      <textarea id="textarea5" data-bs-theme="light" rows="3"></textarea>
+    </p>
+    <p>
+      <label for="date5" data-bs-theme="light">Example date</label>
+      <input type="date" id="date5" data-bs-theme="light">
+    </p>
+    <p>
+      <label for="time5" data-bs-theme="light">Example time</label>
+      <input type="time" id="time5" data-bs-theme="light">
+    </p>
+    <p>
+      <label for="password5" data-bs-theme="light">Example password</label>
+      <input type="password" id="password5" data-bs-theme="light">
+    </p>
+    <p>
+      <label for="datetime-local5" data-bs-theme="light">Example datetime-local</label>
+      <input type="datetime-local" id="datetime-local5" data-bs-theme="light">
+    </p>
+    <p>
+      <label for="week5" data-bs-theme="light">Example week</label>
+      <input type="week" id="week5" data-bs-theme="light">
+    </p>
+    <p>
+      <label for="month5" data-bs-theme="light">Example month</label>
+      <input type="month" id="month5" data-bs-theme="light">
+    </p>
+    <p>
+      <label for="color5" data-bs-theme="light">Example color</label>
+      <input type="color" id="color5" data-bs-theme="light">
+    </p>
+    <p>
+      <label for="output5" data-bs-theme="light">Example output</label>
+      <output name="result5" id="output5" data-bs-theme="light" class="text-body">100</output>
+    </p>
+    <p>
+      <button type="submit" data-bs-theme="light">Button submit</button>
+      <input type="submit" data-bs-theme="light" value="Input submit button">
+      <input type="reset" data-bs-theme="light" value="Input reset button">
+      <input type="button" data-bs-theme="light" value="Input button">
+    </p>
+    <p>
+      <button type="submit" data-bs-theme="light" disabled="">Button submit</button>
+      <input type="submit" data-bs-theme="light" value="Input submit button" disabled="">
+      <input type="reset" data-bs-theme="light" value="Input reset button" disabled="">
+      <input type="button" data-bs-theme="light" value="Input button" disabled="">
+    </p>
+  </fieldset>
+</div>
+
 ### Tables
 
 <h4 class="mt-3">No theme</h4>

From 54e034b632e04fde38a39035226d6dbd6e56407c Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Tue, 7 Nov 2023 09:52:12 +0100
Subject: [PATCH 27/71] Dark mode: Footer (#2356)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_footer.scss                             |  46 +-
 scss/_variables.scss                          |   7 +-
 .../docs/5.3/components/orange-navbar.md      |   2 +-
 site/content/docs/5.3/dark-mode.md            | 771 +++++++++++++++++-
 .../docs/5.3/examples/download-app/index.html |   2 +-
 .../content/docs/5.3/examples/form/index.html |   2 +-
 site/layouts/partials/footer.html             |   2 +-
 site/layouts/shortcodes/orange-footer.html    |   4 +-
 .../shortcodes/orange-global-headers.html     |   2 +-
 9 files changed, 775 insertions(+), 63 deletions(-)

diff --git a/scss/_footer.scss b/scss/_footer.scss
index 28a066476d..945021e4ad 100644
--- a/scss/_footer.scss
+++ b/scss/_footer.scss
@@ -1,28 +1,35 @@
 .footer {
-  > * {
-    // scss-docs-start footer-part-css-vars
-    --#{$prefix}footer-gap: 0;
-    --#{$prefix}footer-padding-top: 0;
-    --#{$prefix}footer-padding-bottom: 0;
-    --#{$prefix}footer-title-margin-bottom: 0;
-    --#{$prefix}footer-title-font-size: #{$footer-font-size-md};
-    --#{$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
-    --#{$prefix}navbar-nav-font-size: #{$footer-font-size-sm};
-    --#{$prefix}navbar-nav-line-height: #{$footer-line-height-sm};
-    --#{$prefix}navbar-nav-letter-spacing: #{$footer-letter-spacing};
+  // scss-docs-start footer-part-css-vars
+  --#{$prefix}footer-gap: 0;
+  --#{$prefix}footer-padding-top: 0;
+  --#{$prefix}footer-padding-bottom: 0;
+  --#{$prefix}footer-color: #{$footer-color};
+  --#{$prefix}footer-title-margin-bottom: 0;
+  --#{$prefix}footer-title-font-size: #{$footer-font-size-md};
+  --#{$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
+  --#{$prefix}navbar-padding-y: 0;
+  --#{$prefix}navbar-nav-link-padding-y: 0;
+  --#{$prefix}navbar-nav-link-padding-x: 0;
+  --#{$prefix}navbar-nav-font-size: #{$footer-font-size-sm};
+  --#{$prefix}navbar-nav-line-height: #{$footer-line-height-sm};
+  --#{$prefix}navbar-nav-letter-spacing: #{$footer-letter-spacing};
+
+  display: block;
+  color: var(--#{$prefix}footer-color);
+  box-shadow: none;
+
+  > [class*="container"] {
+    display: block;
+  }
 
+  > * {
     padding-top: var(--#{$prefix}footer-padding-top);
     padding-bottom: var(--#{$prefix}footer-padding-bottom);
-    color: var(--#{$prefix}body-color);
 
     .navbar-nav {
-      --#{$prefix}nav-link-padding-x: 0;
-      --#{$prefix}nav-link-padding-y: 0;
-      --#{$prefix}nav-link-font-weight: #{$footer-nav-link-font-weight};
-
       flex-wrap: wrap;
       gap: var(--#{$prefix}footer-gap);
 
@@ -68,6 +75,7 @@
 
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
   }
 
   .footer-nav {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 1540e78663..36674e342f 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2363,6 +2363,7 @@ $quantity-selector-input-sm-max-width:    1.875rem !default;
 
 //// Footer
 // scss-docs-start footer
+$footer-color:                            var(--#{$prefix}body-color) !default;
 $footer-font-size-sm:                     $font-size-sm !default;
 $footer-line-height-sm:                   $line-height-sm !default;
 $footer-font-size-md:                     $font-size-base !default;
@@ -2370,9 +2371,11 @@ $footer-line-height-md:                   $line-height-base !default;
 $footer-title-font-weight:                $font-weight-bold !default;
 $footer-letter-spacing:                   $letter-spacing-base !default;
 $footer-accordion-line-height:            $spacer * 1.45 !default;
-$footer-accordion-active-color:           $brand-orange !default;
+$footer-accordion-active-color:           var(--#{$prefix}link-hover-color) !default;
 $footer-accordion-btn-hover-bg:           null !default;
-$footer-nav-link-font-weight:             $font-weight-bold !default;
+// fusv-disable
+$footer-nav-link-font-weight:             $font-weight-bold !default; // Deprecated in v5.3.3
+// fusv-enable
 
 $footer-title-content-padding-top:        $spacer * 1.25 !default;
 $footer-title-content-padding-bottom:     $spacer * 1.45 !default;
diff --git a/site/content/docs/5.3/components/orange-navbar.md b/site/content/docs/5.3/components/orange-navbar.md
index 75b9dfb515..3e02b3f362 100644
--- a/site/content/docs/5.3/components/orange-navbar.md
+++ b/site/content/docs/5.3/components/orange-navbar.md
@@ -357,7 +357,7 @@ You can add a search input into your Global header.
 
       <!-- Navbar with action icons -->
       <form class="d-flex d-none d-lg-flex col-3 navbar-item" role="search">
-        <input class="form-control bg-transparent" type="search" placeholder="Search" aria-label="Search">
+        <input class="form-control" type="search" placeholder="Search" aria-label="Search">
       </form>
       <div id="global-header-5.2" class="navbar-collapse collapse d-sm-flex global-header-5">
         <ul class="navbar-nav flex-row">
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 0751771c46..9c7bc015b6 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -143,12 +143,12 @@ sitemap_exclude: true
   <div class="accordion" id="accordionExample1">
     <div class="accordion-item">
       <h2 class="accordion-header">
-        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne1"
-                aria-expanded="true" aria-controls="collapseOne1">
+        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordionCollapseOne1"
+                aria-expanded="true" aria-controls="accordionCollapseOne1">
           Accordion Item #1
         </button>
       </h2>
-      <div id="collapseOne1" class="accordion-collapse collapse show" data-bs-parent="#accordionExample1">
+      <div id="accordionCollapseOne1" class="accordion-collapse collapse show" data-bs-parent="#accordionExample1">
         <div class="accordion-body">
           <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin
           adds the appropriate classes that we use to style each element. These classes control the overall
@@ -161,11 +161,11 @@ sitemap_exclude: true
     <div class="accordion-item">
       <h2 class="accordion-header">
         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                data-bs-target="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1">
+                data-bs-target="#accordionCollapseTwo1" aria-expanded="false" aria-controls="accordionCollapseTwo1">
           Accordion Item #2
         </button>
       </h2>
-      <div id="collapseTwo1" class="accordion-collapse collapse" data-bs-parent="#accordionExample1">
+      <div id="accordionCollapseTwo1" class="accordion-collapse collapse" data-bs-parent="#accordionExample1">
         <div class="accordion-body">
           <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse
           plugin adds the appropriate classes that we use to style each element. These classes control the overall
@@ -184,12 +184,12 @@ sitemap_exclude: true
   <div class="accordion" id="accordionExample2">
     <div class="accordion-item">
       <h2 class="accordion-header">
-        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne2"
-                aria-expanded="true" aria-controls="collapseOne2">
+        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordionCollapseOne2"
+                aria-expanded="true" aria-controls="accordionCollapseOne2">
           Accordion Item #1
         </button>
       </h2>
-      <div id="collapseOne2" class="accordion-collapse collapse show" data-bs-parent="#accordionExample2">
+      <div id="accordionCollapseOne2" class="accordion-collapse collapse show" data-bs-parent="#accordionExample2">
         <div class="accordion-body">
           <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin
           adds the appropriate classes that we use to style each element. These classes control the overall
@@ -202,11 +202,11 @@ sitemap_exclude: true
     <div class="accordion-item">
       <h2 class="accordion-header">
         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                data-bs-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
+                data-bs-target="#accordionCollapseTwo2" aria-expanded="false" aria-controls="accordionCollapseTwo2">
           Accordion Item #2
         </button>
       </h2>
-      <div id="collapseTwo2" class="accordion-collapse collapse" data-bs-parent="#accordionExample2">
+      <div id="accordionCollapseTwo2" class="accordion-collapse collapse" data-bs-parent="#accordionExample2">
         <div class="accordion-body">
           <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse
           plugin adds the appropriate classes that we use to style each element. These classes control the overall
@@ -225,12 +225,12 @@ sitemap_exclude: true
   <div class="accordion" id="accordionExample3">
     <div class="accordion-item">
       <h2 class="accordion-header">
-        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne3"
-                aria-expanded="true" aria-controls="collapseOne3">
+        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordionCollapseOne3"
+                aria-expanded="true" aria-controls="accordionCollapseOne3">
           Accordion Item #1
         </button>
       </h2>
-      <div id="collapseOne3" class="accordion-collapse collapse show" data-bs-parent="#accordionExample3">
+      <div id="accordionCollapseOne3" class="accordion-collapse collapse show" data-bs-parent="#accordionExample3">
         <div class="accordion-body">
           <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin
           adds the appropriate classes that we use to style each element. These classes control the overall
@@ -243,11 +243,11 @@ sitemap_exclude: true
     <div class="accordion-item">
       <h2 class="accordion-header">
         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                data-bs-target="#collapseTwo3" aria-expanded="false" aria-controls="collapseTwo3">
+                data-bs-target="#accordionCollapseTwo3" aria-expanded="false" aria-controls="accordionCollapseTwo3">
           Accordion Item #2
         </button>
       </h2>
-      <div id="collapseTwo3" class="accordion-collapse collapse" data-bs-parent="#accordionExample3">
+      <div id="accordionCollapseTwo3" class="accordion-collapse collapse" data-bs-parent="#accordionExample3">
         <div class="accordion-body">
           <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse
           plugin adds the appropriate classes that we use to style each element. These classes control the overall
@@ -1432,19 +1432,19 @@ sitemap_exclude: true
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" disabled><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
   <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
   <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
   <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
 </div>
@@ -1455,19 +1455,19 @@ sitemap_exclude: true
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" disabled><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
   <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
   <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
   <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
 </div>
@@ -1478,19 +1478,19 @@ sitemap_exclude: true
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" disabled><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
   <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
   <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
   <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
 </div>
@@ -1501,19 +1501,19 @@ sitemap_exclude: true
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark"><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark" disabled><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
   <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
   <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
   <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
 </div>
@@ -1524,19 +1524,19 @@ sitemap_exclude: true
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light"><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light" disabled><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
   <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
   <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
   <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light">
-    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
+    <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
     <span class="visually-hidden">Close</span>
   </button>
 </div>
@@ -1729,6 +1729,707 @@ sitemap_exclude: true
   </div>
 </div>
 
+### Footer
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <footer class="footer navbar">
+    <h2 class="visually-hidden">Sitemap &amp; information</h2>
+    <div class="container-xxl footer-title-content">
+      <h3 class="footer-heading">Sign up to our mailing list</h3>
+      <div class="row">
+        <form class="d-flex col-12 col-md-9 col-lg-7 col-xl-6 col-xxl-5 gap-2 gap-md-3">
+          <label for="inputEmail1" class="visually-hidden">Email</label>
+          <input type="email" class="form-control" id="inputEmail1" placeholder="Enter your email">
+          <button type="submit" class="btn btn-outline-secondary text-nowrap">Sign up</button>
+        </form>
+      </div>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-social">
+      <h3 class="footer-heading me-md-3">Follow us</h3>
+      <ul class="navbar-nav gap-2 flex-row align-self-start">
+        <li><a href="#" class="btn btn-icon btn-social btn-twitter"><span class="visually-hidden">Twitter</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-facebook"><span class="visually-hidden">Facebook</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-instagram"><span class="visually-hidden">Instagram</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-whatsapp"><span class="visually-hidden">WhatsApp</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-linkedin"><span class="visually-hidden">LinkedIn</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-snapchat"><span class="visually-hidden">Snapchat</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-pinterest"><span class="visually-hidden">Pinterest</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-mail"><span class="visually-hidden">Mail</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-tiktok"><span class="visually-hidden">TikTok</span></a></li>
+      </ul>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-nav">
+      <nav class="accordion" id="accordion1" aria-label="Sitemap footer 1">
+        <div class="row">
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingOne1">
+              <button class="accordion-button container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseOne1" class="container-xxl accordion-collapse collapse show" data-bs-parent="#accordion1" style="">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingOne1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne1">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingTwo1">
+              <button class="accordion-button container-xxl px-1 d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseTwo1" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion1" style="">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo1">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingThree1">
+              <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree1" aria-expanded="false" aria-controls="collapseThree1">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseThree1" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion1">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingThree1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree1">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingFour1">
+              <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour1" aria-expanded="false" aria-controls="collapseFour1">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseFour1" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion1">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingFour1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour1">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-service">
+      <ul class="navbar-nav gap-3 gap-md-4">
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#location-pin-compass"></use></svg><span>Store locator</span></a></li>
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#mobile-network-coverage"></use></svg><span>Coverage checker</span></a></li>
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#live-chat"></use></svg><span>Contact us</span></a></li>
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#child-protection"></use></svg><span>Child protection</span></a></li>
+      </ul>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-terms">
+      <ul class="navbar-nav gap-md-3">
+        <li class="fw-bold">© Orange {{ now.Format "2006" }}</li>
+        <li><a class="nav-link" href="#">Terms and conditions</a></li>
+        <li><a class="nav-link" href="#">Privacy</a></li>
+        <li><a class="nav-link" href="#">Accessibility statement</a></li>
+        <li><a class="nav-link" href="#">Cookie policy</a></li>
+      </ul>
+    </div>
+  </footer>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <footer class="footer navbar">
+    <h2 class="visually-hidden">Sitemap &amp; information</h2>
+    <div class="container-xxl footer-title-content">
+      <h3 class="footer-heading">Sign up to our mailing list</h3>
+      <div class="row">
+        <form class="d-flex col-12 col-md-9 col-lg-7 col-xl-6 col-xxl-5 gap-2 gap-md-3">
+          <label for="inputEmail2" class="visually-hidden">Email</label>
+          <input type="email" class="form-control" id="inputEmail2" placeholder="Enter your email">
+          <button type="submit" class="btn btn-outline-secondary text-nowrap">Sign up</button>
+        </form>
+      </div>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-social">
+      <h3 class="footer-heading me-md-3">Follow us</h3>
+      <ul class="navbar-nav gap-2 flex-row align-self-start">
+        <li><a href="#" class="btn btn-icon btn-social btn-twitter"><span class="visually-hidden">Twitter</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-facebook"><span class="visually-hidden">Facebook</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-instagram"><span class="visually-hidden">Instagram</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-whatsapp"><span class="visually-hidden">WhatsApp</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-linkedin"><span class="visually-hidden">LinkedIn</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-snapchat"><span class="visually-hidden">Snapchat</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-pinterest"><span class="visually-hidden">Pinterest</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-mail"><span class="visually-hidden">Mail</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-tiktok"><span class="visually-hidden">TikTok</span></a></li>
+      </ul>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-nav">
+      <nav class="accordion" id="accordion2" aria-label="Sitemap footer 2">
+        <div class="row">
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingOne2">
+              <button class="accordion-button container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseOne2" class="container-xxl accordion-collapse collapse show" data-bs-parent="#accordion2" style="">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingTwo2">
+              <button class="accordion-button container-xxl px-1 d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseTwo2" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion2" style="">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingThree2">
+              <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseThree2" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion2">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingFour2">
+              <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour2" aria-expanded="false" aria-controls="collapseFour2">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseFour2" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion2">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-service">
+      <ul class="navbar-nav gap-3 gap-md-4">
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#location-pin-compass"></use></svg><span>Store locator</span></a></li>
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#mobile-network-coverage"></use></svg><span>Coverage checker</span></a></li>
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#live-chat"></use></svg><span>Contact us</span></a></li>
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#child-protection"></use></svg><span>Child protection</span></a></li>
+      </ul>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-terms">
+      <ul class="navbar-nav gap-md-3">
+        <li class="fw-bold">© Orange {{ now.Format "2006" }}</li>
+        <li><a class="nav-link" href="#">Terms and conditions</a></li>
+        <li><a class="nav-link" href="#">Privacy</a></li>
+        <li><a class="nav-link" href="#">Accessibility statement</a></li>
+        <li><a class="nav-link" href="#">Cookie policy</a></li>
+      </ul>
+    </div>
+  </footer>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <footer class="footer navbar">
+    <h2 class="visually-hidden">Sitemap &amp; information</h2>
+    <div class="container-xxl footer-title-content">
+      <h3 class="footer-heading">Sign up to our mailing list</h3>
+      <div class="row">
+        <form class="d-flex col-12 col-md-9 col-lg-7 col-xl-6 col-xxl-5 gap-2 gap-md-3">
+          <label for="inputEmail3" class="visually-hidden">Email</label>
+          <input type="email" class="form-control" id="inputEmail3" placeholder="Enter your email">
+          <button type="submit" class="btn btn-outline-secondary text-nowrap">Sign up</button>
+        </form>
+      </div>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-social">
+      <h3 class="footer-heading me-md-3">Follow us</h3>
+      <ul class="navbar-nav gap-2 flex-row align-self-start">
+        <li><a href="#" class="btn btn-icon btn-social btn-twitter"><span class="visually-hidden">Twitter</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-facebook"><span class="visually-hidden">Facebook</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-instagram"><span class="visually-hidden">Instagram</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-whatsapp"><span class="visually-hidden">WhatsApp</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-linkedin"><span class="visually-hidden">LinkedIn</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-snapchat"><span class="visually-hidden">Snapchat</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-pinterest"><span class="visually-hidden">Pinterest</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-mail"><span class="visually-hidden">Mail</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-tiktok"><span class="visually-hidden">TikTok</span></a></li>
+      </ul>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-nav">
+      <nav class="accordion" id="accordion3" aria-label="Sitemap footer 3">
+        <div class="row">
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingOne3">
+              <button class="accordion-button container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne3" aria-expanded="true" aria-controls="collapseOne3">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseOne3" class="container-xxl accordion-collapse collapse show" data-bs-parent="#accordion3" style="">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingOne3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne3">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingTwo3">
+              <button class="accordion-button container-xxl px-1 d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo3" aria-expanded="false" aria-controls="collapseTwo3">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseTwo3" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion3" style="">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo3">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingThree3">
+              <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree3" aria-expanded="false" aria-controls="collapseThree3">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseThree3" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion3">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingThree3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree3">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingFour3">
+              <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour3" aria-expanded="false" aria-controls="collapseFour3">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseFour3" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion3">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingFour3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour3">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour3">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-service">
+      <ul class="navbar-nav gap-3 gap-md-4">
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#location-pin-compass"></use></svg><span>Store locator</span></a></li>
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#mobile-network-coverage"></use></svg><span>Coverage checker</span></a></li>
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#live-chat"></use></svg><span>Contact us</span></a></li>
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#child-protection"></use></svg><span>Child protection</span></a></li>
+      </ul>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-terms">
+      <ul class="navbar-nav gap-md-3">
+        <li class="fw-bold">© Orange {{ now.Format "2006" }}</li>
+        <li><a class="nav-link" href="#">Terms and conditions</a></li>
+        <li><a class="nav-link" href="#">Privacy</a></li>
+        <li><a class="nav-link" href="#">Accessibility statement</a></li>
+        <li><a class="nav-link" href="#">Cookie policy</a></li>
+      </ul>
+    </div>
+  </footer>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <footer class="footer navbar" data-bs-theme="dark">
+    <h2 class="visually-hidden">Sitemap &amp; information</h2>
+    <div class="container-xxl footer-title-content">
+      <h3 class="footer-heading">Sign up to our mailing list</h3>
+      <div class="row">
+        <form class="d-flex col-12 col-md-9 col-lg-7 col-xl-6 col-xxl-5 gap-2 gap-md-3">
+          <label for="inputEmail4" class="visually-hidden">Email</label>
+          <input type="email" class="form-control" id="inputEmail4" placeholder="Enter your email">
+          <button type="submit" class="btn btn-outline-secondary text-nowrap">Sign up</button>
+        </form>
+      </div>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-social">
+      <h3 class="footer-heading me-md-3">Follow us</h3>
+      <ul class="navbar-nav gap-2 flex-row align-self-start">
+        <li><a href="#" class="btn btn-icon btn-social btn-twitter"><span class="visually-hidden">Twitter</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-facebook"><span class="visually-hidden">Facebook</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-instagram"><span class="visually-hidden">Instagram</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-whatsapp"><span class="visually-hidden">WhatsApp</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-linkedin"><span class="visually-hidden">LinkedIn</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-snapchat"><span class="visually-hidden">Snapchat</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-pinterest"><span class="visually-hidden">Pinterest</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-mail"><span class="visually-hidden">Mail</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-tiktok"><span class="visually-hidden">TikTok</span></a></li>
+      </ul>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-nav">
+      <nav class="accordion" id="accordion4" aria-label="Sitemap footer 4">
+        <div class="row">
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingOne4">
+              <button class="accordion-button container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne4" aria-expanded="true" aria-controls="collapseOne4">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseOne4" class="container-xxl accordion-collapse collapse show" data-bs-parent="#accordion4" style="">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingOne4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne4">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingTwo4">
+              <button class="accordion-button container-xxl px-1 d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo4" aria-expanded="false" aria-controls="collapseTwo4">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseTwo4" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion4" style="">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo4">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingThree4">
+              <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree4" aria-expanded="false" aria-controls="collapseThree4">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseThree4" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion4">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingThree4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree4">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingFour4">
+              <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour4" aria-expanded="false" aria-controls="collapseFour4">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseFour4" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion4">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingFour4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour4">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour4">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-service">
+      <ul class="navbar-nav gap-3 gap-md-4">
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#location-pin-compass"></use></svg><span>Store locator</span></a></li>
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#mobile-network-coverage"></use></svg><span>Coverage checker</span></a></li>
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#live-chat"></use></svg><span>Contact us</span></a></li>
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#child-protection"></use></svg><span>Child protection</span></a></li>
+      </ul>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-terms">
+      <ul class="navbar-nav gap-md-3">
+        <li class="fw-bold">© Orange {{ now.Format "2006" }}</li>
+        <li><a class="nav-link" href="#">Terms and conditions</a></li>
+        <li><a class="nav-link" href="#">Privacy</a></li>
+        <li><a class="nav-link" href="#">Accessibility statement</a></li>
+        <li><a class="nav-link" href="#">Cookie policy</a></li>
+      </ul>
+    </div>
+  </footer>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <footer class="footer navbar" data-bs-theme="light">
+    <h2 class="visually-hidden">Sitemap &amp; information</h2>
+    <div class="container-xxl footer-title-content">
+      <h3 class="footer-heading">Sign up to our mailing list</h3>
+      <div class="row">
+        <form class="d-flex col-12 col-md-9 col-lg-7 col-xl-6 col-xxl-5 gap-2 gap-md-3">
+          <label for="inputEmail5" class="visually-hidden">Email</label>
+          <input type="email" class="form-control" id="inputEmail5" placeholder="Enter your email">
+          <button type="submit" class="btn btn-outline-secondary text-nowrap">Sign up</button>
+        </form>
+      </div>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-social">
+      <h3 class="footer-heading me-md-3">Follow us</h3>
+      <ul class="navbar-nav gap-2 flex-row align-self-start">
+        <li><a href="#" class="btn btn-icon btn-social btn-twitter"><span class="visually-hidden">Twitter</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-facebook"><span class="visually-hidden">Facebook</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-instagram"><span class="visually-hidden">Instagram</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-whatsapp"><span class="visually-hidden">WhatsApp</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-linkedin"><span class="visually-hidden">LinkedIn</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-snapchat"><span class="visually-hidden">Snapchat</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-pinterest"><span class="visually-hidden">Pinterest</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-mail"><span class="visually-hidden">Mail</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-tiktok"><span class="visually-hidden">TikTok</span></a></li>
+      </ul>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-nav">
+      <nav class="accordion" id="accordion5" aria-label="Sitemap footer 5">
+        <div class="row">
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingOne5">
+              <button class="accordion-button container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne5" aria-expanded="true" aria-controls="collapseOne5">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseOne5" class="container-xxl accordion-collapse collapse show" data-bs-parent="#accordion5" style="">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingOne5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne5">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingTwo5">
+              <button class="accordion-button container-xxl px-1 d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo5" aria-expanded="false" aria-controls="collapseTwo5">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseTwo5" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion5" style="">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo5">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingThree5">
+              <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree5" aria-expanded="false" aria-controls="collapseThree5">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseThree5" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion5">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingThree5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree5">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingFour5">
+              <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour5" aria-expanded="false" aria-controls="collapseFour5">
+                Category
+              </button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseFour5" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion5">
+              <ul class="navbar-nav">
+                <li><a class="nav-link" href="#" aria-describedby="headingFour5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour5">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour5">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-service">
+      <ul class="navbar-nav gap-3 gap-md-4">
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#location-pin-compass"></use></svg><span>Store locator</span></a></li>
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#mobile-network-coverage"></use></svg><span>Coverage checker</span></a></li>
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#live-chat"></use></svg><span>Contact us</span></a></li>
+        <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#child-protection"></use></svg><span>Child protection</span></a></li>
+      </ul>
+    </div>
+    <div class="border-bottom border-1 border-dark"></div>
+    <div class="container-xxl footer-terms">
+      <ul class="navbar-nav gap-md-3">
+        <li class="fw-bold">© Orange {{ now.Format "2006" }}</li>
+        <li><a class="nav-link" href="#">Terms and conditions</a></li>
+        <li><a class="nav-link" href="#">Privacy</a></li>
+        <li><a class="nav-link" href="#">Accessibility statement</a></li>
+        <li><a class="nav-link" href="#">Cookie policy</a></li>
+      </ul>
+    </div>
+  </footer>
+</div>
 
 ### List group
 
diff --git a/site/content/docs/5.3/examples/download-app/index.html b/site/content/docs/5.3/examples/download-app/index.html
index 3f341c59fd..50a2bfe6ae 100644
--- a/site/content/docs/5.3/examples/download-app/index.html
+++ b/site/content/docs/5.3/examples/download-app/index.html
@@ -349,7 +349,7 @@ <h2 class="h1 mb-2 mb-md-3 text-center">Your feedback is valued</h2>
   </div>
 </main>
 
-<footer class="footer bg-dark ">
+<footer class="footer navbar" data-bs-theme="dark">
   <h2 class="visually-hidden">Sitemap & information</h2>
   <div class="container-xxl footer-terms">
     <ul class="navbar-nav gap-md-3">
diff --git a/site/content/docs/5.3/examples/form/index.html b/site/content/docs/5.3/examples/form/index.html
index 031bab5e28..09b9a269aa 100644
--- a/site/content/docs/5.3/examples/form/index.html
+++ b/site/content/docs/5.3/examples/form/index.html
@@ -213,7 +213,7 @@ <h1 class="display-1">Become a reseller</h1>
     </div>
   </div>
 </main>
-<footer class="footer bg-dark ">
+<footer class="footer navbar" data-bs-theme="dark">
   <h2 class="visually-hidden">Sitemap and information</h2>
   <div class="container-xxl footer-terms">
     <ul class="navbar-nav gap-md-3">
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index ff343d6a73..642ee207f3 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -2,7 +2,7 @@
 {{- $category_slug := index $url (sub (len $url) 3) -}}
 {{- $page_slug := index $url (sub (len $url) 2) -}}
 
-<footer class="footer bg-dark bd-footer">
+<footer class="footer navbar bd-footer" data-bs-theme="dark">
   <h2 class="visually-hidden">Boosted sitemap & information</h2>
   <div class="container-xxl footer-nav">
     <nav class="accordion" id="sitemapAccordion" aria-label="Boosted sitemap footer">
diff --git a/site/layouts/shortcodes/orange-footer.html b/site/layouts/shortcodes/orange-footer.html
index 9259373da6..ef6b4cd587 100644
--- a/site/layouts/shortcodes/orange-footer.html
+++ b/site/layouts/shortcodes/orange-footer.html
@@ -22,7 +22,7 @@
 {{- $id := .Get "id" -}}
 {{- $input := .Inner -}}
 
-<footer class="footer bg-dark">
+<footer class="footer navbar" data-bs-theme="dark">
   <h2 class="visually-hidden">Sitemap & information</h2>
 {{- if $title_content }}
   <div class="container-xxl footer-title-content">
@@ -30,7 +30,7 @@ <h3 class="footer-heading">Sign up to our mailing list</h3>
     <div class="row">
       <form class="d-flex col-12 col-md-9 col-lg-7 col-xl-6 col-xxl-5 gap-2 gap-md-3">
         <label for="inputEmail{{ $id }}" class="visually-hidden">Email</label>
-        <input type="email" class="form-control text-bg-dark border-dark" id="inputEmail{{ $id }}" placeholder="Enter your email">
+        <input type="email" class="form-control" id="inputEmail{{ $id }}" placeholder="Enter your email">
         <button type="submit" class="btn btn-outline-secondary text-nowrap">Sign up</button>
       </form>
     </div>
diff --git a/site/layouts/shortcodes/orange-global-headers.html b/site/layouts/shortcodes/orange-global-headers.html
index 8742ade5ec..2e0b6fd78c 100644
--- a/site/layouts/shortcodes/orange-global-headers.html
+++ b/site/layouts/shortcodes/orange-global-headers.html
@@ -89,7 +89,7 @@ <h1 class="title">Title</h1>
 {{- end }}
 {{- if eq $mode "search" }}
     <form class="d-flex d-none d-lg-flex col-3 navbar-item" role="search">
-      <input class="form-control bg-transparent" type="search" placeholder="Search" aria-label="Search">
+      <input class="form-control" type="search" placeholder="Search" aria-label="Search">
     </form>
 {{- end }}
     <div id="{{ $id }}.2" class="navbar-collapse collapse d-sm-flex{{ cond $responsive_logo " ms-lg-3" "" }} {{ $id }}">

From d0a8676531ca61a9d174d85f88d3b9014e062c43 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Wed, 8 Nov 2023 07:57:55 +0100
Subject: [PATCH 28/71] Dark mode: Title bars (#2350)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_title-bars.scss                         |  9 ++--
 scss/_variables.scss                          |  8 ++-
 .../content/docs/5.3/components/title-bars.md | 19 +++----
 site/content/docs/5.3/dark-mode.md            | 52 +++++++++++++++++++
 .../docs/5.3/examples/title-bars/index.html   |  6 +--
 5 files changed, 75 insertions(+), 19 deletions(-)

diff --git a/scss/_title-bars.scss b/scss/_title-bars.scss
index df570b90d0..5b90722cab 100644
--- a/scss/_title-bars.scss
+++ b/scss/_title-bars.scss
@@ -1,5 +1,7 @@
 .title-bar {
   // scss-docs-start title-bar-css-vars
+  --#{$prefix}title-bar-bg: #{$title-bar-bg};
+  --#{$prefix}title-bar-color: #{$title-bar-color};
   --#{$prefix}title-bar-image-ratio: #{$title-bar-image-ratio};
   --#{$prefix}title-bar-padding-y: #{$title-bar-padding-y};
   --#{$prefix}title-bar-font-size: #{$title-bar-font-size};
@@ -9,6 +11,8 @@
   --#{$prefix}title-bar-border-color: #{$title-bar-border-color};
   // scss-docs-end title-bar-css-vars
 
+  color: var(--#{$prefix}title-bar-color);
+  background-color: var(--#{$prefix}title-bar-bg);
   border-bottom: var(--#{$prefix}title-bar-border-width) solid var(--#{$prefix}title-bar-border-color);
 
   @include media-breakpoint-up(md) {
@@ -21,11 +25,6 @@
     --#{$prefix}title-bar-letter-spacing: #{$title-bar-letter-spacing-xl};
   }
 
-  &.bg-dark,
-  &.bg-secondary {
-    --#{$prefix}title-bar-border-color: #{$title-bar-border-color-dark};
-  }
-
   > [class*="container"] {
     display: flex;
     align-items: flex-end;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 36674e342f..325215ecb1 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2065,13 +2065,15 @@ $figure-caption-color:              $gray-900 !default; // Boosted mod: instead
 // Title bars
 
 // scss-docs-start title-bars-variables
+$title-bar-bg:                      var(--#{$prefix}body-bg) !default;
+$title-bar-color:                   var(--#{$prefix}body-color) !default;
 $title-bar-image-ratio:             1.8em !default;
 $title-bar-padding-y:               .3333333em !default;
 $title-bar-font-size:               $h2-font-size !default;
 $title-bar-line-height:             $display-line-height !default;
 $title-bar-letter-spacing:          $h2-spacing !default;
 $title-bar-border-width:            calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list
-$title-bar-border-color:            $gray-500 !default;
+$title-bar-border-color:            var(--#{$prefix}border-color-translucent) !default;
 
 $title-bar-font-size-md:            $display2-size !default;
 $title-bar-letter-spacing-md:       $display2-spacing !default;
@@ -2079,7 +2081,9 @@ $title-bar-letter-spacing-md:       $display2-spacing !default;
 $title-bar-font-size-xl:            $display1-size !default;
 $title-bar-letter-spacing-xl:       $display1-spacing !default;
 
-$title-bar-border-color-dark:       $gray-700 !default;
+// fusv-disable
+$title-bar-border-color-dark:       $gray-700 !default; // Deprecated in v5.3.3
+// fusv-enable
 // scss-docs-end title-bars-variables
 // End mod
 
diff --git a/site/content/docs/5.3/components/title-bars.md b/site/content/docs/5.3/components/title-bars.md
index 0ae8340c07..90ba1932e5 100644
--- a/site/content/docs/5.3/components/title-bars.md
+++ b/site/content/docs/5.3/components/title-bars.md
@@ -19,15 +19,16 @@ 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">}}). Orange branded background utilities are `.bg-dark`, `.bg-white` and `.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.
 
-Title bars can be displayed with black or white backgrounds. When using black or white backgrounds, illustrations can be included as an option, but it's not necessary.
 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 white/black one 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 `.bg-black`, `.bg-dark`, `.bg-white` or with the default background color without any image.
 
 {{< example class="p-0">}}
-<div class="bg-body title-bar">
+<div class="title-bar">
   <div class="container-xxl">
     <h1 class="display-1">Title</h1>
   </div>
@@ -35,7 +36,7 @@ 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">
+<div class="bg-dark title-bar" data-bs-theme="dark">
   <div class="container-xxl">
     <h1 class="display-1">Title</h1>
   </div>
@@ -43,7 +44,7 @@ The image should not overlap on title and the title shouldn't wrap. If this happ
 
 <div class="mt-3"></div>
 
-<div class="bg-supporting-green title-bar">
+<div class="bg-supporting-green title-bar" data-bs-theme="light">
   <div class="container-xxl">
     <h1 class="display-1">Title</h1>
     <picture>
@@ -68,7 +69,7 @@ Several options are available to add an image in a title bar.
 We **strongly recommend** to use `srcset` attribute as it is [well supported](https://caniuse.com/srcset) by browsers and allows you to load an image depending on the user's device. However, it might introduce a delay to display the image while resizing.
 
 {{< example class="p-0">}}
-<div class="bg-supporting-pink title-bar">
+<div class="bg-supporting-pink title-bar" data-bs-theme="light">
   <div class="container-xxl">
     <h1 class="display-1">Title</h1>
     <picture>
@@ -87,7 +88,7 @@ We **strongly recommend** to use `srcset` attribute as it is [well supported](ht
 ### HTML `<svg>` tag
 
 {{< example class="p-0">}}
-<div class="bg-supporting-purple title-bar">
+<div class="bg-supporting-purple title-bar" data-bs-theme="light">
   <div class="container-xxl">
     <h1 class="display-1">Title</h1>
     <svg aria-hidden="true" focusable="false" width="1.8em"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#document"/></svg>
@@ -98,7 +99,7 @@ We **strongly recommend** to use `srcset` attribute as it is [well supported](ht
 ### HTML `<img>` tag
 
 {{< example class="p-0">}}
-<div class="bg-supporting-green title-bar">
+<div class="bg-supporting-green title-bar" data-bs-theme="light">
   <div class="container-xxl">
     <h1 class="display-1">Title</h1>
     <img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-320.png" alt="" class="d-sm-none">
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 9c7bc015b6..5d73e0efd4 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -5158,6 +5158,58 @@ sitemap_exclude: true
   </ul>
 </div>
 
+### Title bars
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <div class="title-bar">
+    <div class="container-xxl">
+      <h1 class="display-1">Title</h1>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="title-bar">
+    <div class="container-xxl">
+      <h1 class="display-1">Title</h1>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="title-bar">
+    <div class="container-xxl">
+      <h1 class="display-1">Title</h1>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <div class="title-bar" data-bs-theme="dark">
+    <div class="container-xxl">
+      <h1 class="display-1">Title</h1>
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="title-bar" data-bs-theme="light">
+    <div class="container-xxl">
+      <h1 class="display-1">Title</h1>
+    </div>
+  </div>
+</div>
+
 ### Tooltips
 
 <h4 class="mt-3">No theme</h4>
diff --git a/site/content/docs/5.3/examples/title-bars/index.html b/site/content/docs/5.3/examples/title-bars/index.html
index 91198ed76a..4069ca68c9 100644
--- a/site/content/docs/5.3/examples/title-bars/index.html
+++ b/site/content/docs/5.3/examples/title-bars/index.html
@@ -11,7 +11,7 @@
 ---
 
 <main>
-  <div class="bg-body title-bar">
+  <div class="title-bar">
     <div class="container-xxl">
       <h1 class="display-1">Title</h1>
     </div>
@@ -19,7 +19,7 @@ <h1 class="display-1">Title</h1>
 
   <div class="b-example-divider"></div>
 
-  <div class="bg-supporting-pink title-bar">
+  <div class="bg-supporting-pink title-bar" data-bs-theme="light">
     <div class="container-xxl">
       <h1 class="display-1">Title</h1>
       <picture>
@@ -46,7 +46,7 @@ <h4 class="alert-heading">Background image</h4>
 
   <div class="b-example-divider"></div>
 
-  <div class="bg-supporting-blue title-bar">
+  <div class="bg-supporting-blue title-bar" data-bs-theme="light">
     <div class="container-xxl">
       <h1 class="display-1">Title</h1>
       <div class="col example-title-bar-custom-background"></div>

From b1e6e117f3cfd400417fcb249d1a6a8469d1e00f Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Mon, 13 Nov 2023 08:39:54 +0100
Subject: [PATCH 29/71] Dark mode: Dropdown variant (#2323)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 js/tests/visual/dropdown.html                 |  20 +-
 scss/_button-group.scss                       |  30 +-
 scss/_buttons.scss                            |   7 +
 scss/_dropdown.scss                           |   7 -
 site/assets/scss/_content.scss                |  15 +-
 .../docs/5.3/components/button-group.md       |  39 +-
 site/content/docs/5.3/components/dropdowns.md | 261 +++++++-
 site/content/docs/5.3/components/offcanvas.md |   2 +-
 .../content/docs/5.3/customize/color-modes.md |   6 +-
 site/content/docs/5.3/dark-mode.md            | 578 +++++++++++++++---
 site/content/docs/5.3/forms/input-group.md    |   8 +-
 11 files changed, 806 insertions(+), 167 deletions(-)

diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index d782f47903..7dcb33d54c 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -68,8 +68,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </div>
           </div>
           <div class="btn-group dropup">
-            <button type="button" class="btn btn-outline-secondary">Dropup split</button>
-            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+            <button type="button" class="btn btn-secondary">Dropup split</button>
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Dropup split</span>
             </button>
             <ul class="dropdown-menu">
@@ -104,8 +104,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
         <div class="col-sm-12 mt-4">
           <div class="btn-group dropup">
-            <a href="#" class="btn btn-outline-secondary">Dropup split align end</a>
-            <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-secondary">Dropup split align end</a>
+            <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu dropdown-menu-end">
@@ -126,8 +126,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
         <div class="col-sm-12 mt-4">
           <div class="btn-group dropend">
-            <a href="#" class="btn btn-outline-secondary">Dropend split</a>
-            <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-secondary">Dropend split</a>
+            <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu">
@@ -148,8 +148,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           </div>
           <!-- dropstart -->
           <div class="btn-group dropstart">
-            <a href="#" class="btn btn-outline-secondary">Dropstart split</a>
-            <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-secondary">Dropstart split</a>
+            <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu">
@@ -174,8 +174,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
       <div class="row">
         <div class="col-sm-3 mt-4">
           <div class="btn-group dropdown">
-            <button type="button" class="btn btn-outline-secondary">Dropdown reference</button>
-            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
+            <button type="button" class="btn btn-secondary">Dropdown reference</button>
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
               <span class="visually-hidden">Dropdown split</span>
             </button>
             <ul class="dropdown-menu">
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index dc2e795f0e..77172b0844 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -64,6 +64,31 @@
   > .btn-group:not(:first-child) > .btn {
     @include border-start-radius(0);
   }
+
+  // Boosted mod
+  > [class*="btn-outline-"]:not(:last-of-type) {
+    border-right-width: 0;
+
+    &::after {
+      display: inline-block;
+      width: var(--#{$prefix}btn-border-width);
+      height: 100%;
+      margin: 0;
+      content: "";
+      border: 0;
+    }
+
+    &:focus {
+      &[data-focus-visible-added] {
+        border-right-width: var(--#{$prefix}btn-border-width);
+
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+  // End mod
 }
 
 // Sizing
@@ -83,7 +108,6 @@
   min-width: add($dropdown-padding-x * 2, calc(#{$caret-width} * 2)); // Boosted mod
   padding-right: subtract($dropdown-padding-x, $btn-border-width); // Boosted mod
   padding-left: subtract($dropdown-padding-x, $btn-border-width); // Boosted mod
-  border-color: currentcolor; // Boosted mod
 
   // Boosted mod
   .btn-group:not(.dropstart) &,
@@ -101,14 +125,12 @@
         content: "";
         background:
           linear-gradient(
-            currentcolor $btn-border-width,
             transparent $btn-border-width,
             transparent map-get($spacers, 1),
             currentcolor map-get($spacers, 1),
             currentcolor subtract(100%, map-get($spacers, 1)),
             transparent subtract(100%, map-get($spacers, 1)),
-            transparent subtract(100%, $btn-border-width),
-            currentcolor subtract(100%, $btn-border-width)
+            transparent subtract(100%, $btn-border-width)
           );
       }
     }
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 70aff36f5b..a1133a604d 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -155,6 +155,13 @@
 // End mod
 
 
+// Boosted mod: dropdown button
+.btn-dropdown {
+  @include button-variant(var(--#{$prefix}body-bg), var(--#{$prefix}border-color-translucent), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}border-color-translucent), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}body-color), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-color));
+}
+// End mod
+
+
 //
 // Link buttons
 //
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 6a7bce24da..bd9c46798a 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -14,13 +14,6 @@
   white-space: nowrap;
   // Generate the caret automatically
   @include caret();
-
-  // Boosted mod
-  // TODO: should probably be a `.btn-*` class
-  &:not(.dropdown-toggle-split) {
-    @include button-variant($dropdown-bg, $dropdown-border-color, $dropdown-color, $dropdown-bg, $dropdown-border-color, $dropdown-color, $dropdown-bg, $dropdown-color, $dropdown-color, $dropdown-bg, var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-color));
-  }
-  // End mod
 }
 
 // The dropdown menu
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index a724839c77..bcc1050007 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -99,6 +99,7 @@
 
 // Boosted mod: no `.bd-summary-link`
 
+// Boosted mod: some values have been changed in the following `custom-color-mode` and `.btn-dropdown` is used instead of `.btn-secondary`
 // scss-docs-start custom-color-mode
 [data-bs-theme="blue"] {
   --bs-body-color: var(--bs-white);
@@ -109,21 +110,21 @@
 
   .dropdown-menu {
     --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
-    --bs-dropdown-link-color: var(--bs-white); // Boosted mod
+    --bs-dropdown-link-color: var(--bs-white);
     --bs-dropdown-link-active-bg: #{$blue-700};
-    --bs-dropdown-link-hover-color: var(--bs-white); // Boosted mod
-    --bs-dropdown-link-hover-bg: #{$blue-600}; // Boosted mod
+    --bs-dropdown-link-hover-color: var(--bs-white);
+    --bs-dropdown-link-hover-bg: #{$blue-600};
   }
 
-  .btn-secondary {
-    --bs-btn-color: var(--bs-white); // Boosted mod
+  .btn-dropdown {
+    --bs-btn-color: var(--bs-white);
     --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
     --bs-btn-border-color: #{rgba($white, .25)};
     --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
-    --bs-btn-hover-color: inherit; // Boosted mod
+    --bs-btn-hover-color: inherit;
     --bs-btn-hover-border-color: #{rgba($white, .25)};
     --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
-    --bs-btn-active-color: inherit; // Boosted mod
+    --bs-btn-active-color: inherit;
     --bs-btn-active-border-color: #{rgba($white, .5)};
     --bs-btn-focus-border-color: #{rgba($white, .5)};
     --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
diff --git a/site/content/docs/5.3/components/button-group.md b/site/content/docs/5.3/components/button-group.md
index 02b3c124c8..d2143bb853 100644
--- a/site/content/docs/5.3/components/button-group.md
+++ b/site/content/docs/5.3/components/button-group.md
@@ -37,7 +37,7 @@ These classes can also be added to groups of links, as an alternative to the [`.
 ## Mixed styles
 
 {{< design-callout-alert >}}
-This variant **using and mixing colored button backgrounds** should not be used because it does not respect the Orange Design System specifications. In button groups, you should only use the button variant that uses `.btn .btn-secondary`.
+This variant **using and mixing colored button backgrounds** should not be used because it does not respect the Orange Design System specifications. In button groups, you should only use the button variant that uses `.btn .btn-outline-secondary`.
 
 Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples" >}}) secondary variant component. You can also refer to the [Buttons: standard](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/539dce) guidelines on the Orange Design System website.
 {{< /design-callout-alert >}}
@@ -200,7 +200,7 @@ This variant should not be used because it does not respect the Orange Design Sy
 Make a set of buttons appear vertically stacked rather than horizontally.
 
 {{< design-callout-alert >}}
-These 2 vertical variants should not be used because they do not respect the Orange Design System specifications.
+These 3 vertical variants should not be used because they do not respect the Orange Design System specifications.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -214,12 +214,11 @@ These 2 vertical variants should not be used because they do not respect the Ora
 
 {{< example >}}
 <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
-  <button type="button" class="btn btn-outline-secondary">Button</button>
-  <button type="button" class="btn btn-outline-secondary">Button</button>
+  <button type="button" class="btn btn-primary">Button</button>
+  <button type="button" class="btn btn-primary">Button</button>
   <div class="btn-group" role="group">
-    <button type="button" class="btn btn-outline-secondary">Split button</button>
-    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-      <span class="visually-hidden">Toggle Dropdown</span>
+    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      Dropdown
     </button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Dropdown link</a></li>
@@ -227,9 +226,8 @@ These 2 vertical variants should not be used because they do not respect the Ora
     </ul>
   </div>
   <div class="btn-group dropstart" role="group">
-    <button type="button" class="btn btn-outline-secondary">Split button</button>
-    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-      <span class="visually-hidden">Toggle Dropdown</span>
+    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      Dropdown
     </button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Dropdown link</a></li>
@@ -237,9 +235,8 @@ These 2 vertical variants should not be used because they do not respect the Ora
     </ul>
   </div>
   <div class="btn-group dropend" role="group">
-    <button type="button" class="btn btn-outline-secondary">Split button</button>
-    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-      <span class="visually-hidden">Toggle Dropdown</span>
+    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      Dropdown
     </button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Dropdown link</a></li>
@@ -247,9 +244,8 @@ These 2 vertical variants should not be used because they do not respect the Ora
     </ul>
   </div>
   <div class="btn-group dropup" role="group">
-    <button type="button" class="btn btn-outline-secondary">Split button</button>
-    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-      <span class="visually-hidden">Toggle Dropdown</span>
+    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      Dropdown
     </button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Dropdown link</a></li>
@@ -259,4 +255,13 @@ These 2 vertical variants should not be used because they do not respect the Ora
 </div>
 {{< /example >}}
 
-<!-- Boosted mod: toggle buttons group don't support vertical variation -->
+{{< example >}}
+<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
+  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
+  <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
+  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
+  <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
+  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
+  <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
+</div>
+{{< /example >}}
diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md
index 79c5615058..9ec30165ae 100644
--- a/site/content/docs/5.3/components/dropdowns.md
+++ b/site/content/docs/5.3/components/dropdowns.md
@@ -32,7 +32,7 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
 
 {{< example >}}
 <div class="dropdown">
-  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown button
   </button>
   <ul class="dropdown-menu">
@@ -47,7 +47,7 @@ While `<button>` is the recommended control for a dropdown toggle, there might b
 
 {{< example >}}
 <div class="dropdown">
-  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+  <a class="btn btn-dropdown dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown link
   </a>
 
@@ -59,7 +59,96 @@ While `<button>` is the recommended control for a dropdown toggle, there might b
 </div>
 {{< /example >}}
 
-<!-- Boosted mod: do not show button's variants for dropdown -->
+<details>
+<summary>Other variants from Bootstrap</summary>
+<br>
+{{< design-callout-alert >}}
+Only the `.btn-dropdown` variant should be used because the other variants do not respect the Orange Design System specifications as they are inherited from Bootstrap.
+
+Please refer to the [Dropdowns](https://system.design.orange.com/0c1af118d/p/910b9b-dropdown/b/04c480) guidelines on the Orange Design System website.
+{{< /design-callout-alert >}}
+
+The best part is you can do this with any button variant, too:
+
+<div class="bd-example">
+  <div class="btn-group">
+    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div><!-- /btn-group -->
+</div>
+
+```html
+<!-- Example single danger button -->
+<div class="btn-group">
+  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+    Action
+  </button>
+  <ul class="dropdown-menu">
+    <li><a class="dropdown-item" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Another action</a></li>
+    <li><a class="dropdown-item" href="#">Something else here</a></li>
+    <li><hr class="dropdown-divider"></li>
+    <li><a class="dropdown-item" href="#">Separated link</a></li>
+  </ul>
+</div>
+```
+</details>
 
 ### Split button
 
@@ -67,8 +156,6 @@ Similarly, create split button dropdowns with virtually the same markup as singl
 
 We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.
 
-<!-- Boosted mod: do not show button's variants for dropdown -->
-
 {{< example >}}
 <div class="btn-group">
   <button type="button" class="btn btn-outline-secondary">Action</button>
@@ -85,13 +172,121 @@ We use this extra class to reduce the horizontal `padding` on either side of the
 </div>
 {{< /example >}}
 
+<details>
+<summary>Other variants from Bootstrap</summary>
+<br>
+{{< design-callout-alert >}}
+Only the `.btn-outline-secondary` variant should be used as a split dropdown because the other variants do not respect the Orange Design System specifications as they are inherited from Bootstrap.
+
+Please refer to the [Dropdowns](https://system.design.orange.com/0c1af118d/p/910b9b-dropdown/b/04c480) guidelines on the Orange Design System website.
+{{< /design-callout-alert >}}
+
+<div class="bd-example">
+  <div class="btn-group">
+    <button type="button" class="btn btn-primary">Primary</button>
+    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+      <span class="visually-hidden">Toggle Dropdown</span>
+    </button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-secondary">Secondary</button>
+    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+      <span class="visually-hidden">Toggle Dropdown</span>
+    </button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-success">Success</button>
+    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+      <span class="visually-hidden">Toggle Dropdown</span>
+    </button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-info">Info</button>
+    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+      <span class="visually-hidden">Toggle Dropdown</span>
+    </button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-warning">Warning</button>
+    <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+      <span class="visually-hidden">Toggle Dropdown</span>
+    </button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-danger">Danger</button>
+    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+      <span class="visually-hidden">Toggle Dropdown</span>
+    </button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div><!-- /btn-group -->
+</div>
+
+```html
+<!-- Example split danger button -->
+<div class="btn-group">
+  <button type="button" class="btn btn-danger">Action</button>
+  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <span class="visually-hidden">Toggle Dropdown</span>
+  </button>
+  <ul class="dropdown-menu">
+    <li><a class="dropdown-item" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Another action</a></li>
+    <li><a class="dropdown-item" href="#">Something else here</a></li>
+    <li><hr class="dropdown-divider"></li>
+    <li><a class="dropdown-item" href="#">Separated link</a></li>
+  </ul>
+</div>
+```
+</details>
+
 ## Sizing
 
 Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
 
 <div class="bd-example">
   <div class="btn-group">
-    <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    <button class="btn btn-dropdown btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
       Large button
     </button>
     <ul class="dropdown-menu">
@@ -120,7 +315,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
 ```html
 <!-- Large button groups (default and split) -->
 <div class="btn-group">
-  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-dropdown btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Large button
   </button>
   <ul class="dropdown-menu">
@@ -148,7 +343,7 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
 
 <div class="bd-example">
   <div class="btn-group">
-    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    <button class="btn btn-dropdown btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
       Small button
     </button>
     <ul class="dropdown-menu">
@@ -176,7 +371,7 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
 
 ```html
 <div class="btn-group">
-  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-dropdown btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Small button
   </button>
   <ul class="dropdown-menu">
@@ -222,7 +417,7 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
 
 {{< example >}}
 <div class="dropdown-center">
-  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Centered dropdown
   </button>
   <ul class="dropdown-menu">
@@ -239,7 +434,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
 
 <div class="bd-example">
   <div class="btn-group dropup">
-    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
       Dropup
     </button>
     <ul class="dropdown-menu">
@@ -270,7 +465,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
 ```html
 <!-- Default dropup button -->
 <div class="btn-group dropup">
-  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
     Dropup
   </button>
   <ul class="dropdown-menu">
@@ -304,7 +499,7 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
 
 {{< example >}}
 <div class="dropup-center dropup">
-  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Centered dropup
   </button>
   <ul class="dropdown-menu">
@@ -321,7 +516,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the
 
 <div class="bd-example">
   <div class="btn-group dropend">
-    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
       Dropend
     </button>
     <ul class="dropdown-menu">
@@ -352,7 +547,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the
 ```html
 <!-- Default dropend button -->
 <div class="btn-group dropend">
-  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
     Dropend
   </button>
   <ul class="dropdown-menu">
@@ -380,7 +575,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropstart` to the
 
 <div class="bd-example">
   <div class="btn-group dropstart">
-    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
       Dropstart
     </button>
     <ul class="dropdown-menu">
@@ -411,7 +606,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropstart` to the
 ```html
 <!-- Default dropstart button -->
 <div class="btn-group dropstart">
-  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
     Dropstart
   </button>
   <ul class="dropdown-menu">
@@ -439,7 +634,7 @@ You can use `<a>` or `<button>` elements as dropdown items.
 
 {{< example >}}
 <div class="dropdown">
-  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown
   </button>
   <ul class="dropdown-menu">
@@ -497,7 +692,7 @@ Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu.
 
 {{< example >}}
 <div class="btn-group">
-  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
     Right-aligned menu example
   </button>
   <ul class="dropdown-menu dropdown-menu-end">
@@ -516,7 +711,7 @@ To align **right** the dropdown menu with the given breakpoint or larger, add `.
 
 {{< example >}}
 <div class="btn-group">
-  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
+  <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
     Left-aligned but right aligned when large screen
   </button>
   <ul class="dropdown-menu dropdown-menu-lg-end">
@@ -531,7 +726,7 @@ To align **left** the dropdown menu with the given breakpoint or larger, add `.d
 
 {{< example >}}
 <div class="btn-group">
-  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
+  <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
     Right-aligned but left aligned when large screen
   </button>
   <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
@@ -550,7 +745,7 @@ Taking most of the options shown above, here's a small kitchen sink demo of vari
 
 {{< example >}}
 <div class="btn-group">
-  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown
   </button>
   <ul class="dropdown-menu">
@@ -561,7 +756,7 @@ Taking most of the options shown above, here's a small kitchen sink demo of vari
 </div>
 
 <div class="btn-group">
-  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
     Right-aligned menu
   </button>
   <ul class="dropdown-menu dropdown-menu-end">
@@ -572,7 +767,7 @@ Taking most of the options shown above, here's a small kitchen sink demo of vari
 </div>
 
 <div class="btn-group">
-  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
+  <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
     Left-aligned, right-aligned lg
   </button>
   <ul class="dropdown-menu dropdown-menu-lg-end">
@@ -583,7 +778,7 @@ Taking most of the options shown above, here's a small kitchen sink demo of vari
 </div>
 
 <div class="btn-group">
-  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
+  <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
     Right-aligned, left-aligned lg
   </button>
   <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
@@ -594,7 +789,7 @@ Taking most of the options shown above, here's a small kitchen sink demo of vari
 </div>
 
 <div class="btn-group dropstart">
-  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
     Dropstart
   </button>
   <ul class="dropdown-menu">
@@ -605,7 +800,7 @@ Taking most of the options shown above, here's a small kitchen sink demo of vari
 </div>
 
 <div class="btn-group dropend">
-  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
     Dropend
   </button>
   <ul class="dropdown-menu">
@@ -616,7 +811,7 @@ Taking most of the options shown above, here's a small kitchen sink demo of vari
 </div>
 
 <div class="btn-group dropup">
-  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
     Dropup
   </button>
   <ul class="dropdown-menu">
@@ -747,7 +942,7 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
 {{< example >}}
 <div class="d-flex">
   <div class="dropdown me-1">
-    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
+    <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
       Offset
     </button>
     <ul class="dropdown-menu">
@@ -782,7 +977,7 @@ The 3 last auto close behavior variants should not be used because featuring a s
 
 {{< example >}}
 <div class="btn-group">
-  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
+  <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
     Default dropdown
   </button>
   <ul class="dropdown-menu">
@@ -793,7 +988,7 @@ The 3 last auto close behavior variants should not be used because featuring a s
 </div>
 
 <div class="btn-group">
-  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
+  <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
     Clickable inside
   </button>
   <ul class="dropdown-menu">
@@ -804,7 +999,7 @@ The 3 last auto close behavior variants should not be used because featuring a s
 </div>
 
 <div class="btn-group">
-  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+  <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
     Clickable outside
   </button>
   <ul class="dropdown-menu">
@@ -815,7 +1010,7 @@ The 3 last auto close behavior variants should not be used because featuring a s
 </div>
 
 <div class="btn-group">
-  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
+  <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
     Manual close
   </button>
   <ul class="dropdown-menu">
diff --git a/site/content/docs/5.3/components/offcanvas.md b/site/content/docs/5.3/components/offcanvas.md
index 7f4b3619f0..07d1595ecf 100644
--- a/site/content/docs/5.3/components/offcanvas.md
+++ b/site/content/docs/5.3/components/offcanvas.md
@@ -70,7 +70,7 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ
       Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
     </div>
     <div class="dropdown mt-3">
-      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
+      <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown">
         Dropdown button
       </button>
       <ul class="dropdown-menu">
diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md
index 0552cc33cf..258cebdc1b 100644
--- a/site/content/docs/5.3/customize/color-modes.md
+++ b/site/content/docs/5.3/customize/color-modes.md
@@ -33,7 +33,7 @@ For example, to change the color mode of a dropdown menu, add `data-bs-theme="li
 
 {{< example class="d-flex justify-content-between" >}}
 <div class="dropdown" data-bs-theme="light">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
     Default dropdown
   </button>
   <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
@@ -47,7 +47,7 @@ For example, to change the color mode of a dropdown menu, add `data-bs-theme="li
 </div>
 
 <div class="dropdown" data-bs-theme="dark">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
     Dark dropdown
   </button>
   <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
@@ -167,7 +167,7 @@ For example, you can create a "blue theme" with the selector `data-bs-theme="blu
   <hr class="my-4">
 
   <div class="dropdown">
-    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonCustom" data-bs-toggle="dropdown" aria-expanded="false">
+    <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButtonCustom" data-bs-toggle="dropdown" aria-expanded="false">
       Dropdown button
     </button>
     <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonCustom">
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 5d73e0efd4..b1f00a1e23 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -655,8 +655,8 @@ sitemap_exclude: true
   <button type="button" class="btn btn-icon btn-no-outline" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a>
   <a class="btn btn-icon btn-social btn-youtube disabled"><span class="visually-hidden">YouTube</span></a>
-  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button">Large button</button></div>
-  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" disabled>Large button</button></div>
+  <div class="btn-group"><button class="btn btn-dropdown dropdown-toggle" type="button">Large button</button></div>
+  <div class="btn-group"><button class="btn btn-dropdown dropdown-toggle" type="button" disabled>Large button</button></div>
   <div class="btn-group"><button class="btn btn-outline-secondary" type="button">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"><span class="visually-hidden">Toggle Dropdown</span></button></div>
   <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled>Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled><span class="visually-hidden">Toggle Dropdown</span></button></div>
 </div>
@@ -706,8 +706,8 @@ sitemap_exclude: true
   <button type="button" class="btn btn-icon btn-no-outline" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a>
   <a class="btn btn-icon btn-social btn-youtube disabled"><span class="visually-hidden">YouTube</span></a>
-  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button">Large button</button></div>
-  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" disabled>Large button</button></div>
+  <div class="btn-group"><button class="btn btn-dropdown dropdown-toggle" type="button">Large button</button></div>
+  <div class="btn-group"><button class="btn btn-dropdown dropdown-toggle" type="button" disabled>Large button</button></div>
   <div class="btn-group"><button class="btn btn-outline-secondary" type="button">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"><span class="visually-hidden">Toggle Dropdown</span></button></div>
   <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled>Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled><span class="visually-hidden">Toggle Dropdown</span></button></div>
 </div>
@@ -757,8 +757,8 @@ sitemap_exclude: true
   <button type="button" class="btn btn-icon btn-no-outline" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a>
   <a class="btn btn-icon btn-social btn-youtube disabled"><span class="visually-hidden">YouTube</span></a>
-  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button">Large button</button></div>
-  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" disabled>Large button</button></div>
+  <div class="btn-group"><button class="btn btn-dropdown dropdown-toggle" type="button">Large button</button></div>
+  <div class="btn-group"><button class="btn btn-dropdown dropdown-toggle" type="button" disabled>Large button</button></div>
   <div class="btn-group"><button class="btn btn-outline-secondary" type="button">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"><span class="visually-hidden">Toggle Dropdown</span></button></div>
   <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled>Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled><span class="visually-hidden">Toggle Dropdown</span></button></div>
 </div>
@@ -808,8 +808,8 @@ sitemap_exclude: true
   <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <a href="#" class="btn btn-icon btn-social btn-youtube" data-bs-theme="dark"><span class="visually-hidden">YouTube</span></a>
   <a class="btn btn-icon btn-social btn-youtube disabled" data-bs-theme="dark"><span class="visually-hidden">YouTube</span></a>
-  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" data-bs-theme="dark">Large button</button></div>
-  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" disabled data-bs-theme="dark">Large button</button></div>
+  <div class="btn-group"><button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-theme="dark">Large button</button></div>
+  <div class="btn-group"><button class="btn btn-dropdown dropdown-toggle" type="button" disabled data-bs-theme="dark">Large button</button></div>
   <div class="btn-group"><button class="btn btn-outline-secondary" type="button" data-bs-theme="dark">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-theme="dark"><span class="visually-hidden">Toggle Dropdown</span></button></div>
   <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled data-bs-theme="dark">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled data-bs-theme="dark"><span class="visually-hidden">Toggle Dropdown</span></button></div>
 </div>
@@ -859,8 +859,8 @@ sitemap_exclude: true
   <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <a href="#" class="btn btn-icon btn-social btn-youtube" data-bs-theme="light"><span class="visually-hidden">YouTube</span></a>
   <a class="btn btn-icon btn-social btn-youtube disabled" data-bs-theme="light"><span class="visually-hidden">YouTube</span></a>
-  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" data-bs-theme="light">Large button</button></div>
-  <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" disabled data-bs-theme="light">Large button</button></div>
+  <div class="btn-group"><button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-theme="light">Large button</button></div>
+  <div class="btn-group"><button class="btn btn-dropdown dropdown-toggle" type="button" disabled data-bs-theme="light">Large button</button></div>
   <div class="btn-group"><button class="btn btn-outline-secondary" type="button" data-bs-theme="light">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-theme="light"><span class="visually-hidden">Toggle Dropdown</span></button></div>
   <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled data-bs-theme="light">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled data-bs-theme="light"><span class="visually-hidden">Toggle Dropdown</span></button></div>
 </div>
@@ -1545,169 +1545,585 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3">
   <div class="btn-group">
     <div class="dropdown">
-      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-        Dropdown button
-      </button>
+      <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
       <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Action</a></li>
-        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item active" href="#">Another action</a></li>
         <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
       </ul>
     </div>
   </div>
-
   <div class="btn-group">
     <button type="button" class="btn btn-outline-secondary">Action</button>
-    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-      <span class="visually-hidden">Toggle Dropdown</span>
-    </button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Action</a></li>
-      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item active" href="#">Another action</a></li>
+      <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+    </ul>
+  </div>
+  <div class="btn-group dropstart">
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item active" href="#">Another action</a></li>
       <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
-      <li><hr class="dropdown-divider"></li>
-      <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
+    <button type="button" class="btn btn-outline-secondary">Action</button>
   </div>
+
+  <div class="btn-group">
+    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-secondary">Action</button>
+    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div>
+  <div class="btn-group">
+    <button type="button" class="btn btn-primary">Primary</button>
+    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-success">Success</button>
+    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-info">Info</button>
+    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-warning">Warning</button>
+    <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-danger">Danger</button>
+    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-primary">Primary</button>
+    <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-success">Success</button>
+    <button type="button" class="btn btn-outline-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-info">Info</button>
+    <button type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-warning">Warning</button>
+    <button type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-danger">Danger</button>
+    <button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
 </div>
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-body" data-bs-theme="dark">
   <div class="btn-group">
     <div class="dropdown">
-      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-        Dropdown button
-      </button>
+      <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
       <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Action</a></li>
-        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item active" href="#">Another action</a></li>
         <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
       </ul>
     </div>
   </div>
-
   <div class="btn-group">
     <button type="button" class="btn btn-outline-secondary">Action</button>
-    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-      <span class="visually-hidden">Toggle Dropdown</span>
-    </button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Action</a></li>
-      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item active" href="#">Another action</a></li>
       <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
-      <li><hr class="dropdown-divider"></li>
-      <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
   </div>
+  <div class="btn-group dropstart">
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item active" href="#">Another action</a></li>
+      <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+    </ul>
+    <button type="button" class="btn btn-outline-secondary">Action</button>
+  </div>
+
+  <div class="btn-group">
+    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-secondary">Action</button>
+    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div>
+  <div class="btn-group">
+    <button type="button" class="btn btn-primary">Primary</button>
+    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-success">Success</button>
+    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-info">Info</button>
+    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-warning">Warning</button>
+    <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-danger">Danger</button>
+    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-primary">Primary</button>
+    <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-success">Success</button>
+    <button type="button" class="btn btn-outline-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-info">Info</button>
+    <button type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-warning">Warning</button>
+    <button type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-danger">Danger</button>
+    <button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-body" data-bs-theme="light">
   <div class="btn-group">
     <div class="dropdown">
-      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-        Dropdown button
-      </button>
+      <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
       <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Action</a></li>
-        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item active" href="#">Another action</a></li>
         <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
       </ul>
     </div>
   </div>
-
   <div class="btn-group">
     <button type="button" class="btn btn-outline-secondary">Action</button>
-    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-      <span class="visually-hidden">Toggle Dropdown</span>
-    </button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Action</a></li>
-      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item active" href="#">Another action</a></li>
+      <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+    </ul>
+  </div>
+  <div class="btn-group dropstart">
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item active" href="#">Another action</a></li>
       <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
-      <li><hr class="dropdown-divider"></li>
-      <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
+    <button type="button" class="btn btn-outline-secondary">Action</button>
   </div>
+
+  <div class="btn-group">
+    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-secondary">Action</button>
+    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div>
+  <div class="btn-group">
+    <button type="button" class="btn btn-primary">Primary</button>
+    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-success">Success</button>
+    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-info">Info</button>
+    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-warning">Warning</button>
+    <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-danger">Danger</button>
+    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-primary">Primary</button>
+    <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-success">Success</button>
+    <button type="button" class="btn btn-outline-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-info">Info</button>
+    <button type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-warning">Warning</button>
+    <button type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-danger">Danger</button>
+    <button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
 </div>
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55">
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3" style="background-color: #282d55">
   <div class="btn-group">
     <div class="dropdown">
-      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">
-        Dropdown button
-      </button>
+      <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">Dropdown button</button>
       <ul class="dropdown-menu" data-bs-theme="dark">
         <li><a class="dropdown-item" href="#">Action</a></li>
-        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item active" href="#">Another action</a></li>
         <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
       </ul>
     </div>
   </div>
-
   <div class="btn-group">
-    <button type="button" class="btn btn-outline-secondary" data-bs-theme="dark">Action</button>
-    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">
-      <span class="visually-hidden">Toggle Dropdown</span>
-    </button>
+    <button data-bs-theme="dark" type="button" class="btn btn-outline-secondary">Action</button>
+    <button data-bs-theme="dark" type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
     <ul class="dropdown-menu" data-bs-theme="dark">
       <li><a class="dropdown-item" href="#">Action</a></li>
-      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item active" href="#">Another action</a></li>
       <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
-      <li><hr class="dropdown-divider"></li>
-      <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
   </div>
+  <div class="btn-group dropstart">
+    <button data-bs-theme="dark" type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+    <ul class="dropdown-menu" data-bs-theme="dark">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item active" href="#">Another action</a></li>
+      <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+    </ul>
+    <button data-bs-theme="dark" type="button" class="btn btn-outline-secondary">Action</button>
+  </div>
+
+  <div class="btn-group">
+    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">Primary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">Secondary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">Success</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">Info</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">Warning</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">Danger</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">Primary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">Secondary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">Success</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">Info</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">Warning</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button type="button" class="btn btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">Danger</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="dark" type="button" class="btn btn-secondary">Action</button>
+    <button data-bs-theme="dark" type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div>
+  <div class="btn-group">
+    <button data-bs-theme="dark" type="button" class="btn btn-primary">Primary</button>
+    <button data-bs-theme="dark" type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="dark" type="button" class="btn btn-success">Success</button>
+    <button data-bs-theme="dark" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="dark" type="button" class="btn btn-info">Info</button>
+    <button data-bs-theme="dark" type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="dark" type="button" class="btn btn-warning">Warning</button>
+    <button data-bs-theme="dark" type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="dark" type="button" class="btn btn-danger">Danger</button>
+    <button data-bs-theme="dark" type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="dark" type="button" class="btn btn-outline-primary">Primary</button>
+    <button data-bs-theme="dark" type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="dark" type="button" class="btn btn-outline-success">Success</button>
+    <button data-bs-theme="dark" type="button" class="btn btn-outline-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="dark" type="button" class="btn btn-outline-info">Info</button>
+    <button data-bs-theme="dark" type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="dark" type="button" class="btn btn-outline-warning">Warning</button>
+    <button data-bs-theme="dark" type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="dark" type="button" class="btn btn-outline-danger">Danger</button>
+    <button data-bs-theme="dark" type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
 </div>
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3" style="background-color: #b5e8f7">
   <div class="btn-group">
     <div class="dropdown">
-      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="light">
-        Dropdown button
-      </button>
+      <button data-bs-theme="light" class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
       <ul class="dropdown-menu" data-bs-theme="light">
         <li><a class="dropdown-item" href="#">Action</a></li>
-        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item active" href="#">Another action</a></li>
         <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
       </ul>
     </div>
   </div>
-
   <div class="btn-group">
-    <button type="button" class="btn btn-outline-secondary" data-bs-theme="light">Action</button>
-    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="light">
-      <span class="visually-hidden">Toggle Dropdown</span>
-    </button>
+    <button data-bs-theme="light" type="button" class="btn btn-outline-secondary">Action</button>
+    <button data-bs-theme="light" type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
     <ul class="dropdown-menu" data-bs-theme="light">
       <li><a class="dropdown-item" href="#">Action</a></li>
-      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item active" href="#">Another action</a></li>
       <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
-      <li><hr class="dropdown-divider"></li>
-      <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
   </div>
+  <div class="btn-group dropstart">
+    <button data-bs-theme="light" type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+    <ul class="dropdown-menu" data-bs-theme="light">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item active" href="#">Another action</a></li>
+      <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+    </ul>
+    <button data-bs-theme="light" type="button" class="btn btn-outline-secondary">Action</button>
+  </div>
+
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
+  </div><!-- /btn-group -->
+
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-secondary">Action</button>
+    <button data-bs-theme="light" type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div>
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-primary">Primary</button>
+    <button data-bs-theme="light" type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-success">Success</button>
+    <button data-bs-theme="light" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-info">Info</button>
+    <button data-bs-theme="light" type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-warning">Warning</button>
+    <button data-bs-theme="light" type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-danger">Danger</button>
+    <button data-bs-theme="light" type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-outline-primary">Primary</button>
+    <button data-bs-theme="light" type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-outline-success">Success</button>
+    <button data-bs-theme="light" type="button" class="btn btn-outline-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-outline-info">Info</button>
+    <button data-bs-theme="light" type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-outline-warning">Warning</button>
+    <button data-bs-theme="light" type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
+  <div class="btn-group">
+    <button data-bs-theme="light" type="button" class="btn btn-outline-danger">Danger</button>
+    <button data-bs-theme="light" type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
+  </div><!-- /btn-group -->
 </div>
 
 <h4 class="mt-3">Dark dropdown variant for retro-compatibility</h4>
 
-<div class="border border-tertiary p-3 bg-dark">
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-dark">
   <div class="dropdown">
-    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
       Dropdown button
     </button>
     <ul class="dropdown-menu dropdown-menu-dark">
       <li><a class="dropdown-item active" href="#">Action</a></li>
-      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item active" href="#">Another action</a></li>
       <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
       <li><hr class="dropdown-divider"></li>
       <li><a class="dropdown-item" href="#">Separated link</a></li>
@@ -1721,7 +2137,7 @@ sitemap_exclude: true
     </button>
     <ul class="dropdown-menu dropdown-menu-dark">
       <li><a class="dropdown-item active" href="#">Action</a></li>
-      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item active" href="#">Another action</a></li>
       <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
       <li><hr class="dropdown-divider"></li>
       <li><a class="dropdown-item" href="#">Separated link</a></li>
@@ -6924,7 +7340,7 @@ sitemap_exclude: true
     </div>
   </div>
   <div class="input-group">
-    <button class="btn btn-secondary" type="button" disabled>Button</button>
+    <button class="btn btn-outline-secondary" type="button" disabled>Button</button>
     <select class="form-select" disabled>
       <option selected>Choose...</option>
       <option value="1">One</option>
@@ -6945,7 +7361,7 @@ sitemap_exclude: true
     </div>
   </div>
   <div class="input-group">
-    <button class="btn btn-secondary" type="button" disabled>Button</button>
+    <button class="btn btn-outline-secondary" type="button" disabled>Button</button>
     <select class="form-select" disabled>
       <option selected>Choose...</option>
       <option value="1">One</option>
@@ -6966,7 +7382,7 @@ sitemap_exclude: true
     </div>
   </div>
   <div class="input-group">
-    <button class="btn btn-secondary" type="button" disabled>Button</button>
+    <button class="btn btn-outline-secondary" type="button" disabled>Button</button>
     <select class="form-select" disabled>
       <option selected>Choose...</option>
       <option value="1">One</option>
@@ -6987,7 +7403,7 @@ sitemap_exclude: true
     </div>
   </div>
   <div class="input-group" data-bs-theme="dark">
-    <button class="btn btn-secondary" type="button" disabled>Button</button>
+    <button class="btn btn-outline-secondary" type="button" disabled>Button</button>
     <select class="form-select" disabled>
       <option selected>Choose...</option>
       <option value="1">One</option>
@@ -7008,7 +7424,7 @@ sitemap_exclude: true
     </div>
   </div>
   <div class="input-group" data-bs-theme="light">
-    <button class="btn btn-secondary" type="button" disabled>Button</button>
+    <button class="btn btn-outline-secondary" type="button" disabled>Button</button>
     <select class="form-select" disabled>
       <option selected>Choose...</option>
       <option value="1">One</option>
diff --git a/site/content/docs/5.3/forms/input-group.md b/site/content/docs/5.3/forms/input-group.md
index cc3839289b..7bfb2009f8 100644
--- a/site/content/docs/5.3/forms/input-group.md
+++ b/site/content/docs/5.3/forms/input-group.md
@@ -194,7 +194,7 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
 
 {{< example >}}
 <div class="input-group mb-3">
-  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
+  <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Action</a></li>
     <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -207,7 +207,7 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
 
 <div class="input-group mb-3">
   <input type="text" class="form-control" aria-label="Text input with dropdown button">
-  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
+  <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
   <ul class="dropdown-menu dropdown-menu-end">
     <li><a class="dropdown-item" href="#">Action</a></li>
     <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -218,7 +218,7 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
 </div>
 
 <div class="input-group">
-  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
+  <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Action before</a></li>
     <li><a class="dropdown-item" href="#">Another action before</a></li>
@@ -227,7 +227,7 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
     <li><a class="dropdown-item" href="#">Separated link</a></li>
   </ul>
   <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
-  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
+  <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
   <ul class="dropdown-menu dropdown-menu-end">
     <li><a class="dropdown-item" href="#">Action</a></li>
     <li><a class="dropdown-item" href="#">Another action</a></li>

From 365975f2613249b79a4c9d340a00c4041c52c76d Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Mon, 13 Nov 2023 14:53:29 +0100
Subject: [PATCH 30/71] Dark mode: Utilities (bg, border, color) (#2362)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 .bundlewatch.config.json                      |   2 +-
 scss/_button-group.scss                       |   4 +-
 scss/_buttons.scss                            |  14 +-
 scss/_root.scss                               |   3 +-
 scss/_utilities.scss                          |   4 +-
 scss/_variables-dark.scss                     |  10 +-
 scss/_variables.scss                          |  40 +-
 scss/forms/_form-check.scss                   |   6 +-
 scss/helpers/_chevron-link.scss               |   8 +-
 scss/helpers/_colored-links.scss              |   2 +-
 site/content/docs/5.3/dark-mode.md            | 960 ++++++++++++++----
 site/content/docs/5.3/utilities/background.md |  21 +-
 site/content/docs/5.3/utilities/colors.md     |  33 +-
 site/data/theme-colors.yml                    |   3 -
 14 files changed, 825 insertions(+), 285 deletions(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 265bc953de..42b2775ce1 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -14,7 +14,7 @@
     },
     {
       "path": "./dist/css/boosted-reboot.min.css",
-      "maxSize": "4.25 kB"
+      "maxSize": "4.5 kB"
     },
     {
       "path": "./dist/css/boosted-utilities.css",
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 77172b0844..e1d9da7762 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -140,11 +140,11 @@
   .btn.active + &,
   &:active + * + .btn,
   &.active + * + .btn {
-    border-color: $primary;
+    border-color: $brand-orange;
   }
 
   .btn-group.show > &:not(:focus):not(:active)::before {
-    color: $primary;
+    color: $brand-orange;
     background-color: currentcolor;
   }
   // End mod
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index a1133a604d..d4700169d3 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -98,7 +98,7 @@
 
 // scss-docs-start btn-variant-loops
 .btn-primary {
-  @include button-variant($primary, $primary, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}highlight-bg), $active-color: var(--#{$prefix}highlight-bg));
+  @include button-variant($brand-orange, $brand-orange, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}highlight-bg), $active-color: var(--#{$prefix}highlight-bg));
 }
 
 .btn-success {
@@ -131,15 +131,13 @@
 
 @each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
-    $btn-outline-hover-color: $white;
-    @if index(("primary", "warning", "info", "light"), #{$color}) {
+    $btn-outline-hover-color: var(--#{$prefix}highlight-color);
+    @if index(("primary", "warning", "light"), #{$color}) {
       $btn-outline-hover-color: $black;
+    } @else if (#{$color} == "dark") {
+      $btn-outline-hover-color: $white;
     }
-    @if #{$color} == "secondary" {
-      @include button-outline-variant(var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-color));
-    } @else {
-      @include button-outline-variant($value, $btn-outline-hover-color);
-    }
+    @include button-outline-variant(var(--#{$prefix}#{$color}), $btn-outline-hover-color);
   }
 }
 // scss-docs-end btn-variant-loops
diff --git a/scss/_root.scss b/scss/_root.scss
index e4326df544..b53df42ff1 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -35,7 +35,6 @@
     --#{$prefix}#{$color}-border-subtle: #{$value};
   }
 
-  --#{$prefix}primary-text-rgb: #{to-rgb($accessible-orange)}; // Boosted mod
   --#{$prefix}white-rgb: #{to-rgb($white)};
   --#{$prefix}black-rgb: #{to-rgb($black)};
 
@@ -227,6 +226,8 @@
     --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color-dark}; // Boosted mod
     --#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color-dark}; // Boosted mod
 
+    --#{$prefix}focus-ring-color: #{$focus-ring-color-dark}; // Boosted mod
+
     --#{$prefix}form-valid-color: #{$form-valid-color-dark};
     --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
     --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 4d3bb07853..9f680b8b69 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -593,7 +593,6 @@ $utilities: map-merge(
           "body-tertiary": var(--#{$prefix}tertiary-color),
           "body-emphasis": var(--#{$prefix}emphasis-color),
           "reset": inherit,
-          "primary": rgba(var(--#{$prefix}primary-text-rgb), var(--#{$prefix}text-opacity)), // Boosted mod: redefine primary value
         )
       )
     ),
@@ -680,7 +679,8 @@ $utilities: map-merge(
           "supporting-blue": $supporting-blue, // Boosted mod
           "supporting-yellow": $supporting-yellow, // Boosted mod
           "supporting-pink": $supporting-pink, // Boosted mod
-          "supporting-purple": $supporting-purple // Boosted mod
+          "supporting-purple": $supporting-purple, // Boosted mod
+          "supporting-orange": $brand-orange, // Boosted mod
         )
       )
     ),
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index abd521b9bf..55abf4e876 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -16,8 +16,8 @@ $functional-red-dark:    #d53f15 !default;
 
 // scss-docs-start sass-dark-mode-vars
 // scss-docs-start theme-color-dark-variables
-$primary-dark:                      $orange !default;
-$secondary-dark:                    $black !default;
+$primary-dark:                      $brand-orange !default;
+$secondary-dark:                    $white !default;
 $success-dark:                      $functional-green-dark !default;
 $info-dark:                         $functional-blue-dark !default;
 $warning-dark:                      $functional-yellow-dark !default;
@@ -41,7 +41,7 @@ $theme-colors-dark: (
 // End mod
 
 // scss-docs-start theme-text-dark-variables
-$primary-text-emphasis-dark:        $primary-dark !default; // Boosted mod: isntead of `tint-color($primary, 40%)`
+$primary-text-emphasis-dark:        $primary-dark !default; // Boosted mod: instead of `tint-color($primary, 40%)`
 $secondary-text-emphasis-dark:      $secondary-dark !default; // Boosted mod: instead of `tint-color($secondary, 40%)`
 $success-text-emphasis-dark:        $success-dark !default; // Boosted mod: instead of `tint-color($success, 40%)`
 $info-text-emphasis-dark:           $info-dark !default; // Boosted mod: instead of `tint-color($info, 40%)`
@@ -84,11 +84,13 @@ $border-color-dark:                 $white !default; // Boosted mod: instead of
 $border-color-translucent-dark:     $gray-700 !default; // Boosted mod instead of `rgba($white, .15)`
 $headings-color-dark:               $white !default; // Boosted mod: instead of `inherit`
 $link-color-dark:                   $white !default; // Boosted mod: instead of `tint-color($primary, 40%)`
-$link-hover-color-dark:             $primary !default; // Boosted mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)`
+$link-hover-color-dark:             $brand-orange !default; // Boosted mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)`
 $code-color-dark:                   tint-color($code-color, 40%) !default;
 $mark-color-dark:                   $black !default; // Boosted mod: instead of `$body-color-dark`
 $mark-bg-dark:                      $white !default; // Boosted mod: instead of `$yellow-800`
 
+$focus-ring-color-dark:             rgba($brand-orange, $focus-ring-opacity) !default; // Boosted mod
+
 $disabled-filter-dark:  brightness(0) invert(1) brightness(.4) !default; // Boosted mod
 
 $focus-visible-inner-color-dark:    $black !default; // Boosted mod
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 325215ecb1..6fda37077e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -63,7 +63,7 @@ $indigo:  $supporting-purple !default;
 $purple:  $supporting-purple !default;
 $pink:    $supporting-pink !default;
 $red:     $functional-red !default;
-$orange:  $brand-orange !default;
+$orange:  $accessible-orange !default;
 $yellow:  $functional-yellow !default;
 $green:   $functional-green !default;
 $teal:    $supporting-green !default;
@@ -344,7 +344,7 @@ $theme-colors: (
 // scss-docs-end theme-colors-map
 
 // scss-docs-start theme-text-variables
-$primary-text-emphasis:   $accessible-orange !default; // Boosted mod: instead of `shade-color($primary, 60%)`
+$primary-text-emphasis:   $primary !default; // Boosted mod: instead of `shade-color($primary, 60%)`
 $secondary-text-emphasis: $secondary !default; // Boosted mod: instead of `shade-color($secondary, 60%)`
 $success-text-emphasis:   $success !default; // Boosted mod: instead of `shade-color($success, 60%)`
 $info-text-emphasis:      $info !default; // Boosted mod: instead of `shade-color($info, 60%)`
@@ -418,7 +418,9 @@ $svg-as-custom-props: (
 //// Filters
 // see https://codepen.io/sosuke/pen/Pjoqqp
 $invert-filter:         invert(1) !default;
-$orange-filter:         invert(46%) sepia(60%) saturate(2878%) hue-rotate(6deg) brightness(98%) contrast(104%) !default;
+// fusv-disable
+$orange-filter:         invert(46%) sepia(60%) saturate(2878%) hue-rotate(6deg) brightness(98%) contrast(104%) !default; // Deprecated in v5.3.3
+// fusv-enable
 
 $disabled-filter:       brightness(0) invert(1) brightness(.8) !default;
 // End mod
@@ -668,7 +670,7 @@ $box-shadow-inset:  null !default; // Boosted mod: instead of `inset 0 1px 2px r
 // scss-docs-end box-shadow-variables
 
 $component-active-color:      $black !default;
-$component-active-bg:         $primary !default;
+$component-active-bg:         $brand-orange !default;
 
 // scss-docs-start focus-ring-variables
 $focus-ring-width:      .25rem !default;
@@ -987,8 +989,8 @@ $btn-border-width:            $input-btn-border-width !default;
 $btn-default-hover-bg:        var(--#{$prefix}highlight-bg) !default; // Boosted mod
 $btn-default-hover-border:    var(--#{$prefix}highlight-bg) !default; // Boosted mod
 $btn-default-hover-color:     var(--#{$prefix}highlight-color) !default; // Boosted mod
-$btn-default-active-bg:       $primary !default; // Boosted mod
-$btn-default-active-border:   $primary !default; // Boosted mod
+$btn-default-active-bg:       $brand-orange !default; // Boosted mod
+$btn-default-active-border:   $brand-orange !default; // Boosted mod
 $btn-default-active-color:    $black !default; // Boosted mod
 $btn-default-disabled-bg:     var(--#{$prefix}disabled-color) !default; // Boosted mod
 $btn-default-disabled-border: var(--#{$prefix}disabled-color) !default; // Boosted mod
@@ -997,8 +999,8 @@ $btn-default-disabled-color:  var(--#{$prefix}highlight-color) !default; // Boos
 $btn-outline-default-hover-bg:        var(--#{$prefix}btn-color) !default; // Boosted mod
 $btn-outline-default-hover-border:    var(--#{$prefix}btn-border-color) !default; // Boosted mod
 $btn-outline-default-hover-color:     $white !default; // Boosted mod
-$btn-outline-default-active-bg:       $primary !default; // Boosted mod
-$btn-outline-default-active-border:   $primary !default; // Boosted mod
+$btn-outline-default-active-bg:       $brand-orange !default; // Boosted mod
+$btn-outline-default-active-border:   $brand-orange !default; // Boosted mod
 $btn-outline-default-active-color:    $black !default; // Boosted mod
 $btn-outline-default-disabled-bg:     transparent !default; // Boosted mod
 $btn-outline-default-disabled-border: var(--#{$prefix}disabled-color) !default; // Boosted mod
@@ -1056,7 +1058,7 @@ $btn-social-networks: (
     "icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M27.3 4.7a15.9 15.9 0 00-25 19.1L.1 32l8.4-2.2A15.9 15.9 0 0027.3 4.7zM16 29c-2.4 0-4.7-.6-6.7-1.8l-.5-.3-5 1.3 1.3-4.8-.3-.5A13.2 13.2 0 1116.1 29zm7.2-9.8l-2.7-1.3c-.3-.1-.6-.2-1 .2l-1.2 1.5c-.2.3-.4.3-.8.1s-1.7-.6-3.2-2c-1.2-1-2-2.3-2.2-2.7s0-.6.2-.8l.6-.7.4-.6v-.7l-1.3-3c-.3-.7-.6-.6-.9-.7h-.7c-.2 0-.7.1-1.1.5C9 9.4 8 10.4 8 12.3s1.4 3.9 1.6 4.1c.2.3 2.8 4.3 6.8 6l2.3.9c.9.3 1.8.2 2.4.1.8-.1 2.4-1 2.7-1.9s.4-1.7.3-1.9l-.8-.4z'/></svg>"
   ),
   "mail": (
-    "color": $primary,
+    "color": $brand-orange,
     "icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M3.2 14.3c0 9.5 0 9 .2 9.5.3.8 1 1.4 1.7 1.7l12.2.1h11.5v-8.8c0-9.3 0-8.9-.2-9.3-.2-.7-.7-1.2-1.3-1.6l-.8-.3H3.2v8.7zm22.9-2.4a246.2 246.2 0 01-4.9 4.7l-.8.7-.5.6-.7.6c-.6.6-1 .9-1.3 1a4 4 0 01-1.8.5 4 4 0 01-2.4-.6 13 13 0 01-1.9-1.7l-2.4-2.4-.6-.6-1.4-1.3L6.1 12l-.5-.5V8.9l.6.5L7.9 11l1.4 1.4 1.3 1.2 1.3 1.3a195 195 0 012.6 2.4c.4.3 1 .5 1.6.4.5 0 1-.1 1.4-.4L19 16l1-1 1-1a214.7 214.7 0 012.2-2l1-1 2-2 .2-.2v2.8l-.3.3z'/></svg>",
     "size": 1.5rem
   ),
@@ -1259,8 +1261,8 @@ $form-switch-checked-bg-size:     add(map-get($spacers, 2), map-get($spacers, 1)
 $form-switch-checked-bg-position: calc(var(--#{$prefix}border-width) * 3) 50% !default; // Boosted mod
 
 $form-switch-checked-square-bg:     var(--#{$prefix}body-bg) !default; // Boosted mod
-$form-switch-checked-bg:            $primary !default; // Boosted mod
-$form-switch-checked-border-color:  $primary !default; // Boosted mod
+$form-switch-checked-bg:            $brand-orange !default; // Boosted mod
+$form-switch-checked-border-color:  $brand-orange !default; // Boosted mod
 $form-switch-checked-filter:        none !default; // Boosted mod
 $form-switch-checked-focus-inner:   var(--#{$prefix}focus-visible-inner-color) !default; // Boosted mod
 $form-switch-checked-focus-outer:   var(--#{$prefix}focus-visible-outer-color) !default; // Boosted mod
@@ -1324,7 +1326,7 @@ $form-range-track-width:          100% !default;
 $form-range-track-height:         .375rem !default; // Boosted mod: instead of `.5rem`
 $form-range-track-cursor:         pointer !default;
 $form-range-track-bg:             var(--#{$prefix}secondary-bg) !default;
-$form-range-track-filled-bg:      $primary !default; // Boosted mod
+$form-range-track-filled-bg:      var(--#{$prefix}link-hover-color) !default; // Boosted mod
 $form-range-track-border-radius:  null !default; // Boosted mod: instead of `1rem`
 $form-range-track-box-shadow:     var(--#{$prefix}box-shadow-inset) !default;
 
@@ -1337,8 +1339,8 @@ $form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !defa
 $form-range-thumb-focus-box-shadow:        null !default; // Boosted mod
 $form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
 $form-range-thumb-hover-bg:                var(--#{$prefix}highlight-bg) !default; // Boosted mod
-$form-range-thumb-active-bg:               $primary !default; // Boosted mod: instead of `tint-color($component-active-bg, 70%)`
-$form-range-thumb-active-border:           $primary !default; // Boosted mod
+$form-range-thumb-active-bg:               var(--#{$prefix}link-hover-color) !default; // Boosted mod: instead of `tint-color($component-active-bg, 70%)`
+$form-range-thumb-active-border:           var(--#{$prefix}link-hover-color) !default; // Boosted mod
 $form-range-thumb-disabled-bg:             var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $form-range-thumb-transition:              background-color $transition-duration $transition-timing, border-color $transition-duration $transition-timing !default; // Boosted mod: no box shadow
 // scss-docs-end form-range-variables
@@ -1562,8 +1564,8 @@ $navbar-badge-margin-top:                   .375rem !default;
 
 $navbar-dark-border-color:          $gray-700 !default; // Boosted mod
 $navbar-dark-color:                 $white !default; // Boosted mod: instead of `rgba($white, .55)`
-$navbar-dark-hover-color:           $primary !default; // Boosted mod: instead of `rgba($white, .75)`
-$navbar-dark-active-color:          $primary !default; // Boosted mod: instead of `$white`
+$navbar-dark-hover-color:           $brand-orange !default; // Boosted mod: instead of `rgba($white, .75)`
+$navbar-dark-active-color:          $brand-orange !default; // Boosted mod: instead of `$white`
 $navbar-dark-disabled-color:        $gray-700 !default; // Boosted mod: instead of `rgba($white, .25)`
 // Boosted mod: no $navbar-dark-icon-color
 // Boosted mod: no $navbar-dark-toggler-icon-bg since dark toggler are handled with filter
@@ -1679,7 +1681,7 @@ $pagination-icon-size:              subtract($spacer * 2, calc(var(--#{$prefix}b
 $pagination-icon-width:             add(.5rem, 1px) !default;
 $pagination-icon-height:            subtract(1rem, 1px) !default;
 
-$pagination-active-item-bg:         $primary !default;
+$pagination-active-item-bg:         $brand-orange !default;
 $pagination-active-item-color:      $black !default;
 $pagination-active-item-border:     $pagination-active-item-bg !default;
 // End mod
@@ -2220,7 +2222,7 @@ $btn-close-white-color:               $white !default; // Boosted mod
 $btn-close-white-bg:                  transparent !default; // Boosted mod
 $btn-close-white-border-color:        transparent !default; // Boosted mod
 $btn-close-white-hover-color:         $btn-close-white-color !default; // Boosted mod
-$btn-close-white-active-color:        $primary !default; // Boosted mod
+$btn-close-white-active-color:        $brand-orange !default; // Boosted mod
 $btn-close-white-active-border-color: $gray-700 !default; // Boosted mod
 $btn-close-white-disabled-color:      $gray-700 !default; // Boosted mod
 
@@ -2299,7 +2301,7 @@ $step-item-padding-end:       $step-item-padding * 2 !default; // Deprecated in
 // fusv-enable
 $step-item-margin-end:        var(--#{$prefix}border-width) !default;
 $step-item-bg:                var(--#{$prefix}highlight-bg) !default;
-$step-item-active-bg:         $primary !default;
+$step-item-active-bg:         $brand-orange !default;
 $step-item-next-bg:           var(--#{$prefix}border-color-translucent) !default;
 $step-item-shadow-size:       calc(var(--#{$prefix}border-width) * 1.5) !default; // stylelint-disable-line function-disallowed-list
 $step-item-drop-shadow:       drop-shadow($step-item-shadow-size 0 0 var(--#{$prefix}stepped-process-bg)) #{"/* rtl:"} drop-shadow(calc(-1 * #{$step-item-shadow-size}) 0 0 var(--#{$prefix}stepped-process-bg)) #{"*/"} !default; // stylelint-disable-line function-disallowed-list
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 52b60744b1..9f7ea8770f 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -318,11 +318,11 @@
   &:active + .btn,
   + .btn:active,
   + .btn.active {
-    color: color-contrast($primary);
-    background-color: $primary;
+    color: color-contrast($brand-orange);
+    background-color: $brand-orange;
     // Remove CSS gradients if they're enabled
     background-image: if($enable-gradients, none, null);
-    border-color: $primary;
+    border-color: $brand-orange;
   }
   // End mod
 
diff --git a/scss/helpers/_chevron-link.scss b/scss/helpers/_chevron-link.scss
index f71d495396..71794d46cb 100644
--- a/scss/helpers/_chevron-link.scss
+++ b/scss/helpers/_chevron-link.scss
@@ -10,17 +10,13 @@
     margin-left: $linked-chevron-margin-left;
     vertical-align: middle;
     content: "";
-    background-image: var(--#{$prefix}chevron-icon);
-    background-repeat: no-repeat;
+    background-color: currentcolor;
+    mask: var(--#{$prefix}chevron-icon) no-repeat;
     transform: $linked-chevron-transform;
   }
 
   &:hover {
     text-decoration: $link-decoration;
-
-    &::after {
-      filter: $orange-filter;
-    }
   }
 }
 // End mod
diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
index f47bd3bbd1..6c80dbe2b0 100644
--- a/scss/helpers/_colored-links.scss
+++ b/scss/helpers/_colored-links.scss
@@ -1,7 +1,7 @@
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
   .link-#{$color} {
-    color: RGBA(if($color == "primary", var(--#{$prefix}#{$color}-text-rgb), var(--#{$prefix}#{$color}-rgb)), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); // Boosted mod: adapt to the right variable for primary
+    color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
     text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
 
     @if $link-shade-percentage != 0 {
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index b1f00a1e23..f7af3d09ff 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -139,7 +139,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <div class="accordion" id="accordionExample1">
     <div class="accordion-item">
       <h2 class="accordion-header">
@@ -180,7 +180,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <div class="accordion" id="accordionExample2">
     <div class="accordion-item">
       <h2 class="accordion-header">
@@ -221,7 +221,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <div class="accordion" id="accordionExample3">
     <div class="accordion-item">
       <h2 class="accordion-header">
@@ -262,7 +262,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55">
+<div class="border p-3" style="background-color: #282d55">
   <div class="accordion" id="accordionExample6" data-bs-theme="dark">
     <div class="accordion-item">
       <h2 class="accordion-header">
@@ -303,7 +303,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <div class="accordion" id="accordionExample7" data-bs-theme="light">
     <div class="accordion-item">
       <h2 class="accordion-header">
@@ -346,7 +346,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <div class="alert alert-success" role="alert">
     <span class="alert-icon"><span class="visually-hidden">Success</span></span>
     <p>Success notification text goes here.</p>
@@ -367,7 +367,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <div class="alert alert-success" role="alert">
     <span class="alert-icon"><span class="visually-hidden">Success</span></span>
     <p>Success notification text goes here.</p>
@@ -388,7 +388,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <div class="alert alert-success" role="alert">
     <span class="alert-icon"><span class="visually-hidden">Success</span></span>
     <p>Success notification text goes here.</p>
@@ -409,7 +409,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55">
+<div class="border p-3" style="background-color: #282d55">
   <div class="alert alert-success" role="alert" data-bs-theme="dark">
     <span class="alert-icon"><span class="visually-hidden">Success</span></span>
     <p>Success notification text goes here.</p>
@@ -430,7 +430,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <div class="alert alert-success" role="alert" data-bs-theme="light">
     <span class="alert-icon"><span class="visually-hidden">Success</span></span>
     <p>Success notification text goes here.</p>
@@ -453,7 +453,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="d-flex gap-2 flex-wrap border border-tertiary p-3">
+<div class="d-flex gap-2 flex-wrap border p-3">
   <nav aria-label="Standard back to top example" class="back-to-top position-static ps-5 ms-5">
     <a href="#" 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>
@@ -468,7 +468,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
   <nav aria-label="Standard back to top example2" class="back-to-top position-static ps-5 ms-5">
     <a href="#" 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>
@@ -483,7 +483,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
   <nav aria-label="Standard back to top example3" class="back-to-top position-static ps-5 ms-5">
     <a href="#" 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>
@@ -498,7 +498,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="d-flex gap-2 flex-wrap border border-tertiary p-3" style="background-color: #282d55;">
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #282d55;">
   <nav aria-label="Standard back to top example4" class="back-to-top position-static ps-5 ms-5" data-bs-theme="dark">
     <a href="#" 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>
@@ -513,7 +513,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="d-flex gap-2 flex-wrap border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #b5e8f7">
   <nav aria-label="Standard back to top example5" class="back-to-top position-static ps-5 ms-5" data-bs-theme="light">
     <a href="#" 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>
@@ -530,7 +530,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <nav aria-label="breadcrumb1">
     <ol class="breadcrumb mb-0">
       <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -546,7 +546,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <nav aria-label="breadcrumb2">
     <ol class="breadcrumb mb-0">
       <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -562,7 +562,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <nav aria-label="breadcrumb3">
     <ol class="breadcrumb mb-0">
       <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -578,7 +578,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <nav aria-label="breadcrumb4">
     <ol class="breadcrumb mb-0" data-bs-theme="dark">
       <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -594,7 +594,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <nav aria-label="breadcrumb5">
     <ol class="breadcrumb mb-0" data-bs-theme="light">
       <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -612,7 +612,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="d-flex gap-2 flex-wrap border border-tertiary p-3">
+<div class="d-flex gap-2 flex-wrap border p-3">
   <button type="button" class="btn btn-primary">Primary</button>
   <button type="button" class="btn btn-primary" disabled>Primary</button>
   <button type="button" class="btn btn-secondary">Secondary</button>
@@ -663,7 +663,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
   <button type="button" class="btn btn-primary">Primary</button>
   <button type="button" class="btn btn-primary" disabled>Primary</button>
   <button type="button" class="btn btn-secondary">Secondary</button>
@@ -714,7 +714,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
   <button type="button" class="btn btn-primary">Primary</button>
   <button type="button" class="btn btn-primary" disabled>Primary</button>
   <button type="button" class="btn btn-secondary">Secondary</button>
@@ -765,7 +765,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="d-flex gap-2 flex-wrap border border-tertiary p-3" style="background-color: #282d55;">
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #282d55;">
   <button type="button" class="btn btn-primary" data-bs-theme="dark">Primary</button>
   <button type="button" class="btn btn-primary" disabled data-bs-theme="dark">Primary</button>
   <button type="button" class="btn btn-secondary" data-bs-theme="dark">Secondary</button>
@@ -816,7 +816,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="d-flex gap-2 flex-wrap border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #b5e8f7">
   <button type="button" class="btn btn-primary" data-bs-theme="light">Primary</button>
   <button type="button" class="btn btn-primary" disabled data-bs-theme="light">Primary</button>
   <button type="button" class="btn btn-secondary" data-bs-theme="light">Secondary</button>
@@ -869,7 +869,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="row row-cols-1 row-cols-xl-3 border border-tertiary p-3">
+<div class="row row-cols-1 row-cols-xl-3 border p-3">
   <div class="col">
     <div class="card">
       <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
@@ -932,7 +932,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="row row-cols-1 row-cols-xl-3 border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="row row-cols-1 row-cols-xl-3 border p-3 bg-body" data-bs-theme="dark">
   <div class="col">
     <div class="card">
       <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
@@ -995,7 +995,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="row row-cols-1 row-cols-xl-3 border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="row row-cols-1 row-cols-xl-3 border p-3 bg-body" data-bs-theme="light">
   <div class="col">
     <div class="card">
       <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
@@ -1058,7 +1058,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="row row-cols-1 row-cols-xl-3 border border-tertiary p-3" style="background-color: #282d55;">
+<div class="row row-cols-1 row-cols-xl-3 border p-3" style="background-color: #282d55;">
   <div class="col">
     <div class="card" data-bs-theme="dark">
       <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
@@ -1121,7 +1121,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="row row-cols-1 row-cols-xl-3 border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="row row-cols-1 row-cols-xl-3 border p-3" style="background-color: #b5e8f7">
   <div class="col">
     <div class="card" data-bs-theme="light">
       <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
@@ -1186,7 +1186,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-wrap="false">
     <div class="carousel-action-bar">
       <button type="button" class="btn btn-icon carousel-control-play-pause pause" data-bs-target="#carouselExample" data-bs-play-text="Play Carousel" data-bs-pause-text="Pause Carousel" title="Pause Carousel">
@@ -1234,7 +1234,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <div id="carouselExample2" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-wrap="false">
     <div class="carousel-action-bar">
       <button type="button" class="btn btn-icon carousel-control-play-pause pause" data-bs-target="#carouselExample2" data-bs-play-text="Play Carousel" data-bs-pause-text="Pause Carousel" title="Pause Carousel">
@@ -1282,7 +1282,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <div id="carouselExample3" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-wrap="false">
     <div class="carousel-action-bar">
       <button type="button" class="btn btn-icon carousel-control-play-pause pause" data-bs-target="#carouselExample3" data-bs-play-text="Play Carousel" data-bs-pause-text="Pause Carousel" title="Pause Carousel">
@@ -1330,7 +1330,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <div id="carouselExample4" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-wrap="false" data-bs-theme="dark">
     <div class="carousel-action-bar">
       <button type="button" class="btn btn-icon carousel-control-play-pause pause" data-bs-target="#carouselExample4" data-bs-play-text="Play Carousel" data-bs-pause-text="Pause Carousel" title="Pause Carousel">
@@ -1378,7 +1378,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <div id="carouselExample5" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-wrap="false" data-bs-theme="light">
     <div class="carousel-action-bar">
       <button type="button" class="btn btn-icon carousel-control-play-pause pause" data-bs-target="#carouselExample5" data-bs-play-text="Play Carousel" data-bs-pause-text="Pause Carousel" title="Pause Carousel">
@@ -1428,7 +1428,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" disabled><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
@@ -1451,7 +1451,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" disabled><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
@@ -1474,7 +1474,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" disabled><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
@@ -1497,7 +1497,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark"><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark" disabled><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark">
@@ -1520,7 +1520,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light"><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light" disabled><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light">
@@ -1545,7 +1545,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="d-flex gap-2 flex-wrap border border-tertiary p-3">
+<div class="d-flex gap-2 flex-wrap border p-3">
   <div class="btn-group">
     <div class="dropdown">
       <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
@@ -1659,7 +1659,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
   <div class="btn-group">
     <div class="dropdown">
       <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
@@ -1773,7 +1773,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
   <div class="btn-group">
     <div class="dropdown">
       <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
@@ -1887,7 +1887,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="d-flex gap-2 flex-wrap border border-tertiary p-3" style="background-color: #282d55">
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #282d55">
   <div class="btn-group">
     <div class="dropdown">
       <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">Dropdown button</button>
@@ -2001,7 +2001,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="d-flex gap-2 flex-wrap border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #b5e8f7">
   <div class="btn-group">
     <div class="dropdown">
       <button data-bs-theme="light" class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
@@ -2116,7 +2116,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark dropdown variant for retro-compatibility</h4>
 
-<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-dark">
+<div class="d-flex gap-2 flex-wrap border p-3 bg-dark">
   <div class="dropdown">
     <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
       Dropdown button
@@ -2149,7 +2149,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <footer class="footer navbar">
     <h2 class="visually-hidden">Sitemap &amp; information</h2>
     <div class="container-xxl footer-title-content">
@@ -2289,7 +2289,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <footer class="footer navbar">
     <h2 class="visually-hidden">Sitemap &amp; information</h2>
     <div class="container-xxl footer-title-content">
@@ -2429,7 +2429,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <footer class="footer navbar">
     <h2 class="visually-hidden">Sitemap &amp; information</h2>
     <div class="container-xxl footer-title-content">
@@ -2569,7 +2569,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <footer class="footer navbar" data-bs-theme="dark">
     <h2 class="visually-hidden">Sitemap &amp; information</h2>
     <div class="container-xxl footer-title-content">
@@ -2709,7 +2709,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <footer class="footer navbar" data-bs-theme="light">
     <h2 class="visually-hidden">Sitemap &amp; information</h2>
     <div class="container-xxl footer-title-content">
@@ -2851,7 +2851,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3">
+<div class="d-flex flex-column gap-2 align-items-start border p-3">
   <ol class="list-group list-group-numbered">
     <li class="list-group-item">A list item</li>
     <li class="list-group-item active" aria-current="true">A list item</li>
@@ -2886,7 +2886,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex flex-column gap-2 align-items-start border p-3 bg-body" data-bs-theme="dark">
   <ol class="list-group list-group-numbered">
     <li class="list-group-item">A list item</li>
     <li class="list-group-item active" aria-current="true">A list item</li>
@@ -2921,7 +2921,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="d-flex flex-column gap-2 align-items-start border p-3 bg-body" data-bs-theme="light">
   <ol class="list-group list-group-numbered">
     <li class="list-group-item">A list item</li>
     <li class="list-group-item active" aria-current="true">A list item</li>
@@ -2956,7 +2956,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3" style="background-color: #282d55;">
+<div class="d-flex flex-column gap-2 align-items-start border p-3" style="background-color: #282d55;">
   <ol class="list-group list-group-numbered" data-bs-theme="dark">
     <li class="list-group-item">A list item</li>
     <li class="list-group-item active" aria-current="true">A list item</li>
@@ -2991,7 +2991,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="d-flex flex-column gap-2 align-items-start border p-3" style="background-color: #b5e8f7">
   <ol class="list-group list-group-numbered" data-bs-theme="light">
     <li class="list-group-item">A list item</li>
     <li class="list-group-item active" aria-current="true">A list item</li>
@@ -3028,7 +3028,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <nav class="local-nav" aria-label="Basic local navigation">
     <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav1" aria-expanded="false" aria-controls="collapseLocalNav1">
       <span class="container-xxl">Shop</span>
@@ -3048,7 +3048,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <nav class="local-nav" aria-label="Basic local navigation">
     <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav2" aria-expanded="false" aria-controls="collapseLocalNav2">
       <span class="container-xxl">Shop</span>
@@ -3068,7 +3068,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <nav class="local-nav" aria-label="Basic local navigation">
     <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav3" aria-expanded="false" aria-controls="collapseLocalNav3">
       <span class="container-xxl">Shop</span>
@@ -3088,7 +3088,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55">
+<div class="border p-3" style="background-color: #282d55">
   <nav class="local-nav" aria-label="Basic local navigation" data-bs-theme="dark">
     <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav4" aria-expanded="false" aria-controls="collapseLocalNav4">
       <span class="container-xxl">Shop</span>
@@ -3108,7 +3108,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <nav class="local-nav" aria-label="Basic local navigation" data-bs-theme="light">
     <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav5" aria-expanded="false" aria-controls="collapseLocalNav5">
       <span class="container-xxl">Shop</span>
@@ -3130,7 +3130,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalExample1">
     Launch modal
   </button>
@@ -3161,7 +3161,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalExample2">
     Launch modal
   </button>
@@ -3192,7 +3192,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalExample3">
     Launch modal
   </button>
@@ -3223,7 +3223,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalExample4" data-bs-theme="dark">
     Launch modal
   </button>
@@ -3254,7 +3254,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalExample5" data-bs-theme="light">
     Launch modal
   </button>
@@ -3287,7 +3287,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <nav class="navbar navbar-expand-lg">
     <div class="container-fluid">
       <div class="navbar-brand">
@@ -3330,7 +3330,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <nav class="navbar navbar-expand-lg">
     <div class="container-fluid">
       <div class="navbar-brand">
@@ -3373,7 +3373,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <nav class="navbar navbar-expand-lg">
     <div class="container-fluid">
       <div class="navbar-brand">
@@ -3416,7 +3416,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <nav class="navbar navbar-expand-lg" data-bs-theme="dark">
     <div class="container-fluid">
       <div class="navbar-brand">
@@ -3459,7 +3459,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <nav class="navbar navbar-expand-lg" data-bs-theme="light">
     <div class="container-fluid">
       <div class="navbar-brand">
@@ -3504,7 +3504,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <ul class="nav">
     <li class="nav-item">
       <a class="nav-link active" aria-current="page" href="#">Active</a>
@@ -3606,7 +3606,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <ul class="nav nav-underline">
     <li class="nav-item">
       <a class="nav-link active" aria-current="page" href="#">Active</a>
@@ -3679,7 +3679,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <ul class="nav nav-underline">
     <li class="nav-item">
       <a class="nav-link active" aria-current="page" href="#">Active</a>
@@ -3752,7 +3752,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <ul class="nav nav-underline" data-bs-theme="dark">
     <li class="nav-item">
       <a class="nav-link active" aria-current="page" href="#">Active</a>
@@ -3825,7 +3825,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <ul class="nav nav-underline" data-bs-theme="light">
     <li class="nav-item">
       <a class="nav-link active" aria-current="page" href="#">Active</a>
@@ -3900,7 +3900,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample1" aria-controls="offcanvasExample1">
     Button with data-bs-target
   </button>
@@ -3929,7 +3929,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample2" aria-controls="offcanvasExample2">
     Button with data-bs-target
   </button>
@@ -3958,7 +3958,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample3" aria-controls="offcanvasExample3">
     Button with data-bs-target
   </button>
@@ -3987,7 +3987,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <button class="btn btn-primary" data-bs-theme="dark" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample4" aria-controls="offcanvasExample4">
     Button with data-bs-target
   </button>
@@ -4016,7 +4016,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <button class="btn btn-primary" data-bs-theme="light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample5" aria-controls="offcanvasExample5">
     Button with data-bs-target
   </button>
@@ -4047,7 +4047,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <header>
     <nav class="navbar navbar-expand-lg supra" aria-label="Supra navigation1">
       <div class="container-xxl">
@@ -4135,7 +4135,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <header>
     <nav class="navbar navbar-expand-lg supra" aria-label="Supra navigation2">
       <div class="container-xxl">
@@ -4223,7 +4223,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <header>
     <nav class="navbar navbar-expand-lg supra" aria-label="Supra navigation3">
       <div class="container-xxl">
@@ -4311,7 +4311,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <header>
     <nav class="navbar navbar-expand-lg supra" data-bs-theme="dark" aria-label="Supra navigation4">
       <div class="container-xxl">
@@ -4399,7 +4399,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <header>
     <nav class="navbar navbar-expand-lg supra" data-bs-theme="light" aria-label="Supra navigation5">
       <div class="container-xxl">
@@ -4489,7 +4489,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="d-flex flex-column gap-2 border border-tertiary p-3">
+<div class="d-flex flex-column gap-2 border p-3">
   <nav aria-label="Page navigation example">
     <ul class="pagination mb-0">
       <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
@@ -4520,7 +4520,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="dark">
   <nav aria-label="Page navigation example2">
     <ul class="pagination mb-0">
       <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
@@ -4551,7 +4551,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="light">
   <nav aria-label="Page navigation example3">
     <ul class="pagination mb-0">
       <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
@@ -4582,7 +4582,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #282d55;">
+<div class="d-flex flex-column gap-2 border p-3" style="background-color: #282d55;">
   <nav aria-label="Page navigation example4">
     <ul class="pagination mb-0" data-bs-theme="dark">
       <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
@@ -4613,7 +4613,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="d-flex flex-column gap-2 border p-3" style="background-color: #b5e8f7">
   <nav aria-label="Page navigation example5">
     <ul class="pagination mb-0" data-bs-theme="light">
       <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
@@ -4646,35 +4646,35 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3">
+<div class="d-flex gap-2 flex-wrap align-items-center border p-3">
   <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
   <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
 </div>
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap align-items-center border p-3 bg-body" data-bs-theme="dark">
   <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
   <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap align-items-center border p-3 bg-body" data-bs-theme="light">
   <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
   <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
 </div>
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3" style="background-color: #282d55;">
+<div class="d-flex gap-2 flex-wrap align-items-center border p-3" style="background-color: #282d55;">
   <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right" data-bs-theme="dark"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
   <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-bs-theme="dark">Click to toggle popover</button>
 </div>
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="d-flex gap-2 flex-wrap align-items-center border p-3" style="background-color: #b5e8f7">
   <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right" data-bs-theme="light"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
   <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-bs-theme="light">Click to toggle popover</button>
 </div>
@@ -4683,7 +4683,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="d-flex flex-column gap-2 border border-tertiary p-3">
+<div class="d-flex flex-column gap-2 border p-3">
   <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
     <div class="progress-bar" style="width: 30%">30%</div>
   </div>
@@ -4748,7 +4748,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="dark">
   <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
     <div class="progress-bar" style="width: 30%">30%</div>
   </div>
@@ -4813,7 +4813,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="light">
   <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
     <div class="progress-bar" style="width: 30%">30%</div>
   </div>
@@ -4878,7 +4878,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #282d55;">
+<div class="d-flex flex-column gap-2 border p-3" style="background-color: #282d55;">
   <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
     <div class="progress-bar" style="width: 30%">30%</div>
   </div>
@@ -4943,7 +4943,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="d-flex flex-column gap-2 border p-3" style="background-color: #b5e8f7">
   <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
     <div class="progress-bar" style="width: 30%">30%</div>
   </div>
@@ -5010,7 +5010,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <div class="spinner-border" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
@@ -5033,7 +5033,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <div class="spinner-border" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
@@ -5056,7 +5056,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <div class="spinner-border" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
@@ -5079,7 +5079,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <div class="spinner-border" role="status" data-bs-theme="dark">
     <span class="visually-hidden">Loading...</span>
   </div>
@@ -5102,7 +5102,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <div class="spinner-border" role="status" data-bs-theme="light">
     <span class="visually-hidden">Loading...</span>
   </div>
@@ -5127,7 +5127,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <nav class="stepped-process" aria-label="Checkout process">
     <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
     <ol>
@@ -5152,7 +5152,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <nav class="stepped-process" aria-label="Checkout process">
     <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
     <ol>
@@ -5177,7 +5177,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <nav class="stepped-process" aria-label="Checkout process">
     <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
     <ol>
@@ -5202,7 +5202,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <nav class="stepped-process" aria-label="Checkout process" data-bs-theme="dark" style="--bs-stepped-process-bg: #282d55;">
     <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
     <ol>
@@ -5227,7 +5227,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <nav class="stepped-process" aria-label="Checkout process" data-bs-theme="light" style="--bs-stepped-process-bg: #b5e8f7;">
     <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
     <ol>
@@ -5254,7 +5254,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3 d-flex">
+<div class="border p-3 d-flex">
   <div class="sticker sticker-sm">
     <p class="mb-0">
       <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
@@ -5275,7 +5275,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body d-flex" data-bs-theme="dark">
+<div class="border p-3 bg-body d-flex" data-bs-theme="dark">
   <div class="sticker sticker-sm">
     <p class="mb-0">
       <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
@@ -5296,7 +5296,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body d-flex" data-bs-theme="light">
+<div class="border p-3 bg-body d-flex" data-bs-theme="light">
   <div class="sticker sticker-sm">
     <p class="mb-0">
       <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
@@ -5317,7 +5317,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3 d-flex" style="background-color: #282d55;">
+<div class="border p-3 d-flex" style="background-color: #282d55;">
   <div class="sticker sticker-sm" data-bs-theme="dark">
     <p class="mb-0">
       <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
@@ -5338,7 +5338,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3 d-flex" style="background-color: #b5e8f7">
+<div class="border p-3 d-flex" style="background-color: #b5e8f7">
   <div class="sticker sticker-sm" data-bs-theme="light">
     <p class="mb-0">
       <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
@@ -5361,7 +5361,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <ul class="list-unstyled d-flex gap-2 flex-wrap m-0">
     <li>
       <input type="checkbox" class="btn-check" id="btncheck-mobile1" autocomplete="off">
@@ -5404,7 +5404,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <ul class="list-unstyled d-flex gap-2 flex-wrap m-0">
     <li>
       <input type="checkbox" class="btn-check" id="btncheck-mobile2" autocomplete="off">
@@ -5447,7 +5447,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <ul class="list-unstyled d-flex gap-2 flex-wrap m-0">
     <li>
       <input type="checkbox" class="btn-check" id="btncheck-mobile3" autocomplete="off">
@@ -5490,7 +5490,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55">
+<div class="border p-3" style="background-color: #282d55">
   <ul class="list-unstyled d-flex gap-2 flex-wrap m-0">
     <li>
       <input type="checkbox" class="btn-check" id="btncheck-mobile4" autocomplete="off">
@@ -5533,7 +5533,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <ul class="list-unstyled d-flex gap-2 flex-wrap m-0">
     <li>
       <input type="checkbox" class="btn-check" id="btncheck-mobile5" autocomplete="off">
@@ -5578,7 +5578,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <div class="title-bar">
     <div class="container-xxl">
       <h1 class="display-1">Title</h1>
@@ -5588,7 +5588,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <div class="title-bar">
     <div class="container-xxl">
       <h1 class="display-1">Title</h1>
@@ -5598,7 +5598,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <div class="title-bar">
     <div class="container-xxl">
       <h1 class="display-1">Title</h1>
@@ -5608,7 +5608,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <div class="title-bar" data-bs-theme="dark">
     <div class="container-xxl">
       <h1 class="display-1">Title</h1>
@@ -5618,7 +5618,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <div class="title-bar" data-bs-theme="light">
     <div class="container-xxl">
       <h1 class="display-1">Title</h1>
@@ -5630,7 +5630,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3">
+<div class="d-flex gap-2 flex-wrap align-items-center border p-3">
   <div class="tooltip bs-tooltip-auto show position-relative" role="tooltip" data-popper-placement="right">
     <div class="tooltip-arrow position-absolute " style="transform: translate(0px, 14px);"></div>
     <div class="tooltip-inner">Tooltip</div>
@@ -5640,7 +5640,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap align-items-center border p-3 bg-body" data-bs-theme="dark">
   <div class="tooltip bs-tooltip-auto show position-relative" role="tooltip" data-popper-placement="right">
     <div class="tooltip-arrow position-absolute " style="transform: translate(0px, 14px);"></div>
     <div class="tooltip-inner">Tooltip</div>
@@ -5650,7 +5650,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap align-items-center border p-3 bg-body" data-bs-theme="light">
   <div class="tooltip bs-tooltip-auto show position-relative" role="tooltip" data-popper-placement="right">
     <div class="tooltip-arrow position-absolute " style="transform: translate(0px, 14px);"></div>
     <div class="tooltip-inner">Tooltip</div>
@@ -5660,7 +5660,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3" style="background-color: #282d55;">
+<div class="d-flex gap-2 flex-wrap align-items-center border p-3" style="background-color: #282d55;">
   <div class="tooltip bs-tooltip-auto show position-relative" role="tooltip" data-popper-placement="right" data-bs-theme="dark">
     <div class="tooltip-arrow position-absolute " style="transform: translate(0px, 14px);"></div>
     <div class="tooltip-inner">Tooltip</div>
@@ -5670,7 +5670,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="d-flex gap-2 flex-wrap align-items-center border p-3" style="background-color: #b5e8f7">
   <div class="tooltip bs-tooltip-auto show position-relative" role="tooltip" data-popper-placement="right" data-bs-theme="light">
     <div class="tooltip-arrow position-absolute " style="transform: translate(0px, 14px);"></div>
     <div class="tooltip-inner">Tooltip</div>
@@ -5684,7 +5684,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="d-flex flex-column align-items-start border border-tertiary p-3">
+<div class="d-flex flex-column align-items-start border p-3">
   <h1>H1</h1>
   <h2>H2</h2>
   <h3>H3</h3>
@@ -5760,7 +5760,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex flex-column align-items-start border border-tertiary p-3 bg-body text-body" data-bs-theme="dark">
+<div class="d-flex flex-column align-items-start border p-3 bg-body text-body" data-bs-theme="dark">
   <h1>H1</h1>
   <h2>H2</h2>
   <h3>H3</h3>
@@ -5836,7 +5836,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex flex-column align-items-start border border-tertiary p-3 bg-body text-body" data-bs-theme="light">
+<div class="d-flex flex-column align-items-start border p-3 bg-body text-body" data-bs-theme="light">
   <h1>H1</h1>
   <h2>H2</h2>
   <h3>H3</h3>
@@ -5912,7 +5912,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="d-flex flex-column align-items-start border border-tertiary p-3" style="background-color: #282d55;">
+<div class="d-flex flex-column align-items-start border p-3" style="background-color: #282d55;">
   <h1 data-bs-theme="dark">H1</h1>
   <h2 data-bs-theme="dark">H2</h2>
   <h3 data-bs-theme="dark">H3</h3>
@@ -5988,7 +5988,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="d-flex flex-column align-items-start border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="d-flex flex-column align-items-start border p-3" style="background-color: #b5e8f7">
   <h1 data-bs-theme="light">H1</h1>
   <h2 data-bs-theme="light">H2</h2>
   <h3 data-bs-theme="light">H3</h3>
@@ -6066,7 +6066,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="d-flex flex-column border border-tertiary p-3">
+<div class="d-flex flex-column border p-3">
   <fieldset>
     <legend>Example legend</legend>
     <p>
@@ -6190,7 +6190,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <fieldset>
     <legend>Example legend</legend>
     <p>
@@ -6314,7 +6314,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <fieldset>
     <legend>Example legend</legend>
     <p>
@@ -6438,7 +6438,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <fieldset>
     <legend class="text-body" data-bs-theme="dark">Example legend</legend>
     <p>
@@ -6562,7 +6562,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <fieldset>
     <legend class="text-body" data-bs-theme="light">Example legend</legend>
     <p>
@@ -6688,7 +6688,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <table class="table table-hover mb-5">
     <caption>Boosted tables basic and hover look</caption>
     <thead>
@@ -6763,7 +6763,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <table class="table table-hover mb-5">
     <caption>Boosted tables basic and hover look</caption>
     <thead>
@@ -6838,7 +6838,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <table class="table table-hover mb-5">
     <caption>Boosted tables basic and hover look</caption>
     <thead>
@@ -6913,7 +6913,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <table class="table table-hover mb-5" data-bs-theme="dark">
     <caption>Boosted tables basic and hover look</caption>
     <thead>
@@ -6988,7 +6988,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <table class="table table-hover mb-5" data-bs-theme="light">
     <caption>Boosted tables basic and hover look</caption>
     <thead>
@@ -7067,35 +7067,35 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color">
   <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" disabled>
 </div>
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color">
   <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" disabled>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color">
   <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" disabled>
 </div>
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" data-bs-theme="dark">
   <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" data-bs-theme="dark" disabled>
 </div>
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" data-bs-theme="light">
   <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" data-bs-theme="light" disabled>
 </div>
@@ -7104,7 +7104,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3 bd-example-indeterminate">
+<div class="border p-3 bd-example-indeterminate">
   <input class="form-check-input" type="checkbox" value="">
   <input class="form-check-input" type="checkbox" value="" checked>
   <input class="form-check-input" type="checkbox" value="" id="Indeterminate">
@@ -7119,7 +7119,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body bd-example-indeterminate" data-bs-theme="dark">
+<div class="border p-3 bg-body bd-example-indeterminate" data-bs-theme="dark">
   <input class="form-check-input" type="checkbox" value="">
   <input class="form-check-input" type="checkbox" value="" checked>
   <input class="form-check-input" type="checkbox" value="" id="Indeterminate1">
@@ -7134,7 +7134,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body bd-example-indeterminate" data-bs-theme="light">
+<div class="border p-3 bg-body bd-example-indeterminate" data-bs-theme="light">
   <input class="form-check-input" type="checkbox" value="">
   <input class="form-check-input" type="checkbox" value="" checked>
   <input class="form-check-input" type="checkbox" value="" id="Indeterminate3">
@@ -7149,7 +7149,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3 bd-example-indeterminate" style="background-color: #282d55;">
+<div class="border p-3 bd-example-indeterminate" style="background-color: #282d55;">
   <input class="form-check-input" type="checkbox" value="" data-bs-theme="dark">
   <input class="form-check-input" type="checkbox" value="" checked data-bs-theme="dark">
   <input class="form-check-input" type="checkbox" value="" id="Indeterminate5" data-bs-theme="dark">
@@ -7164,7 +7164,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3 bd-example-indeterminate" style="background-color: #b5e8f7">
+<div class="border p-3 bd-example-indeterminate" style="background-color: #b5e8f7">
   <input class="form-check-input" type="checkbox" value="" data-bs-theme="light">
   <input class="form-check-input" type="checkbox" value="" checked data-bs-theme="light">
   <input class="form-check-input" type="checkbox" value="" id="Indeterminate7" data-bs-theme="light">
@@ -7181,7 +7181,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <input type="text" class="form-control" placeholder="Input placeholder">
   <textarea class="form-control" rows="2" placeholder="Textarea placeholder"></textarea>
   <input type="text" class="form-control" placeholder="Disabled input placeholder" disabled>
@@ -7193,7 +7193,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <input type="text" class="form-control" placeholder="Input placeholder">
   <textarea class="form-control" rows="2" placeholder="Textarea placeholder"></textarea>
   <input type="text" class="form-control" placeholder="Disabled input placeholder" disabled>
@@ -7205,7 +7205,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <input type="text" class="form-control" placeholder="Input placeholder">
   <textarea class="form-control" rows="2" placeholder="Textarea placeholder"></textarea>
   <input type="text" class="form-control" placeholder="Disabled input placeholder" disabled>
@@ -7217,7 +7217,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <input type="text" class="form-control" placeholder="Input placeholder" data-bs-theme="dark">
   <textarea class="form-control" rows="2" placeholder="Textarea placeholder" data-bs-theme="dark"></textarea>
   <input type="text" class="form-control" placeholder="Disabled input placeholder" data-bs-theme="dark" disabled>
@@ -7229,7 +7229,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <input type="text" class="form-control" placeholder="Input placeholder" data-bs-theme="light">
   <textarea class="form-control" rows="2" placeholder="Textarea placeholder" data-bs-theme="light"></textarea>
   <input type="text" class="form-control" placeholder="Disabled input placeholder" data-bs-theme="light" disabled>
@@ -7243,35 +7243,35 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <input class="form-control" type="file">
   <input class="form-control" type="file" disabled>
 </div>
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <input class="form-control" type="file">
   <input class="form-control" type="file" disabled>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <input class="form-control" type="file">
   <input class="form-control" type="file" disabled>
 </div>
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <input class="form-control" type="file" data-bs-theme="dark">
   <input class="form-control" type="file" data-bs-theme="dark" disabled>
 </div>
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <input class="form-control" type="file" data-bs-theme="light">
   <input class="form-control" type="file" data-bs-theme="light" disabled>
 </div>
@@ -7280,7 +7280,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input"><span class="visually-hidden">Helper for input</span></button>
   <div>
     <label class="form-label is-required">Input label</label>
@@ -7290,7 +7290,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input"><span class="visually-hidden">Helper for input</span></button>
   <div>
     <label class="form-label is-required">Input label</label>
@@ -7300,7 +7300,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input"><span class="visually-hidden">Helper for input</span></button>
   <div>
     <label class="form-label is-required">Input label</label>
@@ -7310,7 +7310,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input" data-bs-theme="dark"><span class="visually-hidden">Helper for input</span></button>
   <div>
     <label class="form-label is-required" data-bs-theme="dark">Input label</label>
@@ -7320,7 +7320,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input" data-bs-theme="light"><span class="visually-hidden">Helper for input</span></button>
   <div>
     <label class="form-label is-required" data-bs-theme="light">Input label</label>
@@ -7332,7 +7332,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <div class="mb-3">
     <div class="input-group">
       <span class="input-group-text">Input group text</span>
@@ -7353,7 +7353,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <div class="mb-3">
     <div class="input-group">
       <span class="input-group-text">Input group text</span>
@@ -7374,7 +7374,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <div class="mb-3">
     <div class="input-group">
       <span class="input-group-text">Input group text</span>
@@ -7395,7 +7395,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <div class="mb-3">
     <div class="input-group" data-bs-theme="dark">
       <span class="input-group-text">Input group text</span>
@@ -7416,7 +7416,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <div class="mb-3">
     <div class="input-group" data-bs-theme="light">
       <span class="input-group-text">Input group text</span>
@@ -7439,7 +7439,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="d-flex flex-column border border-tertiary p-3">
+<div class="d-flex flex-column border p-3">
   <label class="form-label">Form label</label>
   <label class="form-label is-required">Form label</label>
   <label class="form-label is-disabled">Form label</label>
@@ -7449,7 +7449,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex flex-column border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex flex-column border p-3 bg-body" data-bs-theme="dark">
   <label class="form-label">Form label</label>
   <label class="form-label is-required">Form label</label>
   <label class="form-label is-disabled">Form label</label>
@@ -7459,7 +7459,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex flex-column border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="d-flex flex-column border p-3 bg-body" data-bs-theme="light">
   <label class="form-label">Form label</label>
   <label class="form-label is-required">Form label</label>
   <label class="form-label is-disabled">Form label</label>
@@ -7469,7 +7469,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="d-flex flex-column border border-tertiary p-3" style="background-color: #282d55;">
+<div class="d-flex flex-column border p-3" style="background-color: #282d55;">
   <label class="form-label" data-bs-theme="dark">Form label</label>
   <label class="form-label is-required" data-bs-theme="dark">Form label</label>
   <label class="form-label is-disabled" data-bs-theme="dark">Form label</label>
@@ -7479,7 +7479,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="d-flex flex-column border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="d-flex flex-column border p-3" style="background-color: #b5e8f7">
   <label class="form-label" data-bs-theme="light">Form label</label>
   <label class="form-label is-required" data-bs-theme="light">Form label</label>
   <label class="form-label is-disabled" data-bs-theme="light">Form label</label>
@@ -7491,7 +7491,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="d-flex gap-2 border border-tertiary p-3">
+<div class="d-flex gap-2 border p-3">
   <div class="quantity-selector">
     <input type="number" id="inputQuantitySelector" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
@@ -7514,7 +7514,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 border p-3 bg-body" data-bs-theme="dark">
   <div class="quantity-selector">
     <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">
@@ -7537,7 +7537,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 border p-3 bg-body" data-bs-theme="light">
   <div class="quantity-selector">
     <input type="number" id="inputQuantitySelector2" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector2" data-bs-step="down">
@@ -7560,7 +7560,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="d-flex gap-2 border border-tertiary p-3" style="background-color: #282d55;">
+<div class="d-flex gap-2 border p-3" style="background-color: #282d55;">
   <div class="quantity-selector" data-bs-theme="dark">
     <input type="number" id="inputQuantitySelector3" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector3" data-bs-step="down">
@@ -7583,7 +7583,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="d-flex gap-2 border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="d-flex gap-2 border p-3" style="background-color: #b5e8f7">
   <div class="quantity-selector" data-bs-theme="light">
     <input type="number" id="inputQuantitySelector4" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector4" data-bs-step="down">
@@ -7608,35 +7608,35 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <input type="range" class="form-range">
   <input type="range" class="form-range" disabled>
 </div>
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <input type="range" class="form-range">
   <input type="range" class="form-range" disabled>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <input type="range" class="form-range">
   <input type="range" class="form-range" disabled>
 </div>
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <input type="range" class="form-range" data-bs-theme="dark">
   <input type="range" class="form-range" data-bs-theme="dark" disabled>
 </div>
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <input type="range" class="form-range" data-bs-theme="light">
   <input type="range" class="form-range" data-bs-theme="light" disabled>
 </div>
@@ -7645,7 +7645,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <select class="form-select" aria-label="Default select example">
     <option selected>Open this select menu</option>
     <option value="1">One</option>
@@ -7662,7 +7662,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <select class="form-select" aria-label="Default select example">
     <option selected>Open this select menu</option>
     <option value="1">One</option>
@@ -7679,7 +7679,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <select class="form-select" aria-label="Default select example">
     <option selected>Open this select menu</option>
     <option value="1">One</option>
@@ -7696,7 +7696,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <select class="form-select" aria-label="Default select example" data-bs-theme="dark">
     <option selected>Open this select menu</option>
     <option value="1">One</option>
@@ -7713,7 +7713,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <select class="form-select" aria-label="Default select example" data-bs-theme="light">
     <option selected>Open this select menu</option>
     <option value="1">One</option>
@@ -7732,7 +7732,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="border border-tertiary p-3">
+<div class="border p-3">
   <form><fieldset class="star-rating">
     <legend class="visually-hidden">Results relevance</legend>
     <input type="radio" id="terrible1" name="rating" value="1" class="visually-hidden">
@@ -7773,7 +7773,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3 bg-body" data-bs-theme="dark">
   <form><fieldset class="star-rating">
     <legend class="visually-hidden">Results relevance</legend>
     <input type="radio" id="terrible2" name="rating" value="1" class="visually-hidden">
@@ -7814,7 +7814,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="border p-3 bg-body" data-bs-theme="light">
   <form><fieldset class="star-rating">
     <legend class="visually-hidden">Results relevance</legend>
     <input type="radio" id="terrible3" name="rating" value="1" class="visually-hidden">
@@ -7855,7 +7855,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #282d55;">
+<div class="border p-3" style="background-color: #282d55;">
   <form><fieldset class="star-rating" data-bs-theme="dark">
     <legend class="visually-hidden">Results relevance</legend>
     <input type="radio" id="terrible4" name="rating" value="1" class="visually-hidden">
@@ -7896,7 +7896,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="border p-3" style="background-color: #b5e8f7">
   <form><fieldset class="star-rating" data-bs-theme="light">
     <legend class="visually-hidden">Results relevance</legend>
     <input type="radio" id="terrible5" name="rating" value="1" class="visually-hidden">
@@ -7939,7 +7939,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="d-flex border border-tertiary p-3">
+<div class="d-flex border p-3">
   <div class="form-check form-switch">
     <input class="form-check-input" type="checkbox" role="switch">
   </div>
@@ -7956,7 +7956,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex border p-3 bg-body" data-bs-theme="dark">
   <div class="form-check form-switch">
     <input class="form-check-input" type="checkbox" role="switch">
   </div>
@@ -7973,7 +7973,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="d-flex border p-3 bg-body" data-bs-theme="light">
   <div class="form-check form-switch">
     <input class="form-check-input" type="checkbox" role="switch">
   </div>
@@ -7990,7 +7990,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="d-flex border border-tertiary p-3" style="background-color: #282d55;">
+<div class="d-flex border p-3" style="background-color: #282d55;">
   <div class="form-check form-switch" data-bs-theme="dark">
     <input class="form-check-input" type="checkbox" role="switch">
   </div>
@@ -8007,7 +8007,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="d-flex border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="d-flex border p-3" style="background-color: #b5e8f7">
   <div class="form-check form-switch" data-bs-theme="light">
     <input class="form-check-input" type="checkbox" role="switch">
   </div>
@@ -8026,7 +8026,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="d-flex gap-2 flex-column border border-tertiary p-3">
+<div class="d-flex gap-2 flex-column border p-3">
   <input type="text" class="form-control is-valid" value="Mark">
   <select class="form-select is-valid"><option selected disabled value="">Choose...</option><option>...</option></select>
   <input type="file" class="form-control is-valid">
@@ -8049,7 +8049,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-column border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-column border p-3 bg-body" data-bs-theme="dark">
   <input type="text" class="form-control is-valid" value="Mark">
   <select class="form-select is-valid"><option selected disabled value="">Choose...</option><option>...</option></select>
   <input type="file" class="form-control is-valid">
@@ -8072,7 +8072,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-column border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-column border p-3 bg-body" data-bs-theme="light">
   <input type="text" class="form-control is-valid" value="Mark">
   <select class="form-select is-valid"><option selected disabled value="">Choose...</option><option>...</option></select>
   <input type="file" class="form-control is-valid">
@@ -8095,7 +8095,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="d-flex gap-2 flex-column border border-tertiary p-3" style="background-color: #282d55;">
+<div class="d-flex gap-2 flex-column border p-3" style="background-color: #282d55;">
   <input type="text" class="form-control is-valid" value="Mark" data-bs-theme="dark">
   <select class="form-select is-valid" data-bs-theme="dark"><option selected disabled value="">Choose...</option><option>...</option></select>
   <input type="file" class="form-control is-valid" data-bs-theme="dark">
@@ -8118,7 +8118,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="d-flex gap-2 flex-column border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="d-flex gap-2 flex-column border p-3" style="background-color: #b5e8f7">
   <input type="text" class="form-control is-valid" value="Mark" data-bs-theme="light">
   <select class="form-select is-valid" data-bs-theme="light"><option selected disabled value="">Choose...</option><option>...</option></select>
   <input type="file" class="form-control is-valid" data-bs-theme="light">
@@ -8138,3 +8138,541 @@ sitemap_exclude: true
   <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
   <div class="quantity-selector w-100" data-bs-theme="light"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
 </div>
+
+## Utilities
+
+### Background
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3">
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-primary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-success"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-danger"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-warning"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-info"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-green"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-purple"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-yellow"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-blue"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-pink"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-success);" class="bg-supporting-orange"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body-tertiary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-black"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-white"></div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-primary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-success"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-danger"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-warning"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-info"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-green"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-purple"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-yellow"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-blue"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-pink"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-success);" class="bg-supporting-orange"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body-tertiary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-black"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-white"></div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-primary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-success"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-danger"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-warning"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-info"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-green"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-purple"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-yellow"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-blue"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-pink"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-success);" class="bg-supporting-orange"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body-tertiary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-black"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-white"></div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #282d55;">
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-primary" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-secondary" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-success" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-danger" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-warning" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-info" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-green" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-purple" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-yellow" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-blue" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-pink" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-success);" class="bg-supporting-orange" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-light" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-dark" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body-secondary" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body-tertiary" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-black" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-white" data-bs-theme="dark"></div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #b5e8f7">
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-primary" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-secondary" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-success" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-danger" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-warning" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-info" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-green" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-purple" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-yellow" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-blue" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-pink" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-success);" class="bg-supporting-orange" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-light" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-dark" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body-secondary" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body-tertiary" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-black" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-white" data-bs-theme="light"></div>
+</div>
+
+### Borders
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3">
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-primary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-success"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-danger"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-warning"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-info"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-black"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-white"></div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-primary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-success"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-danger"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-warning"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-info"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-black"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-white"></div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-primary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-success"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-danger"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-warning"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-info"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-black"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-white"></div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #282d55;">
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-primary" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-secondary" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-success" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-danger" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-warning" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-info" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-light" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-dark" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-black" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-white" data-bs-theme="dark"></div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #b5e8f7">
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-primary" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-secondary" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-success" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-danger" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-warning" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-info" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-light" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-dark" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-black" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-white" data-bs-theme="light"></div>
+</div>
+
+### Colors
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3">
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-primary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-success"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-danger"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-warning"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-info"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-black"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-white"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body-emphasis"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body-tertiary"></div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-primary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-success"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-danger"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-warning"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-info"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-black"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-white"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body-emphasis"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body-tertiary"></div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-primary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-success"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-danger"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-warning"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-info"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-black"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-white"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body-emphasis"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body-tertiary"></div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #282d55;">
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-primary" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-secondary" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-success" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-danger" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-warning" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-info" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-light" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-dark" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-black" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-white" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body-emphasis" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body-secondary" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body-tertiary" data-bs-theme="dark"></div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #b5e8f7">
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-primary" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-secondary" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-success" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-danger" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-warning" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-info" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-light" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-dark" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-black" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-white" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body-emphasis" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body-secondary" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-body-tertiary" data-bs-theme="light"></div>
+</div>
+
+### Link
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3">
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-primary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-success"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-danger"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-warning"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-info"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-body-emphasis"></div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-primary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-success"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-danger"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-warning"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-info"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-body-emphasis"></div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-primary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-success"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-danger"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-warning"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-info"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-body-emphasis"></div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #282d55;">
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-primary" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-secondary" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-success" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-danger" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-warning" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-info" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-light" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-dark" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-body-emphasis" data-bs-theme="dark"></div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #b5e8f7">
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-primary" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-secondary" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-success" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-danger" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-warning" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-info" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-light" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-dark" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-body-emphasis" data-bs-theme="light"></div>
+</div>
+
+## Helper
+
+### Color & Background (text-bg)
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3">
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-primary"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-secondary"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-success"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-danger"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-warning"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-info"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-light"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-dark"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-primary"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-secondary"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-success"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-danger"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-warning"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-info"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-light"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-dark"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-primary"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-secondary"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-success"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-danger"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-warning"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-info"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-light"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-dark"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #282d55;">
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-primary" data-bs-theme="dark"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-secondary" data-bs-theme="dark"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-success" data-bs-theme="dark"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-danger" data-bs-theme="dark"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-warning" data-bs-theme="dark"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-info" data-bs-theme="dark"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-light" data-bs-theme="dark"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-dark" data-bs-theme="dark"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #b5e8f7">
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-primary" data-bs-theme="light"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-secondary" data-bs-theme="light"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-success" data-bs-theme="light"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-danger" data-bs-theme="light"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-warning" data-bs-theme="light"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-info" data-bs-theme="light"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-light" data-bs-theme="light"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-dark" data-bs-theme="light"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
+</div>
+
+### Focus ring
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3">
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-primary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-success"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-danger"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-warning"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-info"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-dark"></div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-primary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-success"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-danger"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-warning"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-info"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-dark"></div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-primary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-secondary"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-success"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-danger"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-warning"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-info"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-dark"></div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #282d55;">
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-primary" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-secondary" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-success" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-danger" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-warning" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-info" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-light" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-dark" data-bs-theme="dark"></div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #b5e8f7">
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-primary" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-secondary" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-success" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-danger" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-warning" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-info" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-light" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-dark" data-bs-theme="light"></div>
+</div>
+
+### Icon link
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3">
+  <a class="link-chevron" href="#">This is a sample link with chevron</a>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+  <a class="link-chevron" href="#">This is a sample link with chevron</a>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+  <a class="link-chevron" href="#">This is a sample link with chevron</a>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #282d55;">
+  <a class="link-chevron" href="#" data-bs-theme="dark">This is a sample link with chevron</a>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #b5e8f7">
+  <a class="link-chevron" href="#" data-bs-theme="light">This is a sample link with chevron</a>
+</div>
diff --git a/site/content/docs/5.3/utilities/background.md b/site/content/docs/5.3/utilities/background.md
index d007b6efad..b244c8d317 100644
--- a/site/content/docs/5.3/utilities/background.md
+++ b/site/content/docs/5.3/utilities/background.md
@@ -20,21 +20,26 @@ Similar to the contextual text color classes, set the background of an element t
 Background utilities like `.bg-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.bg-*-subtle` utility will. This will be resolved in v6.
 {{< /callout >}}
 
+{{< callout info >}}
+In case you need to write over one of these background, prefer using our [color & background helper]({{< docsref "/helpers/color-background" >}}) when it exists.
+{{< /callout >}}
+
 <!-- Boosted mod: inconsistent background color & naming, showing only supporting color naming -->
 {{< example >}}
-<div class="p-3 mb-2 fw-bold bg-primary text-black">.bg-primary</div>
-<div class="p-3 mb-2 fw-bold bg-secondary text-white">.bg-secondary</div>
-<div class="p-3 mb-2 fw-bold bg-success text-white">.bg-success</div>
-<div class="p-3 mb-2 fw-bold bg-danger text-white">.bg-danger</div>
-<div class="p-3 mb-2 fw-bold bg-warning text-black">.bg-warning</div>
-<div class="p-3 mb-2 fw-bold bg-info text-white">.bg-info</div>
+<div class="p-3 mb-2 fw-bold bg-primary"><span class="text-bg-primary">.bg-primary</span></div>
+<div class="p-3 mb-2 fw-bold bg-secondary"><span class="text-bg-secondary">.bg-secondary</span></div>
+<div class="p-3 mb-2 fw-bold bg-success"><span class="text-bg-success">.bg-success</span></div>
+<div class="p-3 mb-2 fw-bold bg-danger"><span class="text-bg-danger">.bg-danger</span></div>
+<div class="p-3 mb-2 fw-bold bg-warning"><span class="text-bg-warning">.bg-warning</span></div>
+<div class="p-3 mb-2 fw-bold bg-info"><span class="text-bg-info">.bg-info</span></div>
 <div class="p-3 mb-2 fw-bold bg-supporting-green text-black">.bg-supporting-green</div>
 <div class="p-3 mb-2 fw-bold bg-supporting-purple text-black">.bg-supporting-purple</div>
 <div class="p-3 mb-2 fw-bold bg-supporting-yellow text-black">.bg-supporting-yellow</div>
 <div class="p-3 mb-2 fw-bold bg-supporting-blue text-black">.bg-supporting-blue</div>
 <div class="p-3 mb-2 fw-bold bg-supporting-pink text-black">.bg-supporting-pink</div>
-<div class="p-3 mb-2 fw-bold bg-light text-black">.bg-light</div>
-<div class="p-3 mb-2 fw-bold bg-dark text-white">.bg-dark</div>
+<div class="p-3 mb-2 fw-bold bg-supporting-orange text-black">.bg-supporting-orange</div>
+<div class="p-3 mb-2 fw-bold bg-light"><span class="text-bg-light">.bg-light</span></div>
+<div class="p-3 mb-2 fw-bold bg-dark"><span class="text-bg-dark">.bg-dark</span></div>
 <div class="p-3 mb-2 fw-bold bg-body-secondary">.bg-body-secondary</div>
 <div class="p-3 mb-2 fw-bold bg-body-tertiary">.bg-body-tertiary</div>
 <div class="p-3 mb-2 fw-bold bg-body">.bg-body</div>
diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index 56df4a8ad3..23c2d1a70e 100644
--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -64,24 +64,25 @@ The `.text-primary` color on dark background (`#ff7900`) can be used in any size
 
 Here are some compliant combinations examples for texts:
 
-{{< example >}}
-
-<p class="text-black">regular black text</p>
-<p class="text-primary fs-3">regular primary text with minimum font-size for contrast with .fs-3</p>
-<p class="text-body-secondary">regular secondary text</p>
-
-<p class="text-black fw-bold">bold black text</p>
-<p class="text-primary fs-4 fw-bold">bold primary text with minimum font-size for contrast with .fs-4</p>
-<p class="text-body-secondary fw-bold">bold secondary text</p>
+  {{< example >}}
+<div class="p-1" data-bs-theme="light">
+  <p>regular text</p>
+  <p class="text-primary fs-3">regular primary text with minimum font-size for contrast with .fs-3 (restrictive because of the light mode)</p>
+  <p class="text-body-secondary">regular secondary text</p>
+
+  <p class="fw-bold">bold text</p>
+  <p class="text-primary fs-4 fw-bold">bold primary text with minimum font-size for contrast with .fs-4 (restrictive because of the light mode)</p>
+  <p class="text-body-secondary fw-bold">bold secondary text</p>
+</div>
 
-<div class="bg-dark py-1">
-  <p class="text-white">regular white text on dark</p>
-  <p class="text-primary">regular primary text on dark</p>
-  <p class="text-light">regular light text on dark</p>
+<div class="bg-dark 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>
 
-  <p class="text-white fw-bold">bold white text on dark</p>
-  <p class="text-primary fw-bold">bold primary text on dark</p>
-  <p class="text-light fw-bold">bold light text on dark</p>
+  <p class="text-white fw-bold">bold white text</p>
+  <p class="text-primary fw-bold">bold primary text</p>
+  <p class="text-body-secondary fw-bold">bold secondary text</p>
 </div>
 {{< /example >}}
 
diff --git a/site/data/theme-colors.yml b/site/data/theme-colors.yml
index 63a99e0bf7..93136b654d 100644
--- a/site/data/theme-colors.yml
+++ b/site/data/theme-colors.yml
@@ -1,14 +1,11 @@
 - name: primary
   hex: "#ff7900"
-  contrast_color: dark
 - name: secondary
   hex: "#000"
-  contrast_color: white
 - name: success
   hex: "#32c832"
 - name: danger
   hex: "#cd3c14"
-  contrast_color: white
 - name: warning
   hex: "#fc0"
   contrast_color: dark

From 4cfde884ca9065dadc3344d92cb0116bf2d3c7bb Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Mon, 13 Nov 2023 15:29:55 +0100
Subject: [PATCH 31/71] Dark mode: Masonry example (#2369)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_variables.scss                              | 2 +-
 site/content/docs/5.3/examples/masonry/index.html | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6fda37077e..6502910325 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -832,7 +832,7 @@ $initialism-font-size:        $small-font-size !default;
 
 $blockquote-margin-y:         $spacer !default;
 $blockquote-font-size:        $font-size-xlg !default;
-$blockquote-footer-color:     $gray-700 !default;
+$blockquote-footer-color:     var(--#{$prefix}placeholder-color) !default; // Boosted mod: instead of `$gray-600`
 $blockquote-footer-font-size: $small-font-size !default;
 $blockquote-line-height:      1.5 !default; // Boosted mod
 $blockquote-letter-spacing:   $letter-spacing-base * .25 !default; // Boosted mod
diff --git a/site/content/docs/5.3/examples/masonry/index.html b/site/content/docs/5.3/examples/masonry/index.html
index 8d4e5d393c..72ab25c2c7 100644
--- a/site/content/docs/5.3/examples/masonry/index.html
+++ b/site/content/docs/5.3/examples/masonry/index.html
@@ -40,7 +40,7 @@ <h5 class="card-title">Card title that wraps to a new line</h5>
           <blockquote class="blockquote">
             <p>A well-known quote, contained in a blockquote element.</p>
           </blockquote>
-          <figcaption class="blockquote-footer mb-0 text-body-secondary">
+          <figcaption class="blockquote-footer mb-0">
             Someone famous in <cite title="Source Title">Source Title</cite>
           </figcaption>
         </figure>
@@ -57,12 +57,12 @@ <h5 class="card-title">Card title</h5>
       </div>
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">
-      <div class="card bg-dark border-secondary text-center p-3">
+      <div class="card bg-black border-dark text-center p-3" data-bs-theme="dark">
         <figure class="mb-0">
           <blockquote class="blockquote">
             <p>A well-known quote, contained in a blockquote element.</p>
           </blockquote>
-          <figcaption class="blockquote-footer mb-0 bg-dark">
+          <figcaption class="blockquote-footer mb-0">
             Someone famous in <cite title="Source Title">Source Title</cite>
           </figcaption>
         </figure>
@@ -88,7 +88,7 @@ <h5 class="card-title">Card title</h5>
           <blockquote class="blockquote">
             <p>A well-known quote, contained in a blockquote element.</p>
           </blockquote>
-          <figcaption class="blockquote-footer mb-0 text-body-secondary">
+          <figcaption class="blockquote-footer mb-0">
             Someone famous in <cite title="Source Title">Source Title</cite>
           </figcaption>
         </figure>

From db178f53cdcf856debb138565107c2315fb4cd32 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Mon, 13 Nov 2023 15:46:17 +0100
Subject: [PATCH 32/71] Dark mode: Grid example (#2368)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 site/content/docs/5.3/examples/grid/grid.css   | 11 +++++++----
 site/content/docs/5.3/examples/grid/index.html |  7 ++++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/site/content/docs/5.3/examples/grid/grid.css b/site/content/docs/5.3/examples/grid/grid.css
index 4550500a22..93793be2ef 100644
--- a/site/content/docs/5.3/examples/grid/grid.css
+++ b/site/content/docs/5.3/examples/grid/grid.css
@@ -1,14 +1,17 @@
 .themed-grid-col {
   padding-top: .75rem;
   padding-bottom: .75rem;
-  background-color: #eee; /* Boosted mod */
-  outline: 1px solid #ddd; /* Boosted mod */
+  background-color: var(--bs-secondary-bg); /* Boosted mod: instead of `rgba(112.520718, 44.062154, 249.437846, .15)` */
+  /* Boosted mod: no `border` */
+  outline: 1px solid var(--bs-border-color-translucent); /* Boosted mod */
 }
 
 .themed-container {
+  /* Boosted mod: no `padding` */
   padding-top: .75rem; /* Boosted mod */
   padding-bottom: .75rem; /* Boosted mod */
   margin-bottom: 1.5rem;
-  background-color: #b5e8f7;
-  outline: 1px solid #4bb4e6; /* Boosted mod */
+  background-color: var(--bs-secondary-bg); /* Boosted mod: instead of `rgba(112.520718, 44.062154, 249.437846, .15)` */
+  /* Boosted mod: no `border` */
+  outline: 1px solid var(--bs-border-color-translucent); /* Boosted mod */
 }
diff --git a/site/content/docs/5.3/examples/grid/index.html b/site/content/docs/5.3/examples/grid/index.html
index 8270af8674..49748fc4c3 100644
--- a/site/content/docs/5.3/examples/grid/index.html
+++ b/site/content/docs/5.3/examples/grid/index.html
@@ -86,9 +86,10 @@ <h2 class="mt-4">Two columns</h2>
     </div>
 
     <h2 class="mt-4">Full width, single column</h2>
-    <p class="text-warning">
-      No grid classes are necessary for full-width elements.
-    </p>
+    <div class="alert alert-warning">
+      <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
+      <p>No grid classes are necessary for full-width elements.</p>
+    </div>
 
     <hr class="my-4">
 

From c78e99e6adb786fca1c3e9ab7ef81865fa63402d Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Wed, 15 Nov 2023 08:10:39 +0100
Subject: [PATCH 33/71] Dark mode: change colors of doc callouts to be more
 emphasized (#2375)

---
 site/assets/scss/_callouts.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
index bd7b4bc297..ad84ba7e91 100644
--- a/site/assets/scss/_callouts.scss
+++ b/site/assets/scss/_callouts.scss
@@ -32,7 +32,7 @@
 @each $variant in $bd-callout-variants {
   .bd-callout-#{$variant} {
     --bd-callout-color: var(--bs-emphasis-color); // Boosted mod: instead of `var(--bs-#{$variant}-text-emphasis)`
-    --bd-callout-bg: var(--bs-tertiary-bg);
+    --bd-callout-bg: var(--bs-secondary-bg); // Boosted mod: instead of `var(--bs-#{$variant}-bg-subtle)`
     --bd-callout-border: var(--bs-#{$variant}-border-subtle);
   }
 }

From 0f5f47abac959e55de3d615e3cde6353b4e4a81a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Wed, 15 Nov 2023 08:18:39 +0100
Subject: [PATCH 34/71] Drop extra space in utilities colors doc

---
 site/content/docs/5.3/utilities/colors.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index 23c2d1a70e..c8ac3330c5 100644
--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -30,7 +30,7 @@ Color utilities like `.text-*` that generated from our original `$theme-colors`
 {{< colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <p class="text-{{ .name }}{{ with .contrast_color }} bg-{{ . }}{{ end }}">.text-{{ .name }}</p>
-<p class="text-{{ .name }}-emphasis {{ with .contrast_color }} bg-{{ . }}{{ end }}">.text-{{ .name }}-emphasis</p>
+<p class="text-{{ .name }}-emphasis{{ with .contrast_color }} bg-{{ . }}{{ end }}">.text-{{ .name }}-emphasis</p>
 {{- end -}}
 {{< /colors.inline >}}
 

From e6cf3f159f92f326a4a91739bf629eb18f3cd92b Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Wed, 15 Nov 2023 12:40:45 +0100
Subject: [PATCH 35/71] Tweak a bit the color mode switcher (#2381)

---
 site/layouts/_default/examples.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html
index 044ab22b64..0748462ec0 100644
--- a/site/layouts/_default/examples.html
+++ b/site/layouts/_default/examples.html
@@ -114,8 +114,8 @@
       </symbol>
     </svg>
 
-    <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
-      <button class="btn py-2 dropdown-toggle d-flex align-items-center"
+    <div class="dropup position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
+      <button class="btn btn-dropdown py-2 dropdown-toggle d-flex align-items-center"
               id="bd-theme"
               type="button"
               aria-expanded="false"
@@ -127,21 +127,21 @@
       <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
         <li>
           <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
-            <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#ui-light-mode"></use></svg>
+            <svg class="bi me-2" width="1em" height="1em"><use href="#ui-light-mode"></use></svg>
             Light
             <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
           </button>
         </li>
         <li>
           <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
-            <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#ui-dark-mode"></use></svg>
+            <svg class="bi me-2" width="1em" height="1em"><use href="#ui-dark-mode"></use></svg>
             Dark
             <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
           </button>
         </li>
         <li>
           <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
-            <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#circle-half"></use></svg>
+            <svg class="bi me-2" width="1em" height="1em"><use href="#circle-half"></use></svg>
             Auto
             <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
           </button>

From 884fb6f2a7a8c3e2b8a7693049e44bba51748922 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Wed, 15 Nov 2023 13:23:15 +0100
Subject: [PATCH 36/71] Dark mode: Remove useless CSS since dropdown have been
 changed (#2377)

---
 site/assets/scss/_navbar.scss            | 23 ++++-------------------
 site/layouts/_default/single.html        |  2 +-
 site/layouts/partials/home/masthead.html |  2 +-
 3 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 4feb557f00..afd371c923 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -13,20 +13,10 @@
 
   // Boosted mod: no .navbar-brand
 
-  // Boosted mod: Needed since the dropdowns define their own color (could be removed once they are tackled)
-  .nav-link {
-    &:hover {
-      color: var(--bs-link-hover-color);
-    }
-
-    &.active {
-      color: var(--bs-link-hover-color);
-    }
-
-    .bi {
-      width: var(--bd-navbar-dropdown-item-icon-size);
-      height: var(--bd-navbar-dropdown-item-icon-size);
-    }
+  // Boosted mod: Needed since our icons are larger in the navbar
+  .bi {
+    width: var(--bd-navbar-dropdown-item-icon-size);
+    height: var(--bd-navbar-dropdown-item-icon-size);
   }
   // End mod
 
@@ -47,11 +37,6 @@
       height: 2.5rem;
     }
 
-    .bi {
-      width: var(--bd-navbar-dropdown-item-icon-size);
-      height: var(--bd-navbar-dropdown-item-icon-size);
-    }
-
     .active .bi {
       display: block !important; // stylelint-disable-line declaration-no-important
     }
diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
index 14569e6baa..0263eedfb2 100644
--- a/site/layouts/_default/single.html
+++ b/site/layouts/_default/single.html
@@ -3,7 +3,7 @@
 
   <!-- Boosted mod: Orange rendering that handles "Guidelines" page as well -->
   <main class="bd-content order-1" id="content">
-    <div class="bg-body title-bar mb-2 mb-md-0">
+    <div class="title-bar mb-2 mb-md-0">
       <div class="container-xxl">
         <h1 class="display-1">{{ .Title | markdownify }}</h1>
       </div>
diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
index 490428641a..9e40f3fe0d 100644
--- 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">
+      <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">
         <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>

From ef3c3201f1de305bf0891bfa12bd4d0c68a90dc5 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Wed, 15 Nov 2023 14:25:49 +0100
Subject: [PATCH 37/71] Dark mode: Handle dark mode code highlights (#2378)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 site/assets/scss/_component-examples.scss | 16 ++++++++--------
 site/assets/scss/_variables.scss          |  2 +-
 site/layouts/shortcodes/example.html      |  2 +-
 site/layouts/shortcodes/js-docs.html      |  4 ++--
 site/layouts/shortcodes/scss-docs.html    |  4 ++--
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index ab11f22e56..f5e1f8fda6 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -4,7 +4,7 @@
 
 .bd-code-snippet {
   margin: 0 ($bd-gutter-x * -.5) 1rem;
-  border: solid $gray-400; // Boosted mod: instead of `var(--bs-border-color)`
+  border: solid var(--bs-border-color-translucent); // Boosted mod: instead of `var(--bs-border-color)`
   border-width: 1px 0;
 
   @include media-breakpoint-up(md) {
@@ -21,7 +21,7 @@
   position: relative;
   padding: var(--bd-example-padding);
   margin: 0 ($bd-gutter-x * -.5) 1rem;
-  border: solid $gray-400; // Boosted mod: instead of `var(--bs-border-color)`
+  border: solid var(--bs-border-color-translucent); // Boosted mod: instead of `var(--bs-border-color)`
   border-width: 1px 0;
   @include clearfix();
 
@@ -176,9 +176,9 @@
     display: inline-block;
     width: 9rem; // Boosted mod
     font-weight: $font-weight-bold; // Boosted mod
-    color: $gray-800; // Boosted mod: instead of `var(--bs-secondary-color)`
-    background-color: $gray-400; // Boosted mod: instead of `var(--bs-tertiary-bg)`
-    border: var(--bs-border-width) solid $gray-500; // Boosted mod
+    color: var(--bs-secondary-color);
+    background-color: var(--bs-secondary-bg); // Boosted mod: instead of `var(--bs-tertiary-bg)`
+    border: var(--bs-border-width) solid var(--bs-border-color-translucent); // Boosted mod: instead of `var(--bs-border-width) solid var(--bs-border-color)`
 
     > div {
       display: flex;
@@ -314,7 +314,7 @@
   min-height: 16.625rem; // Boosted mod: instead of `15rem`
 
   > div {
-    color: var(--bs-body-bg);
+    color: var(--bs-highlight-color); // Boosted mod: instead of `var(--bs-body-bg)`
     background-color: var(--bd-primary-light);
     border: 1px solid var(--bd-primary);
 
@@ -438,7 +438,7 @@
 }
 // scss-docs-end sticker-fs-xl
 
-.border-gray-400 {
-  --bs-border-color: #{$gray-400};
+.border-tertiary {
+  --bs-border-color: var(--bs-border-color-translucent);
 }
 // End mod
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index 2e92776f41..e862920d2d 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -39,7 +39,7 @@ $bd-callout-variants: info, warning, danger !default;
   // Boosted mod: no --bd-sidebar-link-bg
   // Boosted mod: no --bd-callout-link
   // Boosted mod: no --bd-callout-code-color
-  --bd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
+  --bd-pre-bg: var(--bs-tertiary-bg); // Boosted mod: instead of `#{adjust-color($gray-900, $lightness: -2.5%)}`
 }
 
 // Boosted mod
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index 0bd31b48ad..1e6840a02b 100644
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@ -28,7 +28,7 @@
 
   {{- if eq $show_markup true -}}
     {{- if eq $show_preview true -}}
-      <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom border-gray-400 border-1">
+      <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom border-tertiary border-1">
         <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
         <div class="d-flex ms-auto">
           <button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
diff --git a/site/layouts/shortcodes/js-docs.html b/site/layouts/shortcodes/js-docs.html
index 3d13e2767c..d056313a48 100644
--- a/site/layouts/shortcodes/js-docs.html
+++ b/site/layouts/shortcodes/js-docs.html
@@ -33,8 +33,8 @@
   {{- end -}}
 
   <div class="bd-example-snippet bd-code-snippet bd-file-ref">
-    <!-- Boosted mod: added `.border-1` and `.border-gray-400` -->
-    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom border-1 border-gray-400">
+    <!-- Boosted mod: added `.border-1` and `.border-tertiary` -->
+    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom border-1 border-tertiary">
       <a class="font-monospace link-body-emphasis link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
         {{- $file -}}
       </a>
diff --git a/site/layouts/shortcodes/scss-docs.html b/site/layouts/shortcodes/scss-docs.html
index 28b6b99e3e..f60a38b19b 100644
--- a/site/layouts/shortcodes/scss-docs.html
+++ b/site/layouts/shortcodes/scss-docs.html
@@ -46,8 +46,8 @@
   {{- end -}}
 
   <div class="bd-example-snippet bd-code-snippet bd-file-ref">
-    <!-- Boosted mod: added `.border-1` and `.border-gray-400` -->
-    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom border-1 border-gray-400">
+    <!-- Boosted mod: added `.border-1` and `.border-tertiary` -->
+    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom border-1 border-tertiary">
       <a class="font-monospace link-body-emphasis link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
         {{- $file -}}
       </a>

From d98388bef7a6aab4499d52d912b43b1a22a26903 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Thu, 16 Nov 2023 08:30:37 +0100
Subject: [PATCH 38/71] Dark mode: Download app example (#2367)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 .../5.3/examples/download-app/download-app.css     |  1 +
 .../docs/5.3/examples/download-app/index.html      | 14 +++++++-------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/site/content/docs/5.3/examples/download-app/download-app.css b/site/content/docs/5.3/examples/download-app/download-app.css
index be54bc6de0..67d7562328 100644
--- a/site/content/docs/5.3/examples/download-app/download-app.css
+++ b/site/content/docs/5.3/examples/download-app/download-app.css
@@ -4,6 +4,7 @@
 
 .custom-vr {
   height: 75px;
+  background-color: var(--bs-border-color-translucent);
 }
 
 @media (max-width: 479.98px) {
diff --git a/site/content/docs/5.3/examples/download-app/index.html b/site/content/docs/5.3/examples/download-app/index.html
index 50a2bfe6ae..d0abe03f05 100644
--- a/site/content/docs/5.3/examples/download-app/index.html
+++ b/site/content/docs/5.3/examples/download-app/index.html
@@ -50,7 +50,7 @@ <h1 class="two-lined">
 </header>
 
 <main>
-  <div class="text-bg-dark mb-0 mb-md-2 border-dark border-bottom border-1 position-relative">
+  <div class="text-body bg-dark 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>
@@ -170,7 +170,7 @@ <h2 class="h1 text-primary text-center mb-2 mb-md-4">A showcase mobile applicati
     </div>
   </div>
 
-  <div class="py-4 py-md-5 text-dark bg-supporting-blue border-top border-1 border-translucent">
+  <div class="py-4 py-md-5 bg-supporting-blue border-top border-1 border-translucent" data-bs-theme="light">
     <div class="container-xxl d-flex justify-content-center pt-md-2 pb-2">
       <div class="col-12 col-md-6 col-lg-8 col-xl-6">
         <h2 class="h1 mb-4 mb-md-5 text-center">Do you want to start building your app? Get access to the SDK now</h2>
@@ -192,7 +192,7 @@ <h2 class="h1 mb-4 mb-md-5 text-center">Do you want to start building your app?
     </div>
   </div>
 
-  <div class="text-bg-dark py-4 py-md-5 border-bottom border-1 border-dark">
+  <div class="text-body bg-dark 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">
@@ -286,7 +286,7 @@ <h2 class="h1 mb-0 mb-md-5 text-primary text-center" id="download-notice">How to
                 <span class="d-inline-block fw-bold mb-3">Register with your Google store account to our <a href="https://groups.google.com/g/odsapp" target="_blank" rel="noopener">Beta program list</a></span>
                 <a href="https://groups.google.com/g/odsapp" target="_blank" rel="noopener" class="btn btn-outline-secondary mb-md-3">Register</a>
               </li>
-              <li class="vr mx-auto my-4 bg-light custom-vr"></li>
+              <li class="vr mx-auto my-4 custom-vr"></li>
               <li>
                 <span class="tag mt-md-3 mb-3 border-primary">2</span>
                 <span class="d-inline-block fw-bold mb-3">Download the app on your device from the Google Play store</span>
@@ -303,9 +303,9 @@ <h2 class="h1 mb-0 mb-md-5 text-primary text-center" id="download-notice">How to
     <div class="container-xxl pt-md-2 pb-2">
       <h2 class="col-12 col-md-6 h1 mx-auto mb-4 mb-md-5 text-center">Access this website on your mobile device with the QR code below</h2>
       <div class="d-flex justify-content-center pt-2 pt-md-0">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250" width="200" height="200" class="bg-dark" aria-labelledby="qr-title">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250" width="200" height="200" class="text-bg-secondary" aria-labelledby="qr-title">
           <title id="qr-title">Flash this QR code to access this page with your mobile</title>
-          <path fill="#ffffff" d="M15 15h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm23 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm23 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8ZM15 23h8v7h-8v-7Zm46 0h7v7h-7v-7Zm22 0h8v7h-8v-7Zm23 0h8v7h-8v-7Zm23 0h7v7h-7v-7Zm23 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm45 0h8v7h-8v-7ZM15 30h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm38 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm31 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8ZM15 38h8v7h-8v-7Zm15 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm16 0h7v7h-7v-7Zm22 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm16 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm23 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm23 0h7v7h-7v-7Zm15 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm15 0h8v7h-8v-7ZM15 45h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm23 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm23 0h7v8h-7v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8ZM15 53h8v8h-8v-8Zm46 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm23 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm30 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm45 0h8v8h-8v-8ZM15 61h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm15 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm16 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7ZM76 68h7v8h-7v-8Zm38 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8ZM30 76h8v7h-8v-7Zm8 0h7v7h-7v-7Zm23 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm45 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm15 0h8v7h-8v-7ZM38 83h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm30 0h8v8h-8v-8Zm30 0h8v8h-8v-8Zm46 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm22 0h8v8h-8v-8ZM15 91h8v7h-8v-7Zm15 0h8v7h-8v-7Zm31 0h7v7h-7v-7Zm113 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm23 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7ZM15 98h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm30 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm76 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm31 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm-166 8h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm91 0h8v8h-8v-8Zm38 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm-197 8h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm23 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm76 0h8v7h-8v-7Zm23 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm16 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm-212 7h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm76 0h8v8h-8v-8Zm23 0h7v8h-7v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm-212 8h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm53 0h8v7h-8v-7Zm76 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm31 0h7v7h-7v-7Zm22 0h8v7h-8v-7Zm-212 7h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm84 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm-182 8h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm23 0h7v8h-7v-8Zm83 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm23 0h8v8h-8v-8Zm-197 8h8v7h-8v-7Zm15 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm23 0h7v7h-7v-7Zm98 0h8v7h-8v-7Zm23 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm16 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm-182 7h8v8h-8v-8Zm23 0h8v8h-8v-8Zm23 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm-189 8h7v7h-7v-7Zm7 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm30 0h7v7h-7v-7Zm15 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm22 0h8v7h-8v-7Zm31 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm-151 7h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm30 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm-212 8h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm15 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm-205 7h8v8h-8v-8Zm46 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm30 0h8v8h-8v-8Zm-182 8h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm30 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm-212 8h8v7h-8v-7Zm15 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm16 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm23 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm16 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm23 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm-205 7h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm23 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm38 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm-212 8h8v7h-8v-7Zm46 0h7v7h-7v-7Zm37 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm30 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm22 0h8v7h-8v-7Zm23 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm-205 7h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm23 0h7v8h-7v-8Zm23 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm15 0h7v8h-7v-8Z"/>
+          <path fill="currentColor" d="M15 15h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm23 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm23 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8ZM15 23h8v7h-8v-7Zm46 0h7v7h-7v-7Zm22 0h8v7h-8v-7Zm23 0h8v7h-8v-7Zm23 0h7v7h-7v-7Zm23 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm45 0h8v7h-8v-7ZM15 30h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm38 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm31 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8ZM15 38h8v7h-8v-7Zm15 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm16 0h7v7h-7v-7Zm22 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm16 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm23 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm23 0h7v7h-7v-7Zm15 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm15 0h8v7h-8v-7ZM15 45h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm23 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm23 0h7v8h-7v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8ZM15 53h8v8h-8v-8Zm46 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm23 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm30 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm45 0h8v8h-8v-8ZM15 61h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm15 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm16 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7ZM76 68h7v8h-7v-8Zm38 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8ZM30 76h8v7h-8v-7Zm8 0h7v7h-7v-7Zm23 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm45 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm15 0h8v7h-8v-7ZM38 83h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm30 0h8v8h-8v-8Zm30 0h8v8h-8v-8Zm46 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm22 0h8v8h-8v-8ZM15 91h8v7h-8v-7Zm15 0h8v7h-8v-7Zm31 0h7v7h-7v-7Zm113 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm23 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7ZM15 98h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm30 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm76 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm31 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm-166 8h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm91 0h8v8h-8v-8Zm38 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm-197 8h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm23 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm76 0h8v7h-8v-7Zm23 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm16 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm-212 7h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm76 0h8v8h-8v-8Zm23 0h7v8h-7v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm-212 8h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm53 0h8v7h-8v-7Zm76 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm31 0h7v7h-7v-7Zm22 0h8v7h-8v-7Zm-212 7h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm84 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm-182 8h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm23 0h7v8h-7v-8Zm83 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm23 0h8v8h-8v-8Zm-197 8h8v7h-8v-7Zm15 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm23 0h7v7h-7v-7Zm98 0h8v7h-8v-7Zm23 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm16 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm-182 7h8v8h-8v-8Zm23 0h8v8h-8v-8Zm23 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm-189 8h7v7h-7v-7Zm7 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm30 0h7v7h-7v-7Zm15 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm22 0h8v7h-8v-7Zm31 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm-151 7h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm30 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm-212 8h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm15 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm-205 7h8v8h-8v-8Zm46 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm30 0h8v8h-8v-8Zm-182 8h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm30 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm15 0h8v8h-8v-8Zm-212 8h8v7h-8v-7Zm15 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm16 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm23 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm16 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm15 0h8v7h-8v-7Zm23 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm7 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm-205 7h8v8h-8v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm23 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm38 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm-212 8h8v7h-8v-7Zm46 0h7v7h-7v-7Zm37 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm30 0h8v7h-8v-7Zm8 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm22 0h8v7h-8v-7Zm23 0h8v7h-8v-7Zm8 0h7v7h-7v-7Zm15 0h7v7h-7v-7Zm-205 7h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm8 0h7v8h-7v-8Zm7 0h8v8h-8v-8Zm8 0h8v8h-8v-8Zm23 0h7v8h-7v-8Zm23 0h7v8h-7v-8Zm15 0h7v8h-7v-8Zm22 0h8v8h-8v-8Zm16 0h7v8h-7v-8Zm15 0h7v8h-7v-8Z"/>
           <svg x="101" y="101" width="49" height="49" viewBox="0 0 1000 1000">
             <rect rx="130" ry="130" width="1000" height="1000" fill="#ff7900"/>
             <path fill="#fff" d="m843.715 331.562-159.1 159.1-17.678-17.678 159.1-159.1a25.073 25.073 0 0 0 0-35.355L719.971 172.463a25.073 25.073 0 0 0-35.355 0l-17.678 17.678 44.194 44.194a12.5 12.5 0 0 1-17.678 17.678l-44.194-44.195-35.355 35.356 26.516 26.516a12.5 12.5 0 0 1-17.677 17.678l-26.517-26.517-35.355 35.356 44.194 44.193a12.5 12.5 0 1 1-17.678 17.678l-44.194-44.195-17.677 17.678-17.678-17.678 159.1-159.1a50.148 50.148 0 0 1 70.711 0l106.065 106.068a50.148 50.148 0 0 1 0 70.711Zm-30.633 322.01a58.843 58.843 0 0 1 13.786 21.609c.008.02.013.042.021.063a56.343 56.343 0 0 1 2.401 9.564c.079.491.155.982.221 1.475a56.109 56.109 0 0 1-15.976 47.253l-44.21 44.179-34.84 34.814A56.12 56.12 0 0 1 694.7 829h-.064q-2.571 0-5.135-.241c-.172-.016-.344-.035-.515-.052q-2.3-.234-4.581-.657a50.364 50.364 0 0 1-.926-.18c-10.465-2.117-21.09-6.433-29.2-14.542l-246.5-246.7-182.557-182.061-36.335-121.63-17.561-57.828-3.482-13.9c0-.012-.006-.024-.01-.036q-.2-.669-.353-1.335c-.036-.162-.06-.323-.093-.485-.058-.293-.119-.586-.164-.877-.028-.189-.044-.375-.067-.563-.032-.263-.067-.526-.088-.787-.015-.2-.019-.392-.028-.588-.011-.25-.026-.5-.027-.748 0-.038-.005-.078-.005-.116 0-.281.013-.558.026-.836 0-.081 0-.163.007-.244.024-.4.062-.8.111-1.2.013-.1.032-.2.046-.3.042-.292.087-.582.143-.869.027-.14.059-.278.089-.417a15.596 15.596 0 0 1 .295-1.176c.067-.231.137-.46.212-.688.049-.146.1-.292.15-.436.081-.228.169-.454.259-.678.055-.137.109-.274.167-.409.1-.239.214-.474.327-.708.054-.114.106-.229.162-.341q.249-.492.525-.967l.025-.046c.194-.331.4-.654.613-.972.069-.1.143-.2.214-.3.149-.213.3-.424.456-.631.09-.117.182-.231.274-.346q.222-.278.453-.548c.1-.117.2-.231.307-.345q.234-.26.478-.51c.106-.109.213-.219.322-.326.172-.168.349-.331.527-.493.106-.1.21-.194.318-.288.206-.179.417-.35.63-.52.087-.068.171-.141.258-.208q.454-.35.929-.671c.061-.042.126-.08.189-.121.257-.17.518-.336.784-.493.116-.069.236-.133.354-.2.217-.123.436-.243.659-.357.134-.069.27-.134.405-.2l.648-.3q.211-.093.427-.18c.221-.09.444-.174.67-.256l.427-.151c.241-.081.484-.153.728-.224.132-.038.261-.079.394-.114.3-.081.613-.151.923-.217.075-.015.148-.035.223-.05q.579-.114 1.171-.191c.1-.014.211-.021.315-.033.291-.033.583-.062.877-.081.145-.009.292-.013.438-.018.258-.011.516-.018.777-.018a19.616 19.616 0 0 1 1.724.085c.261.025.522.058.784.093.156.022.312.042.469.068.286.046.573.1.86.164.133.028.265.051.4.082.42.1.842.208 1.264.336L232.8 179.7l30.221 9.164 121.462 36.412ZM249.008 201.918l-46.532 46.5 36.59 122.164 21.524-21.716 433.579 433.271 17.682-17.67L278.272 331.2l53.048-53.011L764.9 711.457l17.683-17.67L349 260.514l22.256-22.032Zm82.054 324.1-17.678 17.677 44.195 44.194a12.5 12.5 0 1 1-17.679 17.677l-44.194-44.194-35.356 35.355 26.517 26.517a12.5 12.5 0 0 1-17.678 17.677l-26.516-26.516-35.355 35.355 44.195 44.194a12.5 12.5 0 0 1-17.678 17.678l-44.194-44.194-17.678 17.678a25.073 25.073 0 0 0 0 35.355l106.066 106.066a25.073 25.073 0 0 0 35.355 0l159.1-159.1 17.677 17.678-159.1 159.1a50.148 50.148 0 0 1-70.711 0L154.285 738.149a50.148 50.148 0 0 1 0-70.711l159.1-159.1Z"/>
@@ -315,7 +315,7 @@ <h2 class="col-12 col-md-6 h1 mx-auto mb-4 mb-md-5 text-center">Access this webs
     </div>
   </div>
 
-  <div class="py-4 py-md-5 text-dark bg-supporting-yellow">
+  <div class="py-4 py-md-5 text-body bg-supporting-yellow" data-bs-theme="light">
     <div class="container-xxl d-flex justify-content-center pt-md-2 pb-2">
       <div class="col-12 col-md-6">
         <h2 class="h1 mb-2 mb-md-3 text-center">Your feedback is valued</h2>

From 9936e4d31d6ffcf477fb92d12e5b2e5392a66341 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Thu, 16 Nov 2023 08:46:33 +0100
Subject: [PATCH 39/71] Dark mode: handle orange in the doc (#2371)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 site/assets/scss/_component-examples.scss   |  4 ++--
 site/assets/scss/_toc.scss                  |  2 +-
 site/assets/scss/_variables.scss            | 10 +++++-----
 site/content/docs/5.3/utilities/spacing.md  |  2 +-
 site/layouts/partials/home/get-started.html |  2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index f5e1f8fda6..d1a4b76a75 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -314,9 +314,9 @@
   min-height: 16.625rem; // Boosted mod: instead of `15rem`
 
   > div {
-    color: var(--bs-highlight-color); // Boosted mod: instead of `var(--bs-body-bg)`
+    // Boosted mod: no `color`
     background-color: var(--bd-primary-light);
-    border: 1px solid var(--bd-primary);
+    border: 1px solid var(--bs-primary);
 
     > span {
       position: absolute;
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index f26e2a4c4a..f5ed814618 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -34,7 +34,7 @@
       &:hover,
       &.active {
         color: var(--bd-toc-color);
-        border-left-color: var(--bd-toc-active-border-left-color); // Boosted mod: instead of `--bd-toc-color`
+        border-left-color: var(--bs-primary); // Boosted mod: instead of `--bd-toc-color`
       }
 
       &.active {
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index e862920d2d..6028b2e8c6 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -1,7 +1,8 @@
 // Local docs variables
-$bd-primary:       $primary; // Boosted mod
 // stylelint-disable-next-line function-disallowed-list
-$bd-primary-light: lighten(saturate($bd-primary, 5%), 15%); // Boosted mod
+$bd-primary-light: lighten(saturate($primary, 5%), 15%); // Boosted mod
+// stylelint-disable-next-line function-disallowed-list
+$bd-primary-dark:  darken(saturate($brand-orange, 5%), 15%); // Boosted mod
 $bd-purple:        #4c0bce;
 $bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
 // Boosted mod: np $bd-purple-light
@@ -12,12 +13,10 @@ $bd-callout-variants: info, warning, danger !default;
 
 :root,
 [data-bs-theme="light"] {
-  --bd-primary: #{$bd-primary}; // Boosted mod
   --bd-primary-light: #{$bd-primary-light}; // Boosted mod
   // Boosted mod: no --bd-purple
   --bd-violet: #{$bd-violet};
   // Boosted mod: no --bd-accent
-  --bd-primary-rgb: #{to-rgb($bd-primary)}; // Boosted mod
   --bd-primary-light-rgb: #{to-rgb($bd-primary-light)}; // Boosted mod
   // Boosted mod: no --bd-violet-rgb
   // Boosted mod: no --bd-accent-rgb
@@ -29,10 +28,11 @@ $bd-callout-variants: info, warning, danger !default;
   // Boosted mod: no --bd-callout-link
   // Boosted mod: no --bd-callout-code-color
   --bd-pre-bg: var(--bs-tertiary-bg);
-  --bd-toc-active-border-left-color: var(--bd-primary); // Boosted mod
 }
 
 @include color-mode(dark, true) {
+  --bd-primary-light: #{$bd-primary-dark}; // Boosted mod
+  --bd-primary-light-rgb: #{to-rgb($bd-primary-dark)}; // Boosted mod
   --bd-violet: #{mix($bd-violet, $white, 75%)};
   --bd-violet-bg: #{$bd-violet};
   // Boosted mod: no --bd-toc-color
diff --git a/site/content/docs/5.3/utilities/spacing.md b/site/content/docs/5.3/utilities/spacing.md
index ac1faa15d3..1478e72a15 100644
--- a/site/content/docs/5.3/utilities/spacing.md
+++ b/site/content/docs/5.3/utilities/spacing.md
@@ -77,7 +77,7 @@ Here are some representative examples of these classes:
 Additionally, Boosted also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`.
 
 <div class="bd-example">
-  <div class="mx-auto p-2" style="width: 200px; background-color: rgba(var(--bd-primary-light-rgb),.15); border: rgba(var(--bd-primary-rgb),.3) solid 1px;">
+  <div class="mx-auto p-2" style="width: 200px; background-color: rgba(var(--bd-primary-light-rgb),.15); border: rgba(var(--bs-primary-rgb),.3) solid 1px;">
     Centered element
   </div>
 </div>
diff --git a/site/layouts/partials/home/get-started.html b/site/layouts/partials/home/get-started.html
index b73f031780..24ef8fc805 100644
--- a/site/layouts/partials/home/get-started.html
+++ b/site/layouts/partials/home/get-started.html
@@ -1,5 +1,5 @@
 <div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
-  <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-primary-rgb);">
+  <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-primary-rgb);">
     <svg class="bi fs-1"><use xlink:href="#code"></use></svg>
   </div>
   <h2 class="mb-3 lh-sm fw-semibold">Get started any way you&nbsp;want</h2>

From 1b382482edec9753ec14cd0a32b65f7e94929a08 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Thu, 16 Nov 2023 14:10:47 +0100
Subject: [PATCH 40/71] Dark mode: Change functionnal colors in dark mode
 (#2370)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_badge.scss                              |  8 --------
 scss/_buttons.scss                            |  8 ++++----
 scss/_variables-dark.scss                     |  6 +++---
 scss/helpers/_color-bg.scss                   |  8 +++++++-
 site/content/docs/5.3/components/badge.md     |  4 ++--
 .../content/docs/5.3/components/list-group.md | 12 +++++------
 .../docs/5.3/components/orange-navbar.md      |  2 +-
 site/content/docs/5.3/components/progress.md  |  2 +-
 site/content/docs/5.3/dark-mode.md            | 20 +++++++++----------
 .../shortcodes/orange-global-headers.html     |  2 +-
 site/layouts/shortcodes/orange-supra.html     |  2 +-
 11 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/scss/_badge.scss b/scss/_badge.scss
index 67a1ca642e..bd931f0db9 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -40,11 +40,3 @@
   padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); // Boosted mod
   margin-left: map-get($spacers, 1); // Boosted mod
 }
-
-// Boosted mod: inconsistent background color & naming
-@each $color, $value in $theme-colors {
-  .badge.bg-#{$color} {
-    color: color-contrast($value);
-    background-color: $value !important; // stylelint-disable-line declaration-no-important
-  }
-}
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index d4700169d3..b4f7466fb9 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -102,19 +102,19 @@
 }
 
 .btn-success {
-  @include button-variant($green, $green, $white);
+  @include button-variant(var(--#{$prefix}success), var(--#{$prefix}success), var(--#{$prefix}highlight-color));
 }
 
 .btn-danger {
-  @include button-variant($red, $red, $white);
+  @include button-variant(var(--#{$prefix}danger), var(--#{$prefix}danger), var(--#{$prefix}highlight-color));
 }
 
 .btn-warning {
-  @include button-variant($yellow, $yellow, $black);
+  @include button-variant($warning, $warning, $black);
 }
 
 .btn-info {
-  @include button-variant($blue, $blue, $white);
+  @include button-variant(var(--#{$prefix}info), var(--#{$prefix}info), var(--#{$prefix}highlight-color));
 }
 
 .btn-light {
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 55abf4e876..ca9632fa63 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -8,10 +8,10 @@
 
 // Boosted mod
 // scss-docs-start brand-colors-dark
-$functional-green-dark:  #32c832 !default;
-$functional-blue-dark:   #527edb !default;
+$functional-green-dark:  #6c6 !default;
+$functional-blue-dark:   #69f !default;
 $functional-yellow-dark: $functional-yellow !default;
-$functional-red-dark:    #d53f15 !default;
+$functional-red-dark:    #f66 !default;
 // scss-docs-end brand-colors-dark
 
 // scss-docs-start sass-dark-mode-vars
diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss
index e188b9ae95..6ddf2f78af 100644
--- a/scss/helpers/_color-bg.scss
+++ b/scss/helpers/_color-bg.scss
@@ -11,7 +11,13 @@
   @include color-mode(dark) {
     @each $color, $value in $theme-colors-dark {
       .text-bg-#{$color} {
-        color: color-contrast($value) if($enable-important-utilities, !important, null);
+        $text-bg-color: var(--#{$prefix}highlight-color);
+        @if index(("primary", "warning", "light"), #{$color}) {
+          $text-bg-color: $black;
+        } @else if (#{$color} == "dark") {
+          $text-bg-color: $white;
+        }
+        color: $text-bg-color if($enable-important-utilities, !important, null);
       }
     }
   }
diff --git a/site/content/docs/5.3/components/badge.md b/site/content/docs/5.3/components/badge.md
index 53e65464a6..580669a16f 100644
--- a/site/content/docs/5.3/components/badge.md
+++ b/site/content/docs/5.3/components/badge.md
@@ -37,7 +37,7 @@ This component should not be used because it does not exist in the Orange Design
 
 {{< example >}}
 <button type="button" class="btn btn-primary">
-  Notifications <span class="badge text-bg-secondary">4</span>
+  Notifications <span class="badge text-bg-dark">4</span>
 </button>
 {{< /example >}}
 
@@ -63,7 +63,7 @@ Please refer to our Boosted [Navbars]({{< docsref "/examples/navbars" >}}) examp
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
   </svg>
   <span class="visually-hidden">Shopping basket</span>
-  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-info text-white">
+  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-info">
     99+
     <span class="visually-hidden">shopping basket items</span>
   </span>
diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md
index bad3094b8c..4e49a5010a 100644
--- a/site/content/docs/5.3/components/list-group.md
+++ b/site/content/docs/5.3/components/list-group.md
@@ -120,21 +120,21 @@ These work great with custom content as well.
       Subheading
       <div class="fw-normal mt-1 lh-base">Content for list item</div>
     </div>
-    <span class="badge bg-info text-white rounded-pill">14</span>
+    <span class="badge text-bg-info rounded-pill">14</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-start">
     <div class="me-auto">
       Subheading
       <div class="fw-normal mt-1 lh-base">Content for list item</div>
     </div>
-    <span class="badge bg-info text-white rounded-pill">14</span>
+    <span class="badge text-bg-info rounded-pill">14</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-start">
     <div class="me-auto">
       Subheading
       <div class="fw-normal mt-1 lh-base">Content for list item</div>
     </div>
-    <span class="badge bg-info text-white rounded-pill">14</span>
+    <span class="badge text-bg-info rounded-pill">14</span>
   </li>
 </ol>
 {{< /example >}}
@@ -221,15 +221,15 @@ Add badges to any list group item to show unread counts, activity, and more with
 <ul class="list-group">
   <li class="list-group-item d-flex justify-content-between align-items-center">
     A list item
-    <span class="badge bg-info text-white rounded-pill">14</span>
+    <span class="badge text-bg-info rounded-pill">14</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-center">
     A second list item
-    <span class="badge bg-info text-white rounded-pill">2</span>
+    <span class="badge text-bg-info rounded-pill">2</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-center">
     A third list item
-    <span class="badge bg-info text-white rounded-pill">1</span>
+    <span class="badge text-bg-info rounded-pill">1</span>
   </li>
 </ul>
 {{< /example >}}
diff --git a/site/content/docs/5.3/components/orange-navbar.md b/site/content/docs/5.3/components/orange-navbar.md
index 3e02b3f362..6aa628126d 100644
--- a/site/content/docs/5.3/components/orange-navbar.md
+++ b/site/content/docs/5.3/components/orange-navbar.md
@@ -192,7 +192,7 @@ An additional navbar (with text or icon items) can be added on the right of the
               </svg>
               <span class="visually-hidden">Basket</span>
               <span class="position-relative align-self-start">
-                <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
+                <span class="badge text-bg-info rounded-pill position-absolute top-0 fs-6 translate-middle">
                   1
                   <span class="visually-hidden">shopping basket items</span>
                 </span>
diff --git a/site/content/docs/5.3/components/progress.md b/site/content/docs/5.3/components/progress.md
index f63d554397..1982e6f786 100644
--- a/site/content/docs/5.3/components/progress.md
+++ b/site/content/docs/5.3/components/progress.md
@@ -148,7 +148,7 @@ If you're adding labels to progress bars with a custom background color, make su
   <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
 </div>
 <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-  <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
+  <div class="progress-bar bg-danger" style="width: 100%">100%</div>
 </div>
 {{< /example >}}
 
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index f7af3d09ff..4d96e0c397 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -4090,7 +4090,7 @@ sitemap_exclude: true
                 </svg>
                 <span class="visually-hidden">Basket</span>
                 <span class="position-relative align-self-start">
-                  <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
+                  <span class="badge text-bg-info rounded-pill position-absolute top-0 fs-6 translate-middle">
                     1
                     <span class="visually-hidden">shopping basket items</span>
                   </span>
@@ -4178,7 +4178,7 @@ sitemap_exclude: true
                 </svg>
                 <span class="visually-hidden">Basket</span>
                 <span class="position-relative align-self-start">
-                  <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
+                  <span class="badge text-bg-info rounded-pill position-absolute top-0 fs-6 translate-middle">
                     1
                     <span class="visually-hidden">shopping basket items</span>
                   </span>
@@ -4266,7 +4266,7 @@ sitemap_exclude: true
                 </svg>
                 <span class="visually-hidden">Basket</span>
                 <span class="position-relative align-self-start">
-                  <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
+                  <span class="badge text-bg-info rounded-pill position-absolute top-0 fs-6 translate-middle">
                     1
                     <span class="visually-hidden">shopping basket items</span>
                   </span>
@@ -4354,7 +4354,7 @@ sitemap_exclude: true
                 </svg>
                 <span class="visually-hidden">Basket</span>
                 <span class="position-relative align-self-start">
-                  <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
+                  <span class="badge text-bg-info rounded-pill position-absolute top-0 fs-6 translate-middle">
                     1
                     <span class="visually-hidden">shopping basket items</span>
                   </span>
@@ -4442,7 +4442,7 @@ sitemap_exclude: true
                 </svg>
                 <span class="visually-hidden">Basket</span>
                 <span class="position-relative align-self-start">
-                  <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
+                  <span class="badge text-bg-info rounded-pill position-absolute top-0 fs-6 translate-middle">
                     1
                     <span class="visually-hidden">shopping basket items</span>
                   </span>
@@ -4700,7 +4700,7 @@ sitemap_exclude: true
     <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
   </div>
   <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
+    <div class="progress-bar bg-danger" style="width: 100%">100%</div>
   </div>
   <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
     <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
@@ -4765,7 +4765,7 @@ sitemap_exclude: true
     <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
   </div>
   <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
+    <div class="progress-bar bg-danger" style="width: 100%">100%</div>
   </div>
   <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
     <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
@@ -4830,7 +4830,7 @@ sitemap_exclude: true
     <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
   </div>
   <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
+    <div class="progress-bar bg-danger" style="width: 100%">100%</div>
   </div>
   <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
     <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
@@ -4895,7 +4895,7 @@ sitemap_exclude: true
     <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
   </div>
   <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
-    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
+    <div class="progress-bar bg-danger" style="width: 100%">100%</div>
   </div>
   <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
     <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
@@ -4960,7 +4960,7 @@ sitemap_exclude: true
     <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
   </div>
   <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
-    <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
+    <div class="progress-bar bg-danger" style="width: 100%">100%</div>
   </div>
   <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
     <div class="progress-bar text-bg-primary" style="width: 30%">30% (.text-bg-primary)</div>
diff --git a/site/layouts/shortcodes/orange-global-headers.html b/site/layouts/shortcodes/orange-global-headers.html
index 2e0b6fd78c..f3d548255d 100644
--- a/site/layouts/shortcodes/orange-global-headers.html
+++ b/site/layouts/shortcodes/orange-global-headers.html
@@ -110,7 +110,7 @@ <h1 class="title">Title</h1>
             </svg>
             <span class="visually-hidden">Basket</span>
             <span class="position-relative align-self-start">
-              <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
+              <span class="badge text-bg-info rounded-pill position-absolute top-0 fs-6 translate-middle">
                 1
                 <span class="visually-hidden">shopping basket items</span>
               </span>
diff --git a/site/layouts/shortcodes/orange-supra.html b/site/layouts/shortcodes/orange-supra.html
index c0f69b009b..10ea8f5f5e 100644
--- a/site/layouts/shortcodes/orange-supra.html
+++ b/site/layouts/shortcodes/orange-supra.html
@@ -43,7 +43,7 @@
           </svg>
           <span class="visually-hidden">Basket</span>
           <span class="position-relative align-self-start">
-            <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
+            <span class="badge text-bg-info rounded-pill position-absolute top-0 fs-6 translate-middle">
               1
               <span class="visually-hidden">shopping basket items</span>
             </span>

From 11f23a1f90a08b1ecaa49df417874188eeacdab8 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Mon, 20 Nov 2023 17:08:29 +0100
Subject: [PATCH 41/71] Dark mode: fix toggle-buttons (#2365)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_button-group.scss                       |   8 +-
 scss/_buttons.scss                            |  62 +-
 scss/_tags.scss                               |   8 +
 scss/forms/_form-check.scss                   | 136 +----
 .../docs/5.3/components/button-group.md       |  12 +-
 site/content/docs/5.3/dark-mode.md            | 537 ++++++++++++++++++
 site/content/docs/5.3/forms/checks-radios.md  |  20 +-
 7 files changed, 626 insertions(+), 157 deletions(-)

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index e1d9da7762..3852e2854a 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -10,16 +10,16 @@
     flex: 1 1 auto;
   }
 
+  // Boosted mod: rule slightly modified
   // Bring the hover, focused, and "active" buttons to the front to overlay
   // the borders properly
   > .btn-check:checked + .btn,
-  > .btn-check:focus + .btn,
   > .btn:hover,
-  > .btn:focus,
   > .btn:active,
   > .btn.active {
     z-index: 1;
   }
+  // End mod
 
   // Boosted mod
   &:focus-within {
@@ -42,11 +42,13 @@
 .btn-group {
   @include border-radius($border-radius);
 
+  // Boosted mod: rule slightlty modified
   // Prevent double borders when buttons are next to each other
-  > :not(.btn-check:first-child) + .btn,
+  > :not(.btn-check:first-child) + .btn:not(.btn-toggle),
   > .btn-group:not(:first-child) {
     margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
   }
+  // End mod
 
   // Reset rounded corners
   > .btn:not(:last-child):not(.dropdown-toggle),
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index b4f7466fb9..fb9acbec95 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -58,8 +58,9 @@
 
   // Boosted mod: no .btn-check:focus-visible + &
 
-  // Boosted mod: custom styles for .btn-check
-  // Boosted mod: simpler rule
+  // Boosted mod: selectors are slightly different to handle `.btn-check:checked`
+  .btn-check:checked + &:active,
+  .btn-check:checked + &,
   &:active,
   &.active,
   &.show {
@@ -71,7 +72,10 @@
     // Boosted mod: no box shadow modification for the active state
     // Boosted mod: no &:focus-visible
   }
+  // End mod
 
+  // Boosted mod: selectors are slightly different to handle `.btn-check`
+  .btn-check:disabled + &,
   &:disabled,
   &.disabled,
   fieldset:disabled & {
@@ -83,6 +87,7 @@
     opacity: var(--#{$prefix}btn-disabled-opacity);
     @include box-shadow(none);
   }
+  // End mod
 
   // Boosted mod: with icon
   &:not(.btn-icon) > svg {
@@ -142,18 +147,57 @@
 }
 // scss-docs-end btn-variant-loops
 
-// Boosted mod: border-only on :hover and :active
+// Boosted mod: Boosted-specific no outline button
 .btn-no-outline {
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-color-translucent);
-  --#{$prefix}btn-active-color: var(--#{$prefix}link-hover-color);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}border-color-translucent);
-  --#{$prefix}btn-disabled-color: var(--#{$prefix}disabled-color);
-  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-border-color);
+  @include button-variant(transparent, transparent, var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-translucent), var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-translucent), var(--#{$prefix}link-hover-color), transparent, transparent, var(--#{$prefix}disabled-color));
+
+  .btn-check:checked + &.btn {
+    border-color: transparent;
+
+    &:hover {
+      border-color: var(--#{$prefix}btn-hover-border-color);
+    }
+  }
+}
+// End mod
+
+
+// Boosted mod: Boosted-specific toggle button
+.btn-toggle {
+  @include button-variant(transparent, var(--#{$prefix}border-color-translucent), var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-translucent), var(--#{$prefix}link-hover-color), $brand-orange, $brand-orange, $black, transparent, var(--#{$prefix}border-color-translucent), var(--#{$prefix}disabled-color));
+
+  .btn-check:checked + & {
+    color: var(--#{$prefix}highlight-color);
+    background-color: var(--#{$prefix}highlight-bg);
+    border-color: var(--#{$prefix}highlight-bg);
+  }
+
+  .btn-group .btn-check + &.btn:not(:first-of-type) {
+    border-left: 0;
+
+    &::before {
+      display: inline-block;
+      width: var(--#{$prefix}btn-border-width);
+      height: 100%;
+      content: "";
+    }
+  }
+
+  .btn-group .btn-check + &.btn:not(:last-of-type) {
+    border-right: 0;
+
+    &::after {
+      display: inline-block;
+      width: var(--#{$prefix}btn-border-width);
+      height: 100%;
+      content: "";
+    }
+  }
 }
 // End mod
 
 
-// Boosted mod: dropdown button
+// Boosted mod: Boosted-specific dropdown button
 .btn-dropdown {
   @include button-variant(var(--#{$prefix}body-bg), var(--#{$prefix}border-color-translucent), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}border-color-translucent), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}body-color), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-color));
 }
diff --git a/scss/_tags.scss b/scss/_tags.scss
index 642c740274..d9e8d2d90a 100644
--- a/scss/_tags.scss
+++ b/scss/_tags.scss
@@ -85,12 +85,20 @@
     }
   }
 
+  .btn-check:disabled + &,
+  .btn-check[disabled] + &,
   &[disabled],
   &.disabled {
     color: var(--#{$prefix}tag-disabled-color);
     pointer-events: none;
     border-color: var(--#{$prefix}tag-disabled-color);
   }
+
+  .btn-check:checked + & {
+    color: var(--#{$prefix}tag-active-color);
+    background-color: var(--#{$prefix}tag-active-decoration-color);
+    border-color: var(--#{$prefix}tag-active-decoration-color);
+  }
 }
 
 // stylelint-disable selector-no-qualifying-type
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 9f7ea8770f..ee5efa087f 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -246,142 +246,20 @@
   clip: rect(0, 0, 0, 0);
   pointer-events: none;
 
-  // Boosted mod: custom styles for .btn-check
-  // @note almost the same structure than the button-variant() mixin
-  // @note meant to override whatever .btn-* variant is used
-  + .btn {
-    margin-left: 0 !important; // stylelint-disable-line declaration-no-important
-    color: $black;
-    @include gradient-bg($white);
-    border-color: $gray-500;
-    @include box-shadow($btn-box-shadow);
-
-    &.btn-icon:not(.btn-no-outline)::before,
-    &.btn-icon:not(.btn-no-outline)::after {
-      display: inline-block;
-      width: var(--#{$prefix}border-width);
-      height: 100%;
-      content: "";
-    }
-
-    .btn-group &:not(.btn-no-outline):not(:first-of-type) {
-      border-left: 0;
-    }
-
-    .btn-group &:not(.btn-no-outline):not(:last-of-type) {
-      border-right: 0;
-    }
-  }
-
-  &:hover + .btn,
-  + .btn:hover {
-    color: $accessible-orange;
-    background-color: $white;
-    border-color: $gray-500;
-  }
-
-  .btn-group & + .btn:hover {
-    z-index: 0;
-  }
-
-  &[data-focus-visible-added]:focus {
-    + .btn,
-    + .tag {
-      @include focus-visible();
-    }
-  }
-
-  &:checked {
-    + .btn {
-      color: $white;
-      background-color: $black;
-      // Remove CSS gradients if they're enabled
-      background-image: if($enable-gradients, none, null);
-      border-color: $black;
-    }
-
-    + .btn-no-outline {
-      &,
-      &:hover {
-        color: $accessible-orange;
-        background-color: transparent;
-      }
-    }
-
-    + .tag {
-      color: var(--bs-tag-active-color);
-      background-color: var(--bs-tag-active-decoration-color);
-      border-color: var(--bs-tag-active-decoration-color);
-    }
-  }
-
-  &:active + .btn,
-  + .btn:active,
-  + .btn.active {
-    color: color-contrast($brand-orange);
-    background-color: $brand-orange;
-    // Remove CSS gradients if they're enabled
-    background-image: if($enable-gradients, none, null);
-    border-color: $brand-orange;
-  }
-  // End mod
-
   &[disabled],
   &:disabled {
     + .btn {
-      color: $form-label-disabled-color; // Boosted mod
-      pointer-events: none;
-      background-color: $white; // Boosted mod
-      // Remove CSS gradients if they're enabled
-      background-image: if($enable-gradients, none, null); // Boosted mod
-      filter: none;
-      border-color: currentcolor; // Boosted mod
+      // Boosted mod: no pointer-events
+      // Boosted mod: no filter
       opacity: $form-check-btn-check-disabled-opacity;
     }
-
-    // Boosted mod
-    &:checked + .btn {
-      color: $white;
-      background-color: $form-label-disabled-color;
-      border-color: $form-label-disabled-color;
-    }
-
-    &:checked + .btn-no-outline {
-      color: $gray-500;
-      background-color: transparent;
-      border-color: currentcolor;
-    }
-
-    + .tag {
-      color: var(--#{$prefix}tag-disabled-color);
-      pointer-events: none;
-      border-color: var(--#{$prefix}tag-disabled-color);
-    }
-
-    &:checked + .tag {
-      color: var(--#{$prefix}tag-active-color);
-      background-color: var(--#{$prefix}tag-disabled-color);
-    }
-    // End mod
   }
 
-  // Boosted mod: handle no-outline case
-  + .btn-no-outline {
-    // Absurd selector to hack on specifity
-    &:not(:only-of-type) {
-      border: var(--#{$prefix}border-width) solid transparent;
-    }
-
-    &:hover,
-    &:active,
-    &.active {
-      color: $black;
-      border-color: $gray-500;
-    }
-
-    &:active {
-      color: $accessible-orange;
-      background-color: transparent;
+  // Boosted mod
+  &[data-focus-visible-added]:focus {
+    + .btn,
+    + .tag {
+      @include focus-visible();
     }
   }
   // End mod
diff --git a/site/content/docs/5.3/components/button-group.md b/site/content/docs/5.3/components/button-group.md
index d2143bb853..fed88b5d97 100644
--- a/site/content/docs/5.3/components/button-group.md
+++ b/site/content/docs/5.3/components/button-group.md
@@ -65,26 +65,26 @@ From the Orange Design System point of view, checkboxes should be represented li
 {{< example >}}
 <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
   <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
-  <label class="btn btn-primary" for="btncheck1">Checkbox 1</label>
+  <label class="btn btn-toggle" for="btncheck1">Checkbox 1</label>
 
   <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
-  <label class="btn btn-primary" for="btncheck2">Checkbox 2</label>
+  <label class="btn btn-toggle" for="btncheck2">Checkbox 2</label>
 
   <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
-  <label class="btn btn-primary" for="btncheck3">Checkbox 3</label>
+  <label class="btn btn-toggle" for="btncheck3">Checkbox 3</label>
 </div>
 {{< /example >}}
 
 {{< example >}}
 <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
   <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
-  <label class="btn btn-primary" for="btnradio1">Radio 1</label>
+  <label class="btn btn-toggle" for="btnradio1">Radio 1</label>
 
   <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
-  <label class="btn btn-primary" for="btnradio2">Radio 2</label>
+  <label class="btn btn-toggle" for="btnradio2">Radio 2</label>
 
   <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
-  <label class="btn btn-primary" for="btnradio3">Radio 3</label>
+  <label class="btn btn-toggle" for="btnradio3">Radio 3</label>
  </div>
  {{< /example >}}
 
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 4d96e0c397..75a5a7f151 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -8022,6 +8022,543 @@ sitemap_exclude: true
   </div>
 </div>
 
+### Toggle buttons
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3">
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check1" autocomplete="off">
+    <label class="btn btn-toggle" for="btn-check1">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check2" autocomplete="off" checked>
+    <label class="btn btn-toggle" for="btn-check2">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check3" autocomplete="off" disabled>
+    <label class="btn btn-toggle" for="btn-check3">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-primary1" autocomplete="off">
+    <label class="btn btn-outline-primary" for="btn-check-primary1">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-primary2" autocomplete="off" checked>
+    <label class="btn btn-outline-primary" for="btn-check-primary2">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-primary3" autocomplete="off" disabled>
+    <label class="btn btn-outline-primary" for="btn-check-primary3">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-secondary1" autocomplete="off">
+    <label class="btn btn-outline-secondary" for="btn-check-secondary1">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-secondary2" autocomplete="off" checked>
+    <label class="btn btn-outline-secondary" for="btn-check-secondary2">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-secondary3" autocomplete="off" disabled>
+    <label class="btn btn-outline-secondary" for="btn-check-secondary3">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-success1" autocomplete="off">
+    <label class="btn btn-outline-success" for="btn-check-success1">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-success2" autocomplete="off" checked>
+    <label class="btn btn-outline-success" for="btn-check-success2">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-success3" autocomplete="off" disabled>
+    <label class="btn btn-outline-success" for="btn-check-success3">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-danger1" autocomplete="off">
+    <label class="btn btn-outline-danger" for="btn-check-danger1">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-danger2" autocomplete="off" checked>
+    <label class="btn btn-outline-danger" for="btn-check-danger2">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-danger3" autocomplete="off" disabled>
+    <label class="btn btn-outline-danger" for="btn-check-danger3">Single toggle</label>
+  </div>
+  <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+    <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off" checked>
+    <label class="btn btn-toggle" for="btncheck1">Checked</label>
+    <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
+    <label class="btn btn-toggle" for="btncheck2">Checkbox</label>
+    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off" disabled>
+    <label class="btn btn-toggle" for="btncheck3">Disabled</label>
+  </div>
+  <div class="btn-group" role="group">
+    <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
+    <label class="btn btn-toggle" for="option1">Checked</label>
+    <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
+    <label class="btn btn-toggle" for="option2">Radio</label>
+    <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
+    <label class="btn btn-toggle" for="option3">Disabled</label>
+  </div>
+  <div class="btn-group" role="group">
+    <input type="radio" class="btn-check" name="icons" id="option5" autocomplete="off" checked>
+    <label class="btn btn-icon btn-toggle" for="option5">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+      </svg>
+      <span class="visually-hidden">Day</span>
+    </label>
+    <input type="radio" class="btn-check" name="icons" id="option6" autocomplete="off">
+    <label class="btn btn-icon btn-toggle" for="option6">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+      </svg>
+      <span class="visually-hidden">Week</span>
+    </label>
+    <input type="radio" class="btn-check" name="icons" id="option7" autocomplete="off">
+    <label class="btn btn-icon btn-toggle" for="option7">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+      </svg>
+      <span class="visually-hidden">Month</span>
+    </label>
+  </div>
+  <div class="btn-group" role="group">
+    <input type="radio" class="btn-check" name="iconsNoOutline" id="option8" autocomplete="off" checked>
+    <label class="btn btn-icon btn-no-outline" for="option8">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+      </svg>
+      <span class="visually-hidden">Day</span>
+    </label>
+    <input type="radio" class="btn-check" name="iconsNoOutline" id="option9" autocomplete="off">
+    <label class="btn btn-icon btn-no-outline" for="option9">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+      </svg>
+      <span class="visually-hidden">Week</span>
+    </label>
+    <input type="radio" class="btn-check" name="iconsNoOutline" id="option10" autocomplete="off">
+    <label class="btn btn-icon btn-no-outline" for="option10">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+      </svg>
+      <span class="visually-hidden">Month</span>
+    </label>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check11" autocomplete="off">
+    <label class="btn btn-toggle" for="btn-check11">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check21" autocomplete="off" checked>
+    <label class="btn btn-toggle" for="btn-check21">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check31" autocomplete="off" disabled>
+    <label class="btn btn-toggle" for="btn-check31">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-primary11" autocomplete="off">
+    <label class="btn btn-outline-primary" for="btn-check-primary11">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-primary21" autocomplete="off" checked>
+    <label class="btn btn-outline-primary" for="btn-check-primary21">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-primary31" autocomplete="off" disabled>
+    <label class="btn btn-outline-primary" for="btn-check-primary31">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-secondary11" autocomplete="off">
+    <label class="btn btn-outline-secondary" for="btn-check-secondary11">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-secondary21" autocomplete="off" checked>
+    <label class="btn btn-outline-secondary" for="btn-check-secondary21">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-secondary31" autocomplete="off" disabled>
+    <label class="btn btn-outline-secondary" for="btn-check-secondary31">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-success11" autocomplete="off">
+    <label class="btn btn-outline-success" for="btn-check-success11">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-success21" autocomplete="off" checked>
+    <label class="btn btn-outline-success" for="btn-check-success21">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-success31" autocomplete="off" disabled>
+    <label class="btn btn-outline-success" for="btn-check-success31">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-danger11" autocomplete="off">
+    <label class="btn btn-outline-danger" for="btn-check-danger11">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-danger21" autocomplete="off" checked>
+    <label class="btn btn-outline-danger" for="btn-check-danger21">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-danger31" autocomplete="off" disabled>
+    <label class="btn btn-outline-danger" for="btn-check-danger31">Single toggle</label>
+  </div>
+  <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+    <input type="checkbox" class="btn-check" id="btncheck11" autocomplete="off" checked>
+    <label class="btn btn-toggle" for="btncheck11">Checked</label>
+    <input type="checkbox" class="btn-check" id="btncheck21" autocomplete="off">
+    <label class="btn btn-toggle" for="btncheck21">Checkbox</label>
+    <input type="checkbox" class="btn-check" id="btncheck31" autocomplete="off" disabled>
+    <label class="btn btn-toggle" for="btncheck31">Disabled</label>
+  </div>
+  <div class="btn-group" role="group">
+    <input type="radio" class="btn-check" name="options1" id="option11" autocomplete="off" checked>
+    <label class="btn btn-toggle" for="option11">Checked</label>
+    <input type="radio" class="btn-check" name="options1" id="option21" autocomplete="off">
+    <label class="btn btn-toggle" for="option21">Radio</label>
+    <input type="radio" class="btn-check" name="options1" id="option31" autocomplete="off" disabled>
+    <label class="btn btn-toggle" for="option31">Disabled</label>
+  </div>
+  <div class="btn-group" role="group">
+    <input type="radio" class="btn-check" name="icons1" id="option51" autocomplete="off" checked>
+    <label class="btn btn-icon btn-toggle" for="option51">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+      </svg>
+      <span class="visually-hidden">Day</span>
+    </label>
+    <input type="radio" class="btn-check" name="icons1" id="option61" autocomplete="off">
+    <label class="btn btn-icon btn-toggle" for="option61">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+      </svg>
+      <span class="visually-hidden">Week</span>
+    </label>
+    <input type="radio" class="btn-check" name="icons1" id="option71" autocomplete="off">
+    <label class="btn btn-icon btn-toggle" for="option71">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+      </svg>
+      <span class="visually-hidden">Month</span>
+    </label>
+  </div>
+  <div class="btn-group" role="group">
+    <input type="radio" class="btn-check" name="iconsNoOutline1" id="option81" autocomplete="off" checked>
+    <label class="btn btn-icon btn-no-outline" for="option81">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+      </svg>
+      <span class="visually-hidden">Day</span>
+    </label>
+    <input type="radio" class="btn-check" name="iconsNoOutline1" id="option91" autocomplete="off">
+    <label class="btn btn-icon btn-no-outline" for="option91">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+      </svg>
+      <span class="visually-hidden">Week</span>
+    </label>
+    <input type="radio" class="btn-check" name="iconsNoOutline1" id="option01" autocomplete="off">
+    <label class="btn btn-icon btn-no-outline" for="option01">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+      </svg>
+      <span class="visually-hidden">Month</span>
+    </label>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check12" autocomplete="off">
+    <label class="btn btn-toggle" for="btn-check12">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check22" autocomplete="off" checked>
+    <label class="btn btn-toggle" for="btn-check22">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check32" autocomplete="off" disabled>
+    <label class="btn btn-toggle" for="btn-check32">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-primary12" autocomplete="off">
+    <label class="btn btn-outline-primary" for="btn-check-primary12">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-primary22" autocomplete="off" checked>
+    <label class="btn btn-outline-primary" for="btn-check-primary22">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-primary32" autocomplete="off" disabled>
+    <label class="btn btn-outline-primary" for="btn-check-primary32">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-secondary12" autocomplete="off">
+    <label class="btn btn-outline-secondary" for="btn-check-secondary12">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-secondary22" autocomplete="off" checked>
+    <label class="btn btn-outline-secondary" for="btn-check-secondary22">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-secondary32" autocomplete="off" disabled>
+    <label class="btn btn-outline-secondary" for="btn-check-secondary32">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-success12" autocomplete="off">
+    <label class="btn btn-outline-success" for="btn-check-success12">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-success22" autocomplete="off" checked>
+    <label class="btn btn-outline-success" for="btn-check-success22">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-success32" autocomplete="off" disabled>
+    <label class="btn btn-outline-success" for="btn-check-success32">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-danger12" autocomplete="off">
+    <label class="btn btn-outline-danger" for="btn-check-danger12">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-danger22" autocomplete="off" checked>
+    <label class="btn btn-outline-danger" for="btn-check-danger22">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-danger32" autocomplete="off" disabled>
+    <label class="btn btn-outline-danger" for="btn-check-danger32">Single toggle</label>
+  </div>
+  <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+    <input type="checkbox" class="btn-check" id="btncheck12" autocomplete="off" checked>
+    <label class="btn btn-toggle" for="btncheck12">Checked</label>
+    <input type="checkbox" class="btn-check" id="btncheck22" autocomplete="off">
+    <label class="btn btn-toggle" for="btncheck22">Checkbox</label>
+    <input type="checkbox" class="btn-check" id="btncheck32" autocomplete="off" disabled>
+    <label class="btn btn-toggle" for="btncheck32">Disabled</label>
+  </div>
+  <div class="btn-group" role="group">
+    <input type="radio" class="btn-check" name="options2" id="option12" autocomplete="off" checked>
+    <label class="btn btn-toggle" for="option12">Checked</label>
+    <input type="radio" class="btn-check" name="options2" id="option22" autocomplete="off">
+    <label class="btn btn-toggle" for="option22">Radio</label>
+    <input type="radio" class="btn-check" name="options2" id="option32" autocomplete="off" disabled>
+    <label class="btn btn-toggle" for="option32">Disabled</label>
+  </div>
+  <div class="btn-group" role="group">
+    <input type="radio" class="btn-check" name="icons2" id="option52" autocomplete="off" checked>
+    <label class="btn btn-icon btn-toggle" for="option52">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+      </svg>
+      <span class="visually-hidden">Day</span>
+    </label>
+    <input type="radio" class="btn-check" name="icons2" id="option62" autocomplete="off">
+    <label class="btn btn-icon btn-toggle" for="option62">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+      </svg>
+      <span class="visually-hidden">Week</span>
+    </label>
+    <input type="radio" class="btn-check" name="icons2" id="option72" autocomplete="off">
+    <label class="btn btn-icon btn-toggle" for="option72">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+      </svg>
+      <span class="visually-hidden">Month</span>
+    </label>
+  </div>
+  <div class="btn-group" role="group">
+    <input type="radio" class="btn-check" name="iconsNoOutline2" id="option82" autocomplete="off" checked>
+    <label class="btn btn-icon btn-no-outline" for="option82">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+      </svg>
+      <span class="visually-hidden">Day</span>
+    </label>
+    <input type="radio" class="btn-check" name="iconsNoOutline2" id="option92" autocomplete="off">
+    <label class="btn btn-icon btn-no-outline" for="option92">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+      </svg>
+      <span class="visually-hidden">Week</span>
+    </label>
+    <input type="radio" class="btn-check" name="iconsNoOutline2" id="option02" autocomplete="off">
+    <label class="btn btn-icon btn-no-outline" for="option02">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+      </svg>
+      <span class="visually-hidden">Month</span>
+    </label>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3" style="background-color: #282d55;">
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check13" autocomplete="off">
+    <label class="btn btn-toggle" for="btn-check13" data-bs-theme="dark">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check23" autocomplete="off" checked>
+    <label class="btn btn-toggle" for="btn-check23" data-bs-theme="dark">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check33" autocomplete="off" disabled>
+    <label class="btn btn-toggle" for="btn-check33" data-bs-theme="dark">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-primary13" autocomplete="off">
+    <label class="btn btn-outline-primary" for="btn-check-primary13" data-bs-theme="dark">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-primary23" autocomplete="off" checked>
+    <label class="btn btn-outline-primary" for="btn-check-primary23" data-bs-theme="dark">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-primary33" autocomplete="off" disabled>
+    <label class="btn btn-outline-primary" for="btn-check-primary33" data-bs-theme="dark">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-secondary13" autocomplete="off">
+    <label class="btn btn-outline-secondary" for="btn-check-secondary13" data-bs-theme="dark">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-secondary23" autocomplete="off" checked>
+    <label class="btn btn-outline-secondary" for="btn-check-secondary23" data-bs-theme="dark">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-secondary33" autocomplete="off" disabled>
+    <label class="btn btn-outline-secondary" for="btn-check-secondary33" data-bs-theme="dark">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-success13" autocomplete="off">
+    <label class="btn btn-outline-success" for="btn-check-success13" data-bs-theme="dark">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-success23" autocomplete="off" checked>
+    <label class="btn btn-outline-success" for="btn-check-success23" data-bs-theme="dark">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-success33" autocomplete="off" disabled>
+    <label class="btn btn-outline-success" for="btn-check-success33" data-bs-theme="dark">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-danger13" autocomplete="off">
+    <label class="btn btn-outline-danger" for="btn-check-danger13" data-bs-theme="dark">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-danger23" autocomplete="off" checked>
+    <label class="btn btn-outline-danger" for="btn-check-danger23" data-bs-theme="dark">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-danger33" autocomplete="off" disabled>
+    <label class="btn btn-outline-danger" for="btn-check-danger33" data-bs-theme="dark">Single toggle</label>
+  </div>
+  <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+    <input type="checkbox" class="btn-check" id="btncheck13" autocomplete="off" checked>
+    <label class="btn btn-toggle" for="btncheck13" data-bs-theme="dark">Checked</label>
+    <input type="checkbox" class="btn-check" id="btncheck23" autocomplete="off">
+    <label class="btn btn-toggle" for="btncheck23" data-bs-theme="dark">Checkbox</label>
+    <input type="checkbox" class="btn-check" id="btncheck33" autocomplete="off" disabled>
+    <label class="btn btn-toggle" for="btncheck33" data-bs-theme="dark">Disabled</label>
+  </div>
+  <div class="btn-group" role="group">
+    <input type="radio" class="btn-check" name="options3" id="option13" autocomplete="off" checked>
+    <label class="btn btn-toggle" for="option13" data-bs-theme="dark">Checked</label>
+    <input type="radio" class="btn-check" name="options3" id="option23" autocomplete="off">
+    <label class="btn btn-toggle" for="option23" data-bs-theme="dark">Radio</label>
+    <input type="radio" class="btn-check" name="options3" id="option33" autocomplete="off" disabled>
+    <label class="btn btn-toggle" for="option33" data-bs-theme="dark">Disabled</label>
+  </div>
+  <div class="btn-group" role="group">
+    <input type="radio" class="btn-check" name="icons3" id="option53" autocomplete="off" checked>
+    <label class="btn btn-icon btn-toggle" for="option53" data-bs-theme="dark">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+      </svg>
+      <span class="visually-hidden">Day</span>
+    </label>
+    <input type="radio" class="btn-check" name="icons3" id="option63" autocomplete="off">
+    <label class="btn btn-icon btn-toggle" for="option63" data-bs-theme="dark">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+      </svg>
+      <span class="visually-hidden">Week</span>
+    </label>
+    <input type="radio" class="btn-check" name="icons3" id="option73" autocomplete="off">
+    <label class="btn btn-icon btn-toggle" for="option73" data-bs-theme="dark">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+      </svg>
+      <span class="visually-hidden">Month</span>
+    </label>
+  </div>
+  <div class="btn-group" role="group">
+    <input type="radio" class="btn-check" name="iconsNoOutline3" id="option83" autocomplete="off" checked>
+    <label class="btn btn-icon btn-no-outline" for="option83" data-bs-theme="dark">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+      </svg>
+      <span class="visually-hidden">Day</span>
+    </label>
+    <input type="radio" class="btn-check" name="iconsNoOutline3" id="option93" autocomplete="off">
+    <label class="btn btn-icon btn-no-outline" for="option93" data-bs-theme="dark">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+      </svg>
+      <span class="visually-hidden">Week</span>
+    </label>
+    <input type="radio" class="btn-check" name="iconsNoOutline3" id="option03" autocomplete="off">
+    <label class="btn btn-icon btn-no-outline" for="option03" data-bs-theme="dark">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+      </svg>
+      <span class="visually-hidden">Month</span>
+    </label>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check14" autocomplete="off">
+    <label class="btn btn-toggle" for="btn-check14" data-bs-theme="light">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check24" autocomplete="off" checked>
+    <label class="btn btn-toggle" for="btn-check24" data-bs-theme="light">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check34" autocomplete="off" disabled>
+    <label class="btn btn-toggle" for="btn-check34" data-bs-theme="light">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-primary14" autocomplete="off">
+    <label class="btn btn-outline-primary" for="btn-check-primary14" data-bs-theme="light">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-primary24" autocomplete="off" checked>
+    <label class="btn btn-outline-primary" for="btn-check-primary24" data-bs-theme="light">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-primary34" autocomplete="off" disabled>
+    <label class="btn btn-outline-primary" for="btn-check-primary34" data-bs-theme="light">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-secondary14" autocomplete="off">
+    <label class="btn btn-outline-secondary" for="btn-check-secondary14" data-bs-theme="light">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-secondary24" autocomplete="off" checked>
+    <label class="btn btn-outline-secondary" for="btn-check-secondary24" data-bs-theme="light">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-secondary34" autocomplete="off" disabled>
+    <label class="btn btn-outline-secondary" for="btn-check-secondary34" data-bs-theme="light">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-success14" autocomplete="off">
+    <label class="btn btn-outline-success" for="btn-check-success14" data-bs-theme="light">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-success24" autocomplete="off" checked>
+    <label class="btn btn-outline-success" for="btn-check-success24" data-bs-theme="light">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-success34" autocomplete="off" disabled>
+    <label class="btn btn-outline-success" for="btn-check-success34" data-bs-theme="light">Single toggle</label>
+  </div>
+  <div class="d-flex gap-2 flex-wrap">
+    <input type="checkbox" class="btn-check" id="btn-check-danger14" autocomplete="off">
+    <label class="btn btn-outline-danger" for="btn-check-danger14" data-bs-theme="light">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-danger24" autocomplete="off" checked>
+    <label class="btn btn-outline-danger" for="btn-check-danger24" data-bs-theme="light">Single toggle</label>
+    <input type="checkbox" class="btn-check" id="btn-check-danger34" autocomplete="off" disabled>
+    <label class="btn btn-outline-danger" for="btn-check-danger34" data-bs-theme="light">Single toggle</label>
+  </div>
+  <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+    <input type="checkbox" class="btn-check" id="btncheck14" autocomplete="off" checked>
+    <label class="btn btn-toggle" for="btncheck14" data-bs-theme="light">Checked</label>
+    <input type="checkbox" class="btn-check" id="btncheck24" autocomplete="off">
+    <label class="btn btn-toggle" for="btncheck24" data-bs-theme="light">Checkbox</label>
+    <input type="checkbox" class="btn-check" id="btncheck34" autocomplete="off" disabled>
+    <label class="btn btn-toggle" for="btncheck34" data-bs-theme="light">Disabled</label>
+  </div>
+  <div class="btn-group" role="group">
+    <input type="radio" class="btn-check" name="options4" id="option14" autocomplete="off" checked>
+    <label class="btn btn-toggle" for="option14" data-bs-theme="light">Checked</label>
+    <input type="radio" class="btn-check" name="options4" id="option24" autocomplete="off">
+    <label class="btn btn-toggle" for="option24" data-bs-theme="light">Radio</label>
+    <input type="radio" class="btn-check" name="options4" id="option34" autocomplete="off" disabled>
+    <label class="btn btn-toggle" for="option34" data-bs-theme="light">Disabled</label>
+  </div>
+  <div class="btn-group" role="group">
+    <input type="radio" class="btn-check" name="icons4" id="option54" autocomplete="off" checked>
+    <label class="btn btn-icon btn-toggle" for="option54" data-bs-theme="light">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+      </svg>
+      <span class="visually-hidden">Day</span>
+    </label>
+    <input type="radio" class="btn-check" name="icons4" id="option64" autocomplete="off">
+    <label class="btn btn-icon btn-toggle" for="option64" data-bs-theme="light">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+      </svg>
+      <span class="visually-hidden">Week</span>
+    </label>
+    <input type="radio" class="btn-check" name="icons4" id="option74" autocomplete="off">
+    <label class="btn btn-icon btn-toggle" for="option74" data-bs-theme="light">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+      </svg>
+      <span class="visually-hidden">Month</span>
+    </label>
+  </div>
+  <div class="btn-group" role="group">
+    <input type="radio" class="btn-check" name="iconsNoOutline4" id="option84" autocomplete="off" checked>
+    <label class="btn btn-icon btn-no-outline" for="option84" data-bs-theme="light">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+      </svg>
+      <span class="visually-hidden">Day</span>
+    </label>
+    <input type="radio" class="btn-check" name="iconsNoOutline4" id="option94" autocomplete="off">
+    <label class="btn btn-icon btn-no-outline" for="option94" data-bs-theme="light">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+      </svg>
+      <span class="visually-hidden">Week</span>
+    </label>
+    <input type="radio" class="btn-check" name="iconsNoOutline4" id="option04" autocomplete="off">
+    <label class="btn btn-icon btn-no-outline" for="option04" data-bs-theme="light">
+      <svg width="1.25rem" height="1.25rem" fill="currentColor">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+      </svg>
+      <span class="visually-hidden">Month</span>
+    </label>
+  </div>
+</div>
+
 ### Validation
 
 <h4 class="mt-3">No theme</h4>
diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md
index bba03788cd..0489a0f663 100644
--- a/site/content/docs/5.3/forms/checks-radios.md
+++ b/site/content/docs/5.3/forms/checks-radios.md
@@ -252,17 +252,17 @@ Create button-like checkboxes and radio buttons by using `.btn` styles rather th
 
 {{< example >}}
 <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
-<label class="btn btn-primary" for="btn-check">Single toggle</label>
+<label class="btn btn-toggle" for="btn-check">Single toggle</label>
 {{< /example >}}
 
 {{< example >}}
 <input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
-<label class="btn btn-primary" for="btn-check-2">Checked</label>
+<label class="btn btn-toggle" for="btn-check-2">Checked</label>
 {{< /example >}}
 
 {{< example >}}
 <input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
-<label class="btn btn-primary" for="btn-check-3">Disabled</label>
+<label class="btn btn-toggle" for="btn-check-3">Disabled</label>
 {{< /example >}}
 
 {{< callout info >}}
@@ -278,16 +278,16 @@ Boosted requires to group its radio toggle buttons in a [button group]({{< docsr
 {{< example >}}
 <div class="btn-group" role="group">
   <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
-  <label class="btn btn-secondary" for="option1">Checked</label>
+  <label class="btn btn-toggle" for="option1">Checked</label>
 
   <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
-  <label class="btn btn-secondary" for="option2">Radio</label>
+  <label class="btn btn-toggle" for="option2">Radio</label>
 
   <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
-  <label class="btn btn-secondary" for="option3">Disabled</label>
+  <label class="btn btn-toggle" for="option3">Disabled</label>
 
   <input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
-  <label class="btn btn-secondary" for="option4">Radio</label>
+  <label class="btn btn-toggle" for="option4">Radio</label>
 </div>
 {{< /example >}}
 
@@ -301,21 +301,21 @@ Add [`.btn-icon`]({{< docsref "/components/buttons" >}}#icon-only) with an [embe
 {{< example >}}
 <div class="btn-group" role="group">
   <input type="radio" class="btn-check" name="icons" id="option5" autocomplete="off" checked>
-  <label class="btn btn-icon" for="option5">
+  <label class="btn btn-icon btn-toggle" for="option5">
     <svg width="1.25rem" height="1.25rem" fill="currentColor">
       <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
     </svg>
     <span class="visually-hidden">Day</span>
   </label>
   <input type="radio" class="btn-check" name="icons" id="option6" autocomplete="off">
-  <label class="btn btn-icon" for="option6">
+  <label class="btn btn-icon btn-toggle" for="option6">
     <svg width="1.25rem" height="1.25rem" fill="currentColor">
       <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
     </svg>
     <span class="visually-hidden">Week</span>
   </label>
   <input type="radio" class="btn-check" name="icons" id="option7" autocomplete="off">
-  <label class="btn btn-icon" for="option7">
+  <label class="btn btn-icon btn-toggle" for="option7">
     <svg width="1.25rem" height="1.25rem" fill="currentColor">
       <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
     </svg>

From a810e8f4c41c00c3d061144fa362407bfa2530c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Mon, 27 Nov 2023 09:14:05 +0100
Subject: [PATCH 42/71] Fix thumbnail hover design guidelines orange color

---
 site/assets/scss/_boosted.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/assets/scss/_boosted.scss b/site/assets/scss/_boosted.scss
index c60eba98ab..cf6067b7c8 100644
--- a/site/assets/scss/_boosted.scss
+++ b/site/assets/scss/_boosted.scss
@@ -78,7 +78,7 @@ body {
       width: 100%;
       height: 0;
       content: "";
-      background-color: $accessible-orange;
+      background-color: var(--bs-link-hover-color);
       @include transition(height ease-out .2s);
     }
 

From 2b579ce4c8883e1d6005e1d3244138e32d934f5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Tue, 28 Nov 2023 11:57:44 +0100
Subject: [PATCH 43/71] Dark mode: add badge in /dark-mode page (#2387)

---
 site/content/docs/5.3/dark-mode.md | 147 +++++++++++++++++++++++++++++
 1 file changed, 147 insertions(+)

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 75a5a7f151..2423795caa 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -526,6 +526,153 @@ sitemap_exclude: true
   </nav>
 </div>
 
+### Badge
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3">
+  <h6>Example heading <span class="badge text-bg-secondary">New</span></h6>
+  <button type="button" class="btn btn-primary">
+    Notifications <span class="badge text-bg-dark">4</span>
+  </button>
+  <a href="#" class="position-relative">
+    <svg width="2rem" height="2rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+      <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
+    </svg>
+    <span class="visually-hidden">Shopping basket</span>
+    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-info">
+      99+
+      <span class="visually-hidden">shopping basket items</span>
+    </span>
+  </a>
+  <div>
+    <span class="badge text-bg-primary">Primary</span>
+    <span class="badge text-bg-secondary">Secondary</span>
+    <span class="badge text-bg-success">Success</span>
+    <span class="badge text-bg-danger">Danger</span>
+    <span class="badge text-bg-warning">Warning</span>
+    <span class="badge text-bg-info">Info</span>
+    <span class="badge text-bg-light">Light</span>
+    <span class="badge text-bg-dark">Dark</span>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+  <h6>Example heading <span class="badge text-bg-secondary">New</span></h6>
+  <button type="button" class="btn btn-primary">
+    Notifications <span class="badge text-bg-dark">4</span>
+  </button>
+  <a href="#" class="position-relative">
+    <svg width="2rem" height="2rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+      <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
+    </svg>
+    <span class="visually-hidden">Shopping basket</span>
+    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-info">
+      99+
+      <span class="visually-hidden">shopping basket items</span>
+    </span>
+  </a>
+  <div>
+    <span class="badge text-bg-primary">Primary</span>
+    <span class="badge text-bg-secondary">Secondary</span>
+    <span class="badge text-bg-success">Success</span>
+    <span class="badge text-bg-danger">Danger</span>
+    <span class="badge text-bg-warning">Warning</span>
+    <span class="badge text-bg-info">Info</span>
+    <span class="badge text-bg-light">Light</span>
+    <span class="badge text-bg-dark">Dark</span>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+  <h6>Example heading <span class="badge text-bg-secondary">New</span></h6>
+  <button type="button" class="btn btn-primary">
+    Notifications <span class="badge text-bg-dark">4</span>
+  </button>
+  <a href="#" class="position-relative">
+    <svg width="2rem" height="2rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+      <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
+    </svg>
+    <span class="visually-hidden">Shopping basket</span>
+    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-info">
+      99+
+      <span class="visually-hidden">shopping basket items</span>
+    </span>
+  </a>
+  <div>
+    <span class="badge text-bg-primary">Primary</span>
+    <span class="badge text-bg-secondary">Secondary</span>
+    <span class="badge text-bg-success">Success</span>
+    <span class="badge text-bg-danger">Danger</span>
+    <span class="badge text-bg-warning">Warning</span>
+    <span class="badge text-bg-info">Info</span>
+    <span class="badge text-bg-light">Light</span>
+    <span class="badge text-bg-dark">Dark</span>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #282d55;">
+  <h6 data-bs-theme="dark">Example heading <span class="badge text-bg-secondary">New</span></h6>
+  <button type="button" class="btn btn-primary" data-bs-theme="dark">
+    Notifications <span class="badge text-bg-dark">4</span>
+  </button>
+  <a href="#" class="position-relative" data-bs-theme="dark">
+    <svg width="2rem" height="2rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+      <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
+    </svg>
+    <span class="visually-hidden">Shopping basket</span>
+    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-info">
+      99+
+      <span class="visually-hidden">shopping basket items</span>
+    </span>
+  </a>
+  <div>
+    <span class="badge text-bg-primary" data-bs-theme="dark">Primary</span>
+    <span class="badge text-bg-secondary" data-bs-theme="dark">Secondary</span>
+    <span class="badge text-bg-success" data-bs-theme="dark">Success</span>
+    <span class="badge text-bg-danger" data-bs-theme="dark">Danger</span>
+    <span class="badge text-bg-warning" data-bs-theme="dark">Warning</span>
+    <span class="badge text-bg-info" data-bs-theme="dark">Info</span>
+    <span class="badge text-bg-light" data-bs-theme="dark">Light</span>
+    <span class="badge text-bg-dark" data-bs-theme="dark">Dark</span>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #b5e8f7">
+  <h6 data-bs-theme="light">Example heading <span class="badge text-bg-secondary">New</span></h6>
+  <button type="button" class="btn btn-primary" data-bs-theme="light">
+    Notifications <span class="badge text-bg-dark">4</span>
+  </button>
+  <a href="#" class="position-relative" data-bs-theme="light">
+    <svg width="2rem" height="2rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+      <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
+    </svg>
+    <span class="visually-hidden">Shopping basket</span>
+    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-info">
+      99+
+      <span class="visually-hidden">shopping basket items</span>
+    </span>
+  </a>
+  <div>
+    <span class="badge text-bg-primary" data-bs-theme="light">Primary</span>
+    <span class="badge text-bg-secondary" data-bs-theme="light">Secondary</span>
+    <span class="badge text-bg-success" data-bs-theme="light">Success</span>
+    <span class="badge text-bg-danger" data-bs-theme="light">Danger</span>
+    <span class="badge text-bg-warning" data-bs-theme="light">Warning</span>
+    <span class="badge text-bg-info" data-bs-theme="light">Info</span>
+    <span class="badge text-bg-light" data-bs-theme="light">Light</span>
+    <span class="badge text-bg-dark" data-bs-theme="light">Dark</span>
+  </div>
+</div>
+
 ### Breadcrumb
 
 <h4 class="mt-3">No theme</h4>

From c63d35a2c938a421a7bed5b69b7640511e251dec Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Wed, 29 Nov 2023 07:09:34 +0100
Subject: [PATCH 44/71] Dark Mode: add placeholders to /dark-mode page (#2391)

---
 site/content/docs/5.3/dark-mode.md | 187 +++++++++++++++++++++++++++++
 1 file changed, 187 insertions(+)

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 2423795caa..770e363339 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -9360,3 +9360,190 @@ sitemap_exclude: true
 <div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #b5e8f7">
   <a class="link-chevron" href="#" data-bs-theme="light">This is a sample link with chevron</a>
 </div>
+
+### Placeholders
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex flex-column gap-2 border p-3">
+  <span class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="dark">
+  <span class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="light">
+  <span class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex flex-column gap-2 border p-3" style="background-color: #282d55;">
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex flex-column gap-2 border p-3" style="background-color: #b5e8f7">
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+</div>

From 71014812d1ed490b7d0b8e17e3237d90ec57a2f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Wed, 29 Nov 2023 07:12:20 +0100
Subject: [PATCH 45/71] Dark mode: move placeholders in /dark-mode

---
 site/content/docs/5.3/dark-mode.md | 374 ++++++++++++++---------------
 1 file changed, 187 insertions(+), 187 deletions(-)

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 770e363339..fef7da9c69 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -4789,6 +4789,193 @@ sitemap_exclude: true
   </nav>
 </div>
 
+### Placeholders
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex flex-column gap-2 border p-3">
+  <span class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="dark">
+  <span class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="light">
+  <span class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex flex-column gap-2 border p-3" style="background-color: #282d55;">
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex flex-column gap-2 border p-3" style="background-color: #b5e8f7">
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+</div>
+
 ### Popovers
 
 <h4 class="mt-3">No theme</h4>
@@ -9360,190 +9547,3 @@ sitemap_exclude: true
 <div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #b5e8f7">
   <a class="link-chevron" href="#" data-bs-theme="light">This is a sample link with chevron</a>
 </div>
-
-### Placeholders
-
-<h4 class="mt-3">No theme</h4>
-
-<div class="d-flex flex-column gap-2 border p-3">
-  <span class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
-</div>
-
-<h4 class="mt-3">Dark theme on container</h4>
-
-<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="dark">
-  <span class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
-</div>
-
-<h4 class="mt-3">Light theme on container</h4>
-
-<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="light">
-  <span class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
-</div>
-
-<h4 class="mt-3">Dark theme on component</h4>
-
-<div class="d-flex flex-column gap-2 border p-3" style="background-color: #282d55;">
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
-</div>
-
-<h4 class="mt-3">Light theme on component</h4>
-
-<div class="d-flex flex-column gap-2 border p-3" style="background-color: #b5e8f7">
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
-</div>

From 06fba00e0042ba6225b9864862300a422ff0e8bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Wed, 29 Nov 2023 11:09:43 +0100
Subject: [PATCH 46/71] Dark mode: Auto color and bg-color with data-bs-theme
 (#2313)

Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>
---
 scss/_accordion.scss                          |   2 +
 scss/_alert.scss                              |   2 +-
 scss/_back-to-top.scss                        |   1 +
 scss/_card.scss                               |   2 +-
 scss/_list-group.scss                         |   1 +
 scss/_modal.scss                              |   1 +
 scss/_nav.scss                                |   2 +
 scss/_offcanvas.scss                          |   4 +-
 scss/_pagination.scss                         |   1 +
 scss/_reboot.scss                             |   3 +-
 scss/_root.scss                               |  11 +
 scss/_spinners.scss                           |   1 +
 scss/_tags.scss                               |   2 +-
 scss/_variables-dark.scss                     |   2 +-
 scss/_variables.scss                          |  42 +-
 scss/forms/_form-check.scss                   |   1 +
 scss/forms/_input-group.scss                  |   1 +
 scss/forms/_star-rating.scss                  |   2 +
 scss/helpers/_chevron-link.scss               |   1 +
 scss/helpers/_color-bg.scss                   |  28 +-
 scss/mixins/_forms.scss                       |   1 +
 site/assets/scss/_content.scss                |   1 +
 site/content/docs/5.3/about/brand.md          |   6 +-
 site/content/docs/5.3/components/spinners.md  |   4 +-
 .../content/docs/5.3/customize/color-modes.md |   2 +-
 site/content/docs/5.3/dark-mode.md            | 705 +++++++++---------
 .../docs/5.3/examples/download-app/index.html |   6 +-
 .../content/docs/5.3/examples/form/index.html |   2 +-
 site/content/docs/5.3/guidelines/_index.md    |   2 +-
 29 files changed, 411 insertions(+), 428 deletions(-)

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index 5787e5ea2d..f0fd49f4c7 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -34,6 +34,8 @@
   --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
   --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
   // scss-docs-end accordion-css-vars
+
+  background-color: transparent; // Boosted mod
 }
 
 .accordion-button {
diff --git a/scss/_alert.scss b/scss/_alert.scss
index 16cdb7b690..d9ec8b0e65 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -78,7 +78,7 @@
 
 @each $state, $value in $alert-colors {
   .alert-#{$state} {
-    --#{$prefix}alert-color: var(--#{$prefix}body-color); // Boosted mod: instead of `var(--#{$prefix}#{$state}-text-emphasis)`
+    // Boosted mod: no --#{$prefix}alert-color
     --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
     // Boosted mod: no `--#{$prefix}alert-link-color`
     // Boosted mod
diff --git a/scss/_back-to-top.scss b/scss/_back-to-top.scss
index 051b68401f..180b3d620a 100644
--- a/scss/_back-to-top.scss
+++ b/scss/_back-to-top.scss
@@ -38,6 +38,7 @@
   bottom: var(--#{$prefix}back-to-top-bottom);
   z-index: var(--#{$prefix}back-to-top-zindex);
   pointer-events: none;
+  background-color: transparent;
 }
 
 .back-to-top-link {
diff --git a/scss/_card.scss b/scss/_card.scss
index 70edd38041..7ae09540d1 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -33,7 +33,7 @@
   flex-direction: column;
   min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
   height: var(--#{$prefix}card-height);
-  color: var(--#{$prefix}body-color);
+  // Boosted mod: no color
   word-wrap: break-word;
   background-color: var(--#{$prefix}card-bg);
   background-clip: border-box;
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 1ef7858d9e..ce5881fd71 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -32,6 +32,7 @@
   // No need to set list-style: none; since .list-group-item is block level
   padding-left: 0; // reset padding because ul and ol
   margin-bottom: 0;
+  background-color: transparent; // Boosted mod
   @include border-radius(var(--#{$prefix}list-group-border-radius));
 
   // Boosted mod
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 44a369382e..f4fa813d25 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -50,6 +50,7 @@
   // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
   // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
   // See also https://github.com/twbs/bootstrap/issues/17695
+  background-color: transparent; // Boosted mod
 }
 
 // Shell div to position the modal with bottom padding
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 94b203eda1..35076362a4 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -19,6 +19,7 @@
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
+  background-color: transparent; // Boosted mod
 }
 
 .nav-link {
@@ -240,6 +241,7 @@
   // scss-docs-end tab-content-css-vars
 
   padding: var(--#{$prefix}tab-content-padding-y) var(--#{$prefix}tab-content-padding-x);
+  background-color: transparent;
   border: var(--#{$prefix}tab-content-border-width) solid var(--#{$prefix}tab-content-border-color);
   border-top: 0;
   // End mod
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 859bd0378a..71462bca82 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -36,7 +36,7 @@
       display: flex;
       flex-direction: column;
       max-width: 100%;
-      color: var(--#{$prefix}offcanvas-color);
+      // Boosted mod: no color
       visibility: hidden;
       background-color: var(--#{$prefix}offcanvas-bg);
       background-clip: padding-box;
@@ -137,10 +137,12 @@
 .offcanvas-title {
   margin-bottom: 0;
   line-height: var(--#{$prefix}offcanvas-title-line-height);
+  color: var(--#{$prefix}offcanvas-color); // Boosted mod
 }
 
 .offcanvas-body {
   flex-grow: 1;
   padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
   overflow-y: auto;
+  color: var(--#{$prefix}offcanvas-color); // Boosted mod
 }
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index f09e31f8a2..17c29dbd88 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -36,6 +36,7 @@
   display: flex;
   flex-wrap: if($pagination-margin-start == (-$pagination-border-width), null, wrap); // Boosted mod
   margin: var(--#{$prefix}pagination-margin-y) 0; // Boosted mod
+  background-color: transparent; // Boosted mod
   @include list-unstyled();
 }
 
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 9c7fdebad7..9910405ed1 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -69,7 +69,7 @@ body {
   @include font-size(var(--#{$prefix}body-font-size));
   font-weight: var(--#{$prefix}body-font-weight);
   line-height: var(--#{$prefix}body-line-height);
-  color: var(--#{$prefix}body-color);
+  // Boosted mod: no color
   text-align: var(--#{$prefix}body-text-align);
 
   /* rtl:remove */
@@ -501,7 +501,6 @@ th {
 label {
   display: inline-block; // 1
   font-weight: $form-label-font-weight; // Boosted mod
-  color: var(--#{$prefix}body-color); // Boosted mod
 }
 
 // Remove the default `border-radius` that macOS Chrome adds.
diff --git a/scss/_root.scss b/scss/_root.scss
index b53df42ff1..c1dbf777df 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -1,6 +1,17 @@
+// Boosted mod
+:root,
+[data-bs-theme] {
+  color: var(--#{$prefix}body-color);
+  background-color: var(--#{$prefix}body-bg);
+}
+
+// Note that some of the following variables in `:root, [data-bs-theme="light"]` could be extracted into `:root` only selector since they are not modified by other color modes!
+// End mod
+
 :root,
 [data-bs-theme="light"] {
   color-scheme: light; // Boosted mod
+
   // Note: Custom variable values only support SassScript inside `#{}`.
 
   // Colors
diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index d4b4641b5c..896cb594ca 100644
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -9,6 +9,7 @@
   height: var(--#{$prefix}spinner-height);
   color: #{$spinner-color}; // Boosted mod
   vertical-align: var(--#{$prefix}spinner-vertical-align);
+  background-color: transparent; // Boosted mod
   // stylelint-disable-next-line property-disallowed-list
   border-radius: 50%;
   animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
diff --git a/scss/_tags.scss b/scss/_tags.scss
index d9e8d2d90a..9b9be4c52e 100644
--- a/scss/_tags.scss
+++ b/scss/_tags.scss
@@ -105,7 +105,7 @@
 a.tag,
 button.tag,
 label.tag {
-  color: var(--#{$prefix}body-color);
+  color: var(--#{$prefix}tag-color);
   text-decoration: none;
   cursor: pointer;
 
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index ca9632fa63..dbdb9803a1 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -82,7 +82,7 @@ $body-tertiary-bg-dark:             $black !default; // Boosted mod: instead of
 $body-emphasis-color-dark:          $white !default; // Boosted mod: instead of `$gray-100`
 $border-color-dark:                 $white !default; // Boosted mod: instead of `$gray-700`
 $border-color-translucent-dark:     $gray-700 !default; // Boosted mod instead of `rgba($white, .15)`
-$headings-color-dark:               $white !default; // Boosted mod: instead of `inherit`
+$headings-color-dark:               inherit !default;
 $link-color-dark:                   $white !default; // Boosted mod: instead of `tint-color($primary, 40%)`
 $link-hover-color-dark:             $brand-orange !default; // Boosted mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)`
 $code-color-dark:                   tint-color($code-color, 40%) !default;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6502910325..c07fff9c3c 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -799,7 +799,7 @@ $headings-font-family:        null !default;
 $headings-font-style:         null !default;
 $headings-font-weight:        700 !default;
 $headings-line-height:        $h6-line-height !default;
-$headings-color:              $black !default; // Boosted mod: instead of `inherit`
+$headings-color:              inherit !default;
 // scss-docs-end headings-variables
 
 // scss-docs-start display-headings
@@ -1095,7 +1095,7 @@ $form-label-margin-bottom:              .5rem !default; // Boosted mod
 $form-label-font-size:                  null !default;
 $form-label-font-style:                 null !default;
 $form-label-font-weight:                $font-weight-bold !default;
-$form-label-color:                      var(--#{$prefix}body-color) !default; // Boosted mod: instead of `null`
+$form-label-color:                      null !default;
 $form-label-disabled-color:             var(--#{$prefix}disabled-color) !default; // Boosted mod
 $form-label-required-margin-left:       .1875rem !default; // Boosted mod
 $form-label-required-color:             var(--#{$prefix}link-hover-color) !default; // Boosted mod
@@ -1130,7 +1130,7 @@ $input-disabled-color:                  var(--#{$prefix}placeholder-color) !defa
 $input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
 $input-disabled-border-color:           null !default;
 
-$input-color:                           var(--#{$prefix}body-color) !default;
+$input-color:                           null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $input-border-color:                    var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of var(--#{$prefix}border-color)
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      none !default; // Boosted mod
@@ -1146,7 +1146,7 @@ $input-focus-width:                     $input-btn-focus-width !default;
 $input-focus-box-shadow:                none !default; // Boosted mod
 
 $input-placeholder-color:               var(--#{$prefix}placeholder-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
-$input-plaintext-color:                 var(--#{$prefix}body-color) !default;
+$input-plaintext-color:                 null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 
 // Boosted mod: no $input-height-border
 
@@ -1304,7 +1304,7 @@ $form-select-border-color:        $input-border-color !default;
 $form-select-border-radius:       $input-border-radius !default;
 $form-select-box-shadow:          none !default; // Boosted mod
 
-$form-select-focus-border-color:  $input-color !default; // Boosted mod: for border to show in Firefox
+$form-select-focus-border-color:  $input-focus-border-color !default;
 // Boosted mod: no $form-select-focus-width
 $form-select-focus-box-shadow:    none !default; // Boosted mod
 
@@ -1368,7 +1368,7 @@ $form-feedback-icon-valid:          var(--#{$prefix}success-icon) !default;
 $form-feedback-icon-invalid:        var(--#{$prefix}error-icon) !default;
 $form-feedback-icon-size:           add($spacer * .25, $spacer * .5) !default; // Boosted mod
 $form-feedback-line-height:         $line-height-sm !default; // Boosted mod
-$form-feedback-color:               var(--#{$prefix}body-color) !default; // Boosted mod
+$form-feedback-color:               null !default; // Boosted mod
 // scss-docs-end form-feedback-variables
 
 // scss-docs-start form-validation-colors
@@ -1436,7 +1436,7 @@ $nav-link-padding-y:                $spacer * .5 !default;
 $nav-link-padding-x:                $spacer !default;
 $nav-link-font-size:                null !default;
 $nav-link-font-weight:              $font-weight-bold !default;
-$nav-link-color:                    var(--#{$prefix}link-color) !default;
+$nav-link-color:                    inherit !default; // Boosted mod: instead of `var(--#{$prefix}link-color)`
 $nav-link-hover-color:              var(--#{$prefix}link-hover-color) !default;
 $nav-link-transition:               null !default; // Boosted mod
 $nav-link-disabled-color:           var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
@@ -1595,7 +1595,7 @@ $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .25 !default; // Boosted mod: instead of `$spacer * .5`
 $dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
 
-$dropdown-link-color:               var(--#{$prefix}body-color) !default;
+$dropdown-link-color:               null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $dropdown-link-hover-color:         $dropdown-link-color !default;
 $dropdown-link-hover-bg:            var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
 
@@ -1607,7 +1607,7 @@ $dropdown-link-disabled-color:      var(--#{$prefix}disabled-color) !default; //
 $dropdown-item-padding-y:           $spacer * .5 !default; // Boosted mod: instead of `$spacer * .25`
 $dropdown-item-padding-x:           $spacer * .5 !default; // Boosted mod: instead of `$spacer`
 
-$dropdown-header-color:             var(--#{$prefix}body-color) !default; // Boosted mod: instead of `$gray-600`
+$dropdown-header-color:             null !default; // Boosted mod: instead of `$gray-600`
 $dropdown-header-padding-x:         $dropdown-item-padding-x !default;
 $dropdown-header-padding-y:         $spacer !default; // Boosted mod: instead of `$dropdown-padding-y`
 // fusv-disable
@@ -1640,7 +1640,7 @@ $pagination-padding-x:              null !default; // Boosted mod: instead of `.
 
 $pagination-font-size:              $font-size-base !default;
 
-$pagination-color:                  var(--#{$prefix}link-color) !default;
+$pagination-color:                  inherit !default; // Boosted mod: instead of `var(--#{$prefix}link-color)`
 $pagination-bg:                     transparent !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 $pagination-border-radius:          var(--#{$prefix}border-radius) !default;
 $pagination-border-width:           var(--#{$prefix}border-width) !default;
@@ -1730,7 +1730,7 @@ $card-footer-color:                 var(--#{$prefix}placeholder-color) !default;
 // scss-docs-start accordion-variables
 $accordion-padding-y:                     $spacer * .5 !default; // Boosted mod
 $accordion-padding-x:                     0 !default; // Boosted mod
-$accordion-color:                         var(--#{$prefix}body-color) !default;
+$accordion-color:                         null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $accordion-bg:                            transparent !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 // stylelint-disable-next-line function-disallowed-list
 $accordion-border-width:                  calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod
@@ -1749,12 +1749,12 @@ $accordion-body-padding-x:                $spacer !default; // Deprecated in Boo
 
 $accordion-button-padding-y:              $accordion-padding-y !default;
 $accordion-button-padding-x:              $accordion-padding-x !default;
-$accordion-button-color:                  var(--#{$prefix}body-color) !default;
+$accordion-button-color:                  null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $accordion-button-bg:                     var(--#{$prefix}accordion-bg) !default;
 $accordion-transition:                    $btn-transition, border-radius .15s ease !default;
 $accordion-button-hover-bg:               var(--#{$prefix}secondary-bg) !default; // Boosted mod
 $accordion-button-active-bg:              null !default; // Boosted mod: instead of `var(--#{$prefix}primary-bg-subtle)`
-$accordion-button-active-color:           var(--#{$prefix}body-color) !default; // Boosted mod: instead of `var(--#{$prefix}primary-text-emphasis)`
+$accordion-button-active-color:           $accordion-button-color !default; // Boosted mod: instead of `var(--#{$prefix}primary-text-emphasis)`
 
 // Boosted mod: no $accordion-button-focus-border-color
 // Boosted mod: no $accordion-button-focus-box-shadow
@@ -1789,7 +1789,7 @@ $tooltip-font-size:                 $font-size-sm !default;
 $tooltip-font-weight:               $font-weight-bold !default; // Boosted mod
 $tooltip-line-height:               $line-height-sm !default; // Boosted mod
 $tooltip-max-width:                 $spacer * 10 !default;
-$tooltip-color:                     var(--#{$prefix}body-color) !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
+$tooltip-color:                     null !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 $tooltip-bg:                        var(--#{$prefix}body-bg) !default; // Boosted mod: instead of `var(--#{$prefix}emphasis-color)`
 // stylelint-disable-next-line function-disallowed-list
 $tooltip-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod
@@ -1834,7 +1834,7 @@ $popover-header-padding-bottom:     map-get($spacers, 2) !default; // Boosted mo
 $popover-header-padding-y:          initial !default; // Boosted mod: instead of `.5rem`
 $popover-header-padding-x:          $spacer * .9 !default; // Boosted mod: instead of `$spacer`
 
-$popover-body-color:                var(--#{$prefix}body-color) !default;
+$popover-body-color:                null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $popover-body-padding-top:          0 !default; // Boosted mod
 $popover-body-padding-bottom:       $popover-padding-y !default; // Boosted mod
 $popover-body-padding-y:            initial !default; // Boosted mod: instead of `$spacer`
@@ -1897,7 +1897,7 @@ $modal-title-line-height:           $line-height-base !default;
 $modal-content-padding-y:           $spacer !default; // Boosted mod
 $modal-content-padding-x:           0 !default; // Boosted mod
 $modal-content-padding:             $modal-content-padding-y $modal-content-padding-x !default; // Boosted mod
-$modal-content-color:               var(--#{$prefix}body-color) !default; // Boosted mod: instead of `null`
+$modal-content-color:               null !default;
 $modal-content-bg:                  var(--#{$prefix}body-bg) !default;
 $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
@@ -1951,7 +1951,7 @@ $modal-scale-transform:             scale(1.02) !default;
 $alert-padding-y:                   1rem !default;
 $alert-padding-x:                   $spacer !default;
 $alert-margin-bottom:               $spacer !default;
-$alert-color:                       inherit !default; // Boosted mod
+$alert-color:                       var(--#{$prefix}body-color) !default; // Boosted mod
 $alert-border-radius:               var(--#{$prefix}border-radius) !default;
 $alert-link-font-weight:            null !default; // Boosted mod
 $alert-heading-font-weight:         $font-weight-bold !default; // Boosted mod
@@ -2005,7 +2005,7 @@ $progress-height-xs:                $spacer * .25 !default;
 
 // scss-docs-start list-group-variables
 $list-group-font-weight:              $font-weight-bold !default; // Boosted mod
-$list-group-color:                    var(--#{$prefix}body-color) !default;
+$list-group-color:                    null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $list-group-bg:                       transparent !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 $list-group-border-color:             var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 $list-group-border-width:             var(--#{$prefix}border-width) !default;
@@ -2139,7 +2139,7 @@ $carousel-indicators-margin-bottom:     $spacer !default;
 // End mod
 
 $carousel-caption-width:             70% !default;
-$carousel-caption-color:             var(--#{$prefix}body-color) !default;
+$carousel-caption-color:             null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $carousel-caption-bg:                var(--#{$prefix}body-bg) !default; // Boosted mod
 $carousel-caption-padding-y:         $spacer !default;
 $carousel-caption-padding-x:         $spacer !default; // Boosted mod
@@ -2169,7 +2169,7 @@ $carousel-transition:                transform $carousel-transition-duration $tr
 // Spinners
 
 // scss-docs-start spinner-variables
-$spinner-color:           var(--#{$prefix}body-color) !default; // Boosted mod
+$spinner-color:           null !default; // Boosted mod
 $spinner-width:           $spacer * 2 !default;
 $spinner-height:          $spinner-width !default;
 $spinner-vertical-align:  -.125em !default;
@@ -2455,7 +2455,7 @@ $tag-font-size-sm:                  $font-size-sm !default;
 
 // scss-docs-start local-nav-variables
 $local-nav-padding-y:           $navbar-nav-link-padding-y !default;
-$local-nav-color:               var(--#{$prefix}body-color) !default;
+$local-nav-color:               null !default;
 $local-nav-bg:                  var(--#{$prefix}body-bg) !default;
 $local-nav-hover-color:         var(--#{$prefix}hover-color) !default;
 $local-nav-hover-bg:            var(--#{$prefix}secondary-bg) !default;
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index ee5efa087f..3d6ef7ec61 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -158,6 +158,7 @@
 
   min-height: $form-switch-width * .5;
   padding-left: $form-switch-padding-start;
+  background-color: transparent;
 
   .form-check-input {
     --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index a68dcf270e..f8e8cd54ad 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -8,6 +8,7 @@
   flex-wrap: wrap; // For form validation feedback
   align-items: stretch;
   width: 100%;
+  background-color: transparent; // Boosted mod
 
   > .form-control,
   > .form-select,
diff --git a/scss/forms/_star-rating.scss b/scss/forms/_star-rating.scss
index 4fb08aabfd..d3f35118fa 100644
--- a/scss/forms/_star-rating.scss
+++ b/scss/forms/_star-rating.scss
@@ -8,7 +8,9 @@
   --#{$prefix}star-rating-hover-color: #{$form-star-rating-hover-color};
   --#{$prefix}star-rating-checked-icon: #{$form-star-rating-checked-icon};
   --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-unchecked-icon};
+
   font-size: $form-star-size;
+  background-color: transparent;
 
   &:disabled {
     pointer-events: none;
diff --git a/scss/helpers/_chevron-link.scss b/scss/helpers/_chevron-link.scss
index 71794d46cb..37970042da 100644
--- a/scss/helpers/_chevron-link.scss
+++ b/scss/helpers/_chevron-link.scss
@@ -2,6 +2,7 @@
 .link-chevron {
   font-weight: $font-weight-bold;
   text-decoration: if($link-decoration == none, null, none);
+  background-color: transparent;
 
   &::after {
     display: inline-block;
diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss
index 6ddf2f78af..8650e5251e 100644
--- a/scss/helpers/_color-bg.scss
+++ b/scss/helpers/_color-bg.scss
@@ -1,25 +1,15 @@
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
   .text-bg-#{$color} {
-    color: color-contrast($value) if($enable-important-utilities, !important, null);
-    background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
-  }
-}
-
-// Boosted mod
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    @each $color, $value in $theme-colors-dark {
-      .text-bg-#{$color} {
-        $text-bg-color: var(--#{$prefix}highlight-color);
-        @if index(("primary", "warning", "light"), #{$color}) {
-          $text-bg-color: $black;
-        } @else if (#{$color} == "dark") {
-          $text-bg-color: $white;
-        }
-        color: $text-bg-color if($enable-important-utilities, !important, null);
-      }
+    // Boosted mod: Force colors to have a good rendering
+    $text-bg-color: var(--#{$prefix}highlight-color);
+    @if index(("primary", "warning", "light"), #{$color}) {
+      $text-bg-color: $black;
+    } @else if (#{$color} == "dark") {
+      $text-bg-color: $white;
     }
+    // End mod
+    color: $text-bg-color if($enable-important-utilities, !important, null); // Boosted mod: instead of `color-contrast($value)`
+    background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
   }
 }
-// End mod
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 9cc075a39c..222ec68298 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -63,6 +63,7 @@
       font-weight: $font-weight-bold; // Boosted mod
       line-height: $form-feedback-line-height; // Boosted mod
       color: $form-feedback-color; // Boosted mod
+      background-color: transparent; // Boosted mod
 
       // Boosted mod: status should not rely on color only
       @if $enable-validation-icons {
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index bcc1050007..62e485ea95 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -111,6 +111,7 @@
   .dropdown-menu {
     --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
     --bs-dropdown-link-color: var(--bs-white);
+    --bs-dropdown-link-active-color: var(--bs-white);
     --bs-dropdown-link-active-bg: #{$blue-700};
     --bs-dropdown-link-hover-color: var(--bs-white);
     --bs-dropdown-link-hover-bg: #{$blue-600};
diff --git a/site/content/docs/5.3/about/brand.md b/site/content/docs/5.3/about/brand.md
index c1fb5ad2ec..6971cf0ba6 100644
--- a/site/content/docs/5.3/about/brand.md
+++ b/site/content/docs/5.3/about/brand.md
@@ -21,7 +21,7 @@ Have a need for Boosted's brand resources? Great! We have only a few guidelines
     <div class="ratio ratio-1x1">
     <figure class="d-flex bg-dark">
       <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 text-body position-absolute">Master logo</figcaption>
+      <figcaption class="figure-caption fw-bold position-absolute">Master logo</figcaption>
     </figure>
     </div>
   </div>
@@ -29,7 +29,7 @@ Have a need for Boosted's brand resources? Great! We have only a few guidelines
     <div class="ratio ratio-1x1">
     <figure class="d-flex bg-dark">
       <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 text-body position-absolute">Small logo</figcaption>
+      <figcaption class="figure-caption fw-bold position-absolute">Small logo</figcaption>
     </figure>
     </div>
   </div>
@@ -50,7 +50,7 @@ Orange Business Services has its own logo that contains the Orange logo and the
     <div class="ratio ratio-1x1">
     <figure class="d-flex bg-dark">
       <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 text-body position-absolute">Orange Business Services logo</figcaption>
+      <figcaption class="figure-caption fw-bold position-absolute">Orange Business Services logo</figcaption>
     </figure>
     </div>
   </div>
diff --git a/site/content/docs/5.3/components/spinners.md b/site/content/docs/5.3/components/spinners.md
index 53b57d1294..54df2c6b48 100644
--- a/site/content/docs/5.3/components/spinners.md
+++ b/site/content/docs/5.3/components/spinners.md
@@ -43,7 +43,7 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c
 <div class="spinner-border text-primary" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
-<div class="spinner-border text-body" role="status">
+<div class="spinner-border" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}
@@ -72,7 +72,7 @@ Once again, this spinner is built with `currentColor`, so you can easily change
 <div class="spinner-grow text-primary" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
-<div class="spinner-grow text-body" role="status">
+<div class="spinner-grow" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}
diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md
index 258cebdc1b..30a84edb2a 100644
--- a/site/content/docs/5.3/customize/color-modes.md
+++ b/site/content/docs/5.3/customize/color-modes.md
@@ -160,7 +160,7 @@ For example, you can create a "blue theme" with the selector `data-bs-theme="blu
 
 {{< scss-docs name="custom-color-mode" file="site/assets/scss/_content.scss" >}}
 
-<div class="bd-example text-body bg-body" data-bs-theme="blue">
+<div class="bd-example" data-bs-theme="blue">
   <div class="h4">Example blue theme</div>
   <p>Some paragraph text to show how the blue theme might look with written copy.</p>
 
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index fef7da9c69..515bd985bc 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -180,7 +180,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <div class="accordion" id="accordionExample2">
     <div class="accordion-item">
       <h2 class="accordion-header">
@@ -221,7 +221,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <div class="accordion" id="accordionExample3">
     <div class="accordion-item">
       <h2 class="accordion-header">
@@ -367,7 +367,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <div class="alert alert-success" role="alert">
     <span class="alert-icon"><span class="visually-hidden">Success</span></span>
     <p>Success notification text goes here.</p>
@@ -388,7 +388,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <div class="alert alert-success" role="alert">
     <span class="alert-icon"><span class="visually-hidden">Success</span></span>
     <p>Success notification text goes here.</p>
@@ -468,7 +468,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="dark">
   <nav aria-label="Standard back to top example2" class="back-to-top position-static ps-5 ms-5">
     <a href="#" 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>
@@ -483,7 +483,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="light">
   <nav aria-label="Standard back to top example3" class="back-to-top position-static ps-5 ms-5">
     <a href="#" 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>
@@ -531,20 +531,9 @@ sitemap_exclude: true
 <h4 class="mt-3">No theme</h4>
 
 <div class="d-flex gap-2 flex-wrap border p-3">
-  <h6>Example heading <span class="badge text-bg-secondary">New</span></h6>
   <button type="button" class="btn btn-primary">
     Notifications <span class="badge text-bg-dark">4</span>
   </button>
-  <a href="#" class="position-relative">
-    <svg width="2rem" height="2rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
-      <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
-    </svg>
-    <span class="visually-hidden">Shopping basket</span>
-    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-info">
-      99+
-      <span class="visually-hidden">shopping basket items</span>
-    </span>
-  </a>
   <div>
     <span class="badge text-bg-primary">Primary</span>
     <span class="badge text-bg-secondary">Secondary</span>
@@ -559,21 +548,10 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
-  <h6>Example heading <span class="badge text-bg-secondary">New</span></h6>
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="dark">
   <button type="button" class="btn btn-primary">
     Notifications <span class="badge text-bg-dark">4</span>
   </button>
-  <a href="#" class="position-relative">
-    <svg width="2rem" height="2rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
-      <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
-    </svg>
-    <span class="visually-hidden">Shopping basket</span>
-    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-info">
-      99+
-      <span class="visually-hidden">shopping basket items</span>
-    </span>
-  </a>
   <div>
     <span class="badge text-bg-primary">Primary</span>
     <span class="badge text-bg-secondary">Secondary</span>
@@ -588,21 +566,10 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
-  <h6>Example heading <span class="badge text-bg-secondary">New</span></h6>
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="light">
   <button type="button" class="btn btn-primary">
     Notifications <span class="badge text-bg-dark">4</span>
   </button>
-  <a href="#" class="position-relative">
-    <svg width="2rem" height="2rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
-      <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
-    </svg>
-    <span class="visually-hidden">Shopping basket</span>
-    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-info">
-      99+
-      <span class="visually-hidden">shopping basket items</span>
-    </span>
-  </a>
   <div>
     <span class="badge text-bg-primary">Primary</span>
     <span class="badge text-bg-secondary">Secondary</span>
@@ -618,20 +585,9 @@ sitemap_exclude: true
 <h4 class="mt-3">Dark theme on component</h4>
 
 <div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #282d55;">
-  <h6 data-bs-theme="dark">Example heading <span class="badge text-bg-secondary">New</span></h6>
   <button type="button" class="btn btn-primary" data-bs-theme="dark">
     Notifications <span class="badge text-bg-dark">4</span>
   </button>
-  <a href="#" class="position-relative" data-bs-theme="dark">
-    <svg width="2rem" height="2rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
-      <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
-    </svg>
-    <span class="visually-hidden">Shopping basket</span>
-    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-info">
-      99+
-      <span class="visually-hidden">shopping basket items</span>
-    </span>
-  </a>
   <div>
     <span class="badge text-bg-primary" data-bs-theme="dark">Primary</span>
     <span class="badge text-bg-secondary" data-bs-theme="dark">Secondary</span>
@@ -647,20 +603,9 @@ sitemap_exclude: true
 <h4 class="mt-3">Light theme on component</h4>
 
 <div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #b5e8f7">
-  <h6 data-bs-theme="light">Example heading <span class="badge text-bg-secondary">New</span></h6>
   <button type="button" class="btn btn-primary" data-bs-theme="light">
     Notifications <span class="badge text-bg-dark">4</span>
   </button>
-  <a href="#" class="position-relative" data-bs-theme="light">
-    <svg width="2rem" height="2rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
-      <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
-    </svg>
-    <span class="visually-hidden">Shopping basket</span>
-    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-info">
-      99+
-      <span class="visually-hidden">shopping basket items</span>
-    </span>
-  </a>
   <div>
     <span class="badge text-bg-primary" data-bs-theme="light">Primary</span>
     <span class="badge text-bg-secondary" data-bs-theme="light">Secondary</span>
@@ -693,7 +638,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <nav aria-label="breadcrumb2">
     <ol class="breadcrumb mb-0">
       <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -709,7 +654,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <nav aria-label="breadcrumb3">
     <ol class="breadcrumb mb-0">
       <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -810,7 +755,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="dark">
   <button type="button" class="btn btn-primary">Primary</button>
   <button type="button" class="btn btn-primary" disabled>Primary</button>
   <button type="button" class="btn btn-secondary">Secondary</button>
@@ -861,7 +806,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="light">
   <button type="button" class="btn btn-primary">Primary</button>
   <button type="button" class="btn btn-primary" disabled>Primary</button>
   <button type="button" class="btn btn-secondary">Secondary</button>
@@ -1079,7 +1024,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="row row-cols-1 row-cols-xl-3 border p-3 bg-body" data-bs-theme="dark">
+<div class="row row-cols-1 row-cols-xl-3 border p-3" data-bs-theme="dark">
   <div class="col">
     <div class="card">
       <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
@@ -1142,7 +1087,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="row row-cols-1 row-cols-xl-3 border p-3 bg-body" data-bs-theme="light">
+<div class="row row-cols-1 row-cols-xl-3 border p-3" data-bs-theme="light">
   <div class="col">
     <div class="card">
       <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
@@ -1381,7 +1326,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <div id="carouselExample2" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-wrap="false">
     <div class="carousel-action-bar">
       <button type="button" class="btn btn-icon carousel-control-play-pause pause" data-bs-target="#carouselExample2" data-bs-play-text="Play Carousel" data-bs-pause-text="Pause Carousel" title="Pause Carousel">
@@ -1429,7 +1374,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <div id="carouselExample3" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-wrap="false">
     <div class="carousel-action-bar">
       <button type="button" class="btn btn-icon carousel-control-play-pause pause" data-bs-target="#carouselExample3" data-bs-play-text="Play Carousel" data-bs-pause-text="Pause Carousel" title="Pause Carousel">
@@ -1598,7 +1543,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" disabled><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
@@ -1621,7 +1566,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" disabled><span class="visually-hidden">Close</span></button>
   <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
@@ -1806,7 +1751,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="dark">
   <div class="btn-group">
     <div class="dropdown">
       <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
@@ -1920,7 +1865,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="light">
   <div class="btn-group">
     <div class="dropdown">
       <button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
@@ -2436,7 +2381,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <footer class="footer navbar">
     <h2 class="visually-hidden">Sitemap &amp; information</h2>
     <div class="container-xxl footer-title-content">
@@ -2576,7 +2521,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <footer class="footer navbar">
     <h2 class="visually-hidden">Sitemap &amp; information</h2>
     <div class="container-xxl footer-title-content">
@@ -3033,7 +2978,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex flex-column gap-2 align-items-start border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex flex-column gap-2 align-items-start border p-3" data-bs-theme="dark">
   <ol class="list-group list-group-numbered">
     <li class="list-group-item">A list item</li>
     <li class="list-group-item active" aria-current="true">A list item</li>
@@ -3068,7 +3013,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex flex-column gap-2 align-items-start border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex flex-column gap-2 align-items-start border p-3" data-bs-theme="light">
   <ol class="list-group list-group-numbered">
     <li class="list-group-item">A list item</li>
     <li class="list-group-item active" aria-current="true">A list item</li>
@@ -3195,7 +3140,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <nav class="local-nav" aria-label="Basic local navigation">
     <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav2" aria-expanded="false" aria-controls="collapseLocalNav2">
       <span class="container-xxl">Shop</span>
@@ -3215,7 +3160,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <nav class="local-nav" aria-label="Basic local navigation">
     <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav3" aria-expanded="false" aria-controls="collapseLocalNav3">
       <span class="container-xxl">Shop</span>
@@ -3308,7 +3253,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalExample2">
     Launch modal
   </button>
@@ -3339,7 +3284,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalExample3">
     Launch modal
   </button>
@@ -3477,7 +3422,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <nav class="navbar navbar-expand-lg">
     <div class="container-fluid">
       <div class="navbar-brand">
@@ -3520,7 +3465,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <nav class="navbar navbar-expand-lg">
     <div class="container-fluid">
       <div class="navbar-brand">
@@ -3753,7 +3698,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <ul class="nav nav-underline">
     <li class="nav-item">
       <a class="nav-link active" aria-current="page" href="#">Active</a>
@@ -3826,7 +3771,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <ul class="nav nav-underline">
     <li class="nav-item">
       <a class="nav-link active" aria-current="page" href="#">Active</a>
@@ -4076,7 +4021,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample2" aria-controls="offcanvasExample2">
     Button with data-bs-target
   </button>
@@ -4105,7 +4050,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample3" aria-controls="offcanvasExample3">
     Button with data-bs-target
   </button>
@@ -4282,7 +4227,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <header>
     <nav class="navbar navbar-expand-lg supra" aria-label="Supra navigation2">
       <div class="container-xxl">
@@ -4370,7 +4315,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <header>
     <nav class="navbar navbar-expand-lg supra" aria-label="Supra navigation3">
       <div class="container-xxl">
@@ -4667,7 +4612,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex flex-column gap-2 border p-3" data-bs-theme="dark">
   <nav aria-label="Page navigation example2">
     <ul class="pagination mb-0">
       <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
@@ -4698,7 +4643,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex flex-column gap-2 border p-3" data-bs-theme="light">
   <nav aria-label="Page navigation example3">
     <ul class="pagination mb-0">
       <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
@@ -4794,186 +4739,186 @@ sitemap_exclude: true
 <h4 class="mt-3">No theme</h4>
 
 <div class="d-flex flex-column gap-2 border p-3">
-  <span class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+  <span class="placeholder col-12 bg-primary placeholder-wave"></span>
+  <span class="placeholder col-12 bg-primary placeholder-glow"></span>
+  <span class="placeholder col-12 bg-secondary placeholder-wave"></span>
+  <span class="placeholder col-12 bg-secondary placeholder-glow"></span>
+  <span class="placeholder col-12 bg-dark placeholder-wave"></span>
+  <span class="placeholder col-12 bg-dark placeholder-glow"></span>
+  <span class="placeholder col-12 bg-success placeholder-wave"></span>
+  <span class="placeholder col-12 bg-success placeholder-glow"></span>
+  <span class="placeholder col-12 bg-info placeholder-wave"></span>
+  <span class="placeholder col-12 bg-info placeholder-glow"></span>
+  <span class="placeholder col-12 bg-warning placeholder-wave"></span>
+  <span class="placeholder col-12 bg-warning placeholder-glow"></span>
+  <span class="placeholder col-12 bg-danger placeholder-wave"></span>
+  <span class="placeholder col-12 bg-danger placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-green placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-green placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-purple placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-purple placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-yellow placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-yellow placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-blue placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-blue placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-pink placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-pink placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-orange placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-orange placeholder-glow"></span>
+  <span class="placeholder col-12 bg-light placeholder-wave"></span>
+  <span class="placeholder col-12 bg-light placeholder-glow"></span>
+  <span class="placeholder col-12 bg-white placeholder-wave"></span>
+  <span class="placeholder col-12 bg-white placeholder-glow"></span>
+  <span class="placeholder col-12 bg-body placeholder-wave"></span>
+  <span class="placeholder col-12 bg-body placeholder-glow"></span>
 </div>
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="dark">
-  <span class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+<div class="d-flex flex-column gap-2 border p-3" data-bs-theme="dark">
+  <span class="placeholder col-12 bg-primary placeholder-wave"></span>
+  <span class="placeholder col-12 bg-primary placeholder-glow"></span>
+  <span class="placeholder col-12 bg-secondary placeholder-wave"></span>
+  <span class="placeholder col-12 bg-secondary placeholder-glow"></span>
+  <span class="placeholder col-12 bg-dark placeholder-wave"></span>
+  <span class="placeholder col-12 bg-dark placeholder-glow"></span>
+  <span class="placeholder col-12 bg-success placeholder-wave"></span>
+  <span class="placeholder col-12 bg-success placeholder-glow"></span>
+  <span class="placeholder col-12 bg-info placeholder-wave"></span>
+  <span class="placeholder col-12 bg-info placeholder-glow"></span>
+  <span class="placeholder col-12 bg-warning placeholder-wave"></span>
+  <span class="placeholder col-12 bg-warning placeholder-glow"></span>
+  <span class="placeholder col-12 bg-danger placeholder-wave"></span>
+  <span class="placeholder col-12 bg-danger placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-green placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-green placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-purple placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-purple placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-yellow placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-yellow placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-blue placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-blue placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-pink placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-pink placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-orange placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-orange placeholder-glow"></span>
+  <span class="placeholder col-12 bg-light placeholder-wave"></span>
+  <span class="placeholder col-12 bg-light placeholder-glow"></span>
+  <span class="placeholder col-12 bg-white placeholder-wave"></span>
+  <span class="placeholder col-12 bg-white placeholder-glow"></span>
+  <span class="placeholder col-12 bg-body placeholder-wave"></span>
+  <span class="placeholder col-12 bg-body placeholder-glow"></span>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="light">
-  <span class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
-  <span class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
-  <span class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+<div class="d-flex flex-column gap-2 border p-3" data-bs-theme="light">
+  <span class="placeholder col-12 bg-primary placeholder-wave"></span>
+  <span class="placeholder col-12 bg-primary placeholder-glow"></span>
+  <span class="placeholder col-12 bg-secondary placeholder-wave"></span>
+  <span class="placeholder col-12 bg-secondary placeholder-glow"></span>
+  <span class="placeholder col-12 bg-dark placeholder-wave"></span>
+  <span class="placeholder col-12 bg-dark placeholder-glow"></span>
+  <span class="placeholder col-12 bg-success placeholder-wave"></span>
+  <span class="placeholder col-12 bg-success placeholder-glow"></span>
+  <span class="placeholder col-12 bg-info placeholder-wave"></span>
+  <span class="placeholder col-12 bg-info placeholder-glow"></span>
+  <span class="placeholder col-12 bg-warning placeholder-wave"></span>
+  <span class="placeholder col-12 bg-warning placeholder-glow"></span>
+  <span class="placeholder col-12 bg-danger placeholder-wave"></span>
+  <span class="placeholder col-12 bg-danger placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-green placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-green placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-purple placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-purple placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-yellow placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-yellow placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-blue placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-blue placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-pink placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-pink placeholder-glow"></span>
+  <span class="placeholder col-12 bg-supporting-orange placeholder-wave"></span>
+  <span class="placeholder col-12 bg-supporting-orange placeholder-glow"></span>
+  <span class="placeholder col-12 bg-light placeholder-wave"></span>
+  <span class="placeholder col-12 bg-light placeholder-glow"></span>
+  <span class="placeholder col-12 bg-white placeholder-wave"></span>
+  <span class="placeholder col-12 bg-white placeholder-glow"></span>
+  <span class="placeholder col-12 bg-body placeholder-wave"></span>
+  <span class="placeholder col-12 bg-body placeholder-glow"></span>
 </div>
 
 <h4 class="mt-3">Dark theme on component</h4>
 
 <div class="d-flex flex-column gap-2 border p-3" style="background-color: #282d55;">
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
-  <span data-bs-theme="dark" class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-primary placeholder-wave"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-primary placeholder-glow"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-secondary placeholder-wave"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-secondary placeholder-glow"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-dark placeholder-wave"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-dark placeholder-glow"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-success placeholder-wave"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-success placeholder-glow"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-info placeholder-wave"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-info placeholder-glow"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-warning placeholder-wave"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-warning placeholder-glow"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-danger placeholder-wave"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-danger placeholder-glow"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-supporting-green placeholder-wave"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-supporting-green placeholder-glow"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-supporting-purple placeholder-wave"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-supporting-purple placeholder-glow"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-supporting-yellow placeholder-wave"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-supporting-yellow placeholder-glow"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-supporting-blue placeholder-wave"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-supporting-blue placeholder-glow"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-supporting-pink placeholder-wave"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-supporting-pink placeholder-glow"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-supporting-orange placeholder-wave"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-supporting-orange placeholder-glow"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-light placeholder-wave"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-light placeholder-glow"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-white placeholder-wave"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-white placeholder-glow"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-body placeholder-wave"></span>
+  <span data-bs-theme="dark" class="placeholder col-12 bg-body placeholder-glow"></span>
 </div>
 
 <h4 class="mt-3">Light theme on component</h4>
 
 <div class="d-flex flex-column gap-2 border p-3" style="background-color: #b5e8f7">
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
-  <span data-bs-theme="light" class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-primary placeholder-wave"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-primary placeholder-glow"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-secondary placeholder-wave"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-secondary placeholder-glow"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-dark placeholder-wave"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-dark placeholder-glow"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-success placeholder-wave"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-success placeholder-glow"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-info placeholder-wave"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-info placeholder-glow"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-warning placeholder-wave"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-warning placeholder-glow"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-danger placeholder-wave"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-danger placeholder-glow"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-supporting-green placeholder-wave"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-supporting-green placeholder-glow"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-supporting-purple placeholder-wave"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-supporting-purple placeholder-glow"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-supporting-yellow placeholder-wave"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-supporting-yellow placeholder-glow"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-supporting-blue placeholder-wave"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-supporting-blue placeholder-glow"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-supporting-pink placeholder-wave"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-supporting-pink placeholder-glow"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-supporting-orange placeholder-wave"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-supporting-orange placeholder-glow"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-light placeholder-wave"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-light placeholder-glow"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-white placeholder-wave"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-white placeholder-glow"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-body placeholder-wave"></span>
+  <span data-bs-theme="light" class="placeholder col-12 bg-body placeholder-glow"></span>
 </div>
 
 ### Popovers
@@ -4987,14 +4932,14 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap align-items-center border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap align-items-center border p-3" data-bs-theme="dark">
   <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
   <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap align-items-center border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap align-items-center border p-3" data-bs-theme="light">
   <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
   <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
 </div>
@@ -5082,7 +5027,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex flex-column gap-2 border p-3" data-bs-theme="dark">
   <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
     <div class="progress-bar" style="width: 30%">30%</div>
   </div>
@@ -5147,7 +5092,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex flex-column gap-2 border p-3" data-bs-theme="light">
   <div class="progress" role="progressbar" aria-label="Primary example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
     <div class="progress-bar" style="width: 30%">30%</div>
   </div>
@@ -5351,7 +5296,7 @@ sitemap_exclude: true
   <div class="spinner-border text-primary" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
-  <div class="spinner-border text-body" role="status">
+  <div class="spinner-border" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
   <div class="spinner-grow" role="status">
@@ -5360,21 +5305,21 @@ sitemap_exclude: true
   <div class="spinner-grow text-primary" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
-  <div class="spinner-grow text-body" role="status">
+  <div class="spinner-grow" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
 </div>
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <div class="spinner-border" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
   <div class="spinner-border text-primary" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
-  <div class="spinner-border text-body" role="status">
+  <div class="spinner-border" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
   <div class="spinner-grow" role="status">
@@ -5383,21 +5328,21 @@ sitemap_exclude: true
   <div class="spinner-grow text-primary" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
-  <div class="spinner-grow text-body" role="status">
+  <div class="spinner-grow" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <div class="spinner-border" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
   <div class="spinner-border text-primary" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
-  <div class="spinner-border text-body" role="status">
+  <div class="spinner-border" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
   <div class="spinner-grow" role="status">
@@ -5406,7 +5351,7 @@ sitemap_exclude: true
   <div class="spinner-grow text-primary" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
-  <div class="spinner-grow text-body" role="status">
+  <div class="spinner-grow" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
 </div>
@@ -5420,7 +5365,7 @@ sitemap_exclude: true
   <div class="spinner-border text-primary" role="status" data-bs-theme="dark">
     <span class="visually-hidden">Loading...</span>
   </div>
-  <div class="spinner-border text-body" role="status" data-bs-theme="dark">
+  <div class="spinner-border" role="status" data-bs-theme="dark">
     <span class="visually-hidden">Loading...</span>
   </div>
   <div class="spinner-grow" role="status" data-bs-theme="dark">
@@ -5429,7 +5374,7 @@ sitemap_exclude: true
   <div class="spinner-grow text-primary" role="status" data-bs-theme="dark">
     <span class="visually-hidden">Loading...</span>
   </div>
-  <div class="spinner-grow text-body" role="status" data-bs-theme="dark">
+  <div class="spinner-grow" role="status" data-bs-theme="dark">
     <span class="visually-hidden">Loading...</span>
   </div>
 </div>
@@ -5443,7 +5388,7 @@ sitemap_exclude: true
   <div class="spinner-border text-primary" role="status" data-bs-theme="light">
     <span class="visually-hidden">Loading...</span>
   </div>
-  <div class="spinner-border text-body" role="status" data-bs-theme="light">
+  <div class="spinner-border" role="status" data-bs-theme="light">
     <span class="visually-hidden">Loading...</span>
   </div>
   <div class="spinner-grow" role="status" data-bs-theme="light">
@@ -5452,7 +5397,7 @@ sitemap_exclude: true
   <div class="spinner-grow text-primary" role="status" data-bs-theme="light">
     <span class="visually-hidden">Loading...</span>
   </div>
-  <div class="spinner-grow text-body" role="status" data-bs-theme="light">
+  <div class="spinner-grow" role="status" data-bs-theme="light">
     <span class="visually-hidden">Loading...</span>
   </div>
 </div>
@@ -5486,7 +5431,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <nav class="stepped-process" aria-label="Checkout process">
     <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
     <ol>
@@ -5511,7 +5456,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <nav class="stepped-process" aria-label="Checkout process">
     <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
     <ol>
@@ -5609,7 +5554,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body d-flex" data-bs-theme="dark">
+<div class="border p-3 d-flex" data-bs-theme="dark">
   <div class="sticker sticker-sm">
     <p class="mb-0">
       <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
@@ -5630,7 +5575,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body d-flex" data-bs-theme="light">
+<div class="border p-3 d-flex" data-bs-theme="light">
   <div class="sticker sticker-sm">
     <p class="mb-0">
       <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
@@ -5733,12 +5678,16 @@ sitemap_exclude: true
         <button class="close" aria-labelledby="labelTag51" disabled><span class="visually-hidden">Close</span></button>
       </span></p>
     </li>
+    <li>
+      <input type="checkbox" class="btn-check" id="btncheck-mobile-disabled1" autocomplete="off" disabled>
+      <label class="tag" for="btncheck-mobile-disabled1"><span class="visually-hidden">Filter by</span>Mobile</label>
+    </li>
   </ul>
 </div>
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <ul class="list-unstyled d-flex gap-2 flex-wrap m-0">
     <li>
       <input type="checkbox" class="btn-check" id="btncheck-mobile2" autocomplete="off">
@@ -5776,12 +5725,16 @@ sitemap_exclude: true
         <button class="close" aria-labelledby="labelTag52" disabled><span class="visually-hidden">Close</span></button>
       </span></p>
     </li>
+    <li>
+      <input type="checkbox" class="btn-check" id="btncheck-mobile-disabled2" autocomplete="off" disabled>
+      <label class="tag" for="btncheck-mobile-disabled2"><span class="visually-hidden">Filter by</span>Mobile</label>
+    </li>
   </ul>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <ul class="list-unstyled d-flex gap-2 flex-wrap m-0">
     <li>
       <input type="checkbox" class="btn-check" id="btncheck-mobile3" autocomplete="off">
@@ -5819,6 +5772,10 @@ sitemap_exclude: true
         <button class="close" aria-labelledby="labelTag53" disabled><span class="visually-hidden">Close</span></button>
       </span></p>
     </li>
+    <li>
+      <input type="checkbox" class="btn-check" id="btncheck-mobile-disabled3" autocomplete="off" disabled>
+      <label class="tag" for="btncheck-mobile-disabled3"><span class="visually-hidden">Filter by</span>Mobile</label>
+    </li>
   </ul>
 </div>
 
@@ -5862,6 +5819,10 @@ sitemap_exclude: true
         <button class="close" aria-labelledby="labelTag54" disabled><span class="visually-hidden">Close</span></button>
       </span></p>
     </li>
+    <li>
+      <input type="checkbox" class="btn-check" id="btncheck-mobile-disabled4" autocomplete="off" disabled>
+      <label class="tag" for="btncheck-mobile-disabled4" data-bs-theme="dark"><span class="visually-hidden">Filter by</span>Mobile</label>
+    </li>
   </ul>
 </div>
 
@@ -5905,6 +5866,10 @@ sitemap_exclude: true
         <button class="close" aria-labelledby="labelTag55" disabled><span class="visually-hidden">Close</span></button>
       </span></p>
     </li>
+    <li>
+      <input type="checkbox" class="btn-check" id="btncheck-mobile-disabled5" autocomplete="off" disabled>
+      <label class="tag" for="btncheck-mobile-disabled5" data-bs-theme="light"><span class="visually-hidden">Filter by</span>Mobile</label>
+    </li>
   </ul>
 </div>
 
@@ -5922,7 +5887,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <div class="title-bar">
     <div class="container-xxl">
       <h1 class="display-1">Title</h1>
@@ -5932,7 +5897,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <div class="title-bar">
     <div class="container-xxl">
       <h1 class="display-1">Title</h1>
@@ -5974,7 +5939,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap align-items-center border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap align-items-center border p-3" data-bs-theme="dark">
   <div class="tooltip bs-tooltip-auto show position-relative" role="tooltip" data-popper-placement="right">
     <div class="tooltip-arrow position-absolute " style="transform: translate(0px, 14px);"></div>
     <div class="tooltip-inner">Tooltip</div>
@@ -5984,7 +5949,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap align-items-center border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap align-items-center border p-3" data-bs-theme="light">
   <div class="tooltip bs-tooltip-auto show position-relative" role="tooltip" data-popper-placement="right">
     <div class="tooltip-arrow position-absolute " style="transform: translate(0px, 14px);"></div>
     <div class="tooltip-inner">Tooltip</div>
@@ -6094,7 +6059,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex flex-column align-items-start border p-3 bg-body text-body" data-bs-theme="dark">
+<div class="d-flex flex-column align-items-start border p-3" data-bs-theme="dark">
   <h1>H1</h1>
   <h2>H2</h2>
   <h3>H3</h3>
@@ -6170,7 +6135,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex flex-column align-items-start border p-3 bg-body text-body" data-bs-theme="light">
+<div class="d-flex flex-column align-items-start border p-3" data-bs-theme="light">
   <h1>H1</h1>
   <h2>H2</h2>
   <h3>H3</h3>
@@ -6251,10 +6216,10 @@ sitemap_exclude: true
   <h2 data-bs-theme="dark">H2</h2>
   <h3 data-bs-theme="dark">H3</h3>
   <h4 data-bs-theme="dark">H4</h4>
-  <p class="text-body" data-bs-theme="dark">Paragraph</p>
+  <p data-bs-theme="dark">Paragraph</p>
   <a data-bs-theme="dark" href="#">Link</a>
   <hr class="w-100" data-bs-theme="dark">
-  <ul class="text-body" data-bs-theme="dark">
+  <ul data-bs-theme="dark">
     <li>First layer
       <ul>
         <li>Second layer
@@ -6265,7 +6230,7 @@ sitemap_exclude: true
       </ul>
     </li>
   </ul>
-  <ol class="text-body" data-bs-theme="dark">
+  <ol data-bs-theme="dark">
     <li>First layer
       <ol>
         <li>Second layer
@@ -6276,7 +6241,7 @@ sitemap_exclude: true
       </ol>
     </li>
   </ol>
-  <dl class="text-body" data-bs-theme="dark">
+  <dl data-bs-theme="dark">
     <dt>Description lists</dt>
     <dd>First description</dd>
     <dt>Second title</dt>
@@ -6286,17 +6251,17 @@ sitemap_exclude: true
   <pre data-bs-theme="dark">Preformatted text</pre>
   <var data-bs-theme="dark">Variable text</var>
   <kbd data-bs-theme="dark">Keyboard input</kbd>
-  <samp class="text-body" data-bs-theme="dark">Sample output</samp>
-  <address class="text-body" data-bs-theme="dark">
+  <samp data-bs-theme="dark">Sample output</samp>
+  <address data-bs-theme="dark">
     <strong>Address</strong><br>
     1123 Fictional St,<br>
     San Francisco, CA 94103<br>
     <abbr title="Phone">P:</abbr> (123) 456-7890
   </address>
-  <blockquote class="text-body" data-bs-theme="dark">
+  <blockquote data-bs-theme="dark">
     Blockquote
   </blockquote>
-  <figure class="text-body" data-bs-theme="dark">
+  <figure data-bs-theme="dark">
     <blockquote class="blockquote">
       <p>Styles Blockquote</p>
     </blockquote>
@@ -6304,19 +6269,19 @@ sitemap_exclude: true
       Figcaption <cite title="Source Title">Source</cite>
     </figcaption>
   </figure>
-  <abbr class="text-body" data-bs-theme="dark" title="Abbreviation">Abbr</abbr>
-  <details class="text-body" data-bs-theme="dark">
+  <abbr data-bs-theme="dark" title="Abbreviation">Abbr</abbr>
+  <details data-bs-theme="dark">
     <summary>Summary</summary>
     <p>Details</p>
   </details>
   <p><mark data-bs-theme="dark">highlight</mark></p>
-  <p><del class="text-body" data-bs-theme="dark">This line of text is meant to be treated as deleted text.</del></p>
-  <p><s class="text-body" data-bs-theme="dark">This line of text is meant to be treated as no longer accurate.</s></p>
-  <p><ins class="text-body" data-bs-theme="dark">This line of text is meant to be treated as an addition to the document.</ins></p>
-  <p><u class="text-body" data-bs-theme="dark">This line of text will render as underlined.</u></p>
-  <p><small class="text-body" data-bs-theme="dark">This line of text is meant to be treated as fine print.</small></p>
-  <p><strong class="text-body" data-bs-theme="dark">This line rendered as bold text.</strong></p>
-  <p><em class="text-body" data-bs-theme="dark">This line rendered as bold text too.</em></p>
+  <p><del data-bs-theme="dark">This line of text is meant to be treated as deleted text.</del></p>
+  <p><s data-bs-theme="dark">This line of text is meant to be treated as no longer accurate.</s></p>
+  <p><ins data-bs-theme="dark">This line of text is meant to be treated as an addition to the document.</ins></p>
+  <p><u data-bs-theme="dark">This line of text will render as underlined.</u></p>
+  <p><small data-bs-theme="dark">This line of text is meant to be treated as fine print.</small></p>
+  <p><strong data-bs-theme="dark">This line rendered as bold text.</strong></p>
+  <p><em data-bs-theme="dark">This line rendered as bold text too.</em></p>
   <svg data-bs-theme="dark" class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a gray border around it: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a gray border around it</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/><text x="50%" y="50%" fill="#999" dy=".3em">200x200</text></svg>
 </div>
 
@@ -6327,10 +6292,10 @@ sitemap_exclude: true
   <h2 data-bs-theme="light">H2</h2>
   <h3 data-bs-theme="light">H3</h3>
   <h4 data-bs-theme="light">H4</h4>
-  <p class="text-body" data-bs-theme="light">Paragraph</p>
+  <p data-bs-theme="light">Paragraph</p>
   <a data-bs-theme="light" href="#">Link</a>
   <hr class="w-100" data-bs-theme="light">
-  <ul class="text-body" data-bs-theme="light">
+  <ul data-bs-theme="light">
     <li>First layer
       <ul>
         <li>Second layer
@@ -6341,7 +6306,7 @@ sitemap_exclude: true
       </ul>
     </li>
   </ul>
-  <ol class="text-body" data-bs-theme="light">
+  <ol data-bs-theme="light">
     <li>First layer
       <ol>
         <li>Second layer
@@ -6352,7 +6317,7 @@ sitemap_exclude: true
       </ol>
     </li>
   </ol>
-  <dl class="text-body" data-bs-theme="light">
+  <dl data-bs-theme="light">
     <dt>Description lists</dt>
     <dd>First description</dd>
     <dt>Second title</dt>
@@ -6362,17 +6327,17 @@ sitemap_exclude: true
   <pre data-bs-theme="light">Preformatted text</pre>
   <var data-bs-theme="light">Variable text</var>
   <kbd data-bs-theme="light">Keyboard input</kbd>
-  <samp class="text-body" data-bs-theme="light">Sample output</samp>
-  <address class="text-body" data-bs-theme="light">
+  <samp data-bs-theme="light">Sample output</samp>
+  <address data-bs-theme="light">
     <strong>Address</strong><br>
     1123 Fictional St,<br>
     San Francisco, CA 94103<br>
     <abbr title="Phone">P:</abbr> (123) 456-7890
   </address>
-  <blockquote class="text-body" data-bs-theme="light">
+  <blockquote data-bs-theme="light">
     Blockquote
   </blockquote>
-  <figure class="text-body" data-bs-theme="light">
+  <figure data-bs-theme="light">
     <blockquote class="blockquote">
       <p>Styles Blockquote</p>
     </blockquote>
@@ -6380,19 +6345,19 @@ sitemap_exclude: true
       Figcaption <cite title="Source Title">Source</cite>
     </figcaption>
   </figure>
-  <abbr class="text-body" data-bs-theme="light" title="Abbreviation">Abbr</abbr>
-  <details class="text-body" data-bs-theme="light">
+  <abbr data-bs-theme="light" title="Abbreviation">Abbr</abbr>
+  <details data-bs-theme="light">
     <summary>Summary</summary>
     <p>Details</p>
   </details>
   <p><mark data-bs-theme="light">highlight</mark></p>
-  <p><del class="text-body" data-bs-theme="light">This line of text is meant to be treated as deleted text.</del></p>
-  <p><s class="text-body" data-bs-theme="light">This line of text is meant to be treated as no longer accurate.</s></p>
-  <p><ins class="text-body" data-bs-theme="light">This line of text is meant to be treated as an addition to the document.</ins></p>
-  <p><u class="text-body" data-bs-theme="light">This line of text will render as underlined.</u></p>
-  <p><small class="text-body" data-bs-theme="light">This line of text is meant to be treated as fine print.</small></p>
-  <p><strong class="text-body" data-bs-theme="light">This line rendered as bold text.</strong></p>
-  <p><em class="text-body" data-bs-theme="light">This line rendered as bold text too.</em></p>
+  <p><del data-bs-theme="light">This line of text is meant to be treated as deleted text.</del></p>
+  <p><s data-bs-theme="light">This line of text is meant to be treated as no longer accurate.</s></p>
+  <p><ins data-bs-theme="light">This line of text is meant to be treated as an addition to the document.</ins></p>
+  <p><u data-bs-theme="light">This line of text will render as underlined.</u></p>
+  <p><small data-bs-theme="light">This line of text is meant to be treated as fine print.</small></p>
+  <p><strong data-bs-theme="light">This line rendered as bold text.</strong></p>
+  <p><em data-bs-theme="light">This line rendered as bold text too.</em></p>
   <svg data-bs-theme="light" class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a gray border around it: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a gray border around it</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/><text x="50%" y="50%" fill="#999" dy=".3em">200x200</text></svg>
 </div>
 
@@ -6505,7 +6470,7 @@ sitemap_exclude: true
     </p>
     <p>
       <label for="output1">Example output</label>
-      <output name="result1" id="output1" class="text-body">100</output>
+      <output name="result1" id="output1">100</output>
     </p>
     <p>
       <button type="submit">Button submit</button>
@@ -6524,7 +6489,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <fieldset>
     <legend>Example legend</legend>
     <p>
@@ -6629,7 +6594,7 @@ sitemap_exclude: true
     </p>
     <p>
       <label for="output2">Example output</label>
-      <output name="result2" id="output2" class="text-body">100</output>
+      <output name="result2" id="output2">100</output>
     </p>
     <p>
       <button type="submit">Button submit</button>
@@ -6648,7 +6613,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <fieldset>
     <legend>Example legend</legend>
     <p>
@@ -6753,7 +6718,7 @@ sitemap_exclude: true
     </p>
     <p>
       <label for="output3">Example output</label>
-      <output name="result3" id="output3" class="text-body">100</output>
+      <output name="result3" id="output3">100</output>
     </p>
     <p>
       <button type="submit">Button submit</button>
@@ -6774,7 +6739,7 @@ sitemap_exclude: true
 
 <div class="border p-3" style="background-color: #282d55;">
   <fieldset>
-    <legend class="text-body" data-bs-theme="dark">Example legend</legend>
+    <legend data-bs-theme="dark">Example legend</legend>
     <p>
       <label for="input4" data-bs-theme="dark">Example input</label>
       <input type="text" id="input4" data-bs-theme="dark" placeholder="Example input">
@@ -6877,7 +6842,7 @@ sitemap_exclude: true
     </p>
     <p>
       <label for="output4" data-bs-theme="dark">Example output</label>
-      <output name="result4" id="output4" data-bs-theme="dark" class="text-body">100</output>
+      <output name="result4" id="output4" data-bs-theme="dark">100</output>
     </p>
     <p>
       <button type="submit" data-bs-theme="dark">Button submit</button>
@@ -6898,7 +6863,7 @@ sitemap_exclude: true
 
 <div class="border p-3" style="background-color: #b5e8f7">
   <fieldset>
-    <legend class="text-body" data-bs-theme="light">Example legend</legend>
+    <legend data-bs-theme="light">Example legend</legend>
     <p>
       <label for="input5" data-bs-theme="light">Example input</label>
       <input type="text" id="input5" data-bs-theme="light" placeholder="Example input">
@@ -7001,7 +6966,7 @@ sitemap_exclude: true
     </p>
     <p>
       <label for="output5" data-bs-theme="light">Example output</label>
-      <output name="result5" id="output5" data-bs-theme="light" class="text-body">100</output>
+      <output name="result5" id="output5" data-bs-theme="light">100</output>
     </p>
     <p>
       <button type="submit" data-bs-theme="light">Button submit</button>
@@ -7097,7 +7062,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <table class="table table-hover mb-5">
     <caption>Boosted tables basic and hover look</caption>
     <thead>
@@ -7172,7 +7137,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <table class="table table-hover mb-5">
     <caption>Boosted tables basic and hover look</caption>
     <thead>
@@ -7408,14 +7373,14 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color">
   <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" disabled>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color">
   <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" disabled>
 </div>
@@ -7453,7 +7418,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body bd-example-indeterminate" data-bs-theme="dark">
+<div class="border p-3 bd-example-indeterminate" data-bs-theme="dark">
   <input class="form-check-input" type="checkbox" value="">
   <input class="form-check-input" type="checkbox" value="" checked>
   <input class="form-check-input" type="checkbox" value="" id="Indeterminate1">
@@ -7468,7 +7433,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body bd-example-indeterminate" data-bs-theme="light">
+<div class="border p-3 bd-example-indeterminate" data-bs-theme="light">
   <input class="form-check-input" type="checkbox" value="">
   <input class="form-check-input" type="checkbox" value="" checked>
   <input class="form-check-input" type="checkbox" value="" id="Indeterminate3">
@@ -7527,7 +7492,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <input type="text" class="form-control" placeholder="Input placeholder">
   <textarea class="form-control" rows="2" placeholder="Textarea placeholder"></textarea>
   <input type="text" class="form-control" placeholder="Disabled input placeholder" disabled>
@@ -7539,7 +7504,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <input type="text" class="form-control" placeholder="Input placeholder">
   <textarea class="form-control" rows="2" placeholder="Textarea placeholder"></textarea>
   <input type="text" class="form-control" placeholder="Disabled input placeholder" disabled>
@@ -7584,14 +7549,14 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <input class="form-control" type="file">
   <input class="form-control" type="file" disabled>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <input class="form-control" type="file">
   <input class="form-control" type="file" disabled>
 </div>
@@ -7624,7 +7589,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input"><span class="visually-hidden">Helper for input</span></button>
   <div>
     <label class="form-label is-required">Input label</label>
@@ -7634,7 +7599,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input"><span class="visually-hidden">Helper for input</span></button>
   <div>
     <label class="form-label is-required">Input label</label>
@@ -7687,7 +7652,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <div class="mb-3">
     <div class="input-group">
       <span class="input-group-text">Input group text</span>
@@ -7708,7 +7673,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <div class="mb-3">
     <div class="input-group">
       <span class="input-group-text">Input group text</span>
@@ -7783,7 +7748,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex flex-column border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex flex-column border p-3" data-bs-theme="dark">
   <label class="form-label">Form label</label>
   <label class="form-label is-required">Form label</label>
   <label class="form-label is-disabled">Form label</label>
@@ -7793,7 +7758,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex flex-column border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex flex-column border p-3" data-bs-theme="light">
   <label class="form-label">Form label</label>
   <label class="form-label is-required">Form label</label>
   <label class="form-label is-disabled">Form label</label>
@@ -7848,7 +7813,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 border p-3" data-bs-theme="dark">
   <div class="quantity-selector">
     <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">
@@ -7871,7 +7836,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 border p-3" data-bs-theme="light">
   <div class="quantity-selector">
     <input type="number" id="inputQuantitySelector2" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
     <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector2" data-bs-step="down">
@@ -7949,14 +7914,14 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <input type="range" class="form-range">
   <input type="range" class="form-range" disabled>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <input type="range" class="form-range">
   <input type="range" class="form-range" disabled>
 </div>
@@ -7996,7 +7961,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <select class="form-select" aria-label="Default select example">
     <option selected>Open this select menu</option>
     <option value="1">One</option>
@@ -8013,7 +7978,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <select class="form-select" aria-label="Default select example">
     <option selected>Open this select menu</option>
     <option value="1">One</option>
@@ -8107,7 +8072,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="dark">
+<div class="border p-3" data-bs-theme="dark">
   <form><fieldset class="star-rating">
     <legend class="visually-hidden">Results relevance</legend>
     <input type="radio" id="terrible2" name="rating" value="1" class="visually-hidden">
@@ -8148,7 +8113,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="border p-3 bg-body" data-bs-theme="light">
+<div class="border p-3" data-bs-theme="light">
   <form><fieldset class="star-rating">
     <legend class="visually-hidden">Results relevance</legend>
     <input type="radio" id="terrible3" name="rating" value="1" class="visually-hidden">
@@ -8290,7 +8255,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex border p-3" data-bs-theme="dark">
   <div class="form-check form-switch">
     <input class="form-check-input" type="checkbox" role="switch">
   </div>
@@ -8307,7 +8272,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex border p-3" data-bs-theme="light">
   <div class="form-check form-switch">
     <input class="form-check-input" type="checkbox" role="switch">
   </div>
@@ -8467,7 +8432,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3" data-bs-theme="dark">
   <div class="d-flex gap-2 flex-wrap">
     <input type="checkbox" class="btn-check" id="btn-check11" autocomplete="off">
     <label class="btn btn-toggle" for="btn-check11">Single toggle</label>
@@ -8574,7 +8539,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3 bg-body" data-bs-theme="light">
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3" data-bs-theme="light">
   <div class="d-flex gap-2 flex-wrap">
     <input type="checkbox" class="btn-check" id="btn-check12" autocomplete="off">
     <label class="btn btn-toggle" for="btn-check12">Single toggle</label>
@@ -8920,7 +8885,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-column border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-column border p-3" data-bs-theme="dark">
   <input type="text" class="form-control is-valid" value="Mark">
   <select class="form-select is-valid"><option selected disabled value="">Choose...</option><option>...</option></select>
   <input type="file" class="form-control is-valid">
@@ -8943,7 +8908,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-column border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-column border p-3" data-bs-theme="light">
   <input type="text" class="form-control is-valid" value="Mark">
   <select class="form-select is-valid"><option selected disabled value="">Choose...</option><option>...</option></select>
   <input type="file" class="form-control is-valid">
@@ -9040,7 +9005,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="dark">
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-primary"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-secondary"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-success"></div>
@@ -9064,7 +9029,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="light">
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-primary"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-secondary"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-success"></div>
@@ -9153,7 +9118,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="dark">
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-primary"></div>
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-secondary"></div>
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-success"></div>
@@ -9168,7 +9133,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="light">
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-primary"></div>
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-secondary"></div>
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-success"></div>
@@ -9234,7 +9199,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="dark">
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-primary"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-secondary"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-success"></div>
@@ -9253,7 +9218,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="light">
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-primary"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-secondary"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="text-success"></div>
@@ -9326,7 +9291,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="dark">
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-primary"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-secondary"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-success"></div>
@@ -9340,7 +9305,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="light">
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-primary"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-secondary"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary); background-color: currentColor;" class="link-success"></div>
@@ -9399,7 +9364,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="dark">
   <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-primary"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
   <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-secondary"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
   <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-success"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
@@ -9412,7 +9377,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="light">
   <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-primary"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
   <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-secondary"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
   <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary);" class="text-bg-success"><div style="width: 100%; height: 100%; background-color: currentColor;"></div></div>
@@ -9466,7 +9431,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="dark">
   <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-primary"></div>
   <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-secondary"></div>
   <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-success"></div>
@@ -9479,7 +9444,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="light">
   <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-primary"></div>
   <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-secondary"></div>
   <div style="width: 2.5rem; height: 2.5rem; padding: 8px; border: 2px solid var(--bs-secondary); background-color: var(--bs-focus-ring-color);" class="focus-ring-success"></div>
@@ -9526,13 +9491,13 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="dark">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="dark">
   <a class="link-chevron" href="#">This is a sample link with chevron</a>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex gap-2 flex-wrap border p-3 bg-body" data-bs-theme="light">
+<div class="d-flex gap-2 flex-wrap border p-3" data-bs-theme="light">
   <a class="link-chevron" href="#">This is a sample link with chevron</a>
 </div>
 
diff --git a/site/content/docs/5.3/examples/download-app/index.html b/site/content/docs/5.3/examples/download-app/index.html
index d0abe03f05..ccee456c03 100644
--- a/site/content/docs/5.3/examples/download-app/index.html
+++ b/site/content/docs/5.3/examples/download-app/index.html
@@ -50,7 +50,7 @@ <h1 class="two-lined">
 </header>
 
 <main>
-  <div class="text-body bg-dark mb-0 mb-md-2 border-dark border-bottom border-1 position-relative" data-bs-theme="dark">
+  <div class="bg-dark 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>
@@ -192,7 +192,7 @@ <h2 class="h1 mb-4 mb-md-5 text-center">Do you want to start building your app?
     </div>
   </div>
 
-  <div class="text-body bg-dark py-4 py-md-5 border-bottom border-1 border-dark" data-bs-theme="dark">
+  <div class="bg-dark 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">
@@ -315,7 +315,7 @@ <h2 class="col-12 col-md-6 h1 mx-auto mb-4 mb-md-5 text-center">Access this webs
     </div>
   </div>
 
-  <div class="py-4 py-md-5 text-body bg-supporting-yellow" data-bs-theme="light">
+  <div class="py-4 py-md-5 bg-supporting-yellow" data-bs-theme="light">
     <div class="container-xxl d-flex justify-content-center pt-md-2 pb-2">
       <div class="col-12 col-md-6">
         <h2 class="h1 mb-2 mb-md-3 text-center">Your feedback is valued</h2>
diff --git a/site/content/docs/5.3/examples/form/index.html b/site/content/docs/5.3/examples/form/index.html
index 09b9a269aa..ee973d8114 100644
--- a/site/content/docs/5.3/examples/form/index.html
+++ b/site/content/docs/5.3/examples/form/index.html
@@ -70,7 +70,7 @@ <h1 class="title">Travel</h1>
   </nav>
 </header>
 <main class="order-1">
-  <div class="bg-body title-bar">
+  <div class="title-bar">
     <div class="container-xxl d-block">
       <div class="row">
         <div class="col-sm-12 col-lg-5 offset-lg-3">
diff --git a/site/content/docs/5.3/guidelines/_index.md b/site/content/docs/5.3/guidelines/_index.md
index 7a50b34327..fb4ee3675b 100644
--- a/site/content/docs/5.3/guidelines/_index.md
+++ b/site/content/docs/5.3/guidelines/_index.md
@@ -17,7 +17,7 @@ aliases:
         <div class="card border-1 mb-2 mb-md-3 mb-lg-0">
           <img class="card-img-top" src="/docs/{{ $.Site.Params.docs_version }}/{{.image}}" alt="">
           <div class="card-body ps-2 pt-2">
-            <a href="{{.link}}" class="stretched-link text-decoration-none h4 text-body" aria-label="{{.description}}" title="{{.description}}">{{.name}}</a>
+            <a href="{{.link}}" class="stretched-link text-decoration-none h4" aria-label="{{.description}}" title="{{.description}}">{{.name}}</a>
           </div>
         </div>
       </div>

From 36e391e5390e4e9edf76324911e67a5e9a5b2466 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Wed, 13 Dec 2023 07:53:16 +0100
Subject: [PATCH 47/71] Fix bundlewatch values

---
 .bundlewatch.config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 42b2775ce1..5e66e1b15d 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -10,7 +10,7 @@
     },
     {
       "path": "./dist/css/boosted-reboot.css",
-      "maxSize": "4.5 kB"
+      "maxSize": "4.75 kB"
     },
     {
       "path": "./dist/css/boosted-reboot.min.css",

From 0df0b4c48695e2053f379d6113260dbc3679ce6d Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Wed, 13 Dec 2023 11:30:44 +0100
Subject: [PATCH 48/71] Dark mode: Color handling in the colors (#2382)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_breadcrumb.scss                         |   1 -
 scss/_button-group.scss                       |   4 +-
 scss/_buttons.scss                            |  18 +-
 scss/_color-palette.scss                      |  79 +++
 scss/_maps.scss                               |   1 -
 scss/_reboot.scss                             |  12 +-
 scss/_root.scss                               |  77 +-
 scss/_utilities.scss                          |   2 +-
 scss/_variables-dark.scss                     |  44 +-
 scss/_variables.scss                          | 315 +++++----
 scss/forms/_form-check.scss                   |   2 +-
 scss/forms/_form-select.scss                  |   4 +-
 site/assets/js/color.js                       |  28 +
 site/assets/scss/_boosted.scss                |   2 +-
 site/assets/scss/_colors.scss                 |   5 +-
 site/assets/scss/_component-examples.scss     |  38 +-
 site/assets/scss/_content.scss                |  30 +
 site/assets/scss/_masthead.scss               |   2 +-
 site/assets/scss/_navbar.scss                 |   2 +-
 site/assets/scss/_search.scss                 |  14 +-
 site/assets/scss/_tarteaucitron.scss          |   4 +-
 site/assets/scss/_variables.scss              |   2 +-
 site/content/docs/5.3/components/alerts.md    |   2 +-
 .../content/docs/5.3/components/list-group.md |   4 +-
 site/content/docs/5.3/content/tables.md       |   6 +-
 .../content/docs/5.3/customize/color-modes.md |  16 +-
 .../docs/5.3/customize/color-palette.md       | 212 ++++++
 .../content/docs/5.3/customize/color-theme.md | 653 +++++++++++++++++
 site/content/docs/5.3/customize/color.md      | 663 ------------------
 site/content/docs/5.3/customize/overview.md   |   4 +-
 site/content/docs/5.3/customize/sass.md       |   2 +-
 site/content/docs/5.3/dark-mode.md            |  77 +-
 .../examples/download-app/download-app.css    |   8 +-
 .../docs/5.3/examples/download-app/index.html |   4 +-
 site/content/docs/5.3/examples/grid/grid.css  |   4 +-
 .../docs/5.3/getting-started/accessibility.md |   2 +-
 site/content/docs/5.3/helpers/focus-ring.md   |   2 +-
 site/content/docs/5.3/utilities/background.md |   2 +-
 site/content/docs/5.3/utilities/colors.md     |   4 +-
 site/data/colors.yml                          |   6 +-
 site/data/palette.yml                         | 290 ++++++--
 site/data/sidebar.yml                         |   3 +-
 site/data/theme-colors.yml                    |  26 +-
 site/layouts/shortcodes/card.html             |   2 +-
 site/layouts/shortcodes/example.html          |   2 +-
 site/layouts/shortcodes/js-docs.html          |   4 +-
 site/layouts/shortcodes/placeholder.html      |   6 +-
 site/layouts/shortcodes/scss-docs.html        |   4 +-
 48 files changed, 1600 insertions(+), 1094 deletions(-)
 create mode 100644 scss/_color-palette.scss
 create mode 100644 site/assets/js/color.js
 create mode 100644 site/content/docs/5.3/customize/color-palette.md
 create mode 100644 site/content/docs/5.3/customize/color-theme.md
 delete mode 100644 site/content/docs/5.3/customize/color.md

diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index 6974b159a4..19bc84641e 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -9,7 +9,6 @@
   --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
   --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
   --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
-  --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter}; // Boosted mod
   --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
   --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
   // scss-docs-end breadcrumb-css-vars
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 3852e2854a..89bfa447d9 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -142,11 +142,11 @@
   .btn.active + &,
   &:active + * + .btn,
   &.active + * + .btn {
-    border-color: $brand-orange;
+    border-color: $supporting-orange;
   }
 
   .btn-group.show > &:not(:focus):not(:active)::before {
-    color: $brand-orange;
+    color: $supporting-orange;
     background-color: currentcolor;
   }
   // End mod
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index fb9acbec95..edaaf2c225 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -103,7 +103,7 @@
 
 // scss-docs-start btn-variant-loops
 .btn-primary {
-  @include button-variant($brand-orange, $brand-orange, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}highlight-bg), $active-color: var(--#{$prefix}highlight-bg));
+  @include button-variant($supporting-orange, $supporting-orange, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}border-color), $active-color: var(--#{$prefix}body-color));
 }
 
 .btn-success {
@@ -127,11 +127,11 @@
 }
 
 .btn-dark {
-  @include button-variant($dark, $dark, $white, $hover-background: $white, $hover-border: var(--#{$prefix}highlight-bg), $hover-color: $black);
+  @include button-variant($dark, $dark, $white, $hover-background: $white, $hover-border: var(--#{$prefix}border-color), $hover-color: $black);
 }
 
 .btn-secondary {
-  @include button-variant(var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-color), $hover-background: var(--#{$prefix}highlight-color), $hover-border: var(--#{$prefix}highlight-bg), $hover-color: var(--#{$prefix}highlight-bg));
+  @include button-variant(var(--#{$prefix}secondary), var(--#{$prefix}secondary), var(--#{$prefix}highlight-color), $hover-background: var(--#{$prefix}highlight-color), $hover-border: var(--#{$prefix}border-color), $hover-color: var(--#{$prefix}body-color));
 }
 
 @each $color, $value in $theme-colors {
@@ -149,7 +149,7 @@
 
 // Boosted mod: Boosted-specific no outline button
 .btn-no-outline {
-  @include button-variant(transparent, transparent, var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-translucent), var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-translucent), var(--#{$prefix}link-hover-color), transparent, transparent, var(--#{$prefix}disabled-color));
+  @include button-variant(transparent, transparent, var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}primary), transparent, transparent, var(--#{$prefix}disabled-color));
 
   .btn-check:checked + &.btn {
     border-color: transparent;
@@ -164,12 +164,12 @@
 
 // Boosted mod: Boosted-specific toggle button
 .btn-toggle {
-  @include button-variant(transparent, var(--#{$prefix}border-color-translucent), var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-translucent), var(--#{$prefix}link-hover-color), $brand-orange, $brand-orange, $black, transparent, var(--#{$prefix}border-color-translucent), var(--#{$prefix}disabled-color));
+  @include button-variant(transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}primary), $supporting-orange, $supporting-orange, $black, transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}disabled-color));
 
   .btn-check:checked + & {
     color: var(--#{$prefix}highlight-color);
     background-color: var(--#{$prefix}highlight-bg);
-    border-color: var(--#{$prefix}highlight-bg);
+    border-color: var(--#{$prefix}border-color);
   }
 
   .btn-group .btn-check + &.btn:not(:first-of-type) {
@@ -199,7 +199,7 @@
 
 // Boosted mod: Boosted-specific dropdown button
 .btn-dropdown {
-  @include button-variant(var(--#{$prefix}body-bg), var(--#{$prefix}border-color-translucent), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}border-color-translucent), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}body-color), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-color));
+  @include button-variant(var(--#{$prefix}body-bg), var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}body-color), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-color));
 }
 // End mod
 
@@ -220,7 +220,7 @@
   --#{$prefix}btn-active-border-color: transparent;
   --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
   --#{$prefix}btn-disabled-border-color: transparent;
-  --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
+  --#{$prefix}btn-box-shadow: 0 0 0 #{$black}; // Can't use `none` as keyword negates all values when used with multiple shadows
   // Boosted mod: no redefinition of --#{$prefix}btn-focus-shadow-rgb
 
   text-decoration: $link-decoration;
@@ -267,7 +267,7 @@
   --#{$prefix}btn-hover-border-color: var(--#{$prefix}network-color, #{$black});
   --#{$prefix}btn-active-color: var(--#{$prefix}highlight-color);
   --#{$prefix}btn-active-bg: var(--#{$prefix}highlight-bg);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}highlight-bg);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}border-color);
   --#{$prefix}btn-disabled-color: var(--#{$prefix}disabled-color);
   --#{$prefix}btn-disabled-bg: transparent;
   @include border-radius(50%, 50%);
diff --git a/scss/_color-palette.scss b/scss/_color-palette.scss
new file mode 100644
index 0000000000..fcec47baee
--- /dev/null
+++ b/scss/_color-palette.scss
@@ -0,0 +1,79 @@
+// scss-docs-start palette
+// Palette
+
+// Colors palette
+
+// Orange
+$ods-orange-100:  #ff7900 !default;
+$ods-orange-200:  #f16e00 !default;
+
+// White, grays and black
+$ods-white-100:   #fff !default;
+$ods-gray-200:    #eee !default;
+$ods-gray-300:    #ddd !default;
+$ods-gray-400:    #ccc !default;
+$ods-gray-500:    #999 !default;
+$ods-gray-600:    #666 !default;
+$ods-gray-700:    #595959 !default;
+$ods-gray-800:    #333 !default;
+$ods-gray-900:    #141414 !default;
+$ods-black-900:   #000 !default;
+
+// Forest
+$ods-forest-100:  #6c6 !default;
+$ods-forest-200:  #228722 !default;
+
+// Fire
+$ods-fire-100:    #f66 !default;
+$ods-fire-200:    #cd3c14 !default;
+
+// Water
+$ods-water-100:   #69f !default;
+$ods-water-200:   #4170d8 !default;
+
+// Sun
+$ods-sun-100:     #fc0 !default;
+// fusv-disable
+$ods-sun-200:     #8f7200 !default;
+// fusv-enable
+
+// Blue
+$ods-blue-100:    #b5e8f7 !default;
+$ods-blue-200:    #80ceef !default;
+$ods-blue-300:    #4bb4e6 !default;
+$ods-blue-400:    #3e9dd6 !default;
+$ods-blue-500:    #237eca !default;
+$ods-blue-600:    #085ebd !default;
+
+// Green
+$ods-green-100:   #b8ebd6 !default;
+$ods-green-200:   #84d5af !default;
+$ods-green-300:   #50be87 !default;
+$ods-green-400:   #27a971 !default;
+$ods-green-500:   #198c51 !default;
+$ods-green-600:   #0a6e31 !default;
+
+// Pink
+$ods-pink-100:    #ffe8f7 !default;
+$ods-pink-200:    #ffceef !default;
+$ods-pink-300:    #ffb4e6 !default;
+$ods-pink-400:    #ff8ad4 !default;
+$ods-pink-500:    #d573bb !default;
+$ods-pink-600:    #bc4d9a !default;
+
+// Purple
+$ods-purple-100:  #d9c2f0 !default;
+$ods-purple-200:  #c1a4e4 !default;
+$ods-purple-300:  #a885d8 !default;
+$ods-purple-400:  #9373bd !default;
+$ods-purple-500:  #6e4aa7 !default;
+$ods-purple-600:  #492191 !default;
+
+// Yellow
+$ods-yellow-100:  #fff6b6 !default;
+$ods-yellow-200:  #ffe45b !default;
+$ods-yellow-300:  #ffd200 !default;
+$ods-yellow-400:  #ffb400 !default;
+$ods-yellow-500:  #b98f11 !default;
+$ods-yellow-600:  #9d6e06 !default;
+// scss-docs-end palette
diff --git a/scss/_maps.scss b/scss/_maps.scss
index ef322d15a5..98945a1b91 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -110,7 +110,6 @@ $utilities-colors: $theme-colors-rgb !default;
 $utilities-text: map-merge(
   $utilities-colors,
   (
-    "primary": to-rgb($accessible-orange), // Boosted mod
     "black": to-rgb($black),
     "white": to-rgb($white),
     "body": to-rgb($body-color)
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 9910405ed1..d0d1cba581 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -238,7 +238,7 @@ ul {
 // See https://developer.mozilla.org/fr/docs/Web/CSS/::marker
 // stylelint-disable selector-max-type
 li::marker {
-  color: var(--#{$prefix}link-hover-color);
+  color: var(--#{$prefix}primary);
   vertical-align: middle;
 
   ol & {
@@ -246,15 +246,15 @@ li::marker {
   }
 }
 
-li li::marker { color: var(--#{$prefix}placeholder-color); }
+li li::marker { color: var(--#{$prefix}secondary-color); }
 
-li li li::marker { color: var(--#{$prefix}border-color-translucent); }
+li li li::marker { color: var(--#{$prefix}tertiary-color); }
 
 // Bullet-proof markers' color
 // @todo To remove when ::marker support is OK
 // See https://caniuse.com/#search=%3A%3Amarker
 li::before {
-  color: var(--#{$prefix}link-hover-color);
+  color: var(--#{$prefix}primary);
   vertical-align: text-top;
 
   ol & {
@@ -262,9 +262,9 @@ li::before {
   }
 }
 
-li li::before { color: var(--#{$prefix}placeholder-color); }
+li li::before { color: var(--#{$prefix}secondary-color); }
 
-li li li::before { color: var(--#{$prefix}border-color-translucent); }
+li li li::before { color: var(--#{$prefix}tertiary-color); }
 // stylelint-enable selector-max-type
 // End mod
 
diff --git a/scss/_root.scss b/scss/_root.scss
index c1dbf777df..4250ddb2e5 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -111,11 +111,14 @@
   --#{$prefix}code-color: #{$code-color};
   --#{$prefix}highlight-color: #{$mark-color};
   --#{$prefix}highlight-bg: #{$mark-bg};
+  --#{$prefix}disabled-color: var(--#{$prefix}tertiary-color); // Boosted mod
+  --#{$prefix}tertiary-active-bg: #{$gray-400}; // Boosted mod
 
   // scss-docs-start root-border-var
   --#{$prefix}border-width: #{$border-width};
   --#{$prefix}border-style: #{$border-style};
   --#{$prefix}border-color: #{$border-color};
+  --#{$prefix}border-color-subtle: #{$border-color-subtle}; // Boosted mod
   --#{$prefix}border-color-translucent: #{$border-color-translucent};
 
   --#{$prefix}border-radius: #{$border-radius};
@@ -149,24 +152,26 @@
   --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
   // scss-docs-end root-form-validation-variables
 
-  // ******* Additions for dark-mode
-  --#{$prefix}hover-color: #{$body-color};
-  --#{$prefix}active-bg: #{$gray-400};
-  --#{$prefix}disabled-color: #{$gray-500};
-  --#{$prefix}disabled-filter: #{$disabled-filter};
-  --#{$prefix}placeholder-color: #{$gray-700};
-  --#{$prefix}gray-tweak: #{$gray-900};
-  --#{$prefix}black-tweak: #{$black};
-  --#{$prefix}input-filter: #{$invert-filter};
-  --#{$prefix}icon-filter: none;
-  --#{$prefix}select-indicator: #{$form-select-indicator};
-  --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator};
+  --#{$prefix}form-check-filter: #{$invert-filter}; // Boosted mod
+  --#{$prefix}form-check-input-disabled-color: #{$gray-900}; // Boosted mod
+  --#{$prefix}form-color-disabled-filter: #{$form-color-disabled-filter}; // Boosted mod
+  --#{$prefix}form-select-indicator: #{$form-select-indicator}; // Boosted mod
+  --#{$prefix}form-select-disabled-indicator: #{$form-select-disabled-indicator}; // Boosted mod
+  --#{$prefix}form-switch-square-bg: #{$black}; // Boosted mod
+
+  // Boosted mod
+  // Table-specific styles
+  --#{$prefix}table-active-bg-factor: #{$table-active-bg-factor};
+  --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor};
   --#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor};
   --#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor};
-  --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor};
-  --#{$prefix}table-active-bg-factor: #{$table-active-bg-factor};
-  --#{$prefix}body-color-subtle: #{$gray-900};
-  // ******* End additions for dark-mode
+
+  // Breadcrumb-specific styles
+  --#{$prefix}breadcrumb-divider-filter: none;
+
+  // Navigation-specific styles
+  --#{$prefix}nav-link-active-color: #{$body-color};
+  // End mod
 }
 
 @if $enable-dark-mode {
@@ -230,8 +235,11 @@
     --#{$prefix}code-color: #{$code-color-dark};
     --#{$prefix}highlight-color: #{$mark-color-dark};
     --#{$prefix}highlight-bg: #{$mark-bg-dark};
+    --#{$prefix}disabled-color: var(--#{$prefix}tertiary-color); // Boosted mod
+    --#{$prefix}tertiary-active-bg: #{$gray-700}; // Boosted mod
 
     --#{$prefix}border-color: #{$border-color-dark};
+    --#{$prefix}border-color-subtle: #{$border-color-subtle-dark}; // Boosted mod
     --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
 
     --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color-dark}; // Boosted mod
@@ -243,25 +251,26 @@
     --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
     --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
     --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
+    --#{$prefix}form-check-filter: none; // Boosted mod
+    --#{$prefix}form-check-input-disabled-color: #{$gray-700}; // Boosted mod
+    --#{$prefix}form-select-indicator: #{$form-select-indicator-dark}; // Boosted mod
+    --#{$prefix}form-select-disabled-indicator: #{$form-select-disabled-indicator-dark}; // Boosted mod
+    --#{$prefix}form-color-disabled-filter: #{$form-color-disabled-filter-dark};
+    --#{$prefix}form-switch-square-bg: #{$gray-950}; // Boosted mod
+
+    // Boosted mod
+    // Table-specific styles
+    --#{$prefix}table-striped-bg-factor: .135;
+    --#{$prefix}table-striped-hover-bg-factor: .855;
+    --#{$prefix}table-hover-bg-factor: .135;
+    --#{$prefix}table-active-bg-factor: .565;
+
+    // Breadcrumb-specific styles
+    --#{$prefix}breadcrumb-divider-filter: #{$invert-filter};
 
-    // ******* Additions for dark-mode
-    --#{$prefix}hover-color: #{$brand-orange};
-    --#{$prefix}active-bg: #{$gray-700};
-    --#{$prefix}disabled-color: #{$gray-700};
-    --#{$prefix}disabled-filter: #{$disabled-filter-dark};
-    --#{$prefix}placeholder-color: #{$gray-600};
-    --#{$prefix}gray-tweak: #{$gray-700};
-    --#{$prefix}black-tweak: #{$gray-950};
-    --#{$prefix}input-filter: none;
-    --#{$prefix}icon-filter: #{$invert-filter};
-    --#{$prefix}select-indicator: #{$form-select-indicator-dark};
-    --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator-dark};
-    --#{$prefix}table-striped-bg-factor: .135; // .2 if solid bg
-    --#{$prefix}table-striped-hover-bg-factor: .855; // .865 if solid bg
-    --#{$prefix}table-hover-bg-factor: .135; // .2 if solid bg
-    --#{$prefix}table-active-bg-factor: .565; // .6 if solid bg
-    --#{$prefix}body-color-subtle: #{$gray-300};
-    // ******* End additions for dark-mode
+    // Navigation-specific styles
+    --#{$prefix}nav-link-active-color: #{$supporting-orange};
+    // End mod
     // scss-docs-end root-dark-mode-vars
   }
 }
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 9f680b8b69..9b301ecf49 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -680,7 +680,7 @@ $utilities: map-merge(
           "supporting-yellow": $supporting-yellow, // Boosted mod
           "supporting-pink": $supporting-pink, // Boosted mod
           "supporting-purple": $supporting-purple, // Boosted mod
-          "supporting-orange": $brand-orange, // Boosted mod
+          "supporting-orange": $supporting-orange, // Boosted mod
         )
       )
     ),
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index dbdb9803a1..7e70c25d20 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -8,22 +8,22 @@
 
 // Boosted mod
 // scss-docs-start brand-colors-dark
-$functional-green-dark:  #6c6 !default;
-$functional-blue-dark:   #69f !default;
+$functional-green-dark:  $ods-forest-100 !default;
+$functional-blue-dark:   $ods-water-100 !default;
 $functional-yellow-dark: $functional-yellow !default;
-$functional-red-dark:    #f66 !default;
+$functional-red-dark:    $ods-fire-100 !default;
 // scss-docs-end brand-colors-dark
 
 // scss-docs-start sass-dark-mode-vars
 // scss-docs-start theme-color-dark-variables
-$primary-dark:                      $brand-orange !default;
-$secondary-dark:                    $white !default;
-$success-dark:                      $functional-green-dark !default;
-$info-dark:                         $functional-blue-dark !default;
-$warning-dark:                      $functional-yellow-dark !default;
-$danger-dark:                       $functional-red-dark !default;
-$light-dark:                        $gray-500 !default;
-$dark-dark:                         $black !default;
+$primary-dark:    $supporting-orange !default;
+$secondary-dark:  $white !default;
+$success-dark:    $functional-green-dark !default;
+$info-dark:       $functional-blue-dark !default;
+$warning-dark:    $functional-yellow-dark !default;
+$danger-dark:     $functional-red-dark !default;
+$light-dark:      $gray-500 !default;
+$dark-dark:       $black !default;
 // scss-docs-end theme-color-dark-variables
 
 // scss-docs-start theme-colors-dark-map
@@ -75,23 +75,22 @@ $dark-border-subtle-dark:           $dark-dark !default; // Boosted mod: instead
 
 $body-color-dark:                   $white !default; // Boosted mod: instead of `$gray-300`
 $body-bg-dark:                      $gray-950 !default; // Boosted mod: instead of `$gray-900`
-$body-secondary-color-dark:         $gray-500 !default; // Boosted mod: instead of `rgba($body-color-dark, .75)`
+$body-secondary-color-dark:         $gray-600 !default; // Boosted mod: instead of `rgba($body-color-dark, .75)`
 $body-secondary-bg-dark:            $gray-900 !default; // Boosted mod: instead of `$gray-800`
-$body-tertiary-color-dark:          $gray-600 !default; // Boosted mod: instead of `rgba($body-color-dark, .5)`
+$body-tertiary-color-dark:          $gray-700 !default; // Boosted mod: instead of `rgba($body-color-dark, .5)`
 $body-tertiary-bg-dark:             $black !default; // Boosted mod: instead of `mix($gray-800, $gray-900, 50%)`
 $body-emphasis-color-dark:          $white !default; // Boosted mod: instead of `$gray-100`
 $border-color-dark:                 $white !default; // Boosted mod: instead of `$gray-700`
-$border-color-translucent-dark:     $gray-700 !default; // Boosted mod instead of `rgba($white, .15)`
+$border-color-subtle-dark:          $gray-700 !default; // Boosted mod
+$border-color-translucent-dark:     rgba($white, .15) !default;
 $headings-color-dark:               inherit !default;
 $link-color-dark:                   $white !default; // Boosted mod: instead of `tint-color($primary, 40%)`
-$link-hover-color-dark:             $brand-orange !default; // Boosted mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)`
-$code-color-dark:                   tint-color($code-color, 40%) !default;
+$link-hover-color-dark:             $supporting-orange !default; // Boosted mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)`
+$code-color-dark:                   $gray-600 !default; // Boosted mod: instead of `tint-color($code-color, 40%)`
 $mark-color-dark:                   $black !default; // Boosted mod: instead of `$body-color-dark`
 $mark-bg-dark:                      $white !default; // Boosted mod: instead of `$yellow-800`
 
-$focus-ring-color-dark:             rgba($brand-orange, $focus-ring-opacity) !default; // Boosted mod
-
-$disabled-filter-dark:  brightness(0) invert(1) brightness(.4) !default; // Boosted mod
+$focus-ring-color-dark:             rgba($supporting-orange, $focus-ring-opacity) !default; // Boosted mod
 
 $focus-visible-inner-color-dark:    $black !default; // Boosted mod
 $focus-visible-outer-color-dark:    $white !default; // Boosted mod
@@ -110,9 +109,11 @@ $svg-as-custom-props-dark: (
 // Forms
 //
 
+$form-color-disabled-filter-dark:  brightness(0) invert(1) brightness(.4) !default; // Boosted mod
+
 // Boosted mod: no $form-select-indicator-color-dark
-$form-select-indicator-dark:          escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#fff' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod: instead of Bootstrap svg
-$form-select-disabled-indicator-dark: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#999' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod
+$form-select-indicator-dark:          escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$white}' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod: instead of Bootstrap svg
+$form-select-disabled-indicator-dark: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$gray-600}' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod
 
 // Boosted mod: no $form-switch-color-dark
 // Boosted mod: no $form-switch-bg-image-dark
@@ -124,7 +125,6 @@ $form-invalid-color-dark:           var(--#{$prefix}danger-text-emphasis) !defau
 $form-invalid-border-color-dark:    var(--#{$prefix}danger) !default; // Boosted mod: instead of `$red-300`
 // scss-docs-end form-validation-colors-dark
 
-
 //
 // Accordion
 //
diff --git a/scss/_variables.scss b/scss/_variables.scss
index c07fff9c3c..9123126d9d 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1,3 +1,5 @@
+@import "color-palette";
+
 // Variables
 //
 // Variables should follow the `$component-state-property-size` formula for
@@ -6,18 +8,18 @@
 // Color system
 
 // scss-docs-start gray-color-variables
-$white:    #fff !default;
+$white:    $ods-white-100 !default;
 $gray-100: #fafafa !default;
 $gray-200: #f6f6f6 !default;
-$gray-300: #eee !default;
-$gray-400: #ddd !default;
-$gray-500: #ccc !default;
-$gray-600: #999 !default;
-$gray-700: #666 !default;
-$gray-800: #595959 !default;
-$gray-900: #333 !default;
-$gray-950: #141414 !default;
-$black:    #000 !default;
+$gray-300: $ods-gray-200 !default;
+$gray-400: $ods-gray-300 !default;
+$gray-500: $ods-gray-400 !default;
+$gray-600: $ods-gray-500 !default;
+$gray-700: $ods-gray-600 !default;
+$gray-800: $ods-gray-700 !default;
+$gray-900: $ods-gray-800 !default;
+$gray-950: $ods-gray-900 !default;
+$black:    $ods-black-900 !default;
 // scss-docs-end gray-color-variables
 
 // fusv-disable
@@ -39,20 +41,18 @@ $grays: (
 
 // Boosted mod
 // scss-docs-start brand-colors
-//// Core colors
-$accessible-orange: #f16e00 !default;
-$brand-orange:      #ff7900 !default;
 //// Functional colors
-$functional-green:  #228722 !default;
-$functional-blue:   #4170d8 !default;
-$functional-yellow: #fc0 !default;
-$functional-red:    #cd3c14 !default;
+$functional-green:  $ods-forest-200 !default;
+$functional-blue:   $ods-water-200 !default;
+$functional-yellow: $ods-sun-100 !default;
+$functional-red:    $ods-fire-200 !default;
 //// Supporting colors
-$supporting-blue:   #4bb4e6 !default;
-$supporting-yellow: #ffd200 !default;
-$supporting-green:  #50be87 !default;
-$supporting-purple: #a885d8 !default;
-$supporting-pink:   #ffb4e6 !default;
+$supporting-blue:   $ods-blue-300 !default;
+$supporting-yellow: $ods-yellow-300 !default;
+$supporting-green:  $ods-green-300 !default;
+$supporting-purple: $ods-purple-300 !default;
+$supporting-pink:   $ods-pink-300 !default;
+$supporting-orange: $ods-orange-100 !default;
 // scss-docs-end brand-colors
 // End mod
 
@@ -63,7 +63,7 @@ $indigo:  $supporting-purple !default;
 $purple:  $supporting-purple !default;
 $pink:    $supporting-pink !default;
 $red:     $functional-red !default;
-$orange:  $accessible-orange !default;
+$orange:  $ods-orange-200 !default;
 $yellow:  $functional-yellow !default;
 $green:   $functional-green !default;
 $teal:    $supporting-green !default;
@@ -108,35 +108,35 @@ $blue-700: shade-color($blue, 40%) !default;
 $blue-800: shade-color($blue, 60%) !default;
 $blue-900: shade-color($blue, 80%) !default;
 
-$indigo-100: tint-color($indigo, 80%) !default;
-$indigo-200: tint-color($indigo, 60%) !default;
-$indigo-300: tint-color($indigo, 40%) !default;
-$indigo-400: tint-color($indigo, 20%) !default;
-$indigo-500: $indigo !default;
-$indigo-600: shade-color($indigo, 20%) !default;
-$indigo-700: shade-color($indigo, 40%) !default;
-$indigo-800: shade-color($indigo, 60%) !default;
-$indigo-900: shade-color($indigo, 80%) !default;
-
-$purple-100: tint-color($purple, 80%) !default;
-$purple-200: tint-color($purple, 60%) !default;
-$purple-300: tint-color($purple, 40%) !default;
-$purple-400: tint-color($purple, 20%) !default;
-$purple-500: $purple !default;
-$purple-600: shade-color($purple, 20%) !default;
-$purple-700: shade-color($purple, 40%) !default;
-$purple-800: shade-color($purple, 60%) !default;
-$purple-900: shade-color($purple, 80%) !default;
-
-$pink-100: tint-color($pink, 80%) !default;
-$pink-200: tint-color($pink, 60%) !default;
-$pink-300: tint-color($pink, 40%) !default;
-$pink-400: tint-color($pink, 20%) !default;
-$pink-500: $pink !default;
-$pink-600: shade-color($pink, 20%) !default;
-$pink-700: shade-color($pink, 40%) !default;
-$pink-800: shade-color($pink, 60%) !default;
-$pink-900: shade-color($pink, 80%) !default;
+$indigo-100: $ods-purple-100 !default;
+$indigo-200: $ods-purple-200 !default;
+$indigo-300: $ods-purple-300 !default;
+$indigo-400: $ods-purple-400 !default;
+$indigo-500: $ods-purple-500 !default;
+$indigo-600: $ods-purple-600 !default;
+$indigo-700: shade-color($ods-purple-600, 20%) !default;
+$indigo-800: shade-color($ods-purple-600, 40%) !default;
+$indigo-900: shade-color($ods-purple-600, 60%) !default;
+
+$purple-100: $ods-purple-100 !default;
+$purple-200: $ods-purple-200 !default;
+$purple-300: $ods-purple-300 !default;
+$purple-400: $ods-purple-400 !default;
+$purple-500: $ods-purple-500 !default;
+$purple-600: $ods-purple-600 !default;
+$purple-700: shade-color($ods-purple-600, 20%) !default;
+$purple-800: shade-color($ods-purple-600, 40%) !default;
+$purple-900: shade-color($ods-purple-600, 60%) !default;
+
+$pink-100: $ods-pink-100 !default;
+$pink-200: $ods-pink-200 !default;
+$pink-300: $ods-pink-300 !default;
+$pink-400: $ods-pink-400 !default;
+$pink-500: $ods-pink-500 !default;
+$pink-600: $ods-pink-600 !default;
+$pink-700: shade-color($ods-pink-600, 20%) !default;
+$pink-800: shade-color($ods-pink-600, 40%) !default;
+$pink-900: shade-color($ods-pink-600, 60%) !default;
 
 $red-100: tint-color($red, 80%) !default;
 $red-200: tint-color($red, 60%) !default;
@@ -158,15 +158,15 @@ $orange-700: shade-color($orange, 40%) !default;
 $orange-800: shade-color($orange, 60%) !default;
 $orange-900: shade-color($orange, 80%) !default;
 
-$yellow-100: tint-color($yellow, 80%) !default;
-$yellow-200: tint-color($yellow, 60%) !default;
-$yellow-300: tint-color($yellow, 40%) !default;
-$yellow-400: tint-color($yellow, 20%) !default;
-$yellow-500: $yellow !default;
-$yellow-600: shade-color($yellow, 20%) !default;
-$yellow-700: shade-color($yellow, 40%) !default;
-$yellow-800: shade-color($yellow, 60%) !default;
-$yellow-900: shade-color($yellow, 80%) !default;
+$yellow-100: $ods-yellow-100 !default;
+$yellow-200: $ods-yellow-200 !default;
+$yellow-300: $ods-yellow-300 !default;
+$yellow-400: $ods-yellow-400 !default;
+$yellow-500: $ods-yellow-500 !default;
+$yellow-600: $ods-yellow-600 !default;
+$yellow-700: shade-color($ods-yellow-600, 20%) !default;
+$yellow-800: shade-color($ods-yellow-600, 40%) !default;
+$yellow-900: shade-color($ods-yellow-600, 60%) !default;
 
 $green-100: tint-color($green, 80%) !default;
 $green-200: tint-color($green, 60%) !default;
@@ -178,25 +178,25 @@ $green-700: shade-color($green, 40%) !default;
 $green-800: shade-color($green, 60%) !default;
 $green-900: shade-color($green, 80%) !default;
 
-$teal-100: tint-color($teal, 80%) !default;
-$teal-200: tint-color($teal, 60%) !default;
-$teal-300: tint-color($teal, 40%) !default;
-$teal-400: tint-color($teal, 20%) !default;
-$teal-500: $teal !default;
-$teal-600: shade-color($teal, 20%) !default;
-$teal-700: shade-color($teal, 40%) !default;
-$teal-800: shade-color($teal, 60%) !default;
-$teal-900: shade-color($teal, 80%) !default;
-
-$cyan-100: tint-color($cyan, 80%) !default;
-$cyan-200: tint-color($cyan, 60%) !default;
-$cyan-300: tint-color($cyan, 40%) !default;
-$cyan-400: tint-color($cyan, 20%) !default;
-$cyan-500: $cyan !default;
-$cyan-600: shade-color($cyan, 20%) !default;
-$cyan-700: shade-color($cyan, 40%) !default;
-$cyan-800: shade-color($cyan, 60%) !default;
-$cyan-900: shade-color($cyan, 80%) !default;
+$teal-100: $ods-green-100 !default;
+$teal-200: $ods-green-200 !default;
+$teal-300: $ods-green-300 !default;
+$teal-400: $ods-green-400 !default;
+$teal-500: $ods-green-500 !default;
+$teal-600: $ods-green-600 !default;
+$teal-700: shade-color($ods-green-600, 20%) !default;
+$teal-800: shade-color($ods-green-600, 40%) !default;
+$teal-900: shade-color($ods-green-600, 60%) !default;
+
+$cyan-100: $ods-blue-100 !default;
+$cyan-200: $ods-blue-200 !default;
+$cyan-300: $ods-blue-300 !default;
+$cyan-400: $ods-blue-400 !default;
+$cyan-500: $ods-blue-500 !default;
+$cyan-600: $ods-blue-600 !default;
+$cyan-700: shade-color($ods-blue-600, 20%) !default;
+$cyan-800: shade-color($ods-blue-600, 40%) !default;
+$cyan-900: shade-color($ods-blue-600, 60%) !default;
 
 $blues: (
   "blue-100": $blue-100,
@@ -396,7 +396,7 @@ $burger-icon-small:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
 $success-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{$success}' d='M62.5 0a62.5 62.5 0 1 0 0 125 62.5 62.5 0 0 0 0-125zm28 29.4c3.3 0 6 2.6 6 5.9a5.9 5.9 0 0 1-1.3 3.7L57.7 86a5.8 5.8 0 0 1-9.1 0L29.8 62.5c-.8-1-1.2-2.3-1.2-3.7a5.9 5.9 0 0 1 1.7-4.1l2.3-2.4a5.8 5.8 0 0 1 4.2-1.7 5.8 5.8 0 0 1 3.8 1.4L52 64.7 86.6 31a5.8 5.8 0 0 1 4-1.6z'/></svg>") !default;
 $info-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{$info}' d='M62.5 0a62.5 62.5 0 1 0 0 125 62.5 62.5 0 0 0 0-125zm0 14.7a11 11 0 1 1 0 22 11 11 0 0 1 0-22zM47.8 44.1h25.7v46.2c0 4.7 1.3 6.5 1.8 7.2.8 1 2.3 1.5 4.8 1.6h.8v3.8H47.8v-3.7h.8c2.3-.1 4-.8 5-2 .4-.4 1-2 1-7V57c0-4.8-.6-6.6-1.2-7.3-.8-1-2.4-1.5-4.9-1.6h-.7V44z'/></svg>") !default;
 $warning-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='75 125 850 750'><path fill='#{$warning}' fill-rule='evenodd' d='M828.111 875H170.889A93.71 93.71 0 0 1 89.8 734.017l-.008-.005.772-1.321.036-.062 327.8-561.117h.008a93.94 93.94 0 0 1 162.182 0h.008l328.612 562.5-.009.005A93.709 93.709 0 0 1 828.111 875ZM500.5 775a47.5 47.5 0 1 1 47.507-47.5A47.5 47.5 0 0 1 500.5 775Zm47.368-424.038-15.7 258.121c-.009 17.482-14.185 24.05-31.671 24.05s-31.662-6.568-31.671-24.05l-15.74-258.716c-.057-.949-.094-1.9-.094-2.867a47.507 47.507 0 0 1 95.014 0 47.782 47.782 0 0 1-.138 3.462Z'/></svg>") !default;
-$warning-icon-filled:   url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='75 125 850 750'><path fill='#{$warning}' d='M828.111 875H170.889A93.71 93.71 0 0 1 89.8 734.017l-.008-.005.772-1.321.036-.062 327.8-561.117h.008a93.94 93.94 0 0 1 162.182 0h.008l328.612 562.5-.009.005A93.709 93.709 0 0 1 828.111 875Z'/><path fill='#000' d='M500.5 775a47.5 47.5 0 1 1 47.507-47.5A47.5 47.5 0 0 1 500.5 775Zm47.368-424.038-15.7 258.121c-.009 17.482-14.185 24.05-31.671 24.05s-31.662-6.568-31.671-24.05l-15.74-258.716c-.057-.949-.094-1.9-.094-2.867a47.507 47.507 0 0 1 95.014 0 47.782 47.782 0 0 1-.138 3.462Z'/></svg>") !default;
+$warning-icon-filled:   url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='75 125 850 750'><path fill='#{$warning}' d='M828.111 875H170.889A93.71 93.71 0 0 1 89.8 734.017l-.008-.005.772-1.321.036-.062 327.8-561.117h.008a93.94 93.94 0 0 1 162.182 0h.008l328.612 562.5-.009.005A93.709 93.709 0 0 1 828.111 875Z'/><path fill='#{$black}' d='M500.5 775a47.5 47.5 0 1 1 47.507-47.5A47.5 47.5 0 0 1 500.5 775Zm47.368-424.038-15.7 258.121c-.009 17.482-14.185 24.05-31.671 24.05s-31.662-6.568-31.671-24.05l-15.74-258.716c-.057-.949-.094-1.9-.094-2.867a47.507 47.507 0 0 1 95.014 0 47.782 47.782 0 0 1-.138 3.462Z'/></svg>") !default;
 $danger-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 125'><path fill='#{$danger}' d='M70.3 0c-5.8 0-10.8 3.1-13.5 7.8L2.3 101.3l-.2.2A15.6 15.6 0 0 0 15.6 125H125a15.6 15.6 0 0 0 13.5-23.5L83.8 7.8A15.6 15.6 0 0 0 70.3 0zm19.2 50a6.4 6.4 0 0 1 4.4 1.9 6.4 6.4 0 0 1 0 9L79.4 75.6l15 15a6.4 6.4 0 0 1 0 9.2 6.4 6.4 0 0 1-4.5 1.9 6.4 6.4 0 0 1-4.6-2l-15-15-15 15a6.4 6.4 0 0 1-4.6 2 6.4 6.4 0 0 1-4.6-2 6.4 6.4 0 0 1 0-9l15-15L46.8 61a6.4 6.4 0 1 1 9-9.1l14.6 14.5L84.8 52a6.4 6.4 0 0 1 4.7-1.9z'/></svg>") !default;
 $add-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path fill='currentColor' d='M14 6H8V0H6v6H0v2h6v6h2V8h6V6z'/></svg>") !default;
 $remove-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 2'><path fill='currentColor' d='M0 0h14v2H0z'/></svg>") !default;
@@ -421,8 +421,6 @@ $invert-filter:         invert(1) !default;
 // fusv-disable
 $orange-filter:         invert(46%) sepia(60%) saturate(2878%) hue-rotate(6deg) brightness(98%) contrast(104%) !default; // Deprecated in v5.3.3
 // fusv-enable
-
-$disabled-filter:       brightness(0) invert(1) brightness(.8) !default;
 // End mod
 
 // Options
@@ -511,7 +509,7 @@ $body-bg:                   $white !default;
 $body-secondary-color:      $gray-700 !default; // Boosted mod: instead of `rgba($body-color, .75)`
 $body-secondary-bg:         $gray-300 !default; // Boosted mod: instead of `$gray-200`
 
-$body-tertiary-color:       rgba($body-color, .5) !default;
+$body-tertiary-color:       $gray-500 !default; // Boosted mod: instead of `rgba($body-color, .5)`
 $body-tertiary-bg:          $gray-100 !default;
 
 $body-emphasis-color:       $black !default;
@@ -523,7 +521,7 @@ $body-emphasis-color:       $black !default;
 $link-color:                              $black !default; // Boosted mod
 $link-decoration:                         underline !default;
 $link-shade-percentage:                   20% !default;
-$link-hover-color:                        $accessible-orange !default; // Boosted mod
+$link-hover-color:                        $primary !default; // Boosted mod
 $link-hover-decoration:                   null !default;
 
 $stretched-link-pseudo-element:           after !default;
@@ -631,7 +629,8 @@ $border-widths: (
 ) !default;
 $border-style:                solid !default;
 $border-color:                $black !default; // Boosted mod: instead of `$gray-300`
-$border-color-translucent:    $gray-500 !default; // Boosted mod: gray value instead of rgba($black, .175)
+$border-color-subtle:         $gray-500 !default; // Boosted mod
+$border-color-translucent:    rgba($black, .175) !default;
 // scss-docs-end border-variables
 
 // scss-docs-start border-radius-variables
@@ -670,7 +669,7 @@ $box-shadow-inset:  null !default; // Boosted mod: instead of `inset 0 1px 2px r
 // scss-docs-end box-shadow-variables
 
 $component-active-color:      $black !default;
-$component-active-bg:         $brand-orange !default;
+$component-active-bg:         $supporting-orange !default;
 
 // scss-docs-start focus-ring-variables
 $focus-ring-width:      .25rem !default;
@@ -832,7 +831,7 @@ $initialism-font-size:        $small-font-size !default;
 
 $blockquote-margin-y:         $spacer !default;
 $blockquote-font-size:        $font-size-xlg !default;
-$blockquote-footer-color:     var(--#{$prefix}placeholder-color) !default; // Boosted mod: instead of `$gray-600`
+$blockquote-footer-color:     var(--#{$prefix}secondary-color) !default; // Boosted mod: instead of `$gray-600`
 $blockquote-footer-font-size: $small-font-size !default;
 $blockquote-line-height:      1.5 !default; // Boosted mod
 $blockquote-letter-spacing:   $letter-spacing-base * .25 !default; // Boosted mod
@@ -910,7 +909,7 @@ $table-variant-hover-bg-factor:         .2 !default; // Boosted mod
 $table-border-factor:                   .4 !default; // Boosted mod
 // stylelint-disable-next-line function-disallowed-list
 $table-border-width:                    calc(var(--#{$prefix}border-width) * .5) !default;  // Boosted mod
-$table-border-color:                    var(--#{$prefix}border-color-translucent) !default; // Boosted mod
+$table-border-color:                    var(--#{$prefix}border-color-subtle) !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 
 $table-striped-order:                   odd !default;
 $table-striped-columns-order:           even !default;
@@ -987,10 +986,10 @@ $btn-letter-spacing-lg:       $letter-spacing-base * 2 !default; // Boosted mod
 $btn-border-width:            $input-btn-border-width !default;
 
 $btn-default-hover-bg:        var(--#{$prefix}highlight-bg) !default; // Boosted mod
-$btn-default-hover-border:    var(--#{$prefix}highlight-bg) !default; // Boosted mod
+$btn-default-hover-border:    var(--#{$prefix}border-color) !default; // Boosted mod
 $btn-default-hover-color:     var(--#{$prefix}highlight-color) !default; // Boosted mod
-$btn-default-active-bg:       $brand-orange !default; // Boosted mod
-$btn-default-active-border:   $brand-orange !default; // Boosted mod
+$btn-default-active-bg:       $supporting-orange !default; // Boosted mod
+$btn-default-active-border:   $supporting-orange !default; // Boosted mod
 $btn-default-active-color:    $black !default; // Boosted mod
 $btn-default-disabled-bg:     var(--#{$prefix}disabled-color) !default; // Boosted mod
 $btn-default-disabled-border: var(--#{$prefix}disabled-color) !default; // Boosted mod
@@ -999,8 +998,8 @@ $btn-default-disabled-color:  var(--#{$prefix}highlight-color) !default; // Boos
 $btn-outline-default-hover-bg:        var(--#{$prefix}btn-color) !default; // Boosted mod
 $btn-outline-default-hover-border:    var(--#{$prefix}btn-border-color) !default; // Boosted mod
 $btn-outline-default-hover-color:     $white !default; // Boosted mod
-$btn-outline-default-active-bg:       $brand-orange !default; // Boosted mod
-$btn-outline-default-active-border:   $brand-orange !default; // Boosted mod
+$btn-outline-default-active-bg:       $supporting-orange !default; // Boosted mod
+$btn-outline-default-active-border:   $supporting-orange !default; // Boosted mod
 $btn-outline-default-active-color:    $black !default; // Boosted mod
 $btn-outline-default-disabled-bg:     transparent !default; // Boosted mod
 $btn-outline-default-disabled-border: var(--#{$prefix}disabled-color) !default; // Boosted mod
@@ -1058,7 +1057,7 @@ $btn-social-networks: (
     "icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M27.3 4.7a15.9 15.9 0 00-25 19.1L.1 32l8.4-2.2A15.9 15.9 0 0027.3 4.7zM16 29c-2.4 0-4.7-.6-6.7-1.8l-.5-.3-5 1.3 1.3-4.8-.3-.5A13.2 13.2 0 1116.1 29zm7.2-9.8l-2.7-1.3c-.3-.1-.6-.2-1 .2l-1.2 1.5c-.2.3-.4.3-.8.1s-1.7-.6-3.2-2c-1.2-1-2-2.3-2.2-2.7s0-.6.2-.8l.6-.7.4-.6v-.7l-1.3-3c-.3-.7-.6-.6-.9-.7h-.7c-.2 0-.7.1-1.1.5C9 9.4 8 10.4 8 12.3s1.4 3.9 1.6 4.1c.2.3 2.8 4.3 6.8 6l2.3.9c.9.3 1.8.2 2.4.1.8-.1 2.4-1 2.7-1.9s.4-1.7.3-1.9l-.8-.4z'/></svg>"
   ),
   "mail": (
-    "color": $brand-orange,
+    "color": $supporting-orange,
     "icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M3.2 14.3c0 9.5 0 9 .2 9.5.3.8 1 1.4 1.7 1.7l12.2.1h11.5v-8.8c0-9.3 0-8.9-.2-9.3-.2-.7-.7-1.2-1.3-1.6l-.8-.3H3.2v8.7zm22.9-2.4a246.2 246.2 0 01-4.9 4.7l-.8.7-.5.6-.7.6c-.6.6-1 .9-1.3 1a4 4 0 01-1.8.5 4 4 0 01-2.4-.6 13 13 0 01-1.9-1.7l-2.4-2.4-.6-.6-1.4-1.3L6.1 12l-.5-.5V8.9l.6.5L7.9 11l1.4 1.4 1.3 1.2 1.3 1.3a195 195 0 012.6 2.4c.4.3 1 .5 1.6.4.5 0 1-.1 1.4-.4L19 16l1-1 1-1a214.7 214.7 0 012.2-2l1-1 2-2 .2-.2v2.8l-.3.3z'/></svg>",
     "size": 1.5rem
   ),
@@ -1087,7 +1086,7 @@ $form-text-font-size:                   $small-font-size !default;
 $form-text-font-style:                  null !default;
 $form-text-font-weight:                 $font-weight-bold !default; // Boosted mod: instead of `null`
 $form-text-line-height:                 $line-height-sm !default; // Boosted mod
-$form-text-color:                       var(--#{$prefix}placeholder-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
+$form-text-color:                       var(--#{$prefix}secondary-color) !default;
 // scss-docs-end form-text-variables
 
 // scss-docs-start form-label-variables
@@ -1098,7 +1097,7 @@ $form-label-font-weight:                $font-weight-bold !default;
 $form-label-color:                      null !default;
 $form-label-disabled-color:             var(--#{$prefix}disabled-color) !default; // Boosted mod
 $form-label-required-margin-left:       .1875rem !default; // Boosted mod
-$form-label-required-color:             var(--#{$prefix}link-hover-color) !default; // Boosted mod
+$form-label-required-color:             var(--#{$prefix}primary) !default; // Boosted mod
 // scss-docs-end form-label-variables
 
 // scss-docs-start form-helper-variables
@@ -1126,12 +1125,12 @@ $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
 $input-font-size-lg:                    $input-btn-font-size-lg !default;
 
 $input-bg:                              var(--#{$prefix}body-bg) !default;
-$input-disabled-color:                  var(--#{$prefix}placeholder-color) !default; // Boosted mod
+$input-disabled-color:                  var(--#{$prefix}secondary-color) !default; // Boosted mod
 $input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
 $input-disabled-border-color:           null !default;
 
 $input-color:                           null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
-$input-border-color:                    var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of var(--#{$prefix}border-color)
+$input-border-color:                    var(--#{$prefix}border-color-subtle) !default; // Boosted mod: instead of var(--#{$prefix}border-color)
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      none !default; // Boosted mod
 
@@ -1145,7 +1144,7 @@ $input-focus-color:                     $input-color !default;
 $input-focus-width:                     $input-btn-focus-width !default;
 $input-focus-box-shadow:                none !default; // Boosted mod
 
-$input-placeholder-color:               var(--#{$prefix}placeholder-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
+$input-placeholder-color:               var(--#{$prefix}secondary-color) !default;
 $input-plaintext-color:                 null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 
 // Boosted mod: no $input-height-border
@@ -1166,7 +1165,8 @@ $form-color-border-color:               var(--#{$prefix}emphasis-color) !default
 $form-color-hover-bg-color:             var(--#{$prefix}emphasis-color) !default; // Boosted mod
 $form-color-disabled-bg-color:          $input-bg !default; // Boosted mod
 $form-color-disabled-border-color:      var(--#{$prefix}disabled-color) !default; // Boosted mod
-$form-color-disabled-background-swatch: var(--#{$prefix}disabled-filter) !default; // Boosted mod
+$form-color-disabled-background-swatch: var(--#{$prefix}form-color-disabled-filter) !default; // Boosted mod
+$form-color-disabled-filter:            brightness(0) invert(1) brightness(.8) !default; // Boosted mod
 // scss-docs-end form-input-variables
 
 // scss-docs-start form-check-variables
@@ -1193,8 +1193,8 @@ $form-check-input-checked-color:          $component-active-color !default;
 $form-check-input-checked-bg-color:       $component-active-bg !default;
 $form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
 $form-check-input-checked-bg-image:       var(--#{$prefix}check-icon) !default;
-$form-check-input-disabled-color:         var(--#{$prefix}gray-tweak) !default; // Boosted mod
-$form-check-input-disabled-filter:        var(--#{$prefix}input-filter) !default; // Boosted mod
+$form-check-input-disabled-color:         var(--#{$prefix}form-check-input-disabled-color) !default; // Boosted mod
+$form-check-input-disabled-filter:        var(--#{$prefix}form-check-filter) !default; // Boosted mod
 $form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
 
 $form-check-input-indeterminate-color:          $form-check-input-checked-color !default;
@@ -1213,15 +1213,15 @@ $form-star-size:                        1.5625rem !default;
 $form-star-size-sm:                     1.25rem !default;
 $form-star-margin-between:              -.125rem !default;
 
-$form-star-rating-checked-color:        var(--#{$prefix}link-hover-color) !default;
+$form-star-rating-checked-color:        var(--#{$prefix}primary) !default;
 $form-star-rating-unchecked-color:      var(--#{$prefix}secondary-color) !default;
 $form-star-rating-hover-color:          var(--#{$prefix}highlight-bg) !default;
 $form-star-rating-disabled-color:       var(--#{$prefix}disabled-color) !default;
 
-$form-star-rating-checked-icon:         escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path fill='#000' stroke='#000' d='m12.5 4.523 2.016 6.227 6.542-.005-5.296 3.843 2.027 6.224L12.5 16.96l-5.289 3.852 2.027-6.224-5.296-3.843 6.542.005L12.5 4.523Z'/></svg>")) !default;
-$form-star-rating-unchecked-icon:       escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path fill='transparent' stroke='#000' d='m12.5 4.523 2.016 6.227 6.542-.005-5.296 3.843 2.027 6.224L12.5 16.96l-5.289 3.852 2.027-6.224-5.296-3.843 6.542.005L12.5 4.523Z'/></svg>")) !default;
-$form-star-rating-sm-checked-icon:      escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#000' stroke='#000' d='M10 3.943 11.54 8.7l4.998-.004-4.046 2.936 1.548 4.755L10 13.444l-4.04 2.943 1.548-4.755-4.046-2.936L8.46 8.7 10 3.943Z'/></svg>")) !default;
-$form-star-rating-sm-unchecked-icon:    escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='transparent' stroke='#000' d='M10 3.943 11.54 8.7l4.998-.004-4.046 2.936 1.548 4.755L10 13.444l-4.04 2.943 1.548-4.755-4.046-2.936L8.46 8.7 10 3.943Z'/></svg>")) !default;
+$form-star-rating-checked-icon:         escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path fill='#{$black}' stroke='#{$black}' d='m12.5 4.523 2.016 6.227 6.542-.005-5.296 3.843 2.027 6.224L12.5 16.96l-5.289 3.852 2.027-6.224-5.296-3.843 6.542.005L12.5 4.523Z'/></svg>")) !default;
+$form-star-rating-unchecked-icon:       escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path fill='transparent' stroke='#{$black}' d='m12.5 4.523 2.016 6.227 6.542-.005-5.296 3.843 2.027 6.224L12.5 16.96l-5.289 3.852 2.027-6.224-5.296-3.843 6.542.005L12.5 4.523Z'/></svg>")) !default;
+$form-star-rating-sm-checked-icon:      escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#{$black}' stroke='#{$black}' d='M10 3.943 11.54 8.7l4.998-.004-4.046 2.936 1.548 4.755L10 13.444l-4.04 2.943 1.548-4.755-4.046-2.936L8.46 8.7 10 3.943Z'/></svg>")) !default;
+$form-star-rating-sm-unchecked-icon:    escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='transparent' stroke='#{$black}' d='M10 3.943 11.54 8.7l4.998-.004-4.046 2.936 1.548 4.755L10 13.444l-4.04 2.943 1.548-4.755-4.046-2.936L8.46 8.7 10 3.943Z'/></svg>")) !default;
 //fusv-disable
 $form-star-focus-color:                 $black !default; // Deprecated in v5.2.3
 $form-star-focus-outline:               var(--#{$prefix}border-width) solid $form-star-focus-color !default; // Deprecated in v5.2.3
@@ -1244,10 +1244,10 @@ $form-switch-bg-square-size:      add(1rem, $spacer * .5) !default;  // Boosted
 $form-switch-border-radius:       null !default; // Boosted mod
 $form-switch-transition:          background-position .15s ease-in-out, $transition-focus !default; // Boosted mod
 
-$form-switch-square-bg:             var(--#{$prefix}black-tweak) !default; // Boosted mod
+$form-switch-square-bg:             var(--#{$prefix}form-switch-square-bg) !default; // Boosted mod
 $form-switch-bg:                    $white !default; // Boosted mod
 $form-switch-border-color:          $white !default; // Boosted mod
-$form-switch-filter:                var(--#{$prefix}input-filter) !default; // Boosted mod
+$form-switch-filter:                var(--#{$prefix}form-check-filter) !default; // Boosted mod
 $form-switch-focus-visible-inner:   $black !default; // Boosted mod
 $form-switch-focus-visible-outer:   $white !default; // Boosted mod
 
@@ -1261,8 +1261,8 @@ $form-switch-checked-bg-size:     add(map-get($spacers, 2), map-get($spacers, 1)
 $form-switch-checked-bg-position: calc(var(--#{$prefix}border-width) * 3) 50% !default; // Boosted mod
 
 $form-switch-checked-square-bg:     var(--#{$prefix}body-bg) !default; // Boosted mod
-$form-switch-checked-bg:            $brand-orange !default; // Boosted mod
-$form-switch-checked-border-color:  $brand-orange !default; // Boosted mod
+$form-switch-checked-bg:            $supporting-orange !default; // Boosted mod
+$form-switch-checked-border-color:  $supporting-orange !default; // Boosted mod
 $form-switch-checked-filter:        none !default; // Boosted mod
 $form-switch-checked-focus-inner:   var(--#{$prefix}focus-visible-inner-color) !default; // Boosted mod
 $form-switch-checked-focus-outer:   var(--#{$prefix}focus-visible-outer-color) !default; // Boosted mod
@@ -1293,7 +1293,7 @@ $form-select-disabled-border-color: $input-disabled-border-color !default;
 $form-select-bg-position:           right $form-select-padding-x top add(50%, 1px) !default;
 $form-select-bg-size:               .875rem 1rem !default; // In pixels because image dimensions
 $form-select-indicator:             escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod: instead of Bootstrap svg
-$form-select-disabled-indicator:    escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#666' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod
+$form-select-disabled-indicator:    escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$gray-700}' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod
 
 $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
 $form-select-feedback-icon-position:    center right $form-select-indicator-padding !default;
@@ -1326,21 +1326,21 @@ $form-range-track-width:          100% !default;
 $form-range-track-height:         .375rem !default; // Boosted mod: instead of `.5rem`
 $form-range-track-cursor:         pointer !default;
 $form-range-track-bg:             var(--#{$prefix}secondary-bg) !default;
-$form-range-track-filled-bg:      var(--#{$prefix}link-hover-color) !default; // Boosted mod
+$form-range-track-filled-bg:      var(--#{$prefix}primary) !default; // Boosted mod
 $form-range-track-border-radius:  null !default; // Boosted mod: instead of `1rem`
 $form-range-track-box-shadow:     var(--#{$prefix}box-shadow-inset) !default;
 
 $form-range-thumb-width:                   1rem !default;
 $form-range-thumb-height:                  $form-range-thumb-width !default;
 $form-range-thumb-bg:                      var(--#{$prefix}body-bg) !default; // Boosted mod: instead of `$component-active-bg`
-$form-range-thumb-border:                  var(--#{$prefix}border-width) solid var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `0`
+$form-range-thumb-border:                  var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default; // Boosted mod: instead of `0`
 $form-range-thumb-border-radius:           50% !default;
 $form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
 $form-range-thumb-focus-box-shadow:        null !default; // Boosted mod
 $form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
 $form-range-thumb-hover-bg:                var(--#{$prefix}highlight-bg) !default; // Boosted mod
-$form-range-thumb-active-bg:               var(--#{$prefix}link-hover-color) !default; // Boosted mod: instead of `tint-color($component-active-bg, 70%)`
-$form-range-thumb-active-border:           var(--#{$prefix}link-hover-color) !default; // Boosted mod
+$form-range-thumb-active-bg:               var(--#{$prefix}primary) !default; // Boosted mod: instead of `tint-color($component-active-bg, 70%)`
+$form-range-thumb-active-border:           var(--#{$prefix}primary) !default; // Boosted mod
 $form-range-thumb-disabled-bg:             var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $form-range-thumb-transition:              background-color $transition-duration $transition-timing, border-color $transition-duration $transition-timing !default; // Boosted mod: no box shadow
 // scss-docs-end form-range-variables
@@ -1448,7 +1448,7 @@ $nav-tabs-border-radius:            var(--#{$prefix}border-radius) !default;
 $nav-tabs-link-padding-x:           1.8125rem !default; // Boosted mod
 $nav-tabs-link-hover-color:         var(--#{$prefix}highlight-color) !default; // Boosted mod
 $nav-tabs-link-hover-bg:            var(--#{$prefix}highlight-bg) !default; // Boosted mod
-$nav-tabs-link-hover-border-color:  var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color`
+$nav-tabs-link-hover-border-color:  var(--#{$prefix}border-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color`
 $nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color) !default;
 $nav-tabs-link-active-bg:           var(--#{$prefix}body-bg) !default;
 $nav-tabs-link-active-border-color: $nav-tabs-link-active-color !default; // Boosted mod: instead of `var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg`
@@ -1462,15 +1462,15 @@ $nav-underline-gap:                       0 !default; // Boosted mod: instead of
 $nav-underline-gap-lg:                    $spacer * .5 !default; // Boosted mod
 // stylelint-disable-next-line function-disallowed-list
 $nav-underline-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod: instead of `.125rem`
-$nav-underline-border-color:              var(--#{$prefix}border-color-translucent) !default; // Boosted mod
+$nav-underline-border-color:              var(--#{$prefix}border-color-subtle) !default; // Boosted mod
 $nav-underline-border-radius:             var(--#{$prefix}border-radius) !default; // Boosted mod
-$nav-underline-link-active-color:         var(--#{$prefix}hover-color) !default; // Boosted mod instead of `var(--#{$prefix}emphasis-color)`
+$nav-underline-link-active-color:         var(--#{$prefix}nav-link-active-color) !default; // Boosted mod instead of `var(--#{$prefix}emphasis-color)`
 $nav-underline-link-padding-x:            1.8125rem !default; // Boosted mod
 $nav-underline-link-hover-color:          var(--#{$prefix}link-hover-color) !default; // Boosted mod
 // stylelint-disable-next-line function-disallowed-list
 $nav-underline-link-border-width:         0 0 calc(var(--#{$prefix}nav-underline-border-width) * 4) !default; // Boosted mod
 $nav-underline-link-active-bg:            transparent !default; // Boosted mod
-$nav-underline-link-active-border-color:  var(--#{$prefix}link-hover-color) !default; // Boosted mod
+$nav-underline-link-active-border-color:  var(--#{$prefix}primary) !default; // Boosted mod
 // scss-docs-end nav-variables
 
 
@@ -1502,7 +1502,7 @@ $navbar-toggler-transition:           $transition-focus !default; // Boosted mod
 $navbar-light-color:                  var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .65)`
 $navbar-light-bg:                     var(--#{$prefix}highlight-color) !default; // Boosted mod
 $navbar-light-hover-color:            var(--#{$prefix}link-hover-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .8)`
-$navbar-light-active-color:           var(--#{$prefix}link-hover-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), 1)`
+$navbar-light-active-color:           var(--#{$prefix}primary) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), 1)`
 $navbar-light-disabled-color:         var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .3)`
 $navbar-light-icon-color:             var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `rgba($body-color, .75)`
 $navbar-light-icon-hover-color:       var(--#{$prefix}link-hover-color) !default; // Boosted mod
@@ -1523,7 +1523,7 @@ $navbar-brand-logo-transition:              width $navbar-transition-duration $n
 $navbar-active-transition:                  bottom $navbar-transition-duration $navbar-transition-timing-function !default;
 
 $navbar-border-width:                       calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list
-$navbar-border-color:                       var(--#{$prefix}border-color-translucent) !default;
+$navbar-border-color:                       var(--#{$prefix}border-color-subtle) !default;
 
 $navbar-brand-margin-y-xs:                  $spacer * .5 !default;
 $navbar-brand-logo-size-xs:                 $spacer * 1.5 !default;
@@ -1564,8 +1564,8 @@ $navbar-badge-margin-top:                   .375rem !default;
 
 $navbar-dark-border-color:          $gray-700 !default; // Boosted mod
 $navbar-dark-color:                 $white !default; // Boosted mod: instead of `rgba($white, .55)`
-$navbar-dark-hover-color:           $brand-orange !default; // Boosted mod: instead of `rgba($white, .75)`
-$navbar-dark-active-color:          $brand-orange !default; // Boosted mod: instead of `$white`
+$navbar-dark-hover-color:           $supporting-orange !default; // Boosted mod: instead of `rgba($white, .75)`
+$navbar-dark-active-color:          $supporting-orange !default; // Boosted mod: instead of `$white`
 $navbar-dark-disabled-color:        $gray-700 !default; // Boosted mod: instead of `rgba($white, .25)`
 // Boosted mod: no $navbar-dark-icon-color
 // Boosted mod: no $navbar-dark-toggler-icon-bg since dark toggler are handled with filter
@@ -1587,7 +1587,7 @@ $dropdown-font-size:                $font-size-base !default;
 $dropdown-line-height:              $line-height-base !default; // Boosted mod
 $dropdown-color:                    var(--#{$prefix}body-color) !default;
 $dropdown-bg:                       var(--#{$prefix}body-bg) !default;
-$dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
+$dropdown-border-color:             var(--#{$prefix}border-color-subtle) !default; // Boosted mod: instead of `var(--#{$prefix}border-color-translucent)`
 $dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
 $dropdown-border-width:             var(--#{$prefix}border-width) !default;
 $dropdown-inner-border-radius:      0 !default; // Boosted mod: instead of `calc(#{$dropdown-border-radius} - #{$dropdown-border-width})`
@@ -1597,7 +1597,7 @@ $dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
 
 $dropdown-link-color:               null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $dropdown-link-hover-color:         $dropdown-link-color !default;
-$dropdown-link-hover-bg:            var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
+$dropdown-link-hover-bg:            var(--#{$prefix}tertiary-color) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
 
 $dropdown-link-active-color:        var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `$component-active-color`
 $dropdown-link-active-bg:           var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `$component-active-bg`
@@ -1657,8 +1657,8 @@ $pagination-focus-box-shadow:       0 0 0 $focus-visible-inner-width var(--#{$pr
 $pagination-focus-outline:          null !default; // Boosted mod
 // fusv-enable
 
-$pagination-hover-color:            var(--#{$prefix}link-color) !default; // Boosted mod: instead of `var(--#{$prefix}link-hover-color)`
-$pagination-hover-bg:               var(--#{$prefix}active-bg) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
+$pagination-hover-color:            var(--#{$prefix}body-color) !default; // Boosted mod: instead of `var(--#{$prefix}link-hover-color)`
+$pagination-hover-bg:               var(--#{$prefix}tertiary-active-bg) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
 $pagination-hover-border-color:     $pagination-hover-bg !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 
 $pagination-active-color:           var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `$component-active-color`
@@ -1681,7 +1681,7 @@ $pagination-icon-size:              subtract($spacer * 2, calc(var(--#{$prefix}b
 $pagination-icon-width:             add(.5rem, 1px) !default;
 $pagination-icon-height:            subtract(1rem, 1px) !default;
 
-$pagination-active-item-bg:         $brand-orange !default;
+$pagination-active-item-bg:         $supporting-orange !default;
 $pagination-active-item-color:      $black !default;
 $pagination-active-item-border:     $pagination-active-item-bg !default;
 // End mod
@@ -1708,7 +1708,7 @@ $card-title-spacer-y:               $spacer * .5 !default;
 $card-title-color:                  null !default;
 $card-subtitle-color:               null !default;
 $card-border-width:                 var(--#{$prefix}border-width) !default;
-$card-border-color:                 var(--#{$prefix}border-color-translucent) !default;
+$card-border-color:                 var(--#{$prefix}border-color-subtle) !default; // Boosted mod: instead of `var(--#{$prefix}border-color-translucent)`
 $card-border-radius:                var(--#{$prefix}border-radius) !default;
 $card-box-shadow:                   null !default;
 $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
@@ -1722,7 +1722,7 @@ $card-color:                        null !default;
 $card-bg:                           var(--#{$prefix}body-bg) !default;
 $card-img-overlay-padding:          $spacer !default;
 $card-group-margin:                 $grid-gutter-width * .5 !default;
-$card-footer-color:                 var(--#{$prefix}placeholder-color) !default; // Boosted mod
+$card-footer-color:                 var(--#{$prefix}secondary-color) !default; // Boosted mod
 // scss-docs-end card-variables
 
 // Accordion
@@ -1734,7 +1734,7 @@ $accordion-color:                         null !default; // Boosted mod: instead
 $accordion-bg:                            transparent !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 // stylelint-disable-next-line function-disallowed-list
 $accordion-border-width:                  calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod
-$accordion-border-color:                  var(--#{$prefix}border-color-translucent) !default; // Boosted mod
+$accordion-border-color:                  var(--#{$prefix}border-color-subtle) !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 $accordion-border-radius:                 var(--#{$prefix}border-radius) !default;
 $accordion-inner-border-radius:           subtract($accordion-border-radius, #{$accordion-border-width}) !default;
 
@@ -1820,7 +1820,7 @@ $popover-bg:                        var(--#{$prefix}body-bg) !default;
 $popover-max-width:                 $spacer * 19 !default; // Boosted mod: instead of `276px`
 $popover-padding-y:                 $spacer !default; // Boosted mod
 $popover-border-width:              var(--#{$prefix}border-width) !default;
-$popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
+$popover-border-color:              var(--#{$prefix}border-color-subtle) !default; // Boosted mod: instead of `var(--#{$prefix}border-color-translucent)`
 $popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
 $popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
 $popover-box-shadow:                var(--#{$prefix}box-shadow) !default;
@@ -1860,7 +1860,7 @@ $toast-font-size:                   .875rem !default;
 $toast-color:                       var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `null` due to some `bg-dark` issue
 $toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
 $toast-border-width:                var(--#{$prefix}border-width) !default;
-$toast-border-color:                var(--#{$prefix}border-color-translucent) !default; // Boosted mod
+$toast-border-color:                var(--#{$prefix}border-color-subtle) !default; // Boosted mod: instead of `var(--#{$prefix}border-color-translucent)`
 $toast-border-radius:               var(--#{$prefix}border-radius) !default;
 $toast-box-shadow:                  var(--#{$prefix}box-shadow) !default;
 $toast-spacing:                     $container-padding-x !default;
@@ -1899,7 +1899,7 @@ $modal-content-padding-x:           0 !default; // Boosted mod
 $modal-content-padding:             $modal-content-padding-y $modal-content-padding-x !default; // Boosted mod
 $modal-content-color:               null !default;
 $modal-content-bg:                  var(--#{$prefix}body-bg) !default;
-$modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
+$modal-content-border-color:        var(--#{$prefix}border-color-subtle) !default; // Boosted mod: instead of `var(--#{$prefix}border-color-translucent)`
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
 $modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
 $modal-content-inner-border-radius: var(--#{$prefix}border-radius) !default; // Boosted mod: instead of `subtract($modal-content-border-radius, $modal-content-border-width)`
@@ -1985,13 +1985,13 @@ $alert-dismissible-padding-r:       $alert-padding-y * 3 !default; // 3x covers
 // scss-docs-start progress-variables
 $progress-height:                   $spacer !default;
 $progress-font-size:                $font-size-base !default;
-$progress-bg:                       var(--#{$prefix}active-bg) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
+$progress-bg:                       var(--#{$prefix}tertiary-active-bg) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
 $progress-border-radius:            var(--#{$prefix}border-radius) !default;
 $progress-box-shadow:               var(--#{$prefix}box-shadow-inset) !default;
 $progress-bar-color:                var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `$white`
 $progress-bar-font-weight:          $font-weight-bold !default; // Boosted mod
 $progress-bar-text-indent:          map-get($spacers, 2) !default; // Boosted mod
-$progress-bar-bg:                   var(--#{$prefix}link-hover-color) !default; // Boosted mod: instead of `$primary`
+$progress-bar-bg:                   var(--#{$prefix}primary) !default; // Boosted mod: instead of `$primary`
 $progress-bar-animation-timing:     1s linear infinite !default;
 $progress-bar-transition:           width .6s ease !default;
 
@@ -2007,7 +2007,7 @@ $progress-height-xs:                $spacer * .25 !default;
 $list-group-font-weight:              $font-weight-bold !default; // Boosted mod
 $list-group-color:                    null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $list-group-bg:                       transparent !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
-$list-group-border-color:             var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
+$list-group-border-color:             var(--#{$prefix}border-color-subtle) !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 $list-group-border-width:             var(--#{$prefix}border-width) !default;
 $list-group-border-radius:            var(--#{$prefix}border-radius) !default;
 
@@ -2022,7 +2022,7 @@ $list-group-numbered-item-margin-end: 14px !default; // Boosted mod
 
 $list-group-hover-bg:                 var(--#{$prefix}secondary-bg) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
 $list-group-active-color:             var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `$component-active-color`
-$list-group-active-bg:                no-repeat linear-gradient(to right, var(--#{$prefix}link-hover-color) 4px, var(--#{$prefix}active-bg) 4px) !default; // Boosted mod: instead of `$component-active-bg`
+$list-group-active-bg:                no-repeat linear-gradient(to right, var(--#{$prefix}primary) 4px, var(--#{$prefix}tertiary-active-bg) 4px) !default; // Boosted mod: instead of `$component-active-bg`
 $list-group-active-border-color:      $list-group-border-color !default; // Boosted mod: instead of `$list-group-active-bg`
 
 $list-group-disabled-color:           var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
@@ -2051,7 +2051,7 @@ $list-group-icons: (
 $thumbnail-padding:                 0 !default; // Boosted mod
 $thumbnail-bg:                      var(--#{$prefix}body-bg) !default;
 $thumbnail-border-width:            var(--#{$prefix}border-width) !default;
-$thumbnail-border-color:            var(--#{$prefix}border-color-translucent) !default; // Boosted mod
+$thumbnail-border-color:            var(--#{$prefix}border-color-subtle) !default; // Boosted mod: instead of `var(--#{$prefix}border-color-translucent)`
 $thumbnail-border-radius:           var(--#{$prefix}border-radius) !default;
 $thumbnail-box-shadow:              var(--#{$prefix}box-shadow-sm) !default;
 // scss-docs-end thumbnail-variables
@@ -2075,7 +2075,7 @@ $title-bar-font-size:               $h2-font-size !default;
 $title-bar-line-height:             $display-line-height !default;
 $title-bar-letter-spacing:          $h2-spacing !default;
 $title-bar-border-width:            calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list
-$title-bar-border-color:            var(--#{$prefix}border-color-translucent) !default;
+$title-bar-border-color:            var(--#{$prefix}border-color-subtle) !default;
 
 $title-bar-font-size-md:            $display2-size !default;
 $title-bar-letter-spacing-md:       $display2-spacing !default;
@@ -2103,7 +2103,6 @@ $breadcrumb-margin-bottom:          1rem !default;
 $breadcrumb-color:                  var(--#{$prefix}emphasis-color) !default; // Boosted mod
 $breadcrumb-bg:                     null !default;
 $breadcrumb-divider-color:          $black !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
-$breadcrumb-divider-filter:         var(--#{$prefix}icon-filter) !default; // Boosted mod
 $breadcrumb-active-color:           null !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $breadcrumb-divider:                url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14' width='7' height='10'><path d='m-.4 12 2 2 7-7-7-7-2 2 5 5z'/></svg>") !default;
 $breadcrumb-divider-flipped:        $breadcrumb-divider !default;
@@ -2209,8 +2208,8 @@ $btn-close-focus-shadow:        $btn-focus-box-shadow !default; // Deprecated in
 
 // Boosted mod
 $btn-close-hover-color:         $btn-close-color !default;
-$btn-close-active-color:        var(--#{$prefix}link-hover-color) !default;
-$btn-close-active-border-color: var(--#{$prefix}border-color-translucent) !default;
+$btn-close-active-color:        var(--#{$prefix}primary) !default;
+$btn-close-active-border-color: var(--#{$prefix}border-color-subtle) !default;
 $btn-close-disabled-color:      var(--#{$prefix}disabled-color) !default;
 
 $btn-close-icon-size:           1rem auto !default;
@@ -2222,7 +2221,7 @@ $btn-close-white-color:               $white !default; // Boosted mod
 $btn-close-white-bg:                  transparent !default; // Boosted mod
 $btn-close-white-border-color:        transparent !default; // Boosted mod
 $btn-close-white-hover-color:         $btn-close-white-color !default; // Boosted mod
-$btn-close-white-active-color:        $brand-orange !default; // Boosted mod
+$btn-close-white-active-color:        $supporting-orange !default; // Boosted mod
 $btn-close-white-active-border-color: $gray-700 !default; // Boosted mod
 $btn-close-white-disabled-color:      $gray-700 !default; // Boosted mod
 
@@ -2256,7 +2255,7 @@ $kbd-color:                         var(--#{$prefix}kbd-color, $black) !default;
 $kbd-bg:                            var(--#{$prefix}kbd-bg, $gray-300) !default;
 $nested-kbd-font-weight:            null !default; // Deprecated in v5.2.0, removing in v6
 
-$pre-color:                         var(--#{$prefix}body-color-subtle) !default;
+$pre-color:                         var(--#{$prefix}code-color) !default;
 $pre-line-height:                   1.25 !default;
 // End mod
 
@@ -2300,9 +2299,9 @@ $step-item-padding:           7px !default;
 $step-item-padding-end:       $step-item-padding * 2 !default; // Deprecated in v5.2.0
 // fusv-enable
 $step-item-margin-end:        var(--#{$prefix}border-width) !default;
-$step-item-bg:                var(--#{$prefix}highlight-bg) !default;
-$step-item-active-bg:         $brand-orange !default;
-$step-item-next-bg:           var(--#{$prefix}border-color-translucent) !default;
+$step-item-bg:                var(--#{$prefix}secondary) !default;
+$step-item-active-bg:         $supporting-orange !default;
+$step-item-next-bg:           var(--#{$prefix}border-color-subtle) !default;
 $step-item-shadow-size:       calc(var(--#{$prefix}border-width) * 1.5) !default; // stylelint-disable-line function-disallowed-list
 $step-item-drop-shadow:       drop-shadow($step-item-shadow-size 0 0 var(--#{$prefix}stepped-process-bg)) #{"/* rtl:"} drop-shadow(calc(-1 * #{$step-item-shadow-size}) 0 0 var(--#{$prefix}stepped-process-bg)) #{"*/"} !default; // stylelint-disable-line function-disallowed-list
 
@@ -2324,7 +2323,7 @@ $step-link-text-decoration:   $link-decoration !default;
 //// Sticker
 // scss-docs-start sticker
 $sticker-color:                         $black !default;
-$sticker-background-color:              $brand-orange !default;
+$sticker-background-color:              $supporting-orange !default;
 $sticker-font-weight:                   $font-weight-bold !default;
 
 $sticker-size-sm:                       $spacer * 7 !default;
@@ -2345,7 +2344,7 @@ $quantity-selector-sm-width:              5.625rem !default;
 $quantity-selector-btn-padding-x:         add($btn-icon-padding-x, 2px) !default;
 $quantity-selector-btn-padding-x-sm:      add($btn-icon-padding-x-sm, 2px) !default;
 $quantity-selector-btn-bg:                var(--#{$prefix}body-bg) !default;
-$quantity-selector-btn-border:            var(--#{$prefix}border-width) solid var(--#{$prefix}border-color-translucent) !default;
+$quantity-selector-btn-border:            var(--#{$prefix}border-width) solid var(--#{$prefix}border-color-subtle) !default;
 
 $quantity-selector-disabled-color:        var(--#{$prefix}disabled-color) !default;
 $quantity-selector-disabled-bg:           var(--#{$prefix}body-bg) !default;
@@ -2377,7 +2376,7 @@ $footer-line-height-md:                   $line-height-base !default;
 $footer-title-font-weight:                $font-weight-bold !default;
 $footer-letter-spacing:                   $letter-spacing-base !default;
 $footer-accordion-line-height:            $spacer * 1.45 !default;
-$footer-accordion-active-color:           var(--#{$prefix}link-hover-color) !default;
+$footer-accordion-active-color:           var(--#{$prefix}primary) !default;
 $footer-accordion-btn-hover-bg:           null !default;
 // fusv-disable
 $footer-nav-link-font-weight:             $font-weight-bold !default; // Deprecated in v5.3.3
@@ -2436,7 +2435,7 @@ $tag-font-size:                     $font-size-base !default;
 
 $tag-active-color:                  var(--#{$prefix}highlight-color) !default;
 $tag-disabled-color:                var(--#{$prefix}disabled-color) !default;
-$tag-border-color:                  var(--#{$prefix}border-color-translucent) !default;
+$tag-border-color:                  var(--#{$prefix}border-color-subtle) !default;
 $tag-active-decoration-color:       var(--#{$prefix}highlight-bg) !default;
 // scss-docs-end tag-variables
 
@@ -2457,12 +2456,12 @@ $tag-font-size-sm:                  $font-size-sm !default;
 $local-nav-padding-y:           $navbar-nav-link-padding-y !default;
 $local-nav-color:               null !default;
 $local-nav-bg:                  var(--#{$prefix}body-bg) !default;
-$local-nav-hover-color:         var(--#{$prefix}hover-color) !default;
+$local-nav-hover-color:         var(--#{$prefix}nav-link-active-color) !default;
 $local-nav-hover-bg:            var(--#{$prefix}secondary-bg) !default;
-$local-nav-active-color:        var(--#{$prefix}link-hover-color) !default;
-$local-nav-active-bg:           var(--#{$prefix}active-bg) !default;
+$local-nav-active-color:        var(--#{$prefix}primary) !default;
+$local-nav-active-bg:           var(--#{$prefix}tertiary-active-bg) !default;
 $local-nav-active-marker-width: $spacer * .2 !default;
-$local-nav-border-color:        var(--#{$prefix}border-color-translucent) !default;
+$local-nav-border-color:        var(--#{$prefix}border-color-subtle) !default;
 $local-nav-border-width:        calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list
 // scss-docs-end local-nav-variables
 // End mod
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 3d6ef7ec61..5fbc50cf1a 100644
--- 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: $accessible-orange;
+      color: $primary;
       content: "*";
     }
   }
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 4360ce2cae..d4ad2effec 100644
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -4,7 +4,7 @@
 // https://primer.github.io/.
 
 .form-select {
-  --#{$prefix}form-select-bg-img: var(--#{$prefix}select-indicator); // Boosted mod: instead of `#{escape-svg($form-select-indicator)}`
+  --#{$prefix}form-select-bg-img: var(--#{$prefix}form-select-indicator); // Boosted mod: instead of `#{escape-svg($form-select-indicator)}`
 
   display: block;
   width: 100%;
@@ -45,7 +45,7 @@
   &:disabled {
     color: $form-select-disabled-color;
     background-color: $form-select-disabled-bg;
-    background-image: var(--#{$prefix}select-disabled-indicator); // Boosted mod
+    background-image: var(--#{$prefix}form-select-disabled-indicator); // Boosted mod
     border-color: $form-select-disabled-border-color;
   }
 
diff --git a/site/assets/js/color.js b/site/assets/js/color.js
new file mode 100644
index 0000000000..f9bf4fdd61
--- /dev/null
+++ b/site/assets/js/color.js
@@ -0,0 +1,28 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/* global ClipboardJS: false, boosted: false */
+
+(() => {
+  'use strict'
+
+  const copyVariable = new ClipboardJS('.color-copy', {
+    text: trigger => trigger.getAttribute('data-clipboard-text')
+  })
+
+  copyVariable.on('success', event => {
+    const tooltipBtn = boosted.Tooltip.getInstance(event.trigger)
+    const originalTitle = event.trigger.getAttribute('data-bs-title')
+
+    tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
+    event.trigger.addEventListener('hidden.bs.tooltip', () => {
+      tooltipBtn.setContent({ '.tooltip-inner': originalTitle })
+      event.trigger.title = originalTitle
+    }, { once: true })
+    event.trigger.addEventListener('mouseleave', () => {
+      tooltipBtn.hide()
+    }, { once: true })
+    event.clearSelection()
+  })
+})()
diff --git a/site/assets/scss/_boosted.scss b/site/assets/scss/_boosted.scss
index cf6067b7c8..a4798cf721 100644
--- a/site/assets/scss/_boosted.scss
+++ b/site/assets/scss/_boosted.scss
@@ -78,7 +78,7 @@ body {
       width: 100%;
       height: 0;
       content: "";
-      background-color: var(--bs-link-hover-color);
+      background-color: var(--bs-primary);
       @include transition(height ease-out .2s);
     }
 
diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss
index c0dc4273b0..337b34ba92 100644
--- a/site/assets/scss/_colors.scss
+++ b/site/assets/scss/_colors.scss
@@ -156,9 +156,6 @@
 .bd-black { color: color-contrast($black); background-color: $black; }
 
 // Boosted mod
-.bd-accessible-orange { color: color-contrast($accessible-orange); background-color: $accessible-orange; }
-.bd-supporting-yellow { color: color-contrast($supporting-yellow); background-color: $supporting-yellow; }
-
 @function wcag-level($contrast-ratio) {
   $level: "FAIL";
 
@@ -177,7 +174,7 @@
   @return $level;
 }
 
-@each $color, $value in map-merge($colors, map-merge($grays, ("supporting-yellow": $supporting-yellow, "accessible-orange": $accessible-orange, "black": $black))) {
+@each $color, $value in map-merge($colors, map-merge($grays, ("supporting-yellow": $supporting-yellow, "black": $black))) {
   .a11y-swatch-#{$color} {
     color: color-contrast($value);
     background-color: #{$value};
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index d1a4b76a75..ee77113db0 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -4,7 +4,7 @@
 
 .bd-code-snippet {
   margin: 0 ($bd-gutter-x * -.5) 1rem;
-  border: solid var(--bs-border-color-translucent); // Boosted mod: instead of `var(--bs-border-color)`
+  border: solid var(--bs-border-color-subtle); // Boosted mod: instead of `var(--bs-border-color)`
   border-width: 1px 0;
 
   @include media-breakpoint-up(md) {
@@ -21,7 +21,7 @@
   position: relative;
   padding: var(--bd-example-padding);
   margin: 0 ($bd-gutter-x * -.5) 1rem;
-  border: solid var(--bs-border-color-translucent); // Boosted mod: instead of `var(--bs-border-color)`
+  border: solid var(--bs-border-color-subtle); // Boosted mod: instead of `var(--bs-border-color)`
   border-width: 1px 0;
   @include clearfix();
 
@@ -178,7 +178,7 @@
     font-weight: $font-weight-bold; // Boosted mod
     color: var(--bs-secondary-color);
     background-color: var(--bs-secondary-bg); // Boosted mod: instead of `var(--bs-tertiary-bg)`
-    border: var(--bs-border-width) solid var(--bs-border-color-translucent); // Boosted mod: instead of `var(--bs-border-width) solid var(--bs-border-color)`
+    border: var(--bs-border-width) solid var(--bs-border-color-subtle); // Boosted mod: instead of `var(--bs-border-width) solid var(--bs-border-color)`
 
     > div {
       display: flex;
@@ -251,7 +251,7 @@
 
 // Boosted mod
 .simple-list-example-scrollspy .active {
-  color: var(--bs-link-hover-color);
+  color: var(--bs-primary);
 }
 // End mod
 
@@ -438,7 +438,33 @@
 }
 // scss-docs-end sticker-fs-xl
 
-.border-tertiary {
-  --bs-border-color: var(--bs-border-color-translucent);
+.border-subtle {
+  --bs-border-color: var(--bs-border-color-subtle);
+}
+
+.color-copy:hover svg {
+  transform: scale(1.07);
+}
+
+.color-copy svg {
+  transition: transform .15s ease-in-out; // stylelint-disable-line property-disallowed-list
+}
+
+.double-figure-svg {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background: linear-gradient(to bottom, $white, $white 50%, $gray-950 50%, $gray-950 100%);
+}
+
+.double-figure {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background: linear-gradient(to bottom, $white, $white calc((100% - 1.875rem) * .5), $gray-950 calc((100% - 1.875rem) * .5), $gray-950 calc(100% - 1.875rem), transparent calc(100% - 1.875rem)); // stylelint-disable-line function-disallowed-list
+
+  figcaption {
+    height: 1.875rem;
+    padding-top: 15px;
+    white-space: nowrap;
+  }
 }
 // End mod
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index 62e485ea95..2818b5b65e 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -72,6 +72,36 @@
   td code {
     white-space: nowrap;
   }
+
+  .border-top-1 {
+    border-top: 1px solid var(--bs-border-color-subtle);
+  }
+
+  .border-color {
+    width: 60px;
+    height: 60px;
+    border: 1px solid var(--bs-border-color-subtle);
+  }
+
+  td:last-child:not(:first-child) {
+    div {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: space-evenly;
+      min-height: 60px;
+    }
+
+    button {
+      padding: 0;
+      background-color: transparent;
+      border: 0;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
 }
 
 .bd-title {
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index 8fb8df73f8..51192c5bed 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -16,7 +16,7 @@
 
   .bd-code-snippet {
     margin: 0;
-    border-color: var(--bs-border-color-translucent);
+    border-color: var(--bs-border-color-subtle);
     border-width: 1px;
     @include border-radius(calc(.5rem - 1px));
   }
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index afd371c923..4e2a4fd2c9 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -50,7 +50,7 @@
   // Boosted mod: Specificity
   .navbar-nav.flex-row {
     @include media-breakpoint-down(lg) {
-      border-top: 1px solid #666;
+      border-top: 1px solid $gray-700;
     }
 
     .dropdown-toggle {
diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
index 15bb6cde2f..48a529d38a 100644
--- a/site/assets/scss/_search.scss
+++ b/site/assets/scss/_search.scss
@@ -4,12 +4,12 @@
 
 :root {
   // All available CSS vars and specific modifications for Boosted
-  --docsearch-primary-color: var(--bs-link-hover-color);
+  --docsearch-primary-color: var(--bs-primary);
   --docsearch-text-color: var(--bs-body-color);
   // --docsearch-spacing
   // --docsearch-icon-stroke-width
   --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-muted-color: var(--bs-placeholder-color);
+  --docsearch-muted-color: var(--bs-secondary-color);
   --docsearch-container-background: #{rgba($modal-backdrop-bg, $modal-backdrop-opacity)};
   --docsearch-logo-color: var(--bs-body-color);
   // --docsearch-modal-width
@@ -21,7 +21,7 @@
   --docsearch-searchbox-focus-background: transparent;
   --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-text-color);
   // --docsearch-hit-height;
-  --docsearch-hit-color: var(--bs-placeholder-color);
+  --docsearch-hit-color: var(--bs-secondary-color);
   --docsearch-hit-active-color: var(--bs-highlight-color);
   --docsearch-hit-background: transparent;
   // --docsearch-hit-shadow;
@@ -49,14 +49,12 @@
 }
 
 .DocSearch-Modal {
-  border: var(--bs-border-width) solid var(--bs-border-color-translucent);
+  border: var(--bs-border-width) solid var(--bs-border-color-subtle);
   @include border-radius(0, 0);
 }
 
 .DocSearch-Button {
-  --docsearch-searchbox-background: var(--bs-highlight-color);
-  --docsearch-searchbox-focus-background: var(--bs-highlight-color);
-  --docsearch-text-color: var(--bs-highlight-bg);
+  --docsearch-searchbox-background: transparent;
 
   height: auto;
   padding: 0;
@@ -99,7 +97,7 @@
 }
 
 .DocSearch-Form {
-  box-shadow: var(--bs-border-color-translucent) 0 0 0 .125rem inset;
+  box-shadow: var(--bs-border-color-subtle) 0 0 0 .125rem inset;
   @include border-radius(0, 0);
 
   &:focus-within {
diff --git a/site/assets/scss/_tarteaucitron.scss b/site/assets/scss/_tarteaucitron.scss
index 2b4857d300..91da3b3f7f 100644
--- a/site/assets/scss/_tarteaucitron.scss
+++ b/site/assets/scss/_tarteaucitron.scss
@@ -7,6 +7,7 @@
   padding: $modal-content-padding;
   background-color: $modal-content-bg;
   background-clip: padding-box;
+  border: $modal-content-border-width solid $modal-content-border-color;
   transform: translateX(-50%);
 
   [role="heading"] {
@@ -53,6 +54,7 @@
   font-weight: $font-weight-bold;
   color: $white;
   background: $black;
+  border-top: var(--bs-border-width) solid var(--bs-border-color-subtle);
 
   &[style*="display: block"] {
     display: flex !important; // stylelint-disable-line declaration-no-important
@@ -120,7 +122,7 @@
 @include tac("Name", true) {
   float: left;
   font-size: $font-size-sm;
-  color: var(--bs-placeholder-color);
+  color: var(--bs-secondary-color);
 }
 
 @include tac("Ask", true) {
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index 6028b2e8c6..2429ee6e7a 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -2,7 +2,7 @@
 // stylelint-disable-next-line function-disallowed-list
 $bd-primary-light: lighten(saturate($primary, 5%), 15%); // Boosted mod
 // stylelint-disable-next-line function-disallowed-list
-$bd-primary-dark:  darken(saturate($brand-orange, 5%), 15%); // Boosted mod
+$bd-primary-dark:  darken(saturate($supporting-orange, 5%), 15%); // Boosted mod
 $bd-purple:        #4c0bce;
 $bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
 // Boosted mod: np $bd-purple-light
diff --git a/site/content/docs/5.3/components/alerts.md b/site/content/docs/5.3/components/alerts.md
index 2c7360e917..d9c3677372 100644
--- a/site/content/docs/5.3/components/alerts.md
+++ b/site/content/docs/5.3/components/alerts.md
@@ -12,7 +12,7 @@ toc: true
 
 Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
 
-Boosted also adds a dedicated icon for each contextual class using `.alert-icon`, matching [functional colors in palette]({{<docsref "customize/color#functional-colors">}}):
+Boosted also adds a dedicated icon for each contextual class using `.alert-icon`, matching [functional colors in palette]({{<docsref "customize/color-theme#functional">}}):
 - success,
 - info,
 - warning,
diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md
index 4e49a5010a..23462bc215 100644
--- a/site/content/docs/5.3/components/list-group.md
+++ b/site/content/docs/5.3/components/list-group.md
@@ -178,7 +178,7 @@ Use contextual classes to style list items with a stateful icon.
 {{- range (index $.Site.Data "palette") }}
   {{- if (eq .category "Functional colors") }}
     {{- range (index .colors) }}
-  <li class="list-group-item list-group-item-{{ .level }}">A simple {{ .level }} list group item</li>
+  <li class="list-group-item list-group-item-{{ .name }}">A simple {{ .name }} list group item</li>
     {{- end -}}
   {{- end -}}
 {{- end -}}
@@ -198,7 +198,7 @@ Contextual classes also work with `.list-group-item-action` for `<a>` and `<butt
 {{- range (index $.Site.Data "palette") -}}
   {{- if (eq .category "Functional colors") -}}
     {{- range (index .colors) }}
-  <a href="#" class="list-group-item list-group-item-action list-group-item-{{ .level }}">A simple {{ .level }} list group item</a>
+  <a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name }}">A simple {{ .name }} list group item</a>
     {{- end -}}
   {{- end -}}
 {{- end -}}
diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md
index e2071fcc6a..6bc770bc16 100644
--- a/site/content/docs/5.3/content/tables.md
+++ b/site/content/docs/5.3/content/tables.md
@@ -914,7 +914,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
             </div>
           </td>
           <td>
-            <img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
+            <img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
             Cell text
           </td>
           <td>Cell text</td>
@@ -951,7 +951,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
             </div>
           </td>
           <td>
-            <img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
+            <img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
             Cell text
           </td>
           <td>Cell text</td>
@@ -1068,7 +1068,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
   <table class="table table-sm table-hover align-middle has-checkbox">
     ...
     <td>
-      <img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
+      <img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
       Cell text
     </td>
     ...
diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md
index 30a84edb2a..7cb5310c41 100644
--- a/site/content/docs/5.3/customize/color-modes.md
+++ b/site/content/docs/5.3/customize/color-modes.md
@@ -9,14 +9,6 @@ toc: true
 added: "5.3"
 ---
 
-{{< design-callout-alert >}}
-Color mode mechanism coming from Bootstrap is available from Boosted v5.3.0.
-
-However, the dark mode is not yet available in the Orange Design System specifications.
-
-Please use Boosted v5.3.3 to have the dark mode available.
-{{< /design-callout-alert >}}
-
 {{< callout >}}
 **Try it yourself!** Download the source code and working demo for using Bootstrap with Stylelint, and the color modes from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/color-modes). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/color-modes?file=index.html).
 {{< /callout >}}
@@ -29,7 +21,7 @@ Alternatively, you can also switch to a media query implementation thanks to our
 
 ## Example
 
-For example, to change the color mode of a dropdown menu, add `data-bs-theme="light"` or `data-bs-theme="dark"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display with the specified theme value.
+For example, to change the color mode of a dropdown, add `data-bs-theme="light"` or `data-bs-theme="dark"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display with the specified theme value.
 
 {{< example class="d-flex justify-content-between" >}}
 <div class="dropdown" data-bs-theme="light">
@@ -104,6 +96,12 @@ Boosted does not yet ship with a built-in color mode picker, but you can use the
 
 Our new dark mode option is available to use for all users of Boosted, but it's controlled via data attributes instead of media queries and does not automatically toggle your project's color mode. You can disable our dark mode entirely via Sass by changing `$enable-dark-mode` to `false`.
 
+{{< callout warning >}}
+Please be aware that some of Boosted's components always use the contextual dark mode to have the same rendering both in light and dark mode, such as our [Orange navbar]({{< docsref "/components/orange-navbar" >}}) and [Footer]({{< docsref "/components/footer" >}}).
+
+If you need to use them, you won't be able to disable the dark mode globally.
+{{< /callout >}}
+
 We use a custom Sass mixin, `color-mode()`, to help you control _how_ color modes are applied. By default, we use a `data` attribute approach, allowing you to create more user-friendly experiences where your visitors can choose to have an automatic dark mode or control their preference (like in our own docs here). This is also an easy and scalable way to add different themes and more custom color modes beyond light and dark.
 
 In case you want to use media queries and only make color modes automatic, you can change the mixin's default type via Sass variable. Consider the following snippet and its compiled CSS output.
diff --git a/site/content/docs/5.3/customize/color-palette.md b/site/content/docs/5.3/customize/color-palette.md
new file mode 100644
index 0000000000..cb1035a54b
--- /dev/null
+++ b/site/content/docs/5.3/customize/color-palette.md
@@ -0,0 +1,212 @@
+---
+layout: docs
+title: Color palette
+description: Boosted's color palette is the summary of all the existing and useable colors.
+group: customize
+aliases:
+  - "/docs/customize/color-palette/"
+toc: true
+added: "5.3"
+---
+
+## Palette
+
+This section exposes all the existing colors inside the Boosted palette. These variables aren't meant to be used, it's an exposure of the available variables. Be aware that none of the variables presented depend on the theme.
+
+Please make sure that none of the [color theme variables]({{< docsref "/customize/color-theme" >}}) fit your needs before getting one here.
+
+{{< palette.inline >}}
+{{- range where $.Site.Data.palette "category" "ODS colors" }}
+  {{- range $subcategory := .subcategories }}
+  <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 gy-3 pb-3">
+    {{- range $color := .colors }}
+      <figure class="mb-0" aria-label="{{ $color.name }}">
+        <button class="btn border-0 p-0 color-copy ratio ratio-1x1" data-clipboard-text="{{ $color.variable }}" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard">
+          <svg viewBox="0 0 100 100" role="img" aria-hidden="true" preserveAspectRatio="xMidYMid meet" {{ if or (or (eq $color.name "White 100") (eq $color.name "Black 900")) (eq $color.name "Gray 900") }} style="border: 1px solid var(--bs-border-color-subtle)" {{ end }}>
+            <rect fill="{{ $color.hex }}" width="100" height="100"/>
+          </svg>
+          <span class="visually-hidden">Copy variable name {{ $color.variable }}</span>
+        </button>
+        <figcaption class="py-1">
+          <code class="user-select-all">{{ $color.hex }}</code>
+          <hr class="my-1 bg-transparent border-top {{ if eq $color.class "secondary" "primary" }}border-{{ $color.class }}"{{ else }}" style="border-color:{{ $color.hex }} !important"{{ end }}>
+          <var class="user-select-all">{{- $color.variable -}}</var>
+        </figcaption>
+      </figure>
+    {{ end -}}
+  </div>
+  {{ end -}}
+{{ end -}}
+{{< /palette.inline >}}
+
+## Bootstrap's palette
+
+Bootstrap defines a color palette on its own. We worked on a mapping between Orange Design System's colors and Bootstrap's ones in cases where users will use Bootstrap-based plugins or libraries so that, when used with Boosted CSS, provides an acceptable automatic rendering.
+
+<details>
+<summary>See Bootstrap's palette</summary>
+<br>
+<h2>All colors</h2>
+
+{{< design-callout-alert >}}
+Some of the colors below do not belong to the Orange Design System specifications.
+
+Please refer to our Boosted [color palette](#palette) section and to the [Color](https://system.design.orange.com/0c1af118d/p/7059a5-colour/b/17b829) guidelines on the Orange Design System website.
+{{< /design-callout-alert >}}
+
+{{< callout warning >}}
+All Boosted colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#palette).
+
+Please note that in the Boosted colors, the indigo colors are the same as the purple ones.
+{{< /callout >}}
+
+Be sure to monitor contrast ratios as you customize colors. As shown below, we've added three contrast ratios to each of the main colors—one for the swatch's current colors, one for against white, and one for against black.
+
+<div class="row font-monospace">
+  {{< theme-colors.inline >}}
+  {{- range $color := $.Site.Data.colors }}
+    {{- if (and (not (eq $color.name "white")) (not (eq $color.name "gray")) (not (eq $color.name "gray-dark"))) }}
+    <div class="col-md-4 mb-3">
+      <div class="p-3 mb-2 position-relative swatch-{{ $color.name }}">
+        <strong class="d-block">${{ $color.name }}</strong>
+        {{ $color.hex }}
+      </div>
+      {{ range (seq 100 100 900) }}
+      <div class="p-3 bd-{{ $color.name }}-{{ . }}">${{ $color.name }}-{{ . }}</div>
+      {{ end }}
+    </div>
+    {{ end -}}
+  {{ end -}}
+
+  <div class="col-md-4 mb-3">
+    <div class="p-3 mb-2 position-relative swatch-gray-500">
+      <strong class="d-block">$gray-500</strong>
+      #ccc
+    </div>
+  {{- range $.Site.Data.grays }}
+    <div class="p-3 bd-gray-{{ .name }}">$gray-{{ .name }}</div>
+  {{ end -}}
+  </div>
+  {{< /theme-colors.inline >}}
+
+  <div class="col-md-4 mb-3">
+    <div class="p-3 mb-2 bd-black text-white">
+      <strong class="d-block">$black</strong>
+      #000
+    </div>
+    <div class="p-3 mb-2 bd-white border">
+      <strong class="d-block">$white</strong>
+      #fff
+    </div>
+  </div>
+</div>
+
+<h3>Notes on Sass</h3>
+
+Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves.
+
+- For `$indigo`, `$purple`, `$pink`, `$teal`, and `$cyan`, we specify first 6 colors (`*-100` to `*-600`) from the Boosted palette (tokens) and build the last ones programmatically to darken our `*-600`.
+- For the grays, the first 2 (`$gray-100` and `$gray-200`) are opinionated values and only the last 8 (`*-300` to `*-950`) are extracted from the Boosted palette.
+- For the remaining, only the `*-500` are correct since we specify the midpoint value and use custom color functions to tint (lighten) or shade (darken) our colors vis Sass's `mix()` color function.
+
+Using `mix()` is not the same as `lighten()` and `darken()`—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as [shown in this CodePen demo](https://codepen.io/emdeoh/pen/zYOQOPB).
+
+Our `tint-color()` and `shade-color()` functions use `mix()` alongside our `$theme-color-interval` variable, which specifies a stepped percentage value for each mixed color we produce. See the `scss/_functions.scss` and `scss/_variables.scss` files for the full source code.
+
+<h3>Example</h3>
+
+Here's how you can use these in your Sass:
+
+```scss
+.alpha { color: $purple; }
+.beta {
+  color: $ods-yellow-100;
+  background-color: $indigo-900;
+}
+```
+
+[Color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utility classes are also available for setting `color` and `background-color` using the `500` or `300` for some color values.
+</details>
+
+## CSS
+
+Boosted sets an additional layer to use Orange Design System's color tokens names—defined first and mapped to Bootstrap core variables.
+Boosted core uses Bootstrap's naming for maintenance ease, but you're encouraged to use Orange color tokens when it comes to custom code.
+
+### Sass variables
+
+A first layer of Sass variables defines the Boosted's color palette.
+
+{{< scss-docs name="palette" file="scss/_color-palette.scss" >}}
+
+A second layer of Sass variables defines our functional and supporting colors using the Sass color palette.
+
+{{< scss-docs name="brand-colors" file="scss/_variables.scss" >}}
+
+Because Boosted relies on Bootstrap's specific tokens system, we need to map the Boosted's color tokens to the Bootstrap's ones.
+
+{{< scss-docs name="color-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}
+
+### Sass maps
+
+Boosted's source Sass files include maps to help you quickly and easily loop over a list of colors and their hex values.
+
+- `$colors` lists all our available base colors
+- `$theme-colors` lists all [semantically named light theme colors]({{< docsref "/customize/color-theme" >}})
+- `$theme-colors-dark` lists all [semantically named dark theme colors]({{< docsref "/customize/color-theme" >}})
+- `$utilities-text` overrides `$theme-colors` specifically used to define `.text-*` utilities
+- `$utilities-bg` overrides `$theme-colors` specifically used to define `.bg-*` utilities
+- `$utilities-border` overrides `$theme-colors` specifically used to define `.border-*` utilities
+- `$grays`, `$blues`, `$indigos`, `$purples`, `$pinks`, `$reds`, `$oranges`, `$yellows`, `$greens`, `$teals`, and `$cyans` list all tints and shades of our colors
+
+Within `scss/_variables.scss` or `scss/_maps.scss`, you'll find Boosted's color variables and Sass maps. Here's an example of the `$colors` Sass map:
+
+{{< scss-docs name="colors-map" file="scss/_variables.scss" >}}
+
+Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.
+
+## Generating utilities
+
+{{< added-in "5.1.0" >}}
+
+Boosted doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0.
+
+1. To start, make sure you've imported our functions, variables, mixins, and utilities.
+2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map.
+3. Merge this new combined map to extend any utility with a `{color}-{level}` class name.
+
+Here's an example that generates text color utilities (e.g., `.text-purple-500`) using the above steps.
+
+```scss
+@import "boosted/scss/functions";
+@import "boosted/scss/variables";
+@import "boosted/scss/variables-dark";
+@import "boosted/scss/maps";
+@import "boosted/scss/mixins";
+@import "boosted/scss/utilities";
+
+$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "color": map-merge(
+      map-get($utilities, "color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "color"), "values"),
+          (
+            $all-colors
+          ),
+        ),
+      ),
+    ),
+  )
+);
+
+@import "boosted/scss/utilities/api";
+```
+
+This will generate new `.text-{color}-{level}` utilities for every color and level. You can do the same for any other utility and property as well.
diff --git a/site/content/docs/5.3/customize/color-theme.md b/site/content/docs/5.3/customize/color-theme.md
new file mode 100644
index 0000000000..47e8e36469
--- /dev/null
+++ b/site/content/docs/5.3/customize/color-theme.md
@@ -0,0 +1,653 @@
+---
+layout: docs
+title: Color theme
+description: Boosted is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
+group: customize
+aliases:
+  - "/docs/customize/color/"
+  - "/docs/5.3/customize/color/"
+  - "/docs/customize/color-theme/"
+toc: true
+---
+
+## Theming
+
+We use a subset of [the full color palette]({{< docsref "/customize/color-palette" >}}) to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Boosted's `scss/_variables.scss` file.
+
+This smaller color palette is used to generate our components variants and our color-related utilities and helpers.
+
+<div class="row">
+  {{< theme-colors.inline >}}
+  {{- range (index $.Site.Data "theme-colors") }}
+    <div class="col-md-4">
+      <div class="p-3 mb-3 fw-bold text-bg-{{ .name }}">{{ .name | title }}</div>
+    </div>
+  {{ end -}}
+  {{< /theme-colors.inline >}}
+</div>
+
+All these colors are available as a Sass map, `$theme-colors`.
+
+{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
+
+Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.
+
+However, other colors are needed to create an interface. The following sections explain which colors are used for which purpose in a light and dark mode context.
+
+{{< callout info >}}
+The following color sections represent the only colors you should have inside an Orange interface either in contextual light or dark theme. The following bicolor representation shows the rendering of the same usage on light or dark theme.
+
+The corresponding values displayed in these sections are used within the framework to create our components and utilities. But they are rarely used and to be used directly in a project. We recommend using the [usable variables](#usable-variables) instead that are more specific.
+{{< /callout >}}
+
+### Core
+
+The Boosted core colors should always dominate other colors inside a page. They are used to highlight elements, figures, texts or actions.
+
+{{< palette.inline >}}
+{{- range where $.Site.Data.palette "category" "Core colors" }}
+<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 gy-2">
+  {{- range $color := .colors }}
+  <div class="double-figure-svg d-flex">
+    <svg class="ratio ratio-1x1 w-50" viewBox="0 0 100 100" role="img" aria-label="{{ $color.name }}" preserveAspectRatio="xMidYMid meet" {{ if eq $color.name "Body Bg" }} style="border: 1px solid var(--bs-border-color-subtle)" {{ end }}>
+      <rect fill="var(--bs-{{ $color.name | urlize }})" x="0" y="0" width="100" height="51" data-bs-theme="light"/>
+      <rect fill="var(--bs-{{ $color.name | urlize }})" x="0" y="50" width="100" height="50" data-bs-theme="dark"/>
+    </svg>
+    <div class="d-flex flex-column justify-content-around w-50 ps-2">
+      <p class="mb-0" data-bs-theme="light"><code class="user-select-all text-body">{{ $color.hex }}</code></p>
+      <p class="mb-0" data-bs-theme="dark"><code class="user-select-all text-body">{{ $color.darkHex }}</code></p>
+    </div>
+  </div>
+  {{- end -}}
+  <div class="double-figure-svg d-none d-md-flex d-lg-none"></div>
+</div>
+{{ end -}}
+{{< /palette.inline >}}
+
+### Functional
+
+The Boosted functional colors are associated to specific established meanings (respectively success, info or discovery, warning or alert, critical or error) and should be used in combination with a meaningful icon.
+
+Please note that the functional colors are not meant to be used as backgrounds or colors.
+
+{{< palette.inline >}}
+{{- range where $.Site.Data.palette "category" "Functional colors" }}
+<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 gy-2">
+  {{- range $color := .colors }}
+  <div class="double-figure d-flex">
+    <figure class="mb-0 w-50" aria-label="{{ $color.name | title }}">
+      <svg viewBox="0 0 100 100" role="img" aria-label="{{ $color.name | title }}" preserveAspectRatio="xMidYMid meet">
+        <rect fill="var(--bs-{{ $color.name | urlize }})" x="0" y="0" width="100" height="51" data-bs-theme="light"/>
+        <rect fill="var(--bs-{{ $color.name | urlize }})" x="0" y="50" width="100" height="50" data-bs-theme="dark"/>
+      </svg>
+      <figcaption>
+        <b>{{- $color.name | title -}}</b>
+      </figcaption>
+    </figure>
+    <div class="d-flex flex-column justify-content-around w-50 p-2 mb-4">
+      <p class="mb-0" data-bs-theme="light"><code class="user-select-all text-body">{{ $color.hex }}</code></p>
+      <p class="mb-0" data-bs-theme="dark"><code class="user-select-all text-body">{{ $color.darkHex }}</code></p>
+    </div>
+  </div>
+  {{ end -}}
+  <div class="double-figure d-none d-lg-flex"></div>
+  <div class="double-figure d-none d-lg-flex"></div>
+</div>
+{{ end -}}
+{{< /palette.inline >}}
+
+### Grays
+
+The Boosted grays are used as backgrounds, colors or borders to highlight some elements or actions (hover state, disabled state, supporting texts, dividers, low highlights). They should not dominate the page.
+
+{{< palette.inline >}}
+{{- range where $.Site.Data.palette "category" "Grays" }}
+<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 gy-2">
+  {{- range $color := .colors }}
+  <div class="double-figure-svg d-flex">
+    <svg class="ratio ratio-1x1 w-50" viewBox="0 0 100 100" role="img" aria-label="{{ $color.name }}" preserveAspectRatio="xMidYMid meet">
+      <rect fill="var(--bs-{{ $color.name | urlize }})" x="0" y="0" width="100" height="51" data-bs-theme="light"/>
+      <rect fill="var(--bs-{{ $color.name | urlize }})" x="0" y="50" width="100" height="50" data-bs-theme="dark"/>
+    </svg>
+    <div class="d-flex flex-column justify-content-around w-50 p-2 pe-none">
+      <p class="mb-0" data-bs-theme="light"><code class="pe-auto user-select-all text-body">{{ $color.hex }}</code></p>
+      <p class="mb-0" data-bs-theme="dark"><code class="pe-auto user-select-all text-body">{{ $color.darkHex }}</code></p>
+    </div>
+  </div>
+  {{ end -}}
+  <div class="double-figure-svg d-none d-lg-flex"></div>
+  <div class="double-figure-svg d-none d-lg-flex"></div>
+</div>
+{{ end -}}
+{{< /palette.inline >}}
+
+### Supporting
+
+The Boosted supporting colors are meant for backgrounds, data display or illustrations. As you may have noticed, they don't change their color depending on the theme. They should not dominate the page.
+
+{{< palette.inline >}}
+{{- range where $.Site.Data.palette "category" "Supporting colors" }}
+<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 gy-2">
+  {{- range $color := .colors }}
+  <div class="double-figure d-flex">
+    <figure class="mb-0 w-50" aria-label="Supporting {{ $color.name | lower }}">
+      <svg viewBox="0 0 100 100" role="img" aria-label="Supporting {{ $color.name | urlize }}" preserveAspectRatio="xMidYMid meet">
+        <rect fill="{{ $color.hex }}" x="0" y="0" width="100" height="100"/>
+      </svg>
+      <figcaption>
+        <b>Supporting {{ $color.name | lower -}}</b>
+      </figcaption>
+    </figure>
+    <div class="d-flex flex-column justify-content-around w-50 p-2 mb-4">
+      <p class="mb-0" data-bs-theme="light"><code class="user-select-all text-body">{{ $color.hex }}</code></p>
+      <p class="mb-0" data-bs-theme="dark"><code class="user-select-all text-body">{{ $color.hex }}</code></p>
+    </div>
+  </div>
+  {{ end -}}
+</div>
+{{ end -}}
+{{< /palette.inline >}}
+
+## CSS
+
+### Variables
+
+{{< added-in "5.3.0" >}}
+
+Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-rgb), .5)`.
+
+#### Theming
+
+The following CSS variables are the custom properties built from [our theming Sass map](#theming) and are used to create our [usable variables](#usable-variables).
+
+Please note that only the functional colors are meant to be used directly in a project.
+
+<div class="table-responsive mb-4">
+  <table class="table table-swatches">
+    <thead>
+      <tr>
+        <th>Description</th>
+        <th style="width: 60px;">Light value</th>
+        <th style="width: 60px;">Dark value</th>
+        <th>Variables</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{< themeColors.inline >}}
+      {{- range index $.Site.Data "theme-colors" }}
+      <tr>
+        <td>
+          {{.description}}
+        </td>
+        <td>
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-{{.name}});" data-bs-theme="light" title="{{.hex}}"><p class="visually-hidden">{{.hex}}</p></div>
+          </div>
+        </td>
+        <td>
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-{{.name}});" data-bs-theme="dark" title="{{.dark_hex}}"><p class="visually-hidden">{{.dark_hex}}</p></div>
+          </div>
+        </td>
+        <td>
+          <div>
+            <button class="color-copy" data-clipboard-text="--bs-{{.name}}" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Copy to clipboard"><code>--bs-{{.name}}</code></button>
+            <button class="color-copy" data-clipboard-text="--bs-{{.name}}-rgb" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Copy to clipboard"><code>--bs-{{.name}}-rgb</code></button>
+            <button class="color-copy" data-clipboard-text="--bs-{{.name}}-bg-subtle" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Copy to clipboard"><code>--bs-{{.name}}-bg-subtle</code></button>
+            <button class="color-copy" data-clipboard-text="--bs-{{.name}}-border-subtle" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Copy to clipboard"><code>--bs-{{.name}}-border-subtle</code></button>
+            <button class="color-copy" data-clipboard-text="--bs-{{.name}}-text-emphasis" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Copy to clipboard"><code>--bs-{{.name}}-text-emphasis</code></button>
+          </div>
+        </td>
+      </tr>
+      {{ end -}}
+      {{< /themeColors.inline >}}
+    </tbody>
+  </table>
+</div>
+
+#### Usable variables
+
+Some more contextual CSS variables are provided to create high-level semantic variables for your project that are linked to reusable basic concepts such as disabled, hover, focus, active, etc.
+
+**They are meant to be used directly in a project** and will ease its maintenance, especially after a Boosted update.
+
+<div class="table-responsive mb-4">
+  <table class="table table-swatches">
+    <thead>
+      <tr>
+        <th>Description</th>
+        <th></th>
+        <th style="width: 60px;">Light value</th>
+        <th style="width: 60px;">Dark value</th>
+        <th>Variables</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="border-bottom-0">
+        <td rowspan="2">
+          {{< markdown >}}**Body** - Default background and foreground colors, including components. {{< /markdown >}}
+        </td>
+        <td>
+          {{< markdown >}}Background.{{< /markdown >}}
+        </td>
+        <td class="border-top-1">
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-body-bg);" data-bs-theme="light" title="#fff"><p class="visually-hidden">#fff</p></div>
+          </div>
+        </td>
+        <td class="border-top-1">
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-body-bg);" data-bs-theme="dark" title="#141414"><p class="visually-hidden">#141414</p></div>
+          </div>
+        </td>
+        <td class="border-top-1">
+          <div>
+            <button class="color-copy" data-clipboard-text="--bs-body-bg" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-body-bg</code></button>
+            <button class="color-copy" data-clipboard-text="--bs-body-bg-rgb" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-body-bg-rgb</code></button>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          {{< markdown >}}Foreground.{{< /markdown >}}
+        </td>
+        <td>
+          <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>
+          <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>
+          <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>
+          </div>
+        </td>
+      </tr>
+      <tr class="border-bottom-0">
+        <td rowspan="2">
+          {{< markdown >}}**Body secondary** - Use the `color` option for less accentuated text (placeholder, helper text, code). Use the `bg` option to low emphasis a content or display a specific component state (hover, form disabled).{{< /markdown >}}
+        </td>
+        <td>
+          {{< markdown >}}Background.{{< /markdown >}}
+        </td>
+        <td class="border-top-1">
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-secondary-bg);" data-bs-theme="light" title="#eee"><p class="visually-hidden">#eee</p></div>
+          </div>
+        </td>
+        <td class="border-top-1">
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-secondary-bg);" data-bs-theme="dark" title="#333"><p class="visually-hidden">#333</p></div>
+          </div>
+        </td>
+        <td class="border-top-1">
+          <div>
+            <button class="color-copy" data-clipboard-text="--bs-secondary-bg" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-secondary-bg</code></button>
+            <button class="color-copy" data-clipboard-text="--bs-secondary-bg-rgb" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-secondary-bg-rgb</code></button>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          {{< markdown >}}Foreground.{{< /markdown >}}
+        </td>
+        <td>
+          <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>
+          <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>
+          <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>
+          </div>
+        </td>
+      </tr>
+      <tr class="border-bottom-0">
+        <td rowspan="2">
+          {{< markdown >}}**Body tertiary** - Use the tertiary `color` and `bg` options to have a body secondary less-emphasized rendering.{{< /markdown >}}
+        </td>
+        <td>
+          {{< markdown >}}Background.{{< /markdown >}}
+        </td>
+        <td class="border-top-1">
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-tertiary-bg);" data-bs-theme="light" title="#fafafa"><p class="visually-hidden">#fafafa</p></div>
+          </div>
+        </td>
+        <td class="border-top-1">
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-tertiary-bg);" data-bs-theme="dark" title="#000"><p class="visually-hidden">#000</p></div>
+          </div>
+        </td>
+        <td class="border-top-1">
+          <div>
+            <button class="color-copy" data-clipboard-text="--bs-tertiary-bg" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-tertiary-bg</code></button>
+            <button class="color-copy" data-clipboard-text="--bs-tertiary-bg-rgb" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-tertiary-bg-rgb</code></button>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          {{< markdown >}}Foreground.{{< /markdown >}}
+        </td>
+        <td>
+          <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>
+          <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>
+          <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>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          {{< markdown >}}**Emphasis** - For higher contrast text. Not applicable for backgrounds.{{< /markdown >}}
+        </td>
+        <td>
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-emphasis-color);" data-bs-theme="light" title="#000"><p class="visually-hidden">#000</p></div>
+          </div>
+        </td>
+        <td>
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-emphasis-color);" data-bs-theme="dark" title="#fff"><p class="visually-hidden">#fff</p></div>
+          </div>
+        </td>
+        <td>
+          <div>
+            <button class="color-copy" data-clipboard-text="--bs-emphasis-color" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-emphasis-color</code></button>
+            <button class="color-copy" data-clipboard-text="--bs-emphasis-color-rgb" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-emphasis-color-rgb</code></button>
+          </div>
+        </td>
+      </tr>
+      <tr class="border-bottom-0">
+        <td rowspan="2">
+          {{< markdown >}}**Border** - Use the default border for clickable component borders and the subtle variant for everything else.{{< /markdown >}}
+        </td>
+        <td>
+          {{< markdown >}}Default.{{< /markdown >}}
+        </td>
+        <td class="border-top-1">
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-border-color);" data-bs-theme="light" title="#000"><p class="visually-hidden">#000</p></div>
+          </div>
+        </td>
+        <td class="border-top-1">
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-border-color);" data-bs-theme="dark" title="#fff"><p class="visually-hidden">#fff</p></div>
+          </div>
+        </td>
+        <td class="border-top-1">
+          <div>
+            <button class="color-copy" data-clipboard-text="--bs-border-color" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-border-color</code></button>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          {{< markdown >}}Subtle.{{< /markdown >}}
+        </td>
+        <td>
+          <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>
+          <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>
+          <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>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          {{< markdown >}}**Disabled** - For disabled state.{{< /markdown >}}
+        </td>
+        <td>
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-disabled-color);" data-bs-theme="light" title="#ccc"><p class="visually-hidden">#ccc</p></div>
+          </div>
+        </td>
+        <td>
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-disabled-color);" data-bs-theme="dark" title="#666"><p class="visually-hidden">#666</p></div>
+          </div>
+        </td>
+        <td>
+          <div>
+            <button class="color-copy" data-clipboard-text="--bs-disabled-color" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-disabled-color</code></button>
+          </div>
+        </td>
+      </tr>
+      <tr class="border-bottom-0">
+        <td rowspan="2">
+          {{< markdown >}}**Highlight** - Use to highlight some components.{{< /markdown >}}
+        </td>
+        <td>
+          {{< markdown >}}Background.{{< /markdown >}}
+        </td>
+        <td class="border-top-1">
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-highlight-bg);" data-bs-theme="light" title="#000"><p class="visually-hidden">#000</p></div>
+          </div>
+        </td>
+        <td class="border-top-1">
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-highlight-bg);" data-bs-theme="dark" title="#fff"><p class="visually-hidden">#fff</p></div>
+          </div>
+        </td>
+        <td class="border-top-1">
+          <div>
+            <button class="color-copy" data-clipboard-text="--bs-highlight-bg" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-highlight-bg</code></button>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          {{< markdown >}}Foreground.{{< /markdown >}}
+        </td>
+        <td>
+          <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>
+          <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>
+          <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>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          {{< markdown >}}**Tertiary active** - Use for active components often accompanied to an orange active bar.{{< /markdown >}}
+        </td>
+        <td>
+          {{< markdown >}}Background.{{< /markdown >}}
+        </td>
+        <td class="border-top-1">
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-tertiary-active-bg);" data-bs-theme="light" title="#ddd"><p class="visually-hidden">#ddd</p></div>
+          </div>
+        </td>
+        <td class="border-top-1">
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-tertiary-active-bg);" data-bs-theme="dark" title="#666"><p class="visually-hidden">#666</p></div>
+          </div>
+        </td>
+        <td class="border-top-1">
+          <div>
+            <button class="color-copy" data-clipboard-text="--bs-tertiary-active-bg" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-tertiary-active-bg</code></button>
+          </div>
+        </td>
+      </tr>
+      <tr class="border-bottom-0">
+        <td rowspan="2">
+          {{< markdown >}}**Focus visible** - Use `outer` for the focus outline. Use `inner` for the focus box-shadow.{{< /markdown >}}
+        </td>
+        <td>
+          {{< markdown >}}Outer.{{< /markdown >}}
+        </td>
+        <td class="border-top-1">
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-focus-visible-outer-color);" data-bs-theme="light" title="#000"><p class="visually-hidden">#000</p></div>
+          </div>
+        </td>
+        <td class="border-top-1">
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-focus-visible-outer-color);" data-bs-theme="dark" title="#fff"><p class="visually-hidden">#fff</p></div>
+          </div>
+        </td>
+        <td class="border-top-1">
+          <div>
+            <button class="color-copy" data-clipboard-text="--bs-focus-visible-outer-color" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-focus-visible-outer-color</code></button>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          {{< markdown >}}Inner.{{< /markdown >}}
+        </td>
+        <td>
+          <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>
+          <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>
+          <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>
+        </td>
+      </tr>
+      <tr class="border-bottom-0">
+        <td rowspan="2">
+          {{< markdown >}}**Link** - Use the default `color` for a link and the hover variant for a link hover state.{{< /markdown >}}
+        </td>
+        <td>
+          {{< markdown >}}Default.{{< /markdown >}}
+        </td>
+        <td>
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-link-color);" data-bs-theme="light" title="#000"><p class="visually-hidden">#000</p></div>
+          </div>
+        </td>
+        <td>
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-link-color);" data-bs-theme="dark" title="#fff"><p class="visually-hidden">#fff</p></div>
+          </div>
+        </td>
+        <td>
+          <div>
+            <button class="color-copy" data-clipboard-text="--bs-link-color" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-link-color</code></button>
+            <button class="color-copy" data-clipboard-text="--bs-link-color-rgb" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-link-color-rgb</code></button>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          {{< markdown >}}Hover.{{< /markdown >}}
+        </td>
+        <td class="border-top-1">
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-link-hover-color);" data-bs-theme="light" title="#f16e00"><p class="visually-hidden">#f16e00</p></div>
+          </div>
+        </td>
+        <td class="border-top-1">
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-link-hover-color);" data-bs-theme="dark" title="#ff7900"><p class="visually-hidden">#ff7900</p></div>
+          </div>
+        </td>
+        <td class="border-top-1">
+          <div>
+            <button class="color-copy" data-clipboard-text="--bs-link-hover-color" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-link-hover-color</code></button>
+            <button class="color-copy" data-clipboard-text="--bs-link-hover-color-rgb" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-link-hover-color-rgb</code></button>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          {{< markdown >}}**Code** - For code color text.{{< /markdown >}}
+        </td>
+        <td>
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-code-color);" data-bs-theme="light" title="#666"><p class="visually-hidden">#666</p></div>
+          </div>
+        </td>
+        <td>
+          <div class="border-color">
+            <div class="w-100 h-100" style="background-color: var(--bs-code-color);" data-bs-theme="dark" title="#999"><p class="visually-hidden">#999</p></div>
+          </div>
+        </td>
+        <td>
+          <div>
+            <button class="color-copy" data-clipboard-text="--bs-code-color" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="left"><code>--bs-code-color</code></button>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### Sass variables
+
+#### Boosted variables
+
+Our functional and supporting colors are defined for light and dark modes.
+
+<div class="row">
+  <div class="col-md-6 col-lg-12 col-xl-6">
+{{< scss-docs name="brand-colors" file="scss/_variables.scss" >}}
+  </div>
+  <div class="col-md-6 col-lg-12 col-xl-6">
+{{< scss-docs name="brand-colors-dark" file="scss/_variables-dark.scss" >}}
+  </div>
+</div>
+
+#### Bootstrap variables
+
+Our Boosted variables are mapped to Bootstrap's basic color variables.
+
+{{< scss-docs name="color-variables" file="scss/_variables.scss" >}}
+
+Then, these basic color variables are used to define the theme colors. They are used to create our [CSS theming variables](#theming-1).
+
+<div class="row">
+  <div class="col-md-6 col-lg-12 col-xl-6">
+{{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}}
+  </div>
+  <div class="col-md-6 col-lg-12 col-xl-6">
+{{< scss-docs name="theme-color-dark-variables" file="scss/_variables-dark.scss" >}}
+  </div>
+</div>
diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md
deleted file mode 100644
index 74d1c2d703..0000000000
--- a/site/content/docs/5.3/customize/color.md
+++ /dev/null
@@ -1,663 +0,0 @@
----
-layout: docs
-title: Color
-description: Boosted is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
-group: customize
-aliases:
-  - "/docs/customize/color/"
-toc: true
----
-
-<!-- Boosted mod -->
-## Orange's colors
-
-Color palette is used throughout Boosted in multiple ways, either in components or as utilities for both [`background-color`]({{< docsref "/utilities/background" >}}) and [`color`]({{< docsref "/utilities/colors" >}}).
-
-### Core colors
-
-{{< palette.inline >}}
-{{- range where $.Site.Data.palette "category" "Core colors" }}
-<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 my-3">
-  {{- range $color := .colors }}
-    <figure class="col" aria-label="{{ $color.name }}">
-      <svg viewBox="0 0 100 100" role="img" aria-label="{{ $color.name }}" preserveAspectRatio="xMidYMid meet">
-        <rect fill="{{ $color.hex }}" width="100" height="100"/>
-      </svg>
-      <figcaption class="py-1">
-        <strong>{{ $color.name }}</strong>
-        <br>
-        <code>{{ $color.hex }}</code>
-        <hr class="my-2 bg-transparent border-top {{ if eq $color.class "secondary" "primary" }}border-{{ $color.class }}"{{ else }}" style="border-color:{{ $color.hex }} !important"{{ end }}>
-        <var>{{- $color.variable -}}</var>
-      </figcaption>
-    </figure>
-  {{ end -}}
-</div>
-{{ end -}}
-{{< /palette.inline >}}
-
-### Supporting colors
-
-{{< palette.inline >}}
-{{- range where $.Site.Data.palette "category" "Supporting colors" }}
-<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 my-3">
-  {{- range $color := .colors }}
-    <figure aria-label="{{ $color.name }}">
-      <svg viewBox="0 0 100 100" role="img" aria-label="{{ $color.name }}" preserveAspectRatio="xMidYMid meet">
-        <rect fill="{{ $color.hex }}" width="100" height="100"/>
-      </svg>
-      <figcaption class="py-1">
-        <strong>{{ $color.name }}</strong>
-        <br>
-        <code>{{ $color.hex }}</code>
-        <hr class="my-2 bg-transparent border-top" style="border-color:{{ $color.hex }} !important">
-        <var>{{- $color.variable -}}</var>
-      </figcaption>
-    </figure>
-  {{ end -}}
-</div>
-{{ end -}}
-{{< /palette.inline >}}
-
-### Functional colors
-
-{{< palette.inline >}}
-{{- range where $.Site.Data.palette "category" "Functional colors" }}
-<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 my-3">
-  {{- range $color := .colors }}
-    <figure aria-label="{{ $color.name }}">
-      <svg viewBox="0 0 100 100" role="img" aria-label="{{ $color.name }}" preserveAspectRatio="xMidYMid meet">
-        <rect fill="{{ $color.hex }}" width="100" height="100"/>
-      </svg>
-      <figcaption class="py-1">
-        <strong>{{ $color.name }}</strong>
-        <br>
-        <code>{{ $color.hex }}</code>
-        <hr class="my-2 bg-transparent border-top" style="border-color:{{ $color.hex }} !important">
-        <var>{{- $color.variable -}}</var>
-      </figcaption>
-    </figure>
-  {{ end -}}
-</div>
-{{ end -}}
-{{< /palette.inline >}}
-
-### Grays
-
-{{< palette.inline >}}
-{{- range where $.Site.Data.palette "category" "Grays" }}
-<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 my-3">
-  {{- range $color := .colors }}
-    <figure aria-label="{{ $color.name }}">
-      <svg viewBox="0 0 100 100" role="img" aria-label="{{ $color.name }}" preserveAspectRatio="xMidYMid meet">
-        <rect fill="{{ $color.hex }}" width="100" height="100"/>
-      </svg>
-      <figcaption class="py-1">
-        <strong>{{ $color.name }}</strong>
-        <br>
-        <code>{{ $color.hex }}</code>
-        <hr class="my-2 bg-transparent border-top" style="border-color:{{ $color.hex }} !important">
-        <var>{{- $color.variable -}}</var>
-      </figcaption>
-    </figure>
-  {{ end -}}
-</div>
-{{ end -}}
-{{< /palette.inline >}}
-
-### OBS Gray
-
-{{< palette.inline >}}
-{{- range where $.Site.Data.palette "category" "OBS Gray" }}
-<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 my-3">
-  {{- range $color := .colors }}
-    <figure aria-label="{{ $color.name }}">
-      <svg viewBox="0 0 100 100" role="img" aria-label="{{ $color.name }}" preserveAspectRatio="xMidYMid meet">
-        <rect fill="{{ $color.hex }}" width="100" height="100"/>
-      </svg>
-      <figcaption class="py-1">
-        <strong>{{ $color.name }}</strong>
-        <br>
-        <code>{{ $color.hex }}</code>
-        <hr class="my-2 bg-transparent border-top" style="border-color:{{ $color.hex }} !important">
-        <var>{{- $color.variable -}}</var>
-      </figcaption>
-    </figure>
-  {{ end -}}
-</div>
-{{ end -}}
-{{< /palette.inline >}}
-
-### Usage
-
-Boosted sets an additional layer to use Orange Brand's color tokens names—defined first and mapped to Bootstrap core variables.
-Boosted core uses Bootstrap's naming for maintenance ease, but **you're encouraged to use Orange color tokens when it comes to custom code**.
-
-<div class="row row-cols-1 row-cols-lg-2 mt-4">
-    <div class="col">
-        <h4>Orange color tokens</h4>
-{{< scss-docs name="brand-colors" file="scss/_variables.scss" >}}
-{{< scss-docs name="brand-colors-dark" file="scss/_variables-dark.scss" >}}
-    </div>
-    <div class="col">
-        <h4>Bootstrap core variables</h4>
-{{< scss-docs name="color-variables" file="scss/_variables.scss" >}}
-    </div>
-</div>
-<!-- End mod -->
-
-## Colors
-
-{{< added-in "5.3.0" >}}
-
-We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
-
-Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
-
-{{< callout warning>}}
-**Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
-{{< /callout >}}
-
-<table class="table table-swatches">
-  <thead>
-    <tr>
-      <th style="width: 340px;">Description</th>
-      <th style="width: 200px;" class="ps-0">Swatch</th>
-      <th>Variables</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td rowspan="2">
-        {{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}}
-      </td>
-      <td class="ps-0">
-        <div class="p-3" style="background-color: var(--bs-body-color);">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-body-color`<br>`--bs-body-color-rgb`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3 border" style="background-color: var(--bs-body-bg);">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-body-bg`<br>`--bs-body-bg-rgb`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td rowspan="2">
-        {{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}}
-      </td>
-      <td class="ps-0">
-        <div class="p-3" style="background-color: var(--bs-secondary-color);">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-secondary-color`<br>`--bs-secondary-color-rgb`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3 border" style="background-color: var(--bs-secondary-bg);">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td rowspan="2">
-        {{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}}
-      </td>
-      <td class="ps-0">
-        <div class="p-3" style="background-color: var(--bs-tertiary-color);">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3 border" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}}
-      </td>
-      <td class="ps-0">
-        <div class="p-3" style="background-color: var(--bs-emphasis-color);">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-emphasis-color`<br>`--bs-emphasis-color-rgb`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}}
-      </td>
-      <td class="ps-0">
-        <div class="p-3" style="background-color: var(--bs-border-color);">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-border-color`<br>`--bs-border-color-rgb`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td rowspan="4">
-        {{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}}
-      </td>
-      <td class="ps-0">
-        <div class="p-3 bg-primary">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3" style="background-color: var(--bs-primary-bg-subtle)">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3" style="border: 5px var(--bs-primary-border-subtle) solid">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td rowspan="4">
-        {{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}}
-      </td>
-      <td class="ps-0">
-        <div class="p-3 bg-success">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3" style="background-color: var(--bs-success-bg-subtle)">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3" style="border: 5px var(--bs-success-border-subtle) solid">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td rowspan="4">
-        {{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}}
-      </td>
-      <td class="ps-0">
-        <div class="p-3 bg-danger">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3" style="background-color: var(--bs-danger-bg-subtle)">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3" style="border: 5px var(--bs-danger-border-subtle) solid">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td rowspan="4">
-        {{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}}
-      </td>
-      <td class="ps-0">
-        <div class="p-3 bg-warning">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3" style="background-color: var(--bs-warning-bg-subtle)">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3" style="border: 5px var(--bs-warning-border-subtle) solid">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td rowspan="4">
-        {{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}}
-      </td>
-      <td class="ps-0">
-        <div class="p-3 bg-info">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3" style="background-color: var(--bs-info-bg-subtle)">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3" style="border: 5px var(--bs-info-border-subtle) solid">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td rowspan="4">
-        {{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}}
-      </td>
-      <td class="ps-0">
-        <div class="p-3 bg-light">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3" style="background-color: var(--bs-light-bg-subtle)">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3" style="border: 5px var(--bs-light-border-subtle) solid">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td rowspan="4">
-        {{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}}
-      </td>
-      <td class="ps-0">
-        <div class="p-3 bg-dark">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3" style="background-color: var(--bs-dark-bg-subtle)">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="p-3" style="border: 5px var(--bs-dark-border-subtle) solid">&nbsp;</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}}
-      </td>
-    </tr>
-    <tr>
-      <td class="ps-0">
-        <div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div>
-      </td>
-      <td>
-        {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}}
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-<!--Boosted mod: no "Using the new colors" section because `.bg-primary-subtle` stays orange without opacity in Boosted so the text can't be visible-->
-
-### Theme colors
-
-We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Boosted's `scss/_variables.scss` file.
-
-<div class="row">
-  {{< theme-colors.inline >}}
-  {{- range (index $.Site.Data "theme-colors") }}
-    <div class="col-md-4">
-      <div class="p-3 mb-3 fw-bold text-bg-{{ .name }}">{{ .name | title }}</div>
-    </div>
-  {{ end -}}
-  {{< /theme-colors.inline >}}
-</div>
-
-All these colors are available as a Sass map, `$theme-colors` or `$theme-colors-dark`.
-
-{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
-
-{{< scss-docs name="theme-colors-dark-map" file="scss/_variables-dark.scss" >}}
-
-Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.
-
-### All colors
-
-{{< design-callout-alert >}}
-Some of the colors below, especially the **variants suffixed by** `-100` **to** `-900`, do not belong to the Orange Design System specifications.
-
-Please refer to our Boosted [Orange's colors]({{< docsref "/customize/color#oranges-colors" >}}) section and to the [Color](https://system.design.orange.com/0c1af118d/p/7059a5-colour/b/17b829) guidelines on the Orange Design System website.
-{{< /design-callout-alert >}}
-
-{{< callout warning >}}
-All Boosted colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
-
-Please note that in the Boosted colors, the indigo colors are the same as the purple ones.
-{{< /callout >}}
-
-Be sure to monitor contrast ratios as you customize colors. As shown below, we've added three contrast ratios to each of the main colors—one for the swatch's current colors, one for against white, and one for against black.
-
-<div class="row font-monospace">
-  {{< theme-colors.inline >}}
-  {{- range $color := $.Site.Data.colors }}
-    {{- if (and (not (eq $color.name "white")) (not (eq $color.name "gray")) (not (eq $color.name "gray-dark"))) }}
-    <div class="col-md-4 mb-3">
-      <div class="p-3 mb-2 position-relative swatch-{{ $color.name }}">
-        <strong class="d-block">${{ $color.name }}</strong>
-        {{ $color.hex }}
-      </div>
-      {{ range (seq 100 100 900) }}
-      <div class="p-3 bd-{{ $color.name }}-{{ . }}">${{ $color.name }}-{{ . }}</div>
-      {{ end }}
-    </div>
-    {{ end -}}
-  {{ end -}}
-
-  <div class="col-md-4 mb-3">
-    <div class="p-3 mb-2 position-relative swatch-gray-500">
-      <strong class="d-block">$gray-500</strong>
-      #ccc
-    </div>
-  {{- range $.Site.Data.grays }}
-    <div class="p-3 bd-gray-{{ .name }}">$gray-{{ .name }}</div>
-  {{ end -}}
-  </div>
-  {{< /theme-colors.inline >}}
-
-  <div class="col-md-4 mb-3">
-    <div class="p-3 mb-2 bd-accessible-orange">
-      <strong class="d-block">$accessible-orange</strong>
-      #f16e00
-    </div>
-    <div class="p-3 mb-2 bd-supporting-yellow">
-      <strong class="d-block">$supporting-yellow</strong>
-      #ffd200
-    </div>
-    <div class="p-3 mb-2 bd-black text-white">
-      <strong class="d-block">$black</strong>
-      #000
-    </div>
-    <div class="p-3 mb-2 bd-white border">
-      <strong class="d-block">$white</strong>
-      #fff
-    </div>
-  </div>
-</div>
-
-### Notes on Sass
-
-Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., `$blue-500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass's `mix()` color function.
-
-Using `mix()` is not the same as `lighten()` and `darken()`—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as [shown in this CodePen demo](https://codepen.io/emdeoh/pen/zYOQOPB).
-
-Our `tint-color()` and `shade-color()` functions use `mix()` alongside our `$theme-color-interval` variable, which specifies a stepped percentage value for each mixed color we produce. See the `scss/_functions.scss` and `scss/_variables.scss` files for the full source code.
-
-## Color Sass maps
-
-Boosted's source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values.
-
-- `$colors` lists all our available base (`500`) colors
-- `$theme-colors` lists all semantically named theme colors (shown below)
-- `$background-colors` overrides `$theme-colors` specifically for usage in `.bg-*` utilities
-- `$grays` lists all tints and shades of gray
-
-Within `scss/_variables.scss`, you'll find Boosted's color variables and Sass map. Here's an example of the `$colors` Sass map:
-
-{{< scss-docs name="colors-map" file="scss/_variables.scss" >}}
-
-Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.
-
-### Example
-
-Here's how you can use these in your Sass:
-
-```scss
-.alpha { color: $purple; }
-.beta {
-  color: $yellow-300;
-  background-color: $indigo-900;
-}
-```
-
-[Color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utility classes are also available for setting `color` and `background-color` using the `500` color values.
-
-## Generating utilities
-
-{{< added-in "5.1.0" >}}
-
-Boosted doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0.
-
-1. To start, make sure you've imported our functions, variables, mixins, and utilities.
-2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map.
-3. Merge this new combined map to extend any utility with a `{color}-{level}` class name.
-
-Here's an example that generates text color utilities (e.g., `.text-purple-500`) using the above steps.
-
-```scss
-@import "boosted/scss/functions";
-@import "boosted/scss/variables";
-@import "boosted/scss/variables-dark";
-@import "boosted/scss/maps";
-@import "boosted/scss/mixins";
-@import "boosted/scss/utilities";
-
-$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
-
-$utilities: map-merge(
-  $utilities,
-  (
-    "color": map-merge(
-      map-get($utilities, "color"),
-      (
-        values: map-merge(
-          map-get(map-get($utilities, "color"), "values"),
-          (
-            $all-colors
-          ),
-        ),
-      ),
-    ),
-  )
-);
-
-@import "boosted/scss/utilities/api";
-```
-
-This will generate new `.text-{color}-{level}` utilities for every color and level. You can do the same for any other utility and property as well.
diff --git a/site/content/docs/5.3/customize/overview.md b/site/content/docs/5.3/customize/overview.md
index 1eae7c601a..3f53cc83a2 100644
--- a/site/content/docs/5.3/customize/overview.md
+++ b/site/content/docs/5.3/customize/overview.md
@@ -14,7 +14,9 @@ sections:
     description: Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.
   - title: Options
     description: Customize Boosted with built-in variables to easily toggle global CSS preferences.
-  - title: Color
+  - title: Color palette
+    description: Learn about Boosted's color palette.
+  - title: Color theme
     description: Learn about and customize the color systems that support the entire toolkit.
   - title: Color modes
     description: Explore our default light mode and the new dark mode, or create custom color modes yourself.
diff --git a/site/content/docs/5.3/customize/sass.md b/site/content/docs/5.3/customize/sass.md
index 1f721fccb6..be4e766b27 100644
--- a/site/content/docs/5.3/customize/sass.md
+++ b/site/content/docs/5.3/customize/sass.md
@@ -235,7 +235,7 @@ For example, we use the `primary`, `success`, and `danger` keys from `$theme-col
 
 ### Colors
 
-Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we have, theme colors can also be used as standalone variables, like `$primary`.
+Next to the [Sass maps]({{< docsref "/customize/color-palette#sass-maps" >}}) we have, theme colors can also be used as standalone variables, like `$primary`.
 
 ```scss
 .custom-element {
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 515bd985bc..401eae5ced 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -47,9 +47,9 @@ sitemap_exclude: true
     <div style="width: 50px; height: 50px; background-color:var(--bs-border-color)" data-bs-theme="dark"></div>
   </div>
   <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-border-color-translucent</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-border-color-translucent)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-border-color-translucent)" data-bs-theme="dark"></div>
+    <div style="width: 200px">--bs-border-color-subtle</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-border-color-subtle)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-border-color-subtle)" data-bs-theme="dark"></div>
   </div>
   <div class="d-flex flex-row gap-2 align-items-center">
     <div style="width: 200px">--bs-secondary-color</div>
@@ -97,40 +97,15 @@ sitemap_exclude: true
 
 <div class="d-flex flex-column gap-2">
   <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-hover-color</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-hover-color)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-hover-color)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-active-bg</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-active-bg)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-active-bg)" data-bs-theme="dark"></div>
+    <div style="width: 200px">--bs-tertiary-active-bg</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-tertiary-active-bg)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-tertiary-active-bg)" data-bs-theme="dark"></div>
   </div>
   <div class="d-flex flex-row gap-2 align-items-center">
     <div style="width: 200px">--bs-disabled-color</div>
     <div style="width: 50px; height: 50px; background-color:var(--bs-disabled-color)" data-bs-theme="light"></div>
     <div style="width: 50px; height: 50px; background-color:var(--bs-disabled-color)" data-bs-theme="dark"></div>
   </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-placeholder-color</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-placeholder-color)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-placeholder-color)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-gray-tweak</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-gray-tweak)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-gray-tweak)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-black-tweak</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-black-tweak)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-black-tweak)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-body-color-subtle</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-body-color-subtle)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-body-color-subtle)" data-bs-theme="dark"></div>
-  </div>
 </div>
 
 ## Components
@@ -965,7 +940,7 @@ sitemap_exclude: true
   <div class="col">
     <div class="card">
       <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-        <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+        <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-subtle)">
           <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
         </svg>
       </svg>
@@ -981,7 +956,7 @@ sitemap_exclude: true
       <div class="row g-0">
         <div class="col-md-4">
           <svg class="bd-placeholder-img card-img-top" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-            <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+            <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-subtle)">
               <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
             </svg>
           </svg>
@@ -1028,7 +1003,7 @@ sitemap_exclude: true
   <div class="col">
     <div class="card">
       <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-        <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+        <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-subtle)">
           <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
         </svg>
       </svg>
@@ -1044,7 +1019,7 @@ sitemap_exclude: true
       <div class="row g-0">
         <div class="col-md-4">
           <svg class="bd-placeholder-img card-img-top" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-            <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+            <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-subtle)">
               <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
             </svg>
           </svg>
@@ -1091,7 +1066,7 @@ sitemap_exclude: true
   <div class="col">
     <div class="card">
       <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-        <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+        <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-subtle)">
           <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
         </svg>
       </svg>
@@ -1107,7 +1082,7 @@ sitemap_exclude: true
       <div class="row g-0">
         <div class="col-md-4">
           <svg class="bd-placeholder-img card-img-top" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-            <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+            <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-subtle)">
               <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
             </svg>
           </svg>
@@ -1154,7 +1129,7 @@ sitemap_exclude: true
   <div class="col">
     <div class="card" data-bs-theme="dark">
       <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-        <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+        <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-subtle)">
           <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
         </svg>
       </svg>
@@ -1170,7 +1145,7 @@ sitemap_exclude: true
       <div class="row g-0">
         <div class="col-md-4">
           <svg class="bd-placeholder-img card-img-top" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-            <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+            <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-subtle)">
               <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
             </svg>
           </svg>
@@ -1217,7 +1192,7 @@ sitemap_exclude: true
   <div class="col">
     <div class="card" data-bs-theme="light">
       <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-        <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+        <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-subtle)">
           <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
         </svg>
       </svg>
@@ -1233,7 +1208,7 @@ sitemap_exclude: true
       <div class="row g-0">
         <div class="col-md-4">
           <svg class="bd-placeholder-img card-img-top" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-            <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+            <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-subtle)">
               <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
             </svg>
           </svg>
@@ -3231,7 +3206,7 @@ sitemap_exclude: true
     <div class="modal-dialog modal-dialog-scrollable">
       <div class="modal-content">
         <svg class="modal-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-subtle)">
             <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
           </svg>
         </svg>
@@ -3262,7 +3237,7 @@ sitemap_exclude: true
     <div class="modal-dialog modal-dialog-scrollable">
       <div class="modal-content">
         <svg class="modal-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-subtle)">
             <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
           </svg>
         </svg>
@@ -3293,7 +3268,7 @@ sitemap_exclude: true
     <div class="modal-dialog modal-dialog-scrollable">
       <div class="modal-content">
         <svg class="modal-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-subtle)">
             <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
           </svg>
         </svg>
@@ -3324,7 +3299,7 @@ sitemap_exclude: true
     <div class="modal-dialog modal-dialog-scrollable">
       <div class="modal-content">
         <svg class="modal-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-subtle)">
             <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
           </svg>
         </svg>
@@ -3355,7 +3330,7 @@ sitemap_exclude: true
     <div class="modal-dialog modal-dialog-scrollable">
       <div class="modal-content">
         <svg class="modal-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)">
+          <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-subtle)">
             <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
           </svg>
         </svg>
@@ -8325,7 +8300,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">No theme</h4>
 
-<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3">
+<div class="d-flex flex-column gap-2 align-items-start border p-3">
   <div class="d-flex gap-2 flex-wrap">
     <input type="checkbox" class="btn-check" id="btn-check1" autocomplete="off">
     <label class="btn btn-toggle" for="btn-check1">Single toggle</label>
@@ -8432,7 +8407,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on container</h4>
 
-<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3" data-bs-theme="dark">
+<div class="d-flex flex-column gap-2 align-items-start border p-3" data-bs-theme="dark">
   <div class="d-flex gap-2 flex-wrap">
     <input type="checkbox" class="btn-check" id="btn-check11" autocomplete="off">
     <label class="btn btn-toggle" for="btn-check11">Single toggle</label>
@@ -8539,7 +8514,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on container</h4>
 
-<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3" data-bs-theme="light">
+<div class="d-flex flex-column gap-2 align-items-start border p-3" data-bs-theme="light">
   <div class="d-flex gap-2 flex-wrap">
     <input type="checkbox" class="btn-check" id="btn-check12" autocomplete="off">
     <label class="btn btn-toggle" for="btn-check12">Single toggle</label>
@@ -8646,7 +8621,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Dark theme on component</h4>
 
-<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3" style="background-color: #282d55;">
+<div class="d-flex flex-column gap-2 align-items-start border p-3" style="background-color: #282d55;">
   <div class="d-flex gap-2 flex-wrap">
     <input type="checkbox" class="btn-check" id="btn-check13" autocomplete="off">
     <label class="btn btn-toggle" for="btn-check13" data-bs-theme="dark">Single toggle</label>
@@ -8753,7 +8728,7 @@ sitemap_exclude: true
 
 <h4 class="mt-3">Light theme on component</h4>
 
-<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3" style="background-color: #b5e8f7">
+<div class="d-flex flex-column gap-2 align-items-start border p-3" style="background-color: #b5e8f7">
   <div class="d-flex gap-2 flex-wrap">
     <input type="checkbox" class="btn-check" id="btn-check14" autocomplete="off">
     <label class="btn btn-toggle" for="btn-check14" data-bs-theme="light">Single toggle</label>
diff --git a/site/content/docs/5.3/examples/download-app/download-app.css b/site/content/docs/5.3/examples/download-app/download-app.css
index 67d7562328..3e857ece7c 100644
--- a/site/content/docs/5.3/examples/download-app/download-app.css
+++ b/site/content/docs/5.3/examples/download-app/download-app.css
@@ -1,10 +1,10 @@
-.border-translucent {
-  --bs-border-color: var(--bs-border-color-translucent);
+.border-subtle {
+  --bs-border-color: var(--bs-border-color-subtle);
 }
 
 .custom-vr {
   height: 75px;
-  background-color: var(--bs-border-color-translucent);
+  background-color: var(--bs-border-color-subtle);
 }
 
 @media (max-width: 479.98px) {
@@ -85,7 +85,7 @@ iframe {
 
 .showcase-images img {
   border-radius: 12% / 5%;
-  box-shadow: 10px 15px 50px -5px rgba(var(--bs-link-color-rgb), .2);
+  box-shadow: 10px 15px 50px -5px rgba(var(--bs-secondary-rgb), .2);
   transition: transform .3s ease-in-out;
   transform-origin: center;
 }
diff --git a/site/content/docs/5.3/examples/download-app/index.html b/site/content/docs/5.3/examples/download-app/index.html
index ccee456c03..33fac9a5a9 100644
--- a/site/content/docs/5.3/examples/download-app/index.html
+++ b/site/content/docs/5.3/examples/download-app/index.html
@@ -65,7 +65,7 @@ <h2 class="pt-1 pt-md-3 mb-2 mb-md-3 display-2 text-primary">Implementing mobile
     </div>
   </div>
 
-  <div class="container-xxl pb-3 pb-md-5">
+  <div class="container-xxl pb-3 pb-md-5 border-bottom border-1 border-subtle">
     <div class="row flex-column align-items-center mb-2 pt-4 pt-md-5">
       <div class="col-12 col-md-6">
         <h2 class="h1 text-primary text-center mb-2 mb-md-4">A showcase mobile application</h2>
@@ -170,7 +170,7 @@ <h2 class="h1 text-primary text-center mb-2 mb-md-4">A showcase mobile applicati
     </div>
   </div>
 
-  <div class="py-4 py-md-5 bg-supporting-blue border-top border-1 border-translucent" data-bs-theme="light">
+  <div class="py-4 py-md-5 bg-supporting-blue" data-bs-theme="light">
     <div class="container-xxl d-flex justify-content-center pt-md-2 pb-2">
       <div class="col-12 col-md-6 col-lg-8 col-xl-6">
         <h2 class="h1 mb-4 mb-md-5 text-center">Do you want to start building your app? Get access to the SDK now</h2>
diff --git a/site/content/docs/5.3/examples/grid/grid.css b/site/content/docs/5.3/examples/grid/grid.css
index 93793be2ef..49a53c578b 100644
--- a/site/content/docs/5.3/examples/grid/grid.css
+++ b/site/content/docs/5.3/examples/grid/grid.css
@@ -3,7 +3,7 @@
   padding-bottom: .75rem;
   background-color: var(--bs-secondary-bg); /* Boosted mod: instead of `rgba(112.520718, 44.062154, 249.437846, .15)` */
   /* Boosted mod: no `border` */
-  outline: 1px solid var(--bs-border-color-translucent); /* Boosted mod */
+  outline: 1px solid var(--bs-border-color-subtle); /* Boosted mod */
 }
 
 .themed-container {
@@ -13,5 +13,5 @@
   margin-bottom: 1.5rem;
   background-color: var(--bs-secondary-bg); /* Boosted mod: instead of `rgba(112.520718, 44.062154, 249.437846, .15)` */
   /* Boosted mod: no `border` */
-  outline: 1px solid var(--bs-border-color-translucent); /* Boosted mod */
+  outline: 1px solid var(--bs-border-color-subtle); /* Boosted mod */
 }
diff --git a/site/content/docs/5.3/getting-started/accessibility.md b/site/content/docs/5.3/getting-started/accessibility.md
index eea57cadb1..f8779b835f 100644
--- a/site/content/docs/5.3/getting-started/accessibility.md
+++ b/site/content/docs/5.3/getting-started/accessibility.md
@@ -29,7 +29,7 @@ Because Boosted's components are purposely designed to be fairly generic, author
 <!-- Boosted mod -->
 Some combinations of colors that currently make up Boosted's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.1 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and the [WCAG 2.1 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG21/#non-text-contrast)), particularly when used against a light background.
 
-Unlike Bootstrap, in Boosted **contrasts are locked to ensure they meet [WCAG 2.1 accessibility standards for color contrast](https://www.w3.org/TR/WCAG21/#contrast-minimum)** when using [`.text-*`]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}), by defining `color` and `background-color` altogether. Please refer to [our theme colors]({{< docsref "/customize/color" >}}#all-colors) to have a full preview of Boosted color palette’s reached WCAG level.
+Unlike Bootstrap, in Boosted **contrasts are locked to ensure they meet [WCAG 2.1 accessibility standards for color contrast](https://www.w3.org/TR/WCAG21/#contrast-minimum)** when using [`.text-*`]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}), by defining `color` and `background-color` altogether. Please refer to [our theme colors]({{< docsref "/customize/color-palette" >}}) to have a full preview of Boosted color palette’s reached WCAG level.
 <!-- end mod -->
 
 ### Visually hidden content
diff --git a/site/content/docs/5.3/helpers/focus-ring.md b/site/content/docs/5.3/helpers/focus-ring.md
index 888ffa8ee2..ef9504da0a 100644
--- a/site/content/docs/5.3/helpers/focus-ring.md
+++ b/site/content/docs/5.3/helpers/focus-ring.md
@@ -59,7 +59,7 @@ Customize the focus ring Sass variables to modify all usage of the focus ring st
 
 ### Sass utilities API
 
-In addition to `.focus-ring`, we have several `.focus-ring-*` utilities to modify the helper class defaults. Modify the color with any of our [theme colors]({{< docsref "/customize/color#theme-colors" >}}). Note that the light and dark variants may not be visible on all background colors given current color mode support.
+In addition to `.focus-ring`, we have several `.focus-ring-*` utilities to modify the helper class defaults. Modify the color with any of our [theme colors]({{< docsref "/customize/color-theme#theming" >}}). Note that the light and dark variants may not be visible on all background colors given current color mode support.
 
 {{< example >}}
 {{< focus-ring.inline >}}
diff --git a/site/content/docs/5.3/utilities/background.md b/site/content/docs/5.3/utilities/background.md
index b244c8d317..4607aca599 100644
--- a/site/content/docs/5.3/utilities/background.md
+++ b/site/content/docs/5.3/utilities/background.md
@@ -62,7 +62,7 @@ Here is a list of these extra classes:
 {{< callout >}}
 ### Color naming
 
-Since [Orange brand distinguishes functional colors from supporting colors]({{< docsref "/customize/color#oranges-colors" >}}) and Bootstrap doesn't, naming can be somewhat inconsistent.
+Since [Orange brand distinguishes functional colors from supporting colors]({{< docsref "/customize/color-theme#theming" >}}) and Bootstrap doesn't, naming can be somewhat inconsistent.
 Bootstrap's `background-color` utilities are supported in Boosted, but will result in our core `.bg-supporting-*` utilities—making `.bg-danger` inconsistent with `.btn-danger` color, for example.
 {{< /callout >}}
 
diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index c8ac3330c5..e19e610d4e 100644
--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -127,9 +127,9 @@ Consider our default `.text-primary` utility.
 }
 ```
 
-We use an RGB version of our `$accessible-orange` (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 `$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.
 
-When used in a dark variant context, `--bs-primary-text-rgb` will use the value of `$brand-orange` (with the value of `255, 121, 0`).
+When used in dark mode, `--bs-primary-text-rgb` will use the value of `$supporting-orange` (with the value of `255, 121, 0`).
 
 ### Example
 
diff --git a/site/data/colors.yml b/site/data/colors.yml
index 79064509e9..6172598af3 100644
--- a/site/data/colors.yml
+++ b/site/data/colors.yml
@@ -1,5 +1,5 @@
 - name: blue
-  hex: "#527edb"
+  hex: "#4170d8"
 - name: indigo
   hex: "#a885d8"
 - name: purple
@@ -9,11 +9,11 @@
 - name: red
   hex: "#cd3c14"
 - name: orange
-  hex: "#ff7900"
+  hex: "#f16e00"
 - name: yellow
   hex: "#fc0"
 - name: green
-  hex: "#32c832"
+  hex: "#228722"
 - name: teal
   hex: "#50be87"
 - name: cyan
diff --git a/site/data/palette.yml b/site/data/palette.yml
index ca6a921757..60afcd1d62 100644
--- a/site/data/palette.yml
+++ b/site/data/palette.yml
@@ -1,103 +1,249 @@
 - category: Core colors
   name: "Core colors"
   colors:
-    - name: White
-      class: white
-      hex: "#fff"
-      variable: $white
-    - name: Black
-      class: black
-      hex: "#000"
-      variable: $secondary
-    - name: Accessible orange
-      class: orange
+    - name: Primary
       hex: "#f16e00"
-      variable: $accessible-orange
-    - name: Brand orange
-      class: orange-2
-      hex: "#ff7900"
-      variable: $brand-orange
+      darkHex: "#ff7900"
+    - name: Secondary
+      hex: "#000"
+      darkHex: "#fff"
+    - name: Body Bg
+      hex: "#fff"
+      darkHex: "#141414"
 - category: Supporting colors
   name: "Supporting colors"
   colors:
     - name: Blue
-      class: cyan
       hex: "#4bb4e6"
-      variable: $supporting-blue
     - name: Yellow
-      class: yellow-2
       hex: "#ffd200"
-      variable: $supporting-yellow
     - name: Green
-      class: teal
       hex: "#50be87"
-      variable: $supporting-green
     - name: Purple
-      class: purple
       hex: "#a885d8"
-      variable: $supporting-purple
     - name: Pink
-      class: pink
       hex: "#ffb4e6"
-      variable: $supporting-pink
-- category: OBS Gray
-  name: "OBS Gray"
-  colors:
-    - name: 800
-      class: 800
-      hex: "#595959"
-      variable: $gray-800
+    - name: Orange
+      hex: "#ff7900"
 - category: Functional colors
   name: "Functional colors"
   colors:
-    - name: Green
-      class: green
-      level: success
+    - name: Success
       hex: "#228722"
-      variable: $functional-green
-    - name: Blue
-      class: blue
-      level: info
+      darkHex: "#6c6"
+    - name: Info
       hex: "#4170d8"
-      variable: $functional-blue
-    - name: Yellow
-      class: yellow
-      level: warning
+      darkHex: "#69f"
+    - name: Warning
       hex: "#fc0"
-      variable: $functional-yellow
-    - name: Red
-      class: red
-      level: danger
+      darkHex: "#fc0"
+    - name: Danger
       hex: "#cd3c14"
-      variable: $functional-red
+      darkHex: "#f66"
 - category: Grays
   name: "Grays"
   colors:
-    - name: 300
-      class: 300
+    - name: Secondary Bg
       hex: "#eee"
-      variable: $gray-300
-    - name: 400
-      class: 400
+      darkHex: "#333"
+    - name: Tertiary Active Bg
       hex: "#ddd"
-      variable: $gray-400
-    - name: 500
-      class: 500
+      darkHex: "#666"
+    - name: Tertiary Color
       hex: "#ccc"
-      variable: $gray-500
-    - name: 600
-      class: 600
-      hex: "#999"
-      variable: $gray-600
-    - name: 700
-      class: 700
+      darkHex: "#666"
+    - name: Secondary Color
       hex: "#666"
-      variable: $gray-700
-    - name: 900
-      class: 900
-      hex: "#333"
-      variable: $gray-900
-    - name: 950
-      class: 950
-      hex: "#141414"
-      variable: $gray-950
+      darkHex: "#999"
+- category: ODS colors
+  name: "ODS colors"
+  subcategories:
+  - subcategory: Orange
+    name: "orange"
+    colors:
+      - name: Orange 100
+        variable: $ods-orange-100
+        hex: "#ff7900"
+      - name: Orange 200
+        variable: $ods-orange-200
+        hex: "#f16e00"
+  - subcategory: White
+    name: "white"
+    colors:
+      - name: White 100
+        variable: $ods-white-100
+        hex: "#fff"
+  - subcategory: Gray
+    name: "gray"
+    colors:
+      - name: Gray 200
+        variable: $ods-gray-200
+        hex: "#eee"
+      - name: Gray 300
+        variable: $ods-gray-300
+        hex: "#ddd"
+      - name: Gray 400
+        variable: $ods-gray-400
+        hex: "#ccc"
+      - name: Gray 500
+        variable: $ods-gray-500
+        hex: "#999"
+      - name: Gray 600
+        variable: $ods-gray-600
+        hex: "#666"
+      - name: Gray 700
+        variable: $ods-gray-700
+        hex: "#595959"
+      - name: Gray 800
+        variable: $ods-gray-800
+        hex: "#333"
+      - name: Gray 900
+        variable: $ods-gray-900
+        hex: "#141414"
+  - subcategory: Black
+    name: "black"
+    colors:
+      - name: Black 900
+        variable: $ods-black-900
+        hex: "#000"
+  - subcategory: Forest
+    name: "forest"
+    colors:
+      - name: Forest 100
+        variable: $ods-forest-100
+        hex: "#6c6"
+      - name: Forest 200
+        variable: $ods-forest-200
+        hex: "#228722"
+  - subcategory: Fire
+    name: "fire"
+    colors:
+      - name: Fire 100
+        variable: $ods-fire-100
+        hex: "#f66"
+      - name: Fire 200
+        variable: $ods-fire-200
+        hex: "#cd3c14"
+  - subcategory: Water
+    name: "water"
+    colors:
+      - name: Water 100
+        variable: $ods-water-100
+        hex: "#69f"
+      - name: Water 200
+        variable: $ods-water-200
+        hex: "#4170d8"
+  - subcategory: Sun
+    name: "sun"
+    colors:
+      - name: Sun 100
+        variable: $ods-sun-100
+        hex: "#fc0"
+      - name: Sun 200
+        variable: $ods-sun-200
+        hex: "#8f7200"
+  - subcategory: Blue
+    name: "blue"
+    colors:
+      - name: Blue 100
+        variable: $ods-blue-100
+        hex: "#b5e8f7"
+      - name: Blue 200
+        variable: $ods-blue-200
+        hex: "#80ceef"
+      - name: Blue 300
+        variable: $ods-blue-300
+        hex: "#4bb4e6"
+      - name: Blue 400
+        variable: $ods-blue-400
+        hex: "#3e9dd6"
+      - name: Blue 500
+        variable: $ods-blue-500
+        hex: "#237eca"
+      - name: Blue 600
+        variable: $ods-blue-600
+        hex: "#085ebd"
+  - category: Green
+    name: "green"
+    colors:
+      - name: Green 100
+        variable: $ods-green-100
+        hex: "#b8ebd6"
+      - name: Green 200
+        variable: $ods-green-200
+        hex: "#84d5af"
+      - name: Green 300
+        variable: $ods-green-300
+        hex: "#50be87"
+      - name: Green 400
+        variable: $ods-green-400
+        hex: "#27a971"
+      - name: Green 500
+        variable: $ods-green-500
+        hex: "#198c51"
+      - name: Green 600
+        variable: $ods-green-600
+        hex: "#0a6e31"
+  - subcategory: Pink
+    name: "pink"
+    colors:
+      - name: Pink 100
+        variable: $ods-pink-100
+        hex: "#ffe8f7"
+      - name: Pink 200
+        variable: $ods-pink-200
+        hex: "#ffceef"
+      - name: Pink 300
+        variable: $ods-pink-300
+        hex: "#ffb4e6"
+      - name: Pink 400
+        variable: $ods-pink-400
+        hex: "#ff8ad4"
+      - name: Pink 500
+        variable: $ods-pink-500
+        hex: "#d573bb"
+      - name: Pink 600
+        variable: $ods-pink-600
+        hex: "#bc4d9a"
+  - category: Purple
+    name: "purple"
+    colors:
+      - name: Purple 100
+        variable: $ods-purple-100
+        hex: "#d9c2f0"
+      - name: Purple 200
+        variable: $ods-purple-200
+        hex: "#c1a4e4"
+      - name: Purple 300
+        variable: $ods-purple-300
+        hex: "#a885d8"
+      - name: Purple 400
+        variable: $ods-purple-400
+        hex: "#9373bd"
+      - name: Purple 500
+        variable: $ods-purple-500
+        hex: "#6e4aa7"
+      - name: Purple 600
+        variable: $ods-purple-600
+        hex: "#492191"
+  - category: Yellow
+    name: "yellow"
+    colors:
+      - name: Yellow 100
+        variable: $ods-yellow-100
+        hex: "#fff6b6"
+      - name: Yellow 200
+        variable: $ods-yellow-200
+        hex: "#ffe45b"
+      - name: Yellow 300
+        variable: $ods-yellow-300
+        hex: "#ffd200"
+      - name: Yellow 400
+        variable: $ods-yellow-400
+        hex: "#ffb400"
+      - name: Yellow 500
+        variable: $ods-yellow-500
+        hex: "#b98f11"
+      - name: Yellow 600
+        variable: $ods-yellow-600
+        hex: "#9d6e06"
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index 558b1ea556..0a2a2c5850 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -25,7 +25,8 @@
     - title: Overview
     - title: Sass
     - title: Options
-    - title: Color
+    - title: Color palette
+    - title: Color theme
     - title: Color modes
     - title: Components
     - title: CSS variables
diff --git a/site/data/theme-colors.yml b/site/data/theme-colors.yml
index 93136b654d..35f17e9d29 100644
--- a/site/data/theme-colors.yml
+++ b/site/data/theme-colors.yml
@@ -1,19 +1,35 @@
 - name: primary
-  hex: "#ff7900"
+  hex: "#f16e00"
+  dark_hex: "#ff7900"
+  description: "<b>Primary —</b> Main theme color, used for high emphasis and active component."
 - name: secondary
   hex: "#000"
+  dark_hex: "#fff"
+  description: "<b>Secondary —</b> Secondary theme color, used for emphasized buttons, focus states, and more."
 - name: success
-  hex: "#32c832"
+  hex: "#228722"
+  dark_hex: "#66cc66"
+  description: "<b>Success —</b> Theme color used for positive or successful actions."
 - name: danger
   hex: "#cd3c14"
+  dark_hex: "#ff6666"
+  description: "<b>Danger —</b> Theme color used for errors or dangerous actions."
 - name: warning
-  hex: "#fc0"
+  hex: "#ffcc00"
+  dark_hex: "#ffcc00"
+  description: "<b>Warning —</b> Theme color used for non-destructive warning messages."
   contrast_color: dark
 - name: info
-  hex: "#527edb"
+  hex: "#4170d8"
+  dark_hex: "#6699ff"
+  description: "<b>Info —</b> Theme color used for neutral or informative content."
 - name: light
-  hex: "#ddd"
+  hex: "#ccc"
+  dark_hex: "#ccc"
+  description: "<b>Light —</b> Additional theme option."
   contrast_color: dark
 - name: dark
   hex: "#000"
+  dark_hex: "#000"
+  description: "<b>Dark —</b> Additional theme option."
   contrast_color: white
diff --git a/site/layouts/shortcodes/card.html b/site/layouts/shortcodes/card.html
index a2ebcec9d2..5e0a12eb83 100644
--- a/site/layouts/shortcodes/card.html
+++ b/site/layouts/shortcodes/card.html
@@ -22,7 +22,7 @@
 <div class="card{{ if eq $borders false }} border-0{{ end }}">
   <svg class="bd-placeholder-img card-img-top" width="100%" height="169" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="{{ if $rtl }}العنصر النائب: شرح الصورة{{ else }}Placeholder: Image caption{{ end }}" preserveAspectRatio="xMidYMid slice" focusable="false">
     <rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
-    <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)" aria-hidden="true" focusable="false">
+    <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-tertiary-color)" aria-hidden="true" focusable="false">
       <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
     </svg>
   </svg>
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index 1e6840a02b..94f0f63899 100644
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@ -28,7 +28,7 @@
 
   {{- if eq $show_markup true -}}
     {{- if eq $show_preview true -}}
-      <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom border-tertiary border-1">
+      <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom border-subtle border-1">
         <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
         <div class="d-flex ms-auto">
           <button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
diff --git a/site/layouts/shortcodes/js-docs.html b/site/layouts/shortcodes/js-docs.html
index d056313a48..f0b4753cb7 100644
--- a/site/layouts/shortcodes/js-docs.html
+++ b/site/layouts/shortcodes/js-docs.html
@@ -33,8 +33,8 @@
   {{- end -}}
 
   <div class="bd-example-snippet bd-code-snippet bd-file-ref">
-    <!-- Boosted mod: added `.border-1` and `.border-tertiary` -->
-    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom border-1 border-tertiary">
+    <!-- Boosted mod: added `.border-1` and `.border-subtle` -->
+    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom border-1 border-subtle">
       <a class="font-monospace link-body-emphasis link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
         {{- $file -}}
       </a>
diff --git a/site/layouts/shortcodes/placeholder.html b/site/layouts/shortcodes/placeholder.html
index 41eb8a9a3b..a291f0ab97 100644
--- a/site/layouts/shortcodes/placeholder.html
+++ b/site/layouts/shortcodes/placeholder.html
@@ -5,7 +5,7 @@
     * title: Used in the SVG `title` tag - default: "Placeholder"
     * text: The text to show in the image - default: "width x height"
     * class: Class to add to the `svg` or `img` - default: "bd-placeholder-img"
-    * color: The text color (foreground) - default: "var(--bs-border-color-translucent)"
+    * color: The text color (foreground) - default: "var(--bs-tertiary-color)"
     * background: The background color - default: "var(--bs-secondary-bg)"
     * width: default: "100%"
     * height: default: "180px"
@@ -13,7 +13,7 @@
 */ -}}
 
 {{- $grays := $.Site.Data.grays -}}
-{{- $default_color := "var(--bs-border-color-translucent)" -}} <!--Boosted mod: instead of `(index $grays 2).hex`-->
+{{- $default_color := "var(--bs-tertiary-color)" -}} <!--Boosted mod: instead of `(index $grays 2).hex`-->
 {{- $default_background := "var(--bs-secondary-bg)" -}} <!--Boosted mod: instead of `(index $grays 5).hex`-->
 
 {{- $title := .Get "title" | default "Placeholder" -}}
@@ -31,7 +31,7 @@
 {{- $markup := .Get "markup" | default "svg" -}}
 
 {{- if eq $markup "img" -}}
-  <img class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" style="filter:var(--bs-icon-filter)" alt="{{ $title }} : {{ $text }}" width="{{ $width }}" height="{{ $height }}" src="data:image/svg+xml,%3Csvg%20style='font-size:%201.125rem;%20font-family:system-ui,-apple-system,%22Segoe%20UI%22,Roboto,%22Helvetica%20Neue%22,%22Noto%20Sans%22,%22Liberation%20Sans%22,Arial,sans-serif,%22Apple%20Color%20Emoji%22,%22Segoe%20UI%20Emoji%22,%22Segoe%20UI%20Symbol%22,%22Noto%20Color%20Emoji%22;%20-webkit-user-select:%20none;%20-moz-user-select:%20none;%20user-select:%20none;%20text-anchor:%20middle;'%20width='200'%20height='200'%20xmlns='http://www.w3.org/2000/svg'%3E
+  <img class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" alt="{{ $title }} : {{ $text }}" width="{{ $width }}" height="{{ $height }}" src="data:image/svg+xml,%3Csvg%20style='font-size:%201.125rem;%20font-family:system-ui,-apple-system,%22Segoe%20UI%22,Roboto,%22Helvetica%20Neue%22,%22Noto%20Sans%22,%22Liberation%20Sans%22,Arial,sans-serif,%22Apple%20Color%20Emoji%22,%22Segoe%20UI%20Emoji%22,%22Segoe%20UI%20Symbol%22,%22Noto%20Color%20Emoji%22;%20-webkit-user-select:%20none;%20-moz-user-select:%20none;%20user-select:%20none;%20text-anchor:%20middle;'%20width='200'%20height='200'%20xmlns='http://www.w3.org/2000/svg'%3E
       {{- if $show_title }}%3Ctitle%3E{{ $title }}%3C/title%3E{{ end -}}
       %3Crect%20width='100%25'%20height='100%25'%20fill='{{ replace $background "#" "%23" }}'%3E%3C/rect%3E
       {{- if $show_text }}%3Ctext%20x='50%25'%20y='50%25'%20fill='{{ replace $color "#" "%23" }}'%20dy='.3em'%3E{{ $text }}%3C/text%3E{{ end -}}
diff --git a/site/layouts/shortcodes/scss-docs.html b/site/layouts/shortcodes/scss-docs.html
index f60a38b19b..f0f7103f5a 100644
--- a/site/layouts/shortcodes/scss-docs.html
+++ b/site/layouts/shortcodes/scss-docs.html
@@ -46,8 +46,8 @@
   {{- end -}}
 
   <div class="bd-example-snippet bd-code-snippet bd-file-ref">
-    <!-- Boosted mod: added `.border-1` and `.border-tertiary` -->
-    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom border-1 border-tertiary">
+    <!-- Boosted mod: added `.border-1` and `.border-subtle` -->
+    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom border-1 border-subtle">
       <a class="font-monospace link-body-emphasis link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
         {{- $file -}}
       </a>

From 925e7f830fe1d0ea15ae0c278c4fa0044958f488 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Wed, 13 Dec 2023 15:55:41 +0100
Subject: [PATCH 49/71] Drop variables from dark-mode page

---
 site/content/docs/5.3/dark-mode.md | 100 -----------------------------
 1 file changed, 100 deletions(-)

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 401eae5ced..72f6723033 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -8,106 +8,6 @@ robots: noindex,follow
 sitemap_exclude: true
 ---
 
-## CSS variables
-
-<div class="d-flex flex-column gap-2">
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-body-bg</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-body-bg)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-body-bg)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-body-color</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-body-color)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-body-color)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-highlight-bg</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-highlight-bg)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-highlight-bg)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-highlight-color</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-highlight-color)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-highlight-color)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-secondary-bg</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-secondary-bg)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-secondary-bg)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-tertiary-bg</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-tertiary-bg)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-tertiary-bg)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-border-color</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-border-color)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-border-color)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-border-color-subtle</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-border-color-subtle)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-border-color-subtle)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-secondary-color</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-secondary-color)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-secondary-color)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-link-color</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-link-color)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-link-color)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-link-hover-color</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-link-hover-color)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-link-hover-color)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-primary</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-primary)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-primary)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-success</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-success)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-success)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-info</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-info)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-info)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-warning</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-warning)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-warning)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-danger</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-danger)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-danger)" data-bs-theme="dark"></div>
-  </div>
-</div>
-
-### Additional CSS variables for dark-mode
-
-<div class="d-flex flex-column gap-2">
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-tertiary-active-bg</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-tertiary-active-bg)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-tertiary-active-bg)" data-bs-theme="dark"></div>
-  </div>
-  <div class="d-flex flex-row gap-2 align-items-center">
-    <div style="width: 200px">--bs-disabled-color</div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-disabled-color)" data-bs-theme="light"></div>
-    <div style="width: 50px; height: 50px; background-color:var(--bs-disabled-color)" data-bs-theme="dark"></div>
-  </div>
-</div>
-
 ## Components
 
 ### Accordions

From d6a98fb6e98fa7f14b68bcd2c069f4ce53e2df50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Wed, 13 Dec 2023 15:56:36 +0100
Subject: [PATCH 50/71] Dark mode: fix black card in masonry example (#2408)

---
 site/content/docs/5.3/examples/masonry/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/5.3/examples/masonry/index.html b/site/content/docs/5.3/examples/masonry/index.html
index 72ab25c2c7..c50abb0bf8 100644
--- a/site/content/docs/5.3/examples/masonry/index.html
+++ b/site/content/docs/5.3/examples/masonry/index.html
@@ -57,12 +57,12 @@ <h5 class="card-title">Card title</h5>
       </div>
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">
-      <div class="card bg-black border-dark text-center p-3" data-bs-theme="dark">
+      <div class="card text-bg-secondary border-dark text-center p-3">
         <figure class="mb-0">
           <blockquote class="blockquote">
             <p>A well-known quote, contained in a blockquote element.</p>
           </blockquote>
-          <figcaption class="blockquote-footer mb-0">
+          <figcaption class="blockquote-footer mb-0 text-body-tertiary">
             Someone famous in <cite title="Source Title">Source Title</cite>
           </figcaption>
         </figure>

From 498315970deafd8973e8bb46a1c6e351b22ca73f Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Wed, 13 Dec 2023 19:59:42 +0100
Subject: [PATCH 51/71] Dark mode: Spinner in buttons (#2410)

---
 site/content/docs/5.3/components/spinners.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/content/docs/5.3/components/spinners.md b/site/content/docs/5.3/components/spinners.md
index 54df2c6b48..bea8e48964 100644
--- a/site/content/docs/5.3/components/spinners.md
+++ b/site/content/docs/5.3/components/spinners.md
@@ -160,22 +160,22 @@ Use spinners within buttons to indicate an action is currently processing or tak
 
 {{< example >}}
 <button class="btn btn-primary" type="button" disabled>
-  <span class="spinner-border spinner-border-sm" aria-hidden="true" data-bs-theme="dark"></span>
+  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
   <span class="visually-hidden" role="status">Loading...</span>
 </button>
 <button class="btn btn-primary" type="button" disabled>
-  <span class="spinner-border spinner-border-sm me-2" aria-hidden="true" data-bs-theme="dark"></span>
+  <span class="spinner-border spinner-border-sm me-2" aria-hidden="true"></span>
   <span role="status">Loading...</span>
 </button>
 {{< /example >}}
 
 {{< example >}}
 <button class="btn btn-primary" type="button" disabled>
-  <span class="spinner-grow spinner-grow-sm" aria-hidden="true" data-bs-theme="dark"></span>
+  <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
   <span class="visually-hidden" role="status">Loading...</span>
 </button>
 <button class="btn btn-primary" type="button" disabled>
-  <span class="spinner-grow spinner-grow-sm me-2" aria-hidden="true" data-bs-theme="dark"></span>
+  <span class="spinner-grow spinner-grow-sm me-2" aria-hidden="true"></span>
   <span role="status">Loading...</span>
 </button>
 {{< /example >}}

From 43b5891615c56bf2dd5817e490085878534e8ace Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Thu, 14 Dec 2023 10:02:32 +0100
Subject: [PATCH 52/71] Dark mode: enhance Color Modes v5.3.0 explanation in
 migration guide (#2413)

---
 site/content/docs/5.3/migration.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
index d38f9d7cfc..569db4af83 100644
--- a/site/content/docs/5.3/migration.md
+++ b/site/content/docs/5.3/migration.md
@@ -225,6 +225,10 @@ If you need more details about the changes, please refer to the [v5.3.0 release]
 
 Learn more by reading the new [color modes documentation]({{< docsref "/customize/color-modes" >}}).
 
+{{< callout danger >}}
+Color mode mechanism coming from Bootstrap is available from Boosted v5.3.0. However, the dark mode was not yet available in the Orange Design System specifications at this time. **Please use at least Boosted v5.3.3 to have the dark mode available.**
+{{< /callout >}}
+
 - **Global support for light (default) and dark color modes.** Set color mode globally on the `:root` element, on groups of elements and components with a wrapper class, or directly on components, with `data-bs-theme="light|dark"`. Also included is a new `color-mode()` mixin that can output a ruleset with the `data-bs-theme` selector or a media query, depending on your preference.
 
 - **New extended color system.** We've added new theme colors (but not in `$theme-colors`) for a more nuanced, system-wide color palette with new secondary, tertiary, and emphasis colors for `color` and `background-color`. These new colors are available as Sass variables, CSS variables, and utilities.

From 85aebae37f03b28077d4a614be6cfaa69c611736 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Thu, 14 Dec 2023 13:46:54 +0100
Subject: [PATCH 53/71] Dark mode: pagination hover color (#2405)

---
 scss/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 9123126d9d..1e468ad168 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1658,7 +1658,7 @@ $pagination-focus-outline:          null !default; // Boosted mod
 // fusv-enable
 
 $pagination-hover-color:            var(--#{$prefix}body-color) !default; // Boosted mod: instead of `var(--#{$prefix}link-hover-color)`
-$pagination-hover-bg:               var(--#{$prefix}tertiary-active-bg) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
+$pagination-hover-bg:               var(--#{$prefix}secondary-bg) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
 $pagination-hover-border-color:     $pagination-hover-bg !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 
 $pagination-active-color:           var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `$component-active-color`

From 8ebfc2c06c5e869802c83cf0d14cf072b21ba08f Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Thu, 14 Dec 2023 14:59:02 +0100
Subject: [PATCH 54/71] Dark mode: Add some Sass variables to handle newly
 added CSS vars (#2409)

---
 scss/_root.scss             | 36 ++++++++++++++++-----------------
 scss/_variables-dark.scss   | 40 ++++++++++++++++++++++++++++++-------
 scss/_variables.scss        |  9 +++++++--
 scss/forms/_form-check.scss | 10 +++++-----
 4 files changed, 63 insertions(+), 32 deletions(-)

diff --git a/scss/_root.scss b/scss/_root.scss
index 4250ddb2e5..9a7fdd859b 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -111,8 +111,8 @@
   --#{$prefix}code-color: #{$code-color};
   --#{$prefix}highlight-color: #{$mark-color};
   --#{$prefix}highlight-bg: #{$mark-bg};
-  --#{$prefix}disabled-color: var(--#{$prefix}tertiary-color); // Boosted mod
-  --#{$prefix}tertiary-active-bg: #{$gray-400}; // Boosted mod
+  --#{$prefix}disabled-color: #{$disabled-color}; // Boosted mod
+  --#{$prefix}tertiary-active-bg: #{$tertiary-active-bg}; // Boosted mod
 
   // scss-docs-start root-border-var
   --#{$prefix}border-width: #{$border-width};
@@ -152,12 +152,12 @@
   --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
   // scss-docs-end root-form-validation-variables
 
-  --#{$prefix}form-check-filter: #{$invert-filter}; // Boosted mod
-  --#{$prefix}form-check-input-disabled-color: #{$gray-900}; // Boosted mod
+  --#{$prefix}form-check-filter: #{$form-check-filter}; // Boosted mod
+  --#{$prefix}form-check-input-disabled-color: #{$form-check-input-disabled-color}; // Boosted mod
   --#{$prefix}form-color-disabled-filter: #{$form-color-disabled-filter}; // Boosted mod
   --#{$prefix}form-select-indicator: #{$form-select-indicator}; // Boosted mod
   --#{$prefix}form-select-disabled-indicator: #{$form-select-disabled-indicator}; // Boosted mod
-  --#{$prefix}form-switch-square-bg: #{$black}; // Boosted mod
+  --#{$prefix}form-switch-square-bg: #{$form-switch-square-bg}; // Boosted mod
 
   // Boosted mod
   // Table-specific styles
@@ -167,10 +167,10 @@
   --#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor};
 
   // Breadcrumb-specific styles
-  --#{$prefix}breadcrumb-divider-filter: none;
+  --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter};
 
   // Navigation-specific styles
-  --#{$prefix}nav-link-active-color: #{$body-color};
+  --#{$prefix}nav-link-active-color: #{$nav-link-active-color};
   // End mod
 }
 
@@ -235,8 +235,8 @@
     --#{$prefix}code-color: #{$code-color-dark};
     --#{$prefix}highlight-color: #{$mark-color-dark};
     --#{$prefix}highlight-bg: #{$mark-bg-dark};
-    --#{$prefix}disabled-color: var(--#{$prefix}tertiary-color); // Boosted mod
-    --#{$prefix}tertiary-active-bg: #{$gray-700}; // Boosted mod
+    --#{$prefix}disabled-color: #{$disabled-color-dark}; // Boosted mod
+    --#{$prefix}tertiary-active-bg: #{$tertiary-active-bg-dark}; // Boosted mod
 
     --#{$prefix}border-color: #{$border-color-dark};
     --#{$prefix}border-color-subtle: #{$border-color-subtle-dark}; // Boosted mod
@@ -251,25 +251,25 @@
     --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
     --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
     --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
-    --#{$prefix}form-check-filter: none; // Boosted mod
-    --#{$prefix}form-check-input-disabled-color: #{$gray-700}; // Boosted mod
+    --#{$prefix}form-check-filter: #{$form-check-filter-dark}; // Boosted mod
+    --#{$prefix}form-check-input-disabled-color: #{$form-check-input-disabled-color-dark}; // Boosted mod
     --#{$prefix}form-select-indicator: #{$form-select-indicator-dark}; // Boosted mod
     --#{$prefix}form-select-disabled-indicator: #{$form-select-disabled-indicator-dark}; // Boosted mod
     --#{$prefix}form-color-disabled-filter: #{$form-color-disabled-filter-dark};
-    --#{$prefix}form-switch-square-bg: #{$gray-950}; // Boosted mod
+    --#{$prefix}form-switch-square-bg: #{$form-switch-square-bg-dark}; // Boosted mod
 
     // Boosted mod
     // Table-specific styles
-    --#{$prefix}table-striped-bg-factor: .135;
-    --#{$prefix}table-striped-hover-bg-factor: .855;
-    --#{$prefix}table-hover-bg-factor: .135;
-    --#{$prefix}table-active-bg-factor: .565;
+    --#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor-dark};
+    --#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor-dark};
+    --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor-dark};
+    --#{$prefix}table-active-bg-factor: #{$table-active-bg-factor-dark};
 
     // Breadcrumb-specific styles
-    --#{$prefix}breadcrumb-divider-filter: #{$invert-filter};
+    --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter-dark};
 
     // Navigation-specific styles
-    --#{$prefix}nav-link-active-color: #{$supporting-orange};
+    --#{$prefix}nav-link-active-color: #{$nav-link-active-color-dark};
     // End mod
     // scss-docs-end root-dark-mode-vars
   }
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 7e70c25d20..83a360e1bb 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -80,6 +80,8 @@ $body-secondary-bg-dark:            $gray-900 !default; // Boosted mod: instead
 $body-tertiary-color-dark:          $gray-700 !default; // Boosted mod: instead of `rgba($body-color-dark, .5)`
 $body-tertiary-bg-dark:             $black !default; // Boosted mod: instead of `mix($gray-800, $gray-900, 50%)`
 $body-emphasis-color-dark:          $white !default; // Boosted mod: instead of `$gray-100`
+$disabled-color-dark:               var(--#{$prefix}tertiary-color) !default; // Boosted mod
+$tertiary-active-bg-dark:           $gray-700 !default; // Boosted mod
 $border-color-dark:                 $white !default; // Boosted mod: instead of `$gray-700`
 $border-color-subtle-dark:          $gray-700 !default; // Boosted mod
 $border-color-translucent-dark:     rgba($white, .15) !default;
@@ -109,20 +111,23 @@ $svg-as-custom-props-dark: (
 // Forms
 //
 
-$form-color-disabled-filter-dark:  brightness(0) invert(1) brightness(.4) !default; // Boosted mod
+$form-check-filter-dark:                none !default; // Boosted mod
+$form-check-input-disabled-color-dark:  $gray-700 !default; // Boosted mod
+$form-color-disabled-filter-dark:       brightness(0) invert(1) brightness(.4) !default; // Boosted mod
+$form-switch-square-bg-dark:            $gray-950 !default; // Boosted mod
 
 // Boosted mod: no $form-select-indicator-color-dark
-$form-select-indicator-dark:          escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$white}' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod: instead of Bootstrap svg
-$form-select-disabled-indicator-dark: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$gray-600}' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod
+$form-select-indicator-dark:            escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$white}' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod: instead of Bootstrap svg
+$form-select-disabled-indicator-dark:   escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$gray-600}' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod
 
 // Boosted mod: no $form-switch-color-dark
 // Boosted mod: no $form-switch-bg-image-dark
 
 // scss-docs-start form-validation-colors-dark
-$form-valid-color-dark:             var(--#{$prefix}success-text-emphasis) !default; // Boosted mod: instead of `$green-300`
-$form-valid-border-color-dark:      var(--#{$prefix}success) !default; // Boosted mod: instead of `$green-300`
-$form-invalid-color-dark:           var(--#{$prefix}danger-text-emphasis) !default; // Boosted mod: instead of `$red-300`
-$form-invalid-border-color-dark:    var(--#{$prefix}danger) !default; // Boosted mod: instead of `$red-300`
+$form-valid-color-dark:                 var(--#{$prefix}success-text-emphasis) !default; // Boosted mod: instead of `$green-300`
+$form-valid-border-color-dark:          var(--#{$prefix}success) !default; // Boosted mod: instead of `$green-300`
+$form-invalid-color-dark:               var(--#{$prefix}danger-text-emphasis) !default; // Boosted mod: instead of `$red-300`
+$form-invalid-border-color-dark:        var(--#{$prefix}danger) !default; // Boosted mod: instead of `$red-300`
 // scss-docs-end form-validation-colors-dark
 
 //
@@ -134,4 +139,25 @@ $form-invalid-border-color-dark:    var(--#{$prefix}danger) !default; // Boosted
 
 // Boosted mod: no $accordion-button-icon-dark
 // Boosted mod: no $accordion-button-active-icon-dark
+
+//
+// Breadcrumb
+//
+
+$breadcrumb-divider-filter-dark:      $invert-filter !default; // Boosted mod
+
+//
+// Navs & Tabs
+//
+
+$nav-link-active-color-dark:          $supporting-orange !default; // Boosted mod
+
+//
+// Tables
+//
+
+$table-striped-bg-factor-dark:        .135 !default; // Boosted mod
+$table-striped-hover-bg-factor-dark:  .855 !default; // Boosted mod
+$table-hover-bg-factor-dark:          .135 !default; // Boosted mod
+$table-active-bg-factor-dark:         .565 !default; // Boosted mod
 // scss-docs-end sass-dark-mode-vars
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 1e468ad168..5d9fa6c742 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -670,6 +670,8 @@ $box-shadow-inset:  null !default; // Boosted mod: instead of `inset 0 1px 2px r
 
 $component-active-color:      $black !default;
 $component-active-bg:         $supporting-orange !default;
+$disabled-color:              var(--#{$prefix}tertiary-color) !default; // Boosted mod
+$tertiary-active-bg:          $gray-400 !default; // Boosted mod
 
 // scss-docs-start focus-ring-variables
 $focus-ring-width:      .25rem !default;
@@ -1178,6 +1180,7 @@ $form-check-label-padding-top:            .4375rem !default; // Boosted mod
 $form-check-label-color:                  null !default;
 $form-check-label-cursor:                 null !default;
 $form-check-transition:                   null !default;
+$form-check-filter:                       $invert-filter !default; // Boosted mod
 
 $form-check-input-active-filter:          null !default;
 $form-check-input-active-bg-color:        $component-active-bg !default; // Boosted mod
@@ -1193,7 +1196,7 @@ $form-check-input-checked-color:          $component-active-color !default;
 $form-check-input-checked-bg-color:       $component-active-bg !default;
 $form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
 $form-check-input-checked-bg-image:       var(--#{$prefix}check-icon) !default;
-$form-check-input-disabled-color:         var(--#{$prefix}form-check-input-disabled-color) !default; // Boosted mod
+$form-check-input-disabled-color:         $gray-900 !default; // Boosted mod
 $form-check-input-disabled-filter:        var(--#{$prefix}form-check-filter) !default; // Boosted mod
 $form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
 
@@ -1244,7 +1247,7 @@ $form-switch-bg-square-size:      add(1rem, $spacer * .5) !default;  // Boosted
 $form-switch-border-radius:       null !default; // Boosted mod
 $form-switch-transition:          background-position .15s ease-in-out, $transition-focus !default; // Boosted mod
 
-$form-switch-square-bg:             var(--#{$prefix}form-switch-square-bg) !default; // Boosted mod
+$form-switch-square-bg:             $black !default; // Boosted mod
 $form-switch-bg:                    $white !default; // Boosted mod
 $form-switch-border-color:          $white !default; // Boosted mod
 $form-switch-filter:                var(--#{$prefix}form-check-filter) !default; // Boosted mod
@@ -1438,6 +1441,7 @@ $nav-link-font-size:                null !default;
 $nav-link-font-weight:              $font-weight-bold !default;
 $nav-link-color:                    inherit !default; // Boosted mod: instead of `var(--#{$prefix}link-color)`
 $nav-link-hover-color:              var(--#{$prefix}link-hover-color) !default;
+$nav-link-active-color:             $body-color !default; // Boosted mod
 $nav-link-transition:               null !default; // Boosted mod
 $nav-link-disabled-color:           var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 // Boosted mod: no `$nav-link-focus-box-shadow`
@@ -2105,6 +2109,7 @@ $breadcrumb-bg:                     null !default;
 $breadcrumb-divider-color:          $black !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $breadcrumb-active-color:           null !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $breadcrumb-divider:                url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14' width='7' height='10'><path d='m-.4 12 2 2 7-7-7-7-2 2 5 5z'/></svg>") !default;
+$breadcrumb-divider-filter:         none !default; // Boosted mod
 $breadcrumb-divider-flipped:        $breadcrumb-divider !default;
 $breadcrumb-border-radius:          null !default;
 // scss-docs-end breadcrumb-variables
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 5fbc50cf1a..f31fa58cbb 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -114,9 +114,9 @@
     // Boosted mod
     &:checked,
     &[type="checkbox"]:indeterminate {
-      background-color: $form-check-input-disabled-color;
+      background-color: var(--#{$prefix}form-check-input-disabled-color);
       filter: $form-check-input-disabled-filter;
-      border-color: $form-check-input-disabled-color;
+      border-color: var(--#{$prefix}form-check-input-disabled-color);
     }
     // End mod
   }
@@ -154,7 +154,7 @@
 
 .form-switch {
   // Boosted mod
-  --#{$prefix}switch-gradient: #{linear-gradient(to right, $form-switch-square-bg $form-switch-bg-square-size, transparent)};
+  --#{$prefix}switch-gradient: #{linear-gradient(to right, var(--#{$prefix}form-switch-square-bg) $form-switch-bg-square-size, transparent)};
 
   min-height: $form-switch-width * .5;
   padding-left: $form-switch-padding-start;
@@ -215,9 +215,9 @@
     }
 
     &:disabled {
-      background-color: $form-check-input-disabled-color;
+      background-color: var(--#{$prefix}form-check-input-disabled-color);
       filter: $form-check-input-disabled-filter;
-      border-color: $form-check-input-disabled-color;
+      border-color: var(--#{$prefix}form-check-input-disabled-color);
     }
   }
 

From 0946bfd0e0b506a6d4493f978ad03fa9a92e4827 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Fri, 15 Dec 2023 10:33:07 +0100
Subject: [PATCH 55/71] Dark mode: Fix `<select>` focus (#2404)

---
 scss/_variables.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 5d9fa6c742..17548e0a05 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1131,7 +1131,7 @@ $input-disabled-color:                  var(--#{$prefix}secondary-color) !defaul
 $input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
 $input-disabled-border-color:           null !default;
 
-$input-color:                           null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
+$input-color:                           var(--#{$prefix}body-color) !default;
 $input-border-color:                    var(--#{$prefix}border-color-subtle) !default; // Boosted mod: instead of var(--#{$prefix}border-color)
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      none !default; // Boosted mod
@@ -1307,7 +1307,7 @@ $form-select-border-color:        $input-border-color !default;
 $form-select-border-radius:       $input-border-radius !default;
 $form-select-box-shadow:          none !default; // Boosted mod
 
-$form-select-focus-border-color:  $input-focus-border-color !default;
+$form-select-focus-border-color:  $input-color !default; // Boosted mod: handle a Firefox-specific visible focus rendering where we remove the border from the select box (see `.form-select` rule)
 // Boosted mod: no $form-select-focus-width
 $form-select-focus-box-shadow:    none !default; // Boosted mod
 

From 24aa0e728963b3bf5a605daba8a5851dfcb0c545 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Mon, 18 Dec 2023 10:21:04 +0100
Subject: [PATCH 56/71] Dark mode: Handle properly dark variants (#2419)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 site/content/docs/5.3/components/accordion.md |  6 +----
 site/content/docs/5.3/components/alerts.md    | 23 ++-----------------
 .../content/docs/5.3/components/breadcrumb.md |  6 +----
 site/content/docs/5.3/components/buttons.md   |  6 +----
 .../docs/5.3/components/close-button.md       | 11 +--------
 .../content/docs/5.3/components/list-group.md |  6 +----
 .../docs/5.3/components/local-navigation.md   |  6 +----
 .../content/docs/5.3/components/pagination.md |  6 +----
 .../docs/5.3/components/stepped-process.md    |  6 +----
 site/content/docs/5.3/components/tags.md      |  6 +----
 site/content/docs/5.3/forms/checks-radios.md  |  6 +----
 .../callout-deprecated-dark-variants.html     |  2 +-
 12 files changed, 13 insertions(+), 77 deletions(-)

diff --git a/site/content/docs/5.3/components/accordion.md b/site/content/docs/5.3/components/accordion.md
index 3613ee7be8..d142a54951 100644
--- a/site/content/docs/5.3/components/accordion.md
+++ b/site/content/docs/5.3/components/accordion.md
@@ -208,11 +208,7 @@ Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accord
 
 {{< deprecated-in "5.3.3" >}}
 
-{{< callout warning >}}
-**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
-
-Add `data-bs-theme="dark"` to the `.accordion` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
-{{< /callout >}}
+{{< callout-deprecated-dark-variants "accordion" >}}
 
 ## Accessibility
 
diff --git a/site/content/docs/5.3/components/alerts.md b/site/content/docs/5.3/components/alerts.md
index d9c3677372..cfe7629cf2 100644
--- a/site/content/docs/5.3/components/alerts.md
+++ b/site/content/docs/5.3/components/alerts.md
@@ -131,28 +131,9 @@ When an alert is dismissed, the element is completely removed from the page stru
 
 ## Dark variant
 
-{{< added-in "5.2.0" >}}
-
-Add `.bg-dark` to the `.alert` for a dark variant. Close button can be inverted as well by using the [dark variant of close button]({{< docsref "/components/close-button#dark-variant" >}})
+{{< deprecated-in "5.3.3" >}}
 
-{{< example class="bg-dark" stackblitz_add_js="true" >}}
-<div class="alert alert-success bg-dark" role="alert">
-  <span class="alert-icon"><span class="visually-hidden">Success</span></span>
-  <p>Success notification text goes here.</p>
-</div>
-<div class="alert alert-success bg-dark" role="alert">
-  <span class="alert-icon"><span class="visually-hidden">Success</span></span>
-  <div>
-    <h4 class="alert-heading">Success notification text with <a href="#">a link</a> goes here.</h4>
-    <p>Description text with <a href="#">a link</a> goes here.</p>
-  </div>
-</div>
-<div class="alert alert-warning alert-dismissible fade show bg-dark" role="alert">
-  <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
-  <p>Warning notification text goes here.</p>
-  <button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
-</div>
-{{< /example >}}
+{{< callout-deprecated-dark-variants "alert" >}}
 
 ## CSS
 
diff --git a/site/content/docs/5.3/components/breadcrumb.md b/site/content/docs/5.3/components/breadcrumb.md
index a7183bf4f1..3ef0ecdbf1 100644
--- a/site/content/docs/5.3/components/breadcrumb.md
+++ b/site/content/docs/5.3/components/breadcrumb.md
@@ -100,11 +100,7 @@ $breadcrumb-divider: none;
 
 {{< deprecated-in "5.3.3" >}}
 
-{{< callout warning >}}
-**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
-
-Add `data-bs-theme="dark"` to the `.breadcrumb` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
-{{< /callout >}}
+{{< callout-deprecated-dark-variants "breadcrumb" >}}
 <!-- End mod -->
 
 ## Accessibility
diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md
index c447f11a10..fd387ea5be 100644
--- a/site/content/docs/5.3/components/buttons.md
+++ b/site/content/docs/5.3/components/buttons.md
@@ -163,11 +163,7 @@ Supported social networks are declared in a dedicated Sass map—meaning you're
 
 {{< deprecated-in "5.3.3" >}}
 
-{{< callout warning >}}
-**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
-
-Add `data-bs-theme="dark"` to the `.btn` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
-{{< /callout >}}
+{{< callout-deprecated-dark-variants "btn" >}}
 <!-- End mod -->
 
 ## Disable text wrapping
diff --git a/site/content/docs/5.3/components/close-button.md b/site/content/docs/5.3/components/close-button.md
index da014c8624..2e98097cf0 100644
--- a/site/content/docs/5.3/components/close-button.md
+++ b/site/content/docs/5.3/components/close-button.md
@@ -28,16 +28,7 @@ Disabled close buttons change their `color`. We've also applied `pointer-events:
 
 {{< deprecated-in "5.3.3" >}}
 
-{{< callout warning >}}
-**Heads up!** As of v5.3.3, the `.btn-close-white` class is deprecated. Instead, use `data-bs-theme="dark"` to change the color mode of the close button.
-{{< /callout >}}
-
-Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value.
-
-{{< example class="bg-dark" stackblitz_add_js="true" >}}
-<button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
-<button type="button" class="btn-close" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
-{{< /example >}}
+{{< callout-deprecated-dark-variants "btn-close" >}}
 
 ## Eco-design variant
 
diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md
index 23462bc215..f5c7156a8e 100644
--- a/site/content/docs/5.3/components/list-group.md
+++ b/site/content/docs/5.3/components/list-group.md
@@ -337,11 +337,7 @@ You can use `.stretched-link` on `<label>`s to make the whole list group item cl
 
 {{< deprecated-in "5.3.3" >}}
 
-{{< callout warning >}}
-**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
-
-Add `data-bs-theme="dark"` to the `.list-group` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
-{{< /callout >}}
+{{< callout-deprecated-dark-variants "list-group" >}}
 <!-- End mod -->
 
 ## CSS
diff --git a/site/content/docs/5.3/components/local-navigation.md b/site/content/docs/5.3/components/local-navigation.md
index f1e1cea3d0..de86d8a2cc 100644
--- a/site/content/docs/5.3/components/local-navigation.md
+++ b/site/content/docs/5.3/components/local-navigation.md
@@ -39,11 +39,7 @@ Since the component is supposed to be rendered on a full-size page, there are so
 
 {{< deprecated-in "5.3.3" >}}
 
-{{< callout warning >}}
-**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
-
-Add `data-bs-theme="dark"` to the `.local-nav` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
-{{< /callout >}}
+{{< callout-deprecated-dark-variants "local-nav" >}}
 
 ## CSS
 
diff --git a/site/content/docs/5.3/components/pagination.md b/site/content/docs/5.3/components/pagination.md
index d9d28ea5fd..cef9aa4d48 100644
--- a/site/content/docs/5.3/components/pagination.md
+++ b/site/content/docs/5.3/components/pagination.md
@@ -148,11 +148,7 @@ To avoid pagination wrapping or overflowing, we limit the number or pagination i
 
 {{< deprecated-in "5.3.3" >}}
 
-{{< callout warning >}}
-**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
-
-Add `data-bs-theme="dark"` to the `.pagination` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
-{{< /callout >}}
+{{< callout-deprecated-dark-variants "pagination" >}}
 <!-- End mod -->
 
 ## CSS
diff --git a/site/content/docs/5.3/components/stepped-process.md b/site/content/docs/5.3/components/stepped-process.md
index 9665076a7a..d6feed9daa 100644
--- a/site/content/docs/5.3/components/stepped-process.md
+++ b/site/content/docs/5.3/components/stepped-process.md
@@ -49,11 +49,7 @@ Add `.active` to a `.stepped-process-item` to indicate the current step, alongsi
 
 {{< deprecated-in "5.3.3" >}}
 
-{{< callout warning >}}
-**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
-
-Add `data-bs-theme="dark"` to the `.stepped-process` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
-{{< /callout >}}
+{{< callout-deprecated-dark-variants "stepped-process" >}}
 
 ## CSS
 
diff --git a/site/content/docs/5.3/components/tags.md b/site/content/docs/5.3/components/tags.md
index 02da425c1d..252f4f801f 100644
--- a/site/content/docs/5.3/components/tags.md
+++ b/site/content/docs/5.3/components/tags.md
@@ -120,11 +120,7 @@ Here is an [accessible example](https://a11y-guidelines.orange.com/en/web/compon
 
 {{< deprecated-in "5.3.3" >}}
 
-{{< callout warning >}}
-**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
-
-Add `data-bs-theme="dark"` to the `.tag` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
-{{< /callout >}}
+{{< callout-deprecated-dark-variants "tag" >}}
 
 ## Sizes
 
diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md
index 0489a0f663..32d2b8c630 100644
--- a/site/content/docs/5.3/forms/checks-radios.md
+++ b/site/content/docs/5.3/forms/checks-radios.md
@@ -416,11 +416,7 @@ Star ratings come with a smaller variant: `.star-rating-sm`.
 
 {{< deprecated-in "5.3.3" >}}
 
-{{< callout warning >}}
-**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
-
-Add `data-bs-theme="dark"` to the `.star-rating` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
-{{< /callout >}}
+{{< callout-deprecated-dark-variants "star-rating" >}}
 
 ### Readonly
 
diff --git a/site/layouts/shortcodes/callout-deprecated-dark-variants.html b/site/layouts/shortcodes/callout-deprecated-dark-variants.html
index 062a28c354..632e5a753b 100644
--- a/site/layouts/shortcodes/callout-deprecated-dark-variants.html
+++ b/site/layouts/shortcodes/callout-deprecated-dark-variants.html
@@ -4,6 +4,6 @@
 
 <div class="bd-callout bd-callout-warning">
   <p>
-    <strong>Heads up!</strong> Dark variants for components were deprecated in v5.3.3 with the introduction of color modes.<br>Add <code>data-bs-theme="dark"</code> to the <code>.{{ $component }}</code> or any ancestor element to enable a component-specific color mode. <a href="/docs/customize/color-modes">Learn more about our color modes</a>.
+    <strong>Heads up!</strong> Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.<br><br>Add <code>data-bs-theme="dark"</code> to the <code>.{{ $component }}</code> or any ancestor element to enable a component-specific color mode. <a href="/docs/customize/color-modes">Learn more about our color modes</a>.
   </p>
 </div>

From 024bd989a0789e1c4a4a0dd9939db3c7041d76e8 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Mon, 18 Dec 2023 14:56:33 +0100
Subject: [PATCH 57/71] Dark mode: Deprecate variables and CSS classes (#2424)

---
 scss/_accordion.scss          | 3 +--
 scss/_carousel.scss           | 3 +--
 scss/_dropdown.scss           | 1 +
 scss/_navbar.scss             | 3 ++-
 scss/_variables.scss          | 3 +++
 scss/forms/_form-select.scss  | 2 +-
 site/assets/scss/_navbar.scss | 2 +-
 site/assets/scss/_syntax.scss | 1 -
 8 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index f0fd49f4c7..b7f9d0b72f 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -134,12 +134,11 @@
 
 // Boosted mod: no Flush accordion items
 
-// Boosted mod: no `@if enable-dark-mode` since Boosted doesn't have any dark mode for now
+// Boosted mod: no `@if enable-dark-mode`
 
 //
 // Boosted mod:
 // - Sizes
-// - Dark variant
 //
 
 .accordion-sm {
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index eecc2466de..1053f98356 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -358,5 +358,4 @@
   background-color: $carousel-caption-bg; // Boosted mod
 }
 
-// Boosted mod: no dark carousel nor carousel in dark mode since Boosted doesn't have any dark mode for now
-
+// Boosted mod: no specific rules for dark carousel or dark mode carousel
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index bd9c46798a..8cc0ce1c2f 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -243,6 +243,7 @@
   color: var(--#{$prefix}dropdown-link-color);
 }
 
+// Deprecated in v5.3.3
 // Dark dropdowns
 .dropdown-menu-dark {
   --#{$prefix}dropdown-color: #{$dropdown-dark-color};
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 24eda6b505..6f2d668cc2 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -514,6 +514,7 @@
   @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
 }
 
+// Deprecated in v5.3.3
 // Boosted mod: no `navbar[data-bs-theme="dark"]` selector
 .navbar-dark {
   --#{$prefix}navbar-border-color: #{$navbar-dark-border-color}; // Boosted mod
@@ -527,4 +528,4 @@
   // Boosted mod: No --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; since we handle the variant with filter
 }
 
-// Boosted mod: no `@if enable-dark-mode` since Boosted doesn't have any dark mode for now
+// Boosted mod: no `@if enable-dark-mode`
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 17548e0a05..4c61f17443 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1566,6 +1566,7 @@ $navbar-badge-margin-top:                   .375rem !default;
 // scss-docs-end orange-navbar-variables
 // End mod
 
+// Deprecated in v5.3.3: all `$navbar-dark-*`
 $navbar-dark-border-color:          $gray-700 !default; // Boosted mod
 $navbar-dark-color:                 $white !default; // Boosted mod: instead of `rgba($white, .55)`
 $navbar-dark-hover-color:           $supporting-orange !default; // Boosted mod: instead of `rgba($white, .75)`
@@ -1619,6 +1620,7 @@ $dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-
 // fusv-enable
 // scss-docs-end dropdown-variables
 
+// Deprecated in v5.3.3: all `$dropdown-dark-*`
 $dropdown-dark-color:               $white !default; // Boosted mod
 $dropdown-dark-bg:                  $black !default; // Boosted mod
 $dropdown-dark-border-color:        $gray-700 !default; // Boosted mod
@@ -2222,6 +2224,7 @@ $btn-close-padding-sm:          subtract($btn-icon-padding-x, $spacer * .25) !de
 // End mod
 // scss-docs-end close-variables
 
+// Deprecated in v5.3.3: all `$btn-close-white-*`
 $btn-close-white-color:               $white !default; // Boosted mod
 $btn-close-white-bg:                  transparent !default; // Boosted mod
 $btn-close-white-border-color:        transparent !default; // Boosted mod
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index d4ad2effec..f25590876a 100644
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -74,4 +74,4 @@
   line-height: 1.5; // Boosted mod
 }
 
-// Boosted mod: no `@if enable-dark-mode` since Boosted doesn't have any dark mode for now
+// Boosted mod: no `@if enable-dark-mode`
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 4e2a4fd2c9..e5557ac95d 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -75,4 +75,4 @@
 }
 // End mod
 
-// Boosted mod: no `@include color-mode(dark)` since Boosted doesn't yet fully support dark mode
+// Boosted mod: no `@include color-mode(dark)`
diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
index f4df917f1d..7494458fdf 100644
--- a/site/assets/scss/_syntax.scss
+++ b/site/assets/scss/_syntax.scss
@@ -24,7 +24,6 @@
   --base13: #{$pink-800};
 }
 
-// TODO: these values will need to be modified in order to work with Boosted dark mode
 // Right now, values are from Bootstrap from `--base00` to `--baseOF` and the 4 remaining one are copied from Boosted's light mode
 @include color-mode(dark, true) {
   --base00: #{$gray-950};

From 264129e737939737867efee06e374279ab013cbb Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Tue, 19 Dec 2023 07:53:50 +0100
Subject: [PATCH 58/71] Dark mode: Fix dropdown design (#2417)

---
 scss/_dropdown.scss  | 5 -----
 scss/_variables.scss | 6 +++---
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 8cc0ce1c2f..eb888d5923 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -212,11 +212,6 @@
     &[data-focus-visible-added] {
       outline-offset: -$focus-visible-outer-width;
       box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-inner-color);
-
-      &.active {
-        outline-color: var(--#{$prefix}focus-visible-inner-color);
-        box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-outer-color);
-      }
     }
   }
   // End mod
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 4c61f17443..cd4976e963 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1602,10 +1602,10 @@ $dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
 
 $dropdown-link-color:               null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $dropdown-link-hover-color:         $dropdown-link-color !default;
-$dropdown-link-hover-bg:            var(--#{$prefix}tertiary-color) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
+$dropdown-link-hover-bg:            var(--#{$prefix}secondary-bg) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
 
-$dropdown-link-active-color:        var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `$component-active-color`
-$dropdown-link-active-bg:           var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `$component-active-bg`
+$dropdown-link-active-color:        $dropdown-link-color !default; // Boosted mod: instead of `$component-active-color`
+$dropdown-link-active-bg:           var(--#{$prefix}tertiary-active-bg) !default; // Boosted mod: instead of `$component-active-bg`
 
 $dropdown-link-disabled-color:      var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-color)`
 

From cca55d33a9dcbfcd149141e9ba82bfe14c332002 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Tue, 19 Dec 2023 09:17:57 +0100
Subject: [PATCH 59/71] Dark mode: Local nav and nav underline fix (#2406)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_local-navigation.scss                   | 18 ++---
 scss/_nav.scss                                |  2 +-
 scss/_root.scss                               |  6 --
 scss/_variables-dark.scss                     |  6 --
 scss/_variables.scss                          |  5 +-
 .../docs/5.3/components/local-navigation.md   | 16 ++--
 site/content/docs/5.3/dark-mode.md            | 80 +++++++++----------
 7 files changed, 56 insertions(+), 77 deletions(-)

diff --git a/scss/_local-navigation.scss b/scss/_local-navigation.scss
index 5ee8f9baee..9a6c9f51d8 100644
--- a/scss/_local-navigation.scss
+++ b/scss/_local-navigation.scss
@@ -20,7 +20,7 @@
     width: 100%;
     padding: subtract(var(--#{$prefix}local-nav-padding-y), var(--#{$prefix}local-nav-border-width)) 0 var(--#{$prefix}local-nav-padding-y);
     font-weight: $font-weight-bold;
-    color: var(--#{$prefix}local-nav-hover-color);
+    color: var(--#{$prefix}local-nav-color);
     background-color: transparent;
     border: 0;
 
@@ -30,19 +30,14 @@
 
       &::after {
         margin-right: 0;
-        color: var(--#{$prefix}local-nav-color);
       }
     }
 
     &:not(.collapsed) {
       border-bottom: var(--#{$prefix}local-nav-border-color) solid var(--#{$prefix}local-nav-border-width);
 
-      > [class*="container"] {
-        @include caret(up, $accordion: true);
-
-        &::after {
-          margin-right: 0;
-        }
+      > [class*="container"]::after {
+        transform: rotateZ(180deg);
       }
     }
   }
@@ -61,6 +56,7 @@
 
   .navbar {
     --bs-navbar-padding-y: 0px;
+    --bs-navbar-bg: var(--#{$prefix}local-nav-bg);
     --bs-navbar-border-color: transparent;
 
     .nav-item {
@@ -90,11 +86,7 @@
     }
 
     .nav-link.active {
-      color: var(--#{$prefix}local-nav-color);
-
-      @include media-breakpoint-up(lg) {
-        color: var(--#{$prefix}local-nav-hover-color);
-      }
+      --#{$prefix}navbar-active-color: var(--#{$prefix}local-nav-color);
 
       &::before {
         bottom: calc(-1 * var(--#{$prefix}local-nav-border-width)); // stylelint-disable-line function-disallowed-list
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 35076362a4..8de0c48c43 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -190,7 +190,7 @@
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    color: var(--#{$prefix}nav-underline-link-active-color);
+    --#{$prefix}nav-link-color: var(--#{$prefix}nav-underline-link-active-color);
     background-color: var(--#{$prefix}nav-underline-link-active-bg);
     border-color: var(--#{$prefix}nav-underline-link-active-border-color);
   }
diff --git a/scss/_root.scss b/scss/_root.scss
index 9a7fdd859b..a174b00404 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -168,9 +168,6 @@
 
   // Breadcrumb-specific styles
   --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter};
-
-  // Navigation-specific styles
-  --#{$prefix}nav-link-active-color: #{$nav-link-active-color};
   // End mod
 }
 
@@ -267,9 +264,6 @@
 
     // Breadcrumb-specific styles
     --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter-dark};
-
-    // Navigation-specific styles
-    --#{$prefix}nav-link-active-color: #{$nav-link-active-color-dark};
     // End mod
     // scss-docs-end root-dark-mode-vars
   }
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 83a360e1bb..718c2bac61 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -146,12 +146,6 @@ $form-invalid-border-color-dark:        var(--#{$prefix}danger) !default; // Boo
 
 $breadcrumb-divider-filter-dark:      $invert-filter !default; // Boosted mod
 
-//
-// Navs & Tabs
-//
-
-$nav-link-active-color-dark:          $supporting-orange !default; // Boosted mod
-
 //
 // Tables
 //
diff --git a/scss/_variables.scss b/scss/_variables.scss
index cd4976e963..2183353955 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1441,7 +1441,6 @@ $nav-link-font-size:                null !default;
 $nav-link-font-weight:              $font-weight-bold !default;
 $nav-link-color:                    inherit !default; // Boosted mod: instead of `var(--#{$prefix}link-color)`
 $nav-link-hover-color:              var(--#{$prefix}link-hover-color) !default;
-$nav-link-active-color:             $body-color !default; // Boosted mod
 $nav-link-transition:               null !default; // Boosted mod
 $nav-link-disabled-color:           var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 // Boosted mod: no `$nav-link-focus-box-shadow`
@@ -1468,7 +1467,7 @@ $nav-underline-gap-lg:                    $spacer * .5 !default; // Boosted mod
 $nav-underline-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod: instead of `.125rem`
 $nav-underline-border-color:              var(--#{$prefix}border-color-subtle) !default; // Boosted mod
 $nav-underline-border-radius:             var(--#{$prefix}border-radius) !default; // Boosted mod
-$nav-underline-link-active-color:         var(--#{$prefix}nav-link-active-color) !default; // Boosted mod instead of `var(--#{$prefix}emphasis-color)`
+$nav-underline-link-active-color:         var(--#{$prefix}emphasis-color) !default;
 $nav-underline-link-padding-x:            1.8125rem !default; // Boosted mod
 $nav-underline-link-hover-color:          var(--#{$prefix}link-hover-color) !default; // Boosted mod
 // stylelint-disable-next-line function-disallowed-list
@@ -2464,7 +2463,7 @@ $tag-font-size-sm:                  $font-size-sm !default;
 $local-nav-padding-y:           $navbar-nav-link-padding-y !default;
 $local-nav-color:               null !default;
 $local-nav-bg:                  var(--#{$prefix}body-bg) !default;
-$local-nav-hover-color:         var(--#{$prefix}nav-link-active-color) !default;
+$local-nav-hover-color:         var(--#{$prefix}link-hover-color) !default;
 $local-nav-hover-bg:            var(--#{$prefix}secondary-bg) !default;
 $local-nav-active-color:        var(--#{$prefix}primary) !default;
 $local-nav-active-bg:           var(--#{$prefix}tertiary-active-bg) !default;
diff --git a/site/content/docs/5.3/components/local-navigation.md b/site/content/docs/5.3/components/local-navigation.md
index de86d8a2cc..ccd2710d56 100644
--- a/site/content/docs/5.3/components/local-navigation.md
+++ b/site/content/docs/5.3/components/local-navigation.md
@@ -23,14 +23,14 @@ Since the component is supposed to be rendered on a full-size page, there are so
     <span class="container-xxl">Shop</span>
   </button>
   <div id="collapseLocalNav" class="container-xxl local-nav-collapse d-lg-block collapse">
-      <div class="navbar navbar-expand-lg">
-        <ul class="navbar-nav w-100">
-          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
-          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
-          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
-          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
-        </ul>
-      </div>
+    <div class="navbar navbar-expand-lg">
+      <ul class="navbar-nav w-100">
+        <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+        <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+        <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+        <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+      </ul>
+    </div>
   </div>
 </nav>
 {{< /example >}}
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 72f6723033..c2ac0bbea1 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -3001,14 +3001,14 @@ sitemap_exclude: true
       <span class="container-xxl">Shop</span>
     </button>
     <div id="collapseLocalNav1" class="container-xxl local-nav-collapse d-lg-block collapse">
-        <div class="navbar navbar-expand-lg">
-          <ul class="navbar-nav w-100">
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
-            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
-            <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
-          </ul>
-        </div>
+      <div class="navbar navbar-expand-lg">
+        <ul class="navbar-nav w-100">
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+        </ul>
+      </div>
     </div>
   </nav>
 </div>
@@ -3021,14 +3021,14 @@ sitemap_exclude: true
       <span class="container-xxl">Shop</span>
     </button>
     <div id="collapseLocalNav2" class="container-xxl local-nav-collapse d-lg-block collapse">
-        <div class="navbar navbar-expand-lg">
-          <ul class="navbar-nav w-100">
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
-            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
-            <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
-          </ul>
-        </div>
+      <div class="navbar navbar-expand-lg">
+        <ul class="navbar-nav w-100">
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+        </ul>
+      </div>
     </div>
   </nav>
 </div>
@@ -3041,14 +3041,14 @@ sitemap_exclude: true
       <span class="container-xxl">Shop</span>
     </button>
     <div id="collapseLocalNav3" class="container-xxl local-nav-collapse d-lg-block collapse">
-        <div class="navbar navbar-expand-lg">
-          <ul class="navbar-nav w-100">
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
-            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
-            <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
-          </ul>
-        </div>
+      <div class="navbar navbar-expand-lg">
+        <ul class="navbar-nav w-100">
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+        </ul>
+      </div>
     </div>
   </nav>
 </div>
@@ -3061,14 +3061,14 @@ sitemap_exclude: true
       <span class="container-xxl">Shop</span>
     </button>
     <div id="collapseLocalNav4" class="container-xxl local-nav-collapse d-lg-block collapse">
-        <div class="navbar navbar-expand-lg">
-          <ul class="navbar-nav w-100">
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
-            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
-            <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
-          </ul>
-        </div>
+      <div class="navbar navbar-expand-lg">
+        <ul class="navbar-nav w-100">
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+        </ul>
+      </div>
     </div>
   </nav>
 </div>
@@ -3081,14 +3081,14 @@ sitemap_exclude: true
       <span class="container-xxl">Shop</span>
     </button>
     <div id="collapseLocalNav5" class="container-xxl local-nav-collapse d-lg-block collapse">
-        <div class="navbar navbar-expand-lg">
-          <ul class="navbar-nav w-100">
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
-            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
-            <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
-          </ul>
-        </div>
+      <div class="navbar navbar-expand-lg">
+        <ul class="navbar-nav w-100">
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+        </ul>
+      </div>
     </div>
   </nav>
 </div>

From 8f1140243dab4b3a81fe7173ecc184fc30a0af9c Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Tue, 19 Dec 2023 11:14:38 +0100
Subject: [PATCH 60/71] Dark mode: Table fix (#2418)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_root.scss                         |  6 +-
 scss/_tables.scss                       |  9 ---
 scss/_variables-dark.scss               |  5 +-
 scss/_variables.scss                    | 27 +++++----
 scss/mixins/_table-variants.scss        |  3 -
 site/content/docs/5.3/content/tables.md | 78 ++++++++++++++++++++-----
 6 files changed, 81 insertions(+), 47 deletions(-)

diff --git a/scss/_root.scss b/scss/_root.scss
index a174b00404..5839640caf 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -164,7 +164,6 @@
   --#{$prefix}table-active-bg-factor: #{$table-active-bg-factor};
   --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor};
   --#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor};
-  --#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor};
 
   // Breadcrumb-specific styles
   --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter};
@@ -257,10 +256,9 @@
 
     // Boosted mod
     // Table-specific styles
-    --#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor-dark};
-    --#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor-dark};
-    --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor-dark};
     --#{$prefix}table-active-bg-factor: #{$table-active-bg-factor-dark};
+    --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor-dark};
+    --#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor-dark};
 
     // Breadcrumb-specific styles
     --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter-dark};
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 5ede4b2529..6a75ef5751 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -15,8 +15,6 @@
   --#{$prefix}table-accent-bg: #{$table-accent-bg};
   --#{$prefix}table-striped-color: #{$table-striped-color};
   --#{$prefix}table-striped-bg: #{$table-striped-bg};
-  --#{$prefix}table-striped-hover-color: #{$table-striped-hover-color}; // Boosted mod
-  --#{$prefix}table-striped-hover-bg: #{$table-striped-hover-bg}; // Boosted mod
   --#{$prefix}table-active-color: #{$table-active-color};
   --#{$prefix}table-active-bg: #{$table-active-bg};
   --#{$prefix}table-hover-color: #{$table-hover-color};
@@ -146,13 +144,6 @@
     --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
     --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
   }
-
-  // Boosted mod
-  &.table-striped > tbody > tr:hover > * {
-    --#{$prefix}table-color-state: var(--#{$prefix}table-striped-hover-color);
-    --#{$prefix}table-bg-state: var(--#{$prefix}table-striped-hover-bg);
-  }
-  // End mod
 }
 
 // Table variants set the table cell backgrounds, border colors
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 718c2bac61..27ef3a65e8 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -150,8 +150,7 @@ $breadcrumb-divider-filter-dark:      $invert-filter !default; // Boosted mod
 // Tables
 //
 
-$table-striped-bg-factor-dark:        .135 !default; // Boosted mod
-$table-striped-hover-bg-factor-dark:  .855 !default; // Boosted mod
+$table-striped-bg-factor-dark:        1 !default; // Boosted mod
+$table-active-bg-factor-dark:         .35 !default; // Boosted mod
 $table-hover-bg-factor-dark:          .135 !default; // Boosted mod
-$table-active-bg-factor-dark:         .565 !default; // Boosted mod
 // scss-docs-end sass-dark-mode-vars
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2183353955..fd68100b19 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -890,18 +890,14 @@ $table-accent-bg:                       transparent !default;
 $table-th-font-weight:                  null !default;
 
 $table-striped-color:                   $table-color !default;
-$table-striped-bg-factor:               .065 !default; // Boosted mod
-$table-striped-bg:                      rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-striped-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor)`
-$table-striped-hover-color:             var(--#{$prefix}black) !default; // Boosted mod
-$table-striped-hover-bg-factor:         .4 !default; // Boosted mod
-$table-striped-hover-bg:                rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-striped-hover-bg-factor)) !default; // Boosted mod
-$table-variant-striped-bg-factor:       .2 !default; // Boosted mod
-$table-variant-striped-hover-bg-factor: .865 !default; // Boosted mod
-
-$table-active-color:                    var(--#{$prefix}black) !default; // Boosted mod: instead of `$table-color`
+$table-striped-bg-factor:               .035 !default; // Boosted mod: equivalent to `$gray-200`
+$table-striped-bg:                      rgba(var(--#{$prefix}black-rgb), var(--#{$prefix}table-striped-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor)`
+$table-variant-striped-bg-factor:       .08 !default; // Boosted mod
+
+$table-active-color:                    $table-color !default;
 $table-active-bg-factor:                .135 !default; // Boosted mod
 $table-active-bg:                       rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-active-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor)`
-$table-variant-active-bg-factor:        .6 !default; // Boosted mod
+$table-variant-active-bg-factor:        .4 !default; // Boosted mod
 
 $table-hover-color:                     $table-color !default;
 $table-hover-bg-factor:                 .065 !default; // Boosted mod
@@ -921,12 +917,19 @@ $table-group-separator-color:           currentcolor !default;
 $table-caption-color:                   var(--#{$prefix}caption-color, var(--#{$prefix}emphasis-color)) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $table-caption-padding-y:               .75rem !default; // Boosted mod
 
-// Boosted mod: no $table-bg-scale
+$table-bg-scale:                        -60% !default;
 // scss-docs-end table-variables
 
 // scss-docs-start table-loop
 $table-variants: (
-  "dark": $dark
+  "primary":    shift-color($primary, $table-bg-scale),
+  "secondary":  shift-color($secondary, $table-bg-scale),
+  "success":    shift-color($success, $table-bg-scale),
+  "info":       shift-color($info, $table-bg-scale),
+  "warning":    shift-color($warning, $table-bg-scale),
+  "danger":     shift-color($danger, $table-bg-scale),
+  "light":      $light,
+  "dark":       $dark,
 ) !default;
 // scss-docs-end table-loop
 
diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss
index 029875f7d5..73490a23d6 100644
--- a/scss/mixins/_table-variants.scss
+++ b/scss/mixins/_table-variants.scss
@@ -5,7 +5,6 @@
     $color: color-contrast(opaque($body-bg, $background));
     $hover-bg: mix($color, $background, percentage($table-variant-hover-bg-factor));// Boosted mod
     $striped-bg: mix($color, $background, percentage($table-variant-striped-bg-factor)); // Boosted mod
-    $striped-hover-bg: mix($color, $background, percentage($table-variant-striped-hover-bg-factor)); // Boosted mod
     $active-bg: mix($color, $background, percentage($table-variant-active-bg-factor)); // Boosted mod
     $table-border-color: mix($color, $background, percentage($table-border-factor));
 
@@ -14,8 +13,6 @@
     --#{$prefix}table-border-color: #{$table-border-color};
     --#{$prefix}table-striped-bg: #{$striped-bg};
     --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
-    --#{$prefix}table-striped-hover-bg: #{$striped-hover-bg}; // Boosted mod
-    --#{$prefix}table-striped-hover-color: #{color-contrast($striped-hover-bg)}; // Boosted mod
     --#{$prefix}table-active-bg: #{$active-bg};
     --#{$prefix}table-active-color: #{color-contrast($active-bg)};
     --#{$prefix}table-hover-bg: #{$hover-bg};
diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md
index 6bc770bc16..417ffd73f3 100644
--- a/site/content/docs/5.3/content/tables.md
+++ b/site/content/docs/5.3/content/tables.md
@@ -33,8 +33,21 @@ See [more information about the tables structures](https://a11y-guidelines.orang
 
 ## Variants
 
-<!-- Boosted mod: only .table-dark is allowed -->
-Use contextual class to color tables, table rows or individual cells.
+{{< callout warning >}}
+Boosted doesn't provide any colored variant.
+
+Darker tables are allowed contextually. Add `data-bs-theme="dark"` to the `.table` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
+{{< /callout >}}
+
+<details>
+<summary>See Bootstrap's colored variants</summary>
+<br>
+
+Use contextual classes to color tables, table rows or individual cells.
+
+{{< callout info >}}
+**Heads up!** Because of the more complicated CSS used to generate our table variants, they most likely won't see color mode adaptive styling until v6.
+{{< /callout >}}
 
 <div class="bd-example">
   <table class="table">
@@ -52,31 +65,45 @@ Use contextual class to color tables, table rows or individual cells.
         <td>Cell</td>
         <td>Cell</td>
       </tr>
-    <tr class="table-dark">
-      <th scope="row">Dark</th>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
+      {{< table.inline >}}
+      {{- range (index $.Site.Data "theme-colors") }}
+        <tr class="table-{{ .name }}">
+          <th scope="row">{{ .name | title }}</th>
+          <td>Cell</td>
+          <td>Cell</td>
+        </tr>
+      {{- end -}}
+      {{< /table.inline >}}
     </tbody>
   </table>
 </div>
 
 {{< highlight html >}}
-<!-- On tables -->
-<table class="table-dark">...</table>
+<!-- On tables -->{{< table.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<table class="table-{{ .name }}">...</table>
+{{- end -}}
+{{< /table.inline >}}
 
-<!-- On rows -->
-<tr class="table-dark">...</tr>
+<!-- On rows -->{{< table.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<tr class="table-{{ .name }}">...</tr>
+{{- end -}}
+{{< /table.inline >}}
 
 <!-- On cells (`td` or `th`) -->
-<tr>
-  <td class="table-dark">...</td>
+<tr>{{< table.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+  <td class="table-{{ .name }}">...</td>
+{{- end -}}
+{{< /table.inline >}}
 </tr>
 {{< /highlight >}}
 
 {{< callout info >}}
 {{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
+</details>
 
 ## Accented tables
 
@@ -96,13 +123,17 @@ Use .table-striped-columns to add zebra-striping to any table column.
 
 {{< table class="table table-striped-columns" caption="Boosted striped columns table" >}}
 
-These classes can also be added to table variants:
-
+<details>
+<summary>These classes can also be added to Bootstrap's table colored variants.</summary>
+<br>
 {{< table class="table table-dark table-striped" caption="Boosted dark striped rows table" >}}
 
 {{< table class="table table-dark table-striped-columns" caption="Boosted dark striped columns table" >}}
 
-<!-- Boosted mod : no .table-success -->
+{{< table class="table table-success table-striped" caption="Boosted success striped rows table" >}}
+
+{{< table class="table table-success table-striped-columns" caption="Boosted success striped columns table" >}}
+</details>
 
 ### Hoverable rows
 
@@ -110,13 +141,20 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
 
 {{< table class="table table-hover" caption="Boosted hoverable table" >}}
 
+<details>
+<summary class="mb-3">See it applied on another Bootstrap's variant</summary>
 {{< table class="table table-dark table-hover" caption="Boosted hoverable dark table" >}}
+</details>
 
 These hoverable rows can also be combined with the striped rows variant:
 
 {{< table class="table table-striped table-hover" caption="Boosted hoverable striped table" >}}
 
+<details>
+<summary>See it applied on another Bootstrap's variant</summary>
+<br>
 {{< table class="table table-dark table-striped table-hover" caption="Boosted hoverable dark striped table" >}}
+</details>
 
 ### Active tables
 
@@ -177,6 +215,9 @@ Highlight a table row or cell by adding a `.table-active` class.
 </table>
 ```
 
+<details>
+<summary>See it applied on another Bootstrap's variant</summary>
+<br>
 <div class="bd-example">
   <table class="table table-dark">
     <caption class="visually-hidden">Boosted dark table with an active row and cell</caption>
@@ -231,6 +272,7 @@ Highlight a table row or cell by adding a `.table-active` class.
   </tbody>
 </table>
 ```
+</details>
 
 ## How do the variants and accented tables work?
 
@@ -258,7 +300,11 @@ To display basic tables, Orange Design System recommends using these compact tab
 
 {{< table class="table table-sm" caption="Boosted small table" >}}
 
+<details>
+<summary>See it applied on another Bootstrap's variant</summary>
+<br>
 {{< table class="table table-dark table-sm" caption="Boosted dark small table" >}}
+</details>
 
 ## Table group dividers
 

From 72648f0f5bbd9d2bf2c3c090816b03ba5bb978b7 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Tue, 19 Dec 2023 11:21:16 +0100
Subject: [PATCH 61/71] Dark mode: Toasts (#2380)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 site/content/docs/5.3/components/toasts.md | 13 +++-
 site/content/docs/5.3/dark-mode.md         | 87 ++++++++++++++++++++++
 2 files changed, 97 insertions(+), 3 deletions(-)

diff --git a/site/content/docs/5.3/components/toasts.md b/site/content/docs/5.3/components/toasts.md
index d5793fb4ba..e47ffc0a1b 100644
--- a/site/content/docs/5.3/components/toasts.md
+++ b/site/content/docs/5.3/components/toasts.md
@@ -95,7 +95,7 @@ We use the following JavaScript to trigger our live toast demo:
 
 Toasts are slightly translucent to blend in with what's below them.
 
-{{< example class="bg-dark" stackblitz_add_js="true" >}}
+{{< example class="bg-secondary" stackblitz_add_js="true" >}}
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
     {{< placeholder width="20" height="20" background="#ff7900" class="me-2" text="false" title="false" >}}
@@ -172,10 +172,16 @@ Alternatively, you can also add additional controls and components to toasts.
 
 ### Color schemes
 
-Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-secondary` to the `.toast`. For a crisp edge, we remove the default border with `.border-0`.
+{{< callout-deprecated-dark-variants "toast" >}}
+
+<details>
+<summary>See a dark color scheme example</summary>
+<br>
+
+Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-dark` to the `.toast`. For a crisp edge, we remove the default border with `.border-0`.
 
 {{< example stackblitz_add_js="true" >}}
-<div class="toast align-items-center text-bg-secondary border-0" role="alert" aria-live="assertive" aria-atomic="true">
+<div class="toast align-items-center text-bg-dark border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
   <div class="d-flex">
     <div class="toast-body my-auto">
       Hello, world! This is a toast message.
@@ -184,6 +190,7 @@ Building on the above example, you can create different toast color schemes with
   </div>
 </div>
 {{< /example >}}
+</details>
 
 ## Placement
 
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index c2ac0bbea1..457ef48a87 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -5800,6 +5800,93 @@ sitemap_exclude: true
   </div>
 </div>
 
+### Toasts
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="bd-example border p-3">
+  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header">
+      <svg class="bd-placeholder-img me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#ff7900"/>
+        </svg>
+      <strong class="me-auto">Boosted</strong>
+      <small>11 mins ago</small>
+      <button type="button" class="btn-close ms-2" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+    </div>
+    <div class="toast-body">
+      Hello, world! This is a toast message.
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="bd-example border p-3 bg-body" data-bs-theme="dark">
+  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header">
+      <svg class="bd-placeholder-img me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#ff7900"/>
+        </svg>
+      <strong class="me-auto">Boosted</strong>
+      <small>11 mins ago</small>
+      <button type="button" class="btn-close ms-2" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+    </div>
+    <div class="toast-body">
+      Hello, world! This is a toast message.
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="bd-example border p-3 bg-body" data-bs-theme="light">
+  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header">
+      <svg class="bd-placeholder-img me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#ff7900"/>
+        </svg>
+      <strong class="me-auto">Boosted</strong>
+      <small>11 mins ago</small>
+      <button type="button" class="btn-close ms-2" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+    </div>
+    <div class="toast-body">
+      Hello, world! This is a toast message.
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="bd-example border p-3" style="background-color: #282d55;">
+  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
+    <div class="toast-header">
+      <svg class="bd-placeholder-img me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#ff7900"/>
+        </svg>
+      <strong class="me-auto">Boosted</strong>
+      <small>11 mins ago</small>
+      <button type="button" class="btn-close ms-2" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+    </div>
+    <div class="toast-body">
+      Hello, world! This is a toast message.
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="bd-example border p-3" style="background-color: #b5e8f7">
+  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="light">
+    <div class="toast-header">
+      <svg class="bd-placeholder-img me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#ff7900"/>
+        </svg>
+      <strong class="me-auto">Boosted</strong>
+      <small>11 mins ago</small>
+      <button type="button" class="btn-close ms-2" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+    </div>
+    <div class="toast-body">
+      Hello, world! This is a toast message.
+    </div>
+  </div>
+</div>
+
 ### Tooltips
 
 <h4 class="mt-3">No theme</h4>

From 7a9903a7164e177e2239704ae39c2148724dc612 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Tue, 19 Dec 2023 13:32:37 +0100
Subject: [PATCH 62/71] Dark mode: Navbar Color Schemes (#2412)

---
 site/content/docs/5.3/components/navbar.md | 130 +++++++++++++++++++++
 1 file changed, 130 insertions(+)

diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md
index 1a76e6319e..337afbeee6 100644
--- a/site/content/docs/5.3/components/navbar.md
+++ b/site/content/docs/5.3/components/navbar.md
@@ -345,6 +345,136 @@ Mix and match with other components and utilities as needed.
 
 Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.
 
+<div class="bd-example">
+  <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
+    <div class="container-fluid">
+      <div class="navbar-brand">
+        <a class="stretched-link" href="#">
+          <img src="/docs/5.3/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
+        </a>
+      </div>
+      <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse align-items-end" id="navbarColor01">
+        <ul class="navbar-nav navbar-nav-scroll" style="--bs-scroll-height: 100px;">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Link
+            </a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </li>
+        </ul>
+        <form class="d-flex navbar-item ms-lg-3 mt-md-4" role="search">
+          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+          <button class="btn btn-primary" type="submit">Search</button>
+        </form>
+      </div>
+    </div>
+  </nav>
+
+  <nav class="navbar navbar-expand-lg bg-body-secondary">
+    <div class="container-fluid">
+      <div class="navbar-brand">
+        <a class="stretched-link" href="#">
+          <img src="/docs/5.3/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
+        </a>
+      </div>
+      <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse align-items-end" id="navbarColor02">
+        <ul class="navbar-nav navbar-nav-scroll" style="--bs-scroll-height: 100px;">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Link
+            </a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </li>
+        </ul>
+        <form class="d-flex navbar-item ms-lg-3 mt-md-4" role="search">
+          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+          <button class="btn btn-primary" type="submit">Search</button>
+        </form>
+      </div>
+    </div>
+  </nav>
+
+  <nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;" data-bs-theme="light">
+    <div class="container-fluid">
+      <div class="navbar-brand">
+        <a class="stretched-link" href="#">
+          <img src="/docs/5.3/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
+        </a>
+      </div>
+      <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse align-items-end" id="navbarColor03">
+        <ul class="navbar-nav navbar-nav-scroll" style="--bs-scroll-height: 100px;">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Link
+            </a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </li>
+        </ul>
+        <form class="d-flex navbar-item ms-lg-3 mt-md-4" role="search">
+          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+          <button class="btn btn-primary" type="submit">Search</button>
+        </form>
+      </div>
+    </div>
+  </nav>
+</div>
+
+```html
+<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
+  <!-- Navbar content -->
+</nav>
+
+<nav class="navbar navbar-expand-lg bg-body-secondary">
+  <!-- Navbar content -->
+</nav>
+
+<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;" data-bs-theme="light">
+  <!-- Navbar content -->
+</nav>
+```
+
 ## Containers
 
 Although it's not required, you can wrap a navbar in a `.container` to center it on a page–though note that an inner container is still required. Or you can add a container inside the `.navbar` to only center the contents of a [fixed or static top navbar](#placement).

From 1cb8fe8b2674188f3953cf410ac99891c42a276c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Wed, 20 Dec 2023 07:40:06 +0100
Subject: [PATCH 63/71] Dark mode: revert some changes linked to `main`
 temporary `.text-*` utilities usage before dark mode (#2414)

---
 scss/_variables.scss                         | 2 +-
 site/assets/scss/_content.scss               | 6 ------
 site/content/docs/5.3/components/spinners.md | 4 ++--
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index fd68100b19..09aa0961c1 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -839,7 +839,7 @@ $blockquote-line-height:      1.5 !default; // Boosted mod
 $blockquote-letter-spacing:   $letter-spacing-base * .25 !default; // Boosted mod
 
 $hr-margin-y:                 $spacer !default;
-$hr-color:                    var(--#{$prefix}heading-color) !default; // Boosted mod
+$hr-color:                    inherit !default;
 
 // fusv-disable
 $hr-bg-color:                 null !default; // Deprecated in v5.2.0
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index 2818b5b65e..ca9d611c6e 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -140,22 +140,16 @@
 
   .dropdown-menu {
     --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
-    --bs-dropdown-link-color: var(--bs-white);
-    --bs-dropdown-link-active-color: var(--bs-white);
     --bs-dropdown-link-active-bg: #{$blue-700};
-    --bs-dropdown-link-hover-color: var(--bs-white);
     --bs-dropdown-link-hover-bg: #{$blue-600};
   }
 
   .btn-dropdown {
-    --bs-btn-color: var(--bs-white);
     --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
     --bs-btn-border-color: #{rgba($white, .25)};
     --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
-    --bs-btn-hover-color: inherit;
     --bs-btn-hover-border-color: #{rgba($white, .25)};
     --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
-    --bs-btn-active-color: inherit;
     --bs-btn-active-border-color: #{rgba($white, .5)};
     --bs-btn-focus-border-color: #{rgba($white, .5)};
     --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
diff --git a/site/content/docs/5.3/components/spinners.md b/site/content/docs/5.3/components/spinners.md
index bea8e48964..5f68020467 100644
--- a/site/content/docs/5.3/components/spinners.md
+++ b/site/content/docs/5.3/components/spinners.md
@@ -43,7 +43,7 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c
 <div class="spinner-border text-primary" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
-<div class="spinner-border" role="status">
+<div class="spinner-border text-secondary" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}
@@ -72,7 +72,7 @@ Once again, this spinner is built with `currentColor`, so you can easily change
 <div class="spinner-grow text-primary" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
-<div class="spinner-grow" role="status">
+<div class="spinner-grow text-secondary" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}

From 8aee7c112a18e11c5a67786805a73bb7908cc3cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Thu, 21 Dec 2023 09:30:33 +0100
Subject: [PATCH 64/71] Dark mode: fix list group documentation (#2435)

---
 site/content/docs/5.3/components/list-group.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md
index f5c7156a8e..498dfe76ef 100644
--- a/site/content/docs/5.3/components/list-group.md
+++ b/site/content/docs/5.3/components/list-group.md
@@ -178,7 +178,7 @@ Use contextual classes to style list items with a stateful icon.
 {{- range (index $.Site.Data "palette") }}
   {{- if (eq .category "Functional colors") }}
     {{- range (index .colors) }}
-  <li class="list-group-item list-group-item-{{ .name }}">A simple {{ .name }} list group item</li>
+  <li class="list-group-item list-group-item-{{ .name | lower }}">A simple {{ .name }} list group item</li>
     {{- end -}}
   {{- end -}}
 {{- end -}}
@@ -198,7 +198,7 @@ Contextual classes also work with `.list-group-item-action` for `<a>` and `<butt
 {{- range (index $.Site.Data "palette") -}}
   {{- if (eq .category "Functional colors") -}}
     {{- range (index .colors) }}
-  <a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name }}">A simple {{ .name }} list group item</a>
+  <a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name | lower }}">A simple {{ .name }} list group item</a>
     {{- end -}}
   {{- end -}}
 {{- end -}}

From 3ef9030e6519889efb4c748f7b1c9f7aa3bd9627 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Thu, 21 Dec 2023 11:38:35 +0100
Subject: [PATCH 65/71] Dark mode: Docs about background utility (#2411)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 site/content/docs/5.3/utilities/background.md | 74 +++++++++----------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/site/content/docs/5.3/utilities/background.md b/site/content/docs/5.3/utilities/background.md
index 4607aca599..8fa68109fb 100644
--- a/site/content/docs/5.3/utilities/background.md
+++ b/site/content/docs/5.3/utilities/background.md
@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Background
-description: Convey meaning through `background-color` and add decoration with gradients.
+description: Convey meaning through `background-color`.
 group: utilities
 aliases:
   - "/docs/utilities/background/"
@@ -14,57 +14,57 @@ toc: true
 
 ## Background color
 
-Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities **do set `color`** to ensure contrasts.
+Background utilities like `.bg-*` are generated from our original `$theme-colors` Sass map and respond to color modes.
 
-{{< callout info >}}
-Background utilities like `.bg-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.bg-*-subtle` utility will. This will be resolved in v6.
-{{< /callout >}}
+Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities **do not set `color`**, so depending on the cases you'll want to use:
+* `.text-*` [color utilities]({{< docsref "/utilities/colors" >}}) when the background color remains the same in light and dark mode
+* `.text-bg-*` [color & background helper]({{< docsref "/helpers/color-background" >}}) from our [theme colors]({{< docsref "/customize/color-theme#theming" >}})
+* `[data-bs-theme]` [color mode attribute]({{< docsref "/customize/color-modes#example" >}}) when the element using a background utility contains complex sub-elements such as components that need to respond to color modes
 
-{{< callout info >}}
-In case you need to write over one of these background, prefer using our [color & background helper]({{< docsref "/helpers/color-background" >}}) when it exists.
-{{< /callout >}}
+{{< example >}}
+{{< colors.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<div class="p-3 mb-2 fw-bold bg-{{ .name }}"><span class="text-bg-{{ .name }}">.bg-{{ .name }}</span></div>
+{{- end -}}
+{{< /colors.inline >}}
+<div class="p-3 mb-2 fw-bold bg-body-secondary">.bg-body-secondary</div>
+<div class="p-3 mb-2 fw-bold bg-body">.bg-body</div>
+<div class="p-3 mb-2 fw-bold bg-black text-white">.bg-black</div>
+<div class="p-3 mb-2 fw-bold bg-white text-black">.bg-white</div>
+<div class="p-3 mb-2 fw-bold bg-transparent">.bg-transparent</div>
+{{< /example >}}
+
+Supporting background utilities are generated from our [supporting colors]({{< docsref "/customize/color-theme#supporting" >}}). Please note that their color value stays the same between light and dark mode.
 
-<!-- Boosted mod: inconsistent background color & naming, showing only supporting color naming -->
 {{< example >}}
-<div class="p-3 mb-2 fw-bold bg-primary"><span class="text-bg-primary">.bg-primary</span></div>
-<div class="p-3 mb-2 fw-bold bg-secondary"><span class="text-bg-secondary">.bg-secondary</span></div>
-<div class="p-3 mb-2 fw-bold bg-success"><span class="text-bg-success">.bg-success</span></div>
-<div class="p-3 mb-2 fw-bold bg-danger"><span class="text-bg-danger">.bg-danger</span></div>
-<div class="p-3 mb-2 fw-bold bg-warning"><span class="text-bg-warning">.bg-warning</span></div>
-<div class="p-3 mb-2 fw-bold bg-info"><span class="text-bg-info">.bg-info</span></div>
 <div class="p-3 mb-2 fw-bold bg-supporting-green text-black">.bg-supporting-green</div>
 <div class="p-3 mb-2 fw-bold bg-supporting-purple text-black">.bg-supporting-purple</div>
 <div class="p-3 mb-2 fw-bold bg-supporting-yellow text-black">.bg-supporting-yellow</div>
 <div class="p-3 mb-2 fw-bold bg-supporting-blue text-black">.bg-supporting-blue</div>
 <div class="p-3 mb-2 fw-bold bg-supporting-pink text-black">.bg-supporting-pink</div>
 <div class="p-3 mb-2 fw-bold bg-supporting-orange text-black">.bg-supporting-orange</div>
-<div class="p-3 mb-2 fw-bold bg-light"><span class="text-bg-light">.bg-light</span></div>
-<div class="p-3 mb-2 fw-bold bg-dark"><span class="text-bg-dark">.bg-dark</span></div>
-<div class="p-3 mb-2 fw-bold bg-body-secondary">.bg-body-secondary</div>
-<div class="p-3 mb-2 fw-bold bg-body-tertiary">.bg-body-tertiary</div>
-<div class="p-3 mb-2 fw-bold bg-body">.bg-body</div>
-<div class="p-3 mb-2 fw-bold bg-black text-white">.bg-black</div>
-<div class="p-3 mb-2 fw-bold bg-white text-black">.bg-white</div>
-<div class="p-3 mb-2 fw-bold bg-transparent">.bg-transparent</div>
 {{< /example >}}
 
-{{< callout info >}}
-For each `.background-*` there is a matching `.background-*-subtle` utility. In Boosted, they have exactly the same value so we decided not to display them in the example above so that you don't hesitate on which class to use.
+<details>
+  <summary>See list of Bootstrap-specific background color utilities</summary>
+  <br>
 
-Here is a list of these extra classes:
-{{< background-subtle.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-- `.bg-{{ .name }}-subtle`
-{{- end -}}
-{{< /background-subtle.inline >}}
-{{< /callout >}}
+Another background utility is `.bg-body-tertiary` but doesn't have any matching color in our [grays colors]({{< docsref "/customize/color-theme#grays" >}}) so shouldn't be used for now.
 
-{{< callout >}}
-### Color naming
+{{< example >}}
+<p class="p-3 mb-2 fw-bold bg-body-tertiary">.bg-body-tertiary</p>
+{{< /example >}}
 
-Since [Orange brand distinguishes functional colors from supporting colors]({{< docsref "/customize/color-theme#theming" >}}) and Bootstrap doesn't, naming can be somewhat inconsistent.
-Bootstrap's `background-color` utilities are supported in Boosted, but will result in our core `.bg-supporting-*` utilities—making `.bg-danger` inconsistent with `.btn-danger` color, for example.
-{{< /callout >}}
+In Bootstrap, for each `.bg-*` there is a matching `.bg-*-subtle` utility responding to color modes. In Boosted, subtle colors don't exist so these background utilities have exactly the same value and shouldn't be used. Prefer the regular `.bg-*` utilities instead.
+
+{{< example >}}
+{{< colors.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<div class="p-3 mb-2 fw-bold bg-{{ .name }}-subtle"><span class="text-bg-{{ .name }}">.bg-{{ .name }}-subtle</span></div>
+{{- end -}}
+{{< /colors.inline >}}
+{{< /example >}}
+</details>
 
 <!-- Boosted mod: no background gradient -->
 

From 5092296138eb9f0992911e8b506d6962cde9e9fa Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Wed, 27 Dec 2023 11:07:28 +0100
Subject: [PATCH 66/71] Dark mode: Theme switcher control (#2425)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 .bundlewatch.config.json                      |  2 +-
 scss/_navbar.scss                             | 30 ++++++
 site/assets/scss/_navbar.scss                 | 30 +-----
 .../docs/5.3/components/orange-navbar.md      | 91 ++++++++++++++++++-
 .../content/docs/5.3/customize/color-modes.md |  4 +
 site/layouts/_default/examples.html           | 44 ++++-----
 site/layouts/partials/docs-navbar.html        |  8 +-
 site/layouts/partials/icons.html              | 10 +-
 .../shortcodes/orange-global-headers.html     | 32 ++++++-
 9 files changed, 186 insertions(+), 65 deletions(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 5e66e1b15d..723b769040 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "41.25 kB"
+      "maxSize": "41.5 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 6f2d668cc2..5476b25112 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -99,6 +99,36 @@
       @extend %container-flex-properties;
     }
   }
+
+  // Boosted mod
+  .dropdown {
+    svg {
+      width: $spacer;
+      height: $spacer;
+      margin: calc(-.5 * (#{$spacer} - (var(--#{$prefix}dropdown-font-size, var(--#{$prefix}btn-font-size)) * var(--#{$prefix}dropdown-line-height, var(--#{$prefix}btn-line-height))))) 0; // stylelint-disable-line function-disallowed-list
+      fill: currentcolor;
+    }
+
+    .active svg {
+      display: block if($enable-important-utilities, !important, null);
+    }
+
+    .dropdown-toggle::after {
+      margin-left: $spacer * .25;
+      border-width: .3125rem;
+    }
+
+    .dropdown-menu {
+      --bs-dropdown-min-width: 8.75rem;
+
+      @include media-breakpoint-down(lg) {
+        @include rfs($font-size-sm, --bs-dropdown-font-size);
+        --bs-dropdown-line-height: #{$line-height-sm};
+        --bs-dropdown-item-padding-y: #{$dropdown-item-padding-y + .0625rem};
+      }
+    }
+  }
+  // End mod
 }
 
 
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index e5557ac95d..fa35b19ee5 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -1,6 +1,4 @@
 .bd-navbar {
-  --bd-navbar-dropdown-item-icon-size: 1.25rem; // Boosted mod
-
   // Boosted mod: no padding
   // Boosted mod: no background-color
   // Boosted mod: no box-shadow
@@ -13,39 +11,15 @@
 
   // Boosted mod: no .navbar-brand
 
-  // Boosted mod: Needed since our icons are larger in the navbar
-  .bi {
-    width: var(--bd-navbar-dropdown-item-icon-size);
-    height: var(--bd-navbar-dropdown-item-icon-size);
-  }
-  // End mod
-
   // Boosted mod: no .navbar-nav-svg
 
   // Boosted mod: no .offcanvas-lg
 
   // Boosted mod: no .dropdown-toggle
 
-  // Boosted mod
-  .dropdown-menu {
-    --bs-dropdown-min-width: 12rem;
-    @include rfs($font-size-sm, --bs-dropdown-font-size);
-    --bs-dropdown-line-height: #{$line-height-sm};
-    --bs-dropdown-item-padding-y: #{$dropdown-item-padding-y + .0625rem};
-
-    .dropdown-item {
-      height: 2.5rem;
-    }
+  // Boosted mod: no .dropdown-menu
 
-    .active .bi {
-      display: block !important; // stylelint-disable-line declaration-no-important
-    }
-  }
-  // End mod
-
-  .dropdown-menu-end {
-    --bs-dropdown-min-width: 8rem;
-  }
+  // Boosted mod: no .dropdown-menu-end
 
   // Boosted mod: Specificity
   .navbar-nav.flex-row {
diff --git a/site/content/docs/5.3/components/orange-navbar.md b/site/content/docs/5.3/components/orange-navbar.md
index 6aa628126d..fc7486599c 100644
--- a/site/content/docs/5.3/components/orange-navbar.md
+++ b/site/content/docs/5.3/components/orange-navbar.md
@@ -376,6 +376,93 @@ You can add a search input into your Global header.
 </header>
 ```
 
+### With mode selector
+
+You can add a mode selector control into your Global header.
+
+{{< callout info >}}
+In this section, the dropdown menu items are not functional because the JavaScript is linked to the documentation mode selector; the active state and the tick icon are not rendered correctly. But don't worry, it'll work perfectly in your project.
+
+Don't forget to import the [corresponding color modes JavaScript]({{< docsref "/customize/color-modes#javascript" >}}) in your project.
+{{< /callout >}}
+
+<div class="bd-example-snippet">
+  <div class="bd-example p-0">
+    <header data-bs-theme="dark">
+      {{< orange-global-headers id="global-header-6" mode="theme" demo=true aria_label="Global navigation - With mode selector example">}}
+      {{< /orange-global-headers >}}
+    </header>
+  </div>
+</div>
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol id="check2" viewBox="0 0 1000 1000">
+    <path d="M729.667 250 396.333 583.333l-125-125L188 541.667l125 125L396.333 750l83.334-83.333L813 333.333z"/>
+  </symbol>
+  <symbol id="ui-auto-mode" viewBox="0 0 1000 1000">
+    <path d="M500 75C265.3 75 75 265.5 75 500.5S265.3 926 500 926s425-190.5 425-425.5S734.7 75 500 75m0 775V150c192.6.9 350 157.5 350 350.5S692.6 849.1 500 850"/>
+  </symbol>
+  <symbol id="ui-dark-mode" viewBox="0 0 1000 1000">
+    <path d="M675 649.88c-179.493 0-325-145.57-325-325.141A324.478 324.478 0 0 1 465.721 76C247.03 93.463 75 276.537 75 499.815 75 734.638 265.279 925 500 925c223.181 0 406.175-172.106 423.63-390.891A324.222 324.222 0 0 1 675 649.88Z"/>
+  </symbol>
+  <symbol id="ui-light-mode" viewBox="0 0 1000 1000">
+    <path d="M287.868 712.132a25.073 25.073 0 0 0-35.355 0l-53.033 53.033a25 25 0 0 0 35.355 35.355l53.033-53.033a25.073 25.073 0 0 0 0-35.355Zm424.264-424.264a25.073 25.073 0 0 0 35.355 0l53.033-53.033a25 25 0 0 0-35.355-35.355l-53.033 53.033a25.073 25.073 0 0 0 0 35.355Zm35.355 424.264a25.073 25.073 0 0 0-35.355 0 25.073 25.073 0 0 0 0 35.355l53.033 53.033a25 25 0 0 0 35.355-35.355ZM252.513 287.868a25.073 25.073 0 0 0 35.355 0 25.073 25.073 0 0 0 0-35.355l-53.033-53.033a25 25 0 0 0-35.355 35.355ZM200 500a25.073 25.073 0 0 0-25-25h-75a25 25 0 0 0 0 50h75a25.073 25.073 0 0 0 25-25Zm700-25h-75a25 25 0 0 0 0 50h75a25 25 0 0 0 0-50ZM500 800a25.073 25.073 0 0 0-25 25v75a25 25 0 0 0 50 0v-75a25.073 25.073 0 0 0-25-25Zm0-600a25.073 25.073 0 0 0 25-25v-75a25 25 0 0 0-50 0v75a25.073 25.073 0 0 0 25 25Zm0 50c-138.071 0-250 111.929-250 250s111.929 250 250 250 250-111.929 250-250-111.929-250-250-250Z"/>
+  </symbol>
+</svg>
+
+<header data-bs-theme="dark">
+  <nav class="navbar navbar-expand-lg" aria-label="Global navigation - With mode selector example">
+    <div class="container-xxl">
+
+      <!-- Orange brand logo -->
+      ...
+
+      <!-- Burger menu (visible on small screens) -->
+      ...
+
+      <!-- Navbar with links -->
+      ...
+
+      <!-- Navbar with mode selector -->
+      <div id="global-header-6.2" class="navbar-collapse d-lg-flex global-header-6 collapse show">
+        <ul class="navbar-nav flex-row">
+          <li class="nav-item dropdown">
+            <button class="nav-link nav-icon dropdown-toggle" id="bd-theme" 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-text">Toggle mode</span>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end mb-2" aria-labelledby="bd-theme-text">
+              <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>
+                  Light
+                  <svg class="ms-auto d-none"><use href="#check2"></use></svg>
+                </button>
+              </li>
+              <li>
+                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
+                  <svg class="me-2"><use href="#ui-dark-mode"></use></svg>
+                  Dark
+                  <svg class="ms-auto d-none"><use href="#check2"></use></svg>
+                </button>
+              </li>
+              <li>
+                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="body" 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>
+                </button>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</header>
+```
+
 ### Minimizing behavior
 
 When scrolling the page, for breakpoints from `md` to `xxl`, the Global header's height decreases when `.sticky-top` is used on `<header>`.
@@ -401,7 +488,7 @@ It should be visible only for the larger screens (`lg` to `xxl` breakpoints) usi
 
 <div class="bd-example p-0">
   <header data-bs-theme="dark">
-    {{< orange-global-headers id="global-header-6" mode="actions" title=true title_2=true labels=true navigation=true aria_label="Global navigation - Standard example with nav-under">}}
+    {{< orange-global-headers id="global-header-7" mode="actions" title=true title_2=true labels=true navigation=true aria_label="Global navigation - Standard example with nav-under">}}
     {{< /orange-global-headers >}}
   </header>
 </div>
@@ -427,7 +514,7 @@ It should be visible only for the larger screens (`lg` to `xxl` breakpoints) usi
 
   <nav class="navbar navbar-expand-lg" aria-label="Global navigation - Nav-under example">
     <div class="container-xxl">
-      <div id="global-header-6.1" class="navbar-collapse collapse m-0 global-header-6">
+      <div id="global-header-7.1" class="navbar-collapse collapse m-0 global-header-7">
         <ul class="navbar-nav">
           <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Label</a></li>
           <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md
index 7cb5310c41..8c241cbfd3 100644
--- a/site/content/docs/5.3/customize/color-modes.md
+++ b/site/content/docs/5.3/customize/color-modes.md
@@ -189,6 +189,10 @@ For example, you can create a "blue theme" with the selector `data-bs-theme="blu
 
 To allow visitors or users to toggle color modes, you'll need to create a toggle element to control the `data-bs-theme` attribute on the root element, `<html>`. We've built a toggler in our documentation that initially defers to a user's current system color mode, but provides an option to override that and pick a specific color mode.
 
+{{< callout info >}}
+Check out our [Orange navbar mode selector variant]({{< docsref "/components/orange-navbar#with-mode-selector" >}}) to add a color mode selector to your navbar.
+{{< /callout >}}
+
 Here's a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it's implemented using HTML and CSS from our own components. It is suggested to include the JavaScript at the top of your page to reduce potential screen flickering during reloading of your site. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control.
 
 {{< example lang="js" show_preview="false" >}}
diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html
index 0748462ec0..aefe50e0e3 100644
--- a/site/layouts/_default/examples.html
+++ b/site/layouts/_default/examples.html
@@ -76,21 +76,17 @@
       /* Boosted mod: no `.btn-bd-primary` custom style */
 
       .bd-mode-toggle {
-        --bd-mode-toggle-icon-size: 1.25rem; /* Boosted mod */
         z-index: 1500;
       }
 
-      .bd-mode-toggle .dropdown-menu .active .bi {
-        display: block !important;
+      .bd-mode-toggle svg {
+        width: 1.25rem;
+        height: 1.25rem;
       }
 
-      /* Boosted mod */
-      .bd-mode-toggle .dropdown-item .bi,
-      #bd-theme .bi {
-        width: var(--bd-mode-toggle-icon-size);
-        height: var(--bd-mode-toggle-icon-size);
+      .bd-mode-toggle .dropdown-menu .active .bi {
+        display: block !important;
       }
-      /* End mod */
     </style>
 
     {{ range .Page.Params.extra_css }}
@@ -100,11 +96,11 @@
   </head>
   <body{{ with .Page.Params.body_class }} class="{{ . }}"{{ end }}>
     <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-      <symbol id="check2" viewBox="0 0 15 12">
-        <polygon points="13 0 5 8 2 5 0 7 3 10 5 12 7 10 15 2 13 0"/>
+      <symbol id="check2" viewBox="0 0 1000 1000">
+        <path d="M729.667 250 396.333 583.333l-125-125L188 541.667l125 125L396.333 750l83.334-83.333L813 333.333z"/>
       </symbol>
-      <symbol id="circle-half" viewBox="0 0 16 16">
-        <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
+      <symbol id="ui-auto-mode" viewBox="0 0 1000 1000">
+        <path d="M500 75C265.3 75 75 265.5 75 500.5S265.3 926 500 926s425-190.5 425-425.5S734.7 75 500 75m0 775V150c192.6.9 350 157.5 350 350.5S692.6 849.1 500 850"/>
       </symbol>
       <symbol id="ui-dark-mode" viewBox="0 0 1000 1000">
         <path d="M675 649.88c-179.493 0-325-145.57-325-325.141A324.478 324.478 0 0 1 465.721 76C247.03 93.463 75 276.537 75 499.815 75 734.638 265.279 925 500 925c223.181 0 406.175-172.106 423.63-390.891A324.222 324.222 0 0 1 675 649.88Z"/>
@@ -114,36 +110,36 @@
       </symbol>
     </svg>
 
-    <div class="dropup position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
-      <button class="btn btn-dropdown py-2 dropdown-toggle d-flex align-items-center"
+    <div class="dropdown dropup position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
+      <button class="btn btn-dropdown dropdown-toggle d-flex align-items-center"
               id="bd-theme"
               type="button"
               aria-expanded="false"
               data-bs-toggle="dropdown"
-              aria-label="Toggle theme (auto)">
-        <svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg>
-        <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
+              aria-label="Toggle mode (auto)">
+        <svg class="bi theme-icon-active"><use href="#ui-auto-mode"></use></svg>
+        <span class="visually-hidden" id="bd-theme-text">Toggle mode</span>
       </button>
       <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
         <li>
           <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
-            <svg class="bi me-2" width="1em" height="1em"><use href="#ui-light-mode"></use></svg>
+            <svg class="bi me-2"><use href="#ui-light-mode"></use></svg>
             Light
-            <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
+            <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
           </button>
         </li>
         <li>
           <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
-            <svg class="bi me-2" width="1em" height="1em"><use href="#ui-dark-mode"></use></svg>
+            <svg class="bi me-2"><use href="#ui-dark-mode"></use></svg>
             Dark
-            <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
+            <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
           </button>
         </li>
         <li>
           <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
-            <svg class="bi me-2" width="1em" height="1em"><use href="#circle-half"></use></svg>
+            <svg class="bi me-2"><use href="#ui-auto-mode"></use></svg>
             Auto
-            <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
+            <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
           </button>
         </li>
       </ul>
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 834b24ff61..b8aa4a0116 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -57,9 +57,9 @@
         </ul>
         <ul class="navbar-nav flex-row ms-lg-3">
           <li class="nav-item dropdown">
-            <button class="nav-link nav-icon dropdown-toggle" id="bd-theme" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)">
-              <svg class="bi theme-icon-active"><use href="#circle-half"></use></svg>
-              <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+            <button class="nav-link nav-icon dropdown-toggle" id="bd-theme" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle mode (auto)">
+              <svg class="bi theme-icon-active"><use href="#ui-auto-mode"></use></svg>
+              <span class="d-lg-none ms-2" id="bd-theme-text">Toggle mode</span>
             </button>
             <ul class="dropdown-menu dropdown-menu-end mb-2" aria-labelledby="bd-theme-text">
               <li>
@@ -78,7 +78,7 @@
               </li>
               <li>
                 <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
-                  <svg class="bi me-2"><use href="#circle-half"></use></svg>
+                  <svg class="bi me-2"><use href="#ui-auto-mode"></use></svg>
                   Auto
                   <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
                 </button>
diff --git a/site/layouts/partials/icons.html b/site/layouts/partials/icons.html
index d8b6ccd838..fa3cade934 100644
--- a/site/layouts/partials/icons.html
+++ b/site/layouts/partials/icons.html
@@ -14,15 +14,12 @@
   <symbol id="braces-asterisk" viewBox="0 0 1000 1000">
     <path fill-rule="evenodd" d="M198.29,196.607a125,125,0,0,1,176.776,0L799.331,620.871A125,125,0,0,1,622.554,797.648L198.29,373.384A125,125,0,0,1,198.29,196.607Zm53.033,53.033a50,50,0,1,1,0,70.711A50,50,0,0,1,251.323,249.64ZM587.2,479.45L551.843,514.8,587.2,550.16l-35.355,35.356L516.488,550.16l-35.356,35.356L445.777,550.16,481.132,514.8,445.777,479.45l35.355-35.356,35.356,35.356,35.355-35.356ZM529.207,741.656a17.812,17.812,0,0,0-25.456,0L464.86,780.547l-39.082-38.874a17.583,17.583,0,0,0-25.264-.017l-40.305,40.305-53.033-3.535,0,0L348.1,819.351a17.917,17.917,0,0,0,25.544.087l38.89-38.891,38.891,38.891c7.122,7.122,19.013,6.443,26.163-.707l38.184-38.184,38.891,38.891c7.122,7.122,18.857,6.6,26.007-.55L593.554,806Zm68.606-566.422-195.748.018L526.94,300.127l195.748-.018h0C722.694,231.421,666.5,175.227,597.813,175.234Zm-84.88,35.727a12.5,12.5,0,0,1,12.5-12.5h75a12.5,12.5,0,0,1,0,25h-75A12.5,12.5,0,0,1,512.933,210.961Z"/>
   </symbol>
-  <symbol id="check2" viewBox="0 0 15 12">
-    <polygon points="13 0 5 8 2 5 0 7 3 10 5 12 7 10 15 2 13 0"/>
+  <symbol id="check2" viewBox="0 0 1000 1000">
+    <path d="M729.667 250 396.333 583.333l-125-125L188 541.667l125 125L396.333 750l83.334-83.333L813 333.333z"/>
   </symbol>
   <symbol id="chevron-expand" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
   </symbol>
-  <symbol id="circle-half" viewBox="0 0 16 16">
-    <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
-  </symbol>
   <symbol id="clipboard" viewBox="0 0 1000 1000">
     <path fill-rule="evenodd" d="M650,225H525a25,25,0,0,1-25-25V75ZM325,600H250a25,25,0,0,1-25-25h0a25,25,0,0,1,25-25h75V500H250a25,25,0,0,1-25-25h0a25,25,0,0,1,25-25h75V400H250a25,25,0,0,1-25-25h0a25,25,0,0,1,25-25h75V250H469.113A74.709,74.709,0,0,1,450,200V75H150V650a75,75,0,0,0,75,75H325V600ZM850,425H725a25,25,0,0,1-25-25V275ZM725,475a75,75,0,0,1-75-75V275H350V850a75,75,0,0,0,75,75H850V475H725Zm50,300a25,25,0,0,1-25,25H450a25,25,0,0,1-25-25h0a25,25,0,0,1,25-25H750a25,25,0,0,1,25,25h0Zm0-100a25,25,0,0,1-25,25H450a25,25,0,0,1-25-25h0a25,25,0,0,1,25-25H750a25,25,0,0,1,25,25h0Zm0-100a25,25,0,0,1-25,25H450a25,25,0,0,1-25-25h0a25,25,0,0,1,25-25H750a25,25,0,0,1,25,25h0Z"/>
   </symbol>
@@ -59,6 +56,9 @@
   <symbol id="tools" viewBox="0 0 1000 1000">
     <path fill-rule="evenodd" d="M889,746.184l-0.079-.076-259.2-259.2L481.566,635.065,740.842,894.342h0A104.763,104.763,0,1,0,889,746.184Zm-370.4-370.395L439.8,296.981A183.371,183.371,0,0,0,197.732,91.954L314.889,209.111a26.192,26.192,0,0,1,0,37.039h0l-74.078,74.078a26.192,26.192,0,0,1-37.04,0l-0.015-.015L86.613,203.072A183.374,183.374,0,0,0,291.639,445.139l78.808,78.808ZM851.92,79.433L685.243,209.071,648.2,283.15l-277.795,277.8-37.04-37.04L110.147,747.128l0.013,0.013A104.755,104.755,0,0,0,258.292,895.274l0.013,0.013,0.985-.984h0L481.526,672.065l-37.04-37.04,277.8-277.8,74.079-37.039L926,153.512ZM166.69,801.7a13.1,13.1,0,0,1-18.521-18.52h0L314.848,616.505a13.1,13.1,0,0,1,18.52,18.521ZM388.926,690.585L222.25,857.262h0a13.1,13.1,0,1,1-18.519-18.52h0L370.408,672.064A13.1,13.1,0,0,1,388.926,690.585Z"/>
   </symbol>
+  <symbol id="ui-auto-mode" viewBox="0 0 1000 1000">
+    <path d="M500 75C265.3 75 75 265.5 75 500.5S265.3 926 500 926s425-190.5 425-425.5S734.7 75 500 75m0 775V150c192.6.9 350 157.5 350 350.5S692.6 849.1 500 850"/>
+  </symbol>
   <symbol id="ui-dark-mode" viewBox="0 0 1000 1000">
     <path d="M675 649.88c-179.493 0-325-145.57-325-325.141A324.478 324.478 0 0 1 465.721 76C247.03 93.463 75 276.537 75 499.815 75 734.638 265.279 925 500 925c223.181 0 406.175-172.106 423.63-390.891A324.222 324.222 0 0 1 675 649.88Z"/>
   </symbol>
diff --git a/site/layouts/shortcodes/orange-global-headers.html b/site/layouts/shortcodes/orange-global-headers.html
index f3d548255d..81199979e7 100644
--- a/site/layouts/shortcodes/orange-global-headers.html
+++ b/site/layouts/shortcodes/orange-global-headers.html
@@ -92,7 +92,7 @@ <h1 class="title">Title</h1>
       <input class="form-control" type="search" placeholder="Search" aria-label="Search">
     </form>
 {{- end }}
-    <div id="{{ $id }}.2" class="navbar-collapse collapse d-sm-flex{{ cond $responsive_logo " ms-lg-3" "" }} {{ $id }}">
+    <div id="{{ $id }}.2" class="navbar-collapse collapse{{ cond (not (eq $mode "theme")) " d-sm-flex" " d-lg-flex" }}{{ cond $responsive_logo " ms-lg-3" "" }} {{ $id }}">
       <ul class="navbar-nav flex-row">
 {{- if eq $mode "actions" }}
         <li class="nav-item">
@@ -132,6 +132,36 @@ <h1 class="title">Title</h1>
             <span class="visually-hidden">Search</span>
           </a>
         </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)">
+            <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>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end mb-2" aria-labelledby="bd-theme-text2">
+            <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>
+                Light
+                <svg class="ms-auto d-none"><use href="#check2"></use></svg>
+              </button>
+            </li>
+            <li>
+              <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
+                <svg class="me-2"><use href="#ui-dark-mode"></use></svg>
+                Dark
+                <svg class="ms-auto d-none"><use href="#check2"></use></svg>
+              </button>
+            </li>
+            <li>
+              <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="body" 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>
+              </button>
+            </li>
+          </ul>
+        </li>
 {{- end }}
       </ul>
     </div>

From 3e296d0b6a527fa2f9d18d2eca5956ad6e514ac5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Wed, 27 Dec 2023 11:23:38 +0100
Subject: [PATCH 67/71] Dark mode: drop bottom-right theme selector for
 Download page and Form examples (#2427)

Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>
---
 .../docs/5.3/examples/download-app/index.html |  39 +++++++++++++++++-
 .../content/docs/5.3/examples/form/index.html |  38 ++++++++++++++++-
 site/layouts/_default/examples.html           |   2 +
 .../5.3/assets/img/examples/download-app.png  | Bin 25652 -> 24572 bytes
 .../assets/img/examples/download-app@2x.png   | Bin 83649 -> 78010 bytes
 .../docs/5.3/assets/img/examples/form.png     | Bin 3908 -> 5913 bytes
 .../docs/5.3/assets/img/examples/form@2x.png  | Bin 10653 -> 15165 bytes
 7 files changed, 76 insertions(+), 3 deletions(-)

diff --git a/site/content/docs/5.3/examples/download-app/index.html b/site/content/docs/5.3/examples/download-app/index.html
index 33fac9a5a9..7695e7495a 100644
--- a/site/content/docs/5.3/examples/download-app/index.html
+++ b/site/content/docs/5.3/examples/download-app/index.html
@@ -1,6 +1,7 @@
 ---
 layout: examples
 title: Download app
+theme_selector: false
 extra_css:
   - "download-app.css"
 extra_js:
@@ -35,7 +36,7 @@
 <header class="sticky-top" data-bs-theme="dark">
   <nav class="navbar navbar-expand-lg" aria-label="Global navigation of download app example page">
     <div class="container-xxl">
-      <div class="navbar-brand">
+      <div class="navbar-brand me-auto">
         <a class="stretched-link" href="/">
           <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Go to homepage" loading="lazy">
         </a>
@@ -45,6 +46,42 @@ <h1 class="two-lined">
           Mobile code libraries
         </h1>
       </div>
+      <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".global-header" aria-controls="global-header" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div id="global-header" class="navbar-collapse d-lg-flex global-header collapse">
+        <ul class="navbar-nav flex-row">
+          <li class="nav-item dropdown">
+            <button class="nav-link nav-icon dropdown-toggle" id="bd-theme" 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-text">Toggle mode</span>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end mb-2" aria-labelledby="bd-theme-text">
+              <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>
+                  Light
+                  <svg class="ms-auto d-none"><use href="#check2"></use></svg>
+                </button>
+              </li>
+              <li>
+                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
+                  <svg class="me-2"><use href="#ui-dark-mode"></use></svg>
+                  Dark
+                  <svg class="ms-auto d-none"><use href="#check2"></use></svg>
+                </button>
+              </li>
+              <li>
+                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="body" 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>
+                </button>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
     </div>
   </nav>
 </header>
diff --git a/site/content/docs/5.3/examples/form/index.html b/site/content/docs/5.3/examples/form/index.html
index ee973d8114..71825ce4c8 100644
--- a/site/content/docs/5.3/examples/form/index.html
+++ b/site/content/docs/5.3/examples/form/index.html
@@ -1,6 +1,7 @@
 ---
 layout: examples
 title: Form example
+theme_selector: false
 extra_js:
   - src: "form.js"
 aliases:
@@ -31,7 +32,7 @@
         </a>
         <h1 class="title">Travel</h1>
       </div>
-      <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".global-header-1" aria-controls="global-header-1.1 global-header-1.2" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".global-header-1" aria-controls="global-header-1.1 global-header-1.2 global-header-1.3" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div id="global-header-1.1" class="navbar-collapse collapse me-lg-auto global-header-1">
@@ -46,7 +47,7 @@ <h1 class="title">Travel</h1>
           <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" lang="fr" hreflang="fr">FR</a></li>
         </ul>
       </div>
-      <div id="global-header-1.2" class="navbar-collapse collapse d-sm-flex global-header-1">
+      <div id="global-header-1.2" class="navbar-collapse collapse d-sm-flex global-header-1 me-lg-3">
         <ul class="navbar-nav flex-row">
           <li class="nav-item">
             <a href="#" class="nav-link nav-icon">
@@ -66,6 +67,39 @@ <h1 class="title">Travel</h1>
           </li>
         </ul>
       </div>
+      <div id="global-header-1.3" class="navbar-collapse d-lg-flex global-header-1 collapse ms-lg-3">
+        <ul class="navbar-nav flex-row">
+          <li class="nav-item dropdown">
+            <button class="nav-link nav-icon dropdown-toggle" id="bd-theme" 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-text">Toggle mode</span>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end mb-2" aria-labelledby="bd-theme-text">
+              <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>
+                  Light
+                  <svg class="ms-auto d-none"><use href="#check2"></use></svg>
+                </button>
+              </li>
+              <li>
+                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
+                  <svg class="me-2"><use href="#ui-dark-mode"></use></svg>
+                  Dark
+                  <svg class="ms-auto d-none"><use href="#check2"></use></svg>
+                </button>
+              </li>
+              <li>
+                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="body" 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>
+                </button>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
     </div>
   </nav>
 </header>
diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html
index aefe50e0e3..17848aa2d8 100644
--- a/site/layouts/_default/examples.html
+++ b/site/layouts/_default/examples.html
@@ -110,6 +110,7 @@
       </symbol>
     </svg>
 
+    {{ if ne .Page.Params.theme_selector false }}
     <div class="dropdown dropup position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
       <button class="btn btn-dropdown dropdown-toggle d-flex align-items-center"
               id="bd-theme"
@@ -144,6 +145,7 @@
         </li>
       </ul>
     </div>
+    {{- end -}}
 
     {{ .Content }}
 
diff --git a/site/static/docs/5.3/assets/img/examples/download-app.png b/site/static/docs/5.3/assets/img/examples/download-app.png
index 8cfa8d2c5a1615a168eb324d6f0aa7cc2e3284bd..95826b4d8c1b2db5932e138d03ff34063dc9c6c4 100644
GIT binary patch
literal 24572
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

literal 25652
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

diff --git a/site/static/docs/5.3/assets/img/examples/download-app@2x.png b/site/static/docs/5.3/assets/img/examples/download-app@2x.png
index d7dd72e6e09b4e5e8e37a8309c5531dc965f09ed..e96847163f187a127a9a2cb77c5bcb0d19549e64 100644
GIT binary patch
literal 78010
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

literal 83649
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
WSeAq@^>e}i0000<MNUMnLSTX;w}dzV

diff --git a/site/static/docs/5.3/assets/img/examples/form.png b/site/static/docs/5.3/assets/img/examples/form.png
index c9cdece2d110e04b1c890e06409aa8285a35fa40..b31863ffbbf1b05527fa5f852b94a4a79b258129 100644
GIT binary patch
literal 5913
zcmYkA2QVC5*T;9&uv!q7CDD6Xebs2uvxt@utf)~#v@8-OLSmH!A*}M~qK8=BB8V=;
zYO#puEQz-2etF*a`)0m7bMKvV{&Q!3=ggeB=ib+5aD94OPFer}KyPTEdk+8rF8!Sn
z*U0~RBzRIh{%%obCYE<dB+?b>>hSQ8Kp?pIM`F5%z+muSkq!j<R9BOcR}!6&YOJLq
zB_^r>yRC0x>0oVYhj0rIkMQ;N&3gZ?w)n%>)~e&Z)zgNj#DT2S9Q_NF@QOG2)ia>8
zG<iP!T3&VA%+IZ*se$+LNTip;`qIqsK;PKZ?CI(0+S=O1#l_<6+fo34&B9Pu%QAFs
zXD$vouR^EkH1%GSNdRUdrs@#zt7(rEnK9VnQ#|VZg4q7pC08UjUB&a~5gCX^LZCJU
zOE%;{c8mR?WQOs5d`=bnKqgOA^57?m4%;eA;5Pb@uaH8c5nD0kSw`ECKp(_RBwpP)
zV2-Q5&J&P^)u;NsiT;tG5%AZ|!<V*ji$d==hhz<vICimIGu&uMb>A-ij9l9{CYFMY
z`Mv>yH!7CmJ+|!vDCTbxWi!3lN+$R(!cP{;|CK41>?rk`VmxUhk!;H>6*4C6K!vE&
zUh?VluHaIkd}XI2y6#n%Cy!3eM!G$2s38+>Iw;l(tE>9d=g_rvJkvu&fmz(a>}wGU
zCoBsG%R;T}o%CxXY!8zXa^%uthP0Z!dCeQgXeF>_liTX%T$GB)N2%SgijHA2{GzXh
z^!_Si)a7pY^G}Owmv`qHJmBOD8<#kvrFDQ0onTHNm%abSN!XSDRJOF$QP8rM7GY(P
zs-q1Y+`I4%wvTIJy+AhFEzXoAAEbJ??OG!GH@JTG+@SLWtSD0*eWgrTr7%|qUd_s%
zEt%g1gmt1&$$8r`ptK`xX<3wCbf+a|<>i%`6?Fw|5)l(MHaa>cJvufv_DXKO5L*wI
zIYQnB9kne49_?Chmq4iXJXG|*q@XcN_Br60XBj`9kkJyXbAocCUr1<k@6M>!Kh2G!
zImV^NF1M|;wwLCFFmgM0?&n4zD2GSmN?T*>K)KI|wv2fdJIlT#e<dfM_;;Mt)k0*2
zrndU3Imaha2?^&Ns~bqZClT{9BV>MVr8sWeW7hsCtM4lJyp$~}M1`FLih|&}LQ0qL
zDP=)V+y~TXOH3RVhXE~As}{D(Y84HbDXPlbe>Ai(et=1yq!mfw^^qk?rB4!mkLj+*
zN`YkDb8xd84}&fB&e*>9rx~P<s&NpvVNmgPR+975_E3NJVtqouRX_FsemY|9=LRfS
z0m{c+u6;=&=l@K9-JgcbsG7M+FehlV#57SVYUmvysH~Ow!NCffw~D82YS5$;O=W9V
zOABU@j?#3_KIc{`D1Rm^sNSP1<5*DsW0cp1z;<IGH-nHx;k@Q9pLyzSPsDx~wUTXL
z8mP1n?65=m;)udoGrn@XcVnnLp;2Ov_5NvOp&!SL9kqv~Dg&-A8Aojc|3+zM_Wn^V
z9dA?V{JmS`X)^4C-=JN?IGm(d{G!Qx+~Wo_p`ZZT@OTxCK=%YZ^>%c<lnT3cLlU<>
zsOzIC6)4v4>OHrm-{v$1y<tX=75k0GYX4t-YLg|1y)LwlxS?Nlw(*il`x@{6TVPX+
z$Msv6Tn+feW7{#ouP=7c-;xSd=w77)3;|>S(e@n0SWP?$n7j*}B@DYN&p{*-&xHFr
z#WgrI=LoYh#@sp#S9#A9)V4oMz(YC!+bel{;tDRLKX!BvYOdI^><Ei=*V753zUvHX
zf;vQNbnqmf+l$J@LE<6=-PtOb-twD*Xe0gICY-7%0=quRwB%D&TK<DWM;UIhs=QEU
z-tFWhnc#i1)RQrVJ3-UXa+5)dM?KLcYM}XHubLHarIf8%LLpC(ab(@kTD!qNbu$Bw
zC^&$tTf*uD5hA>~UUL(E2rBmMBnvyv3I+)w7vN3c4b6kzq@rQQ0%Hjs5UTWB4*9k^
zXCb9X+Ot=ZNjfZuvgx!4XsPRh$Yqes8EY+9$z$jss{{<Ie#Cj7n);%|L2PBO{Y~qx
zjy(3=bE)dPera2>23x+-yGR{XiS5c>h2+TeFVs!9`|2$vxy^jwn@t}Cu>(?ZmG6v(
zl7Wtq$sV99d05|1%BKgqKeb>yL6e@LFV8_PuSzv^X3u=|&QdBV?Ko4G`jn>Wc@RpB
z)QBnT=R(dd)(coI?2nKsv964TIy*8{tOxbPG7q~(D>y=<YXzpj8EJd=0%%k^h2Ssf
zonxk1ddtkS{6YA6PanbHM%j0>32}QFK8aw*ADrm`9T_$O=af%1#(BI1HQzNF=%KbM
zv5aTI73CNYZ=yb6+E+pMxOmbPx4e#biocdFN!6za93=-zWm(>1N$6F0_nxNq8I&+#
zUX`qb4-Rh&5@*CZM$8RyKXCA;La<tw6DVKsqYhv{FL;(xcF+B=2dW5lv)=nW^guRA
z%WaCx9d1rjmo^`-1&9C<=L3%%U?|kZvgb_#{6br*tb>+_zAMSC8*`awyUgt*G=kJk
z58snt)SOg@0h7E&DZw?ayp6p^Q%SIby7_a#Gx51y_$FvyG}6_lsu$#*2&1i26<yJJ
ze}DfadCq7;aomT|=kVH6Vd(FjpluqF$U^GUPN4qEupxbqWQ8VVHP4r3pDV1r;rBE}
z-U(~si#Pa0K*+QwcuItxz$e90OjPJPxiaXRE-LPtM&G21+ogwMHgH@uh5`BPyvy=w
zjb9akSA^n&U9xZn1iy0we<ahW2PHtwFzD;5AfxEdqS1SN2wScJHGb9SJz{bk>Mj&b
z-?)jgPT%f_<i<k8L?X3J7u?9HppCuRIjNsoh~Zozo%e|9O!>tPjb9DU1TaT#yJBF_
z&=%#5UH>|us)4o0BQ<|PwUS!qUPfoj8!dHDybG3B_VMG0*sO?NAsaN;#qHqrf=D2k
z3V^`gy*!7=O;)suJHO)yW1n2{R2o@XUaf%m`Xs+qk|P=e0GjZ`GS8r&oH6CS(!jqx
zNXk5c`*e0yP}Sx;zvx$Qpg%KEg!Yc371MVTiQI2_2e0Z#Ah@ZfUgn+!?v#8SRnA23
zW7X(L;xeSO^S%?AZDW(|%adsSL&uL{MAKc_DUyrneDajCLXO9xC95ZitY|O0hgsi#
z_T)F!VpZ<0Sjz!{P+wU4MUVg=pZx3}LeuB5@am_Uw7<~w<fkK;IxCcYdf>Ic;--`J
zo8+^CFoXIElfV%DiJ3eb4ERn&FgSvx)ko9fQ$Zqp;&rb_0Ml&ZO-0@>&VmNo3Dvt_
z@S!vpaNOW*jD&NJzjK%#*C)o*{@i+w_MI8RbxR7gEGov|>(3{lFA7LY!wjKgk3)W+
z-vWnXQT-}WnDh~OhZTb#iqt&)M4%2;bDdyeQ59~sP~$7+1sUEaEU-@|#R`C(yBOqu
zM(-!lckI9>m&LizH<-EO;o2~v)9-w((LL~sFni^oS=(@?H&mY6DwscZ{7cuyuUGk1
zMWOGD)Lp>wC47`7&c+gaTGp>B!-B!gY&EBkpti$Fl`aRp!b=}S5;zjkF^U^9ElW7v
zB7{O1z26TGsT%3qSqkRZ>(ShIZ_mqY5QZ~-#@=kZXZ$l1>KabQFv+SWMmw=mnh6GW
zv+NVdk5*l4H^uDKl;^r$mQ$7mPftufaB#qbrr31ic~u1*FDb&o4+?XJTXdjHM^4ce
z1JBs|((5z!sZ2!*fD(9){K$ok=)DZOGJ>2=@GeEn+v~k_H_rq@_WZwY=x9sV3&_xQ
z<newGDvlJ@`?~x`3}OnbA7J2MxMfgy*^-_6nvMlvHt}4Y#pi~4_jvfFF2jj8da`vd
z`vx*7GyOOqhWf!Qq$cXtQAct>UB!2#thv#`M~}|vx+G-uh_9r*jo<UM#9I*IHA5CH
zG+`!-SSi2fS+2heR`66;+>%U2OIkJj@ytTfc)qpJmxcdGcx~HK->4M2_G|w>+GYRo
zo#QYD4$9pZ^-2!Z>z$qL6W-<vdA^kwkk&t);dQMho?%-`9hCT-MRQUxU)J7&{VqfB
zRn|Do*^e>X@J-Ow)Oq4wlyozxSz{%+ICE?9b@Jo$5sxuFhn@XVMDk_LHCPfke5LPw
zxzGp+vo|$@CsMt?cSaC#osUCGyF$G-tNF_2=zWVzzq*O5epL4FHE)r9I9BjJKn5N|
zc+8?;D>zuIFr=b{ao8#5D(+<N8>`s$9<Lnwk*8bfK3{)h$Hcn4ixTtASH+oBC_T}S
z9BFT&{YN@zW(HF8&wXgXCni*!LKKG6^CeKt15~IpTQ~btcQSXk#1xEO(d43I6VHAO
zRk*|FNgN*twPZsdRF45v?1m#h;eLrxN)$p82N9OK6s}AV;|1eJU?3>7pK;Sr{bGj&
zG6zC#OM-W1Akt3H2~E{*v#!u>r-t%xyurmtZqe*SZoOx-&j#-3)j-?@7*MqfAwrJ=
ziwq)pTks-TEgD)f69v?akh?`QBS;G@!!K_=arLs4DylEv-z4419ASa-yY($BjcGKG
z`35R9KMEA+HV$=e6l<olkM1(&FPzeISL#l&Nw&DwSQ_ct*X7Yy5WD3XIJZT|pNmTM
z_D<*jn2r7u0F5H+>!FCza($+k<tyilBD4Nk5(SC*1FmEkNUCCTByXG>>IvVhpaAMd
z_mrI;MJ@vQt7F*uH&zwHzG!rbc>Qt8)=Vx_6=G)K=uS;(bJq=`#6mYy>-dRg^Bmmq
zE$dMC@2-{Rj{hY8QY#O;X`W+>?VpirM9GKV<RTlKqa9r{>vOXF<ZO)1e_#8q<!JSW
zdOLzihi51voce-~*0RgAYj)P$K|B7O&9ZTeFuIP{?p^TgaG6#b9f5z-K#fxg4}=!p
z+xDhXQf5kM5gyPGb_oQ1^calI|ICzE{pFF*)qT8=C|qhZF9M!$d;m2VcIbu}tCKF=
zlckx8@h^VulWs57EasL!U&&h%TbFKW6Q_>oKoNrXlLk8j2alDBJ-~T!($@H((p77w
z)48jxQ}kg_AYv@^og<%P+aq*l)8#P}{sEq}o^o#8@q5poL2KHH_G7lrtKFpSe=tsx
zhJGd{5#MakfdMpSDBh}m)-xinYOdyXMbUTyugO%I)@!+l4Wpdw5u+4p<vkz&gT`Ua
z>>bhX5m|kVn_7P7-|LjFB$K#Mhf;Pv(IJpk#R!jEYRDae#AKXo;W-^l#RsYroH`XP
z{4uZqT|o1IgIv9{(CTK)=KStls^2RLo4&B$kt(g@ec#Vh2Daz~^t<px%uGLGe7h%q
z-p$BAL^D$Y`9nll=Z<_Ha8jqd>AKLH6k#>Fm)}|ekMc(1Dk@h!alImqp?{v(@dkj1
z=<y*5X}OlG{2Cvni1!1TR_L9-_y6qGH5i!ItI)%{p(%_j9TDgMTW9n({E19Q&XPGh
zziO@lk?YF9an3_p)!IA1Iqb@=Ttf|s3T_CM77g_PdYMxF3QEx<;BM^9LP*Rf%%zXP
zXM(r~rfH&iR_tLNrWUI^H*sDc<HQcHd*3Q0Jzm#HvkPgKjNGGtw8j@MVJ;wOQN_?k
zB6pZ2;aB8@Sql9wQ4o=!kpRrRSdgBfz44rOnJWnf#eCnjP@fo|3WJJGGIfY%X@lcN
zDROQtR@)TJPa}>ug$fvQ2+~5aZ#8Z}Nj+Q#dF(ds6*)I$Np19#+@w>;-Ky&+Q@6u2
zUDs}hyD#q$@0}odhYW79+^%(Hi~idN{C8+bu=E<lN$8fm=)PU!kFsP2<EgjOQ<Qy6
zAh8HhAxW3vduFWE%=h9&jzYO~-)os`MNVU)RMvgeF}NVScY<T}GVHNm^GTP@oSi#z
z<)JG9BCjMy^Xn^DxPp@6eXm4@tDidoJ`cBbZDPIZiTzoawM?Ipdk?WG=Vm8IJNDxV
zo0U^ip_7t&heyA10;+=W6op8y2F#m$sDv)c+<^CwOc9FD=&frJ*wBD2BEpg7!(P2C
z3v2vlUa!Ib1p#opYamK#F&v0c;aI{q{(}=k@oD5jG}xD5tplGE>G1>SPkY?Sa~`xm
z?Pyn2)h|hn`Y}BaI2wpIP~nZ2Ast@SAXIn}WRdsk3=FUKb9h3pqu-_64i&z~7kd3-
zWxh{>x$7~x2G5cWh`62{J9?<kXMs9wu<?SD<)UrO2m4pPX`6`QS=R4vI>gyuJ1gU2
zJYD5PMV{j}5MGX9rR*5_6{y{fj5XM^VJrTKlxw(_qocoij-Ry6_Pp05r@D>*A9kIm
ztL}R{pPRqw`z&5b>&g?4qzc+=-0k8<Id|{w^$pBHj_@Ato_l&{wRiQkV;ukJS*Mx1
zh~B>$r)<n2YUGcSa4AW4cKdsd%njKszVL?X2csVLG%oeE17*<|&!&}TQXY>*`G1r4
z%4eQsq1WUEGk-e6Szq8$$KE`FwPs!fqwaIA$Y3|P=lAwaT;w+Xvv1vUKtjUjE?akq
zU9+*^;-XwSeUqQ%UR9Qzb8@6#f?rKX@R7fzpx7;wESo9|zclOS#h~?Q{9!fbfvXDj
zQfvS6E#b{xAYi>4s!r}AhRPQP2!C)kd{-n4$iQ8bC;kE&8%9!*b3O#fgU6Sc|LKaP
z%3!3Yk_W>K&C>)nzwf)~6qN!pVly?a{};VRY%<2+!<7gF`CoJ~TKm0)DzE;3K<8{}
z3_<G0N3gc`e-Uf`Y)N-it+}CX9Y?A@cl^EzQ1It23mjMCZD8NaM)a3Y;2kQbtDpKj
zbr!otXY1EKr<C3(aNOXBRArc!7d2c54j)p7=i5*N%vpsd<#^KdCQ|p`ahE)Ts<S}R
z7YYv|ZLHV;e>s~3JfQi1q1pdq$a~ZlxoaAI5;3KsGiMW;bSL`{^jB@#Gn)R)*PE7z
zKLjCNR@UD99*s7T%JrqIE#LYR2TDgsO$jDyl;W(!T7x*-j6>GIWV=2b;-*S!KG!A6
z`3eic(lc=ag-qH)qOJlk{^vW!<Nyg5C%!Hg;tx}z&SUA>fqTqq%in7T$l5;sS<UZ?
z{tpk}U${FuF+h4fY_q_a#yGGXTEP>lmt_9solA77zw*ZRzi$G-SNn+?*-0G%*z2jV
z44k>Z2b?-(`mw<3ej_tl$7bMen4igdRS^543cGL5x#knvW{lmF(Fb9uQR&en<9Zer
z^vjKh>LYI1_V#`)pwH+EgC~4%Mc18O)`pcCwXUP@k5UMCpVq)Sq0yyZEx}s*6mVHK
zLBnX_C(K_2-@aR-A%Xlfbg;_1$vp-k=*=40_V{%OD)PYP@@~?=ZUxF~Yy0ct<Uq9A
zs}$L)70%-ZBhk%@Cnj<6R4;5|&T)^YVYe|Fp?}M4D+>~Wr`Ws8-S(NVRV7znAf0+~
zwDs#m0SwG8Zht7g=wRm+SoY<Yw2)MZ-SE$fVukwpYFj(i37h504*TG<YAXJvpkSlc
zY=V6|cMq!K;7w9$G7Y<BO-%DZFEoN1f3nxcpodN4_y1*bTH3|xEcE8I)PKp@#H~pB
zOVf?Zfsj;K#xrqFV8+Yq`ypzUqBr^9FvA56JIT~$0S_}x^8Woh1^^IN0jY=7YUL&*
zO}Y<8WS5vZ@v4xj&qm0hXOnhzt5y~LFgMJ3G(M@$Z{>VmlM+aP%u_7F=8@YqBTYzm
zX^dLyQqGIv#?kEJI-JV-iPIa3Tg;n+hf?8Bcc-T7gRi#wgZ%Lod1Q^F!*dw?`SGKX
zhtlahM4q|{<NG1yH`zNa=B%p%@P|!;wnvvgT1;0OVV^Y=XWm1);tm!z??4x+ual5h
s$rW}57n#Pk%;B)boTW<G&C_ZUqs6CL-Bl13_rGx%-ht~@Ya^on2lOvl7XSbN

literal 3908
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
JD^alw{y)J|cIN;9

diff --git a/site/static/docs/5.3/assets/img/examples/form@2x.png b/site/static/docs/5.3/assets/img/examples/form@2x.png
index 042440f6c91be368475fe12f44dd428fb86ba4ff..6c69721913887431ceb4b371ae0726035602f721 100644
GIT binary patch
literal 15165
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

literal 10653
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
Cp};)=


From aca124d4c556d6180d8ebfd58005ebf7b93a0621 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Wed, 27 Dec 2023 11:29:05 +0100
Subject: [PATCH 68/71] Dark mode: add new navbar mode selector example (#2436)

Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>
---
 .../examples/navbar-mode-selector/index.html  |  24 ++++++++++++++++++
 site/data/examples.yml                        |   2 ++
 .../img/examples/navbar-mode-selector.png     | Bin 0 -> 3002 bytes
 .../img/examples/navbar-mode-selector@2x.png  | Bin 0 -> 8250 bytes
 4 files changed, 26 insertions(+)
 create mode 100644 site/content/docs/5.3/examples/navbar-mode-selector/index.html
 create mode 100644 site/static/docs/5.3/assets/img/examples/navbar-mode-selector.png
 create mode 100644 site/static/docs/5.3/assets/img/examples/navbar-mode-selector@2x.png

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
new file mode 100644
index 0000000000..39c47cc136
--- /dev/null
+++ b/site/content/docs/5.3/examples/navbar-mode-selector/index.html
@@ -0,0 +1,24 @@
+---
+layout: examples
+title: Navbar with mode selector
+theme_selector: false
+aliases:
+  - "/examples/navbar-mode-selector"
+  - "/docs/examples/navbar-mode-selector"
+---
+
+<main>
+  <header class="sticky-top" data-bs-theme="dark">
+    {{< 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 >}}
+  </header>
+  <div class="container-xxl pt-4">
+    <h1>Title</h1>
+    <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum mollitia provident fuga animi voluptatem consequatur perspiciatis cum quos maiores, nesciunt dicta et dolor repellat eum odio id nihil, eos nostrum?</p>
+    <button type="button" class="btn btn-primary">Primary</button>
+    <button type="button" class="btn btn-secondary">Secondary</button>
+  </div>
+</main>
diff --git a/site/data/examples.yml b/site/data/examples.yml
index 06f4d5d41a..eb281f0c7b 100644
--- a/site/data/examples.yml
+++ b/site/data/examples.yml
@@ -68,6 +68,8 @@
       description: "Demonstration of all responsive and container options for the navbar."
     - name: Navbar sticky
       description: "Single navbar example of a sticky-top navbar along with some additional content."
+    - name: Navbar mode selector
+      description: "Single navbar example with a mode selector to switch between light and dark mode."
 
 - category: Pages
   description: "Complete reusable pages that can be found in the Design Guidelines."
diff --git a/site/static/docs/5.3/assets/img/examples/navbar-mode-selector.png b/site/static/docs/5.3/assets/img/examples/navbar-mode-selector.png
new file mode 100644
index 0000000000000000000000000000000000000000..57638b636894f5d025a6d788837543942db42694
GIT binary patch
literal 3002
zcmb`I_ct337sewLm55cLRW({wH5%1nq(+I+R;W>{8nZ1LGon`QmQKV@s4BH;Z(3p$
zHDfmoDMe!>s2wWae&6$c|AY5F=bq=Bd+xdC`Qe`Pi8DnS@baAC0RRBJMuvK3007(c
z-&Wve|2t8TjDPsotW0lNAPx@?_xJbFXmnseKwf?!9*>WEl@J>hZf$L=rmA*AMC9)x
z7{rr{WRJMUVXweWa$;izvK=%>u~OC35?%yF#8SVJy1um5)z(m_r~61FTbt`kON)k}
z4PO8NbjnCi$KvsKI{BGz@eOdN&$sh#u7+$?U2_L-H+p2QnHvsLR}GH$6f)o3Z2}tW
zI&eJ20@;DZ&|M!I{~q1j&fz$x++g=ZjpU>TQCGE<-axJ&&Z3<<`if5z@wf@|=W}k@
zM#Z&y3WIJ^rR4)J!&-wU;^WR~tm59^s$$fKfJ|@t)=-R;{rsi4lsYYG?^8=6o@E}`
z<PUU>Azw!%dw`|Bi0T@@`wlhF2L8B?R0;5hz;AO~Dn)$dqC%}ZrLWXogw&?ZDu}ep
z;qZi=0hNYZ*zlt)CH0dyur0Vk5J$j2&ZtAKr8kEfqbm;DkB5kaE(@1=h9!)_KN*|d
zP99mWhweJk_$k0;%F|*iERWXB0V(~dY+T(dFaBM})diC9!xO;MFiDu?+5<KYP7ZyC
z<0#UwAP3c6D?ldCp8FBMs1P{KfymK*=n}~mp@X3Cf`58+k1qMa3>m>)I1fyu<4RNV
zb3ISrNS%}w(far*X94u1NF7KjvH4hlVWsjK!_Ne$l2D#fceKJV!Yh00<Tvu!*S(#@
ztG~8?QAdbwH^|Brgga2Xw8apV`R0aRTYe4E%6C~AW)L{xx2C+}s$%jsO33Gxc}=`#
zUcA%Go4g}3<!^m?u*zRD=qEy?`U66-30k}7_r^OX;F;5b&()&S?0bgB<P?=n)e_Vu
zrfH()1!_;w4yFU--?E`Is4OimEx4XMg<AUzA9DS!xX7-p`%N-*S1okeq=8VF1=*VU
zxxwzJxVF&<<OcsM3I>ufzD25r{C&y)*0c#_!W2C<p&M3LTDzJphl?%po~x#9zBw8p
zR)sn{(@4*cPmVNgQ4*c4rI)zZaVJy??a`vuYAr=0tUz$9bcS~&`%hi2l7&@viu*Gp
zc@&cI8(yC3&AnI}#VMOsMQWpyOT;fZoA`M(l_TfuZAA=NBpuyx>aWKPwB0Hn+rL3V
zS<Yb}A!oRpB$u`w0QZCqnO%W*E~xaax)Gt{#lI0AlNe?gN9TTqW=8bNVOHDl^3)L1
z;PzItMr;u2M0aRsSp_`Ry@_CVF?bFK2>Q15j&C8o1i2U9e?j8&{DlIoH=_?S-F$u)
z{$bXb40(bG0kar#E018e3|PH&I9|IPd*j}tC6_7=Mnk{lO~E6LG=bvOd&|Mu?ojhh
ztQG8zyl??xO7+w^(|6gVS%_p*7F^X)gQnE<v;KlEz7h1mSX%Kkcg{SL7P<>@AL!T|
zrrVgBo1lmTL5<SIxTPV-^W5*6xGz}B4Z+>dX`>%(QD@oaF3A?{DfeHFPAWR3XB^z#
z!7mK6H-R4MoZ*-f)0=t`-T)>QY5t^tYMivO4sG=W9Ly44`rfy46z%)w(*{fg=Ix_s
ziesUwgDvsW#+R<Vt=QX%3<xR^v3B9o$1e@&rJs@k*fuTLzg$<b_Tb8+2Z$Y!3NqE+
zvg)l?T`C9%nLZXgs+XGOQu0=ybHQ_J@w!cs8IKwGBP!ANL1rYAA|SkCBL$rRmm3^h
zDH74!!KkIH%rN%4qZR}4%cksGS*cs8Yr)Tl6df2w$6g3(o%YaeXP#m@N1XHJe9gAp
zw9JwvaGlY{bf3B^9Xv2!@ZkNq!~$ZRwcyD5<JN=B!3(|pSzsUm4U3;$A8c5;(j2aD
zI0Nor%RXS;U9)^6ek`)i6OX=+ZpaHk47ll{_aNWT4ysBlCGGc3eTdl?mJc%cGUB^p
zL&@&SAE=yYz6BW0S6UzIAu?fe8jffAsDpi<WH&p4)cIGgP~;w?h@lam-l(R=D507q
zP!)n*vh(*7E2#>0-ejR|WEM!>wD$v6EM<orbId)p!#ZVA-s)*hX6fmPrgIc2y#5BA
z!-{%Bmaqgvd9Fh+VF>JP{gG<<$8}d*;SD}~8>0}j;M}C)KDTD<$ICU+o?;{4-}S2z
z(XN`PzL~eKchLTYLW$cFpcUaW#v+Ri^sFjle_u{L?Nz6OYc5xZ{q?gF4JAI=0Y`^%
z`p9NXwv5}hVXii4&m|J4FTFb0Ym~cn&ZctG(8wc}zAT$$RMk0EdavB*hJHqwOF+{j
zH?NYNSj^%do1;#s%p_hjKD6~8lY>5HB}7GA;9B?|FMq{{&Et7B_wTk|1W9`r%!WTV
zRZ<i~$3qqRZ%X3`KaK#%2)6lR^cqNf2dwvCQP;b?^2|?7Hrft!1HN;l4PcUT<m0PA
z^88B{3%>NiVqFVa(5@OO8Qq%C<EbjYiOM(lI7Re=gkPWB{ScRXv_ac0#iCIQ!*@iQ
z&)3pPo2k%1iQLfith?Oz`B}-R2fn+%`u+&7bOZS!`{@X(OH<4;6C<PLm4C8vBN!@h
zubw(j@`+>|-wa_@7bq~xw>cYK1R{tI#gOj<UbW{D$l=%tyzMymm{5*zoqzz%uPN=2
zm%x#tbyd(cZa464q^4B&xWKn%1gpp=3|9Rb^=^^+coD_BfWp$*$v*s?>@Z0VH2{La
zqTRju<a3>y220i%j|^I8WU>^_%e55rEbcQ|WqLA6sms5-R{r3`X|MJ_cXm0xXxS@6
z(h;~G9QIckJlbY+BgSGRj394SdbdG(do&kgkiL~rWM)BA{j}($(eg&UvF?kFZ>8U#
z#LUFqna|~#ir{L@yoR#Wc&G`o@>cpz3as#Z?a`y7(<1&aoyxLqwe@e;$`nb<8ydb!
zyBoIB_%-gbM)`e#AA__>7co0*t?g)B3@ks%8Ptp;o-`K}wl#IVc?GL9Ypanb|KqEY
zlyS+eC0?#OVgOQGZcr-^`@ur91<&LeOYZqX=RWF<F@Fy!#n1lX5fSRtlBDg}%b?Da
zLV(|*x#OJ*Dt<nYCV$bfw+`z1n^%5!5LOQC*x(<$MwYm#j=Dxx%|ar=by@1)M=x`h
zQe&39akhTimO5O(p`XpUfpklrRdQ?S*WnCI6!ENx#3O4EuO-)+XE3RpjDqu%E?YB^
zUpQmzNg1zRKRi&KOA0O!sTJ~r0)#9+MxEvByw_f~fOiV`QgN!c1JYIU%9aOAt<gvT
zMoXx*O=5jf9KV+?euCP+ysS9qEUD^{{Mw&m$uLLIJLY<@hHF$yjmhZOasC^<^ijrH
zin|O_V-&Q|aZ(@EQ8${wdoJJ!BC$DHzKCpLZSRVW7qq+M4AHyj`a7~*MtI2eHiI1*
z+9P|oCi(TYhe99KI7>(L1(PV66oRP00EYv!txeDr@n0RKInUoL2e+uZk0h_k{E&E(
zJnObUb|&S=Ru+L(f#Uki+Xg!pjvqA=;^S)1Nh~}#Z1KB4Y%!$km?}3yop3r*YGUHM
z2mFV6)1DfHCW$#DN&ITdYFcUtX^TUg6V6DZtYNt?$Z8W?K%R%E9WGfTCYa}^2~4>m
z#y-i1_^|wCUO{Y8&xzV}jF@*$nyQLyZF<$U*0K>zpB-NPsNRP?&M6h$SEf(q<mWwo
z!KciB`(sHbl#(|-8A^P(_WegrO3{J-`?f*e(szoAi947NDL_m2>gb-)JuldakLra9
zWsYZ$=c9?b>uO<#R$pbkWFa)IdKbqR(9jA5-<uI)oB(X4H9Q!W-Kxd8qP|)m))A#i
zdCx8w9wEx@U?s#AwKt(AjuHfs;s3(@e~kY>*?m9JjmrcUTGgYL!G}=!YIfUUdHkQ-
NMhK){>2-(5{{X!nn%w{Z

literal 0
HcmV?d00001

diff --git a/site/static/docs/5.3/assets/img/examples/navbar-mode-selector@2x.png b/site/static/docs/5.3/assets/img/examples/navbar-mode-selector@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6f35d22829c9403cba3fa51cff3cab5185ad8ef
GIT binary patch
literal 8250
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

literal 0
HcmV?d00001


From 8238943fe7b096529926a53b5d0d4d70e335d70d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Wed, 27 Dec 2023 11:48:25 +0100
Subject: [PATCH 69/71] Dark mode: rework Color Modes pages (#2442)

---
 .../content/docs/5.3/customize/color-modes.md | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md
index 8c241cbfd3..13152bd2d0 100644
--- a/site/content/docs/5.3/customize/color-modes.md
+++ b/site/content/docs/5.3/customize/color-modes.md
@@ -15,10 +15,41 @@ added: "5.3"
 
 ## Dark mode
 
-**Boosted now supports color modes, starting with dark mode!** With v5.3.0 you can implement your own color mode toggler (see below for an example from Boosted's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-bs-theme` attribute.
+**Boosted now supports color modes, starting with dark mode!** With v5.3.3 you can implement your own color mode toggler (see below for an example from Boosted's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-bs-theme` attribute.
+
+This `data-bs-theme` attribute will automatically apply the corresponding `color` and `background-color` properties of the targeted element.
+
+{{< example class="d-flex flex-column gap-4" >}}
+<div class="p-1">
+  <h1>Title</h1>
+  <p class="lead mb-0">This is a lead paragraph.</p>
+</div>
+<div class="p-1" data-bs-theme="light">
+  <h1>Title</h1>
+  <p class="lead mb-0">This is a lead paragraph.</p>
+</div>
+<div class="p-2" data-bs-theme="dark">
+  <h1>Title</h1>
+  <p class="lead mb-0">This is a lead paragraph.</p>
+</div>
+<div class="bg-supporting-blue p-2" data-bs-theme="light">
+  <h1>Title</h1>
+  <p class="lead mb-0">This is a lead paragraph.</p>
+</div>
+{{< /example >}}
+
+{{< callout warning >}}
+Applying a color mode directly on a component or element (especially with some basic HTML elements, form controls, etc.), some unexpected rendering may occur. It is mostly related to the automatic change of `color` and `background-color` properties linked to the color mode.
+
+Most of the time, the workaround will be to add a `data-bs-theme` attribute on the parent element of the component or element you want to apply a color mode to.
+{{< /callout >}}
 
 Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#building-with-sass). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below.
 
+### Contextual dark mode vs. dark variants
+
+Before v5.3.3, Boosted had dark variants for some components by applying `.{component}-dark` classes. These classes don't exist anymore and have been replaced by contextual dark mode. This means that all components will automatically switch to dark mode when the `data-bs-theme` attribute is set to `dark` on the parent element or the component itself.
+
 ## Example
 
 For example, to change the color mode of a dropdown, add `data-bs-theme="light"` or `data-bs-theme="dark"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display with the specified theme value.

From 8d318742302d268cc60dc9615f70a0cfd4d9d183 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Wed, 27 Dec 2023 11:56:41 +0100
Subject: [PATCH 70/71] Dark mode: add a warning callout to Orange's colors
 section (#2444)

---
 site/content/docs/5.3/components/orange-navbar.md | 2 ++
 site/content/docs/5.3/utilities/colors.md         | 6 +++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/site/content/docs/5.3/components/orange-navbar.md b/site/content/docs/5.3/components/orange-navbar.md
index fc7486599c..6108a9d3a3 100644
--- a/site/content/docs/5.3/components/orange-navbar.md
+++ b/site/content/docs/5.3/components/orange-navbar.md
@@ -384,6 +384,8 @@ You can add a mode selector control into your Global header.
 In this section, the dropdown menu items are not functional because the JavaScript is linked to the documentation mode selector; the active state and the tick icon are not rendered correctly. But don't worry, it'll work perfectly in your project.
 
 Don't forget to import the [corresponding color modes JavaScript]({{< docsref "/customize/color-modes#javascript" >}}) in your project.
+
+To easily integrate it in your project, you can start from our [Navbar mode selector example]({{< docsref "/examples/navbar-mode-selector" >}}).
 {{< /callout >}}
 
 <div class="bd-example-snippet">
diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index e19e610d4e..32e5729b46 100644
--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -62,9 +62,13 @@ To be sure to respect the specifications, it is necessary to define `color`, `ba
 Thus, the `.text-primary` color on white background (`#f16e00`) can only be used in a font size greater than 24px (using for example `.fs-3` utility), or 19px bold (using for example `.fs-4` and `.fw-bold` utilities).
 The `.text-primary` color on dark background (`#ff7900`) can be used in any size, and it shouldn't be used on light grey backgrounds at all.
 
+{{< callout warning >}}
+When the interface allows to switch between light and dark backgrounds, the light mode stricter restrictions must be applied!
+{{< /callout >}}
+
 Here are some compliant combinations examples for texts:
 
-  {{< example >}}
+{{< example >}}
 <div class="p-1" data-bs-theme="light">
   <p>regular text</p>
   <p class="text-primary fs-3">regular primary text with minimum font-size for contrast with .fs-3 (restrictive because of the light mode)</p>

From 6f8e9926f00012ea7415746459433b0d8125cc2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Tue, 2 Jan 2024 15:11:08 +0100
Subject: [PATCH 71/71] Dark mode: migration guide (#2433)

Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>
---
 .bundlewatch.config.json                      |   8 +-
 scss/_close.scss                              |   1 +
 scss/_footer.scss                             |   4 +-
 scss/_pagination.scss                         |   2 -
 scss/forms/_form-check.scss                   |   2 +-
 site/content/docs/5.3/about/brand.md          |   6 +-
 .../docs/5.3/components/back-to-top.md        |   2 +-
 site/content/docs/5.3/components/card.md      |   4 +-
 site/content/docs/5.3/components/dropdowns.md |   2 -
 site/content/docs/5.3/components/footer.md    |   6 +-
 site/content/docs/5.3/components/offcanvas.md |  18 +-
 .../docs/5.3/components/orange-navbar.md      |   2 +-
 site/content/docs/5.3/components/progress.md  |   2 +-
 .../content/docs/5.3/components/title-bars.md |  14 +-
 .../content/docs/5.3/customize/color-theme.md |  36 +-
 site/content/docs/5.3/dark-mode.md            |   2 +-
 .../docs/5.3/examples/download-app/index.html |   8 +-
 .../content/docs/5.3/examples/form/index.html |   2 +-
 .../examples/navbar-mode-selector/index.html  |   2 +-
 site/content/docs/5.3/migration.md            | 467 +++++++++++++++++-
 site/content/docs/5.3/utilities/borders.md    |   4 -
 site/content/docs/5.3/utilities/colors.md     |   8 +-
 site/layouts/partials/home/masthead.html      |   2 +-
 site/layouts/partials/skippy.html             |   4 +-
 .../shortcodes/orange-global-headers.html     |   8 +-
 .../5.3/assets/img/examples/cards-rtl.png     | Bin 23703 -> 3762 bytes
 .../5.3/assets/img/examples/cards-rtl@2x.png  | Bin 55107 -> 9315 bytes
 .../docs/5.3/assets/img/examples/cards.png    | Bin 4335 -> 6928 bytes
 .../docs/5.3/assets/img/examples/cards@2x.png | Bin 12286 -> 9731 bytes
 29 files changed, 524 insertions(+), 92 deletions(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 723b769040..089067fdad 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -10,7 +10,7 @@
     },
     {
       "path": "./dist/css/boosted-reboot.css",
-      "maxSize": "4.75 kB"
+      "maxSize": "4.5 kB"
     },
     {
       "path": "./dist/css/boosted-reboot.min.css",
@@ -18,7 +18,7 @@
     },
     {
       "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
index d732d85dc0..58826003a0 100644
--- 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
index 945021e4ad..236ee285d8 100644
--- 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
index 17c29dbd88..7de7a280cb 100644
--- 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
index f31fa58cbb..9f488110f4 100644
--- 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
index 6971cf0ba6..b7febdfcb3 100644
--- a/site/content/docs/5.3/about/brand.md
+++ b/site/content/docs/5.3/about/brand.md
@@ -19,7 +19,7 @@ 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>
@@ -27,7 +27,7 @@ Have a need for Boosted's brand resources? Great! We have only a few guidelines
   </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
index 66bda336d5..ca6435382c 100644
--- 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
index d44b3adacb..1a8594ed7b 100644
--- 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
index 9ec30165ae..dfc230a114 100644
--- 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
index 5199b152d4..256649f280 100644
--- 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
index 07d1595ecf..b2821fc967 100644
--- 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
index 6108a9d3a3..294aa31500 100644
--- 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
index 1982e6f786..f030e6d21c 100644
--- 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
index 90ba1932e5..4d6a9170e7 100644
--- 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
index 47e8e36469..0d8bf5ad4c 100644
--- 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
index 457ef48a87..70fc794200 100644
--- 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
index 7695e7495a..ba5792b3e7 100644
--- 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
index 71825ce4c8..990f557f4a 100644
--- 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
index 39c47cc136..c2e55b7f29 100644
--- 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
index 569db4af83..656deb3476 100644
--- a/site/content/docs/5.3/migration.md
+++ b/site/content/docs/5.3/migration.md
@@ -17,63 +17,526 @@ Boosted v5.3.3 has landed also including specific Boosted content as usual.
 
 If you need more details about the changes, please refer to the [v5.3.3 release](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/releases/tag/v5.3.3).
 
+### Dark mode!
+
+Bootstrap introduced the inner color modes mechanism in v5.3.0. **The dark mode was not yet available in the Orange Design System specifications at this time, but is now available since v5.3.3!**
+
+Learn more by reading the new [color modes documentation]({{< docsref "/customize/color-modes" >}}).
+
+This change has an impact on how you should use Boosted. Please read carefully the following notes.
+
+From a general point of view, the dark mode is optional on Orange websites. However, a new concept has been introduced and replaces our dark variants for components. It is referred to as "contextual dark mode" and is based on the `data-bs-theme="dark"` attribute. It is used to switch a component or a container to dark mode, independently of the global color mode. It implies that all the `.{component}-dark` classes have been removed from Boosted and that `${component}-*-inverted` Sass variables have been deprecated.
+
+Please note that `data-bs-theme` (default, light or dark) automatically sets the `color` and `background-color` CSS properties to `inherit` on the element it is applied to. This means that some of our components have been adapted to this new behavior by setting their default colors and background colors differently (some of them are not transparent). Please double-check that it doesn't break your design. And more generally, please check carefully that this new version doesn't break your design even if you didn't use the dark variants before.
+
+The use of colors have been revamped to be more consistent and easier to use. During the process, some colors have been modified in light mode to be darker and ensure a better contrast: primary, success and info.
+
+All our helpers and utilities have also been adapted to the new color modes mechanism and automatically switch their colors and background colors depending on the current color mode.
+As a result, you should for instance now rather use `.text-bg-{color}` classes instead of `.bg-{color}` classes when possible for automatic contrast.
+
+Retrieve our color palette in the [new color palette documentation]({{< docsref "/customize/color-palette" >}}).
+
+Retrieve our color theme in the [new color theme documentation]({{< docsref "/customize/color-theme" >}}) that gathers the useful CSS variables switching between light and dark mode.
+
 ### Components
 
+- **Accordion**
+  - <span class="badge text-bg-danger">Breaking</span> The dark variant of the accordion (`.accordion-dark`) has been replaced by using the contextual dark mode with `data-bs-theme="dark"`.
+
+- **Alerts**
+  - <span class="badge text-bg-danger">Breaking</span> The dark variant of the alerts have been replaced by using the contextual dark mode with `data-bs-theme="dark"`.
+
 - **Badge**
   - <span class="badge text-bg-warning">Warning</span> It has been fixed in several places in the documentation that badge background and text colors should be handled by using `.text-bg-{color}` classes and not only `.bg-{color}` classes. Please reflect these modifications into your websites.
 
+- **Back to top**
+  - <span class="badge text-bg-danger">Breaking</span> Its markup has been changed where `.btn-secondary` has been replaced by `.btn-outline-secondary`. Please reflect this modification into your websites.
+
+- **Breadcrumb**
+  - <span class="badge text-bg-danger">Breaking</span> The dark variant of the breadcrumb (`.breadcrumb-dark`) has been replaced by using the contextual dark mode with `data-bs-theme="dark"`.
+
+- **Buttons**
+  - <span class="badge text-bg-danger">Breaking</span> The rendering of the secondary button has changed:
+    - if you were using the secondary button as an outline button and want to keep the same rendering, please use the new `.btn-outline-secondary` class instead of `.btn-secondary`. All the secondary buttons in the documentation, components and examples have been updated to use this new class. Please reflect this modification into your websites.
+    - if you were using a black button with `.btn-info` or `.btn-dark`, please now use `.btn-secondary` instead.
+  - <span class="badge text-bg-danger">Breaking</span> The dark variant of the buttons (`.btn-inverse`) has been replaced by using the contextual dark mode with `data-bs-theme="dark"`.
+
+- **Button group**
+  - <span class="badge text-bg-danger">Breaking</span> The variants using secondary buttons have changed their markup by replacing `.btn-secondary` by `.btn-outline-secondary`. Please reflect this modification into your websites.
+  - <span class="badge text-bg-danger">Breaking</span> Checkbox and radio button groups have changed their markup by replacing `.btn-primary` by `.btn-toggle`. Please reflect this modification into your websites.
+
+- **Close button**
+  - <span class="badge text-bg-danger">Breaking</span> The dark variant of the breadcrumb (`.btn-close-white`) has been replaced by using the contextual dark mode with `data-bs-theme="dark"`.
+
+- **Dropdown**
+  - <span class="badge text-bg-success">New</span> Rendering has been updated based on the new design specifications for the hover and actives states of dropdown menu items.
+  - <span class="badge text-bg-danger">Breaking</span> Dropdown markup has changed by replacing `.btn-secondary` by `.btn-dropdown` class. Please reflect this modification into your websites.
+  - <span class="badge text-bg-danger">Breaking</span> The dark variant of the dropdown (`.dropdown-menu-dark`) has been replaced by using the contextual dark mode with `data-bs-theme="dark"`.
+  - <span class="badge text-bg-danger">Breaking</span> The variants using secondary buttons have changed their markup by replacing `.btn-secondary` by `.btn-outline-secondary`. Please reflect this modification into your websites.
+
+- **Footer**
+  - <span class="badge text-bg-danger">Breaking</span> Footer has changed its markup:
+    - `.navbar-dark.bg-dark` classes have been replaced by using the `.navbar` class and the contextual dark mode with `data-bs-theme="dark"` on the `<footer>`.
+    - `.accordion-dark` class has been removed.
+    - if an input was present in your footer, there is no need anymore to add background, color and border utilities to it.
+    - if a button was present in your footer, remove its `.btn-inverse` class. If it was a secondary button, transform it into an outline secondary.
+
+    All examples using a Footer have of course been updated to use this new markup. Make sure to incorporate these changes into your websites.
+
 - **List group**
+  - <span class="badge text-bg-danger">Breaking</span> The dark variant of the list group (`.list-group-dark`) has been replaced by using the contextual dark mode with `data-bs-theme="dark"`.
   - <span class="badge text-bg-success">New</span> The list group variants using contextual classes are now branded correctly. Please check that it doesn't break your design.
   - <span class="badge text-bg-success">New</span> List group with badges has been added to Orange Design System specifications and can now be used in your websites.
   - <span class="badge text-bg-warning">Warning</span> List group font weight is now bold by default. Please check that it doesn't break your design.
 
+- **Local navigation**
+  - <span class="badge text-bg-success">New</span> Rendering has been updated based on the new design specifications for the hover state of navigation items.
+  - <span class="badge text-bg-danger">Breaking</span> The dark variant of the local navigation (`.local-nav-dark`) has been replaced by using the contextual dark mode with `data-bs-theme="dark"`.
+
+- **Modal**
+  - <span class="badge text-bg-danger">Breaking</span> The variants using secondary buttons have changed their markup by replacing `.btn-secondary` by `.btn-outline-secondary`. Please reflect this modification into your websites.
+
+- **Navbar**
+  - <span class="badge text-bg-success">New</span> A new automatic rendering has been added to the navbar's dropdowns containing texts or SVG icons.
+  - <span class="badge text-bg-warning">Warning</span> Navbars are not supposed to be used as is in an Orange website. Anyway, all the variants are not dark by default but white.
+
+- **Offcanvas**
+  - <span class="badge text-bg-danger">Breaking</span> The dark variant of the offcanvas has been replaced by using the contextual dark mode with `data-bs-theme="dark"`.
+
+- **Orange navbar**
+  - <span class="badge text-bg-success">New</span> A new Orange navbar with mode selector variant is now available.
+
+  - <span class="badge text-bg-danger">Breaking</span> Orange navbars have changed their markup (including supra bars):
+    - `.navbar-dark.bg-dark` classes have been replaced by using the contextual dark mode with `data-bs-theme="dark"` on the `<header>`.
+    - if an input was present in your navbar, there is no need anymore to add background, color and border utilities to it.
+    - if a notification badge was present in your navbar, the notification text doesn't need `.text-white` anymore. It'll be automatically set to white in dark mode and black in light mode.
+
+    All examples using an Orange navbar have of course been updated to use this new markup. Make sure to incorporate these changes into your websites.
+
+- **Pagination**
+  - <span class="badge text-bg-success">New</span> Rendering has been updated based on the new design specifications for the hover state of page items.
+  - <span class="badge text-bg-danger">Breaking</span> The dark variant of the pagination (`.pagination-dark`) has been replaced by using the contextual dark mode with `data-bs-theme="dark"`.
+
+- **Progress**
+  - <span class="badge text-bg-warning">Warning</span> Thanks to the automatic contrast mechanism, some progress bars variants with texts have been modified to avoid using text utilities that are set automatically. However the default progress bar and the warning ones still need a `.text-dark`. Please reflect these modifications into your websites.
+
+- **Stepped Process**
+  - <span class="badge text-bg-danger">Breaking</span> The dark variant of the stepped process (`.stepped-process-dark`) has been replaced by using the contextual dark mode with `data-bs-theme="dark"`.
+
+- **Tags**
+  - <span class="badge text-bg-danger">Breaking</span> The dark variant of the tags (`.tag-dark`) has been replaced by using the contextual dark mode with `data-bs-theme="dark"`.
+
+- **Title bar**
+  - <span class="badge text-bg-danger">Breaking</span> The variants with background colors have been modified to apply the right `data-bs-theme` attribute. And the `.bg-dark`, `.bg-black`, and `.bg-white` classes have been removed since they don't make sense anymore. Please reflect these modifications into your websites.
+
+- **Toasts**
+  - <span class="badge text-bg-danger">Breaking</span> The dark variant of the toast has been modified by using the contextual dark mode with `data-bs-theme="dark"`. Please reflect this modification into your websites.
+
 ### Contents
 
 - <span class="badge text-bg-warning">Warning</span> The `.lead` class has been updated to reflect the new letter-spacing value for desktop breakpoint, and the line-height values for tablet and mobile breakpoints. Please check that it doesn't break your design.
 
+- <span class="badge text-bg-danger">Breaking</span> Table dark variant has been replaced by using the contextual dark mode with `data-bs-theme="dark"`.
+
+- <span class="badge text-bg-warning">Warning</span> Striped table background color has changed to adapt to the new color modes mechanism.
+
 ### Forms
 
-- <span class="badge text-bg-warning">Warning</span> Quantity selector has been updated to ensure a proper visible focus state and the `.input-group` class has been removed. Make sure to incorporate these changes into your websites.
+- **Checks & Radios**
+  - <span class="badge text-bg-danger">Breaking</span> Toggle buttons have changed their markup by removing any `.btn-primary` or `.btn-secondary`, and by adding the new `.btn-toggle` class. Please reflect this modification into your websites.
+
+- **Input group**
+  - <span class="badge text-bg-danger">Breaking</span> The variants using secondary buttons have changed their markup by replacing `.btn-secondary` by `.btn-outline-secondary`. Please reflect this modification into your websites.
+
+- **Quantity Selector**
+  - <span class="badge text-bg-success">New</span> Rendering has been updated to ensure a proper visible focus state.
+  - <span class="badge text-bg-danger">Breaking</span> The markup has been changed:
+    - `.input-group` class has been removed
+    - `.btn-secondary` class has been replaced by `.btn-outline-secondary`
+    
+    Make sure to incorporate these changes into your websites.
+
+- **Star rating**
+  - <span class="badge text-bg-danger">Breaking</span> The dark variant of the star rating (`.star-rating-dark`) has been replaced by using the contextual dark mode with `data-bs-theme="dark"`.
+
+### Utilities
+
+- <span class="badge text-bg-success">New</span> Orange supporting background (`.bg-supporting-orange`) has been added.
+
+### Examples
+
+All the examples have a mode selector on the bottom right corner to switch between light and dark mode to help you check the rendering. These mode selectors are not part of the examples themselves and shouldn't be included in your websites. Please note that these mode selectors are not rendered in the examples that already contain a mode selector in their navbars.
+
+- <span class="badge text-bg-warning">Warning</span> Cards and Cards RTL examples have been simplified to remove the dark variants that can be achieved with a contextual dark mode.
+
+- <span class="badge text-bg-warning">Warning</span> Download page example has been slightly modified to use the new markup of Orange navbar, and footer, but also to change its usage of text and background utilities to work with the new color modes mechanism. The navbar now includes a mode selector. Please reflect these modifications if you have a similar rendering in your websites.
+
+- <span class="badge text-bg-warning">Warning</span> Form example has been slightly modified to use the new markup of Orange navbar, title bar and footer. The navbar now includes a mode selector. Please reflect these modifications if you have a similar rendering in your websites.
+
+- <span class="badge text-bg-success">New</span> A navbar mode selector has been added to the examples to render a single navbar with a mode selector to switch between light and dark mode.
+
+- <span class="badge text-bg-warning">Warning</span> Masonry example has been slightly modified to change its usage of text and background utilities to work with the new color modes mechanism. Please reflect these modifications if you have a similar rendering in your websites.
+
+- <span class="badge text-bg-warning">Warning</span> Title bars example has been slightly modified to drop a `.bg-body` and use `data-bs-theme="light"` in combination with `.bg-supporting-blue` and `.bg-supporting-pink`. Make sure to incorporate these changes into your websites.
 
 ### CSS and Sass variables
 
+- <span class="badge text-bg-success">New</span> A new `scss/_color-palette.scss` file has been added to provide Sass variables representing the color palette. It is automatically imported in `scss/_variables.scss` which uses these variables instead of hex values.
+
+- <span class="badge text-bg-success">New</span> A new `button-outline-variant()` mixin has been added.
+
+- <span class="badge text-bg-danger">Breaking</span> The `button-variant()` mixin has removed its last argument.
+
+- <span class="badge text-bg-danger">Breaking</span> `$accessible-orange` and `$brand-orange` Sass variables have been removed. Please refer to the [new color theme documentation]({{< docsref "/customize/color-theme" >}}) and the [new color palette documentation]({{< docsref "/customize/color-palette" >}}) for more details about the new color modes mechanism.
+
 - <details class="mb-2">
     <summary><span class="badge text-bg-success">New</span> CSS variables:</summary>
     <ul>
+      <li><code>--bs-back-to-top-link-bg</code></li>
+      <li><code>--bs-border-color-subtle</code></li>
+      <li><code>--bs-breadcrumb-divider-filter</code></li>
+      <li><code>--bs-disabled-color</code></li>
+      <li><code>--bs-form-check-filter</code></li>
+      <li><code>--bs-form-check-input-disabled-color</code></li>
+      <li><code>--bs-form-color-disabled-filter</code></li>
+      <li><code>--bs-form-select-disabled-indicator</code></li>
+      <li><code>--bs-form-select-indicator</code></li>
+      <li><code>--bs-form-switch-square-bg</code></li>
+      <li><code>--bs-footer-color</code></li>
+      <li><code>--bs-gray-950</code></li>
       <li><code>--bs-list-group-font-weight</code></li>
       <li><code>--bs-list-group-item-icon-margin-x</code></li>
       <li><code>--bs-list-group-item-icon-size</code></li>
+      <li><code>--bs-navbar-bg</code></li>
+      <li><code>--bs-navbar-toggler-icon-color</code></li>
+      <li><code>--bs-navbar-toggler-icon-hover-color</code></li>
+      <li><code>--bs-stepped-process-bg</code></li>
+      <li><code>--bs-sticker-color</code></li>
+      <li><code>--bs-tab-content-border-color</code></li>
+      <li><code>--bs-table-active-bg-factor</code></li>
+      <li><code>--bs-table-hover-bg-factor</code></li>
+      <li><code>--bs-table-striped-bg-factor</code></li>
+      <li><code>--bs-tag-bg</code></li>
+      <li><code>--bs-tag-color</code></li>
+      <li><code>--bs-tertiary-active-bg</code></li>
+      <li><code>--bs-title-bar-bg</code></li>
+      <li><code>--bs-title-bar-color</code></li>
     </ul>
   </details>
 
 - <details class="mb-2">
     <summary><span class="badge text-bg-success">New</span> Sass variables:</summary>
     <ul>
-      <li><code>$list-group-dark-hover-bg</code></li>
+      <li><code>$back-to-top-bg</code></li>
+      <li><code>$back-to-top-title-color</code></li>
+      <li><code>$border-color-subtle</code></li>
+      <li><code>$border-color-subtle-dark</code></li>
+      <li><code>$breadcrumb-divider-filter</code></li>
+      <li><code>$breadcrumb-divider-filter-dark</code></li>
+      <li><code>$btn-default-active-bg</code></li>
+      <li><code>$btn-default-active-border</code></li>
+      <li><code>$btn-default-active-color</code></li>
+      <li><code>$btn-default-disabled-bg</code></li>
+      <li><code>$btn-default-disabled-border</code></li>
+      <li><code>$btn-default-disabled-color</code></li>
+      <li><code>$btn-default-hover-bg</code></li>
+      <li><code>$btn-default-hover-border</code></li>
+      <li><code>$btn-default-hover-color</code></li>
+      <li><code>$btn-hover-color</code></li>
+      <li><code>$btn-outline-default-active-bg</code></li>
+      <li><code>$btn-outline-default-active-border</code></li>
+      <li><code>$btn-outline-default-active-color</code></li>
+      <li><code>$btn-outline-default-disabled-bg</code></li>
+      <li><code>$btn-outline-default-disabled-border</code></li>
+      <li><code>$btn-outline-default-disabled-color</code></li>
+      <li><code>$btn-outline-default-hover-bg</code></li>
+      <li><code>$btn-outline-default-hover-border</code></li>
+      <li><code>$btn-outline-default-hover-color</code></li>
+      <li><code>$carousel-caption-bg</code></li>
+      <li><code>$carousel-control-icon-color</code></li>
+      <li><code>$danger-dark</code></li>
+      <li><code>$danger-icon-dark</code></li>
+      <li><code>$dark-dark</code></li>
+      <li><code>$disabled-color</code></li>
+      <li><code>$disabled-color-dark</code></li>
+      <li><code>$focus-ring-color-dark</code></li>
+      <li><code>$focus-visible-inner-color-dark</code></li>
+      <li><code>$focus-visible-outer-color-dark</code></li>
+      <li><code>$footer-color</code></li>
+      <li><code>$form-check-filter</code></li>
+      <li><code>$form-check-filter-dark</code></li>
+      <li><code>$form-check-input-disabled-color-dark</code></li>
+      <li><code>$form-check-input-disabled-filter</code></li>
+      <li><code>$form-color-border-color</code></li>
+      <li><code>$form-color-disabled-bg-color</code></li>
+      <li><code>$form-color-disabled-filter</code></li>
+      <li><code>$form-color-disabled-filter-dark</code></li>
+      <li><code>$form-color-hover-bg-color</code></li>
+      <li><code>$form-feedback-color</code></li>
+      <li><code>$form-helper-bg</code></li>
+      <li><code>$form-helper-color</code></li>
+      <li><code>$form-helper-icon</code></li>
+      <li><code>$form-label-required-color</code></li>
+      <li><code>$form-select-disabled-indicator-dark</code></li>
+      <li><code>$form-select-indicator-dark</code></li>
+      <li><code>$form-star-rating-disabled-color</code></li>
+      <li><code>$form-switch-bg</code></li>
+      <li><code>$form-switch-border-color</code></li>
+      <li><code>$form-switch-checked-bg</code></li>
+      <li><code>$form-switch-checked-border-color</code></li>
+      <li><code>$form-switch-checked-filter</code></li>
+      <li><code>$form-switch-checked-focus-inner</code></li>
+      <li><code>$form-switch-checked-focus-outer</code></li>
+      <li><code>$form-switch-checked-square-bg</code></li>
+      <li><code>$form-switch-filter</code></li>
+      <li><code>$form-switch-focus-visible-inner</code></li>
+      <li><code>$form-switch-focus-visible-outer</code></li>
+      <li><code>$form-switch-square-bg</code></li>
+      <li><code>$form-switch-square-bg-dark</code></li>
+      <li><code>$functional-blue-dark</code></li>
+      <li><code>$functional-green-dark</code></li>
+      <li><code>$functional-red-dark</code></li>
+      <li><code>$functional-yellow-dark</code></li>
+      <li><code>$info-dark</code></li>
       <li><code>$list-group-divider-size</code></li>
       <li><code>$list-group-font-weight</code></li>
       <li><code>$list-group-icons</code></li>
       <li><code>$list-group-item-icon-margin-x</code></li>
       <li><code>$list-group-item-icon-size</code></li>
       <li><code>$list-group-numbered-item-margin-end</code></li>
+      <li><code>$nav-tabs-link-hover-bg</code></li>
+      <li><code>$nav-tabs-link-hover-color</code></li>
+      <li><code>$navbar-light-bg</code></li>
+      <li><code>$navbar-light-icon-color</code></li>
+      <li><code>$navbar-light-icon-hover-color</code></li>
+      <li><code>$ods-black-900</code></li>
+      <li><code>$ods-blue-100</code></li>
+      <li><code>$ods-blue-200</code></li>
+      <li><code>$ods-blue-300</code></li>
+      <li><code>$ods-blue-400</code></li>
+      <li><code>$ods-blue-500</code></li>
+      <li><code>$ods-blue-600</code></li>
+      <li><code>$ods-fire-100</code></li>
+      <li><code>$ods-fire-200</code></li>
+      <li><code>$ods-forest-100</code></li>
+      <li><code>$ods-forest-200</code></li>
+      <li><code>$ods-gray-200</code></li>
+      <li><code>$ods-gray-300</code></li>
+      <li><code>$ods-gray-400</code></li>
+      <li><code>$ods-gray-500</code></li>
+      <li><code>$ods-gray-600</code></li>
+      <li><code>$ods-gray-700</code></li>
+      <li><code>$ods-gray-800</code></li>
+      <li><code>$ods-gray-900</code></li>
+      <li><code>$ods-green-100</code></li>
+      <li><code>$ods-green-200</code></li>
+      <li><code>$ods-green-300</code></li>
+      <li><code>$ods-green-400</code></li>
+      <li><code>$ods-green-500</code></li>
+      <li><code>$ods-green-600</code></li>
+      <li><code>$ods-orange-100</code></li>
+      <li><code>$ods-orange-200</code></li>
+      <li><code>$ods-pink-100</code></li>
+      <li><code>$ods-pink-200</code></li>
+      <li><code>$ods-pink-300</code></li>
+      <li><code>$ods-pink-400</code></li>
+      <li><code>$ods-pink-500</code></li>
+      <li><code>$ods-pink-600</code></li>
+      <li><code>$ods-purple-200</code></li>
+      <li><code>$ods-purple-300</code></li>
+      <li><code>$ods-purple-400</code></li>
+      <li><code>$ods-purple-500</code></li>
+      <li><code>$ods-purple-600</code></li>
+      <li><code>$ods-sun-100</code></li>
+      <li><code>$ods-sun-200</code></li>
+      <li><code>$ods-water-100</code></li>
+      <li><code>$ods-water-200</code></li>
+      <li><code>$ods-white-100</code></li>
+      <li><code>$ods-yellow-200</code></li>
+      <li><code>$ods-yellow-300</code></li>
+      <li><code>$ods-yellow-400</code></li>
+      <li><code>$ods-yellow-500</code></li>
+      <li><code>$ods-yellow-600</code></li>
+      <li><code>$light-dark</code></li>
+      <li><code>$primary-dark</code></li>
+      <li><code>$quantity-selector-btn-bg</code></li>
+      <li><code>$quantity-selector-btn-border</code></li>
+      <li><code>$quantity-selector-disabled-bg</code></li>
+      <li><code>$quantity-selector-disabled-color</code></li>
+      <li><code>$secondary-dark</code></li>
+      <li><code>$spinner-color</code></li>
+      <li><code>$stepped-process-bg</code></li>
+      <li><code>$sticker-background-color</code></li>
+      <li><code>$sticker-color</code></li>
+      <li><code>$sticker-font-weight</code></li>
+      <li><code>$success-dark</code></li>
+      <li><code>$success-icon-dark</code></li>
+      <li><code>$supporting-orange</code></li>
+      <li><code>$table-active-bg-factor-dark</code></li>
+      <li><code>$table-bg-scale</code></li>
+      <li><code>$table-hover-bg-factor-dark</code></li>
+      <li><code>$table-striped-bg-factor-dark</code></li>
+      <li><code>$tag-bg</code></li>
+      <li><code>$tag-color</code></li>
+      <li><code>$tertiary-active-bg</code></li>
+      <li><code>$tertiary-active-bg-dark</code></li>
+      <li><code>$title-bar-color</code></li>
+      <li><code>$title-bar-bg</code></li>
+      <li><code>$warning-dark</code></li>
       <li><code>$warning-icon-filled</code></li>
     </ul>
   </details>
 
+- <details class="mb-2">
+    <summary><span class="badge text-bg-success">New</span> Sass maps:</summary>
+    <ul>
+      <li><code>$svg-as-custom-props-dark</code></li>
+      <li><code>$theme-colors-dark</code></li>
+      <li><code>$theme-colors-rgb-dark</code></li>
+    </ul>
+  </details>
+
 - <details class="mb-2">
     <summary><span class="badge text-bg-danger">Breaking</span> Deprecated CSS variables:</summary>
     <ul>
       <li><code>--bs-back-to-top-link-icon-margin-left</code></li>
+      <li><code>--bs-pagination-focus-bg</code></li>
+      <li><code>--bs-pagination-focus-box-shadow</code></li>
+      <li><code>--bs-pagination-focus-color</code></li>
+      <li><code>--bs-primary-text-rgb</code></li>
+      <li><code>--bs-table-striped-hover-bg</code></li>
+      <li><code>--bs-table-striped-hover-color</code></li>
     </ul>
   </details>
 
 - <details class="mb-2">
     <summary><span class="badge text-bg-danger">Breaking</span> Deprecated Sass variables:</summary>
     <ul>
+      <li><code>$accessible-orange</code></li>
+      <li><code>$accordion-dark-bg</code></li>
+      <li><code>$accordion-dark-border-color</code></li>
+      <li><code>$accordion-dark-button-active-color</code></li>
+      <li><code>$accordion-dark-button-bg</code></li>
+      <li><code>$accordion-dark-button-color</code></li>
+      <li><code>$accordion-dark-button-hover-bg</code></li>
+      <li><code>$accordion-dark-color</code></li>
       <li><code>$background-colors</code></li>
+      <li><code>$brand-orange</code></li>
+      <li><code>$breadcrumb-dark-color</code></li>
+      <li><code>$breadcrumb-dark-bg</code></li>
+      <li><code>$breadcrumb-dark-divider-color</code></li>
+      <li><code>$breadcrumb-dark-active-color</code></li>
+      <li><code>$btn-close-white-active-border-color</code></li>
+      <li><code>$btn-close-white-active-color</code></li>
+      <li><code>$btn-close-white-bg</code></li>
+      <li><code>$btn-close-white-border-color</code></li>
+      <li><code>$btn-close-white-color</code></li>
+      <li><code>$btn-close-white-disabled-color</code></li>
+      <li><code>$btn-close-white-hover-color</code></li>
+      <li><code>$code-color-inverted</code></li>
+      <li><code>$dropdown-dark-bg</code></li>
+      <li><code>$dropdown-dark-box-shadow</code></li>
+      <li><code>$dropdown-dark-border-color</code></li>
+      <li><code>$dropdown-dark-divider-bg</code></li>
+      <li><code>$dropdown-dark-color</code></li>
+      <li><code>$dropdown-dark-header-color</code></li>
+      <li><code>$dropdown-dark-link-active-bg</code></li>
+      <li><code>$dropdown-dark-link-active-color</code></li>
+      <li><code>$dropdown-dark-link-disabled-color</code></li>
+      <li><code>$dropdown-dark-link-hover-bg</code></li>
+      <li><code>$dropdown-dark-link-hover-color</code></li>
+      <li><code>$dropdown-dark-link-color</code></li>
+      <li><code>$focus-visible-inner-color-inverted</code></li>
+      <li><code>$focus-visible-outer-color-inverted</code></li>
+      <li><code>$form-star-rating-dark-checked-color</code></li>
+      <li><code>$form-star-rating-dark-hover-color</code></li>
+      <li><code>$form-star-rating-dark-unchecked-color</code></li>
+      <li><code>$kbd-bg-inverted</code></li>
+      <li><code>$kbd-color-inverted</code></li>
+      <li><code>$link-color-inverted</code></li>
+      <li><code>$link-hover-color-inverted</code></li>
+      <li><code>$list-group-dark-active-bg</code></li>
+      <li><code>$list-group-dark-active-border-color</code></li>
+      <li><code>$list-group-dark-active-color</code></li>
+      <li><code>$list-group-dark-action-active-bg</code></li>
+      <li><code>$list-group-dark-action-active-color</code></li>
+      <li><code>$list-group-dark-action-color</code></li>
+      <li><code>$list-group-dark-action-hover-color</code></li>
+      <li><code>$list-group-dark-bg</code></li>
+      <li><code>$list-group-dark-border-color</code></li>
+      <li><code>$list-group-dark-color</code></li>
+      <li><code>$list-group-dark-disabled-bg</code></li>
+      <li><code>$list-group-dark-disabled-color</code></li>
+      <li><code>$list-group-dark-hover-bg</code></li>
+      <li><code>$local-nav-dark-active-bg</code></li>
+      <li><code>$local-nav-dark-active-color</code></li>
+      <li><code>$local-nav-dark-bg</code></li>
+      <li><code>$local-nav-dark-border-color</code></li>
+      <li><code>$local-nav-dark-color</code></li>
+      <li><code>$local-nav-dark-hover-bg</code></li>
+      <li><code>$local-nav-dark-hover-color</code></li>
+      <li><code>$mark-bg-inverted</code></li>
+      <li><code>$mark-color-inverted</code></li>
+      <li><code>$navbar-dark-active-color</code></li>
+      <li><code>$navbar-dark-border-color</code></li>
+      <li><code>$navbar-dark-brand-color</code></li>
+      <li><code>$navbar-dark-brand-hover-color</code></li>
+      <li><code>$navbar-dark-color</code></li>
+      <li><code>$navbar-dark-disabled-color</code></li>
+      <li><code>$navbar-dark-hover-color</code></li>
+      <li><code>$navbar-dark-toggler-border-color</code></li>
+      <li><code>$orange-filter</code></li>
+      <li><code>$pagination-dark-active-bg</code></li>
+      <li><code>$pagination-dark-active-border-color</code></li>
+      <li><code>$pagination-dark-active-color</code></li>
+      <li><code>$pagination-dark-active-item-bg</code></li>
+      <li><code>$pagination-dark-active-item-border-color</code></li>
+      <li><code>$pagination-dark-active-item-color</code></li>
+      <li><code>$pagination-dark-bg</code></li>
+      <li><code>$pagination-dark-border-color</code></li>
+      <li><code>$pagination-dark-color</code></li>
+      <li><code>$pagination-dark-disabled-bg</code></li>
+      <li><code>$pagination-dark-disabled-border-color</code></li>
+      <li><code>$pagination-dark-disabled-color</code></li>
+      <li><code>$pagination-dark-focus-bg</code></li>
+      <li><code>$pagination-dark-focus-color</code></li>
+      <li><code>$pagination-dark-hover-bg</code></li>
+      <li><code>$pagination-dark-hover-border-color</code></li>
+      <li><code>$pagination-dark-hover-color</code></li>
+      <li><code>$pagination-focus-bg</code></li>
+      <li><code>$pagination-focus-box-shadow</code></li>
+      <li><code>$pagination-focus-color</code></li>
+      <li><code>$pagination-focus-outline</code></li>
+      <li><code>$pre-color-inverted</code></li>
+      <li><code>$step-item-dark-active-bg</code></li>
+      <li><code>$step-item-dark-bg</code></li>
+      <li><code>$step-item-dark-drop-shadow</code></li>
+      <li><code>$step-item-dark-next-bg</code></li>
+      <li><code>$step-link-dark-active-color</code></li>
+      <li><code>$step-link-dark-color</code></li>
+      <li><code>$step-link-dark-next-color</code></li>
+      <li><code>$table-caption-color-inverted</code></li>
+      <li><code>$table-striped-hover-bg</code></li>
+      <li><code>$table-striped-hover-bg-factor</code></li>
+      <li><code>$table-striped-hover-color</code></li>
+      <li><code>$tag-active-color-dark</code></li>
+      <li><code>$tag-active-decoration-color-dark</code></li>
+      <li><code>$tag-border-color-dark</code></li>
+      <li><code>$tag-disabled-color-dark</code></li>
+      <li><code>$title-bar-border-color-dark</code></li>
     </ul>
   </details>
 
+### Docs
+
+- <span class="badge text-bg-danger">Removed</span> Customize > Color page has been removed.
+
+- <span class="badge text-bg-success">New</span> [Customize > Color palette]({{< docsref "/customize/color-palette" >}}) page has been added.
+
+- <span class="badge text-bg-success">New</span> [Customize > Color theme]({{< docsref "/customize/color-theme" >}}) page has been added.
+
+- <span class="badge text-bg-warning">Warning</span> If you were using our `#check2` icon, please note that its content has been changed.
+
 ## v5.3.2
 
 <hr class="mb-4">
diff --git a/site/content/docs/5.3/utilities/borders.md b/site/content/docs/5.3/utilities/borders.md
index 8d874ce442..bf21aaa859 100644
--- 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
index 32e5729b46..1f6a76a2ed 100644
--- 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
index 9e40f3fe0d..69707e7efe 100644
--- 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
index f965a510e7..af5df50f70 100644
--- 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
index 81199979e7..9d12debca3 100644
--- 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
index 34ab0155d9c74c13fa8f9f0817f43b2145ddcd03..e3440f158a175d68a2af6c199d8f88fbe7e3ec18 100644
GIT binary patch
literal 3762
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

literal 23703
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
J*GQU%{1<gWE${#U

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
index b24010c9723b9096ff3e71fb11faa53ff08f2c22..cf98cf66de18a14994a75aeb5150e6dd29ee7d47 100644
GIT binary patch
literal 9315
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
auMXBy@>s}i%hB#Yfsvk>Zkaae=KlgR2q%XC

literal 55107
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
Y84m#gGkU1U|GfdBMiw_o2JQ*}1E|)J6#xJL

diff --git a/site/static/docs/5.3/assets/img/examples/cards.png b/site/static/docs/5.3/assets/img/examples/cards.png
index 0f37e5df0520ac21f586485d4035df3ac570273c..52e0b32eb12e145731de4417e9c8fc78cf2f800f 100644
GIT binary patch
literal 6928
zcmV+r8}H<aP)<h;3K|Lk000e1NJLTq00H0t00Arn0{{R3>Ck;?0000XP)t-s|NsB`
z`uXqg@9XR9<KyGj*4E6-%&@Polai8ia&%TyS0F+k0RR9Rs!2paRCwC#(WjNfKoCXI
zuiXH~a#=1LfGi)Ee=1{nb<4naPr*n2DFFZg00000003Yc!NI|&*>BfqW%FYU&PLl5
zNoQA6cr=~#|8PWCDHt7Y9?jht+|;(_GiHOP{tO-*O)vdz(KObFlRB-8%RXbO^-cO2
z+^1%h^it59N$S(QNGqch#-SJn-bK2Bw)a2V@+uQpi03Ud_;XS`6_L%t{8Z*=#uXMn
zC%p^fI}@R>6`IP}KQgLtEShh6jOflNB>a&K^Q8A*Ox8(-2~nCbBQ68m+!9t~uQM_+
zVGpBZ8U6VR6B0E&L{cWOjT9DEU`9p?U}cQ|dJ`tZ$~QekCSh9I;)Kn{l{wIj5gJ!G
zh%`M!hQXz|r9TJBK97uU%z?a4g%O#SW~2$jHrIq3owun>jhRv8y|^lDLZ+n|X~LnU
z&B6!DwSi4onHq1t6)wUp%}5ibZ6dR9U*?v!3|JY}cq!KrE`lwMNXo!Ax3ly)Omu7M
zXvM5y3Smp92(~mJPr|fKu4hRp1`S;175n#AYr9Up!z0fvofV0O$+oob->~OZZr~j1
z6;oWsk`lib@sn_Uv8DH4i7c1N`_lC_3b!H@Zs1byScWOGoXANyE&?sRBYzn&!|PUY
zAdL2MKhnSlyaMpb1z5rjtfBuBHfuCT4`YY$FXW1&IWu#mam%oHzi9;4Ne{!hr6Yas
z7;|oEQ8UcBrS$=^Xc@-GO~<<PtEJ$?(nNzE8Gd7F+Qq|sR&boddh2IPv?@4mI@X<D
zJcM*&X#;xaMWI#&eDG__urU67zx>hChFujLHy!JAX6fh|_1oj4rK>S8J4Rrr3<@O$
zqo($-bci6B{wGTZQ~$rKg4lF0#5!?$4%-H!Zr+~EtEJWAtxN%1;8q196dVi+wTGoG
z351j?<5x?&S-LW_UoCCwrW+IMIPYNrHlnM)Di(aOGzP$`%-m$^*24xtA54>LWEe*w
z%o}r^#NN_0OQ(%V6EBv=25cJB*7@`<ts3BvWk3adw6twOw=pCm{NB=i3C2yPahG-t
za8?g6PUwTBP4biZx@m9eu)P{H<YsA|&%;QFA*Z|rY<#dZU`cr_TQG`<wd->mm0*Z3
z#jzCSWJ<SKc$}Kr*;^W?ex87@3))*cq^!nd;s6k*^RQGieEnBg1<b3ZB@A@=`an1t
zv9q)YOZVl^vN4J;wPOhzA?9&0=$Ya7cWIM`b+Q<4;?>eMUY?9_m*W5c|7spK?(%p+
zRzV2AwY2h(kx34jLNFn2m98>j>DPH!P`YAW7^hG>yjq&nC)4wF18ZmLsBsfahDZSC
z^RO}AdN^HFBHlNa?lRVxNye{dwX3-Mg8gK|(vjh)Cd5on_s}>+c-D)hadJ;Ld$?h-
zx3n=}g6Xot($;S*T{E1!`$Gi)zqfSmvhGVQSL2<ffi1&jW13v`VrfcWxGvK;*<t&Z
z;jpxm$2EUl0QQ!S3<uL?M16I74hyUH@MB!pOTj-_IxXK!PDZhdU_zaJNz3qL!qSmp
zyIFc%|GBTFS=uoz#S4*!HQ(3Ac$4tX(%~$E8FKhSznO<Yh@q^@eO*g|&z3It^_zKA
zOM5p_31J#@ury(5F<;ktU6(XPb4K<YFCaacHC;gLERBfENm`fxnM@puoX^9q8D5{y
z^3Z2X_Zzd$M)>_*y1!Q@EUn!<Y!FmtnNU<~7&t7=wK6wrZ|Qa>1~X?uk<zKOqK9iR
zkDn}EnZ?natqKTBM=-Gk*v-QhqB83gix6Sp(AYH?z&lGDgHdC)3=47A!y!^LM8JHu
zbRPj5>uBli?+7?7y_<&x`0ormu&{K*%b$%|Z`cP*V@zYBhr$05Y6e%9>mU%#h01{b
zKat5lnAxaq;kG=S-gqJV2^Dn#onAd`L8EYgQW}L%28Ys_bx{~f_n3zdrBT=o3zP=i
zvU-2`5Lw_Oh{Cq{J`a0}n+ktY`iEdLkUl%Dxu(g3%)_cjFf<WOrv;^>u*m!4bAAkk
zsY+`drZH!%`|hPn9>=`#cP}m0biU0z+=tTtd#r;Os0X(HW6f_$%dJ<|R8i0u4|lo)
zhUqU#XN_KzrYz(;N8Jmh#dnTUdQzJG@F6H24?ov5<J&$Swhr^o<2R-4Wg8!b>Gm|2
zKxzG^G={@^sE4EYHwwKd?RHp*L*KKGhvI{Ny!X<Wt-E8!*=f0r>h|Rol>Ql%7KfaH
zqfsw6HT;@O(CoB$jiHe7ZBaPKnL?&3r8&v$G?YfG+jVl+q_kzR>A^jeMuekr$98mD
zevMgxqtib<%$NLC3wfb5$(DQSp)g@2AE2}*r4g(P77l-U1F>1)7lq+J=~!)N?h2Ej
zcGD-N*`_m6C~RtpzqwH;ZNW?la+i775eN!!4;>FX$oyKStlh)Iq2|Gz(tx5xR$1X!
zymh6tz(wWevvT8ML*aK{Z~V%FXSBj1YaJdDW9AP^d%sEDE@chJ#7O_{rOhn+z3BLv
zmcV9?1*IW5C?Rsrd#l5gG+6ybX^y!|_zw>QPVVt#N~5q3%4?<EsHF~93v;&wk>cT#
z!`M4c+v{)wh?)CN=|-^m!c>^LM1O%mP?}>wl$Uy>Pw>WntVCf^k`lJ|I*b!LxW4q#
zQ4V#XHXgR`I77ZPDBbXZ@0dXNlOVk0rEsT`mb@2N*44u%s!;Jt=^V45bd_|Wbj`XX
zIxRvq_TvH+j;27xdWO;ji$ikbz0_gbK3O7Nd+8i=d_ENpf#bq<3p^>!-ciQuLtp@`
zJeHtz8aZlG%HUpy6ETp!QF`{;u^Ap_wzoW?biXKV<?;Zf;{z)^YfmVR!tt=zZx`|O
zPhtFx(n`m7p|l+hMZPKB)Hab4QMig^LAbaDO2ZqFmj5T&6-FJIA2&)T;^cGcFv7CE
zL1`;2f7)1M#>B&OJE-^Sr5ON#Wp>!Bhf$b_@013MP+F=trBlDcdniqE@E{^XJ#q;3
zo(eZVG!beZ?3CtBwtA<uQzw*;!c#EF52YJQ^SYokTg9Kx7MVxg6lOck@vL>2_h_c>
zlujcssff>^G_--z^-bx7*HC(5>KT0Qv@*NJ$|pzvvUeWsZ7NY1W)zhyXK>$vth7~%
z+jDnPR8ltXW#?|>Y|;g2=O#d#+szEiRH0vah0@C$u*2i4!kf5%E-xRWGq_&d4|xCt
z{2>n%Mg|fdColt^Ob8j`3CjfLPOH7#uV-)u5*A=$o=lJohBK%o9G3)`mJG^<kQwX{
z;Y$I8WBnr>yx~|k3r7uKfH2a`z5ELw;j&rDulNYBnd;;{3=7YgmBNe!H=Ht!o#{DP
zIB6Q&#SPB;@)O>Fr&7Blfx>I=6>3dqLE)K(QnjY$LE)>eQmrp-fielFqFc|m!GjX7
zS2X(9&iPL1%YRsIgZ%{xCtvS38T%I$9(?=2v2+_0M)b1dSQLY6SRZki#cn|d1wAS<
zm$JF@3IA!?%zf)4tef@bdr&z3?x9|7x)>H7tLu&{f$LKrwRFeX05gwDlse5P=WN(y
zlpXpBTb575@wX4ER^1l-gq^xy!=onLa9h}R+0PqBe!}s&LTP(73kt_Jr>1viHbG&u
zHFS0N>J}(0EG0_2SDy=@Ofg>AoqP$8uB+n0UcQ3QJC;y@v4nz+B^=5e#?c&(_R^n;
z_R^V)5|)J)1Qu>*5G*6MGZ;K5BIai<s^L+3TNZ~Ek;r`E6r1-lX(IAv;?`4H9NNoC
zBIaf;SqCy1*xUSR1{B5wLH`HNAiTd?wprcKO)7DPe^WG@RjF>UEVtp&no2FJp`EfP
zT;bHeD$~t|W?Khm6V4QTkj@}n(p}0d+tIUJ;Rn0zOzZy!S7!8u<}@g!7Cqo!U>ubl
zYT2x6|8+KDL_Dx}5B>C!kFP(S*=#SZf)K+z;p?p0a5cj+%Y5Mxrn{~|b*gS~WfIJE
znN4-Ob^x6Art8>LqqRd&7zVhN-&am{)Y9Blb!BaLizAHg3|u`D<pGgkuCOp6P92jw
z12W;SPhnh~sFAdITbB5l47sDqX>$8#ZzmIiaM?6XRXb2rO;c+8u|%-{SVB^OkwbtC
zf-~VXtQe}HXa}oCOS{&2b2xnA@rk>OSBklzrRB-uLO1WU{OPg1v_IXqmqxwTa4c##
zTEk}}YFLIDxaFTohrEX4dtX=xd#5!}$QLFjC%N|ul7D9M)(2sP@rTBth81N~@F-`w
z2W5<!pLq{7{J-J}k8Hn0Lj(&~Zx3V%M<zk(Y5U`D@-Gi>%#+U;oh&?BJ5|fdi=?Kg
zH5GF%{SGA0A;pYaeBrEsk$?s7uA_yonTDw;wUM%FsG9V1nV6mY$NTy~GsivcJ>k!E
zwD5>h(N?vSq^4C=Q{t@Q2kp-e#I@!Ie+{?pcH-ICW~U1yLPV05QCgH`nIj`4PK7r0
zC(tR4jHIfb&izC<(;>pa=kUki6$}ff7;9!byy39s@K{UO(x}chx=k3~X+aGOt1p*}
z%iS)Ff(w77PZ}NrgnOW2cn+%_dn=v41JeHe?>Qu3=>Mlv+WdmusSTsF4|0It@PGG%
za8muk3qZKzLBt0f=z6%fi1nMWU&E;9grkOgeGTV`OuYYX<RAZMdadC?VX^>`7dn85
zh=_=Yh=_>3`@4r?+6OEMu`n`Hkk5F8mHAcSJL75ae*j@GgS_;Aq@7WUBtZy7uQI$i
z!N&a$w{%sIRWNB}!z|*LtCc=OnXhhkJ?2pB^O!>j|JsAq|An54g>e50ey%)j7J8}{
z!Y(HMN?4-W6$8!gkv5)9*JFAu{2@$F)JIyl+Id_Z!fJNbu+Ukbz6rZ0sw4f?xLU#<
zJl|+IQ(#Mj58+-bgnOd?U|iXRuo08D&Q0-6SYQSpebQ?srYEWzHa>4@BgEc=KQZ+i
zqG5sY;6s>ROCekn^|R#8<|f=b`ow7P+*?}wm0n`{7}N(FS2hnl?Y*Mm_6hjD!$@GW
z^UfXawYUh|v_xIQDr_>YYF&TpT!RN+BVD?}H-wRnguzwAYX5l=E<N#Agzu3yMtiSl
zSaYq1a8J}VTt~<`OY??!nv#Or`rKhWM~KiXwKDd-)NxA}Hd$K6z~0-+jV*1Dh6VYk
zUtWuFtA#^YP!e^*c5T>;uy!6;i*0O-@z09E+W4hmm0H4yQA^afG=+_LG%T_42#0WM
zigSmf6aVsh{&;A$UK%cm`j+<0Mm%>|Y;BEwmMGfzrQz|{X@zj~S!*Q*<2g~)Fcdaf
zNYaoVBeJEFWn%(sHEtgv=zsdXHQY)Gx`rk2zy=e-VDF6g=_+l{9UgvTF+GWfOD%_R
zvJ8o!6aG)wnHV?@gHW^=a0Nuuz<NCe#8Mi_(SHeRWd6t6OM4###X&qYmmiVjH`Fi3
zPva3VF2-2l9<vS_z>(7C$&M`Lh~jfa4~u1Od@28-LI4G&xt91^{zGh>!`G_DbG``^
z%_)tRD38|KqrLYiRsVJDVN;KJKN>}Hq%;<!D)3P+6~=o!2*}Oz96u=l5muOMZAXBw
z_k(Mxo-uhR-ZSRiF4jz$P#T-XitGDU*8qZh0VL(5JXL{Zb;Td($^HacLKV0&Cg(8w
zK%3`reIK4VwkvjLDE?L`{)Uql-sgdsvfT}d#3qzhjJ1UtK+VlJ07+GQjLK#>l7Z5e
z+^BkkIggDMlos6XvO)t0Z5-w>^Jr=Su@-w6xG;;Dl*Fk_dKipUH)`$u`Qp@qIm{cZ
zdg8B_FTNT6jg&T66K?hEB?5CE=P+k=e`G6fe?XVSjg&SX{<hNmzso((T4N8Jh-(1N
ztn7K#nowF$VO?AUNYSH;at^2K<F;>cG5EKE(&r=V*IVq|1vqK(EDdA95o2NyJ^n^%
z^m%dBl7$s7=P-6XRDt0=M50NB!7Q(ES!FS;nBSbk!lAQx%*|vobZ1gJ&6dj=8bFJG
z^O!g=#N*mh#nxV7`x~XLEB=0(-g<>2efBVxKVx*+6^SO4MsoD<wrdqybU|rsPE+rd
zQ2dFGlm-j>D~1>ozSnYii>k^^%B%OV*hpzMLMZ;+iih;<VT>t{QP%*HWD`o~?XRu4
z2JrLJ%6mH#NFBZ>9H{uCRg9FT*%C3NH0Q9!Pib1^`{NqG+#6R)ORwIk0lc5^XAcYa
zu3j{NNHn3e5>K*F1E?sevceWRhW$G<fYE5&1;+QBXx$<vI1nuGi{U#Z>Y)MrbPXV{
z*ak|QQ3JT9!W=PZ`_urk&!?2;ZYk~4^?jAbA5xmTZfOsXd2c3M7L=xMnK8IPP+Btx
zF{f#Epfpo&->2g59t}3mVb8*ty5~Hb^f1bB(EviKW27|AHySZ-V?@SaO=<uyYM_(S
z`LbL!fTn+;v`K0Jd933}i&q>mkGn9@{5>Ag?&(aU(Fc@{M1vI%bvIHvMh>lbJPN3a
zZ)u`mBqed!ts|xBJ?t?SRmrn7agfe5B$`kf>Ai=4(*UwRNzT!Gh!=q|0asQJO%)aP
z7mn281=GScP<rql-uaOwQu+_s+%8Bop)~IGuKJ6yvq51ihk@`_7SEnQu=l^(LSep7
zPAE=WLU>jDH_}K?GU$LX=0Hx1+@1(ScCd82RqW1rv~Owxpp0CZwz!9o<T<<I(X$1X
zrf~)clR0>?G#&K<!i0(BwCJL+(W5fB)3mt}4zHP1{pMWidKz&POOtf!X4=06gypOw
z!VL6cX}zv(0B@GAOHa<RyZd}1TxFqiI|w(4XS|UADnn`Oo26;-*C4zsZFXb+tqe7?
zCrfJ)wgLQL>9O{JjLE($md>HYUn4zoT7ji=&Tc0-i7ah@qsolkvx3?;UP6X}9xM$-
zc+~k|=?Rpa%8Y+u>DsG*Wa)oymPUx<-YjjddCwLQ?)s2mpx;?~&c2b6zho_yLP$T%
zBM0g)uya^ziSPuLwx_}tJHdvTCy3Nn{l?O}nxt`J!vjmtm9IQI(qfFAQY2aY2Vn@K
z8(PN}SsL|nq(8sxW_GiSb5Hg&OLs@joZKvp{tP1YOanceaed_@DTog&y#^{3e6Tdx
zRGXR9bzv&Zgvc+kGze>;wFVLH9B^R|A!X_A4H;qR>!DVTr8hYbY4P98hT420JkC_a
ze#>~^$a^(psVz2KA+C;4)eE<Hc9XlADZ0Kb5w0*-Y$lf4aG_-+i6QGy&UJg?XN2z#
zXFJb^%ZdBFk0%G$1tiog__Ve}fzP@4n!wT>gpr{3P(6gy2n$I#zgRlh6(kbA&IiIW
zbo!K>*4#S|Hf{9~ZDoSJc@e&P`%T&=u?P<^G1Kt7XZ27oK}?5oXu~WL0!Jn#HeY{L
zgh~;390_9>Xxs2^B=k{F24SNI4v5oxRu5TI;*MFXEL~*_j^n<k#YlQFIE&Xq>^^|x
zw4kRSzAM&E1L@rKmmXc-84q3AUJpUVfN)239g>#K!$i2tZ!G=U-Hop%*<lJq9hKX(
zXOj-p*pDYm?<hc?u$aaod@GZ}lo59UAky*{PnPv!P55Dq645nkD$@s@3E6pHdC*|2
z2olck8vu7$Bvo&OgDLI9`N~?lNOrSX+MhEX#!wqJN7?Lt=gPx|r9_DWT}x9uH$lvD
z7YW2>o%vew7?ZO%)Nr??17Xu;_dS9l{JrA?UT@Me28SrX0hZ3~eS_1#Sb8=U$XMS9
zyIZO{u(Yj6^$DshcP($yS@!&jr5TRxY?Ba~?R|4IsD9YFH+h=1^aRjnTn;R4D^g&f
z`tG5aZH@na$Xf3Gc5dH)K^U6C@_dk0e}WCRd&D#r;s<LFMkq_0t&w27DZ5+dRWw-B
zBk&L}BX%srVz*W$JC+rTFs$q{K^=rGG;HT&*3zv2m<X%(IBO_H9et73|Lom`Z`(>7
z!0}(Go!IBHFfJ&na7=<R3d$%LCefZ?7@r+Mxp!yLFb84{8t1QkNgsoM?#keg6rt%G
zHsiK(wEI4v#sl%g?D2_O&_r<7cBZralevzGL?V&6ujrk77NB|rn<|U~s$H<>cOL^P
zC)m5G*MLe3R+)GUsFbJN+ZEWJLVczhTzmqUE>o_G$}>DBaDBZ}1Wcw{@#>#S78>(Q
zjc$CO&ZEQ3{U|Fra~ifI{i83?!3Lm2uMt99fT<QtC=C8Sn4b(o)p!M%z9n5(W(hEx
z_bm)RZZmk;uQn7OBl^S(qp!yVD{c%P^Kh~*O=A%dslMg<k1!_Y)CVqg_-%W^wc)Dv
zW!x+53!yB)yeKd&^!1omSk{$(jK9KfTEo1G3l>T*!?uif4Hdhd0_t}5d~xs@pe}UW
zES@a_s>>NK-Yi;x$(<gb8pl7wkiCBE?)cr)aKc!SNF;Vo2Xb4!pBW~dho-FzL*O87
z-ny@oj^+C;<Zt6jzuoUXacrc=|6<#Y`^K^J$WLI+CQhl+Z#!^cPOVWTRNa%vPiWg`
zs++@bDV88grdA4s3Yqf1K$Mi6@wsX+?bi-4c-1pXDILh@nD)<}35C+W{0vdDwX)HE
za~LJD;2;!AaLr*)v^^<8#sbLYQ>UZf(mXWl%9HD_u{EL4)Od546^P_ZV<cyay2x8v
z8m&C0DTO`Jv&N=p-M3k<R9cH%*BK!FuGLQ*YztZk>8E)cA10mepFPtWhG4_km&a_<
zPsknxbH+W&dYX@Q?>a<sARd8usjUyQH`+bQ%iemA=dCk-9ge^BK>vk-+vDlx2@1C-
zEl4C1i9{mtmsII*EI7ohRQ%Sc0$qca-eriAtMfkv*WvKWR%V=zF#?@W$RvRXocpZ?
zyZQ~Hv@NB`ABGQea87RC{LgMa7>(LG%~DrJ0aAf{f&{~#4s~#rGtMYK?=tRsucB7{
z#<&HLX{_Y86x?^HgK4>3p{$=$R`wo8)u?4?nhrjp!3F0jOda-D7ziO2alj^y9l2R6
z<(-C>E8o!I2R9hwZ}H$Gg21NCX*BrCO|8w+(F?{Q!B?gB^k;y+lM>wRPMx2eI61HI
zpH5itNqI{zp0Hs2zw|MbqJMF%U)!|<82|tPfI<G&_xOq<4*&oF000000001B3V;Bz
W$~{+xws7|V0000<MNUMnLSTY_YfXdz

literal 4335
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
R^xp-*O+6FcH`h_I{|6i4FG&CZ

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
index 8494d1b2418219aca7d966331152dec36dc8bd88..0ae9dd9d7e801f0afeaec0cdb1c2e68c952d3778 100644
GIT binary patch
literal 9731
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

literal 12286
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
SGueZ>Q2IJX=L@y)r2hx}Ee(YL