From 7f38dd0606b0ee175cdaf9479ceed924d442ebf1 Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Mon, 10 Nov 2025 19:26:47 +0200
Subject: [PATCH 1/2] feat(tabs): add 'active' parameters

---
 sass/themes/components/tabs/_tabs-theme.scss  | 63 ++++++++++-----
 .../themes/schemas/components/dark/_tabs.scss | 35 +++++++--
 .../schemas/components/light/_tabs.scss       | 78 ++++++++++++++++++-
 3 files changed, 147 insertions(+), 29 deletions(-)

diff --git a/sass/themes/components/tabs/_tabs-theme.scss b/sass/themes/components/tabs/_tabs-theme.scss
index 811b2279..5827a201 100644
--- a/sass/themes/components/tabs/_tabs-theme.scss
+++ b/sass/themes/components/tabs/_tabs-theme.scss
@@ -20,10 +20,13 @@
 /// @param {Color} $item-hover-color [null] - The text color used for the tabs on hover.
 /// @param {Color} $item-icon-color [null] - The color used for the tab icon.
 /// @param {Color} $item-active-icon-color [null] - The color used for the active tab icon.
+/// @param {Color} $item-active-hover-icon-color [null] - The color used for the active tab icon on hover and focus.
 /// @param {Color} $item-hover-icon-color [null] - The color used for the tab icon on hover.
 /// @param {Color} $item-disabled-icon-color [null] - The color used for the disabled tab icon.
 /// @param {Color} $item-active-color [null] - The color used for the active tabs text.
-/// @param {Color} $item-active-background [null] - The color used for the active/focused tab background.
+/// @param {Color} $item-active-hover-color [null] - The color used for the active tabs text on hover and focus.
+/// @param {Color} $item-active-background [null] - The color used for the active tab background.
+/// @param {Color} $item-active-hover-background [null] - The color used for the active tab background on hover and focus.
 /// @param {Color} $item-disabled-color [null] - The color used for the disabled tabs text.
 /// @param {Color} $indicator-color [null] - The color used for the active tab indicator.
 /// @param {Color} $button-color [null] - The color used for the button icon/text color.
@@ -51,10 +54,13 @@
     $item-hover-color: null,
     $item-icon-color: null,
     $item-active-icon-color: null,
+    $item-active-hover-icon-color: null,
     $item-hover-icon-color: null,
     $item-disabled-icon-color: null,
     $item-active-color: null,
+    $item-active-hover-color: null,
     $item-active-background: null,
+    $item-active-hover-background: null,
     $item-disabled-color: null,
     $indicator-color: null,
     $button-color: null,
@@ -82,7 +88,11 @@
     $variant: map.get($theme, '_meta', 'theme');
 
     @if not($item-active-background) and $item-background {
-        $item-active-background: dynamic-shade(var(--item-background));
+        $item-active-background: var(--item-background);
+    }
+
+    @if not($item-active-hover-background) and $item-active-background {
+        $item-active-hover-background: dynamic-shade(var(--item-active-background));
     }
 
     @if not($item-background) {
@@ -103,8 +113,24 @@
         }
     }
 
