Refactor font imports and highlight mixin

Author: sid-devspot

src/assets/prop.scss

@@ -1,9 +1,9 @@
 // App
-@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
 
 @font-face {
-  font-family: "Cubano";
-  src: url("./Cubano.ttf") format("truetype");
+  font-family: 'Cubano';
+  src: url('./Cubano.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
@@ -33,8 +33,8 @@
   --module-nav-bdr: #3d444d;
 
   // Font
-  --app-font-heads: "Cubano", serif !important;
-  --app-font-content: "Outfit", sans-serif;
+  --app-font-heads: 'Cubano', serif !important;
+  --app-font-content: 'Outfit', sans-serif;
   --font-size-lg: 3.6rem;
   --font-size-rg: 1.8rem;
   --font-size-md: 1.6rem;
@@ -136,21 +136,27 @@ app-root,
   user-select: none !important;
 }
 
-.highlight {
+@mixin highlight($fontFamily: var(--app-font-heads), $fontSize: 1.8rem, $letterSpace: 0) {
   display: flex;
   gap: 1rem;
-  
+
   span {
     @include blurLayer($bdrRds: 1rem);
-    font-family: var(--app-font-heads) !important;
-    color: #ffffff !important;
-    font-size: 1.8rem;
+    font-family: $fontFamily !important;
+    color: var(--theme-colour) !important;
+    font-size: $fontSize !important;
+    font-weight: 600;
     line-height: 1.8rem !important;
     padding: 0.6rem 1rem !important;
     margin-bottom: 0.6rem;
+    letter-spacing: $letterSpace !important;
   }
 }
 
+.highlight {
+  @include highlight();
+}
+
 .uline {
   text-decoration: underline;
 }