v6: docs - Update utility class names in docs and examples (#42418)

Replace deprecated utility classes with the updated names across site docs and examples. Changes include switching text-* classes to fg-*, text-bg-* badge classes to theme-*, and replacing clearfix with d-flow-root. Affected files: cover and drawer-navbar examples, spinner example, reboot, accessibility, columns docs, and versions page to keep examples consistent with the new utility naming.

Add btn-icon class to navbar toggler

Add the btn-icon utility class to the navbar toggler button in the navbar-fixed example to apply icon button styling. This change updates site/src/assets/examples/navbar-fixed/index.astro and keeps the existing SVG toggler markup and collapse behavior unchanged.

diff --git a/site/src/assets/examples/blog/index.astro b/site/src/assets/examples/blog/index.astro
index 3456f51b782c8d1ee1a24e362c5870295c670470..0667ba03082afca2623c296c314ae54f80ab31f8 100644 (file)
--- a/site/src/assets/examples/blog/index.astro
+++ b/site/src/assets/examples/blog/index.astro
@@ -21,13 +21,13 @@ import Placeholder from "@shortcodes/Placeholder.astro"
   <header class="border-bottom lh-1 py-3">
     <div class="row flex-nowrap justify-content-between align-items-center">
       <div class="col-4 pt-1">
-        <a class="link-secondary" href="#">Subscribe</a>
+        <a class="theme-secondary" href="#">Subscribe</a>
       </div>
       <div class="col-4 text-center">
         <a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">Large</a>
       </div>
       <div class="col-4 d-flex justify-content-end align-items-center">
-        <a class="link-secondary" href="#" aria-label="Search">
+        <a class="theme-secondary" href="#" aria-label="Search">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
         </a>
         <a class="btn-outline theme-secondary btn-sm" href="#">Sign up</a>

diff --git a/site/src/assets/examples/dashboard/index.astro b/site/src/assets/examples/dashboard/index.astro
index 0aa029ba1dfa8debb71d7d3fc4dea4f9f421d01f..8fa1d629515680039b63051337bf089a91e5719f 100644 (file)
--- a/site/src/assets/examples/dashboard/index.astro
+++ b/site/src/assets/examples/dashboard/index.astro
@@ -128,7 +128,7 @@ export const extra_js = [
 
           <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 fg-2 text-uppercase">
             <span>Saved reports</span>
-            <a class="link-secondary" href="#" aria-label="Add a new report">
+            <a class="theme-secondary" href="#" aria-label="Add a new report">
               <svg class="bi" aria-hidden="true"><use href="#plus-circle"/></svg>
             </a>
           </h6>

diff --git a/site/src/assets/examples/drawer-navbar/index.astro b/site/src/assets/examples/drawer-navbar/index.astro
index 609817634eb04baeb6c92a0ac04eaa70f0b2cef8..7cdfc80840822aa92b0b71fa5b62c9e2d340a1c4 100644 (file)
--- a/site/src/assets/examples/drawer-navbar/index.astro
+++ b/site/src/assets/examples/drawer-navbar/index.astro
@@ -52,7 +52,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
     <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
     <a class="nav-link" href="#">
       Friends
-      <span class="badge text-bg-light rounded-pill align-text-bottom">27</span>
+      <span class="badge theme-secondary rounded-pill align-text-bottom">27</span>
     </a>
     <a class="nav-link" href="#">Explore</a>
     <a class="nav-link" href="#">Suggestions</a>

diff --git a/site/src/assets/examples/headers/index.astro b/site/src/assets/examples/headers/index.astro
index 88c952ecea4b3c8460f1788d9b4433ecd4502736..0dba47145c6c9262904cd0b3cdc0ede179be919a 100644 (file)
--- a/site/src/assets/examples/headers/index.astro
+++ b/site/src/assets/examples/headers/index.astro
@@ -72,7 +72,7 @@ export const extra_css = ['headers.css']
       </div>
 
       <ul class="nav col-12 md:col-auto mb-2 justify-content-center md:mb-0">
-        <li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
+        <li><a href="#" class="nav-link px-2 theme-secondary">Home</a></li>
         <li><a href="#" class="nav-link px-2">Features</a></li>
         <li><a href="#" class="nav-link px-2">Pricing</a></li>
         <li><a href="#" class="nav-link px-2">FAQs</a></li>
@@ -125,7 +125,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 link-secondary">Overview</a></li>
+          <li><a href="#" class="nav-link px-2 theme-secondary">Overview</a></li>
           <li><a href="#" class="nav-link px-2 link-body-emphasis">Inventory</a></li>
           <li><a href="#" class="nav-link px-2 link-body-emphasis">Customers</a></li>
           <li><a href="#" class="nav-link px-2 link-body-emphasis">Products</a></li>

diff --git a/site/src/assets/examples/navbar-fixed/index.astro b/site/src/assets/examples/navbar-fixed/index.astro
index 67e2022f12534fb88fee1f8b83b5b5ac28e39476..31061590fe98a61b6ef777828acae251ce57547b 100644 (file)
--- a/site/src/assets/examples/navbar-fixed/index.astro
+++ b/site/src/assets/examples/navbar-fixed/index.astro
@@ -8,7 +8,7 @@ export const extra_css = ['navbar-fixed.css']
 <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/assets/examples/navbars-drawer/index.astro b/site/src/assets/examples/navbars-drawer/index.astro
index a12b661a6046a10aa1786df7f487503ff7c33026..d3ce1d154524e619dfe9fe016c1b675bef4b3e05 100644 (file)
--- a/site/src/assets/examples/navbars-drawer/index.astro
+++ b/site/src/assets/examples/navbars-drawer/index.astro
@@ -9,7 +9,7 @@ export const extra_css = ['navbars-drawer.css']
   <nav class="navbar navbar-dark bg-dark" aria-label="Dark drawer navbar">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Dark drawer navbar</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbarDark" aria-controls="drawerNavbarDark" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbarDark" aria-controls="drawerNavbarDark" 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 text-bg-dark" tabindex="-1" id="drawerNavbarDark" aria-labelledby="drawerNavbarDarkLabel">
@@ -49,7 +49,7 @@ export const extra_css = ['navbars-drawer.css']
   <nav class="navbar bg-body-tertiary" aria-label="Light drawer navbar">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Light drawer navbar</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbarLight" aria-controls="drawerNavbarLight" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbarLight" aria-controls="drawerNavbarLight" 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="drawerNavbarLight" aria-labelledby="drawerNavbarLightLabel">
@@ -89,7 +89,7 @@ export const extra_css = ['navbars-drawer.css']
   <nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Drawer navbar large">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Responsive drawer navbar</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbar2" aria-controls="drawerNavbar2" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbar2" aria-controls="drawerNavbar2" 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 text-bg-dark" tabindex="-1" id="drawerNavbar2" aria-labelledby="drawerNavbar2Label">

diff --git a/site/src/assets/examples/pricing/index.astro b/site/src/assets/examples/pricing/index.astro
index 434f23f04b337a60d51a95bc10582f3b72335edc..4d73d36956228bdb0bbe49d788857e5b266e872c 100644 (file)
--- a/site/src/assets/examples/pricing/index.astro
+++ b/site/src/assets/examples/pricing/index.astro
@@ -155,30 +155,30 @@ export const extra_css = ['pricing.css']
       <div class="col-6 md:col">
         <h5>Features</h5>
         <ul class="list-unstyled text-small">
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Random feature</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team feature</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another one</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Last time</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Cool stuff</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Random feature</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Team feature</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Stuff for developers</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Another one</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Last time</a></li>
         </ul>
       </div>
       <div class="col-6 md:col">
         <h5>Resources</h5>
         <ul class="list-unstyled text-small">
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource name</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another resource</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Final resource</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Resource</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Resource name</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Another resource</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Final resource</a></li>
         </ul>
       </div>
       <div class="col-6 md:col">
         <h5>About</h5>
         <ul class="list-unstyled text-small">
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Locations</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Team</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Locations</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Privacy</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Terms</a></li>
         </ul>
       </div>
     </div>

diff --git a/site/src/assets/examples/product/index.astro b/site/src/assets/examples/product/index.astro
index bffc4152ea4f887fee0be0b5d5e5626274634698..0088675346bbb54a701008cb7788bef5eb8f21f3 100644 (file)
--- a/site/src/assets/examples/product/index.astro
+++ b/site/src/assets/examples/product/index.astro
@@ -148,39 +148,39 @@ export const extra_css = ['product.css']
     <div class="col-6 md:col">
       <h5>Features</h5>
       <ul class="list-unstyled text-small">
-        <li><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Random feature</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Team feature</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Another one</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Last time</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Cool stuff</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Random feature</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Team feature</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Stuff for developers</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Another one</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Last time</a></li>
       </ul>
     </div>
     <div class="col-6 md:col">
       <h5>Resources</h5>
       <ul class="list-unstyled text-small">
-        <li><a class="link-secondary text-decoration-none" href="#">Resource name</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Resource</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Another resource</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Final resource</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Resource name</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Resource</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Another resource</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Final resource</a></li>
       </ul>
     </div>
     <div class="col-6 md:col">
       <h5>Resources</h5>
       <ul class="list-unstyled text-small">
-        <li><a class="link-secondary text-decoration-none" href="#">Business</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Education</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Government</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Gaming</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Business</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Education</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Government</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Gaming</a></li>
       </ul>
     </div>
     <div class="col-6 md:col">
       <h5>About</h5>
       <ul class="list-unstyled text-small">
-        <li><a class="link-secondary text-decoration-none" href="#">Team</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Locations</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Team</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Locations</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Privacy</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Terms</a></li>
       </ul>
     </div>
   </div>

diff --git a/site/src/components/home/MastHead.astro b/site/src/components/home/MastHead.astro
index afeff6162ef18f7b3e9031b07a2e608b9308d8d2..776e0359ac910f56999a33ac6196a381b2c8295b 100644 (file)
--- a/site/src/components/home/MastHead.astro
+++ b/site/src/components/home/MastHead.astro
@@ -50,9 +50,9 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
       <p class="fg-2 mb-0">
         Currently <strong>v{getConfig().current_version}</strong>
         <span class="px-1">&middot;</span>
-        <a href={getVersionedDocsPath('getting-started/install')} class="link-secondary">Download</a>
+        <a href={getVersionedDocsPath('getting-started/install')} class="theme-secondary">Download</a>
         <span class="px-1">&middot;</span>
-        <a href="/docs/versions/" class="link-secondary text-nowrap">All releases</a>
+        <a href="/docs/versions/" class="theme-secondary text-nowrap">All releases</a>
       </p>
       <Ads />
     </div>

diff --git a/site/src/content/docs/components/navbar.mdx b/site/src/content/docs/components/navbar.mdx
index 46d3851d8835144047f83aad3b1a883f26900309..ca49695322fef5cb7f8207f6557b24b17fd1d539 100644 (file)
--- a/site/src/content/docs/components/navbar.mdx
+++ b/site/src/content/docs/components/navbar.mdx
@@ -246,7 +246,7 @@ Place various form controls and components within a navbar:
     <div class="container-fluid">
       <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
-        <button class="btn btn-outline-success" type="submit">Search</button>
+        <button class="btn-outline theme-success" type="submit">Search</button>
       </form>
     </div>
   </nav>`} />
@@ -258,7 +258,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi
       <a class="navbar-brand">Navbar</a>
       <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
-        <button class="btn btn-outline-success" type="submit">Search</button>
+        <button class="btn-outline theme-success" type="submit">Search</button>
       </form>
     </div>
   </nav>`} />
@@ -278,8 +278,8 @@ Various buttons are supported as part of these navbar forms, too. This is also a
 
 <Example code={`<nav class="navbar bg-1 fg-2">
     <form class="container-fluid justify-content-start">
-      <button class="btn btn-outline-success me-2" type="button">Main button</button>
-      <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
+      <button class="btn-outline theme-success me-2" type="button">Main button</button>
+      <button class="btn-outline theme-secondary btn-sm" type="button">Smaller button</button>
     </form>
   </nav>`} />
 
@@ -433,7 +433,7 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a
         </ul>
         <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
-          <button class="btn btn-outline theme-secondary" type="submit">Search</button>
+          <button class="btn-outline theme-secondary" type="submit">Search</button>
         </form>
       </div>
     </dialog>
@@ -468,7 +468,7 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a
         </ul>
         <form class="d-flex" role="search">
           <input class="form-control me-2" data-bs-theme="light" type="search" placeholder="Search" aria-label="Search"/>
-          <button class="btn btn-solid theme-inverse" type="submit">Search</button>
+          <button class="btn-solid theme-inverse" type="submit">Search</button>
         </form>
       </div>
     </dialog>
@@ -503,7 +503,7 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a
         </ul>
         <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
-          <button class="btn btn-outline-primary" type="submit">Search</button>
+          <button class="btn-outline theme-primary" type="submit">Search</button>
         </form>
       </div>
     </dialog>
@@ -645,7 +645,7 @@ With no `.navbar-brand` shown (hidden inside the drawer):
           </ul>
           <form class="d-flex" role="search">
             <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
-            <button class="btn btn-outline-success" type="submit">Search</button>
+            <button class="btn-outline theme-success" type="submit">Search</button>
           </form>
         </div>
       </dialog>
@@ -673,7 +673,7 @@ With a brand name shown on the left and toggler on the right:
           </ul>
           <form class="d-flex" role="search">
             <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
-            <button class="btn btn-outline-success" type="submit">Search</button>
+            <button class="btn-outline theme-success" type="submit">Search</button>
           </form>
         </div>
       </dialog>
@@ -701,7 +701,7 @@ With a toggler on the left and brand name on the right:
           </ul>
           <form class="d-flex" role="search">
             <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
-            <button class="btn btn-outline-success" type="submit">Search</button>
+            <button class="btn-outline theme-success" type="submit">Search</button>
           </form>
         </div>
       </dialog>

diff --git a/site/src/content/docs/components/spinner.mdx b/site/src/content/docs/components/spinner.mdx
index 5077b977e66d5930a27ee38f7eb7fa2d91257882..1c1bbd8db067bc9de6af4cbb46b081e1462b797e 100644 (file)
--- a/site/src/content/docs/components/spinner.mdx
+++ b/site/src/content/docs/components/spinner.mdx
@@ -82,7 +82,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
 
 #### Floats
 
-<Example code={`<div class="clearfix">
+<Example code={`<div class="d-flow-root">
     <div class="spinner-border float-end" role="status">
       <span class="visually-hidden">Loading...</span>
     </div>

diff --git a/site/src/content/docs/content/reboot.mdx b/site/src/content/docs/content/reboot.mdx
index 740629ff5d00adc2a32d4dc91a8b440ab9c344d7..8fa7d45c3517487e3b4bd81903c0e55b98f36b60 100644 (file)
--- a/site/src/content/docs/content/reboot.mdx
+++ b/site/src/content/docs/content/reboot.mdx
@@ -127,7 +127,7 @@ The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are
 
 <Example code={`<hr>
 
-  <div class="text-success">
+  <div class="fg-success">
     <hr>
   </div>
 

diff --git a/site/src/content/docs/getting-started/accessibility.mdx b/site/src/content/docs/getting-started/accessibility.mdx
index 4c2351c2f61b6e482dc3244b9da7aa1b4450ce12..a8dfe7722cc120bb46542143400ed979f8032c44 100644 (file)
--- a/site/src/content/docs/getting-started/accessibility.mdx
+++ b/site/src/content/docs/getting-started/accessibility.mdx
@@ -29,7 +29,7 @@ Some combinations of colors that currently make up Bootstrap’s default palette
 Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the `.visually-hidden` class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.
 
 ```html
-<p class="text-danger">
+<p class="fg-danger">
   <span class="visually-hidden">Danger: </span>
   This action is not reversible
 </p>

diff --git a/site/src/content/docs/layout/columns.mdx b/site/src/content/docs/layout/columns.mdx
index e32578a7af5b92e831976021d1718893236e274a..e1f755a6820cdb973828020b4eaff3975be49b44 100644 (file)
--- a/site/src/content/docs/layout/columns.mdx
+++ b/site/src/content/docs/layout/columns.mdx
@@ -311,7 +311,7 @@ The classes can be used together with utilities to create responsive floated ima
     <Placeholder width="100%" height="210" class="md:col-6 md:float-end mb-3 md:ms-3" text="Responsive floated image" />
 
     <p>
-      A paragraph of placeholder text. We’re using it here to show the use of the clearfix class. We’re adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
+      A paragraph of placeholder text. We’re using it here to show the use of the d-flow-root utility. We’re adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
     </p>
 
     <p>

diff --git a/site/src/content/docs/utilities/object-fit.mdx b/site/src/content/docs/utilities/object-fit.mdx
index 0b698960bb1117ee8548ae1a52a4612b836bbdf7..48658b19d567a2a75de9cc40a94bcc1953e1921f 100644 (file)
--- a/site/src/content/docs/utilities/object-fit.mdx
+++ b/site/src/content/docs/utilities/object-fit.mdx
@@ -30,17 +30,17 @@ Add the `object-fit-{value}` class to the [replaced element](https://developer.m
 
 ## Responsive
 
-Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `2xl`. Classes can be combined for various effects as you need.
+Responsive variations also exist for each `object-fit` value using the format `.{breakpoint}:object-fit-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `2xl`. Classes can be combined for various effects as you need.
 
-<Example class="d-flex overflow-auto" code={`<Placeholder width="140" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" />
-<Placeholder width="140" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" />
-<Placeholder width="140" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" />
-<Placeholder width="140" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" />
-<Placeholder width="140" height="80" class="object-fit-2xl-contain border rounded" text="Contain on 2xl" markup="img" />`} />
+<Example class="d-flex overflow-auto" code={`<Placeholder width="140" height="80" class="sm:object-fit-contain border rounded" text="Contain on sm" markup="img" />
+<Placeholder width="140" height="80" class="md:object-fit-contain border rounded" text="Contain on md" markup="img" />
+<Placeholder width="140" height="80" class="lg:object-fit-contain border rounded" text="Contain on lg" markup="img" />
+<Placeholder width="140" height="80" class="xl:object-fit-contain border rounded" text="Contain on xl" markup="img" />
+<Placeholder width="140" height="80" class="2xl:object-fit-contain border rounded" text="Contain on 2xl" markup="img" />`} />
 
 ## Video
 
-The `.object-fit-{value}` and responsive `.object-fit-{breakpoint}-{value}` utilities also work on `<video>` elements.
+The `.object-fit-{value}` and responsive `.{breakpoint}:object-fit-{value}` utilities also work on `<video>` elements.
 
 ```html
 <video src="..." class="object-fit-contain" autoplay></video>

diff --git a/site/src/layouts/partials/ExamplesMain.astro b/site/src/layouts/partials/ExamplesMain.astro
index b7566559345d246c98a8958c4ad75c7db22a69f7..7c6ac6a3c1d684b8aba8b350e57003575bece48c 100644 (file)
--- a/site/src/layouts/partials/ExamplesMain.astro
+++ b/site/src/layouts/partials/ExamplesMain.astro
@@ -34,7 +34,7 @@ import { getSlug } from '@libs/utils'
                     <p class="fg-2">{example.description}</p>
                     <p>
                       <a
-                        class="icon-link small link-secondary link-offset-1"
+                        class="icon-link small theme-secondary link-offset-1"
                         href={`https://stackblitz.com/github/twbs${example.url}?file=${
                           example.indexPath ? example.indexPath : 'index.html'
                         }`}

diff --git a/site/src/pages/docs/versions.astro b/site/src/pages/docs/versions.astro
index da7ab4ebda402e54f42ef423a7058dc4203fcbba..1ef675b59eb692533d2c5fbf1bd6c6ca8c1d6120 100644 (file)
--- a/site/src/pages/docs/versions.astro
+++ b/site/src/pages/docs/versions.astro
@@ -43,8 +43,8 @@ function getVersionsSortedDesc<TKey extends string, TVersions extends Record<TKe
                       href={`${docsVersion.baseurl}/${version}/`}
                     >
                       {version}
-                      {isCurrentVersion && <span class="badge text-bg-primary">Latest</span>}
-                      {isAlpha && <span class="badge text-bg-warning">Alpha</span>}
+                      {isCurrentVersion && <span class="badge theme-primary">Latest</span>}
+                      {isAlpha && <span class="badge theme-warning">Alpha</span>}
                     </a>
                   )
                 })}