feat(tabs): update theme according to new Indigo design

src/components/icon/icon-references.ts

@@ -200,12 +200,20 @@ addIcon('prev', {
     name: 'navigate_before',
     collection: 'internal',
   },
+  indigo: {
+    name: 'indigo_chevron_left',
+    collection: 'internal',
+  },
 });
 addIcon('next', {
   default: {
     name: 'navigate_next',
     collection: 'internal',
   },
+  indigo: {
+    name: 'indigo_chevron_right',
+    collection: 'internal',
+  },
 });
 addIcon('tree_expand', {
   default: {

src/components/tabs/tabs.ts

@@ -408,6 +408,7 @@ export default class IgcTabsComponent extends EventEmitterMixin<
           variant="flat"
           collection="default"
           part="${direction}-scroll-button"
+          exportparts="icon"
           name="${start ? 'prev' : 'next'}"
           .disabled=${start
             ? this.disableStartScrollButton

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

@@ -5,4 +5,6 @@ $theme: $bootstrap;
 
 :host {
     @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
+
+    --navigation-border-color: #{var-get($theme, 'border-color')};
 }

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

@@ -5,4 +5,6 @@ $theme: $fluent;
 
 :host {
     @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
+
+    --navigation-border-color: #{var-get($theme, 'border-color')};
 }

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

@@ -5,4 +5,6 @@ $theme: $indigo;
 
 :host {
     @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
+
+    --navigation-border-color: #{var-get($theme, 'border-color')};
 }

src/components/tabs/themes/dark/tab.material.scss

@@ -5,4 +5,6 @@ $theme: $material;
 
 :host {
     @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
+
+    --navigation-border-color: #{var-get($theme, 'border-color')};
 }

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

@@ -5,4 +5,6 @@ $theme: $bootstrap;
 
 :host {
     @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
+
+    --navigation-border-color: #{var-get($theme, 'border-color')};
 }

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

@@ -5,4 +5,6 @@ $theme: $fluent;
 
 :host {
     @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
+
+    --navigation-border-color: #{var-get($theme, 'border-color')};
 }

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

@@ -5,4 +5,6 @@ $theme: $indigo;
 
 :host {
     @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
+
+    --navigation-border-color: #{var-get($theme, 'border-color')};
 }

src/components/tabs/themes/light/tab.material.scss

@@ -5,4 +5,6 @@ $theme: $material;
 
 :host {
     @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
+
+    --navigation-border-color: #{var-get($theme, 'border-color')};
 }

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

@@ -0,0 +1,34 @@
+@use 'styles/utilities' as *;
+@use '../../light/themes' as *;
+
+$theme: $indigo;
+
+:host {
+    --btn-hover-color: #{var-get($theme, 'button-hover-color')};
+
+    border-top: rem(1px) solid transparent; 
+    border-bottom: rem(1px) solid var-get($theme, 'border-color');
+    padding-block: rem(11px);
+
+    ::slotted(igc-icon) {
+        --ig-size: 2;
+
+        color: var-get($theme, 'item-icon-color');
+    }
+}
+
+:host(:hover) {
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-hover-icon-color');
+    }
+}
+
+:host([disabled]) {
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-disabled-icon-color');
+    }
+}
+
+[part='content'] {
+    @include type-style('subtitle-2');
+}

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

@@ -0,0 +1,21 @@
+@use 'styles/utilities' as *;
+@use '../../light/themes' as *;
+
+$theme: $indigo;
+
+[part='headers'] {
+    min-height: rem(40px);
+}
+
+[part='start-scroll-button'],
+[part='end-scroll-button'] {
+    min-width: rem(40px);
+    width: rem(40px);
+    border-bottom: rem(1px) solid var(--navigation-border-color);
+
+    &:hover {
+        &::part(icon) {
+            color: var-get($theme, 'button-hover-color');
+        }
+    }
+}

src/components/tabs/themes/tab-themes.ts

@@ -4,6 +4,7 @@ import type { Themes } from '../../../theming/types.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/tab/tab.bootstrap.css.js';
 import { styles as fluent } from './shared/tab/tab.fluent.css.js';
+import { styles as indigo } from './shared/tab/tab.indigo.css.js';
 
 const light = {
   bootstrap: css`
@@ -12,6 +13,9 @@ const light = {
   fluent: css`
     ${fluent}
   `,
+  indigo: css`
+    ${indigo}
+  `,
 };
 
 const dark = {
@@ -21,6 +25,9 @@ const dark = {
   fluent: css`
     ${fluent}
   `,
+  indigo: css`
+    ${indigo}
+  `,
 };
 
 export const all: Themes = { light, dark };

src/components/tabs/themes/tab.base.scss

@@ -48,4 +48,8 @@
     ::slotted(*) {
         @include line-clamp(2, true, true);
     }
+
+    ::slotted(igc-icon) {
+        display: flex;
+    }
 }

src/components/tabs/themes/tabs-themes.ts

@@ -16,6 +16,7 @@ import { styles as sharedLight } from './light/tab.shared.css.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/tabs/tabs.bootstrap.css.js';
 import { styles as fluent } from './shared/tabs/tabs.fluent.css.js';
+import { styles as indigo } from './shared/tabs/tabs.indigo.css.js';
 
 const light = {
   shared: css`
@@ -31,7 +32,7 @@ const light = {
     ${fluent} ${fluentLight}
   `,
   indigo: css`
-    ${indigoLight}
+    ${indigo} ${indigoLight}
   `,
 };
 
@@ -49,7 +50,7 @@ const dark = {
     ${fluent} ${fluentDark}
   `,
   indigo: css`
-    ${indigoDark}
+    ${indigo} ${indigoDark}
   `,
 };
 

src/components/tabs/themes/tabs.base.scss

@@ -107,6 +107,7 @@ igc-icon-button::part(base) {
     }
 }
 
+:host-context([dir='rtl']),
 :host([dir='rtl']) {
     [part='start-scroll-button'],
     [part='end-scroll-button'] {