Merge pull request #5963 from IgniteUI/fix-5959

fix(grid): hovering selected row in dark theme is white

Author: kdinev

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss

@@ -13,6 +13,7 @@
 /// @prop {Color} row-even-background [#222] - The background color of even rows.
 /// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #222] - The hover row background color.
 /// @prop {Map} row-selected-background [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222] - The selected row background color.
+/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 'A700'), rgba: .24, hexrgba: #222] - The selected row background color on hover.
 /// @prop {Color} row-selected-text-color [#fff] - The selected row text color.
 /// @prop {Color} ghost-header-background [#222] - The dragged header background color.
 /// @prop {Color} cell-editing-background [#222] - The background for the cell in editing mode.
@@ -52,6 +53,12 @@ $_base-dark-grid: (
         hexrgba: #222
     ),
 
+    row-selected-hover-background: (
+        igx-color: ('secondary', 'A700'),
+        rgba: .24,
+        hexrgba: #222
+    ),
+
     row-selected-text-color: #fff,
 
     ghost-header-background: #222,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss

@@ -27,9 +27,9 @@
 /// @prop {Color} row-even-background [#fff] - The background color of even rows.
 /// @prop {Color} row-odd-text-color [inherit] - The text color of odd rows.
 /// @prop {Color} row-even-text-color [inherit] - The text color of even rows.
-/// @prop {Map} row-selected-background [igx-color: ('secondary', 50), hexrgba: #fff] - The selected row background color.
+/// @prop {Map} row-selected-background [igx-color: ('secondary', 50)] - The selected row background color.
 /// @prop {Map} row-selected-text-color [igx-contrast-color: ('secondary', 50)] - The selected row text color.
-/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 50), hexrgba: #fff] - The selected row hover background.
+/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 50)] - The selected row hover background.
 /// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #fff] - The hover row background color.
 /// @prop {Map} row-hover-text-color [igx-contrast-color: ('grays', 200)] - The hover row text color.
 /// @prop {Map} row-border-color [igx-color: ('grays', 300)] - The row bottom border color.
@@ -132,12 +132,10 @@ $_light-grid: extend(
 
         row-selected-background: (
             igx-color: ('secondary', 50),
-            hexrgba: #fff
         ),
 
         row-selected-hover-background: (
             igx-color: ('secondary', 50),
-            hexrgba: #fff
         ),
 
         row-selected-text-color: (
@@ -334,7 +332,7 @@ $_light-grid: extend(
 /// @prop {Map} row-selected-hover-background [igx-color: ('grays', 200), hexrgba: #fff] - The selected row hover background.
 /// @prop {Map} row-border-color [igx-color: ('grays', 100)] - The row bottom border color.
 /// @prop {Map} pinned-border-color [igx-color: ('grays', 200)] - The color of the pinned border.
-/// @prop {Map} cell-active-border-color [igx-color: ('primary', 100), hexrgba: #fff] - The active(focused) cell border color.
+/// @prop {Map} cell-active-border-color [igx-color: ('primary', 100)] - The active(focused) cell border color.
 /// @prop {Map} cell-selected-background [igx-color: ('grays', 300), hexrgba: #fff] - The selected cell background color.
 /// @prop {Map} grouparea-background [igx-color: 'surface'] - The grid group area background color.
 /// @prop {Map} group-row-background [igx-color: ('grays', 50), hexrgba: #fff] - The grid group row background color.
@@ -385,7 +383,6 @@ $_fluent-grid: extend(
 
         cell-active-border-color: (
             igx-color: ('primary', 100),
-            hexrgba: #fff
         ),
 
         cell-selected-background: (