Fix some Alert usage by replacing .alert-{severity} by .theme-{severity} (#42209)

Author: julien-deramond

js/tests/visual/alert.html

@@ -10,12 +10,12 @@
     <div class="container">
       <h1>Alert <small>Bootstrap Visual Test</small></h1>
 
-      <div class="alert alert-warning alert-dismissible fade show" role="alert">
+      <div class="alert theme-warning alert-dismissible fade show" role="alert">
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         <strong>Holy guacamole!</strong> You should check in on some of those fields below.
       </div>
 
-      <div class="alert alert-danger alert-dismissible fade show" role="alert">
+      <div class="alert theme-danger alert-dismissible fade show" role="alert">
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         <p>
           <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
@@ -26,7 +26,7 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
         </p>
       </div>
 
-      <div class="alert alert-danger alert-dismissible fade show" role="alert">
+      <div class="alert theme-danger alert-dismissible fade show" role="alert">
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         <p>
           <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
@@ -37,7 +37,7 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
         </p>
       </div>
 
-      <div class="alert alert-warning alert-dismissible fade show" role="alert" style="transition-duration: 5s;">
+      <div class="alert theme-warning alert-dismissible fade show" role="alert" style="transition-duration: 5s;">
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         This alert will take 5 seconds to fade out.
       </div>

js/tests/visual/dropdown-submenu.html

@@ -46,7 +46,7 @@
     <div class="container py-4">
       <h1 class="mb-4">Dropdown Submenus <small class="text-body-secondary">Bootstrap Visual Test</small></h1>
 
-      <div class="alert alert-info">
+      <div class="alert theme-info">
         <strong>Keyboard Navigation:</strong>
         <span class="keyboard-hint">↓</span> <span class="keyboard-hint">↑</span> navigate items,
         <span class="keyboard-hint">→</span> enter submenu,

site/src/assets/examples/cheatsheet/index.astro

@@ -651,18 +651,20 @@ export const body_class = 'bg-body-tertiary'
 
       <div>
         <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
-        <div class="alert alert-${themeColor.name} alert-dismissible fade show" role="alert">
+        <div class="alert theme-${themeColor.name} alert-dismissible fade show mb-3" role="alert">
           A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
           <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         </div>
         `)} />
 
         <Example showMarkup={false} code={`
-        <div class="alert alert-success" role="alert">
-          <h4 class="alert-heading">Well done!</h4>
-          <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
-          <hr>
-          <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+        <div class="alert theme-success" role="alert">
+          <vstack>
+            <h4 class="alert-heading">Well done!</h4>
+            <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+            <hr>
+            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+          </vstack>
         </div>
         `} />
       </div>

site/src/content/docs/components/offcanvas.mdx

@@ -151,7 +151,7 @@ To make a responsive offcanvas, replace the `.offcanvas` base class with a respo
 
 <Example code={`<button class="btn-solid theme-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>
 
-  <div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>
+  <div class="alert theme-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>
 
   <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
     <div class="offcanvas-header">