v6: docs updates (#42394)

diff --git a/site/src/assets/examples/blog/index.astro b/site/src/assets/examples/blog/index.astro
index ca81e687e7033478f6277b827f31955ee9689420..3456f51b782c8d1ee1a24e362c5870295c670470 100644 (file)
--- 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 269fbdd9122274d188df46f3e1465c2c419cfc3c..c21400bd0a51f352ee98573d40129c5686dc951c 100644 (file)
--- 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 98572087fe50008038d971157480672d9cd4d6ed..e88c56cdea76bea6e27701dc97a223cc39099fb7 100644 (file)
--- 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 e9296fadf703b70c863af1c05af8bb893b8145eb..802199d2986ec2e1430ff3b1e95d1d502a953c20 100644 (file)
--- 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 65053950cc5cc3ce68b667d86b36fa89a3d23a50..8d7d9fb4ceb9827fce3fb85b46e051ed636b92a4 100644 (file)
--- 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 f516d07facb05cc50466a110c3aa5512f294036c..0aa029ba1dfa8debb71d7d3fc4dea4f9f421d01f 100644 (file)
--- 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 4086c250acbf3dd28d365dc4aa42197e36e16857..c5ae7ae2ddbc3445708d93a3ee61c214a2b8ecf1 100644 (file)
--- 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 39e6572cc562900af90d61e2b9e05a8c191b421d..609817634eb04baeb6c92a0ac04eaa70f0b2cef8 100644 (file)
--- 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 6f99c63b0ec7248939e4aee84a9603ca20e18602..f9a91c395acae5b4ec3a320f9ff9f441ff43f8ee 100644 (file)
--- 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 a67df0b4258a54726c378a259759607c7720fe60..e8147faf38f73644116a57fbc340bb9a35b27639 100644 (file)
--- 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 95a83bf8ce504155408ed929cb44005f5d043cc0..88c952ecea4b3c8460f1788d9b4433ecd4502736 100644 (file)
--- 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 2ca408ea0923a80ca34c4bf441c37f9ead166c30..636bca3f9878265c946a037204cfbfb6645d9da6 100644 (file)
--- 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 50802b02d6a4b38f797316d0a8f2f7025884db11..b1618752a8d53a3007184bdc4046b284792daccf 100644 (file)
--- 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 744d6a7817474560dac4fef51b6280c856d9486c..4ca8c70d07f992d5d297fd8878780f85c8b926ab 100644 (file)
--- 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 c8d3f5eed2b1eb0e9f871fea12cf4cba5c98cba2..af2067ba95aa80960007497301f5e913948d9b5e 100644 (file)
--- 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 fcd8bde75932097c2c8e4cc174f9837f9aa6ccb5..4f1f265cd7c0f00548ee794ae1e9aa6342176def 100644 (file)
--- 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 4f81831ccf6d18e57c9007d37782121d9d509e30..07ba0bc235378e401879ab0c41d58abf51a33617 100644 (file)
--- 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 d5c7c4935c0a7451395a5403aa777eaa4b7e2934..2d37f125726f7c0c75d92a3c1030a124736b6f92 100644 (file)
--- 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 d3bac9ef191a9a61507513816c0984962a5a90ec..a12b661a6046a10aa1786df7f487503ff7c33026 100644 (file)
--- 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 3f6060c66f284b5b87c94cee6799e77c1420fad3..4ec2d4ece1313afc68a4333274b3bc1e2f7f3244 100644 (file)
--- 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 cef2a12d54a274ad9fa1164b2fa14bd944f55698..434f23f04b337a60d51a95bc10582f3b72335edc 100644 (file)
--- 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 e9fdd2a960641380ad1ef5fed92d63b08a957430..bffc4152ea4f887fee0be0b5d5e5626274634698 100644 (file)
--- 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 36e9718c25f6f653a7c94e5422d940fd707b2d70..9f414ae2f0c18b3d7efcf8a22e79322f72eecd76 100644 (file)
--- 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 d51559fad856df3cb4cfea6bbea06c9aaddb40b6..3fe681347257d9a962a52e356844db45e5032f0c 100644 (file)
--- 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 2b248be0b9b31aad5b04fdc8dbdd6a1f9c080953..5e2754952707c08f77e63b6cbe541a3652a17681 100644 (file)
--- 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 50ba42b95d0dc8dccf54117071cbb5a7a5d5e5c7..b7ee0586215a9e59d355e502fbc376086cebfb74 100644 (file)
--- 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 fa4f58222930f7c966efe4e6d5c965cbf310db08..c8f2b43018c20407def0bb91c9ee804afae1493e 100644 (file)
--- 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 e24b07cc57e425b606a5c6e2e4028cff8e3234a4..0cf1689cce73eb96dfd4cccecf3ecbda3f347e89 100644 (file)
--- 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 5222438fe26936819a62a64be1ea06088b56c2f5..08dd695ad0f34d10e5a3979656bf5b74ab23bd07 100644 (file)
--- 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 316f8a02fd51cc1b5fc1415f64e8db12176d5c1e..921620966378dc2c16cae46a2f0200f357c5b785 100644 (file)
--- 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 e4be941adce8d99b4834c5e39d282700b396ad9a..429f9b070cd1a89dcfe0a37e29d4b5af273635cc 100644 (file)
--- 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 a182e175899bf182ef1211e8e1b28f029f997099..1aab88903e61b3f0c6182b76419c8d949f1438d5 100644 (file)
--- 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 d963eea8914127721a98beddf1b6604e3773ef82..484130790fb2fc2bdfbe8c73931095c90d15f961 100644 (file)
--- 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 be15cc43cd0f7357e04c3817631ce4e4cb628bf3..7c6e2918ebd611322c68fda6dba8708e7283b9be 100644 (file)
--- 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 6f4a8bb26b900d08f675f05c7068e6f6422c7edf..da7ab4ebda402e54f42ef423a7058dc4203fcbba 100644 (file)
--- 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}/`}