Merge pull request #7811 from IgniteUI/mpopov/list-items-background

Fix list items background transparency

Author: simeonoff

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

@@ -54,21 +54,34 @@ $_dark-bootstrap-list: extend(
 
 /// Generates a dark indigo list schema
 /// @type {Map}
+/// @property {Map} header-text-color [igx-contrast-color: 'surface'] - The list header text color.
+/// @property {Map} item-background-hover [igx-color: ('primary', 500), rgba: .5, to-opaque: (igx-color: 'surface')] - The list item hover background.
+/// @property {Map} item-background-active [igx-color: ('primary', 500), rgba: .5, to-opaque: (igx-color: 'surface')] - The active list item background color.
+
 /// @requires {function} extend
 /// @requires $_indigo-list
 $_dark-indigo-list: extend(
     $_indigo-list,
     (
-        header-text-color: #fff,
+        header-text-color: (
+            igx-contrast-color: 'surface'
+        ),
 
         item-background-hover: (
             igx-color: ('primary', 500),
-            rgba: .5
+            rgba: .5,
+            to-opaque: (
+                igx-color: 'surface',
+            )
+
         ),
 
         item-background-active: (
             igx-color: ('primary', 500),
-            rgba: .5
+            rgba: .5,
+            to-opaque: (
+                igx-color: 'surface',
+            )
         )
     )
 );

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

@@ -178,8 +178,8 @@ $_bootstrap-list: extend(
 ///
 /// @property {Map} header-text-color [igx-color: ('primary', 500)] - The list header text color.
 ///
-/// @property {Map} item-background-hover [igx-color: ('primary', 500), rgba: .15] - The list item hover background.
-/// @property {Map} item-background-active [igx-color: ('primary', 500), rgba: .15] - The active list item background color.
+/// @property {Map} item-background-hover [igx-color: ('primary', 500), rgba: .15, to-opaque: (igx-color: 'surface')] - The list item hover background.
+/// @property {Map} item-background-active [ igx-color: ('primary', 500), rgba: .15, to-opaque: (igx-color: 'surface')] - The active list item background color.
 ///
 /// @property {Map} item-text-color [igx-color: ('grays', 900)] - The list item text color.
 /// @property {Map} item-text-color-hover [igx-color: ('grays', 900)] - The list item text color.
@@ -214,12 +214,18 @@ $_indigo-list: extend(
 
         item-background-hover: (
             igx-color: ('primary', 500),
-            rgba: .15
+            rgba: .15,
+            to-opaque: (
+                igx-color: 'surface',
+            )
         ),
 
         item-background-active: (
             igx-color: ('primary', 500),
-            rgba: .15
+            rgba: .15,
+            to-opaque: (
+                igx-color: 'surface',
+            )
         ),
 
         item-text-color: (