Refactor Tab component

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

@@ -4,7 +4,7 @@
 @use 'sass:map';
 
 [part~='tab-header'] {
-    $transition: .3s cubic-bezier(.35, 0, .25, 1);
+    $transition: .3s $tabs-animation-function;
 
     display: flex;
     scroll-snap-align: var(--_ig-tab-snap);
@@ -15,8 +15,8 @@
     justify-content: center;
     pointer-events: all;
     height: 100%;
-    max-width: var(--tab-max-width--justify, var(--tab-max-width));
-    min-width: var(--tab-min-width);
+    max-width: var(--tab-max-width--justify, $tab-max-width);
+    min-width: $tab-min-width;
     cursor: pointer;
     position: relative;
     z-index: map.get($tabs-z-index, 'header');
@@ -70,12 +70,14 @@
     display: none;
     position: sticky;
     inset-inline-start: 0;
-    width: var(--tabs-width);
+    width: 100%;
+    height: 100%;
     grid-row: 3;
     grid-column: 1 / -1;
+
+    // The value of --_ig-tabs-width is calculated in TypeScript and represents the width of the ig-tabs component
     max-width: var(--_ig-tabs-width);
     transition: transform 250ms ease-in-out;
-    height: 100%;
 }
 
 :host([selected]) {

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

@@ -4,11 +4,7 @@
 @use 'sass:map';
 
 :host {
-    // Scroll buttons
     --scroll-btn-size: #{rem(48px)};
-    --tabs-width: 100%;
-    --tab-max-width: #{rem(360px)};
-    --tab-min-width: #{rem(90px)};
     --_border-size: #{rem(1px)};
 
     display: block;
@@ -55,14 +51,13 @@
 }
 
 [part~='scrollable'] {
-    /* stylelint-disable */
+    /* stylelint-disable-next-line max-line-length */
     grid-template-columns: var(--scroll-btn-size) repeat(var(--_tabs-count), minmax(max-content, auto)) var(--scroll-btn-size);
-    /* stylelint-enable */
 }
 
 [part~='inner']:not([part~='scrollable']) {
     grid-template-columns: repeat(var(--_tabs-count), minmax(auto, min-content));
-    min-width: var(--tab-min-width);
+    min-width: $tab-min-width;
 }
 
 :host([alignment='start']) {
@@ -101,12 +96,12 @@
 
     [part~='scrollable'] {
         /* stylelint-disable */
-        grid-template-columns: var(--scroll-btn-size) repeat(var(--_tabs-count), minmax(var(--tab-min-width), 1fr)) var(--scroll-btn-size);
+        grid-template-columns: var(--scroll-btn-size) repeat(var(--_tabs-count), minmax($tab-min-width, 1fr)) var(--scroll-btn-size);
         /* stylelint-enable */
     }
 
     [part~='inner']:not([part~='scrollable']) {
-        grid-template-columns: repeat(var(--_tabs-count), minmax(var(--tab-min-width), auto));
+        grid-template-columns: repeat(var(--_tabs-count), minmax($tab-min-width, auto));
     }
 }
 
@@ -140,16 +135,14 @@ igc-icon-button::part(base) {
 }
 
 [part='selected-indicator'] {
-    $indicator-bezier: cubic-bezier(.35, 0, .25, 1);
-
     position: relative;
     grid-row: 2;
     grid-column: 1 / -1;
 
     span {
         position: absolute;
         display: inline-block;
-        transition: transform .3s $indicator-bezier, width .2s $indicator-bezier;
+        transition: transform .3s $tabs-animation-function, width .2s $tabs-animation-function;
         z-index: map.get($tabs-z-index, 'selected-indicator');
     }
 }

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

@@ -1,5 +1,10 @@
+@use 'styles/utilities' as *;
+
 $tabs-z-index: (
     scroll-button: 2,
     selected-indicator: 1,
     header: 1,
 );
+$tab-min-width: rem(90px);
+$tab-max-width: rem(360px);
+$tabs-animation-function: cubic-bezier(.35, 0, .25, 1);

stories/tabs.stories.ts

@@ -288,8 +288,8 @@ export const NestedTabs: Story = {
         margin: 0 auto;
       }
       .nested {
-        padding-inline-start: 1rem;
-        padding-block-start: 1rem;
+        padding: 1rem;
+        background: var(--ig-gray-50);
       }
     </style>
     <igc-tabs