From: Christian Oliff <christian_oliff@trimble.com>
Date: Fri, 15 May 2026 03:25:17 +0000 (+0900)
Subject: v6: docs updates (#42394)
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7d5d151805e61ce51d233228f7f386aecc16167a;p=thirdparty%2Fbootstrap.git

v6: docs updates (#42394)
---

diff --git a/site/src/assets/examples/blog/index.astro b/site/src/assets/examples/blog/index.astro
index ca81e687e7..3456f51b78 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 269fbdd912..c21400bd0a 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/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro
index 98572087fe..e88c56cdea 100644
--- a/site/src/assets/examples/cheatsheet/index.astro
+++ b/site/src/assets/examples/cheatsheet/index.astro
@@ -12,7 +12,7 @@ export const body_class = 'bg-body-tertiary'
 
 <header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
   <div class="container-fluid d-flex align-items-center">
-    <h1 class="d-flex align-items-center fs-4 text-white mb-0">
+    <h1 class="d-flex align-items-center fs-xl fg-white mb-0">
       <img src={getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="me-3" alt="Bootstrap">
       Cheatsheet
     </h1>
@@ -1512,7 +1512,7 @@ export const body_class = 'bg-body-tertiary'
 
 <dialog class="dialog" id="exampleDialog">
   <div class="dialog-header">
-    <h1 class="dialog-title fs-5">Dialog title</h1>
+    <h1 class="dialog-title fs-lg">Dialog title</h1>
     <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Close"></button>
   </div>
   <div class="dialog-body">
@@ -1526,7 +1526,7 @@ export const body_class = 'bg-body-tertiary'
 
 <dialog class="dialog" id="staticBackdropDialog" data-bs-backdrop="static" data-bs-keyboard="false">
   <div class="dialog-header">
-    <h1 class="dialog-title fs-5">Static backdrop</h1>
+    <h1 class="dialog-title fs-lg">Static backdrop</h1>
     <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Close"></button>
   </div>
   <div class="dialog-body">
diff --git a/site/src/assets/examples/checkout/index.astro b/site/src/assets/examples/checkout/index.astro
index e9296fadf7..802199d298 100644
--- a/site/src/assets/examples/checkout/index.astro
+++ b/site/src/assets/examples/checkout/index.astro
@@ -18,8 +18,8 @@ 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="badge bg-primary rounded-pill">3</span>
+          <span class="fg-primary">Your cart</span>
+          <span class="badge-subtle theme-primary rounded-pill">3</span>
         </h4>
         <ul class="list-group mb-3">
           <li class="list-group-item d-flex justify-content-between lh-sm">
@@ -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 65053950cc..8d7d9fb4ce 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/dashboard/index.astro b/site/src/assets/examples/dashboard/index.astro
index f516d07fac..0aa029ba1d 100644
--- a/site/src/assets/examples/dashboard/index.astro
+++ b/site/src/assets/examples/dashboard/index.astro
@@ -58,16 +58,16 @@ export const extra_js = [
 </svg>
 
 <header class="navbar sticky-top bg-dark md:flex-nowrap p-0 shadow" data-bs-theme="dark">
-  <a class="navbar-brand md:col-3 lg:col-2 me-0 px-3 fs-6 text-white" href="#">Company name</a>
+  <a class="navbar-brand md:col-3 lg:col-2 me-0 px-3 fs-md fg-white" href="#">Company name</a>
 
   <ul class="navbar-nav flex-row md:d-none">
     <li class="nav-item text-nowrap">
-      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search">
+      <button class="nav-link px-3 fg-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search">
         <svg class="bi" aria-hidden="true"><use href="#search"/></svg>
       </button>
     </li>
     <li class="nav-item text-nowrap">
-      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="drawer" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="nav-link px-3 fg-white" type="button" data-bs-toggle="drawer" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
         <svg class="bi" aria-hidden="true"><use href="#list"/></svg>
       </button>
     </li>
diff --git a/site/src/assets/examples/dialogs/index.astro b/site/src/assets/examples/dialogs/index.astro
index 4086c250ac..c5ae7ae2dd 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>
@@ -64,7 +64,7 @@ export const extra_css = ['dialogs.css']
 <div class="d-flex flex-column p-4 gap-4 md:py-5 align-items-center justify-content-center">
   <dialog class="dialog dialog-example rounded-4 shadow w-340px" open data-bs-theme="light">
     <div class="dialog-header border-0 pt-4">
-      <h1 class="dialog-title fs-2 fw-bold">What's new</h1>
+      <h1 class="dialog-title fs-3xl fw-bold">What's new</h1>
     </div>
     <div class="dialog-body">
       <ul class="list-unstyled mb-0">
@@ -76,14 +76,14 @@ export const extra_css = ['dialogs.css']
           </div>
         </li>
         <li class="d-flex gap-3 mb-3">
-          <svg class="bi text-warning flex-shrink-0" width="48" height="48"><use href="#bookmark-star"/></svg>
+          <svg class="bi fg-warning flex-shrink-0" width="48" height="48"><use href="#bookmark-star"/></svg>
           <div>
             <h6 class="mb-1 fw-bold">Bookmarks</h6>
             <p class="mb-0 fg-2">Save items you love for easy access later.</p>
           </div>
         </li>
         <li class="d-flex gap-3">
-          <svg class="bi text-primary flex-shrink-0" width="48" height="48"><use href="#film"/></svg>
+          <svg class="bi fg-primary flex-shrink-0" width="48" height="48"><use href="#film"/></svg>
           <div>
             <h6 class="mb-1 fw-bold">Video embeds</h6>
             <p class="mb-0 fg-2">Share videos wherever you go.</p>
diff --git a/site/src/assets/examples/drawer-navbar/index.astro b/site/src/assets/examples/drawer-navbar/index.astro
index 39e6572cc5..609817634e 100644
--- a/site/src/assets/examples/drawer-navbar/index.astro
+++ b/site/src/assets/examples/drawer-navbar/index.astro
@@ -68,7 +68,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
   <div class="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm">
     <img class="me-3" src={getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} alt="" width="48" height="38">
     <div class="lh-1">
-      <h1 class="h6 mb-0 text-white lh-1">Bootstrap</h1>
+      <h1 class="h6 mb-0 fg-white lh-1">Bootstrap</h1>
       <small>Since 2011</small>
     </div>
   </div>
diff --git a/site/src/assets/examples/features/index.astro b/site/src/assets/examples/features/index.astro
index 6f99c63b0e..f9a91c395a 100644
--- a/site/src/assets/examples/features/index.astro
+++ b/site/src/assets/examples/features/index.astro
@@ -62,10 +62,10 @@ export const extra_css = ['features.css']
     <h2 class="pb-2 border-bottom">Columns with icons</h2>
     <div class="row g-4 py-5 row-cols-1 lg:row-cols-3">
       <div class="feature col">
-        <div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-2 mb-3">
+        <div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-3xl mb-3">
           <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#collection"/></svg>
         </div>
-        <h3 class="fs-2 text-body-emphasis">Featured title</h3>
+        <h3 class="fs-3xl text-body-emphasis">Featured title</h3>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="icon-link">
           Call to action
@@ -73,10 +73,10 @@ export const extra_css = ['features.css']
         </a>
       </div>
       <div class="feature col">
-        <div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-2 mb-3">
+        <div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-3xl mb-3">
           <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#people-circle"/></svg>
         </div>
-        <h3 class="fs-2 text-body-emphasis">Featured title</h3>
+        <h3 class="fs-3xl text-body-emphasis">Featured title</h3>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="icon-link">
           Call to action
@@ -84,10 +84,10 @@ export const extra_css = ['features.css']
         </a>
       </div>
       <div class="feature col">
-        <div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-2 mb-3">
+        <div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-3xl mb-3">
           <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#toggles2"/></svg>
         </div>
-        <h3 class="fs-2 text-body-emphasis">Featured title</h3>
+        <h3 class="fs-3xl text-body-emphasis">Featured title</h3>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="icon-link">
           Call to action
@@ -103,11 +103,11 @@ export const extra_css = ['features.css']
     <h2 class="pb-2 border-bottom">Hanging icons</h2>
     <div class="row g-4 py-5 row-cols-1 lg:row-cols-3">
       <div class="col d-flex align-items-start">
-        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
+        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#toggles2"/></svg>
         </div>
         <div>
-          <h3 class="fs-2 text-body-emphasis">Featured title</h3>
+          <h3 class="fs-3xl text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
           <a href="#" class="btn-solid theme-primary">
             Primary button
@@ -115,11 +115,11 @@ export const extra_css = ['features.css']
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
+        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#cpu-fill"/></svg>
         </div>
         <div>
-          <h3 class="fs-2 text-body-emphasis">Featured title</h3>
+          <h3 class="fs-3xl text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
           <a href="#" class="btn-solid theme-primary">
             Primary button
@@ -127,11 +127,11 @@ export const extra_css = ['features.css']
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
+        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#tools"/></svg>
         </div>
         <div>
-          <h3 class="fs-2 text-body-emphasis">Featured title</h3>
+          <h3 class="fs-3xl text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
           <a href="#" class="btn-solid theme-primary">
             Primary button
@@ -221,56 +221,56 @@ export const extra_css = ['features.css']
       <div class="col d-flex align-items-start">
         <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#bootstrap"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#cpu-fill"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#calendar3"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#home"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#speedometer2"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#toggles2"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#geo-fill"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#tools"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
@@ -292,7 +292,7 @@ export const extra_css = ['features.css']
       <div class="col">
         <div class="row row-cols-1 sm:row-cols-2 g-4">
           <div class="col d-flex flex-column gap-2">
-            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-4 rounded-3">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-xl rounded-3">
               <svg class="bi" width="1em" height="1em" aria-hidden="true">
                 <use href="#collection" />
               </svg>
@@ -302,7 +302,7 @@ export const extra_css = ['features.css']
           </div>
 
           <div class="col d-flex flex-column gap-2">
-            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-4 rounded-3">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-xl rounded-3">
               <svg class="bi" width="1em" height="1em" aria-hidden="true">
                 <use href="#gear-fill" />
               </svg>
@@ -312,7 +312,7 @@ export const extra_css = ['features.css']
           </div>
 
           <div class="col d-flex flex-column gap-2">
-            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-4 rounded-3">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-xl rounded-3">
               <svg class="bi" width="1em" height="1em" aria-hidden="true">
                 <use href="#speedometer" />
               </svg>
@@ -322,7 +322,7 @@ export const extra_css = ['features.css']
           </div>
 
           <div class="col d-flex flex-column gap-2">
-            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-4 rounded-3">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-xl rounded-3">
               <svg class="bi" width="1em" height="1em" aria-hidden="true">
                 <use href="#table" />
               </svg>
diff --git a/site/src/assets/examples/grid/index.astro b/site/src/assets/examples/grid/index.astro
index a67df0b425..e8147faf38 100644
--- a/site/src/assets/examples/grid/index.astro
+++ b/site/src/assets/examples/grid/index.astro
@@ -82,7 +82,7 @@ export const body_class = 'py-4'
     </div>
 
     <h2 class="mt-4">Full width, single column</h2>
-    <p class="text-warning">
+    <p class="fg-warning">
       No grid classes are necessary for full-width elements.
     </p>
 
diff --git a/site/src/assets/examples/headers/index.astro b/site/src/assets/examples/headers/index.astro
index 95a83bf8ce..88c952ecea 100644
--- a/site/src/assets/examples/headers/index.astro
+++ b/site/src/assets/examples/headers/index.astro
@@ -34,7 +34,7 @@ export const extra_css = ['headers.css']
     <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
       <a href="/" class="d-flex align-items-center mb-3 md:mb-0 md:me-auto link-body-emphasis text-decoration-none">
         <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
-        <span class="fs-4">Simple header</span>
+        <span class="fs-xl">Simple header</span>
       </a>
 
       <ul class="nav nav-pills">
@@ -96,7 +96,7 @@ export const extra_css = ['headers.css']
         </a>
 
         <ul class="nav col-12 lg:col-auto lg:me-auto mb-2 justify-content-center md:mb-0">
-          <li><a href="#" class="nav-link px-2 text-secondary">Home</a></li>
+          <li><a href="#" class="nav-link px-2 fg-secondary">Home</a></li>
           <li><a href="#" class="nav-link px-2 text-white">Features</a></li>
           <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
           <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
@@ -223,7 +223,7 @@ export const extra_css = ['headers.css']
     <div class="container d-flex flex-wrap justify-content-center">
       <a href="/" class="d-flex align-items-center mb-3 lg:mb-0 lg:me-auto link-body-emphasis text-decoration-none">
         <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
-        <span class="fs-4">Double header</span>
+        <span class="fs-xl">Double header</span>
       </a>
       <form class="col-12 lg:col-auto mb-3 lg:mb-0" role="search">
         <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
@@ -243,7 +243,7 @@ export const extra_css = ['headers.css']
 
           <ul class="nav col-12 lg:col-auto my-2 justify-content-center md:my-0 text-small">
             <li>
-              <a href="#" class="nav-link text-secondary">
+              <a href="#" class="nav-link fg-secondary">
                 <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#home"/></svg>
                 Home
               </a>
diff --git a/site/src/assets/examples/heroes/index.astro b/site/src/assets/examples/heroes/index.astro
index 2ca408ea09..636bca3f98 100644
--- a/site/src/assets/examples/heroes/index.astro
+++ b/site/src/assets/examples/heroes/index.astro
@@ -62,7 +62,7 @@ export const extra_css = ['heroes.css']
     <div class="row align-items-center lg:g-5 py-5">
       <div class="lg:col-7 text-center lg:text-start">
         <h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">Vertically centered hero sign-up form</h1>
-        <p class="lg:col-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
+        <p class="lg:col-10 fs-xl">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
       </div>
       <div class="md:col-10 mx-auto lg:col-5">
         <form class="p-4 md:p-5 border rounded-3 bg-body-tertiary">
@@ -112,11 +112,11 @@ export const extra_css = ['heroes.css']
 
   <div class="b-example-divider"></div>
 
-  <div class="bg-dark text-secondary px-4 py-5 text-center">
+  <div class="bg-dark fg-secondary px-4 py-5 text-center">
     <div class="py-5">
       <h1 class="display-5 fw-bold text-white">Dark color hero</h1>
       <div class="lg:col-6 mx-auto">
-        <p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
+        <p class="fs-lg mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
         <div class="d-grid gap-2 sm:d-flex sm:justify-content-center">
           <button type="button" class="btn-outline theme-info btn-lg px-4 sm:me-3">Custom button</button>
           <button type="button" class="btn-outline theme-secondary btn-lg px-4">Secondary</button>
diff --git a/site/src/assets/examples/jumbotron/index.astro b/site/src/assets/examples/jumbotron/index.astro
index 50802b02d6..b1618752a8 100644
--- a/site/src/assets/examples/jumbotron/index.astro
+++ b/site/src/assets/examples/jumbotron/index.astro
@@ -7,14 +7,14 @@ export const title = 'Jumbotron example'
     <header class="pb-3 mb-4 border-bottom">
       <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
         <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
-        <span class="fs-4">Jumbotron example</span>
+        <span class="fs-xl">Jumbotron example</span>
       </a>
     </header>
 
     <div class="p-5 mb-4 bg-body-tertiary rounded-3">
       <div class="container-fluid py-5">
         <h1 class="display-5 fw-bold">Custom jumbotron</h1>
-        <p class="md:col-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
+        <p class="md:col-8 fs-xl">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
         <button class="btn-solid theme-primary btn-lg" type="button">Example button</button>
       </div>
     </div>
diff --git a/site/src/assets/examples/jumbotrons/index.astro b/site/src/assets/examples/jumbotrons/index.astro
index 744d6a7817..4ca8c70d07 100644
--- a/site/src/assets/examples/jumbotrons/index.astro
+++ b/site/src/assets/examples/jumbotrons/index.astro
@@ -21,7 +21,7 @@ export const extra_css = ['jumbotrons.css']
   <div class="p-5 text-center bg-body-tertiary rounded-3">
     <svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100" aria-hidden="true"><use href="#bootstrap"/></svg>
     <h1 class="text-body-emphasis">Jumbotron with icon</h1>
-    <p class="lg:col-8 mx-auto fs-5 text-muted">
+    <p class="lg:col-8 mx-auto fs-lg fg-secondary">
       This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action.
     </p>
     <div class="d-inline-flex gap-2 mb-5">
@@ -39,7 +39,7 @@ export const extra_css = ['jumbotrons.css']
 <div class="b-example-divider"></div>
 
 <div class="container my-5">
-  <div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5">
+  <div class="position-relative p-5 text-center fg-secondary bg-body border border-dashed rounded-5">
     <button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button>
     <svg class="bi mt-5 mb-3" width="48" height="48" aria-hidden="true"><use href="#check2-circle"/></svg>
     <h1 class="text-body-emphasis">Placeholder jumbotron</h1>
diff --git a/site/src/assets/examples/list-groups/index.astro b/site/src/assets/examples/list-groups/index.astro
index c8d3f5eed2..af2067ba95 100644
--- a/site/src/assets/examples/list-groups/index.astro
+++ b/site/src/assets/examples/list-groups/index.astro
@@ -230,7 +230,7 @@ export const extra_css = ['list-groups.css']
 <div class="d-flex flex-column md:flex-row p-4 gap-4 md:py-5 align-items-center justify-content-center">
   <div class="list-group list-group-radio d-grid gap-2 border-0">
     <div class="position-relative">
-      <input class="radio position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid1" value="" checked>
+      <input class="radio position-absolute top-50 end-0 me-3 fs-lg" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid1" value="" checked>
       <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid1">
         <strong class="fw-semibold">First radio</strong>
         <span class="d-block small opacity-75">With support text underneath to add more detail</span>
@@ -238,7 +238,7 @@ export const extra_css = ['list-groups.css']
     </div>
 
     <div class="position-relative">
-      <input class="radio position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid2" value="">
+      <input class="radio position-absolute top-50 end-0 me-3 fs-lg" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid2" value="">
       <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid2">
         <strong class="fw-semibold">Second radio</strong>
         <span class="d-block small opacity-75">Some other text goes here</span>
@@ -246,7 +246,7 @@ export const extra_css = ['list-groups.css']
     </div>
 
     <div class="position-relative">
-      <input class="radio position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid3" value="">
+      <input class="radio position-absolute top-50 end-0 me-3 fs-lg" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid3" value="">
       <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid3">
         <strong class="fw-semibold">Third radio</strong>
         <span class="d-block small opacity-75">And we end with another snippet of text</span>
@@ -254,7 +254,7 @@ export const extra_css = ['list-groups.css']
     </div>
 
     <div class="position-relative">
-      <input class="radio position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid4" value="" disabled>
+      <input class="radio position-absolute top-50 end-0 me-3 fs-lg" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid4" value="" disabled>
       <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid4">
         <strong class="fw-semibold">Fourth disabled radio</strong>
         <span class="d-block small opacity-75">This option is disabled</span>
diff --git a/site/src/assets/examples/masonry/index.astro b/site/src/assets/examples/masonry/index.astro
index fcd8bde759..4f1f265cd7 100644
--- a/site/src/assets/examples/masonry/index.astro
+++ b/site/src/assets/examples/masonry/index.astro
@@ -60,7 +60,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
           <blockquote class="blockquote">
             <p>A well-known quote, contained in a blockquote element.</p>
           </blockquote>
-          <figcaption class="blockquote-footer mb-0 text-white">
+          <figcaption class="blockquote-footer mb-0 fg-white">
             Someone famous in <cite title="Source Title">Source Title</cite>
           </figcaption>
         </figure>
diff --git a/site/src/assets/examples/navbar-bottom/index.astro b/site/src/assets/examples/navbar-bottom/index.astro
index 4f81831ccf..07ba0bc235 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 d5c7c4935c..2d37f12572 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-drawer/index.astro b/site/src/assets/examples/navbars-drawer/index.astro
index d3bac9ef19..a12b661a60 100644
--- a/site/src/assets/examples/navbars-drawer/index.astro
+++ b/site/src/assets/examples/navbars-drawer/index.astro
@@ -130,7 +130,7 @@ export const extra_css = ['navbars-drawer.css']
     <div class="bg-body-tertiary p-5 rounded">
       <div class="sm:col-8 py-5 mx-auto">
         <h1 class="display-5 fw-normal">Navbar with drawer examples</h1>
-        <p class="fs-5">This example shows how responsive drawer menus work within the navbar. For positioning of navbars, checkout the <a href={getVersionedDocsPath('/examples/navbar-static/')}>top</a> and <a href={getVersionedDocsPath('/examples/navbar-fixed/')}>fixed top</a> examples.</p>
+        <p class="fs-lg">This example shows how responsive drawer menus work within the navbar. For positioning of navbars, checkout the <a href={getVersionedDocsPath('/examples/navbar-static/')}>top</a> and <a href={getVersionedDocsPath('/examples/navbar-fixed/')}>fixed top</a> examples.</p>
         <p>From the top down, you'll see a dark navbar, light navbar and a responsive navbar—each with drawers built in. Resize your browser window to the large breakpoint to see the toggle for the drawer.</p>
         <p>
           <a class="btn-solid theme-primary" href={getVersionedDocsPath('/components/navbar#drawer')} role="button">Learn more about drawer navbars &raquo;</a>
diff --git a/site/src/assets/examples/navbars/index.astro b/site/src/assets/examples/navbars/index.astro
index 3f6060c66f..4ec2d4ece1 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 cef2a12d54..434f23f04b 100644
--- a/site/src/assets/examples/pricing/index.astro
+++ b/site/src/assets/examples/pricing/index.astro
@@ -17,7 +17,7 @@ export const extra_css = ['pricing.css']
     <div class="d-flex flex-column md:flex-row align-items-center pb-3 mb-4 border-bottom">
       <a href="/" class="d-flex align-items-center link-body-emphasis text-decoration-none">
         <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
-        <span class="fs-4">Pricing example</span>
+        <span class="fs-xl">Pricing example</span>
       </a>
 
       <nav class="d-inline-flex mt-2 md:mt-0 md:ms-auto">
@@ -30,7 +30,7 @@ export const extra_css = ['pricing.css']
 
     <div class="pricing-header p-3 md:pb-4 mx-auto text-center">
       <h1 class="display-4 fw-normal text-body-emphasis">Pricing</h1>
-      <p class="fs-5 fg-2">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
+      <p class="fs-lg fg-2">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
     </div>
   </header>
 
@@ -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 e9fdd2a960..bffc4152ea 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">
@@ -54,7 +54,7 @@ export const extra_css = ['product.css']
   <div class="position-relative overflow-hidden p-3 md:p-5 md:m-3 text-center bg-body-tertiary">
     <div class="md:col-6 lg:p-5 mx-auto my-5">
       <h1 class="display-3 fw-bold">Designed for engineers</h1>
-      <h3 class="fw-normal text-muted mb-3">Build anything you want with Aperture</h3>
+      <h3 class="fw-normal fg-secondary mb-3">Build anything you want with Aperture</h3>
       <div class="d-flex gap-3 justify-content-center lead fw-normal">
         <a class="icon-link" href="#">
           Learn more
diff --git a/site/src/assets/examples/sidebars/index.astro b/site/src/assets/examples/sidebars/index.astro
index 36e9718c25..9f414ae2f0 100644
--- a/site/src/assets/examples/sidebars/index.astro
+++ b/site/src/assets/examples/sidebars/index.astro
@@ -34,7 +34,7 @@ export const extra_js = [{src: 'sidebars.js'}]
   <div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
     <a href="/" class="d-flex align-items-center mb-3 md:mb-0 md:me-auto text-white text-decoration-none">
       <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
-      <span class="fs-4">Sidebar</span>
+      <span class="fs-xl">Sidebar</span>
     </a>
     <hr>
     <ul class="nav nav-pills flex-column mb-auto">
@@ -90,7 +90,7 @@ export const extra_js = [{src: 'sidebars.js'}]
   <div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;">
     <a href="/" class="d-flex align-items-center mb-3 md:mb-0 md:me-auto link-body-emphasis text-decoration-none">
       <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
-      <span class="fs-4">Sidebar</span>
+      <span class="fs-xl">Sidebar</span>
     </a>
     <hr>
     <ul class="nav nav-pills flex-column mb-auto">
@@ -194,7 +194,7 @@ export const extra_js = [{src: 'sidebars.js'}]
   <div class="flex-shrink-0 p-3" style="width: 280px;">
     <a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
       <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use href="#bootstrap"/></svg>
-      <span class="fs-5 fw-semibold">Collapsible</span>
+      <span class="fs-lg fw-semibold">Collapsible</span>
     </a>
     <ul class="list-unstyled ps-0">
       <li class="mb-1">
@@ -257,7 +257,7 @@ export const extra_js = [{src: 'sidebars.js'}]
   <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;">
     <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
       <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use href="#bootstrap"/></svg>
-      <span class="fs-5 fw-semibold">List group</span>
+      <span class="fs-lg fw-semibold">List group</span>
     </a>
     <div class="list-group list-group-flush border-bottom scrollarea">
       <a href="#" class="list-group-item list-group-item-action active py-3 lh-sm" aria-current="true">
diff --git a/site/src/assets/examples/starter-template/index.astro b/site/src/assets/examples/starter-template/index.astro
index d51559fad8..3fe6813472 100644
--- a/site/src/assets/examples/starter-template/index.astro
+++ b/site/src/assets/examples/starter-template/index.astro
@@ -18,13 +18,13 @@ export const title = 'Starter Template'
   <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
     <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
       <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
-      <span class="fs-4">Starter template</span>
+      <span class="fs-xl">Starter template</span>
     </a>
   </header>
 
   <main>
     <h1 class="text-body-emphasis">Get started with Bootstrap</h1>
-    <p class="fs-5 md:col-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p>
+    <p class="fs-lg md:col-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p>
 
     <div class="mb-5">
       <a href={getVersionedDocsPath('/examples')} class="btn-solid theme-primary btn-lg px-4">Download examples</a>
diff --git a/site/src/assets/examples/sticky-footer-navbar/index.astro b/site/src/assets/examples/sticky-footer-navbar/index.astro
index 2b248be0b9..5e27549527 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/components/shortcodes/DeprecatedIn.astro b/site/src/components/shortcodes/DeprecatedIn.astro
index 50ba42b95d..b7ee058621 100644
--- a/site/src/components/shortcodes/DeprecatedIn.astro
+++ b/site/src/components/shortcodes/DeprecatedIn.astro
@@ -11,7 +11,7 @@ const { version } = Astro.props
 ---
 
 <small
-  class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2"
+  class="d-inline-flex mb-3 px-2 py-1 fw-semibold fg-emphasis-warning bg-warning-subtle border border-warning-subtle rounded-2"
 >
   Deprecated in v{version}
 </small>
diff --git a/site/src/content/docs/guides/migration.mdx b/site/src/content/docs/guides/migration.mdx
index fa4f582229..c8f2b43018 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/helpers/stretched-link.mdx b/site/src/content/docs/helpers/stretched-link.mdx
index e24b07cc57..0cf1689cce 100644
--- a/site/src/content/docs/helpers/stretched-link.mdx
+++ b/site/src/content/docs/helpers/stretched-link.mdx
@@ -55,10 +55,10 @@ If the stretched link doesn’t seem to work, the [containing block](https://dev
       <h5 class="card-title">Card with stretched links</h5>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
       <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>
+        <a href="#" class="stretched-link fg-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-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.
+        This <a href="#" class="fg-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>
   </div>`} />
diff --git a/site/src/content/docs/utilities/background.mdx b/site/src/content/docs/utilities/background.mdx
index 5222438fe2..08dd695ad0 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/border-color.mdx b/site/src/content/docs/utilities/border-color.mdx
index 316f8a02fd..9216209663 100644
--- a/site/src/content/docs/utilities/border-color.mdx
+++ b/site/src/content/docs/utilities/border-color.mdx
@@ -47,7 +47,7 @@ Or modify the default `border-color` of a component:
     <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com">
   </div>
 
-  <div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
+  <div class="h4 pb-2 mb-4 fg-danger border-bottom border-danger">
     Dangerous heading
   </div>
 
diff --git a/site/src/content/docs/utilities/colors.mdx b/site/src/content/docs/utilities/colors.mdx
index e4be941adc..429f9b070c 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/opacity.mdx b/site/src/content/docs/utilities/opacity.mdx
index a182e17589..1aab88903e 100644
--- a/site/src/content/docs/utilities/opacity.mdx
+++ b/site/src/content/docs/utilities/opacity.mdx
@@ -10,11 +10,11 @@ The `opacity` property sets the opacity level for an element. The opacity level
 Set the `opacity` of an element using `.opacity-{value}` utilities.
 
 <div class="bd-example sm:d-flex">
-  <div class="opacity-100 p-3 m-2 bg-primary text-light fw-bold rounded">100%</div>
-  <div class="opacity-75 p-3 m-2 bg-primary text-light fw-bold rounded">75%</div>
-  <div class="opacity-50 p-3 m-2 bg-primary text-light fw-bold rounded">50%</div>
-  <div class="opacity-25 p-3 m-2 bg-primary text-light fw-bold rounded">25%</div>
-  <div class="opacity-0 p-3 m-2 bg-primary text-light fw-bold rounded">0%</div>
+  <div class="opacity-100 p-3 m-2 bg-primary fg-white fw-bold rounded">100%</div>
+  <div class="opacity-75 p-3 m-2 bg-primary fg-white fw-bold rounded">75%</div>
+  <div class="opacity-50 p-3 m-2 bg-primary fg-white fw-bold rounded">50%</div>
+  <div class="opacity-25 p-3 m-2 bg-primary fg-white fw-bold rounded">25%</div>
+  <div class="opacity-0 p-3 m-2 bg-primary fg-white fw-bold rounded">0%</div>
 </div>
 
 ```html
diff --git a/site/src/content/docs/utilities/z-index.mdx b/site/src/content/docs/utilities/z-index.mdx
index d963eea891..484130790f 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
 
diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro
index be15cc43cd..7c6e2918eb 100644
--- a/site/src/layouts/DocsLayout.astro
+++ b/site/src/layouts/DocsLayout.astro
@@ -180,6 +180,7 @@ if (currentPageIndex < allPages.length - 1) {
                 <a
                   href={prevPage.url}
                   class="d-flex flex-column gap-2 p-5 text-decoration-none border rounded-5 flex-grow-1"
+                  rel="prev"
                 >
                   <div class="fg-3">← Previous</div>
                   <div class="fs-5 fw-semibold">{prevPage.title}</div>
@@ -192,6 +193,7 @@ if (currentPageIndex < allPages.length - 1) {
                 <a
                   href={nextPage.url}
                   class="d-flex flex-column gap-2 p-5 text-decoration-none text-end border rounded-5 flex-grow-1"
+                  rel="next"
                 >
                   <div class="fg-3">Next →</div>
                   <div class="fs-5 fw-semibold">{nextPage.title}</div>
diff --git a/site/src/pages/docs/versions.astro b/site/src/pages/docs/versions.astro
index 6f4a8bb26b..da7ab4ebda 100644
--- a/site/src/pages/docs/versions.astro
+++ b/site/src/pages/docs/versions.astro
@@ -37,7 +37,7 @@ function getVersionsSortedDesc<TKey extends string, TVersions extends Record<TKe
                   return (
                     <a
                       class:list={[
-                        'list-group-item list-group-item-action py-2 text-primary',
+                        'list-group-item list-group-item-action py-2 fg-primary',
                         (isCurrentVersion || isAlpha) && 'd-flex justify-content-between align-items-center'
                       ]}
                       href={`${docsVersion.baseurl}/${version}/`}