feat(tabs): set up the newly created 'active' parameters

Author: adrianptrv

src/components/tabs/themes/shared/tab/tab.bootstrap.scss

@@ -67,7 +67,7 @@ $theme: $bootstrap;
             position: absolute;
             width: 100%;
             height: 100%;
-            box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-hover-color');
+            box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-active-hover-color');
             z-index: 2;
         }
     }
@@ -76,31 +76,48 @@ $theme: $bootstrap;
 :host([selected]) {
     [part='tab-header'] {
         position: relative;
+        background: var-get($theme, 'item-background');
 
         &::before {
-            background: var-get($theme, 'item-active-background');
             box-shadow:
                 inset 0 var(--_border-size) 0 0 var-get($theme, 'border-color'),  /* Top */
                 inset calc(var(--_border-size) * -1) 0 0 0 var-get($theme, 'border-color'),  /* Left */
-                inset var(--_border-size) 0 0 0 var-get($theme, 'border-color'),  /* Right */
+                inset var(--_border-size) 0 0 0 var-get($theme, 'border-color');  /* Right */
+            background: var-get($theme, 'item-active-background');
+            border-start-start-radius: var-get($theme, 'border-radius');
+            border-start-end-radius: var-get($theme, 'border-radius');
         }
 
         &:hover {
             border-top-color: var-get($theme, 'border-color');
             border-inline-color: var-get($theme, 'border-color');
             border-bottom-color: var-get($theme, 'item-background');
             background: var-get($theme, 'item-background');
+
+            &::before {
+                background: var-get($theme, 'item-active-hover-background');
+            }
         }
 
         &:focus,
         &:focus-within {
-            background: var-get($theme, 'item-active-background');
             border: none;
+            background: var-get($theme, 'item-background');
+
+            &::after{
+                border-top-left-radius: var-get($theme, 'border-radius');
+                border-top-right-radius: var-get($theme, 'border-radius');
+                border-bottom-left-radius: rem(4px);
+                border-bottom-right-radius: rem(4px);
+            }
         }
 
         &:focus-within {
             &::before {
                 box-shadow: none;
+                border-bottom-left-radius: rem(4px);
+                border-bottom-right-radius: rem(4px);
+                background: var-get($theme, 'item-active-hover-background');
             }
         }
     }

src/components/tabs/themes/shared/tab/tab.common.scss

@@ -28,18 +28,19 @@ $theme: $material;
 :host([selected]) {
     [part='tab-header'] {
         color: var-get($theme, 'item-active-color');
+        background: var-get($theme, 'item-active-background');
 
         ::slotted(igc-icon) {
             color: var-get($theme, 'item-active-icon-color');
         }
 
         &:hover,
         &:focus-within {
-            color: var-get($theme, 'item-active-color');
-            background: var-get($theme, 'item-active-background');
+            color: var-get($theme, 'item-active-hover-color');
+            background: var-get($theme, 'item-active-hover-background');
 
             ::slotted(igc-icon) {
-                color: var-get($theme, 'item-active-icon-color');
+                color: var-get($theme, 'item-active-hover-icon-color');
             }
         }
     }

src/components/tabs/themes/shared/tab/tab.fluent.scss

@@ -16,15 +16,4 @@ $theme: $fluent;
     [part='content'] {
         font-weight: 700;
     }
-
-    [part='tab-header'] {
-        &:hover,
-        &:focus-within {
-            color: var-get($theme, 'item-hover-color');
-
-            ::slotted(igc-icon) {
-                color: var-get($theme, 'item-active-icon-color');
-            }
-        }
-    }
 }

src/components/tabs/themes/shared/tab/tab.indigo.scss

@@ -28,13 +28,4 @@ $theme: $indigo;
     @include type-style('subtitle-2');
 
     text-transform: uppercase;
-}
-
-:host([selected]) {
-    [part='tab-header'] {
-        &:hover,
-        &:focus-within {
-            background: var-get($theme, 'item-hover-background');
-        }
-    }
 }

src/components/tabs/themes/shared/tabs/tabs.indigo.scss

@@ -57,6 +57,10 @@ igc-icon-button:hover::part(base) {
 
 igc-icon-button::part(base) {
     overflow: hidden;
+}
+
+igc-icon-button[disabled]::part(base), 
+igc-icon-button:disabled::part(base) {
     border-bottom: rem(1px) solid var(--nav-btn-border-color);
 }