fix(tree): Consume new hover-selected-color form schema, expose missing hover-colors to the user. (#13699)

Author: desig9stein

package-lock.json

@@ -67,7 +67,7 @@
     "@types/source-map": "0.5.2",
     "fflate": "^0.7.3",
     "hammerjs": "^2.0.8",
-    "igniteui-theming": "^3.3.0",
+    "igniteui-theming": "^3.3.2",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^6.6.7",

package.json

@@ -76,7 +76,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^3.3.0",
+        "igniteui-theming": "^3.3.2",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -23,6 +23,8 @@
 /// @param {Color} foreground-disabled [null] - The color used for the content of the disabled tree node.
 /// @param {Color} drop-area-color [null] - The background color used for the tree node drop aria.
 /// @param {Color} border-color [null] - The outline shadow color used for tree node in focus state.
+/// @param {Color} hover-color [null] - The background color used for the tree node on hover.
+/// @param {Color} hover-selected-color [null] - The background color used for the selected tree node on hover.
 /// @requires $light-material-schema
 ///
 /// @example scss Change the tree background
@@ -43,6 +45,8 @@
     $foreground-disabled: null,
     $drop-area-color: null,
     $border-color: null,
+    $hover-color: null,
+    $hover-selected-color: null,
     $size: null,
 ) {
     $name: 'igx-tree';
@@ -89,6 +93,8 @@
         foreground-disabled: $foreground-disabled,
         drop-area-color: $drop-area-color,
         border-color: $border-color,
+        hover-color: $hover-color,
+        hover-selected-color: $hover-selected-color,
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme')
         )),
@@ -219,6 +225,12 @@
     %node-wrapper--selected {
         background: var-get($theme, 'background-selected');
         color: var-get($theme, 'foreground-selected');
+
+        &:hover {
+            &::after {
+                background: var-get($theme, 'hover-selected-color');
+            }
+        }
     }
 
     %node-wrapper--active {