From 7fdbeb6c46201ae80d6e71e2df7016735b771bf2 Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Sat, 9 Dec 2023 17:04:33 -0500
Subject: [PATCH] fix: use !important on CSS text utils

---
 .../src/examples/icons.html                       |  1 +
 packages/common/src/styles/extra-styling.scss     | 15 ++++++++-------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/icons.html b/examples/vite-demo-vanilla-bundle/src/examples/icons.html
index da8251b53..236b8eebf 100644
--- a/examples/vite-demo-vanilla-bundle/src/examples/icons.html
+++ b/examples/vite-demo-vanilla-bundle/src/examples/icons.html
@@ -51,6 +51,7 @@ <h5 class="title is-5 section-title">
   Text Utilities
 </h5>
 <div class="text-utilities section-container">
+  <div class="slick-col-medium-2 text-bold padding-2px">text-bold</div>
   <div class="slick-col-medium-2 text-center padding-2px">text-center</div>
   <div class="slick-col-medium-2 text-left padding-2px">text-left</div>
   <div class="slick-col-medium-2 text-right padding-2pxt">text-right</span></div>
diff --git a/packages/common/src/styles/extra-styling.scss b/packages/common/src/styles/extra-styling.scss
index 27bd1a783..0e003b0b2 100644
--- a/packages/common/src/styles/extra-styling.scss
+++ b/packages/common/src/styles/extra-styling.scss
@@ -58,13 +58,14 @@ $slick-padding-max-count: 30;
 }
 
 /* Text and Alignment Utilities */
-.text-center { text-align: center; }
-.text-left   { text-align: left;   }
-.text-right  { text-align: right;  }
-.text-lowercase { text-transform: lowercase;  }
-.text-uppercase { text-transform: uppercase;  }
-.text-underline { text-decoration: underline; }
-.text-italic { font-style: italic; }
+.text-bold { font-weight: bold !important; }
+.text-italic { font-style: italic !important; }
+.text-center { text-align: center !important; }
+.text-left   { text-align: left !important; }
+.text-right  { text-align: right !important; }
+.text-lowercase { text-transform: lowercase !important; }
+.text-uppercase { text-transform: uppercase !important; }
+.text-underline { text-decoration: underline !important; }
 
 .vertical-align-bottom {
   display: inline-block;