diff --git a/site/src/assets/examples/blog/index.astro b/site/src/assets/examples/blog/index.astro
index ca81e687e703..3456f51b782c 100644
--- a/site/src/assets/examples/blog/index.astro
+++ b/site/src/assets/examples/blog/index.astro
@@ -66,7 +66,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
     <div class="md:col-6">
       <div class="row g-0 border rounded overflow-hidden md:flex-row mb-4 shadow-sm h-md-250 position-relative">
         <div class="col p-4 d-flex flex-column position-static">
-          <strong class="d-inline-block mb-2 text-primary-emphasis">World</strong>
+          <strong class="d-inline-block mb-2 fg-emphasis-primary">World</strong>
           <h3 class="mb-0">Featured post</h3>
           <div class="mb-1 fg-2">Nov 12</div>
           <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
@@ -83,7 +83,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
     <div class="md:col-6">
       <div class="row g-0 border rounded overflow-hidden md:flex-row mb-4 shadow-sm h-md-250 position-relative">
         <div class="col p-4 d-flex flex-column position-static">
-          <strong class="d-inline-block mb-2 text-success-emphasis">Design</strong>
+          <strong class="d-inline-block mb-2 fg-emphasis-success">Design</strong>
           <h3 class="mb-0">Post title</h3>
           <div class="mb-1 fg-2">Nov 11</div>
           <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
diff --git a/site/src/assets/examples/carousel/index.astro b/site/src/assets/examples/carousel/index.astro
index 269fbdd91222..c21400bd0a51 100644
--- a/site/src/assets/examples/carousel/index.astro
+++ b/site/src/assets/examples/carousel/index.astro
@@ -8,7 +8,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
   <nav class="navbar md:navbar-expand navbar-dark fixed-top bg-dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Carousel</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
       <div class="collapse navbar-collapse" id="navbarCollapse">
diff --git a/site/src/assets/examples/checkout/index.astro b/site/src/assets/examples/checkout/index.astro
index e9296fadf703..faa86609e45b 100644
--- a/site/src/assets/examples/checkout/index.astro
+++ b/site/src/assets/examples/checkout/index.astro
@@ -18,7 +18,7 @@ export const body_class = 'bg-body-tertiary'
     <div class="row g-5">
       <div class="md:col-5 lg:col-4 md:order-last">
         <h4 class="d-flex justify-content-between align-items-center mb-3">
-          <span class="text-primary">Your cart</span>
+          <span class="fg-primary">Your cart</span>
           <span class="badge bg-primary rounded-pill">3</span>
         </h4>
         <ul class="list-group mb-3">
@@ -44,11 +44,11 @@ export const body_class = 'bg-body-tertiary'
             <span class="fg-2">$5</span>
           </li>
           <li class="list-group-item d-flex justify-content-between bg-body-tertiary">
-            <div class="text-success">
+            <div class="fg-success">
               <h6 class="my-0">Promo code</h6>
               <small>EXAMPLECODE</small>
             </div>
-            <span class="text-success">−$5</span>
+            <span class="fg-success">−$5</span>
           </li>
           <li class="list-group-item d-flex justify-content-between">
             <span>Total (USD)</span>
diff --git a/site/src/assets/examples/cover/index.astro b/site/src/assets/examples/cover/index.astro
index 65053950cc5c..8d7d9fb4ceb9 100644
--- a/site/src/assets/examples/cover/index.astro
+++ b/site/src/assets/examples/cover/index.astro
@@ -25,7 +25,7 @@ export const body_class = 'd-flex h-100 text-center text-bg-dark'
     </p>
   </main>
 
-  <footer class="mt-auto text-white-50">
+  <footer class="mt-auto fg-secondary">
     <p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a href="https://x.com/mdo" class="text-white">@mdo</a>.</p>
   </footer>
 </div>
diff --git a/site/src/assets/examples/dialogs/index.astro b/site/src/assets/examples/dialogs/index.astro
index 4086c250acbf..3ad8d302af12 100644
--- a/site/src/assets/examples/dialogs/index.astro
+++ b/site/src/assets/examples/dialogs/index.astro
@@ -52,8 +52,8 @@ export const extra_css = ['dialogs.css']
       <p class="fg-2 mb-0">You can always change your mind in your account settings.</p>
     </div>
     <div class="dialog-footer p-0 border-top">
-      <button type="button" class="btn btn-link text-primary flex-fill py-3 m-0 rounded-0 border-end text-decoration-none fw-semibold">Yes, enable</button>
-      <button type="button" class="btn btn-link text-primary flex-fill py-3 m-0 rounded-0 text-decoration-none">No thanks</button>
+      <button type="button" class="btn btn-link fg-primary flex-fill py-3 m-0 rounded-0 border-end text-decoration-none fw-semibold">Yes, enable</button>
+      <button type="button" class="btn btn-link fg-primary flex-fill py-3 m-0 rounded-0 text-decoration-none">No thanks</button>
     </div>
   </dialog>
 </div>
