Examples: remove unused `.text-small` and replace deprecated utilities (#42455)

Update multiple example pages to new utility naming and tokens for consistency. Replaced legacy text-*/display-*/bg-* classes with fg-*/fs-* and bg-subtle-* variants, adjusted spacing and radii (p-5 → p-9, rounded-3 → rounded-5), removed redundant text-small classes, and applied small/fg-white tweaks where appropriate. Files changed: checkout, headers, jumbotron, pricing, product, and sidebars examples to align markup with the updated design system.

---------

Co-authored-by: Julien Déramond <juderamond@gmail.com>

diff --git a/site/src/assets/examples/checkout/index.astro b/site/src/assets/examples/checkout/index.astro
index ea1893147b5ea5d138d7eabbf9728226e9c8e2f6..69e7ab70371e9cc6ac25e658de40dc69b2296301 100644 (file)
--- a/site/src/assets/examples/checkout/index.astro
+++ b/site/src/assets/examples/checkout/index.astro
@@ -220,7 +220,7 @@ export const body_class = 'bg-body-tertiary'
     </div>
   </main>
 
-  <footer class="my-5 pt-5 fg-2 text-center text-small">
+  <footer class="my-5 pt-5 fg-2 text-center small">
     <p class="mb-1">&copy; 2017–{new Date().getFullYear()} Company Name</p>
     <ul class="list-inline">
       <li class="list-inline-item"><a href="#">Privacy</a></li>

diff --git a/site/src/assets/examples/headers/headers.css b/site/src/assets/examples/headers/headers.css
index 511340b37728254a7c698c3e0433bccf9d4edf08..42753558900a4d94d412568ab632fadaefad222e 100644 (file)
--- a/site/src/assets/examples/headers/headers.css
+++ b/site/src/assets/examples/headers/headers.css
@@ -5,11 +5,6 @@
   border-color: #fff;
   box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
 }
-
-.text-small {
-  font-size: 85%;
-}
-
 .menu-toggle:not(:focus) {
   outline: 0;
 }

diff --git a/site/src/assets/examples/headers/index.astro b/site/src/assets/examples/headers/index.astro
index 8d79a826785d4d4d0d631c9f5fd75af592ca8f08..ebf5b3a06cc6cf28e0ec11c2ea6d83878c79bcac 100644 (file)
--- a/site/src/assets/examples/headers/index.astro
+++ b/site/src/assets/examples/headers/index.astro
@@ -139,7 +139,7 @@ export const extra_css = ['headers.css']
           <a class="d-block link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
             <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
           </a>
-          <div class="menu text-small">
+          <div class="menu">
             <a class="menu-item" href="#">New project...</a>
             <a class="menu-item" href="#">Settings</a>
             <a class="menu-item" href="#">Profile</a>
@@ -159,7 +159,7 @@ export const extra_css = ['headers.css']
         <a class="d-flex align-items-center lg:col-4 mb-2 lg:mb-0 link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false" aria-label="Bootstrap menu">
           <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
         </a>
-        <div class="menu text-small shadow">
+        <div class="menu shadow">
           <a class="menu-item active" href="#" aria-current="page">Overview</a>
           <a class="menu-item" href="#">Inventory</a>
           <a class="menu-item" href="#">Customers</a>
@@ -179,7 +179,7 @@ export const extra_css = ['headers.css']
           <a class="d-block link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
             <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
           </a>
-          <div class="menu text-small shadow">
+          <div class="menu shadow">
             <a class="menu-item" href="#">New project...</a>
             <a class="menu-item" href="#">Settings</a>
             <a class="menu-item" href="#">Profile</a>
@@ -241,7 +241,7 @@ export const extra_css = ['headers.css']
             <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
           </a>
 
-          <ul class="nav col-12 lg:col-auto my-2 justify-content-center md:my-0 text-small">
+          <ul class="nav col-12 lg:col-auto my-2 justify-content-center md:my-0">
             <li>
               <a href="#" class="nav-link fg-secondary flex-column">
                 <svg class="bi d-block mx-auto" width="24" height="24" aria-hidden="true"><use href="#home"/></svg>

diff --git a/site/src/assets/examples/jumbotron/index.astro b/site/src/assets/examples/jumbotron/index.astro
index b1618752a8d53a3007184bdc4046b284792daccf..a832e087ed49f378a49f9d059330e6b290610558 100644 (file)
--- a/site/src/assets/examples/jumbotron/index.astro
+++ b/site/src/assets/examples/jumbotron/index.astro
@@ -5,13 +5,13 @@ export const title = 'Jumbotron example'
 <main>
   <div class="container py-4">
     <header class="pb-3 mb-4 border-bottom">
