feature (alerts): add dark background in documentation

site/content/docs/5.1/components/alerts.md

@@ -91,27 +91,6 @@ Alerts come with a smaller variant: `.alert-sm`.
 {{< /example >}}
 <!-- End mod -->
 
-### Dark background
-
-{{< example class="bg-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>
-{{< /example >}}
-
 ### Additional content
 
 Alerts can also contain additional HTML elements like headings, links and paragraphs.
@@ -151,6 +130,31 @@ You can see this in action with a live demo:
 When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element.
 {{< /callout >}}
 
+### Dark background
+
+Alerts come with dark variants using `.alert-dark`.
+
+{{< example class="bg-dark" >}}
+<div class="alert-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-success" 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" 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"><span class="visually-hidden">Close</span></button>
+  </div>
+</div>
+{{< /example >}}
+
 ## CSS
 
 <small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
@@ -163,6 +167,8 @@ As part of Boosted's evolving CSS variables approach, alerts now use local CSS v
 
 {{< scss-docs name="alert-variables" file="scss/_variables.scss" >}}
 
+{{< scss-docs name="links-theme-variables" file="scss/_variables.scss" >}}
+
 ### Sass mixin
 
 Used in combination with `$theme-colors` to create contextual modifier classes for our alerts.