10 files changed, 31 insertions, 50 deletions
diff --git a/site/content/docs/5.2/helpers/colored-links.md b/site/content/docs/5.2/helpers/colored-links.md
deleted file mode 100644
index e940196..0000000
--- a/site/content/docs/5.2/helpers/colored-links.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-layout: docs
-title: Colored links
-description: Colored links with hover states
-group: helpers
-toc: false
----
-
-You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state.
-
-{{< example >}}
-{{< colored-links.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-<a href="#" class="link-{{ .name }}">{{ .name | title }} link</a>
-{{- end -}}
-{{< /colored-links.inline >}}
-{{< /example >}}
-
-{{< callout info >}}
-Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
-{{< /callout >}}
diff --git a/site/content/docs/5.2/helpers/clearfix.md b/site/content/docs/5.3/helpers/clearfix.md
index c888610..3aa6187 100644
--- a/site/content/docs/5.2/helpers/clearfix.md
+++ b/site/content/docs/5.3/helpers/clearfix.md
@@ -3,7 +3,7 @@ layout: docs
 title: Clearfix
 description: Quickly and easily clear floated content within a container by adding a clearfix utility.
 group: helpers
-aliases: "/docs/5.2/helpers/"
+aliases: "/docs/5.3/helpers/"
 ---
 
 Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin.
diff --git a/site/content/docs/5.2/helpers/color-background.md b/site/content/docs/5.3/helpers/color-background.md
index c417484..d64ca43 100644
--- a/site/content/docs/5.2/helpers/color-background.md
+++ b/site/content/docs/5.3/helpers/color-background.md
@@ -1,6 +1,6 @@
 ---
 layout: docs
-title: Color & background
+title: Color and background
 description: Set a background color with contrasting foreground color.
 group: helpers
 toc: true
@@ -9,8 +9,6 @@ added: "5.2"
 
 ## Overview
 
-{{< added-in "5.2.0" >}}
-
 Color and background helpers combine the power of our [`.text-*` utilities]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}) in one class. Using our Sass `color-contrast()` function, we automatically determine a contrasting `color` for a particular `background-color`.
 
 {{< callout warning >}}
@@ -25,6 +23,10 @@ Color and background helpers combine the power of our [`.text-*` utilities]({{<
 {{< /text-bg.inline >}}
 {{< /example >}}
 
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
 ## With components
 
 Use them in place of combined `.text-*` and `.bg-*` classes, like on [badges]({{< docsref "/components/badge#background-colors" >}}):
diff --git a/site/content/docs/5.2/helpers/position.md b/site/content/docs/5.3/helpers/position.md
index b4e1f71..b4e1f71 100644
--- a/site/content/docs/5.2/helpers/position.md
+++ b/site/content/docs/5.3/helpers/position.md
diff --git a/site/content/docs/5.2/helpers/ratio.md b/site/content/docs/5.3/helpers/ratio.md
index 771bc07..04b6eef 100644
--- a/site/content/docs/5.2/helpers/ratio.md
+++ b/site/content/docs/5.3/helpers/ratio.md
@@ -74,7 +74,7 @@ This CSS variable makes it easy to modify the aspect ratio across breakpoints. T
 {{< /example >}}
 
 
-## Sass map
+## Sass maps
 
 Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$ratio-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.
 
diff --git a/site/content/docs/5.2/helpers/stacks.md b/site/content/docs/5.3/helpers/stacks.md
index e1960c5..2be6b30 100644
--- a/site/content/docs/5.2/helpers/stacks.md
+++ b/site/content/docs/5.3/helpers/stacks.md
@@ -17,11 +17,11 @@ Heads up! Support for gap utilities with flexbox was recently added to Safari, s
 
 Use `.vstack` to create vertical layouts. Stacked items are full-width by default. Use `.gap-*` utilities to add space between items.
 
-{{< example >}}
+{{< example class="bd-example-flex" >}}
 <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="p-2">First item</div>
+  <div class="p-2">Second item</div>
+  <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
 
@@ -29,32 +29,32 @@ Use `.vstack` to create vertical layouts. Stacked items are full-width by defaul
 
 Use `.hstack` for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use `.gap-*` utilities to add space between items.
 
-{{< example >}}
+{{< example class="bd-example-flex" >}}
 <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="p-2">First item</div>
+  <div class="p-2">Second item</div>
+  <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
 
 Using horizontal margin utilities like `.ms-auto` as spacers:
 
-{{< example >}}
+{{< example class="bd-example-flex" >}}
 <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="p-2">First item</div>
+  <div class="p-2">Second item</div>
+  <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
 
 And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}):
 
-{{< example >}}
+{{< example class="bd-example-flex" >}}
 <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="p-2">First item</div>
+  <div class="p-2">Second item</div>
   <div class="vr"></div>
-  <div class="bg-light border">Third item</div>
+  <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
 
@@ -80,6 +80,6 @@ Create an inline form with `.hstack`:
 </div>
 {{< /example >}}
 
-## Sass
+## CSS
 
 {{< scss-docs name="stacks" file="scss/helpers/_stacks.scss" >}}
diff --git a/site/content/docs/5.2/helpers/stretched-link.md b/site/content/docs/5.3/helpers/stretched-link.md
index 93bffeb..21a11c0 100644
--- a/site/content/docs/5.2/helpers/stretched-link.md
+++ b/site/content/docs/5.3/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>
@@ -66,7 +66,7 @@ If the stretched link doesn't seem to work, the [containing block](https://devel
     <p class="card-text">
       <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
     </p>
-    <p class="card-text bg-light" style="transform: rotate(0);">
+    <p class="card-text bg-body-tertiary" style="transform: rotate(0);">
       This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
     </p>
   </div>
diff --git a/site/content/docs/5.2/helpers/text-truncation.md b/site/content/docs/5.3/helpers/text-truncation.md
index 799f205..799f205 100644
--- a/site/content/docs/5.2/helpers/text-truncation.md
+++ b/site/content/docs/5.3/helpers/text-truncation.md
diff --git a/site/content/docs/5.2/helpers/vertical-rule.md b/site/content/docs/5.3/helpers/vertical-rule.md
index b734f61..334eb3e 100644
--- a/site/content/docs/5.2/helpers/vertical-rule.md
+++ b/site/content/docs/5.3/helpers/vertical-rule.md
@@ -35,11 +35,11 @@ Vertical rules scale their height in flex layouts:
 
 They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}):
 
-{{< example >}}
+{{< example class="bd-example-flex" >}}
 <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="p-2">First item</div>
+  <div class="p-2 ms-auto">Second item</div>
   <div class="vr"></div>
-  <div class="bg-light border">Third item</div>
+  <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
diff --git a/site/content/docs/5.2/helpers/visually-hidden.md b/site/content/docs/5.3/helpers/visually-hidden.md
index 1124065..9177560 100644
--- a/site/content/docs/5.2/helpers/visually-hidden.md
+++ b/site/content/docs/5.3/helpers/visually-hidden.md
@@ -3,7 +3,7 @@ layout: docs
 title: Visually hidden
 description: Use these helpers to visually hide elements but keep them accessible to assistive technologies.
 group: helpers
-aliases: "/docs/5.2/helpers/screen-readers/"
+aliases: "/docs/5.3/helpers/screen-readers/"
 ---
 
 Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus.