v6: docs updates

various minor fixes

Author: coliff

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>

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

@@ -18,7 +18,7 @@ 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="fg-primary">Your cart</span>
           <span class="badge bg-primary rounded-pill">3</span>
         </h4>
         <ul class="list-group mb-3">
@@ -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>

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>

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>

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