Fix some more grid and flex examples, plus more utils and helpers

11 files changed, 41 insertions, 41 deletions

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 30f7997315..7f98dffcde 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -115,7 +115,7 @@
 //
 
 .bd-example-row [class^="col"],
-.bd-example-cssgrid .grid > * {
+.bd-example-cssgrid [class*="grid"] > * {
   padding-top: .75rem;
   padding-bottom: .75rem;
   background-color: rgba(var(--bd-violet-rgb), .1);
diff --git a/site/content/docs/5.2/components/offcanvas.md b/site/content/docs/5.2/components/offcanvas.md
index 310b0e1ff3..d4e43ea93f 100644
--- a/site/content/docs/5.2/components/offcanvas.md
+++ b/site/content/docs/5.2/components/offcanvas.md
@@ -143,7 +143,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
 
 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`.
 
-{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
+{{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}}
 <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>
diff --git a/site/content/docs/5.2/components/scrollspy.md b/site/content/docs/5.2/components/scrollspy.md
index 53e3fa0d39..828165ec9c 100644
--- a/site/content/docs/5.2/components/scrollspy.md
+++ b/site/content/docs/5.2/components/scrollspy.md
@@ -25,7 +25,7 @@ Scrollspy toggles the `.active` class on anchor (`<a>`) elements when the elemen
 Scroll the area below the navbar and watch the active class change. Open the dropdown menu and watch the dropdown items be highlighted as well.
 
 <div class="bd-example">
-  <nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
+  <nav id="navbar-example2" class="navbar bg-body-secondary px-3 mb-3 rounded-2">
     <a class="navbar-brand" href="#">Navbar</a>
     <ul class="nav nav-pills">
       <li class="nav-item">
@@ -45,7 +45,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
       </li>
     </ul>
   </nav>
-  <div class="scrollspy-example bg-light p-3 rounded-2" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
+  <div class="scrollspy-example bg-body-tertiary p-3 rounded-2" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
     <h4 id="scrollspyHeading1">First heading</h4>
     <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
     <h4 id="scrollspyHeading2">Second heading</h4>
@@ -60,7 +60,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
 </div>
 
 ```html
-<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
+<nav id="navbar-example2" class="navbar bg-body-secondary px-3 mb-3">
   <a class="navbar-brand" href="#">Navbar</a>
   <ul class="nav nav-pills">
     <li class="nav-item">
@@ -80,7 +80,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
     </li>
   </ul>
 </nav>
-<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" tabindex="0">
+<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
   <h4 id="scrollspyHeading1">First heading</h4>
   <p>...</p>
   <h4 id="scrollspyHeading2">Second heading</h4>
diff --git a/site/content/docs/5.2/helpers/stacks.md b/site/content/docs/5.2/helpers/stacks.md
index e1960c5739..802ab4db65 100644
--- a/site/content/docs/5.2/helpers/stacks.md
+++ b/site/content/docs/5.2/helpers/stacks.md
@@ -19,9 +19,9 @@ Use `.vstack` to create vertical layouts. Stacked items are full-width by defaul
 
 {{< example >}}
 <div class="vstack gap-3">
-  <div class="bg-light border">First item</div>
-  <div class="bg-light border">Second item</div>
-  <div class="bg-light border">Third item</div>
+  <div class="bg-body-tertiary border">First item</div>
+  <div class="bg-body-tertiary border">Second item</div>
+  <div class="bg-body-tertiary border">Third item</div>
 </div>
 {{< /example >}}
 
@@ -31,9 +31,9 @@ Use `.hstack` for horizontal layouts. Stacked items are vertically centered by d
 
 {{< example >}}
 <div class="hstack gap-3">
-  <div class="bg-light border">First item</div>
-  <div class="bg-light border">Second item</div>
-  <div class="bg-light border">Third item</div>
+  <div class="bg-body-tertiary border">First item</div>
+  <div class="bg-body-tertiary border">Second item</div>
+  <div class="bg-body-tertiary border">Third item</div>
 </div>
 {{< /example >}}
 
@@ -41,9 +41,9 @@ Using horizontal margin utilities like `.ms-auto` as spacers:
 
 {{< example >}}
 <div class="hstack gap-3">
-  <div class="bg-light border">First item</div>
-  <div class="bg-light border ms-auto">Second item</div>
-  <div class="bg-light border">Third item</div>
+  <div class="bg-body-tertiary border">First item</div>
+  <div class="bg-body-tertiary border ms-auto">Second item</div>
+  <div class="bg-body-tertiary border">Third item</div>
 </div>
 {{< /example >}}
 
@@ -51,10 +51,10 @@ And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}):
 
 {{< example >}}
 <div class="hstack gap-3">
-  <div class="bg-light border">First item</div>
-  <div class="bg-light border ms-auto">Second item</div>
+  <div class="bg-body-tertiary border">First item</div>
+  <div class="bg-body-tertiary border ms-auto">Second item</div>
   <div class="vr"></div>
-  <div class="bg-light border">Third item</div>
+  <div class="bg-body-tertiary border">Third item</div>
 </div>
 {{< /example >}}
 
diff --git a/site/content/docs/5.2/helpers/stretched-link.md b/site/content/docs/5.2/helpers/stretched-link.md
index 93bffeb31c..8a13ff41ca 100644
--- a/site/content/docs/5.2/helpers/stretched-link.md
+++ b/site/content/docs/5.2/helpers/stretched-link.md
@@ -36,7 +36,7 @@ Most custom components do not have `position: relative` by default, so we need t
 {{< /example >}}
 
 {{< example >}}