diff --git a/site/src/assets/examples/navbar-bottom/index.astro b/site/src/assets/examples/navbar-bottom/index.astro
index 4f81831ccf6d..07ba0bc23537 100644
--- a/site/src/assets/examples/navbar-bottom/index.astro
+++ b/site/src/assets/examples/navbar-bottom/index.astro
@@ -14,7 +14,7 @@ export const title = 'Bottom navbar example'
 <nav class="navbar fixed-bottom sm:navbar-expand navbar-dark bg-dark">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Bottom navbar</a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
       <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
     </button>
     <div class="collapse navbar-collapse" id="navbarCollapse">
diff --git a/site/src/assets/examples/navbar-static/index.astro b/site/src/assets/examples/navbar-static/index.astro
index d5c7c4935c0a..2d37f125726f 100644
--- a/site/src/assets/examples/navbar-static/index.astro
+++ b/site/src/assets/examples/navbar-static/index.astro
@@ -8,7 +8,7 @@ export const extra_css = ['navbar-static.css']
 <nav class="navbar md:navbar-expand navbar-dark bg-dark mb-4">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Top navbar</a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
       <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
     </button>
     <div class="collapse navbar-collapse" id="navbarCollapse">
diff --git a/site/src/assets/examples/navbars/index.astro b/site/src/assets/examples/navbars/index.astro
index 3f6060c66f28..4ec2d4ece131 100644
--- a/site/src/assets/examples/navbars/index.astro
+++ b/site/src/assets/examples/navbars/index.astro
@@ -9,7 +9,7 @@ export const extra_css = ['navbars.css']
   <nav class="navbar navbar-dark bg-dark" aria-label="First navbar example">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Never expand</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
 
@@ -43,7 +43,7 @@ export const extra_css = ['navbars.css']
   <nav class="navbar navbar-expand navbar-dark bg-dark" aria-label="Second navbar example">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Always expand</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
 
@@ -66,7 +66,7 @@ export const extra_css = ['navbars.css']
   <nav class="navbar sm:navbar-expand navbar-dark bg-dark" aria-label="Third navbar example">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Expand at sm</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
 
@@ -100,7 +100,7 @@ export const extra_css = ['navbars.css']
   <nav class="navbar md:navbar-expand navbar-dark bg-dark" aria-label="Fourth navbar example">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Expand at md</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
 
@@ -134,7 +134,7 @@ export const extra_css = ['navbars.css']
   <nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Fifth navbar example">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Expand at lg</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
 
@@ -168,7 +168,7 @@ export const extra_css = ['navbars.css']
   <nav class="navbar xl:navbar-expand navbar-dark bg-dark" aria-label="Sixth navbar example">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Expand at xl</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
 
@@ -202,7 +202,7 @@ export const extra_css = ['navbars.css']
   <nav class="navbar 2xl:navbar-expand navbar-dark bg-dark" aria-label="Seventh navbar example">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Expand at 2xl</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample2xl" aria-controls="navbarsExample2xl" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample2xl" aria-controls="navbarsExample2xl" aria-expanded="false" aria-label="Toggle navigation">
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
 
@@ -236,7 +236,7 @@ export const extra_css = ['navbars.css']
   <nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Eighth navbar example">
     <div class="container">
       <a class="navbar-brand" href="#">Container</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
 
@@ -270,7 +270,7 @@ export const extra_css = ['navbars.css']
   <nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Ninth navbar example">
     <div class="xl:container">
       <a class="navbar-brand" href="#">Container XL</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation">
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
 
@@ -307,7 +307,7 @@ export const extra_css = ['navbars.css']
 
   <nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Tenth navbar example">
     <div class="container-fluid">
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
 
@@ -339,7 +339,7 @@ export const extra_css = ['navbars.css']
     <nav class="navbar lg:navbar-expand bg-body-tertiary rounded" aria-label="Eleventh navbar example">
       <div class="container-fluid">
         <a class="navbar-brand" href="#">Navbar</a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
           <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
         </button>
 
@@ -372,7 +372,7 @@ export const extra_css = ['navbars.css']
 
     <nav class="navbar lg:navbar-expand bg-body-tertiary rounded" aria-label="Twelfth navbar example">
       <div class="container-fluid">
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
           <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
         </button>
 
@@ -402,7 +402,7 @@ export const extra_css = ['navbars.css']
 
     <nav class="navbar lg:navbar-expand bg-body-tertiary rounded" aria-label="Thirteenth navbar example">
       <div class="container-fluid">
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample11" aria-controls="navbarsExample11" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample11" aria-controls="navbarsExample11" aria-expanded="false" aria-label="Toggle navigation">
           <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
         </button>
 