+    @if not($item-active-icon-color) and $item-active-color {
+        $item-active-icon-color: var(--item-active-color);
+    }
+
+    @if not($item-active-color) and $item-active-icon-color {
+        $item-active-color: var(--item-active-icon-color);
+    }
+
+    @if not($item-active-hover-color) and $item-active-color {
+        $item-active-hover-color: var(--item-active-color);
+    }
+
+    @if not($item-active-hover-icon-color) and $item-active-icon-color {
+        $item-active-hover-icon-color: var(--item-active-icon-color);
+    }
+
     @if not($item-active-background) {
-        @if $variant != 'bootstrap' {
+        @if $variant != 'bootstrap' and $variant != 'material' {
             @if not($item-active-icon-color) and $item-icon-color {
                 $item-active-icon-color: var(--item-icon-color);
             }
@@ -114,14 +140,6 @@
             }
         }
     } @else {
-        @if not($item-active-icon-color) and $item-active-color {
-            $item-active-icon-color: var(--item-active-color);
-        }
-
-        @if not($item-active-color) and $item-active-icon-color {
-            $item-active-color: var(--item-active-icon-color);
-        }
-
         @if not($item-active-icon-color) and $item-active-background {
             $item-active-icon-color: adaptive-contrast(var(--item-active-background));
         }
@@ -129,6 +147,14 @@
         @if not($item-active-color) and $item-active-background {
             $item-active-color: adaptive-contrast(var(--item-active-background));
         }
+
+        @if not($item-active-hover-icon-color) and $item-active-hover-background {
+            $item-active-hover-icon-color: adaptive-contrast(var(--item-active-hover-background));
+        }
+
+        @if not($item-active-hover-color) and $item-active-hover-background {
+            $item-active-hover-color: adaptive-contrast(var(--item-active-hover-background));
+        }
     }
 
     @if not($item-hover-background) {
@@ -162,13 +188,9 @@
             $border-color--hover: var(--border-color);
         }
     } @else {
-        @if not($item-background) {
-            @if not($indicator-color) and $item-text-color {
-                $indicator-color: var(--item-text-color);
-            }
-
-            @if not($indicator-color) and $item-icon-color {
-                $indicator-color: var(--item-icon-color);
+        @if not($item-active-background) {
+            @if not($indicator-color) and $item-active-color {
+                $indicator-color: var(--item-active-color);
             }
         } @else {
             @if not($indicator-color) and $item-active-color {
@@ -176,7 +198,7 @@
             }
 
             @if not($indicator-color) {
-                $indicator-color: adaptive-contrast(var(--item-background));
+                $indicator-color: adaptive-contrast(var(--item-active-background));
             }
         }
     }
@@ -249,10 +271,13 @@
             item-hover-background: $item-hover-background,
             item-icon-color: $item-icon-color,
             item-active-icon-color: $item-active-icon-color,
+            item-active-hover-icon-color: $item-active-hover-icon-color,
             item-hover-icon-color: $item-hover-icon-color,
             item-disabled-icon-color: $item-disabled-icon-color,
             item-active-color: $item-active-color,
+            item-active-hover-color: $item-active-hover-color,
             item-active-background: $item-active-background,
+            item-active-hover-background: $item-active-hover-background,
             item-disabled-color: $item-disabled-color,
             indicator-color: $indicator-color,
             button-color: $button-color,
diff --git a/sass/themes/schemas/components/dark/_tabs.scss b/sass/themes/schemas/components/dark/_tabs.scss
index 8189ea12..177497f4 100644
--- a/sass/themes/schemas/components/dark/_tabs.scss
+++ b/sass/themes/schemas/components/dark/_tabs.scss
@@ -13,7 +13,7 @@
 /// Generates a base dark tabs schema.
 /// @type {Map}
 /// @prop {Map} item-hover-background [color: ('gray', 100, .5)] - The background used for the tabs on hover.
-/// @prop {Map} item-active-background [color: ('gray', 100, .5)] - The color used for the active/focused tab background.
+/// @prop {Map} item-active-hover-background [color: ('gray', 100, .5)] - The color used for the active tab background on hover and focus.
 $base-dark-tabs: (
     item-hover-background: (
         color: (
@@ -22,7 +22,7 @@ $base-dark-tabs: (
             0.5,
         ),
     ),
-    item-active-background: (
+    item-active-hover-background: (
         color: (
             'gray',
             100,
@@ -34,7 +34,7 @@ $base-dark-tabs: (
 /// Generates a dark material tabs schema.
 /// @type {Map}
 /// @prop {Map} item-hover-background [color: ('gray', 100)] - The background used for the tabs on hover.
-/// @prop {Map} item-active-background [color: ('gray', 100)] - The color used for the active/focused tab background.
+/// @prop {Map} item-active-hover-background [color: ('gray', 100)] - The color used for the active tab background on hover and focus.
 /// @requires $material-tabs
 /// @requires $base-dark-tabs
 $dark-material-tabs: extend(
@@ -46,7 +46,7 @@ $dark-material-tabs: extend(
                 100,
             ),
         ),
-        item-active-background: (
+        item-active-hover-background: (
             color: (
                 'gray',
                 100,
@@ -63,7 +63,7 @@ $dark-material-tabs: extend(
 /// @prop {Map} item-disabled-color [color: ('gray', 300)] - The color used for the disabled tabs text.
 /// @prop {Map} item-disabled-icon-color [color: ('gray', 300)] - The color used for the disabled tab icon.
 /// @prop {Map} item-hover-background [color: ('gray', 50)] - The background used for the tabs on hover.
-/// @prop {Map} item-active-background [color: ('gray', 50)] - The color used for the active/focused tab background.
+/// @prop {Map} item-active-hover-background [color: ('gray', 50)] - The color used for the active tab background on hover and focus.
 /// @prop {Map} button-disabled-color [color: ('gray', 200)] - The color used for the disabled button icon/text.
 /// @prop {Map} indicator-color [color: ('primary', 300)] - The color used for the active tab indicator.
 /// @type {Map}
@@ -92,7 +92,7 @@ $dark-fluent-tabs: extend(
                 50,
             ),
         ),
-        item-active-background: (
+        item-active-hover-background: (
             color: (
                 'gray',
                 50,
@@ -133,13 +133,16 @@ $dark-bootstrap-tabs: extend(
 /// Generates a dark indigo tabs schema.
 /// @type {Map}
 /// @prop {Map} item-hover-background [contrast-color: ('gray', 50, .1)] - The background used for the tabs on hover.
+/// @prop {Map} item-active-hover-background [contrast-color: ('gray', 50, .1)] - The color used for the active tab background on hover and focus.
 /// @prop {Map} item-text-color [contrast-color: ('gray', 50, .8)] - The color used for the tab text color.
 /// @prop {Map} item-hover-color [contrast-color: ('gray', 50)] - The text color used for the tabs on hover.
 /// @prop {Map} item-active-color [contrast-color: ('gray', 50)] - The color used for the active tabs text.
+/// @prop {Map} item-active-hover-color [contrast-color: ('gray', 50)] - The color used for the active tabs text on hover and focus.
 /// @prop {Map} item-disabled-color [contrast-color: ('gray', 50, .2)] - The color used for the disabled tabs text.
 /// @prop {Map} item-icon-color [contrast-color: ('gray', 50, .6)] - The color used for the tab icon.
 /// @prop {Map} item-hover-icon-color [contrast-color: ('gray', 50, .8)] - The color used for the tab icon on hover.
 /// @prop {Map} item-active-icon-color [contrast-color: ('gray', 50, .8)] - The color used for the active tab icon.
+/// @prop {Map} item-active-hover-icon-color [contrast-color: ('gray', 50, .8)] - The color used for the active tab icon on hover and focus.
 /// @prop {Map} item-disabled-icon-color [contrast-color: ('gray', 50, .2)] - The color used for the disabled tab icon.
 /// @prop {Map} border-color [contrast-color: ('gray', 50, .15)] - The color used for the tab items bottom border.
 /// @prop {Map} border-color--hover [contrast-color: ('gray', 50, .15)] - The color used for the tab items bottom border on hover/focus.
@@ -158,6 +161,13 @@ $dark-indigo-tabs: extend(
                 0.1,
             ),
         ),
+        item-active-hover-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.1,
+            ),
+        ),
         item-text-color: (
             contrast-color: (
                 'gray',
@@ -177,6 +187,12 @@ $dark-indigo-tabs: extend(
                 50,
             ),
         ),
+        item-active-hover-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
         item-disabled-color: (
             contrast-color: (
                 'gray',
@@ -205,6 +221,13 @@ $dark-indigo-tabs: extend(
                 0.8,
             ),
         ),
+        item-active-hover-icon-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
         item-disabled-icon-color: (
             contrast-color: (
                 'gray',
diff --git a/sass/themes/schemas/components/light/_tabs.scss b/sass/themes/schemas/components/light/_tabs.scss
index 649545d2..81902771 100644
--- a/sass/themes/schemas/components/light/_tabs.scss
+++ b/sass/themes/schemas/components/light/_tabs.scss
@@ -17,10 +17,13 @@
 /// @prop {Map} item-hover-color [color: ('gray', 900)] - The text color used for the tabs on hover.
 /// @prop {Map} item-icon-color [color: ('gray', 700)] - The color used for the tab icon.
 /// @prop {Map} item-active-icon-color [color: ('primary', 500)] - The color used for the active tab icon.
+/// @prop {Map} item-active-hover-icon-color [color: ('primary', 500)] - The color used for the active tab icon on hover and focus.
 /// @prop {Map} item-hover-icon-color [color: ('gray', 700)] - The color used for the tab icon on hover.
 /// @prop {Map} item-disabled-icon-color [color: ('gray', 500)] - The color used for the disabled tab icon.
 /// @prop {Map} item-active-color [color: ('primary', 500)] - The color used for the active tabs text.
-/// @prop {Map} item-active-background [color: ('gray', 200)] - The color used for the active/focused tab background.
+/// @prop {Map} item-active-hover-color [color: ('primary', 500)] - The color used for the active tabs text on hover and focus.
+/// @prop {Map} item-active-background [color: ('surface')] - The color used for the active tab background.
+/// @prop {Map} item-active-hover-background [color: ('gray', 200)] - The color used for the active tab background on hover and focus.
 /// @prop {Map} item-disabled-color [color: ('gray', 500)] - The color used for the disabled tabs text.
 /// @prop {Map} indicator-color [color: ('primary', 500)] - The color used for the active tab indicator.
 /// @prop {Map} button-color [color: ('gray', 700)] - The color used for the button icon/text color.
@@ -64,6 +67,12 @@ $light-tabs: (
             500,
         ),
     ),
+    item-active-hover-color: (
+        color: (
+            'primary',
+            500,
+        ),
+    ),
     item-icon-color: (
         color: (
             'gray',
@@ -76,6 +85,12 @@ $light-tabs: (
             500,
         ),
     ),
+    item-active-hover-icon-color: (
+        color: (
+            'primary',
+            500,
+        ),
+    ),
     item-hover-icon-color: (
         color: (
             'gray',
@@ -89,6 +104,11 @@ $light-tabs: (
         ),
     ),
     item-active-background: (
+        color: (
+            'surface',
+        ),
+    ),
+    item-active-hover-background: (
         color: (
             'gray',
             200,
@@ -190,7 +210,9 @@ $material-tabs: extend(
 /// @prop {Map} button-hover-color [color: ('gray', 600)] - The color used for the button icon/text color on hover.
 /// @prop {Map} button-disabled-color [color: ('gray', 400)] - The color used for the disabled button icon/text.
 /// @prop {Map} item-active-color [color: ('gray', 800)] - The color used for the active tabs text.
+/// @prop {Map} item-active-hover-color [color: ('gray', 800)] - The color used for the active tabs text on hover and focus.
 /// @prop {Map} item-active-icon-color [color: ('gray', 800)] - The color used for the active tab icon.
+/// @prop {Map} item-active-hover-icon-color [color: ('gray', 800)] - The color used for the active tab icon on hover and focus.
 /// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The color used for the tab icon on hover.
 /// @prop {Map} item-icon-color [color: ('gray', 800)] - The color used for the tab icon.
 /// @prop {Map} typography [label: (value: 'body-2')] - The typography styles used for the component.
@@ -228,12 +250,24 @@ $fluent-tabs: extend(
                 800,
             ),
         ),
+        item-active-hover-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
         item-active-icon-color: (
             color: (
                 'gray',
                 800,
             ),
         ),
+        item-active-hover-icon-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
         item-hover-icon-color: (
             color: (
                 'gray',
@@ -265,14 +299,16 @@ $fluent-tabs: extend(
 /// @prop {map} item-hover-color [color: ('primary', 700)] - The text color used for the tabs on hover.
 /// @prop {Map} item-hover-icon-color [color: ('primary', 700)] - The color used for the tab icon on hover.
 /// @prop {map} item-active-color [color: ('gray', 800)] - The color used for the active tabs text.
+/// @prop {map} item-active-hover-color [color: ('gray', 800)] - The color used for the active tabs text on hover and focus.
 /// @prop {map} item-active-icon-color [color: ('gray', 800)] - The color used for the active tabs icon.
+/// @prop {map} item-active-hover-icon-color [color: ('gray', 800)] - The color used for the active tabs icon on hover and focus.
 /// @prop {Map} item-disabled-color [color: ('primary', 500, .5)] - The color used for the disabled tabs text.
 /// @prop {Map} item-disabled-icon-color [color: ('primary', 500, .5)] - The color used for the disabled tab icon.
 /// @prop {Map} button-color [color: ('primary', 500)] - The color used for the button icon/text color.
 /// @prop {Map} button-hover-color [color: ('primary', 500)] - The color used for the button icon/text color on hover.
 /// @prop {Map} button-disabled-color [color: ('primary', 500, .5)] - The color used for the disabled button icon/text.
 /// @prop {map} item-hover-background [color: ('surface')] - The background used for the tabs on hover.
-/// @prop {map} item-active-background [color: ('surface')] - The color used for the active/focused tab background.
+/// @prop {map} item-active-hover-background [color: ('surface')] - The color used for the active tab background on hover.
 /// @prop {map} border-color [color: ('gray', 300)] - The color used for the tab items border.
 /// @prop {map} border-color--hover [color: ('gray', 200)] - The color used for the tab items border on hover/focus.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(6px))] - The border radius used for tabs.
@@ -304,7 +340,7 @@ $bootstrap-tabs: extend(
                 0.5,
             ),
         ),
-        item-active-background: (
+        item-active-hover-background: (
             color: (
                 'surface',
             ),
@@ -351,12 +387,24 @@ $bootstrap-tabs: extend(
                 800,
             ),
         ),
+        item-active-hover-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
         item-active-icon-color: (
             color: (
                 'gray',
                 800,
             ),
         ),
+        item-active-hover-icon-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
         item-disabled-color: (
             color: (
                 'primary',
@@ -389,12 +437,15 @@ $bootstrap-tabs: extend(
 /// @type {Map}
 /// @prop {Color} item-background [transparent] - The background color used for the tabs header.
 /// @prop {Map} item-hover-background [color: ('gray', 900, .05)] - The background used for the tabs on hover.
-/// @prop {Color} item-active-background [transparent] - The color used for the active/focused tab background.
+/// @prop {Color} item-active-background [transparent] - The color used for the active tab background.
+/// @prop {Map} item-active-hover-background [color: ('gray', 900, .05)] - The color used for the active tab background on hover and focus.
 /// @prop {Map} item-text-color [color: ('gray', 800)] - The color used for the tab text color.
 /// @prop {Map} item-active-color [color: ('gray', 900)] - The color used for the active tabs text.
+/// @prop {Map} item-active-hover-color [color: ('gray', 900)] - The color used for the active tabs text on hover and focus.
 /// @prop {Map} item-disabled-color [color: ('gray', 900, .2)] - The color used for the disabled tabs text.
 /// @prop {Map} item-icon-color [color: ('gray', 600)] - The color used for the tab icon.
 /// @prop {Map} item-active-icon-color [color: ('gray', 700)] - The color used for the active tab icon.
+/// @prop {Map} item-active-hover-icon-color [color: ('gray', 700)] - The color used for the active tab icon on hover and focus.
 /// @prop {Map} item-disabled-icon-color [color: ('gray', 900, .2)] - The color used for the disabled tab icon.
 /// @prop {Map} indicator-color [color: ('primary', 400)] - The color used for the tabs borders.
 /// @prop {Map} border-color [color: ('gray', 900, .15)] - The color used for the tab items bottom border.
@@ -418,6 +469,13 @@ $indigo-tabs: extend(
             ),
         ),
         item-active-background: transparent,
+        item-active-hover-background: (
+            color: (
+                'gray',
+                900,
+                0.05,
+            ),
+        ),
         item-text-color: (
             color: (
                 'gray',
@@ -430,6 +488,12 @@ $indigo-tabs: extend(
                 900,
             ),
         ),
+        item-active-hover-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         item-disabled-color: (
             color: (
                 'gray',
@@ -449,6 +513,12 @@ $indigo-tabs: extend(
                 700,
             ),
         ),
+        item-active-hover-icon-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
         item-disabled-icon-color: (
             color: (
                 'gray',

From d9ed8a4ac8c395fcb26a4da6ed8a8a99353b42b0 Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Tue, 11 Nov 2025 11:10:32 +0200
Subject: [PATCH 2/2] chore(tabs): fix docs sentence

---
 sass/themes/schemas/components/light/_tabs.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sass/themes/schemas/components/light/_tabs.scss b/sass/themes/schemas/components/light/_tabs.scss
index 81902771..211d0b7c 100644
--- a/sass/themes/schemas/components/light/_tabs.scss
+++ b/sass/themes/schemas/components/light/_tabs.scss
@@ -308,7 +308,7 @@ $fluent-tabs: extend(
 /// @prop {Map} button-hover-color [color: ('primary', 500)] - The color used for the button icon/text color on hover.
 /// @prop {Map} button-disabled-color [color: ('primary', 500, .5)] - The color used for the disabled button icon/text.
 /// @prop {map} item-hover-background [color: ('surface')] - The background used for the tabs on hover.
-/// @prop {map} item-active-hover-background [color: ('surface')] - The color used for the active tab background on hover.
+/// @prop {map} item-active-hover-background [color: ('surface')] - The color used for the active tab background on hover and focus.
 /// @prop {map} border-color [color: ('gray', 300)] - The color used for the tab items border.
 /// @prop {map} border-color--hover [color: ('gray', 200)] - The color used for the tab items border on hover/focus.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(6px))] - The border radius used for tabs.