igniteui-theming 18.0.0 → 18.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "18.0.0",
+  "version": "18.0.1",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/schemas/components/dark/_tabs.scss

@@ -142,6 +142,7 @@ $dark-bootstrap-tabs: extend(
 /// @prop {Map} item-active-icon-color [contrast-color: ('gray', 50, .8)] - The color used for the active tab icon.
 /// @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.
 /// @prop {Map} button-color [contrast-color: ('gray', 50, .8)] - The color used for the button icon/text color.
 /// @prop {Map} button-hover-color [contrast-color: ('gray', 50)] - The color used for the button icon/text color on hover.
 /// @prop {Map} button-disabled-color [contrast-color: ('gray', 50, .2)] - The color used for the disabled button icon/text.
@@ -218,6 +219,13 @@ $dark-indigo-tabs: extend(
                 0.15,
             ),
         ),
+        border-color--hover: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
         button-color: (
             contrast-color: (
                 'gray',

package/sass/themes/schemas/components/light/_tabs.scss

@@ -29,7 +29,7 @@
 /// @prop {Map} button-background [color: ('surface')] - The color used for the button background.
 /// @prop {Map} button-hover-background [color: ('gray', 100)] - The color used for the button background on hover.
 /// @prop {Color} border-color [transparent] - The color used for the tab items bottom border.
-/// @prop {Color} border-color--hover [transparent] - The color used for the tab items bottom border on hover.
+/// @prop {Color} border-color--hover [transparent] - The color used for the tab items bottom border on hover/focus.
 /// @prop {Map} tab-ripple-color [color: ('gray', 100)] - The color used for the button background.
 /// @prop {Map} button-ripple-color [color: ('gray', 100)] - The color used for the button background on hover.
 /// @prop {List} border-radius [(rem(0), rem(0), rem(6px))] - The border radius used for tabs.
@@ -274,7 +274,7 @@ $fluent-tabs: extend(
 /// @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} 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.
+/// @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.
 /// @requires {Map} $light-tabs
 $bootstrap-tabs: extend(
@@ -398,6 +398,7 @@ $bootstrap-tabs: extend(
 /// @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.
+/// @prop {Map} border-color--hover [color: ('gray', 900, .15)] - The color used for the tab items bottom border on hover/focus.
 /// @prop {Color} button-background [transparent] - The color used for the button background.
 /// @prop {Map} button-hover-background [color: ('gray', 900, .05)] - The color used for the button background on hover.
 /// @prop {Map} button-color [color: ('gray', 600)] - The color used for the button icon/text color.
@@ -468,6 +469,13 @@ $indigo-tabs: extend(
                 0.15,
             ),
         ),
+        border-color--hover: (
+            color: (
+                'gray',
+                900,
+                0.15,
+            ),
+        ),
         button-background: transparent,
         button-hover-background: (
             color: (