refactor(tabs): Match design to the latest Web Components repo changes (#15029)

Author: desig9stein

projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss

@@ -458,7 +458,7 @@
         &:hover,
         &:focus {
             background: var-get($theme, 'item-active-background');
-            color: var-get($theme, 'item-active-color');
+            color: if($variant == 'fluent', var-get($theme, 'item-hover-color'), var-get($theme, 'item-active-color'));
 
             igx-icon {
                 color: var-get($theme, 'item-active-icon-color');
@@ -473,16 +473,25 @@
             background: var-get($theme, 'item-active-background');
             position: relative;
             box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');
+            z-index: 1;
 
-            &::after {
-                content: '';
-                position: absolute;
-                bottom: 0;
-                inset-inline-start: 0;
-                width: 100%;
-                height: rem(1px);
-                background: var-get($theme, 'item-active-background');
-                z-index: 1;
+            &:not(:focus) {
+                &::before {
+                    content: '';
+                    position: absolute;
+                    bottom: 0;
+                    inset-inline-start: 0;
+                    width: 100%;
+                    height: rem(1px);
+                    background: linear-gradient(
+                            to right,
+                            var-get($theme, 'border-color') 1px,
+                            var-get($theme, 'item-active-background') 1px,
+                            var-get($theme, 'item-active-background') calc(100% - 1px),
+                            var-get($theme, 'border-color') calc(100% - 1px)
+                    );
+                    z-index: -1;
+                }
             }
 
             &:hover {
@@ -500,11 +509,6 @@
             &:hover,
             &:focus-visible {
                 background: var-get($theme, 'item-hover-background');
-                color: var-get($theme, 'item-hover-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-hover-icon-color');
-                }
             }
         }
     }
@@ -638,6 +642,7 @@
         @include type-style($label) {
             margin-top: 0;
             margin-bottom: 0;
+            @content;
         }
     }
 }

projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss

@@ -104,7 +104,9 @@
     ));
     @include tabs-typography($categories: (
         label: 'subtitle-2',
-    ));
+    )) {
+        --ig-subtitle-2-text-transform: uppercase;
+    };
     @include time-picker-typography($categories: (
         header-hour: 'h5',
         selected-time: 'h6'

src/app/tabs/tabs.sample.html

@@ -30,9 +30,9 @@ <h3 class="sample-title">Different size tabs</h3>
                         <span igxTabHeaderLabel>{{tab2Label}}</span>
                     </igx-tab-header>
                     <igx-tab-content>
-                        <div class="sample-scrollable">
+                        <div class="sample-list">
                             <igx-list [allowRightPanning]="true" [allowLeftPanning]="true">
-                                <igx-list-item igxRipple="pink" igxRippleTarget=".igx-list__item"
+                                <igx-list-item igxRipple="pink" igxRippleTarget=".igx-list__item-base"
                                                *ngFor="let contact of contacts">
                                     <igx-avatar igxListThumbnail [src]="contact.avatar"></igx-avatar>
                                     <p igxListLineTitle>{{contact.text}}</p>

src/app/tabs/tabs.sample.scss

@@ -31,3 +31,12 @@
     font-size: 20px;
     font-weight: 900;
 }
+
+.sample-list {
+    padding: 16px;
+    background: var(--ig-gray-50);
+}
+
+.igx-list__item-base {
+    position: relative;
+}