Update CSS class from `text-muted` to `text-secondary` for better Bootstrap compatibility (#1595)

.changeset/gorgeous-windows-study.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Update CSS class from `text-muted` to `text-secondary` for better Bootstrap compatibility

docs/components/alerts.mdx

@@ -11,26 +11,26 @@ Depending on the information you need to convey, you can use one of the followin
 ```html example
 <div class="alert alert-success" role="alert">
   <h4 class="alert-title">Wow! Everything worked!</h4>
-  <div class="text-muted">Your account has been saved!</div>
+  <div class="text-secondary">Your account has been saved!</div>
 </div>
 <div class="alert alert-info" role="alert">
   <h4 class="alert-title">Did you know?</h4>
-  <div class="text-muted">Here is something that you might like to know.</div>
+  <div class="text-secondary">Here is something that you might like to know.</div>
 </div>
 <div class="alert alert-warning" role="alert">
   <h4 class="alert-title">Uh oh, something went wrong</h4>
-  <div class="text-muted">Sorry! There was a problem with your request.</div>
+  <div class="text-secondary">Sorry! There was a problem with your request.</div>
 </div>
 <div class="alert alert-danger" role="alert">
   <h4 class="alert-title">I'm so sorry&hellip;</h4>
-  <div class="text-muted">Your account has been deleted and can't be restored.</div>
+  <div class="text-secondary">Your account has been deleted and can't be restored.</div>
 </div>
 ```
 
 ```html
 <div class="alert alert-success" role="alert">
   <h4 class="alert-title">Wow! Everything worked!</h4>
-  <div class="text-muted">Your account has been saved!</div>
+  <div class="text-secondary">Your account has been saved!</div>
 </div>
 ```
 
@@ -65,7 +65,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
     </div>
     <div>
       <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-muted">Your account has been saved!</div>
+      <div class="text-secondary">Your account has been saved!</div>
     </div>
   </div>
   <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
@@ -82,7 +82,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
     </div>
     <div>
       <h4 class="alert-title">Did you know?</h4>
-      <div class="text-muted">Here is something that you might like to know.</div>
+      <div class="text-secondary">Here is something that you might like to know.</div>
     </div>
   </div>
   <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
@@ -98,7 +98,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
     </div>
     <div>
       <h4 class="alert-title">Uh oh, something went wrong</h4>
-      <div class="text-muted">Sorry! There was a problem with your request.</div>
+      <div class="text-secondary">Sorry! There was a problem with your request.</div>
     </div>
   </div>
   <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
@@ -115,7 +115,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
     </div>
     <div>
       <h4 class="alert-title">I'm so sorry&hellip;</h4>
-      <div class="text-muted">Your account has been deleted and can't be restored.</div>
+      <div class="text-secondary">Your account has been deleted and can't be restored.</div>
     </div>
   </div>
   <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
@@ -131,7 +131,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
     </div>
     <div>
       <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-muted">Your account has been saved!</div>
+      <div class="text-secondary">Your account has been saved!</div>
     </div>
   </div>
   <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
@@ -153,7 +153,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
     </div>
     <div>
       <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-muted">Your account has been saved!</div>
+      <div class="text-secondary">Your account has been saved!</div>
     </div>
   </div>
 </div>
@@ -169,7 +169,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
     </div>
     <div>
       <h4 class="alert-title">Did you know?</h4>
-      <div class="text-muted">Here is something that you might like to know.</div>
+      <div class="text-secondary">Here is something that you might like to know.</div>
     </div>
   </div>
 </div>
@@ -184,7 +184,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
     </div>
     <div>
       <h4 class="alert-title">Uh oh, something went wrong</h4>
-      <div class="text-muted">Sorry! There was a problem with your request.</div>
+      <div class="text-secondary">Sorry! There was a problem with your request.</div>
     </div>
   </div>
 </div>
@@ -200,7 +200,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
     </div>
     <div>
       <h4 class="alert-title">I'm so sorry&hellip;</h4>
-      <div class="text-muted">Your account has been deleted and can't be restored.</div>
+      <div class="text-secondary">Your account has been deleted and can't be restored.</div>
     </div>
   </div>
 </div>
@@ -215,7 +215,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
     </div>
     <div>
       <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-muted">Your account has been saved!</div>
+      <div class="text-secondary">Your account has been saved!</div>
     </div>
   </div>
 </div>
@@ -227,7 +227,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
     </div>
     <div>
       <h4 class="alert-title">Did you know?</h4>
-      <div class="text-muted">Here is something that you might like to know.</div>
+      <div class="text-secondary">Here is something that you might like to know.</div>
     </div>
   </div>
 </div>
@@ -239,7 +239,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
     </div>
     <div>
       <h4 class="alert-title">Uh oh, something went wrong</h4>
-      <div class="text-muted">Sorry! There was a problem with your request.</div>
+      <div class="text-secondary">Sorry! There was a problem with your request.</div>
     </div>
   </div>
 </div>
@@ -251,7 +251,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
     </div>
     <div>
       <h4 class="alert-title">I'm so sorry&hellip;</h4>
-      <div class="text-muted">Your account has been deleted and can't be restored.</div>
+      <div class="text-secondary">Your account has been deleted and can't be restored.</div>
     </div>
   </div>
 </div>

docs/components/cards.mdx

@@ -62,7 +62,7 @@ Add a title to your card by including the `.card-title` class within `.card-body
 <div class="card">
   <div class="card-body">
     <h3 class="card-title">Card title</h3>
-    <p class="text-muted">This is some text within a card body.</p>
+    <p class="text-secondary">This is some text within a card body.</p>
   </div>
 </div>
 <div class="card">
@@ -70,7 +70,7 @@ Add a title to your card by including the `.card-title` class within `.card-body
     <h3 class="card-title">Card title</h3>
   </div>
   <div class="card-body">
-    <p class="text-muted">This is some text within a card body.</p>
+    <p class="text-secondary">This is some text within a card body.</p>
   </div>
 </div>
 ```
@@ -85,7 +85,7 @@ To create a more visually appealing card, add a title and an image. Thanks to th
   <div class="img-responsive img-responsive-21x9 card-img-top" style="background-image: url(/samples/photos/cup-of-coffee-and-an-open-book.jpg)"></div>
   <div class="card-body">
     <h3 class="card-title">Card with title and image</h3>
-    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
       neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
   </div>
 </div>
@@ -102,15 +102,15 @@ Add an image to your blog post card to make it eye-catching. You can do it by ad
   </a>
   <div class="card-body d-flex flex-column">
     <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
-    <div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
+    <div class="text-secondary">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
     <div class="d-flex align-items-center pt-4 mt-auto">
       <span class="avatar" style="background-image: url(/samples/avatars/023m.jpg)"></span>
       <div class="ms-3">
         <a href="#" class="text-body">Maryjo Lebarree</a>
-        <div class="text-muted">3 days ago</div>
+        <div class="text-secondary">3 days ago</div>
       </div>
       <div class="ms-auto">
-        <a href="#" class="icon d-none d-md-inline-block ms-3 text-muted">
+        <a href="#" class="icon d-none d-md-inline-block ms-3 text-secondary">
           <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
             <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
           </svg>
@@ -160,12 +160,12 @@ You can also add an image on the left side of the card. To do it, add the `.card
     <div class="col">
       <div class="card-body">
         <h3 class="card-title"><a href="#">Shut up!</a></h3>
-        <div class="text-muted">Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...</div>
+        <div class="text-secondary">Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...</div>
         <div class="d-flex align-items-center pt-4 mt-auto">
           <span class="avatar" style="background-image: url(/samples/avatars/029m.jpg)"></span>
           <div class="ms-3">
             <a href="#" class="text-body">Egan Poetz</a>
-            <div class="text-muted">3 days ago</div>
+            <div class="text-secondary">3 days ago</div>
           </div>
           <div class="ms-auto">
             <a href="#" class="icon d-none d-md-inline-block ms-3 text-red">
@@ -192,7 +192,7 @@ Add a status color to your card, either at the top or on the side of the card, t
       <div class="card-status-top bg-danger"></div>
       <div class="card-body">
         <h3 class="card-title">Card with top status</h3>
-        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+        <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
           neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
       </div>
     </div>
@@ -202,7 +202,7 @@ Add a status color to your card, either at the top or on the side of the card, t
       <div class="card-status-start bg-green"></div>
       <div class="card-body">
         <h3 class="card-title">Card with side status</h3>
-        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+        <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
           neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
       </div>
     </div>
@@ -215,7 +215,7 @@ Add a status color to your card, either at the top or on the side of the card, t
   <div class="card-status-top bg-danger"></div>
   <div class="card-body">
 	 <h3 class="card-title">Card with top status</h3>
-	 <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+	 <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
 		neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
   </div>
 </div>
@@ -223,7 +223,7 @@ Add a status color to your card, either at the top or on the side of the card, t
   <div class="card-status-start bg-green"></div>
   <div class="card-body">
 	 <h3 class="card-title">Card with side status</h3>
-	 <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+	 <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
 		neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
   </div>
 </div>
@@ -237,7 +237,7 @@ Use the `card-stacked` class to stack up multiple cards, if you want to save scr
 <div class="card card-stacked">
   <div class="card-body">
     <h3 class="card-title">Stacked card</h3>
-    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
       neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
   </div>
 </div>
@@ -259,7 +259,7 @@ Organize multiple cards into tabs to be able to display more content in a well-o
     <div id="tab-top-1" class="card tab-pane active show">
       <div class="card-body">
         <div class="card-title">Content of tab #1</div>
-        <p class="text-muted">
+        <p class="text-secondary">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
       </div>
@@ -267,7 +267,7 @@ Organize multiple cards into tabs to be able to display more content in a well-o
     <div id="tab-top-2" class="card tab-pane">
       <div class="card-body">
         <div class="card-title">Content of tab #2</div>
-        <p class="text-muted">
+        <p class="text-secondary">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
       </div>
@@ -275,7 +275,7 @@ Organize multiple cards into tabs to be able to display more content in a well-o
     <div id="tab-top-3" class="card tab-pane">
       <div class="card-body">
         <div class="card-title">Content of tab #3</div>
-        <p class="text-muted">
+        <p class="text-secondary">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
       </div>
@@ -283,7 +283,7 @@ Organize multiple cards into tabs to be able to display more content in a well-o
     <div id="tab-top-4" class="card tab-pane">
       <div class="card-body">
         <div class="card-title">Content of tab #4</div>
-        <p class="text-muted">
+        <p class="text-secondary">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
       </div>
@@ -307,7 +307,7 @@ Organize multiple cards into tabs to be able to display more content in a well-o
     <div id="tab-top-1" class="card tab-pane active show">
       <div class="card-body">
         <div class="card-title">Content of tab #1</div>
-        <p class="text-muted">
+        <p class="text-secondary">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
       </div>
@@ -316,7 +316,7 @@ Organize multiple cards into tabs to be able to display more content in a well-o
     <div id="tab-top-2" class="card tab-pane">
       <div class="card-body">
         <div class="card-title">Content of tab #2</div>
-        <p class="text-muted">
+        <p class="text-secondary">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
       </div>
@@ -325,7 +325,7 @@ Organize multiple cards into tabs to be able to display more content in a well-o
     <div id="tab-top-3" class="card tab-pane">
       <div class="card-body">
         <div class="card-title">Content of tab #3</div>
-        <p class="text-muted">
+        <p class="text-secondary">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
       </div>
@@ -334,7 +334,7 @@ Organize multiple cards into tabs to be able to display more content in a well-o
     <div id="tab-top-4" class="card tab-pane">
       <div class="card-body">
         <div class="card-title">Content of tab #4</div>
-        <p class="text-muted">
+        <p class="text-secondary">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
       </div>

docs/components/dropdowns.mdx

@@ -222,15 +222,15 @@ Use a dropdown with card content to make it easy for users to get more informati
       </a>
       <div class="card-body d-flex flex-column">
         <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
-        <div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
+        <div class="text-secondary">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
         <div class="d-flex align-items-center pt-4 mt-auto">
           <span class="avatar" style="background-image: url(/samples/avatars/013m.jpg)"></span>
           <div class="ms-3">
             <a href="#" class="text-body">Maryjo Lebarree</a>
-            <div class="text-muted">3 days ago</div>
+            <div class="text-secondary">3 days ago</div>
           </div>
           <div class="ms-auto">
-            <a href="#" class="icon d-none d-md-inline-block ms-3 text-muted">
+            <a href="#" class="icon d-none d-md-inline-block ms-3 text-secondary">
               <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                 <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />

docs/components/empty.mdx

@@ -19,7 +19,7 @@ Use the default empty state to engage users in the critical moments of their exp
     </svg>
   </div>
   <p class="empty-title">No results found</p>
-  <p class="empty-subtitle text-muted">
+  <p class="empty-subtitle text-secondary">
     Try adjusting your search or filter to find what you're looking for.
   </p>
   <div class="empty-action">
@@ -44,7 +44,7 @@ Make your empty state screen more attractive and engaging by adding an illustrat
   <div class="empty-img"><img src="..." height="128" alt="" />
   </div>
   <p class="empty-title">Invoices are managed from here</p>
-  <p class="empty-subtitle text-muted">
+  <p class="empty-subtitle text-secondary">
     Try adjusting your search or filter to find what you're looking for.
   </p>
   <div class="empty-action">
@@ -68,7 +68,7 @@ Instead of adding an icon or illustration you can simply give the text:
 <div class="empty">
   <div class="empty-header">404</div>
   <p class="empty-title">Oops… You just found an error page</p>
-  <p class="empty-subtitle text-muted">
+  <p class="empty-subtitle text-secondary">
     Try adjusting your search or filter to find what you're looking for.
   </p>
   <div class="empty-action">
@@ -89,7 +89,7 @@ Instead of adding an icon or illustration you can simply give the text:
 <div class="empty">
   <div class="empty-header">404</div>
   <p class="empty-title">Oops… You just found an error page</p>
-  <p class="empty-subtitle text-muted">
+  <p class="empty-subtitle text-secondary">
     Try adjusting your search or filter to find what you're looking for.
   </p>
   <div class="empty-action">

docs/components/modals.mdx

@@ -50,7 +50,7 @@ description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your si
           <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
         </svg>
         <h3>Are you sure?</h3>
-        <div class="text-muted">Do you really want to remove 84 files? What you've done cannot be undone.</div>
+        <div class="text-secondary">Do you really want to remove 84 files? What you've done cannot be undone.</div>
       </div>
       <div class="modal-footer">
         <div class="w-100">
@@ -86,7 +86,7 @@ description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your si
           <path d="M9 12l2 2l4 -4" />
         </svg>
         <h3>Payment succedeed</h3>
-        <div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to [email protected].</div>
+        <div class="text-secondary">Your payment of $290 has been successfully submitted. Your invoice has been sent to [email protected].</div>
       </div>
       <div class="modal-footer">
         <div class="w-100">
@@ -139,7 +139,7 @@ description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your si
                 </span>
                 <span class="form-selectgroup-label-content">
                   <span class="form-selectgroup-title strong mb-1">Simple</span>
-                  <span class="d-block text-muted">Provide only basic data needed for the report</span>
+                  <span class="d-block text-secondary">Provide only basic data needed for the report</span>
                 </span>
               </span>
             </label>
@@ -153,7 +153,7 @@ description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your si
                 </span>
                 <span class="form-selectgroup-label-content">
                   <span class="form-selectgroup-title strong mb-1">Advanced</span>
-                  <span class="d-block text-muted">Insert charts and additional advanced analyses to be inserted in the report</span>
+                  <span class="d-block text-secondary">Insert charts and additional advanced analyses to be inserted in the report</span>
                 </span>
               </span>
             </label>

docs/components/switch-icon.mdx

@@ -10,7 +10,7 @@ To replace the icons, all should add `active` class to the `switch-icon` compone
 
 ```html code example centered
 <button class="switch-icon" data-bs-toggle="switch-icon">
-  <span class="switch-icon-a text-muted">
+  <span class="switch-icon-a text-secondary">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
@@ -31,7 +31,7 @@ You can also add a fancy animation to add variety to your button. See demo below
 
 ```html example code centered separated
 <button class="switch-icon" data-bs-toggle="switch-icon">
-  <span class="switch-icon-a text-muted">
+  <span class="switch-icon-a text-secondary">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
@@ -45,7 +45,7 @@ You can also add a fancy animation to add variety to your button. See demo below
   </span>
 </button>
 <button class="switch-icon switch-icon-fade" data-bs-toggle="switch-icon">
-  <span class="switch-icon-a text-muted">
+  <span class="switch-icon-a text-secondary">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
@@ -59,7 +59,7 @@ You can also add a fancy animation to add variety to your button. See demo below
   </span>
 </button>
 <button class="switch-icon switch-icon-scale" data-bs-toggle="switch-icon">
-  <span class="switch-icon-a text-muted">
+  <span class="switch-icon-a text-secondary">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
@@ -73,7 +73,7 @@ You can also add a fancy animation to add variety to your button. See demo below
   </span>
 </button>
 <button class="switch-icon switch-icon-flip" data-bs-toggle="switch-icon">
-  <span class="switch-icon-a text-muted">
+  <span class="switch-icon-a text-secondary">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-thumb-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"></path>
@@ -88,7 +88,7 @@ You can also add a fancy animation to add variety to your button. See demo below
   </span>
 </button>
 <button class="switch-icon switch-icon-slide-up" data-bs-toggle="switch-icon">
-  <span class="switch-icon-a text-muted">
+  <span class="switch-icon-a text-secondary">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
@@ -102,7 +102,7 @@ You can also add a fancy animation to add variety to your button. See demo below
   </span>
 </button>
 <button class="switch-icon switch-icon-slide-left" data-bs-toggle="switch-icon">
-  <span class="switch-icon-a text-muted">
+  <span class="switch-icon-a text-secondary">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <path d="M5 12l5 5l10 -10" />
@@ -117,7 +117,7 @@ You can also add a fancy animation to add variety to your button. See demo below
   </span>
 </button>
 <button class="switch-icon switch-icon-slide-down" data-bs-toggle="switch-icon">
-  <span class="switch-icon-a text-muted">
+  <span class="switch-icon-a text-secondary">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <line x1="12" y1="5" x2="12" y2="19" />
@@ -125,7 +125,7 @@ You can also add a fancy animation to add variety to your button. See demo below
       <line x1="6" y1="13" x2="12" y2="19" />
     </svg>
   </span>
-  <span class="switch-icon-b text-muted">
+  <span class="switch-icon-b text-secondary">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <line x1="12" y1="5" x2="12" y2="19" />
@@ -135,7 +135,7 @@ You can also add a fancy animation to add variety to your button. See demo below
   </span>
 </button>
 <button class="switch-icon switch-icon-slide-right" data-bs-toggle="switch-icon">
-  <span class="switch-icon-a text-muted">
+  <span class="switch-icon-a text-secondary">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <circle cx="7" cy="17" r="2" />
@@ -143,7 +143,7 @@ You can also add a fancy animation to add variety to your button. See demo below
       <path d="M5 17h-2v-6l2 -5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" />
     </svg>
   </span>
-  <span class="switch-icon-b text-muted">
+  <span class="switch-icon-b text-secondary">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <circle cx="18" cy="17" r="2" />

docs/components/tables.mdx

@@ -25,11 +25,11 @@ The `.table` class adds basic styling to a table:
     <tbody>
       <tr>
         <td>Paweł Kuna</td>
-        <td class="text-muted">
+        <td class="text-secondary">
           UI Designer, Training
         </td>
-        <td class="text-muted"><a href="#" class="text-reset">[email protected]</a></td>
-        <td class="text-muted">
+        <td class="text-secondary"><a href="#" class="text-reset">[email protected]</a></td>
+        <td class="text-secondary">
           User
         </td>
         <td>
@@ -38,11 +38,11 @@ The `.table` class adds basic styling to a table:
       </tr>
       <tr>
         <td>Jeffie Lewzey</td>
-        <td class="text-muted">
+        <td class="text-secondary">
           Chemical Engineer, Support
         </td>
-        <td class="text-muted"><a href="#" class="text-reset">[email protected]</a></td>
-        <td class="text-muted">
+        <td class="text-secondary"><a href="#" class="text-reset">[email protected]</a></td>
+        <td class="text-secondary">
           Admin
         </td>
         <td>
@@ -51,11 +51,11 @@ The `.table` class adds basic styling to a table:
       </tr>
       <tr>
         <td>Mallory Hulme</td>
-        <td class="text-muted">
+        <td class="text-secondary">
           Geologist IV, Support
         </td>
-        <td class="text-muted"><a href="#" class="text-reset">[email protected]</a></td>
-        <td class="text-muted">
+        <td class="text-secondary"><a href="#" class="text-reset">[email protected]</a></td>
+        <td class="text-secondary">
           User
         </td>
         <td>
@@ -64,11 +64,11 @@ The `.table` class adds basic styling to a table:
       </tr>
       <tr>
         <td>Dunn Slane</td>
-        <td class="text-muted">
+        <td class="text-secondary">
           Research Nurse, Sales
         </td>
-        <td class="text-muted"><a href="#" class="text-reset">[email protected]</a></td>
-        <td class="text-muted">
+        <td class="text-secondary"><a href="#" class="text-reset">[email protected]</a></td>
+        <td class="text-secondary">
           Owner
         </td>
         <td>
@@ -77,11 +77,11 @@ The `.table` class adds basic styling to a table:
       </tr>
       <tr>
         <td>Emmy Levet</td>
-        <td class="text-muted">
+        <td class="text-secondary">
           VP Product Management, Accounting
         </td>
-        <td class="text-muted"><a href="#" class="text-reset">[email protected]</a></td>
-        <td class="text-muted">
+        <td class="text-secondary"><a href="#" class="text-reset">[email protected]</a></td>
+        <td class="text-secondary">
           Admin
         </td>
         <td>
@@ -165,11 +165,11 @@ If you don't want the table cell content to wrap to another line, use the `table
     <tbody>
       <tr>
         <td>Paweł Kuna</td>
-        <td class="text-muted">UI Designer, Training</td>
-        <td class="text-muted">
+        <td class="text-secondary">UI Designer, Training</td>
+        <td class="text-secondary">
           <a href="#" class="text-reset">[email protected]</a>
         </td>
-        <td class="text-muted">User</td>
+        <td class="text-secondary">User</td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
           expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
           quaerat quo repellendus, voluptates.</td>
@@ -199,11 +199,11 @@ If you don't want the table cell content to wrap to another line, use the `table
     <tbody>
       <tr>
         <td>Paweł Kuna</td>
-        <td class="text-muted">
+        <td class="text-secondary">
           UI Designer, Training
         </td>
-        <td class="text-muted"><a href="#" class="text-reset">[email protected]</a></td>
-        <td class="text-muted">
+        <td class="text-secondary"><a href="#" class="text-reset">[email protected]</a></td>
+        <td class="text-secondary">
           User
         </td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
@@ -216,11 +216,11 @@ If you don't want the table cell content to wrap to another line, use the `table
       </tr>
       <tr>
         <td>Jeffie Lewzey</td>
-        <td class="text-muted">
+        <td class="text-secondary">
           Chemical Engineer, Support
         </td>
-        <td class="text-muted"><a href="#" class="text-reset">[email protected]</a></td>
-        <td class="text-muted">
+        <td class="text-secondary"><a href="#" class="text-reset">[email protected]</a></td>
+        <td class="text-secondary">
           Admin
         </td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
@@ -233,11 +233,11 @@ If you don't want the table cell content to wrap to another line, use the `table
       </tr>
       <tr>
         <td>Mallory Hulme</td>
-        <td class="text-muted">
+        <td class="text-secondary">
           Geologist IV, Support
         </td>
-        <td class="text-muted"><a href="#" class="text-reset">[email protected]</a></td>
-        <td class="text-muted">
+        <td class="text-secondary"><a href="#" class="text-reset">[email protected]</a></td>
+        <td class="text-secondary">
           User
         </td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
@@ -250,11 +250,11 @@ If you don't want the table cell content to wrap to another line, use the `table
       </tr>
       <tr>
         <td>Dunn Slane</td>
-        <td class="text-muted">
+        <td class="text-secondary">
           Research Nurse, Sales
         </td>
-        <td class="text-muted"><a href="#" class="text-reset">[email protected]</a></td>
-        <td class="text-muted">
+        <td class="text-secondary"><a href="#" class="text-reset">[email protected]</a></td>
+        <td class="text-secondary">
           Owner
         </td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
@@ -267,11 +267,11 @@ If you don't want the table cell content to wrap to another line, use the `table
       </tr>
       <tr>
         <td>Emmy Levet</td>
-        <td class="text-muted">
+        <td class="text-secondary">
           VP Product Management, Accounting
         </td>
-        <td class="text-muted"><a href="#" class="text-reset">[email protected]</a></td>
-        <td class="text-muted">
+        <td class="text-secondary"><a href="#" class="text-reset">[email protected]</a></td>
+        <td class="text-secondary">
           Admin
         </td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt

docs/components/timelines.mdx

@@ -18,9 +18,9 @@ The available timeline design is comprised of many components that will help you
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">10 hrs ago</div>
+        <div class="text-secondary float-end">10 hrs ago</div>
         <h4>+1150 Followers</h4>
-        <p class="text-muted">You’re getting more and more followers, keep it up!</p>
+        <p class="text-secondary">You’re getting more and more followers, keep it up!</p>
       </div>
     </div>
   </li>
@@ -36,9 +36,9 @@ The available timeline design is comprised of many components that will help you
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">2 hrs ago</div>
+        <div class="text-secondary float-end">2 hrs ago</div>
         <h4>+3 New Products were added!</h4>
-        <p class="text-muted">Congratulations!</p>
+        <p class="text-secondary">Congratulations!</p>
       </div>
     </div>
   </li>
@@ -51,9 +51,9 @@ The available timeline design is comprised of many components that will help you
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">1 day ago</div>
+        <div class="text-secondary float-end">1 day ago</div>
         <h4>Database backup completed!</h4>
-        <p class="text-muted">Download the <a href="#">latest backup</a>.</p>
+        <p class="text-secondary">Download the <a href="#">latest backup</a>.</p>
       </div>
     </div>
   </li>
@@ -66,9 +66,9 @@ The available timeline design is comprised of many components that will help you
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">1 day ago</div>
+        <div class="text-secondary float-end">1 day ago</div>
         <h4>+290 Page Likes</h4>
-        <p class="text-muted">This is great, keep it up!</p>
+        <p class="text-secondary">This is great, keep it up!</p>
       </div>
     </div>
   </li>
@@ -83,7 +83,7 @@ The available timeline design is comprised of many components that will help you
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">2 days ago</div>
+        <div class="text-secondary float-end">2 days ago</div>
         <h4>+3 Friend Requests</h4>
         <div class="avatar-list mt-3">
           <span class="avatar" style="background-image: url(...)"><span class="badge bg-success"></span></span>
@@ -105,7 +105,7 @@ The available timeline design is comprised of many components that will help you
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">3 days ago</div>
+        <div class="text-secondary float-end">3 days ago</div>
         <h4>+2 New photos</h4>
         <div class="mt-3">
           <div class="row g-2">
@@ -134,9 +134,9 @@ The available timeline design is comprised of many components that will help you
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">2 weeks ago</div>
+        <div class="text-secondary float-end">2 weeks ago</div>
         <h4>System updated to v2.02</h4>
-        <p class="text-muted">Check the complete changelog at the <a href="#">activity
+        <p class="text-secondary">Check the complete changelog at the <a href="#">activity
             page</a>.</p>
       </div>
     </div>
@@ -152,9 +152,9 @@ The available timeline design is comprised of many components that will help you
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">10 hrs ago</div>
+        <div class="text-secondary float-end">10 hrs ago</div>
         <h4>+1150 Followers</h4>
-        <p class="text-muted">You’re getting more and more followers, keep it up!</p>
+        <p class="text-secondary">You’re getting more and more followers, keep it up!</p>
       </div>
     </div>
   </li>
@@ -164,9 +164,9 @@ The available timeline design is comprised of many components that will help you
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">2 hrs ago</div>
+        <div class="text-secondary float-end">2 hrs ago</div>
         <h4>+3 New Products were added!</h4>
-        <p class="text-muted">Congratulations!</p>
+        <p class="text-secondary">Congratulations!</p>
       </div>
     </div>
   </li>
@@ -176,9 +176,9 @@ The available timeline design is comprised of many components that will help you
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">1 day ago</div>
+        <div class="text-secondary float-end">1 day ago</div>
         <h4>Database backup completed!</h4>
-        <p class="text-muted">Download the <a href="#">latest backup</a>.</p>
+        <p class="text-secondary">Download the <a href="#">latest backup</a>.</p>
       </div>
     </div>
   </li>
@@ -188,9 +188,9 @@ The available timeline design is comprised of many components that will help you
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">1 day ago</div>
+        <div class="text-secondary float-end">1 day ago</div>
         <h4>+290 Page Likes</h4>
-        <p class="text-muted">This is great, keep it up!</p>
+        <p class="text-secondary">This is great, keep it up!</p>
       </div>
     </div>
   </li>
@@ -200,7 +200,7 @@ The available timeline design is comprised of many components that will help you
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">2 days ago</div>
+        <div class="text-secondary float-end">2 days ago</div>
         <h4>+3 Friend Requests</h4>
         <div class="avatar-list mt-3">
           <span class="avatar" style="background-image: url(...)">
@@ -219,7 +219,7 @@ The available timeline design is comprised of many components that will help you
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">3 days ago</div>
+        <div class="text-secondary float-end">3 days ago</div>
         <h4>+2 New photos</h4>
         <div class="mt-3">
           <div class="row g-2">
@@ -244,9 +244,9 @@ The available timeline design is comprised of many components that will help you
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">2 weeks ago</div>
+        <div class="text-secondary float-end">2 weeks ago</div>
         <h4>System updated to v2.02</h4>
-        <p class="text-muted">Check the complete changelog at the <a href="#">activity
+        <p class="text-secondary">Check the complete changelog at the <a href="#">activity
             page</a>.</p>
       </div>
     </div>
@@ -269,9 +269,9 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">10 hrs ago</div>
+        <div class="text-secondary float-end">10 hrs ago</div>
         <h4>+1150 Followers</h4>
-        <p class="text-muted">You’re getting more and more followers, keep it up!</p>
+        <p class="text-secondary">You’re getting more and more followers, keep it up!</p>
       </div>
     </div>
   </li>
@@ -287,9 +287,9 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">2 hrs ago</div>
+        <div class="text-secondary float-end">2 hrs ago</div>
         <h4>+3 New Products were added!</h4>
-        <p class="text-muted">Congratulations!</p>
+        <p class="text-secondary">Congratulations!</p>
       </div>
     </div>
   </li>
@@ -302,9 +302,9 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">1 day ago</div>
+        <div class="text-secondary float-end">1 day ago</div>
         <h4>Database backup completed!</h4>
-        <p class="text-muted">Download the <a href="#">latest backup</a>.</p>
+        <p class="text-secondary">Download the <a href="#">latest backup</a>.</p>
       </div>
     </div>
   </li>
@@ -317,9 +317,9 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">1 day ago</div>
+        <div class="text-secondary float-end">1 day ago</div>
         <h4>+290 Page Likes</h4>
-        <p class="text-muted">This is great, keep it up!</p>
+        <p class="text-secondary">This is great, keep it up!</p>
       </div>
     </div>
   </li>
@@ -334,7 +334,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">2 days ago</div>
+        <div class="text-secondary float-end">2 days ago</div>
         <h4>+3 Friend Requests</h4>
         <div class="avatar-list mt-3">
           <span class="avatar" style="background-image: url(...)"><span class="badge bg-success"></span></span>
@@ -356,7 +356,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">3 days ago</div>
+        <div class="text-secondary float-end">3 days ago</div>
         <h4>+2 New photos</h4>
         <div class="mt-3">
           <div class="row g-2">
@@ -385,9 +385,9 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">2 weeks ago</div>
+        <div class="text-secondary float-end">2 weeks ago</div>
         <h4>System updated to v2.02</h4>
-        <p class="text-muted">Check the complete changelog at the <a href="#">activity
+        <p class="text-secondary">Check the complete changelog at the <a href="#">activity
             page</a>.</p>
       </div>
     </div>
@@ -403,9 +403,9 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">10 hrs ago</div>
+        <div class="text-secondary float-end">10 hrs ago</div>
         <h4>+1150 Followers</h4>
-        <p class="text-muted">You’re getting more and more followers, keep it up!</p>
+        <p class="text-secondary">You’re getting more and more followers, keep it up!</p>
       </div>
     </div>
   </li>
@@ -415,9 +415,9 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">2 hrs ago</div>
+        <div class="text-secondary float-end">2 hrs ago</div>
         <h4>+3 New Products were added!</h4>
-        <p class="text-muted">Congratulations!</p>
+        <p class="text-secondary">Congratulations!</p>
       </div>
     </div>
   </li>
@@ -427,9 +427,9 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">1 day ago</div>
+        <div class="text-secondary float-end">1 day ago</div>
         <h4>Database backup completed!</h4>
-        <p class="text-muted">Download the <a href="#">latest backup</a>.</p>
+        <p class="text-secondary">Download the <a href="#">latest backup</a>.</p>
       </div>
     </div>
   </li>
@@ -439,9 +439,9 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">1 day ago</div>
+        <div class="text-secondary float-end">1 day ago</div>
         <h4>+290 Page Likes</h4>
-        <p class="text-muted">This is great, keep it up!</p>
+        <p class="text-secondary">This is great, keep it up!</p>
       </div>
     </div>
   </li>
@@ -451,7 +451,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">2 days ago</div>
+        <div class="text-secondary float-end">2 days ago</div>
         <h4>+3 Friend Requests</h4>
         <div class="avatar-list mt-3">
           <span class="avatar" style="background-image: url(...)">
@@ -470,7 +470,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">3 days ago</div>
+        <div class="text-secondary float-end">3 days ago</div>
         <h4>+2 New photos</h4>
         <div class="mt-3">
           <div class="row g-2">
@@ -495,9 +495,9 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
     <div class="card timeline-event-card">
       <div class="card-body">
-        <div class="text-muted float-end">2 weeks ago</div>
+        <div class="text-secondary float-end">2 weeks ago</div>
         <h4>System updated to v2.02</h4>
-        <p class="text-muted">Check the complete changelog at the <a href="#">activity
+        <p class="text-secondary">Check the complete changelog at the <a href="#">activity
             page</a>.</p>
       </div>
     </div>

docs/components/tracking.mdx

@@ -61,7 +61,7 @@ You can add a tracking component inside the cards to give your reports a fresh l
       <div class="subheader">Status monitoring</div>
       <div class="ms-auto lh-1">
         <div class="dropdown">
-          <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Current month</a>
+          <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Current month</a>
           <div class="dropdown-menu dropdown-menu-end">
             <a class="dropdown-item active" href="#">Current month</a>
             <a class="dropdown-item" href="#">Last month</a>
@@ -128,7 +128,7 @@ You can add a tracking component inside the cards to give your reports a fresh l
 		<div class="subheader">Status monitoring</div>
 		<div class="ms-auto lh-1">
 		  <div class="dropdown">
-			 <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Current month</a>
+			 <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Current month</a>
 			 <div class="dropdown-menu dropdown-menu-end">
 				<a class="dropdown-item active" href="#">Current month</a>
 				<a class="dropdown-item" href="#">Last month</a>

docs/forms/form-elements.mdx

@@ -101,12 +101,12 @@ Add icons to your input controls to suggest users what they should enter or info
   <div class="input-icon mb-3">
     <input type="text" value="" class="form-control" placeholder="Loading…" />
     <span class="input-icon-addon">
-      <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
+      <div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
     </span>
   </div>
   <div class="input-icon mb-3">
     <span class="input-icon-addon">
-      <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
+      <div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
     </span>
     <input type="text" value="" class="form-control" placeholder="Loading…" />
   </div>

docs/layout/page-headers.mdx

@@ -111,7 +111,7 @@ description: Page heading examples for Tabler
   <div class="row align-items-center">
     <div class="col">
       <h2 class="page-title">Gallery</h2>
-      <div class="text-muted mt-1">1-12 of 241 photos</div>
+      <div class="text-secondary mt-1">1-12 of 241 photos</div>
     </div>
     <div class="col-auto ms-auto d-print-none">
       <div class="d-flex">
@@ -151,7 +151,7 @@ Page header with a border to separate content is an effective way to organize an
     <div class="row align-items-center">
       <div class="col">
         <h2 class="page-title">Improve cards with no border</h2>
-        <div class="text-muted mt-1">
+        <div class="text-secondary mt-1">
           <a href="#" class="text-reset">#693</a>
           opened by <a href="#" class="text-body">Jeffie Lewzey</a>
           in <a href="#" class="text-body">Calendar Page</a>

docs/layout/page-layouts.mdx

@@ -25,7 +25,7 @@ description: Learn how to build a sample version of the dashboard
             <span class="avatar avatar-sm" style="background-image: url(/samples/avatars/002m.jpg)"></span>
             <div class="d-none d-xl-block ps-2">
               <div>Paweł Kuna</div>
-              <div class="mt-1 small text-muted">UI Designer</div>
+              <div class="mt-1 small text-secondary">UI Designer</div>
             </div>
           </a>
         </div>

docs/utilities/borders.mdx

@@ -8,13 +8,13 @@ description: Use border utilities to quickly style the border and border-radius
 The following border utilities classes will add border to any side of an element.
 
 ```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border">1</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border-top">2</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border-end">3</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border-bottom">4</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border-start">5</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border-x">6</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border-y">7</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-top">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-end">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-bottom">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-start">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-x">6</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-y">7</div>
 ```
 
 ```html
@@ -32,9 +32,9 @@ The following border utilities classes will add border to any side of an element
 Below are the available border size utilities classes.
 
 ```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border-0">1</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border">2</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border-wide">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-0">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-wide">3</div>
 ```
 
 ```html
@@ -48,12 +48,12 @@ Below are the available border size utilities classes.
 You can remove a border on a single side of an element by using the following border utilities classes.
 
 ```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border border-top-0">1</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border border-end-0">2</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border border-bottom-0">3</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border border-start-0">4</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border border-x-0">5</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border border-y-0">6</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-top-0">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-end-0">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-bottom-0">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-start-0">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-x-0">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-y-0">6</div>
 ```
 
 ```html
@@ -70,14 +70,14 @@ You can remove a border on a single side of an element by using the following bo
 You can set a border color of any side of an element by adding the following utilities classes below.
 
 ```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border border-primary">1</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border border-secondary">2</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border border-success">3</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border border-warning">4</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border border-danger">5</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border border-info">6</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border border-dark">7</div>
-<div class="d-flex align-items-center justify-content-center text-muted w-5 h-5 bg-light border border-light">8</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-primary">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-secondary">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-success">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-warning">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-danger">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-info">6</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-dark">7</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-light">8</div>
 ```
 
 ```html
@@ -96,12 +96,12 @@ You can set a border color of any side of an element by adding the following uti
 You can set a border to any element by using the following utilities classes below.
 
 ```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-muted  w-5 h-5 bg-light border rounded-0">1</div>
-<div class="d-flex align-items-center justify-content-center text-muted  w-5 h-5 bg-light border rounded">2</div>
-<div class="d-flex align-items-center justify-content-center text-muted  w-5 h-5 bg-light border rounded-1">3</div>
-<div class="d-flex align-items-center justify-content-center text-muted  w-5 h-5 bg-light border rounded-2">4</div>
-<div class="d-flex align-items-center justify-content-center text-muted  w-5 h-5 bg-light border rounded-3">5</div>
-<div class="d-flex align-items-center justify-content-center text-muted  w-5 h-5 bg-light border rounded-circle">6</div>
+<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-0">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-1">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-2">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-3">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-circle">6</div>
 ```
 
 ```html

src/pages/2-step-verification-code.html

@@ -48,7 +48,7 @@ layout: single
 	</div>
 </form>
 
-<div class="text-center text-muted mt-3">
+<div class="text-center text-secondary mt-3">
 	It may take a minute to receive your code. Haven't received it? <a href="{{ site.base }}/">Resend a new code.</a>
 </div>
 

src/pages/2-step-verification.html

@@ -30,7 +30,7 @@ layout: single
 			</div>
 		</div>
 
-		<div class="text-muted">
+		<div class="text-secondary">
 			Security is critical in Tabler. to help keep your account safe, we'll
 			text you a verification code when you sign in on a new device
 		</div>

src/pages/_data/colors.yml

@@ -142,7 +142,7 @@
 #gray-900: '#354052'
 
 border-color: 'rgba(110, 117, 130, 0.2)'
-text-muted: '#6e7582'
+text-secondary: '#6e7582'
 
 facebook: '#3b5998'
 twitter: '#1da1f2'

src/pages/_includes/cards/auth-lock.html

@@ -3,7 +3,7 @@
 	<div class="card-body text-center">
 		<div class="mb-4">
 			<h2 class="card-title">Account Locked</h2>
-			<p class="text-muted">Please enter your password to unlock your account</p>
+			<p class="text-secondary">Please enter your password to unlock your account</p>
 		</div>
 
 		<div class="mb-4">

src/pages/_includes/cards/blog-single.html

@@ -9,16 +9,16 @@
 {% capture card-content %}
    <h3 class="card-title"><a href="#">{{ article.title }}</a></h3>
 
-   <div class="text-muted">{{ article.description | truncate: truncate }}</div>
+   <div class="text-secondary">{{ article.description | truncate: truncate }}</div>
 
    <div class="d-flex align-items-center pt-4 mt-auto">
       {% include ui/avatar.html person-id=avatar %}
       <div class="ms-3">
          <a href="{{ site.base }}/profile.html" class="text-body">{{ author.first_name }} {{ author.last_name }}</a>
-         <div class="text-muted">3 days ago</div>
+         <div class="text-secondary">3 days ago</div>
       </div>
       <div class="ms-auto">
-         <a href="#" class="icon d-none d-md-inline-block ms-3 {% if liked %}text-red{% else %}text-muted{% endif %}">
+         <a href="#" class="icon d-none d-md-inline-block ms-3 {% if liked %}text-red{% else %}text-secondary{% endif %}">
             {% include ui/icon.html icon="heart" use-svg=true  %}
          </a>
       </div>

src/pages/_includes/cards/card-image.html

@@ -11,7 +11,7 @@
 				{% if include.title %}
 				<h3 class="card-title">{{ include.title }}</h3>
 				{% endif %}
-				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit
+				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit
 					incidunt, iste, itaque minima
 					neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
 			</div>

src/pages/_includes/cards/card-tabs.html

@@ -18,7 +18,7 @@
    <div id="tab-{{ id }}-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
       <div class="card-body">
          <div class="card-title">Content of tab #{{ tab }}</div>
-         <p class="text-muted">
+         <p class="text-secondary">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
          </p>
       </div>

src/pages/_includes/cards/card.html

@@ -44,9 +44,9 @@
 			{% endif %}
 
 			{% if include.body %}
-			<p class="text-muted">{{ include.body }}</p>
+			<p class="text-secondary">{{ include.body }}</p>
 			{% else %}
-			<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+			<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
 				neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
 			{% endif %}
 

src/pages/_includes/cards/comments.html

@@ -14,7 +14,7 @@
                <h5 class="m-0">
                   {{ person.full_name }}
                </h5>
-               <div class="ms-auto small text-muted">{{ forloop.index | random_date_ago: 23 | timeago }}</div>
+               <div class="ms-auto small text-secondary">{{ forloop.index | random_date_ago: 23 | timeago }}</div>
             </div>
             <p class="mb-2">
                {{ site.data.comments[forloop.index] }}
@@ -26,9 +26,9 @@
                   {% include ui/icon.html icon="chevron-down" %}
                </a>
                <span class="me-1">·</span>
-               <a href="#" class="me-1 text-muted">Reply</a>
+               <a href="#" class="me-1 text-secondary">Reply</a>
                <span class="me-1">·</span>
-               <a href="#" class="text-muted">Edit</a>
+               <a href="#" class="text-secondary">Edit</a>
             </div>
          </div>
       </div>

src/pages/_includes/cards/company-employees.html

@@ -23,7 +23,7 @@
 					<div class="progress-bar bg-{{ forloop.index | random_number: 30, 90 | number_color }}" role="progressbar" style="width: {{ forloop.index | random_number: 30, 90 }}%"></div>
 				</div>
 			</td>
-			<td><a href="{{ site.base }}" class="text-muted">{% include ui/icon.html icon="dots" %}</a></td>
+			<td><a href="{{ site.base }}" class="text-secondary">{% include ui/icon.html icon="dots" %}</a></td>
 		</tr>
 		{% endfor %}
 	</table>

src/pages/_includes/cards/company-lookup.html

@@ -13,31 +13,31 @@
       <div class="row">
          <div class="col">
             <h5 class="mb-1">Name</h5>
-            <div class="text-muted-dark">Amazon.com</div>
+            <div class="text-secondary-dark">Amazon.com</div>
          </div>
          <div class="col">
             <h5 class="mb-1">Legal Name</h5>
-            <div class="text-muted-dark">Amazon.com, Inc.</div>
+            <div class="text-secondary-dark">Amazon.com, Inc.</div>
          </div>
          <div class="col">
             <h5 class="mb-1">Ticker</h5>
-            <div class="text-muted-dark">AMZN</div>
+            <div class="text-secondary-dark">AMZN</div>
          </div>
          <div class="col">
             <h5 class="mb-1">Founded Year</h5>
-            <div class="text-muted-dark">1995</div>
+            <div class="text-secondary-dark">1995</div>
          </div>
          <div class="col">
             <h5 class="mb-1">Type</h5>
-            <div class="text-muted-dark">Public</div>
+            <div class="text-secondary-dark">Public</div>
          </div>
          <div class="col">
             <h5 class="mb-1">Employees</h5>
-            <div class="text-muted-dark">341,400</div>
+            <div class="text-secondary-dark">341,400</div>
          </div>
          <div class="col">
             <h5 class="mb-1">Annual Revenue</h5>
-            <div class="text-muted-dark">$135B</div>
+            <div class="text-secondary-dark">$135B</div>
          </div>
       </div>
    </div>
@@ -47,11 +47,11 @@
             <div class="row mb-5">
                <div class="col">
                   <h5 class="mb-1">Location</h5>
-                  <div class="text-muted-dark">207 Boren Ave, Seattle, WA 98109, USA</div>
+                  <div class="text-secondary-dark">207 Boren Ave, Seattle, WA 98109, USA</div>
                </div>
                <div class="col">
                   <h5 class="mb-1">Timezone</h5>
-                  <div class="text-muted-dark">America/Los_Angeles</div>
+                  <div class="text-secondary-dark">America/Los_Angeles</div>
                </div>
             </div>
 
@@ -68,8 +68,8 @@
                   <p class="mb-1">Eagleeyed viewers of the Super Bowl spotted something most people missed in Amazons
                      commercial for its Alexa voice assistant Before Alexa lo…</p>
                   <div class="row">
-                     <div class="col text-muted">businessinsider.com</div>
-                     <div class="col text-muted text-end">2 days ago</div>
+                     <div class="col text-secondary">businessinsider.com</div>
+                     <div class="col text-secondary text-end">2 days ago</div>
                   </div>
                </li>
                <li class="mb-5">
@@ -77,16 +77,16 @@
                   <p>This story was delivered to BI Intelligence ECommerce Briefing subscribers hours before appearing
                      on Business Insider To be the first to kno…</p>
                   <div class="row">
-                     <div class="col text-muted">businessinsider.com</div>
-                     <div class="col text-muted text-end">2 days ago</div>
+                     <div class="col text-secondary">businessinsider.com</div>
+                     <div class="col text-secondary text-end">2 days ago</div>
                   </div>
                </li>
                <li class="mb-5">
                   <a href="#">12 highpaying jobs Amazons HQ2 will likely bring to its future city</a>
                   <p class="mb-1">These Amazon jobs all earn over 90000tanleimagesShutterstock</p>
                   <div class="row">
-                     <div class="col text-muted">businessinsider.com</div>
-                     <div class="col text-muted text-end" title="2018-02-02T12:32:00.000Z">4 days ago</div>
+                     <div class="col text-secondary">businessinsider.com</div>
+                     <div class="col text-secondary text-end" title="2018-02-02T12:32:00.000Z">4 days ago</div>
                   </div>
                </li>
                <li class="mb-5">
@@ -95,8 +95,8 @@
                   <p class="mb-1">ReutersLindsey Wasson To say Amazon is doing well would be an understatement In its
                      latest earnings report the company reported 6045 billion…</p>
                   <div class="row">
-                     <div class="col text-muted">businessinsider.com</div>
-                     <div class="col text-muted text-end" title="2018-02-02T10:45:00.000Z">5 days ago</div>
+                     <div class="col text-secondary">businessinsider.com</div>
+                     <div class="col text-secondary text-end" title="2018-02-02T10:45:00.000Z">5 days ago</div>
                   </div>
                </li>
                <li class="mb-4">
@@ -105,8 +105,8 @@
                   <p class="mb-1">How would you answer Amazon is a peculiar company whats peculiar about youAlex
                      WongGetty Images</p>
                   <div class="row">
-                     <div class="col text-muted">businessinsider.com</div>
-                     <div class="col text-muted text-end" title="2018-02-01T11:25:00.000Z">6 days ago</div>
+                     <div class="col text-secondary">businessinsider.com</div>
+                     <div class="col text-secondary text-end" title="2018-02-01T11:25:00.000Z">6 days ago</div>
                   </div>
                </li>
             </ul>
@@ -115,7 +115,7 @@
             <ul class="list-unstyled list-separated">
                <li class="list-separated-item">
                   <h5>Description</h5>
-                  <div class="text-muted-dark">
+                  <div class="text-secondary-dark">
                      Online shopping from the earth's biggest selection of books, magazines, music, DVDs, videos,
                      electronics, computers, software, apparel & acc…
                   </div>

src/pages/_includes/cards/development-activity.html

@@ -8,7 +8,7 @@
 				<div class="col-auto">{% include ui/chart-sparkline.html id="activity" percentage=35 type="donut" %}</div>
 				<div class="col">
 					<div>Today's Earning: $4,262.40</div>
-					<div class="text-muted">{% include ui/icon.html icon="trending-up" color="green" class="icon-inline" %} +5% more than yesterday</div>
+					<div class="text-secondary">{% include ui/icon.html icon="trending-up" color="green" class="icon-inline" %} +5% more than yesterday</div>
 				</div>
 			</div>
 		</div>
@@ -35,7 +35,7 @@
 						{{ commit.description }}
 					</div>
 				</td>
-				<td class="text-nowrap text-muted">{{ commit.date | date_to_string }}</td>
+				<td class="text-nowrap text-secondary">{{ commit.date | date_to_string }}</td>
 			</tr>
 			{% endfor %}
 			</tbody>

src/pages/_includes/cards/forgot-password.html

@@ -2,7 +2,7 @@
 	<div class="card-body">
 		<h2 class="card-title text-center mb-4">Forgot password</h2>
 
-		<p class="text-muted mb-4">Enter your email address and your password will be reset and emailed to you.</p>
+		<p class="text-secondary mb-4">Enter your email address and your password will be reset and emailed to you.</p>
 
 		<div class="mb-3">
 			<label class="form-label">Email address</label>
@@ -13,6 +13,6 @@
 		</div>
 	</div>
 </form>
-<div class="text-center text-muted mt-3">
+<div class="text-center text-secondary mt-3">
 	Forget it, <a href="{{ site.base }}/sign-in.html">send me back</a> to the sign in screen.
 </div>

src/pages/_includes/cards/gallery-photo.html

@@ -5,15 +5,15 @@
 			{% include ui/avatar.html person=include.person class="me-3 rounded" %}
 			<div>
 				<div>{{ include.person.full_name }}</div>
-				<div class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</div>
+				<div class="text-secondary">{{ forloop.index | random_date_ago: 10 | timeago }}</div>
 			</div>
 			{% unless include.hide-likes %}
 			<div class="ms-auto">
-				<a href="#" class="text-muted">
+				<a href="#" class="text-secondary">
 					{% include ui/icon.html icon="eye" %}
 					{{ forloop.index | random_number: 300, 600 }}
 				</a>
-				<a href="#" class="ms-3 text-muted">
+				<a href="#" class="ms-3 text-secondary">
 					{% assign class = false %}
 					{% if forloop.index > 2 and forloop.index < 9 or forloop.index == 10 %}
 						{% assign class = "icon-filled text-red" %}

src/pages/_includes/cards/icons-banner.html

@@ -10,7 +10,7 @@
 		<div class="row align-items-center">
 			<div class="col-10">
 				<h3 class="h1">Tabler Icons</h3>
-				<div class="markdown text-muted">
+				<div class="markdown text-secondary">
 					All icons come from the Tabler Icons set and are MIT-licensed. Visit
 					<a href="https://tabler-icons.io" target="_blank" rel="noopener">tabler-icons.io</a>,
 					download any of the {{ icons-count }} icons in SVG, PNG or&nbsp;React and use them in your favourite design tools.

src/pages/_includes/cards/invoice.html

@@ -39,7 +39,7 @@
 				<td class="text-center">1</td>
 				<td>
 					<p class="strong mb-1">Logo Creation</p>
-					<div class="text-muted">Logo and business cards design</div>
+					<div class="text-secondary">Logo and business cards design</div>
 				</td>
 				<td class="text-center">
 					1
@@ -51,7 +51,7 @@
 				<td class="text-center">2</td>
 				<td>
 					<p class="strong mb-1">Online Store Design &amp; Development</p>
-					<div class="text-muted">Design/Development for all popular modern browsers</div>
+					<div class="text-secondary">Design/Development for all popular modern browsers</div>
 				</td>
 				<td class="text-center">
 					1
@@ -63,7 +63,7 @@
 				<td class="text-center">3</td>
 				<td>
 					<p class="strong mb-1">App Design</p>
-					<div class="text-muted">Promotional mobile application</div>
+					<div class="text-secondary">Promotional mobile application</div>
 				</td>
 				<td class="text-center">
 					1
@@ -89,7 +89,7 @@
 			</tr>
 		</table>
 
-		<p class="text-muted text-center mt-5">Thank you very much for doing business with us. We look forward to working with
+		<p class="text-secondary text-center mt-5">Thank you very much for doing business with us. We look forward to working with
 			you again!</p>
 	</div>
 </div>

src/pages/_includes/cards/invoices.html

@@ -5,7 +5,7 @@
 	<div class="card-body border-bottom py-3">
 
 		<div class="d-flex">
-			<div class="text-muted">
+			<div class="text-secondary">
 				Show
 				<div class="mx-2 d-inline-block">
 					<input type="text" class="form-control form-control-sm" value="8" size="3" aria-label="Invoices count">
@@ -13,7 +13,7 @@
 				entries
 			</div>
 
-			<div class="ms-auto text-muted">
+			<div class="ms-auto text-secondary">
 				Search:
 				<div class="ms-2 d-inline-block">
 					<input type="text" class="form-control form-control-sm" aria-label="Search invoice">
@@ -42,7 +42,7 @@
 			{% for invoice in site.data.invoices limit: 8 %}
 			<tr>
 				<td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
-				<td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
+				<td><span class="text-secondary">00{{ forloop.index | plus: 1400 }}</span></td>
 				<td><a href="invoice.html" class="text-reset" tabindex="-1">{{ invoice.name }}</a></td>
 				<td>
 					{% include ui/flag.html flag=invoice.country %}
@@ -71,7 +71,7 @@
 		</table>
 	</div>
 	<div class="card-footer d-flex align-items-center">
-		<p class="m-0 text-muted">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
+		<p class="m-0 text-secondary">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
 		{% include ui/pagination.html class="m-0 ms-auto" %}
 	</div>
 </div>

src/pages/_includes/cards/most-visited-pages.html

@@ -22,9 +22,9 @@
 					{{ page.uri }}
 					<a href="#" class="ms-1" aria-label="Open website">{% include ui/icon.html icon="link" %}</a>
 				</td>
-				<td class="text-muted">{{ page.visitors | format_number }}</td>
-				<td class="text-muted">{{ page.unique | format_number }}</td>
-				<td class="text-muted">{{ page.bounce }}</td>
+				<td class="text-secondary">{{ page.visitors | format_number }}</td>
+				<td class="text-secondary">{{ page.unique | format_number }}</td>
+				<td class="text-secondary">{{ page.bounce }}</td>
 				<td class="text-end w-1">
 					{% include ui/chart-sparkline.html type="line" data=data id=id small=true color="primary" %}
 				</td>

src/pages/_includes/cards/music/track-info.html

@@ -8,7 +8,7 @@
 		<div class="col">
 			<div class="card-body">
 				{{ track.name }}
-				<div class="text-muted">
+				<div class="text-secondary">
 					{% for artist in track.artists %}
 					{{ artist.name }}{% unless forloop.last %},{% endunless %}
 					{% endfor %}

src/pages/_includes/cards/music/tracks-list.html

@@ -11,13 +11,13 @@
 				</div>
 				<div class="col">
 					{{ track.name }}
-					<div class="text-muted">
+					<div class="text-secondary">
 						{% for artist in track.artists %}
 						{{ artist.name }}{% unless forloop.last %},{% endunless %}
 						{% endfor %}
 					</div>
 				</div>
-				<div class="col-auto text-muted">
+				<div class="col-auto text-secondary">
 					{{ track.duration_ms | miliseconds_to_minutes }}
 				</div>
 				<div class="col-auto">

src/pages/_includes/cards/navbar-notifications.html

@@ -8,7 +8,7 @@
 				<div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
 				<div class="col text-truncate">
 					<a href="#" class="text-body d-block">Example 1</a>
-					<div class="d-block text-muted text-truncate mt-n1">
+					<div class="d-block text-secondary text-truncate mt-n1">
 						Change deprecated html tags to text decoration classes (#29604)
 					</div>
 				</div>
@@ -24,7 +24,7 @@
 				<div class="col-auto"><span class="status-dot d-block"></span></div>
 				<div class="col text-truncate">
 					<a href="#" class="text-body d-block">Example 2</a>
-					<div class="d-block text-muted text-truncate mt-n1">
+					<div class="d-block text-secondary text-truncate mt-n1">
 						justify-content:between ⇒ justify-content:space-between (#29734)
 					</div>
 				</div>
@@ -40,7 +40,7 @@
 				<div class="col-auto"><span class="status-dot d-block"></span></div>
 				<div class="col text-truncate">
 					<a href="#" class="text-body d-block">Example 3</a>
-					<div class="d-block text-muted text-truncate mt-n1">
+					<div class="d-block text-secondary text-truncate mt-n1">
 						Update change-version.js (#29736)
 					</div>
 				</div>
@@ -56,7 +56,7 @@
 				<div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
 				<div class="col text-truncate">
 					<a href="#" class="text-body d-block">Example 4</a>
-					<div class="d-block text-muted text-truncate mt-n1">
+					<div class="d-block text-secondary text-truncate mt-n1">
 						Regenerate package-lock.json (#29730)
 					</div>
 				</div>

src/pages/_includes/cards/order-statistics.html

@@ -16,9 +16,9 @@
 				<div class="col-auto"><span class="legend bg-{{ item.color }}"></span></div>
 				<div class="col">
 					{{ item.title }}
-					<div class="fs-6 text-muted">{{ item.subtitle }}</div>
+					<div class="fs-6 text-secondary">{{ item.subtitle }}</div>
 				</div>
-				<div class="col-auto small text-muted"><strong class="text-body">{{ forloop.index | random_number: 500, 2000
+				<div class="col-auto small text-secondary"><strong class="text-body">{{ forloop.index | random_number: 500, 2000
 					| intcomma }}</strong> orders
 				</div>
 			</li>

src/pages/_includes/cards/pricing-card-enterprise.html

@@ -3,7 +3,7 @@
 		<div class="row align-items-center">
 			<div class="col">
 				<h2 class="h3">Enterprise-ready. Reach out for a custom quote.</h2>
-				<p class="m-0 text-muted">Tabler is designed to work great for large enterprises. Take a look at our feature comparison.</p>
+				<p class="m-0 text-secondary">Tabler is designed to work great for large enterprises. Take a look at our feature comparison.</p>
 			</div>
 			<div class="col-auto">
 				{% include ui/button.html text="Book a demo" %}

src/pages/_includes/cards/pricing-card.html

@@ -6,7 +6,7 @@
 	{% endif %}
 
 	<div class="card-body text-center">
-		<div class="text-uppercase text-muted font-weight-medium">{{ include.category | default: 'Enterprise' }}</div>
+		<div class="text-uppercase text-secondary font-weight-medium">{{ include.category | default: 'Enterprise' }}</div>
 
 		<div class="display-5 fw-bold my-3">${{ include.price | default: '79' }}</div>
 

src/pages/_includes/cards/profile-2.html

@@ -4,7 +4,7 @@
 			{% include ui/avatar.html person-id=8 size="xl" %}
 			<div class="media-body ms-4">
 				<h3>{{ site.data.people[20].first_name }} {{ site.data.people[20].last_name }}</h3>
-				<p class="text-muted mb-0">{{ site.data.people[20].job_title }}</p>
+				<p class="text-secondary mb-0">{{ site.data.people[20].job_title }}</p>
 
 				<ul class="social-links list-inline mb-0 mt-2">
 					<li class="list-inline-item">

src/pages/_includes/cards/profile-timeline.html

@@ -13,7 +13,7 @@
 				</div>
 				<div class="flex-fill">
 					<div>
-						<small class="float-right text-muted">4 min</small>
+						<small class="float-right text-secondary">4 min</small>
 						<h4>{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h4>
 					</div>
 
@@ -55,7 +55,7 @@
 				</div>
 				<div class="flex-fill">
 					<div>
-						<small class="float-right text-muted">12 min</small>
+						<small class="float-right text-secondary">12 min</small>
 						<h4>{{ site.data.people[10].first_name }} {{ site.data.people[10].last_name }}</h4>
 					</div>
 					<div>
@@ -72,7 +72,7 @@
 				</div>
 				<div class="flex-fill">
 					<div>
-						<small class="float-right text-muted">34 min</small>
+						<small class="float-right text-secondary">34 min</small>
 						<h4>{{ site.data.people[14].first_name }} {{ site.data.people[14].last_name }}</h4>
 					</div>
 

src/pages/_includes/cards/project-progress.html

@@ -13,7 +13,7 @@
 				<h3 class="card-title mb-1">
 					<a href="#" class="text-reset">{{ project.title }}</a>
 				</h3>
-				<div class="text-muted">
+				<div class="text-secondary">
 					Updated 2 hours ago
 				</div>
 

src/pages/_includes/cards/project-summary.html

@@ -2,7 +2,7 @@
 	<div class="card-body p-4 py-5 text-center">
 		{% include ui/avatar.html size="xl" placeholder="W" class="mb-4" color=include.project-color rounded=true %}
 		<h3 class="mb-0">{{ include.title | default: "New website" }}</h3>
-		<p class="text-muted">Due to: {{ include.date | default: '28 Aug 2019' }}</p>
+		<p class="text-secondary">Due to: {{ include.date | default: '28 Aug 2019' }}</p>
 		<p class="mb-3">
 			<span class="badge bg-{{ include.stage-color | default: 'green' }}-lt">{{ include.stage | default: 'Waiting' }}</span>
 		</p>

src/pages/_includes/cards/sign-in.html

@@ -15,6 +15,6 @@
 	</div>
 </div>
 
-<div class="text-center text-muted mt-3">
+<div class="text-center text-secondary mt-3">
 	Don't have account yet? <a href="{{ site.base }}/sign-up.html" tabindex="-1">Sign up</a>
 </div>

src/pages/_includes/cards/sign-up.html

@@ -27,6 +27,6 @@
 	</div>
 </form>
 
-<div class="text-center text-muted mt-3">
+<div class="text-center text-secondary mt-3">
 	Already have account? <a href="{{ site.base }}/sign-in.html" tabindex="-1">Sign in</a>
 </div>

src/pages/_includes/cards/small-stats-2.html

@@ -16,9 +16,9 @@
 		<div class="float-right avatar{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
 			{% include ui/icon.html icon=icon %}
 		</div>
-		<div class="text-muted fw-normal mt-0">{{ include.title | default: 'Customers' }}</div>
+		<div class="text-secondary fw-normal mt-0">{{ include.title | default: 'Customers' }}</div>
 		<h3 class="h2 mt-2 mb-3">{{ include.count | default: "1,850" }}</h3>
-		<p class="mb-0 text-muted">
+		<p class="mb-0 text-secondary">
 			{% include ui/trending.html value=include.growth %}
 			<span class="text-nowrap">{{ include.description | default: 'Since last month' }}</span>
 		</p>

src/pages/_includes/cards/small-stats-3.html

@@ -4,6 +4,6 @@
 			{% include ui/trending.html value=include.percentage %}
 		</div>
 		<div class="h1 m-0">{{ include.number }}</div>
-		<div class="text-muted mb-3">{{ include.title }}</div>
+		<div class="text-secondary mb-3">{{ include.title }}</div>
 	</div>
 </div>

src/pages/_includes/cards/small-stats.html

@@ -28,7 +28,7 @@
 					<span class="float-right font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
 					{% endif %}
 				</div>
-				<div class="text-muted">
+				<div class="text-secondary">
 					{{ include.description | default: "Users" }}
 
 				</div>

src/pages/_includes/cards/store-list.html

@@ -11,8 +11,8 @@
 				<span class="badge badge-secondary-lt">New</span>
 				{% endif %}
 			</td>
-			<td class="text-end text-muted d-none d-md-table-cell text-nowrap">{{ forloop.index | random_number: 4, 100 }} reviews</td>
-			<td class="text-end text-muted d-none d-md-table-cell text-nowrap">{{ forloop.index | random_number: 4, 50 }} offers</td>
+			<td class="text-end text-secondary d-none d-md-table-cell text-nowrap">{{ forloop.index | random_number: 4, 100 }} reviews</td>
+			<td class="text-end text-secondary d-none d-md-table-cell text-nowrap">{{ forloop.index | random_number: 4, 50 }} offers</td>
 			<td class="text-end">
 				<strong>{{ product.price }}</strong>
 			</td>

src/pages/_includes/cards/store-product-grid.html

@@ -4,7 +4,7 @@
         <div class="card p-3">
             <img src="{{ site.base }}/img/products/{{ product.image }}" alt="" class="mb-3">
             <h3 class="mb-0">{{product.name}}</h3>
-            <div class="text-muted mb-2">{{product.producer}}</div>
+            <div class="text-secondary mb-2">{{product.producer}}</div>
             <h1 class="text-azure">{{product.price}}$</h1>
             <div class="d-flex justify-content-between align-items-center">
                 {% include ui/stars.html %}

src/pages/_includes/cards/subscribe.html

@@ -10,7 +10,7 @@
 				<h4 class="card-title m-0">
 					<a href="#">{{ person.full_name }}</a>
 				</h4>
-				<div class="text-muted">
+				<div class="text-secondary">
 					Working in {{ person.company }}
 				</div>
 				<div class="small mt-1">

src/pages/_includes/cards/table-users.html

@@ -24,7 +24,7 @@
 				</td>
 				<td>
 					<div>{{ person.full_name }}</div>
-					<div class="small text-muted">
+					<div class="small text-secondary">
 						Registered: {{ site.time | date: "%s" | minus: register_offset | date: '%b %-d, %Y' }}
 					</div>
 				</td>
@@ -34,7 +34,7 @@
 							<strong>{{ percentage }}%</strong>
 						</div>
 						<div class="float-right">
-							<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
+							<small class="text-secondary">Jun 11, 2015 - Jul 10, 2015</small>
 						</div>
 					</div>
 					{% include ui/progress.html value=percentage size="sm" color=percentage_color %}
@@ -47,7 +47,7 @@
 					{% include ui/payment.html payment=payment %}
 				</td>
 				<td>
-					<div class="small text-muted">Last login</div>
+					<div class="small text-secondary">Last login</div>
 					<div>{{ site.time | date: "%s" | minus: time_offset | to_pretty_time }}</div>
 				</td>
 				<td class="text-center">

src/pages/_includes/cards/tasks.html

@@ -12,18 +12,18 @@
 				<td class="w-100">
 					<a href="#" class="text-reset">{{ task.name }}</a>
 				</td>
-				<td class="text-nowrap text-muted">
+				<td class="text-nowrap text-secondary">
 					{% include ui/icon.html icon="calendar" %}
 					{{ forloop.index | random_date: site.random-date-from, site.random-date-to | date: '%B %d, %Y' }}
 				</td>
 				<td class="text-nowrap">
-					<a href="#" class="text-muted">
+					<a href="#" class="text-secondary">
 						{% include ui/icon.html icon="check" %}
 						{{ forloop.index | random_number: 0, 6 }}/{{ forloop.index | random_number: 5, 10 }}
 					</a>
 				</td>
 				<td class="text-nowrap">
-					<a href="#" class="text-muted">
+					<a href="#" class="text-secondary">
 						{% include ui/icon.html icon="message" %} {{ forloop.index | random_number: 0, 12 }}</a>
 				</td>
 				<td>

src/pages/_includes/cards/timeline.html

@@ -3,9 +3,9 @@
 		<div class="timeline-event-icon bg-twitter-lt">{% include ui/icon.html icon="brand-twitter" %}</div>
 		<div class="card timeline-event-card">
 			<div class="card-body">
-				<div class="text-muted float-end">10 hrs ago</div>
+				<div class="text-secondary float-end">10 hrs ago</div>
 				<h4>+1150 Followers</h4>
-				<p class="text-muted">You’re getting more and more followers, keep it up!</p>
+				<p class="text-secondary">You’re getting more and more followers, keep it up!</p>
 			</div>
 		</div>
 	</li>
@@ -13,9 +13,9 @@
 		<div class="timeline-event-icon">{% include ui/icon.html icon="briefcase" %}</div>
 		<div class="card timeline-event-card">
 			<div class="card-body">
-				<div class="text-muted float-end">2 hrs ago</div>
+				<div class="text-secondary float-end">2 hrs ago</div>
 				<h4>+3 New Products were added!</h4>
-				<p class="text-muted">Congratulations!</p>
+				<p class="text-secondary">Congratulations!</p>
 			</div>
 		</div>
 	</li>
@@ -23,9 +23,9 @@
 		<div class="timeline-event-icon">{% include ui/icon.html icon="check" %}</div>
 		<div class="card timeline-event-card">
 			<div class="card-body">
-				<div class="text-muted float-end">1 day ago</div>
+				<div class="text-secondary float-end">1 day ago</div>
 				<h4>Database backup completed!</h4>
-				<p class="text-muted">Download the <a href="#">latest backup</a>.</p>
+				<p class="text-secondary">Download the <a href="#">latest backup</a>.</p>
 			</div>
 		</div>
 	</li>
@@ -33,9 +33,9 @@
 		<div class="timeline-event-icon bg-facebook-lt">{% include ui/icon.html icon="brand-facebook" %}</div>
 		<div class="card timeline-event-card">
 			<div class="card-body">
-				<div class="text-muted float-end">1 day ago</div>
+				<div class="text-secondary float-end">1 day ago</div>
 				<h4>+290 Page Likes</h4>
-				<p class="text-muted">This is great, keep it up!</p>
+				<p class="text-secondary">This is great, keep it up!</p>
 			</div>
 		</div>
 	</li>
@@ -43,7 +43,7 @@
 		<div class="timeline-event-icon">{% include ui/icon.html icon="user-plus" %}</div>
 		<div class="card timeline-event-card">
 			<div class="card-body">
-				<div class="text-muted float-end">2 days ago</div>
+				<div class="text-secondary float-end">2 days ago</div>
 				<h4>+3 Friend Requests</h4>
 				<div class="avatar-list mt-3">
 					{% for person in site.data.people limit: 3 %}
@@ -57,7 +57,7 @@
 		<div class="timeline-event-icon">{% include ui/icon.html icon="photo" %}</div>
 		<div class="card timeline-event-card">
 			<div class="card-body">
-				<div class="text-muted float-end">3 days ago</div>
+				<div class="text-secondary float-end">3 days ago</div>
 				<h4>+2 New photos</h4>
 				<div class="mt-3">
 					<div class="row g-2">
@@ -80,9 +80,9 @@
 		<div class="timeline-event-icon">{% include ui/icon.html icon="settings" %}</div>
 		<div class="card timeline-event-card">
 			<div class="card-body">
-				<div class="text-muted float-end">2 weeks ago</div>
+				<div class="text-secondary float-end">2 weeks ago</div>
 				<h4>System updated to v2.02</h4>
-				<p class="text-muted">Check the complete changelog at the <a href="#">activity
+				<p class="text-secondary">Check the complete changelog at the <a href="#">activity
 					page</a>.</p>
 			</div>
 		</div>

src/pages/_includes/cards/user-card-bg.html

@@ -6,6 +6,6 @@
 	</div>
 	<div class="card-body text-center">
 		<div class="card-title mb-1">{{ person.full_name }}</div>
-		<div class="text-muted">{{ person.job_title }}</div>
+		<div class="text-secondary">{{ person.job_title }}</div>
 	</div>
 </a>

src/pages/_includes/cards/user-card-big.html

@@ -6,7 +6,7 @@
 			{% include ui/avatar.html size="xl" person=person rounded=true %}
 		</div>
 		<div class="card-title mb-1">{{ person.full_name }}</div>
-		<div class="text-muted">{{ person.job_title }}</div>
+		<div class="text-secondary">{{ person.job_title }}</div>
 	</div>
 	<a href="#" class="card-btn">View full profile</a>
 </div>

src/pages/_includes/cards/user-card.html

@@ -12,7 +12,7 @@
 			{% unless include.right %}{{ col-avatar }}{% endunless %}
 			<div class="col">
 				<div class="font-weight-medium">{{ person.full_name }}</div>
-				<div class="text-muted">{{ person.job_title }}</div>
+				<div class="text-secondary">{{ person.job_title }}</div>
 			</div>
 			{% if include.right %}{{ col-avatar }}{% endif %}
 		</div>

src/pages/_includes/cards/user-info.html

@@ -5,27 +5,27 @@
 	<div class="card-body">
 		<div class="card-title">{{ include.title | default: 'Basic info' }}</div>
 		<div class="mb-2">
-			{% include ui/icon.html icon="book" class="me-2 text-muted" %}
+			{% include ui/icon.html icon="book" class="me-2 text-secondary" %}
 			Went to: <strong>{{ person.university }}</strong>
 		</div>
 		<div class="mb-2">
-			{% include ui/icon.html icon="briefcase" class="me-2 text-muted" %}
+			{% include ui/icon.html icon="briefcase" class="me-2 text-secondary" %}
 			Worked at: <strong>{{ person.company }}</strong>
 		</div>
 		<div class="mb-2">
-			{% include ui/icon.html icon="home" class="me-2 text-muted" %}
+			{% include ui/icon.html icon="home" class="me-2 text-secondary" %}
 			Lives in: <strong>{{ person.city }}, {{ person.country }}</strong>
 		</div>
 		<div class="mb-2">
-			{% include ui/icon.html icon="map-pin" class="me-2 text-muted" %}
+			{% include ui/icon.html icon="map-pin" class="me-2 text-secondary" %}
 			From: <strong>{% include ui/flag.html flag=person.country_code %} {{ person.country }}</strong>
 		</div>
 		<div class="mb-2">
-			{% include ui/icon.html icon="calendar" class="me-2 text-muted" %}
+			{% include ui/icon.html icon="calendar" class="me-2 text-secondary" %}
 			Birth date: <strong>{{ person.birth_date }}</strong>
 		</div>
 		<div>
-			{% include ui/icon.html icon="clock" class="me-2 text-muted" %}
+			{% include ui/icon.html icon="clock" class="me-2 text-secondary" %}
 			Time zone: <strong>{{ person.time_zone }}</strong>
 		</div>
 	</div>

src/pages/_includes/cards/users-list-2.html

@@ -16,7 +16,7 @@
 					</a>
 					<div class="col text-truncate">
 						<a href="#" class="text-reset d-block text-truncate">{{ person.full_name }}</a>
-						<div class="text-muted text-truncate mt-n1">{{ forloop.index | random_date_ago: 6 | timeago }}</div>
+						<div class="text-secondary text-truncate mt-n1">{{ forloop.index | random_date_ago: 6 | timeago }}</div>
 					</div>
 				</div>
 			</div>

src/pages/_includes/cards/users-list-headers.html

@@ -23,7 +23,7 @@
 					<div class="col text-truncate">
 						<a href="#" class="text-body d-block">{{ person.full_name }}</a>
 						{% assign i = forloop.index | plus: offset %}
-						<div class="text-muted text-truncate mt-n1">{{ site.data.commits[i].description }}</div>
+						<div class="text-secondary text-truncate mt-n1">{{ site.data.commits[i].description }}</div>
 					</div>
 				</div>
 			</div>

src/pages/_includes/cards/users-list.html

@@ -26,13 +26,13 @@
 					<div class="col text-truncate">
 						<a href="#" class="text-reset d-block">{{ person.full_name }}</a>
 						{% assign i = forloop.index | plus: offset %}
-						<div class="d-block text-muted text-truncate mt-n1">{{ site.data.commits[i].description }}</div>
+						<div class="d-block text-secondary text-truncate mt-n1">{{ site.data.commits[i].description }}</div>
 					</div>
 					{% if hoverable %}
 					{% if checked-ids contains forloop.index %}
 					{% assign star-color = 'text-yellow' %}
 					{% else %}
-					{% assign star-color = 'text-muted' %}
+					{% assign star-color = 'text-secondary' %}
 					{% endif %}
 					<div class="col-auto">
 						<a href="#" class="list-group-item-actions{% if checked-ids contains forloop.index %} show{% endif %}">{% include ui/icon.html icon="star" class=star-color %}</a>

src/pages/_includes/layout/headers/page-header-2.html

@@ -2,7 +2,7 @@
 	<div class="row align-items-center">
 		<div class="col">
 			<h2 class="page-title">Gallery</h2>
-			<div class="text-muted mt-1">1-12 of 241 photos</div>
+			<div class="text-secondary mt-1">1-12 of 241 photos</div>
 		</div>
 		<div class="col-auto ms-auto d-print-none">
 			<div class="d-flex">

src/pages/_includes/layout/headers/page-header-3.html

@@ -3,7 +3,7 @@
 	<div class="row align-items-center">
 		<div class="col">
 			<h2 class="page-title">Improve cards with no border</h2>
-			<div class="text-muted mt-1">
+			<div class="text-secondary mt-1">
 				<a href="#" class="text-reset">#693</a>
 				opened by <a href="#" class="text-body">{{ person.full_name }}</a>
 				in <a href="#" class="text-body">Calendar Page</a>

src/pages/_includes/layout/headers/profile.html

@@ -11,7 +11,7 @@
 				<div class="my-2">Unemployed. Building a $1M solo business while traveling the world. Currently at $400k/yr.
 				</div>
 
-				<div class="list-inline list-inline-dots text-muted">
+				<div class="list-inline list-inline-dots text-secondary">
 					<div class="list-inline-item">
 						{% include ui/icon.html icon="map" inline=true %}
 						{{ person.university }}, {{ person.country }}

src/pages/_includes/layout/headers/uptime.html

@@ -9,7 +9,7 @@
 				<h2 class="page-title">
 					tabler-icons.io
 				</h2>
-				<div class="text-muted">
+				<div class="text-secondary">
 					<ul class="list-inline list-inline-dots mb-0">
 						<li class="list-inline-item"><span class="text-green">Up</span></li>
 						<li class="list-inline-item">Checked every 3 minutes</li>

src/pages/_includes/layout/homepage.html

@@ -77,22 +77,22 @@
 							<div class="col-auto d-flex align-items-center pe-2">
 								<span class="legend me-2 bg-primary"></span>
 								<span>Regular</span>
-								<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">915MB</span>
+								<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">915MB</span>
 							</div>
 							<div class="col-auto d-flex align-items-center px-2">
 								<span class="legend me-2 bg-info"></span>
 								<span>System</span>
-								<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">415MB</span>
+								<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">415MB</span>
 							</div>
 							<div class="col-auto d-flex align-items-center px-2">
 								<span class="legend me-2 bg-success"></span>
 								<span>Shared</span>
-								<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">201MB</span>
+								<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">201MB</span>
 							</div>
 							<div class="col-auto d-flex align-items-center ps-2">
 								<span class="legend me-2"></span>
 								<span>Free</span>
-								<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">612MB</span>
+								<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">612MB</span>
 							</div>
 						</div>
 					</div>

src/pages/_includes/layout/layouts-list.html

@@ -16,7 +16,7 @@
 					{% include ui/badge.html text="Soon!" color="yellow" class="ms-2" %}
 					{% endif %}
 				</h3>
-				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
 			</div>
 		</div>
 	</div>

src/pages/_includes/layout/navbar-side.html

@@ -42,7 +42,7 @@
 			{% unless include.hide-username %}
 			<div class="d-none d-xl-block ps-2">
 				<div>{{ person.full_name }}</div>
-				<div class="mt-1 small text-muted">{{ person.job_title }}</div>
+				<div class="mt-1 small text-secondary">{{ person.job_title }}</div>
 			</div>
 			{% endunless %}
 		</a>

src/pages/_includes/layout/page-header.html

@@ -28,7 +28,7 @@
 				</h2>
 
 				{% if description %}
-					<div class="text-muted mt-1">{{ description }}</div>
+					<div class="text-secondary mt-1">{{ description }}</div>
 				{% endif %}
 			</div>
 

src/pages/_includes/parts/activity.html

@@ -11,7 +11,7 @@
 					<div class="text-truncate">
 						{{ item.text | replace: '%p', person.full_name | replace: '%c', person.company }}
 					</div>
-					<div class="text-muted">{{ forloop.index | random_date_ago: 4 | timeago }}</div>
+					<div class="text-secondary">{{ forloop.index | random_date_ago: 4 | timeago }}</div>
 				</div>
 				{% if forloop.index < 5 %}
 				<div class="col-auto align-self-center">

src/pages/_includes/parts/charts/activity.html

@@ -14,19 +14,19 @@
 			<div class="col{% unless include.hide-breakpoint %}-md{% endunless %}-auto">
 				<div class="divide-y divide-y-fill">
 					<div class="px-3">
-						<div class="text-muted">
+						<div class="text-secondary">
 							<span class="status-dot bg-primary"></span> Mobile
 						</div>
 						<div class="h2">11,425</div>
 					</div>
 					<div class="px-3">
-						<div class="text-muted">
+						<div class="text-secondary">
 							<span class="status-dot bg-azure"></span> Desktop
 						</div>
 						<div class="h2">6,458</div>
 					</div>
 					<div class="px-3">
-						<div class="text-muted">
+						<div class="text-secondary">
 							<span class="status-dot bg-green"></span> Tablet
 						</div>
 						<div class="h2">3,985</div>

src/pages/_includes/parts/dropdown/days.html

@@ -1,5 +1,5 @@
 <div class="dropdown">
-   <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ include.value | default: 'Last 7 days' }}</a>
+   <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ include.value | default: 'Last 7 days' }}</a>
    <div class="dropdown-menu dropdown-menu-end">
       <a class="dropdown-item active" href="#">Last 7 days</a>
       <a class="dropdown-item" href="#">Last 30 days</a>

src/pages/_includes/parts/dropdown/months.html

@@ -1,5 +1,5 @@
 <div class="dropdown">
-	<a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ include.value | default: 'Current month' }}</a>
+	<a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ include.value | default: 'Current month' }}</a>
 	<div class="dropdown-menu dropdown-menu-end">
 		<a class="dropdown-item active" href="#">Current month</a>
 		<a class="dropdown-item" href="#">Last month</a>

src/pages/_includes/parts/form/selectgroup-project-manager.html

@@ -14,7 +14,7 @@
 					{% include ui/avatar.html person=person class="me-3" %}
 					<div>
 						<div class="font-weight-medium">{{ person.full_name }}</div>
-						<div class="text-muted">{{ person.job_title }}</div>
+						<div class="text-secondary">{{ person.job_title }}</div>
 					</div>
 				</div>
 			</div>

src/pages/_includes/parts/modals/danger.html

@@ -5,7 +5,7 @@
 	{% include ui/icon.html icon="alert-triangle" color="danger" size="lg" class="mb-2" %}
 
 	<h3>Are you sure?</h3>
-	<div class="text-muted">Do you really want to remove 84 files? What you've done cannot be undone.</div>
+	<div class="text-secondary">Do you really want to remove 84 files? What you've done cannot be undone.</div>
 </div>
 
 <div class="modal-footer">

src/pages/_includes/parts/modals/deactivate.html

@@ -4,7 +4,7 @@
 		<div class="col">
 			<div class="h3">Are you sure you want to delete your account?
 			</div>
-			<div class="text-muted">Deleting your account is permanent and will remove all content including comments,
+			<div class="text-secondary">Deleting your account is permanent and will remove all content including comments,
 				avatars and profile settings. Are you sure you want to delete your account?
 			</div>
 

src/pages/_includes/parts/modals/report.html

@@ -20,7 +20,7 @@
 					</span>
 					<span class="form-selectgroup-label-content">
 						<span class="form-selectgroup-title strong mb-1">{{ r[0] }}</span>
-						<span class="d-block text-muted">{{ r[1] }}</span>
+						<span class="d-block text-secondary">{{ r[1] }}</span>
 					</span>
 				</span>
 			</label>

src/pages/_includes/parts/modals/success.html

@@ -5,7 +5,7 @@
 	{% include ui/icon.html icon="circle-check" color="green" size="lg" class="mb-2" %}
 
 	<h3>Payment succedeed</h3>
-	<div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to {{ site.email }}.</div>
+	<div class="text-secondary">Your payment of $290 has been successfully submitted. Your invoice has been sent to {{ site.email }}.</div>
 </div>
 
 <div class="modal-footer">

src/pages/_includes/parts/nav/nav-aside.html

@@ -6,7 +6,7 @@
 		{% for item in items %}
 		<a class="list-group-item list-group-item-action d-flex align-items-center{% if forloop.first %} active{% endif %}" href="#">
 			{{ item }}
-			<small class="text-muted ms-auto">{{ forloop.index | random_number: 11, 200 }}</small>
+			<small class="text-secondary ms-auto">{{ forloop.index | random_number: 11, 200 }}</small>
 		</a>
 		{% endfor %}
 	</div>

src/pages/_includes/parts/tasks.html

@@ -24,7 +24,7 @@
 							<h3 class="card-title">{{ task.name }}</h3>
 
 							{% if task.description %}
-							<div class="text-muted">{{ task.description }}</div>
+							<div class="text-secondary">{{ task.description }}</div>
 							{% endif %}
 
 							{% if task.image %}
@@ -50,7 +50,7 @@
 									</div>
 									{% endif %}
 
-									<div class="col-auto text-muted">
+									<div class="col-auto text-secondary">
 										{% include ui/switch-icon.html icon="heart" icon-b-color="red" variant="scale" active=task.favorite %}
 										{% if task.likes %}{{ task.likes }}{% endif %}
 									</div>
@@ -80,7 +80,7 @@
 								<div>
 									{% if subtask.done %}
 									{% include ui/icon.html icon="check" color="muted" %}
-									<span class="text-muted text-decoration-line-through">{{ subtask.name }}</span>
+									<span class="text-secondary text-decoration-line-through">{{ subtask.name }}</span>
 									{% else %}
 									{% include ui/icon.html icon="check" color="green" %}
 									{{ subtask.name }}

src/pages/_includes/ui/alert.html

@@ -15,7 +15,7 @@
 
 	{% if include.description %}
 		<h4 class="alert-title">{{ include.text | default: "This is a custom alert box!" }}</h4>
-		<div class="text-muted">{{ include.description }}</div>
+		<div class="text-secondary">{{ include.description }}</div>
 	{% else %}
 		{{ include.text | default: "This is a custom alert box!" }}
 	{% endif %}

src/pages/_includes/ui/empty.html

@@ -12,7 +12,7 @@
 
 
 	<p class="empty-title">{{ include.title | default: "No results found" }}</p>
-	<p class="empty-subtitle text-muted">
+	<p class="empty-subtitle text-secondary">
 		{{ include.subtitle | default: "Try adjusting your search or filter to find what you're looking for." }}
 	</p>
 	<div class="empty-action">

src/pages/_includes/ui/form/input-icon.html

@@ -1,7 +1,7 @@
 {% capture addon %}
 	{% if include.loader %}
 		<span class="input-icon-addon{% if include.icon-class %} {{ include.icon-class }}{% endif %}">
-			{% include ui/spinner.html class="text-muted" size="sm" %}
+			{% include ui/spinner.html class="text-secondary" size="sm" %}
 		</span>
 	{% else %}
 		{% assign icon = include.icon | default: 'search' %}

src/pages/_includes/ui/progress-description.html

@@ -5,7 +5,7 @@
    <div class="d-flex mb-1 align-items-center lh-1">
       <div class="fs-5 font-weight-bolder m-0">{{ include.label | default: 'Label' }}</div>
       {% if include.description %}
-         <div class="fs-6 text-muted ms-2">{{ include.description }}</div>
+         <div class="fs-6 text-secondary ms-2">{{ include.description }}</div>
       {% endif %}
       <span class="ms-auto fs-6 strong">{{ include.value }}%</span>
    </div>

src/pages/_includes/ui/table.html

@@ -30,7 +30,7 @@
 					{% include ui/avatar.html person-id=person.id class="me-2" %}
 					<div class="flex-fill">
 						<div class="font-weight-medium">{{ person.full_name }}</div>
-						<div class="text-muted"><a href="#" class="text-reset">{{ person.email }}</a></div>
+						<div class="text-secondary"><a href="#" class="text-reset">{{ person.email }}</a></div>
 					</div>
 				</div>
 			</td>
@@ -42,21 +42,21 @@
 			{% if include.avatars %}
 			<td {% if include.mobile %}data-label="Title" {% endif %}>
 				<div>{{ person.job_title }}</div>
-				<div class="text-muted">{{ person.department }}</div>
+				<div class="text-secondary">{{ person.department }}</div>
 			</td>
 			{% else %}
-			<td class="text-muted" {% if include.mobile %}data-label="Title" {% endif %}>
+			<td class="text-secondary" {% if include.mobile %}data-label="Title" {% endif %}>
 				{{ person.job_title }}, {{ person.department }}
 			</td>
 			{% endif %}
 
 			{% unless include.avatars %}
-			<td class="text-muted" {% if include.mobile %}data-label="Email" {% endif %}><a href="#" class="text-reset">{{
+			<td class="text-secondary" {% if include.mobile %}data-label="Email" {% endif %}><a href="#" class="text-reset">{{
 				person.email }}</a></td>
 			{% endunless %}
 
 
-			<td class="text-muted" {% if include.mobile %}data-label="Role" {% endif %}>
+			<td class="text-secondary" {% if include.mobile %}data-label="Role" {% endif %}>
 				{% assign role-id = forloop.index | random_number: 0, 2 %}
 				{{ roles[role-id] }}
 			</td>

src/pages/cards.html

@@ -93,7 +93,7 @@ menu: base.cards.base
 			</div>
 			<div class="card-body">
 				<h3 class="card-title">Card with icon bg</h3>
-				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
 			</div>
 		</div>
 	</div>
@@ -101,7 +101,7 @@ menu: base.cards.base
 		<div class="card bg-primary-lt">
 			<div class="card-body">
 				<h3 class="card-title">Card with primary light background</h3>
-				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
 			</div>
 		</div>
 	</div>
@@ -133,7 +133,7 @@ menu: base.cards.base
 			<div class="ribbon ribbon-top bg-yellow">{% include ui/icon.html icon="star" %}</div>
 			<div class="card-body">
 				<h3 class="card-title">Card with top ribbon</h3>
-				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
 			</div>
 		</div>
 	</div>
@@ -142,7 +142,7 @@ menu: base.cards.base
 			<div class="ribbon bg-red">NEW</div>
 			<div class="card-body">
 				<h3 class="card-title">Card with text ribbon</h3>
-				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
 			</div>
 		</div>
 	</div>
@@ -169,7 +169,7 @@ menu: base.cards.base
 		<div class="card">
 			<div class="card-body">
 				<h3 class="card-title">Card with footer</h3>
-				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
 					neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
 			</div>
 			<div class="card-footer">
@@ -181,7 +181,7 @@ menu: base.cards.base
 		<div class="card">
 			<div class="card-body">
 				<h3 class="card-title">Card with transparent footer</h3>
-				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
 					neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
 			</div>
 			<div class="card-footer card-footer-transparent">

src/pages/job-listing.html

@@ -41,7 +41,7 @@ menu: extra.job-listing
 			<div class="mb-4">
 				{% include ui/form/check.html switch=true title-on="On" title-off="Off" %}
 
-				<div class="small text-muted">Only show companies that can sponsor a visa</div>
+				<div class="small text-secondary">Only show companies that can sponsor a visa</div>
 			</div>
 
 			<div class="form-label">Location</div>
@@ -85,12 +85,12 @@ menu: extra.job-listing
 								</div>
 								<div class="row">
 									<div class="col-md">
-										<div class="mt-3 list-inline list-inline-dots mb-0 text-muted d-sm-block d-none">
+										<div class="mt-3 list-inline list-inline-dots mb-0 text-secondary d-sm-block d-none">
 											<div class="list-inline-item">{% include ui/icon.html icon="building-community" class="icon-inline" %} {{ job.company }}</div>
 											<div class="list-inline-item">{% include ui/icon.html icon="license" class="icon-inline" %} {{ job.type }}</div>
 											<div class="list-inline-item">{% include ui/icon.html icon="map-pin" class="icon-inline" %} {{ job.location }}</div>
 										</div>
-										<div class="mt-3 list mb-0 text-muted d-block d-sm-none">
+										<div class="mt-3 list mb-0 text-secondary d-block d-sm-none">
 											<div class="list-item">{% include ui/icon.html icon="building-community" class="icon-inline" %} {{ job.company }}</div>
 											<div class="list-item">{% include ui/icon.html icon="license" class="icon-inline" %} {{ job.type }}</div>
 											<div class="list-item">{% include ui/icon.html icon="map-pin" class="icon-inline" %} {{ job.location }}</div>
@@ -99,7 +99,7 @@ menu: extra.job-listing
 									<div class="col-md-auto">
 										<div class="mt-3 badges">
 											{% for tag in job.tags %}
-											<a href="#" class="badge badge-outline text-muted border fw-normal badge-pill">{{ tag }}</a>
+											<a href="#" class="badge badge-outline text-secondary border fw-normal badge-pill">{{ tag }}</a>
 											{% endfor %}
 										</div>
 									</div>

src/pages/license.html

@@ -24,12 +24,12 @@ menu: extra.license
 						{% include ui/icon.html icon="scale" size="md" %}
 					</div>
 					<div>
-						<small class="text-muted">tabler/tabler is licensed under the</small>
+						<small class="text-secondary">tabler/tabler is licensed under the</small>
 						<h3 class="lh-1">MIT License</h3>
 					</div>
 				</div>
 
-				<div class="text-muted mb-3">
+				<div class="text-secondary mb-3">
 					A short and simple permissive license with conditions only requiring preservation of copyright and
 					license notices. Licensed works, modifications, and larger works may be distributed under different terms
 					and without source code.

src/pages/page-loader.html

@@ -8,6 +8,6 @@ hide-logo: true
 	<div class="mb-3">
 		<a href="{{ site.base }}" class="navbar-brand navbar-brand-autodark"><img src="{{ site.base }}/static/logo-small.svg" height="36" alt=""></a>
 	</div>
-	<div class="text-muted mb-3">Preparing application</div>
+	<div class="text-secondary mb-3">Preparing application</div>
 	{% include ui/progress.html indeterminate=true size="sm" %}
 </div>

src/pages/pricing-table.html

@@ -11,22 +11,22 @@ menu: extra.pricing-table
 				<tr>
 					 <td class="w-50">
 						  <h2>Pricing plans for teams of all sizes</h2>
-						  <div class="text-muted text-wrap">
+						  <div class="text-secondary text-wrap">
 								Choose an affordable plan that comes with the best features to engage your audience, create customer loyalty and increase sales.
 						  </div>
 					 </td>
 					 <td class="text-center">
-						  <div class="text-uppercase text-muted font-weight-medium">Starter</div>
+						  <div class="text-uppercase text-secondary font-weight-medium">Starter</div>
 						  <div class="display-6 fw-bold my-3">$0</div>
 						  <a href="#" class="btn w-100">Choose plan</a>
 					 </td>
 					 <td class="text-center">
-						  <div class="text-uppercase text-muted font-weight-medium">Professional</div>
+						  <div class="text-uppercase text-secondary font-weight-medium">Professional</div>
 						  <div class="display-6 fw-bold my-3">$9</div>
 						  <a href="#" class="btn btn-green w-100">Choose plan</a>
 					 </td>
 					 <td class="text-center">
-						  <div class="text-uppercase text-muted font-weight-medium">Business</div>
+						  <div class="text-uppercase text-secondary font-weight-medium">Business</div>
 						  <div class="display-6 fw-bold my-3">$16</div>
 						  <a href="#" class="btn w-100">Choose plan</a>
 					 </td>

src/pages/settings-plan.html

@@ -6,7 +6,7 @@ title: Settings
 <div class="card-body">
 	<h2 class="mb-4">Plans</h2>
 
-	<p class="text-muted mb-4">This workspace’s Basic Plan is set to $34 per month and will renew on June 19, 2022.</p>
+	<p class="text-secondary mb-4">This workspace’s Basic Plan is set to $34 per month and will renew on June 19, 2022.</p>
 
 	<div class="row row-cards">
 		<div class="col-lg-4">

src/pages/sign-in-cover.html

@@ -17,7 +17,7 @@ body-class: d-flex flex-column bg-white
 
 			{% include forms/sign-in.html %}
 
-			<div class="text-center text-muted mt-3">
+			<div class="text-center text-secondary mt-3">
 				Don't have account yet? <a href="{{ site.base }}/sign-up.html" tabindex="-1">Sign up</a>
 			</div>
 		</div>

src/pages/sign-in-link.html

@@ -7,13 +7,13 @@ title: Sign in link
 	<div class="my-5">
 		<h2 class="h1">Check your inbox</h2>
 
-		<p class="fs-h3 text-muted">
+		<p class="fs-h3 text-secondary">
 			We've sent you a magic link to <strong>{{ site.email }}</strong>.<br />
 			Please click the link to confirm your address.
 		</p>
 	</div>
 
-	<div class="text-center text-muted mt-3">
+	<div class="text-center text-secondary mt-3">
 		Can't see the email? Please check the spam folder.<br />
 		Wrong email? Please <a href="#">re-enter your address</a>.
 	</div>

src/pages/steps.html

@@ -65,19 +65,19 @@ menu: base.steps
 				<ul class="steps steps-vertical">
 					<li class="step-item">
 						<div class="h4 m-0">Order received</div>
-						<div class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus culpa cum expedita ipsam laborum nam ratione reprehenderit sed sint tenetur!</div>
+						<div class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus culpa cum expedita ipsam laborum nam ratione reprehenderit sed sint tenetur!</div>
 					</li>
 					<li class="step-item">
 						<div class="h4 m-0">Order received</div>
-						<div class="text-muted">Lorem ipsum dolor sit amet.</div>
+						<div class="text-secondary">Lorem ipsum dolor sit amet.</div>
 					</li>
 					<li class="step-item active">
 						<div class="h4 m-0">Out for delivery</div>
-						<div class="text-muted">Lorem ipsum dolor sit amet.</div>
+						<div class="text-secondary">Lorem ipsum dolor sit amet.</div>
 					</li>
 					<li class="step-item">
 						<div class="h4 m-0">Finalized</div>
-						<div class="text-muted">Lorem ipsum dolor sit amet.</div>
+						<div class="text-secondary">Lorem ipsum dolor sit amet.</div>
 					</li>
 				</ul>
 			</div>

src/pages/trial-ended.html

@@ -6,7 +6,7 @@ layout: single
 	<div class="card-body">
 		<h2 class="mb-3">Your free trial period has expired!</h2>
 
-		<p class="text-muted mb-4">
+		<p class="text-secondary mb-4">
 			If you want to continue to benefit from Tabler, it's time to upgrade your plan.
 		</p>
 
@@ -15,21 +15,21 @@ layout: single
 				<span class="col-auto">{% include ui/icon.html icon="check" class="me-1 text-success" %}</span>
 				<span class="col">
 					<strong class="d-block">Over 800+ productions</strong>
-					<span class="d-block text-muted">Unlimited movies, TV shows and more.</span>
+					<span class="d-block text-secondary">Unlimited movies, TV shows and more.</span>
 				</span>
 			</li>
 			<li class="row g-2">
 				<span class="col-auto">{% include ui/icon.html icon="check" class="me-1 text-success" %}</span>
 				<span class="col">
 					<strong class="d-block">Watch everywhere</strong>
-					<span class="d-block text-muted">Watch on smart TVs, PlayStation, Xbox, Apple TV, Blu-ray players and more.</span>
+					<span class="d-block text-secondary">Watch on smart TVs, PlayStation, Xbox, Apple TV, Blu-ray players and more.</span>
 				</span>
 			</li>
 			<li class="row g-2">
 				<span class="col-auto">{% include ui/icon.html icon="check" class="me-1 text-success" %}</span>
 				<span class="col">
 					<strong class="d-block">Personalize</strong>
-					<span class="d-block text-muted">Choose your own style, watch what you like.</span>
+					<span class="d-block text-secondary">Choose your own style, watch what you like.</span>
 				</span>
 			</li>
 		</ul>
@@ -40,7 +40,7 @@ layout: single
 			</a>
 		</div>
 
-		<p class="text-muted">
+		<p class="text-secondary">
 			If you need to get a trial extension please feel free to <a href="#">contact us</a>.
 		</p>
 	</div>

src/pages/typography.html

@@ -41,7 +41,7 @@ menu: base.typography
 			<div class="col-md-3 markdown">
 				<h4>Small Text</h4>
 				<p>Well, Mercia's a temperate zone! You don't vote for kings. Now, look here, my good man. </p>
-				<p class="text-muted small lh-base">Who's that then? Well, we did do the nose.</p>
+				<p class="text-secondary small lh-base">Who's that then? Well, we did do the nose.</p>
 			</div>
 
 
@@ -108,11 +108,14 @@ menu: base.typography
 
 			<div class="col-md-4 markdown">
 				<h3>Text color</h3>
-				<div class="text-muted">This is an example of muted text.</div>
+				<div class="text-primary">This is an example of primary text.</div>
+				<div class="text-secondary">This is an example of secondary text.</div>
+				<div class="text-body">This is an example of body text.</div>
 				<div class="text-success">This is an example of success text.</div>
 				<div class="text-info">This is an example of info text.</div>
 				<div class="text-warning">This is an example of warning text.</div>
 				<div class="text-danger">This is an example of danger text.</div>
+				<div class="text-pink">This is an example of pink text.</div>
 			</div>
 
 			<div class="col-md-4 markdown">
@@ -122,6 +125,16 @@ menu: base.typography
 				</address>
 				<address><strong>Full name <br></strong><a href="mailto:#">[email protected]</a></address>
 			</div>
+
+			<div class="col-md-4 markdown">
+				<h3>Typography</h3>
+
+				<div>
+					{% for i in (1..6) %}
+					<h{{ i }}>H{{ i }} Lorem ipsum dolor sit amet</h{{ i }}>
+					{% endfor %}
+				</div>
+			</div>
 		</div>
 	</div>
 </div>

src/pages/users.html

@@ -16,7 +16,7 @@ menu: extra.users
 			<div class="card-body p-4 text-center">
 				{% include ui/avatar.html size="xl" rounded=true person=person class="mb-3" %}
 				<h3 class="m-0 mb-1"><a href="#">{{ person.full_name }}</a></h3>
-				<div class="text-muted">{{ person.job_title }}</div>
+				<div class="text-secondary">{{ person.job_title }}</div>
 
 				<div class="mt-3">
 					{% if forloop.index == 1 %}

src/pages/wizard.html

@@ -8,7 +8,7 @@ menu: extra.wizard
 	<div class="card-body text-center py-4 p-sm-5">
 		{% include ui/illustration.html image="undraw_sign_in_e6hj.svg" height="120" class="mb-n2" %}
 		<h1 class="mt-5">Welcome to Tabler!</h1>
-		<p class="text-muted">Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again.</p>
+		<p class="text-secondary">Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again.</p>
 	</div>
 
 	{% include ui/hr.html text="your data" position="center" class="hr-text-spaceless" %}

src/scss/_debug.scss

@@ -41,7 +41,7 @@ $debug: false;
   @debug ("gray-900: '#{$gray-900}'");
 
   @debug ("border-color: '#{$border-color}'");
-  @debug ("text-muted: '#{$text-muted}'");
+  @debug ("text-secondary: '#{$text-secondary}'");
 
   @each $name, $color in $social-colors {
     @debug ("#{$name}: '#{$color}'");

src/scss/_variables-dark.scss

@@ -13,5 +13,5 @@ $body-color-dark: $light !default;
 $body-emphasis-color-dark: $white !default;
 
 $code-color-dark: var(--#{$prefix}gray-300) !default;
-$text-muted-dark: rgba(153, 159, 164, 1) !default;
+$text-secondary-dark: rgba(153, 159, 164, 1) !default;
  

src/scss/_variables.scss

@@ -127,9 +127,9 @@ $blockquote-font-size: $font-size-base !default;
 
 // COLORS
 $min-contrast-ratio: 1.5 !default;
-$text-muted-opacity: 0.7 !default;
-$text-muted-light-opacity: 0.4 !default;
-$text-muted-dark-opacity: 0.8 !default;
+$text-secondary-opacity: 0.7 !default;
+$text-secondary-light-opacity: 0.4 !default;
+$text-secondary-dark-opacity: 0.8 !default;
 
 $border-opacity: 0.16 !default;
 $border-light-opacity: 0.08 !default;
@@ -191,9 +191,9 @@ $color-green: #2fb344;
 $color-teal: #0ca678;
 $color-cyan: #17a2b8;
 
-$text-muted: $gray-600 !default;
-$text-muted-light: $gray-500 !default;
-$text-muted-dark: $gray-700 !default;
+$text-secondary: $gray-600 !default;
+$text-secondary-light: $gray-500 !default;
+$text-secondary-dark: $gray-700 !default;
 
 $border-color: $gray-300 !default;
 $border-color-translucent: rgba(4, 32, 69, 0.14);
@@ -202,12 +202,12 @@ $border-dark-color: $gray-400 !default;
 $border-dark-color-translucent: rgba(4, 32, 69, 0.27);
 
 $border-active-color: mix(
-  $text-muted,
+  $text-secondary,
   #ffffff,
   percentage($border-active-opacity)
 ) !default;
 $border-active-color-translucent: rgba(
-  $text-muted,
+  $text-secondary,
   $border-active-opacity
 ) !default;
 
@@ -215,13 +215,13 @@ $active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
 $active-color: var(--#{$prefix}primary) !default;
 $active-border-color: var(--#{$prefix}primary) !default;
 
-$hover-bg: rgba(var(--#{$prefix}muted-rgb), 0.04) !default;
+$hover-bg: rgba(var(--#{$prefix}text-secondary-rgb), 0.04) !default;
 
 $disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $disabled-color: var(--#{$prefix}gray-300) !default;
 
 $primary: $blue !default;
-$secondary: $text-muted !default;
+$secondary: $text-secondary !default;
 $success: $green !default;
 $info: $azure !default;
 $warning: $orange !default;
@@ -231,14 +231,14 @@ $link-color: $primary !default;
 
 $theme-colors: (
   "primary": $primary,
-  "secondary": $text-muted,
+  "secondary": $text-secondary,
   "success": $success,
   "info": $info,
   "warning": $warning,
   "danger": $danger,
   "light": $light,
   "dark": $dark,
-  "muted": $text-muted,
+  "muted": $text-secondary,
 ) !default;
 
 $extra-colors: (
@@ -320,7 +320,7 @@ $kbd-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $kbd-font-size: var(--#{$prefix}font-size-h5) !default;
 $kbd-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
   var(--#{$prefix}border-color) !default;
-$kbd-color: var(--#{$prefix}muted-dark) !default;
+$kbd-color: var(--#{$prefix}text-secondary-dark) !default;
 $kbd-bg: var(--#{$prefix}code-bg) !default;
 $kbd-border-radius: var(--#{$prefix}border-radius) !default;
 
@@ -491,7 +491,7 @@ $alert-border-color: var(--#{$prefix}border-color-translucent) !default;
 $alert-shadow: rgba($dark, 0.04) 0 2px 4px 0 !default;
 
 // Breadcrumb
-$breadcrumb-divider-color: var(--#{$prefix}muted) !default;
+$breadcrumb-divider-color: var(--#{$prefix}text-secondary) !default;
 $breadcrumb-link-color: var(--#{$prefix}link-color) !default;
 $breadcrumb-active-color: inherit !default;
 $breadcrumb-active-font-weight: var(--#{$prefix}font-weight-bold) !default;
@@ -557,8 +557,8 @@ $card-border-width: var(--#{$prefix}border-width) !default;
 $card-border-color: var(--#{$prefix}border-color-translucent) !default;
 $card-border-radius: var(--#{$prefix}border-radius) !default;
 
-$card-spacer-x: 1.5rem !default;
-$card-spacer-y: 1.5rem !default;
+$card-spacer-x: 1.25rem !default;
+$card-spacer-y: 1.25rem !default;
 
 $card-cap-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $card-cap-color: inherit !default;
@@ -629,7 +629,7 @@ $loader-size: 2.5rem !default;
 
 // Lists
 $list-group-header-bg: var(--#{$prefix}bg-surface-tertiary) !default;
-$list-group-header-color: var(--#{$prefix}muted) !default;
+$list-group-header-color: var(--#{$prefix}text-secondary) !default;
 
 $list-group-border-color: var(--#{$prefix}border-color) !default;
 $list-group-item-padding-y: $card-cap-padding-y !default;
@@ -671,7 +671,7 @@ $modal-sm: 380px !default;
 // Nav
 $nav-link-padding-y: 0.5rem !default;
 $nav-link-padding-x: 0.75rem !default;
-$nav-link-color: var(--#{$prefix}muted) !default;
+$nav-link-color: var(--#{$prefix}text-secondary) !default;
 $nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
 $nav-link-icon-size: $icon-size !default;
 $nav-link-icon-color: var(--#{$prefix}icon-color) !default;
@@ -707,7 +707,7 @@ $navbar-light-active-color: var(--#{$prefix}body-color) color !default;
 $navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
 $navbar-light-active-bg: rgba(0, 0, 0, 0.06) !default;
 
-$navbar-dark-color: rgba($white, $text-muted-opacity) !default;
+$navbar-dark-color: rgba($white, $text-secondary-opacity) !default;
 $navbar-dark-brand-color: $white !default;
 $navbar-dark-active-color: $white !default;
 $navbar-dark-disabled-color: var(--#{$prefix}disabled-color) !default;
@@ -733,6 +733,11 @@ $navbar-active-border-color: var(--#{$prefix}primary) !default;
 // Sidebar
 $sidebar-width: 15rem !default;
 
+// Page
+$page-title-font-size: var(--#{$prefix}font-size-h2) !default;
+$page-title-line-height: var(--#{$prefix}line-height-h4) !default;
+$page-title-font-weight: var(--#{$prefix}font-weight-headings) !default;
+
 // Popover
 $popover-bg: var(--#{$prefix}bg-surface) !default;
 $popover-header-bg: transparent !default;
@@ -743,13 +748,13 @@ $popover-body-color: inherit !default;
 $footer-padding-y: 2rem !default;
 $footer-bg: $white !default;
 $footer-border-color: var(--#{$prefix}border-color) !default;
-$footer-color: var(--#{$prefix}muted) !default;
+$footer-color: var(--#{$prefix}text-secondary) !default;
 
 // Pagination
 $pagination-border-width: 0 !default;
 $pagination-padding-y: 0.25rem !default;
 $pagination-padding-x: 0.25rem !default;
-$pagination-color: var(--#{$prefix}muted) !default;
+$pagination-color: var(--#{$prefix}text-secondary) !default;
 $pagination-bg: transparent !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
@@ -784,7 +789,7 @@ $table-border-color: var(--#{$prefix}border-color-translucent) !default;
 $table-th-border-color: var(--#{$prefix}border-color-translucent) !default;
 $table-th-padding-x: $table-cell-padding-x !default;
 $table-th-padding-y: 0.5rem !default;
-$table-th-color: var(--#{$prefix}muted) !default;
+$table-th-color: var(--#{$prefix}text-secondary) !default;
 $table-th-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $table-striped-order: even !default;
 $table-striped-bg: var(--#{$prefix}bg-surface-tertiary) !default;
@@ -798,7 +803,7 @@ $table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org
 
 // Toasts
 $toast-border-color: var(--#{$prefix}border-color) !default;
-$toast-header-color: var(--#{$prefix}muted) !default;
+$toast-header-color: var(--#{$prefix}text-secondary) !default;
 
 // Tracking
 $tracking-height: 1.5rem !default;
@@ -826,10 +831,10 @@ $input-border-color: var(--#{$prefix}border-color) !default;
 $input-border-color-translucent: var(
   --#{$prefix}border-color-translucent
 ) !default;
-$input-placeholder-color: $text-muted-light !default;
+$input-placeholder-color: $text-secondary-light !default;
 
 $input-group-addon-bg: var(--#{$prefix}bg-surface-secondary) !default;
-$input-group-addon-color: var(--#{$prefix}muted) !default;
+$input-group-addon-color: var(--#{$prefix}text-secondary) !default;
 
 $input-border-radius: var(--#{$prefix}border-radius) !default;
 
@@ -855,9 +860,9 @@ $form-check-input-indeterminate-bg-color: var(--#{$prefix}primary) !default;
 
 $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle r='3' fill='#{$white}' cx='8' cy='8' /></svg>") !default;
 
-$form-check-label-disabled-opacity: $text-muted-opacity;
+$form-check-label-disabled-opacity: $text-secondary-opacity;
 
-$form-select-indicator-color: $text-muted-light !default;
+$form-select-indicator-color: $text-secondary-light !default;
 $form-select-box-shadow: var(--#{$prefix}box-shadow-input) !default;
 
 $form-switch-width: 2rem !default;