Update CSS class from text-muted to text-secondary for better Boo…

…tstrap 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,15 +62,15 @@ 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">
   <div class="card-header">
     <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,15 +215,15 @@ 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>
 <div class="card">
   <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,31 +259,31 @@ 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>
     </div>
     <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>
     </div>
     <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>
     </div>
     <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">