-<div class="row g-0 bg-light position-relative">
+<div class="row g-0 bg-body-secondary position-relative">
   <div class="col-md-6 mb-md-0 p-md-4">
     {{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}}
   </div>
diff --git a/site/content/docs/5.2/helpers/vertical-rule.md b/site/content/docs/5.2/helpers/vertical-rule.md
index b734f61d46..f10a16d08e 100644
--- a/site/content/docs/5.2/helpers/vertical-rule.md
+++ b/site/content/docs/5.2/helpers/vertical-rule.md
@@ -37,9 +37,9 @@ They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}):
 
 {{< example >}}
 <div class="hstack gap-3">
-  <div class="bg-light border">First item</div>
-  <div class="bg-light border ms-auto">Second item</div>
+  <div class="bg-body-tertiary border">First item</div>
+  <div class="bg-body-tertiary border ms-auto">Second item</div>
   <div class="vr"></div>
-  <div class="bg-light border">Third item</div>
+  <div class="bg-body-tertiary border">Third item</div>
 </div>
 {{< /example >}}
diff --git a/site/content/docs/5.2/utilities/overflow.md b/site/content/docs/5.2/utilities/overflow.md
index 005210d886..3fcb2d7618 100644
--- a/site/content/docs/5.2/utilities/overflow.md
+++ b/site/content/docs/5.2/utilities/overflow.md
@@ -11,16 +11,16 @@ toc: true
 Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
 
 <div class="bd-example d-md-flex">
-  <div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
+  <div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
     This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
   </div>
-  <div class="overflow-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
+  <div class="overflow-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
     This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
   </div>
-  <div class="overflow-visible p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
+  <div class="overflow-visible p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
     This is an example of using <code>.overflow-visible</code> on an element with set width and height dimensions.
   </div>
-  <div class="overflow-scroll p-3 bg-light" style="max-width: 260px; max-height: 100px;">
+  <div class="overflow-scroll p-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
     This is an example of using <code>.overflow-scroll</code> on an element with set width and height dimensions.
   </div>
 </div>
diff --git a/site/content/docs/5.2/utilities/shadows.md b/site/content/docs/5.2/utilities/shadows.md
index bb5ef44abb..1a706e3863 100644
--- a/site/content/docs/5.2/utilities/shadows.md
+++ b/site/content/docs/5.2/utilities/shadows.md
@@ -11,10 +11,10 @@ toc: true
 While shadows on components are disabled by default in Bootstrap and can be enabled via `$enable-shadows`, you can also quickly add or remove a shadow with our `box-shadow` utility classes. Includes support for `.shadow-none` and three default sizes (which have associated variables to match).
 
 {{< example >}}
-<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
-<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
-<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
-<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
+<div class="shadow-none p-3 mb-5 bg-body-tertiary rounded">No shadow</div>
+<div class="shadow-sm p-3 mb-5 bg-body-tertiary rounded">Small shadow</div>
+<div class="shadow p-3 mb-5 bg-body-tertiary rounded">Regular shadow</div>
+<div class="shadow-lg p-3 mb-5 bg-body-tertiary rounded">Larger shadow</div>
 {{< /example >}}
 
 ## Sass
diff --git a/site/content/docs/5.2/utilities/sizing.md b/site/content/docs/5.2/utilities/sizing.md
index 962575ffe3..b8b58ddfdc 100644
--- a/site/content/docs/5.2/utilities/sizing.md
+++ b/site/content/docs/5.2/utilities/sizing.md
@@ -10,12 +10,12 @@ toc: true
 
 Width and height utilities are generated from the utility API in `_utilities.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.
 
-{{< example >}}
-<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
-<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
-<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
-<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
-<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
+{{< example class="bd-example-flex" >}}
+<div class="w-25 p-3">Width 25%</div>
+<div class="w-50 p-3">Width 50%</div>
+<div class="w-75 p-3">Width 75%</div>
+<div class="w-100 p-3">Width 100%</div>
+<div class="w-auto p-3">Width auto</div>
 {{< /example >}}
 
 {{< example >}}
diff --git a/site/content/docs/5.2/utilities/spacing.md b/site/content/docs/5.2/utilities/spacing.md
index 1e5f6d32f4..ab08b53a3e 100644
--- a/site/content/docs/5.2/utilities/spacing.md
+++ b/site/content/docs/5.2/utilities/spacing.md
@@ -102,11 +102,11 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
 
 When using `display: grid`, you can make use of `gap` utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a `display: grid` container). Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
 
-{{< example html >}}
+{{< example class="bd-example-cssgrid" >}}
 <div class="d-grid gap-3">
-  <div class="p-2 bg-light border">Grid item 1</div>
-  <div class="p-2 bg-light border">Grid item 2</div>
-  <div class="p-2 bg-light border">Grid item 3</div>
+  <div class="p-2">Grid item 1</div>
+  <div class="p-2">Grid item 2</div>
+  <div class="p-2">Grid item 3</div>
 </div>
 {{< /example >}}
 
diff --git a/site/content/docs/5.2/utilities/text.md b/site/content/docs/5.2/utilities/text.md
index 060194f1b0..1b7fa4e76d 100644
--- a/site/content/docs/5.2/utilities/text.md
+++ b/site/content/docs/5.2/utilities/text.md
@@ -38,7 +38,7 @@ Wrap text with a `.text-wrap` class.
 Prevent text from wrapping with a `.text-nowrap` class.
 
 {{< example >}}
-<div class="text-nowrap bg-light border" style="width: 8rem;">
+<div class="text-nowrap bg-secondary border" style="width: 8rem;">
   This text should overflow the parent.
 </div>
 {{< /example >}}