fix: removing blue hover color and ink bar from tabs

Author: itssharmasandeep

projects/components/src/tabs/content/tab-group.component.scss

@@ -41,14 +41,14 @@
           background: $gray-3 radial-gradient(circle, transparent 1%, $gray-3 1%) center/12000%;
 
           &.active {
-            background-color: $blue-5;
+            background-color: $gray-9;
           }
         }
       }
 
       &:active {
         .ink-bar {
-          background-color: $blue-5;
+          background-color: $gray-9;
           background-size: 100%;
           transition: background 0s;
         }
@@ -77,6 +77,15 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  color: $gray-5;
+
+  &:hover {
+    color: $gray-9;
+  }
+
+  &.active {
+    color: $gray-9;
+  }
 
   .tab-label-tag {
     margin-left: 4px;
@@ -96,6 +105,6 @@
   }
 
   &.active {
-    background-color: $blue-5;
+    background-color: $gray-9;
   }
 }

projects/components/src/tabs/content/tab-group.component.ts

@@ -27,7 +27,7 @@ import { TabComponent } from './tab/tab.component';
       >
         <mat-tab *ngFor="let tab of this.tabs; index as i">
           <ng-template mat-tab-label>
-            <div class="tab-label">
+            <div class="tab-label" [ngClass]="{ active: this.activeTabIndex === i }">
               {{ tab.label }}
               <ng-container *ngIf="tab.labelTag">
                 <ht-label-tag

projects/components/src/tabs/navigable/navigable-tab-group.component.scss

@@ -17,10 +17,14 @@
       color: $gray-9;
     }
 
+    ::ng-deep .ht-link:hover {
+      color: $gray-9;
+    }
+
     ::ng-deep .mat-ink-bar {
       // Required deep since added dynamically by material
       height: 4px;
-      background-color: $gray-7;
+      background-color: $gray-9;
     }
   }
 }
@@ -48,14 +52,14 @@
       background: $gray-3 radial-gradient(circle, transparent 1%, $gray-3 1%) center/12000%;
 
       &.active {
-        background-color: $gray-6;
+        background-color: $gray-9;
       }
     }
   }
 
   &:active {
     .ink-bar {
-      background-color: $gray-7;
+      background-color: $gray-9;
       background-size: 100%;
       transition: background 0s;
     }
@@ -68,7 +72,6 @@
   padding: 0;
   font-size: 16px;
   font-weight: 500;
-  color: $gray-5;
   opacity: 1;
   padding-bottom: 6px;
 }
@@ -85,7 +88,7 @@
   transition: background 0.6s;
 
   &.active {
-    background-color: $gray-7;
+    background-color: $gray-9;
   }
 }