Deprecate the Sass var and remove any occurence of the .text-muted (#37890)

site/layouts/partials/home/components-utilities.html

@@ -3,7 +3,7 @@
     <div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);">
       <svg class="bi fs-1"><use xlink:href="#menu-button-wide-fill"></use></svg>
     </div>
-    <svg class="bi me-2 fs-2 text-muted"><use xlink:href="#plus"></use></svg>
+    <svg class="bi me-2 fs-2 text-body-secondary"><use xlink:href="#plus"></use></svg>
     <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);">
       <svg class="bi fs-1"><use xlink:href="#braces-asterisk"></use></svg>
     </div>

site/layouts/partials/home/get-started.html

@@ -16,7 +16,7 @@
 
 <section class="row g-3 g-md-5 mb-5 pb-5 justify-content-center">
   <div class="col-lg-6 py-lg-4 pe-lg-5">
-    <svg class="bi mb-2 fs-2 text-muted"><use xlink:href="#box-seam"></use></svg>
+    <svg class="bi mb-2 fs-2 text-body-secondary"><use xlink:href="#box-seam"></use></svg>
     <h3 class="fw-semibold">Install via package manager</h3>
     <p class="pe-lg-5">
       Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also <a href="https://github.com/twbs/examples/">use any demo from our Examples repo</a> to quickly jumpstart Bootstrap projects.
@@ -28,7 +28,7 @@
     </p>
   </div>
   <div class="col-lg-6 py-lg-4 ps-lg-5 border-lg-start">
-    <svg class="bi mb-2 fs-2 text-muted"><use xlink:href="#globe2"></use></svg>
+    <svg class="bi mb-2 fs-2 text-body-secondary"><use xlink:href="#globe2"></use></svg>
     <h3 class="fw-semibold">Include via CDN</h3>
     <p class="pe-lg-5">
       When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/package/npm/bootstrap">jsDelivr</a>. See it in action with our simple <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#quick-start">quick start</a>, or <a href="/docs/{{ .Site.Params.docs_version }}/examples/">browse the examples</a> to jumpstart your next project. You can also choose to include Popper and our JS <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#separate">separately</a>.
@@ -43,15 +43,15 @@
     <div class="d-flex flex-wrap align-items-center justify-content-center gap-4 mt-4">
       <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack">
         <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/webpack.svg" alt="" width="72" height="72" loading="lazy">
-        <span class="text-muted">Webpack</span>
+        <span class="text-body-secondary">Webpack</span>
       </a>
       <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel">
         <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/parcel.png" alt="" width="72" height="72" loading="lazy">
-        <span class="text-muted">Parcel</span>
+        <span class="text-body-secondary">Parcel</span>
       </a>
       <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite">
         <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/vite.svg" alt="" width="72" height="72" loading="lazy">
-        <span class="text-muted">Vite</span>
+        <span class="text-body-secondary">Vite</span>
       </a>
     </div>
   </div>

site/layouts/partials/home/masthead.html

@@ -3,7 +3,7 @@
     <div class="col-md-8 mx-auto text-center">
       <a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://blog.getbootstrap.com/">
         <strong class="d-sm-inline-block p-2 me-2 mb-2 mb-lg-0 rounded-3 masthead-notice">New in v5.3</strong>
-        <span class="text-muted">Color mode support, expanded color palette, and more!</span>
+        <span class="text-body-secondary">Color mode support, expanded color palette, and more!</span>
       </a>
       <img src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="d-none d-sm-block mx-auto mb-3">
       <h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstrap</h1>
@@ -19,7 +19,7 @@
           Read the docs
         </a>
       </div>
-      <p class="text-muted mb-0">
+      <p class="text-body-secondary mb-0">
         Currently <strong>v{{ .Site.Params.current_version }}</strong>
         <span class="px-1">&middot;</span>
         <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="link-secondary">Download</a>

site/layouts/partials/home/plugins.html

@@ -54,7 +54,7 @@
           <div class="col-sm-6 mb-2">
             <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="{{ $href }}">
               <h4 class="mb-0 fs-5 fw-semibold">{{ $plugin.name }}</h4>
-              <small class="text-muted">{{ $plugin.description }}</small>
+              <small class="text-body-secondary">{{ $plugin.description }}</small>
             </a>
           </div>
         {{- end }}

site/layouts/shortcodes/example.html

@@ -29,7 +29,7 @@
   {{- if eq $show_markup true -}}
     {{- if eq $show_preview true -}}
       <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
-        <small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small>
+        <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
         <div class="d-flex ms-auto">
           <button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
             <svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>