Spinners & Badges

Author: coliff

site/src/assets/examples/cheatsheet/index.astro

@@ -688,18 +688,18 @@ export const body_class = 'bg-body-tertiary'
 
       <div>
         <Example showMarkup={false} code={`
-        <p class="h1">Example heading <span class="badge bg-primary">New</span></p>
-        <p class="h2">Example heading <span class="badge bg-secondary">New</span></p>
-        <p class="h3">Example heading <span class="badge bg-success">New</span></p>
-        <p class="h4">Example heading <span class="badge bg-danger">New</span></p>
-        <p class="h5">Example heading <span class="badge text-bg-warning">New</span></p>
-        <p class="h6">Example heading <span class="badge text-bg-info">New</span></p>
-        <p class="h6">Example heading <span class="badge text-bg-light">New</span></p>
-        <p class="h6">Example heading <span class="badge bg-dark">New</span></p>
+        <p class="h1">Example heading <span class="badge theme-primary">New</span></p>
+        <p class="h2">Example heading <span class="badge theme-secondary">New</span></p>
+        <p class="h3">Example heading <span class="badge theme-success">New</span></p>
+        <p class="h4">Example heading <span class="badge theme-danger">New</span></p>
+        <p class="h5">Example heading <span class="badge theme-warning">New</span></p>
+        <p class="h6">Example heading <span class="badge theme-info">New</span></p>
+        <p class="h6">Example heading <span class="badge theme-inverse">New</span></p>
+        <p class="h6">Example heading <span class="badge theme-secondary">New</span></p>
         `} />
 
         <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
-        <span class="badge rounded-pill ${(themeColor.name === 'light' || themeColor.name === 'warning' || themeColor.name === 'info') ? 'text-' : ''}bg-${themeColor.name}">${themeColor.title}</span>
+        <span class="badge ${(themeColor.name === 'light' || themeColor.name === 'warning' || themeColor.name === 'info') ? 'text-' : ''}bg-${themeColor.name}">${themeColor.title}</span>
         `)} />
       </div>
     </article>
@@ -714,7 +714,7 @@ export const body_class = 'bg-body-tertiary'
         <nav aria-label="breadcrumb">
           <ol class="breadcrumb">
             <li class="breadcrumb-item"><a href="#">Home</a></li>
-            <li class="breadcrumb-item"><a href="#">Library</a></li>
+            <li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Library</a></li>
             <li class="breadcrumb-item active" aria-current="page">Data</li>
           </ol>
         </nav>
@@ -1445,13 +1445,13 @@ export const body_class = 'bg-body-tertiary'
 
       <div>
         <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
-        <div class="spinner-border text-${themeColor.name}" role="status">
+        <div class="spinner-border fg-${themeColor.name}" role="status">
           <span class="visually-hidden">Loading...</span>
         </div>
         `)} />
 
         <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
-        <div class="spinner-grow text-${themeColor.name}" role="status">
+        <div class="spinner-grow fg-${themeColor.name}" role="status">
           <span class="visually-hidden">Loading...</span>
         </div>
         `)} />