Docs: Deprecate the Sass var and remove any occurence of the .text-muted

js/tests/visual/toast.html

@@ -41,7 +41,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
         <div class="toast-header">
           <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
           <strong class="me-auto">Bootstrap</strong>
-          <small class="text-muted">2 seconds ago</small>
+          <small class="text-body-secondary">2 seconds ago</small>
           <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
         </div>
         <div class="toast-body">

js/tests/visual/tooltip.html

@@ -20,7 +20,7 @@
     <div class="container">
       <h1>Tooltip <small>Bootstrap Visual Test</small></h1>
 
-      <p class="text-muted">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
+      <p class="text-body-secondary">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
 
       <hr>
 

scss/_utilities.scss

@@ -583,7 +583,7 @@ $utilities: map-merge(
       values: map-merge(
         $utilities-text-colors,
         (
-          "muted": $text-muted, // deprecated
+          "muted": var(--#{$prefix}secondary-color), // deprecated
           "black-50": rgba($black, .5), // deprecated
           "white-50": rgba($white, .5), // deprecated
           "body-secondary": var(--#{$prefix}secondary-color),

scss/_variables.scss

@@ -667,7 +667,9 @@ $small-font-size:             .875em !default;
 
 $sub-sup-font-size:           .75em !default;
 
-$text-muted:                  var(--#{$prefix}secondary-color) !default;
+// fusv-disable
+$text-muted:                  var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
+// fusv-enable
 
 $initialism-font-size:        $small-font-size !default;
 
@@ -740,7 +742,7 @@ $table-striped-columns-order: even !default;
 
 $table-group-separator-color: currentcolor !default;
 
-$table-caption-color:         $text-muted !default;
+$table-caption-color:         var(--#{$prefix}secondary-color) !default;
 
 $table-bg-scale:              -80% !default;
 // scss-docs-end table-variables
@@ -846,7 +848,7 @@ $form-text-margin-top:                  .25rem !default;
 $form-text-font-size:                   $small-font-size !default;
 $form-text-font-style:                  null !default;
 $form-text-font-weight:                 null !default;
-$form-text-color:                       $text-muted !default;
+$form-text-color:                       var(--#{$prefix}secondary-color) !default;
 // scss-docs-end form-text-variables
 
 // scss-docs-start form-label-variables

site/assets/scss/_search.scss

@@ -44,7 +44,7 @@
 }
 
 .DocSearch-Container {
-  --docsearch-muted-color: #{$text-muted};
+  --docsearch-muted-color: var(--bs-secondary-color);
   --docsearch-hit-shadow: none;
 
   z-index: 2000; // Make sure to be over all components showcased in the documentation

site/content/docs/5.3/about/brand.md

@@ -37,7 +37,7 @@ Bootstrap should always be referred to as just **Bootstrap**. No capital _s_.
     <strong class="text-success">Correct</strong>
   </div>
   <div class="bd-brand-item w-100 px-2 py-5">
-    <div class="h3 text-muted">BootStrap</div>
+    <div class="h3 text-body-secondary">BootStrap</div>
     <strong class="text-danger">Incorrect</strong>
   </div>
 </div>

site/content/docs/5.3/components/card.md

@@ -53,7 +53,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
 <div class="card" style="width: 18rem;">
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
-    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+    <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
     <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>
     <a href="#" class="card-link">Card link</a>
     <a href="#" class="card-link">Another link</a>
@@ -191,7 +191,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
-  <div class="card-footer text-muted">
+  <div class="card-footer text-body-secondary">
     2 days ago
   </div>
 </div>
@@ -358,14 +358,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
   </div>
 </div>
 <div class="card">
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
   </div>
   {{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
 </div>
@@ -404,7 +404,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
       </div>
     </div>
   </div>
@@ -487,23 +487,23 @@ Use card groups to render cards as a single, attached element with equal width a
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
     </div>
   </div>
   <div class="card">
     {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
     </div>
   </div>
   <div class="card">
     {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
     </div>
   </div>
 </div>
@@ -520,7 +520,7 @@ When using card groups with footers, their content will automatically line up.
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
     </div>
     <div class="card-footer">
-      <small class="text-muted">Last updated 3 mins ago</small>
+      <small class="text-body-secondary">Last updated 3 mins ago</small>
     </div>
   </div>
   <div class="card">
@@ -530,7 +530,7 @@ When using card groups with footers, their content will automatically line up.
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
     </div>
     <div class="card-footer">
-      <small class="text-muted">Last updated 3 mins ago</small>
+      <small class="text-body-secondary">Last updated 3 mins ago</small>
     </div>
   </div>
   <div class="card">
@@ -540,7 +540,7 @@ When using card groups with footers, their content will automatically line up.
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
     </div>
     <div class="card-footer">
-      <small class="text-muted">Last updated 3 mins ago</small>
+      <small class="text-body-secondary">Last updated 3 mins ago</small>
     </div>
   </div>
 </div>
@@ -689,7 +689,7 @@ Just like with card groups, card footers will automatically line up.
         <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
       </div>
       <div class="card-footer">
-        <small class="text-muted">Last updated 3 mins ago</small>
+        <small class="text-body-secondary">Last updated 3 mins ago</small>
       </div>
     </div>
   </div>
@@ -701,7 +701,7 @@ Just like with card groups, card footers will automatically line up.
         <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
       </div>
       <div class="card-footer">
-        <small class="text-muted">Last updated 3 mins ago</small>
+        <small class="text-body-secondary">Last updated 3 mins ago</small>
       </div>
     </div>
   </div>
@@ -713,7 +713,7 @@ Just like with card groups, card footers will automatically line up.
         <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
       </div>
       <div class="card-footer">
-        <small class="text-muted">Last updated 3 mins ago</small>
+        <small class="text-body-secondary">Last updated 3 mins ago</small>
       </div>
     </div>
   </div>

site/content/docs/5.3/components/dropdowns.md

@@ -841,7 +841,7 @@ Separate groups of related menu items with a divider.
 Place any freeform text within a dropdown menu with text and use [spacing utilities]({{< docsref "/utilities/spacing" >}}). Note that you'll likely need additional sizing styles to constrain the menu width.
 
 {{< example >}}
-<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
+<div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
   <p>
     Some example text that's free-flowing within the dropdown menu.
   </p>

site/content/docs/5.3/components/list-group.md

@@ -230,18 +230,18 @@ Add nearly any HTML within, even for linked list groups like the one below, with
   <a href="#" class="list-group-item list-group-item-action">
     <div class="d-flex w-100 justify-content-between">
       <h5 class="mb-1">List group item heading</h5>
-      <small class="text-muted">3 days ago</small>
+      <small class="text-body-secondary">3 days ago</small>
     </div>
     <p class="mb-1">Some placeholder content in a paragraph.</p>
-    <small class="text-muted">And some muted small print.</small>
+    <small class="text-body-secondary">And some muted small print.</small>
   </a>
   <a href="#" class="list-group-item list-group-item-action">
     <div class="d-flex w-100 justify-content-between">
       <h5 class="mb-1">List group item heading</h5>
-      <small class="text-muted">3 days ago</small>
+      <small class="text-body-secondary">3 days ago</small>
     </div>
     <p class="mb-1">Some placeholder content in a paragraph.</p>
-    <small class="text-muted">And some muted small print.</small>
+    <small class="text-body-secondary">And some muted small print.</small>
   </a>
 </div>
 {{< /example >}}

site/content/docs/5.3/components/modal.md

@@ -576,7 +576,7 @@ Modals have three optional sizes, available via modifier classes to be placed on
 | Size | Class | Modal max-width
 | --- | --- | --- |
 | Small | `.modal-sm` | `300px` |
-| Default | <span class="text-muted">None</span> | `500px` |
+| Default | <span class="text-body-secondary">None</span> | `500px` |
 | Large | `.modal-lg` | `800px` |
 | Extra large | `.modal-xl` | `1140px` |
 {{< /bs-table >}}

site/content/docs/5.3/components/navbar.md

@@ -658,7 +658,7 @@ Sometimes you want to use the collapse plugin to trigger a container element for
 <div class="collapse" id="navbarToggleExternalContent">
   <div class="bg-dark p-4">
     <h5 class="text-white h4">Collapsed content</h5>
-    <span class="text-muted">Toggleable via the navbar brand.</span>
+    <span class="text-body-secondary">Toggleable via the navbar brand.</span>
   </div>
 </div>
 <nav class="navbar navbar-dark bg-dark">

site/content/docs/5.3/components/toasts.md

@@ -108,7 +108,7 @@ Toasts are slightly translucent to blend in with what's below them.
   <div class="toast-header">
     {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
     <strong class="me-auto">Bootstrap</strong>
-    <small class="text-muted">11 mins ago</small>
+    <small class="text-body-secondary">11 mins ago</small>
     <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
   </div>
   <div class="toast-body">
@@ -127,7 +127,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
     <div class="toast-header">
       {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
       <strong class="me-auto">Bootstrap</strong>
-      <small class="text-muted">just now</small>
+      <small class="text-body-secondary">just now</small>
       <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body">
@@ -139,7 +139,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
     <div class="toast-header">
       {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
       <strong class="me-auto">Bootstrap</strong>
-      <small class="text-muted">2 seconds ago</small>
+      <small class="text-body-secondary">2 seconds ago</small>
       <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body">
@@ -246,7 +246,7 @@ For systems that generate more notifications, consider using a wrapping element
       <div class="toast-header">
         {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
         <strong class="me-auto">Bootstrap</strong>
-        <small class="text-muted">just now</small>
+        <small class="text-body-secondary">just now</small>
         <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
       </div>
       <div class="toast-body">
@@ -258,7 +258,7 @@ For systems that generate more notifications, consider using a wrapping element
       <div class="toast-header">
         {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
         <strong class="me-auto">Bootstrap</strong>
-        <small class="text-muted">2 seconds ago</small>
+        <small class="text-body-secondary">2 seconds ago</small>
         <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
       </div>
       <div class="toast-body">

site/content/docs/5.3/content/typography.md

@@ -60,7 +60,7 @@ Use the included utility classes to recreate the small secondary heading text fr
 {{< example >}}
 <h3>
   Fancy display heading
-  <small class="text-muted">With faded secondary text</small>
+  <small class="text-body-secondary">With faded secondary text</small>
 </h3>
 {{< /example >}}
 

site/content/docs/5.3/examples/_index.md

@@ -30,7 +30,7 @@ aliases: "/examples/"
                 {{ $example.name }}
               </a>
             </h3>
-            <p class="text-muted">{{ $example.description }}</p>
+            <p class="text-body-secondary">{{ $example.description }}</p>
             <p>
               <a class="icon-link small link-secondary link-offset-1" href="https://stackblitz.com/github/twbs{{ $example.url }}?file=index.html" target="_blank">
                 <svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
@@ -52,7 +52,7 @@ aliases: "/examples/"
               {{ $example.name }}
             </h3>
           </a>
-          <p class="text-muted">{{ $example.description }}</p>
+          <p class="text-body-secondary">{{ $example.description }}</p>
         </div>
       {{ end }}
     {{ if (eq (add $i 1) $len) }}</div>{{ end }}