diff --git a/site/src/assets/examples/pricing/index.astro b/site/src/assets/examples/pricing/index.astro
index cef2a12d54a2..de8db417d590 100644
--- a/site/src/assets/examples/pricing/index.astro
+++ b/site/src/assets/examples/pricing/index.astro
@@ -43,7 +43,7 @@ export const extra_css = ['pricing.css']
           </div>
           <div class="card-body">
             <h1 class="card-title pricing-card-title">$0<small class="fg-2 fw-light">/mo</small></h1>
-            <ul class="list-unstyled mt-3 mb-4">
+            <ul class="list-unstyled mt-3 mb-4 w-100">
               <li>10 users included</li>
               <li>2 GB of storage</li>
               <li>Email support</li>
@@ -60,7 +60,7 @@ export const extra_css = ['pricing.css']
           </div>
           <div class="card-body">
             <h1 class="card-title pricing-card-title">$15<small class="fg-2 fw-light">/mo</small></h1>
-            <ul class="list-unstyled mt-3 mb-4">
+            <ul class="list-unstyled mt-3 mb-4 w-100">
               <li>20 users included</li>
               <li>10 GB of storage</li>
               <li>Priority email support</li>
@@ -77,7 +77,7 @@ export const extra_css = ['pricing.css']
           </div>
           <div class="card-body">
             <h1 class="card-title pricing-card-title">$29<small class="fg-2 fw-light">/mo</small></h1>
-            <ul class="list-unstyled mt-3 mb-4">
+            <ul class="list-unstyled mt-3 mb-4 w-100">
               <li>30 users included</li>
               <li>15 GB of storage</li>
               <li>Phone and email support</li>
diff --git a/site/src/assets/examples/product/index.astro b/site/src/assets/examples/product/index.astro
index e9fdd2a96064..513ebdc37568 100644
--- a/site/src/assets/examples/product/index.astro
+++ b/site/src/assets/examples/product/index.astro
@@ -22,7 +22,7 @@ export const extra_css = ['product.css']
       <svg class="bi" width="24" height="24" aria-hidden="true"><use href="#aperture"/></svg>
       Aperture
     </a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawer" aria-controls="drawer" aria-label="Toggle navigation">
+    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawer" aria-controls="drawer" aria-label="Toggle navigation">
       <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
     </button>
     <dialog class="drawer drawer-end" tabindex="-1" id="drawer" aria-labelledby="drawerLabel">
diff --git a/site/src/assets/examples/sticky-footer-navbar/index.astro b/site/src/assets/examples/sticky-footer-navbar/index.astro
index 2b248be0b9b3..5e2754952707 100644
--- a/site/src/assets/examples/sticky-footer-navbar/index.astro
+++ b/site/src/assets/examples/sticky-footer-navbar/index.astro
@@ -12,7 +12,7 @@ export const body_class = 'd-flex flex-column h-100'
   <nav class="navbar md:navbar-expand navbar-dark fixed-top bg-dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Fixed navbar</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
       <div class="collapse navbar-collapse" id="navbarCollapse">
diff --git a/site/src/content/docs/guides/migration.mdx b/site/src/content/docs/guides/migration.mdx
index 1007b97b77a6..b47ab248187f 100644
--- a/site/src/content/docs/guides/migration.mdx
+++ b/site/src/content/docs/guides/migration.mdx
@@ -86,7 +86,6 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
 | List group | `.list-group-horizontal-md` | `.md:list-group-horizontal` |
 | Sticky | `.sticky-md-top` | `.md:sticky-top` |
 | Stacks | `.vstack-md` | `.md:vstack` |
-| Stepper | `.stepper-horizontal-md` | `.md:stepper-horizontal` |
 | Dialog | `.dialog-fullscreen-sm-down` | `.sm-down:dialog-fullscreen` |
 | Print | `.d-print-none` | `.print:d-none` |
 </BsTable>
diff --git a/site/src/content/docs/utilities/background.mdx b/site/src/content/docs/utilities/background.mdx
index 5222438fe269..08dd695ad0f3 100644
--- a/site/src/content/docs/utilities/background.mdx
+++ b/site/src/content/docs/utilities/background.mdx
@@ -40,7 +40,7 @@ This approach allows us to also easily support translucency with our `.bg-{opaci
 <div class="p-3 mb-2 bg-3">.bg-3</div>
 <div class="p-3 mb-2 bg-4">.bg-4</div>
 <div class="p-3 mb-2 bg-black fg-white">.bg-black</div>
-<div class="p-3 mb-2 bg-white fg-dark">.bg-white</div>
+<div class="p-3 mb-2 bg-white fg-black">.bg-white</div>
 <div class="p-3 mb-2 bg-transparent fg-body">.bg-transparent</div>`
 ]} />
 
