igniteui-theming 3.3.1 → 3.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "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/_tree.scss

@@ -15,6 +15,7 @@
 /// @prop {Map} background-active [color: ('gray', 100)] - The background color used for the active tree node.
 /// @prop {Map} foreground-active [color: ('gray', 900)] - The color used for the content in active state of the tree node.
 /// @prop {Map} hover-color [color: ('gray', 50, .1)] - The background color used for the tree node on hover.
+/// @prop {Map} hover-selected-color [color: ('gray', 50, .1)] - The background color used for the selected tree node on hover.
 $base-dark-tree: (
     background-active: (
         color: (
@@ -35,13 +36,32 @@ $base-dark-tree: (
             0.1,
         ),
     ),
+    hover-selected-color: (
+        color: (
+            'gray',
+            50,
+            0.1,
+        ),
+    ),
 );
 
 /// Generates a dark tree schema.
 /// @type {Map}
 /// @requires $light-tree
 /// @requires $base-dark-tree
-$dark-tree: extend($light-tree, $base-dark-tree);
+$dark-tree: extend(
+    $light-tree,
+    $base-dark-tree,
+    (
+        hover-color: (
+            color: (
+                'gray',
+                200,
+                0.5,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark fluent tree schema.
 /// @type {Map}

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

@@ -23,6 +23,7 @@
 /// @prop {Map} foreground-disabled [color: ('gray', 500)] - The color used for the content of the disabled tree node.
 /// @prop {Map} drop-area-color [color: ('secondary')] - The background color used for the tree node drop aria.
 /// @prop {Map} hover-color [color: ('gray', 900, .1)] - The background color used for the tree node on hover.
+/// @prop {Map} hover-selected-color [color: ('gray', 900, .1)] - The background color used for the selected tree node on hover.
 /// @prop {Map} border-color [color: ('secondary')] - The outline shadow color used for tree node in focus state.
 /// @prop {List} size [(rem(32px), rem(40px), rem(50px))] - The size used for the tree node.
 /// @prop {Number} default-size [2] - The default size used for the tree component.
@@ -103,6 +104,13 @@ $light-tree: (
             0.1,
         ),
     ),
+    hover-selected-color: (
+        color: (
+            'gray',
+            900,
+            0.1,
+        ),
+    ),
     size: (
         sizable: (
             rem(32px),
@@ -191,7 +199,6 @@ $fluent-tree: extend(
 /// @prop {Map} background-active-selected [color: ('primary', 600)] - The background color used for the active selected tree node.
 /// @prop {Map} foreground-active-selected [contrast-color: ('primary', 600)] - The color used for the content of the active selected tree node.
 /// @prop {Map} border-color [color: ('primary', 200)] - The outline shadow color used for tree node in focus state.
-/// @prop {Map} hover-color [color: ('gray', 900, .1)] - The background color used for the tree node on hover.
 /// @requires $light-tree
 $bootstrap-tree: extend(
     $light-tree,
@@ -229,13 +236,6 @@ $bootstrap-tree: extend(
                 'primary' 200,
             ),
         ),
-        hover-color: (
-            color: (
-                'gray',
-                900,
-                0.1,
-            ),
-        ),
     )
 );
 
@@ -249,6 +249,7 @@ $bootstrap-tree: extend(
 /// @prop {Map} foreground-active-selected [contrast-color: ('primary', 400)] - The color used for the content of the active selected tree node.
 /// @prop {Map} border-color [color: ('primary', 300)] - The outline shadow color used for tree node in focus state.
 /// @prop {Map} hover-color [color: ('primary', 100)] - The background color used for the tree node on hover.
+/// @prop {Map} hover-selected-color [color: ('primary', 100)] - The background color used for the selected tree node on hover.
 /// @requires {Map} $light-tree
 $indigo-tree: extend(
     $light-tree,
@@ -297,5 +298,11 @@ $indigo-tree: extend(
                 100,
             ),
         ),
+        hover-selected-color: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
     )
 );