-      <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
+      <a href="/" class="d-flex align-items-center fg-emphasis-secondary 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-xl">Jumbotron example</span>
       </a>
     </header>
 
-    <div class="p-5 mb-4 bg-body-tertiary rounded-3">
+    <div class="p-9 mb-4 bg-subtle-secondary rounded-5">
       <div class="container-fluid py-5">
         <h1 class="display-5 fw-bold">Custom jumbotron</h1>
         <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>
@@ -21,14 +21,14 @@ export const title = 'Jumbotron example'
 
     <div class="row md:align-items-stretch">
       <div class="md:col-6">
-        <div class="h-100 p-5 text-bg-dark rounded-3">
+        <div class="h-100 p-9 bg-black fg-white rounded-5" data-bs-theme="dark">
           <h2>Change the background</h2>
-          <p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p>
-          <button class="btn-outline theme-secondary" type="button">Example button</button>
+          <p>Swap the background-color utility and add a `.fg-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p>
+          <button class="btn-outline theme-secondary fg-white" type="button">Example button</button>
         </div>
       </div>
       <div class="md:col-6">
-        <div class="h-100 p-5 bg-body-tertiary border rounded-3">
+        <div class="h-100 p-9 bg-body-tertiary border rounded-5">
           <h2>Add borders</h2>
           <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
           <button class="btn-outline theme-secondary" type="button">Example button</button>

diff --git a/site/src/assets/examples/pricing/index.astro b/site/src/assets/examples/pricing/index.astro
index 4d73d36956228bdb0bbe49d788857e5b266e872c..6a1c8b064d71dd20d652e978ccc4ddf91677aef7 100644 (file)
--- a/site/src/assets/examples/pricing/index.astro
+++ b/site/src/assets/examples/pricing/index.astro
@@ -154,7 +154,7 @@ export const extra_css = ['pricing.css']
       </div>
       <div class="col-6 md:col">
         <h5>Features</h5>
-        <ul class="list-unstyled text-small">
+        <ul class="list-unstyled">
           <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>
@@ -165,7 +165,7 @@ export const extra_css = ['pricing.css']
       </div>
       <div class="col-6 md:col">
         <h5>Resources</h5>
-        <ul class="list-unstyled text-small">
+        <ul class="list-unstyled">
           <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>
@@ -174,7 +174,7 @@ export const extra_css = ['pricing.css']
       </div>
       <div class="col-6 md:col">
         <h5>About</h5>
-        <ul class="list-unstyled text-small">
+        <ul class="list-unstyled">
           <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>

diff --git a/site/src/assets/examples/product/index.astro b/site/src/assets/examples/product/index.astro
index a7da1aa77548c2670a6743b6b5962a28f33b74c1..a870b8f2fef7299497d82fe45dd683cb73e50080 100644 (file)
--- a/site/src/assets/examples/product/index.astro
+++ b/site/src/assets/examples/product/index.astro
@@ -51,10 +51,10 @@ export const extra_css = ['product.css']
 </nav>
 
 <main>
-  <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 fg-secondary mb-3">Build anything you want with Aperture</h3>
+  <div class="position-relative overflow-hidden p-5 md:p-9 md:m-3 text-center bg-subtle-secondary">
+    <div class="md:col-6 lg:p-9 mx-auto my-9">
+      <h1 class="fs-5xl fw-bold">Designed for engineers</h1>
+      <h3 class="fw-normal fg-secondary mb-3 text-pretty">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
@@ -71,50 +71,50 @@ export const extra_css = ['product.css']
   </div>
 
   <div class="md:d-flex md:flex-equal w-100 md:my-3 md:ps-3">
-    <div class="text-bg-dark md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
-      <div class="my-3 py-3">
-        <h2 class="display-5">Another headline</h2>
+    <div class="bg-black fg-white md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
+      <div class="my-5 py-5">
+        <h2 class="fs-3xl fw-light">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
-      <div class="bg-body-tertiary shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+      <div class="bg-subtle-secondary shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
-    <div class="bg-body-tertiary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
-      <div class="my-3 p-3">
-        <h2 class="display-5">Another headline</h2>
+    <div class="bg-subtle-secondary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
+      <div class="my-5 p-5">
+        <h2 class="fs-3xl fw-light">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
-      <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+      <div class="bg-black shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
   </div>
 
   <div class="md:d-flex md:flex-equal w-100 md:my-3 md:ps-3">
-    <div class="bg-body-tertiary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
-      <div class="my-3 p-3">
-        <h2 class="display-5">Another headline</h2>
+    <div class="bg-subtle-secondary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
+      <div class="my-5 p-5">
+        <h2 class="fs-3xl fw-light">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
-      <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+      <div class="bg-black shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
     <div class="theme-primary theme-contrast md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
-      <div class="my-3 py-3">
-        <h2 class="display-5">Another headline</h2>
+      <div class="my-5 py-5">
+        <h2 class="fs-3xl fw-light">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
-      <div class="bg-body-tertiary shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+      <div class="bg-subtle-secondary shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
   </div>
 
   <div class="md:d-flex md:flex-equal w-100 md:my-3 md:ps-3">
-    <div class="bg-body-tertiary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
-      <div class="my-3 p-3">
-        <h2 class="display-5">Another headline</h2>
+    <div class="bg-subtle-secondary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
+      <div class="my-5 p-5">
+        <h2 class="fs-3xl fw-light">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
       <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
-    <div class="bg-body-tertiary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
-      <div class="my-3 py-3">
-        <h2 class="display-5">Another headline</h2>
+    <div class="bg-subtle-secondary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
+      <div class="my-5 py-5">
+        <h2 class="fs-3xl fw-light">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
       <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
@@ -122,16 +122,16 @@ export const extra_css = ['product.css']
   </div>
 
   <div class="md:d-flex md:flex-equal w-100 md:my-3 md:ps-3">
-    <div class="bg-body-tertiary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
-      <div class="my-3 p-3">
-        <h2 class="display-5">Another headline</h2>
+    <div class="bg-subtle-secondary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
+      <div class="my-5 p-5">
+        <h2 class="fs-3xl fw-light">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
       <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
-    <div class="bg-body-tertiary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
-      <div class="my-3 py-3">
-        <h2 class="display-5">Another headline</h2>
+    <div class="bg-subtle-secondary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
+      <div class="my-5 py-5">
+        <h2 class="fs-3xl fw-light">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
       <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
@@ -147,7 +147,7 @@ export const extra_css = ['product.css']
     </div>
     <div class="col-6 md:col">
       <h5>Features</h5>
-      <ul class="list-unstyled text-small">
+      <ul class="list-unstyled">
         <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>
@@ -158,7 +158,7 @@ export const extra_css = ['product.css']
     </div>
     <div class="col-6 md:col">
       <h5>Resources</h5>
-      <ul class="list-unstyled text-small">
+      <ul class="list-unstyled">
         <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>
@@ -167,7 +167,7 @@ export const extra_css = ['product.css']
     </div>
     <div class="col-6 md:col">
       <h5>Resources</h5>
-      <ul class="list-unstyled text-small">
+      <ul class="list-unstyled">
         <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>
@@ -176,7 +176,7 @@ export const extra_css = ['product.css']
     </div>
     <div class="col-6 md:col">
       <h5>About</h5>
-      <ul class="list-unstyled text-small">
+      <ul class="list-unstyled">
         <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>

diff --git a/site/src/assets/examples/sidebars/index.astro b/site/src/assets/examples/sidebars/index.astro
index 8fc02bf18a1323225ebf96e6f99ba48fb5b4db34..01fe0d310d61780daa4b92a562829bb6a9c86356 100644 (file)
--- a/site/src/assets/examples/sidebars/index.astro
+++ b/site/src/assets/examples/sidebars/index.astro
@@ -75,7 +75,7 @@ export const extra_js = [{src: 'sidebars.js'}]
         <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
         <strong>mdo</strong>
       </a>
-      <div class="menu text-small shadow">
+      <div class="menu shadow">
         <a class="menu-item" href="#">New project...</a>
         <a class="menu-item" href="#">Settings</a>
         <a class="menu-item" href="#">Profile</a>
@@ -131,7 +131,7 @@ export const extra_js = [{src: 'sidebars.js'}]
         <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
         <strong>mdo</strong>
       </a>
-      <div class="menu text-small shadow">
+      <div class="menu shadow">
         <a class="menu-item" href="#">New project...</a>
         <a class="menu-item" href="#">Settings</a>
         <a class="menu-item" href="#">Profile</a>
@@ -179,7 +179,7 @@ export const extra_js = [{src: 'sidebars.js'}]
       <a class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
         <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
       </a>
-      <div class="menu text-small shadow">
+      <div class="menu shadow">
         <a class="menu-item" href="#">New project...</a>
         <a class="menu-item" href="#">Settings</a>
         <a class="menu-item" href="#">Profile</a>