@@ -59,22 +59,22 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
 
 Change the opacity of a background color by using any of the `.bg-<percentage>` utilities which use `color-mix()` to mix the background color with `transparent`.
 
-<Example class="d-flex flex-column gap-2" code={`<div class="bg-success p-2 text-white">This is default success background</div>
-<div class="bg-success p-2 text-white bg-90">This is 90% opacity success background</div>
-<div class="bg-success p-2 text-white bg-80">This is 80% opacity success background</div>
-<div class="bg-success p-2 text-white bg-70">This is 70% opacity success background</div>
-<div class="bg-success p-2 text-white bg-60">This is 60% opacity success background</div>
-<div class="bg-success p-2 text-dark bg-50">This is 50% opacity success background</div>
-<div class="bg-success p-2 text-dark bg-40">This is 40% opacity success background</div>
-<div class="bg-success p-2 text-dark bg-30">This is 30% opacity success background</div>
-<div class="bg-success p-2 text-dark bg-20">This is 20% opacity success background</div>
-<div class="bg-success p-2 text-dark bg-10">This is 10% opacity success background</div>`} />
+<Example class="d-flex flex-column gap-2" code={`<div class="bg-success p-2">This is default success background</div>
+<div class="bg-success p-2 bg-90">This is 90% opacity success background</div>
+<div class="bg-success p-2 bg-80">This is 80% opacity success background</div>
+<div class="bg-success p-2 bg-70">This is 70% opacity success background</div>
+<div class="bg-success p-2 bg-60">This is 60% opacity success background</div>
+<div class="bg-success p-2 bg-50">This is 50% opacity success background</div>
+<div class="bg-success p-2 bg-40">This is 40% opacity success background</div>
+<div class="bg-success p-2 bg-30">This is 30% opacity success background</div>
+<div class="bg-success p-2 bg-20">This is 20% opacity success background</div>
+<div class="bg-success p-2 bg-10">This is 10% opacity success background</div>`} />
 
 The same can be applied to subtle and muted background colors.
 
-<Example class="d-flex flex-column gap-2" code={`<div class="bg-subtle-success p-2 text-success">This is subtle success background</div>
-<div class="bg-muted-success bg-40 p-2 text-success">This is 40% success background</div>
-<div class="bg-muted-success bg-20 p-2 text-success">This is 20% success background</div>
+<Example class="d-flex flex-column gap-2" code={`<div class="bg-subtle-success p-2">This is subtle success background</div>
+<div class="bg-muted-success bg-40 p-2">This is 40% success background</div>
+<div class="bg-muted-success bg-20 p-2">This is 20% success background</div>
 `} />
 
 ## CSS
diff --git a/site/src/content/docs/utilities/colors.mdx b/site/src/content/docs/utilities/colors.mdx
index e4be941adce8..429f9b070cd1 100644
--- a/site/src/content/docs/utilities/colors.mdx
+++ b/site/src/content/docs/utilities/colors.mdx
@@ -41,7 +41,7 @@ If you want to colorize links, you can use the [`.link-{color}` utilities]([[doc
 <p class="fg-4">.fg-4</p>
 
 <p class="fg-black bg-white">.fg-black</p>
-<p class="fg-white bg-dark">.fg-white</p>`
+<p class="fg-white bg-black">.fg-white</p>`
 ]} />
 
 ## Opacity
diff --git a/site/src/content/docs/utilities/z-index.mdx b/site/src/content/docs/utilities/z-index.mdx
index d963eea89141..484130790fb2 100644
--- a/site/src/content/docs/utilities/z-index.mdx
+++ b/site/src/content/docs/utilities/z-index.mdx
@@ -14,11 +14,11 @@ Use `z-index` utilities to stack elements on top of one another. Requires a `pos
 We call these “low-level” `z-index` utilities because of their default values of `-1` through `3`, which we use for the layout of overlapping components. High-level `z-index` values are used for overlay components like modals and tooltips.
 </Callout>
 
-<Example class="bd-example-zindex-levels position-relative" code={`<div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div>
-<div class="z-2 position-absolute p-5 rounded-3"><span>z-2</span></div>
-<div class="z-1 position-absolute p-5 rounded-3"><span>z-1</span></div>
-<div class="z-0 position-absolute p-5 rounded-3"><span>z-0</span></div>
-<div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div>`} />
+<Example class="bd-example-zindex-levels position-relative" code={`<div class="z-3 position-absolute p-9 rounded-3"><span>z-3</span></div>
+<div class="z-2 position-absolute p-9 rounded-3"><span>z-2</span></div>
+<div class="z-1 position-absolute p-9 rounded-3"><span>z-1</span></div>
+<div class="z-0 position-absolute p-9 rounded-3"><span>z-0</span></div>
+<div class="z-n1 position-absolute p-9 rounded-3"><span>z-n1</span></div>`} />
 
 ## Overlays