Dark mode: migration guide

.bundlewatch.config.json

@@ -10,15 +10,15 @@
     },
     {
       "path": "./dist/css/boosted-reboot.css",
-      "maxSize": "4.75 kB"
+      "maxSize": "4.5 kB"
     },
     {
       "path": "./dist/css/boosted-reboot.min.css",
       "maxSize": "4.5 kB"
     },
     {
       "path": "./dist/css/boosted-utilities.css",
-      "maxSize": "13.0 kB"
+      "maxSize": "12.75 kB"
     },
     {
       "path": "./dist/css/boosted-utilities.min.css",
@@ -42,11 +42,11 @@
     },
     {
       "path": "./dist/js/boosted.esm.js",
-      "maxSize": "33.25 kB"
+      "maxSize": "33.0 kB"
     },
     {
       "path": "./dist/js/boosted.esm.min.js",
-      "maxSize": "20.5 kB"
+      "maxSize": "20.25 kB"
     },
     {
       "path": "./dist/js/boosted.js",

scss/_close.scss

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

scss/_footer.scss

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

site/content/docs/5.3/components/footer.md

@@ -137,7 +137,7 @@ Please note that you should also add the `aria-current` attribute on the active
 
 As part of Boosted’s evolving CSS variables approach, footers use local CSS variables on every footer part for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
-{{< scss-docs name="footer-part-css-vars" file="scss/_footer.scss" >}}
+{{< scss-docs name="footer-css-vars" file="scss/_footer.scss" >}}
 
 Each bar redefines its own CSS variables.
 

site/content/docs/5.3/components/list-group.md

@@ -358,7 +358,7 @@ As part of Boosted's evolving CSS variables approach, list groups now use local
 
 {{< deprecated-in "5.3.0" >}}
 
-Used in combination with `$background-colors` to generate the [contextual variant classes](#variants) for `.list-group-item`s.
+Was used in to generate the [contextual variant classes](#variants) for `.list-group-item`s.
 
 {{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
 

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