Merge branch 'simeonoff/indigo-theme' into didimmova/fix-sassdoc

Author: didimmova

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1557,18 +1557,11 @@
     }
 
     %igx-grid__th--active {
-        @extend %grid-cell--active;
-
+        %grid-cell-header,
         %igx-grid__th--selected,
         %igx-grid__th--selectable {
             @extend %grid-cell--active
         }
-
-        %igx-grid__filtering-cell,
-        %grid-cell-header {
-            border-right: none;
-            border-bottom: none;
-        }
     }
 
     %igx-grid-summary--active {

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

@@ -40,6 +40,7 @@ $_dark-bootstrap-chip: extend($_bootstrap-chip, $_base-dark-chip);
 /// Generates a dark indigo chip schema based on a mix of $_indigo-chip and $_base-dark-chip.
 /// @type {Map}
 /// @prop {Map} background [igx-color: ('grays', 500)] - The chip background color.
+/// @prop {Map} ghost-background [igx-color: ('grays', 300), to-opaque: (igx-color: 'surface')] - The chip ghost background color.
 /// @prop {Map} hover-background [igx-color: ('grays', 300)] - The chip hover background color.
 /// @prop {Map} focus-background [igx-color: ('grays', 300)] The focused chip background color.
 /// @requires {function} extend
@@ -53,6 +54,14 @@ $_dark-indigo-chip: extend(
             igx-color: ('grays', 500)
         ),
 
+        ghost-background: (
+            igx-color: ('grays', 300),
+
+            to-opaque: (
+                igx-color: 'surface',
+            )
+        ),
+
         hover-background: (
             igx-color: ('grays', 300)
         ),

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

@@ -57,24 +57,33 @@ $_dark-bootstrap-list: extend(
 
 /// Generates a dark indigo list schema
 /// @type {Map}
-/// @property {Map} header-text-color [#fff] - The list header text color.
-/// @property {Map} item-background-hover [igx-color: ('primary', 500), rgba: .5] - The list item hover background.
-/// @property {Map} item-background-active [igx-color: ('primary', 500), rgba: .5] - The active list item background color.
+/// @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/_chip.scss

@@ -207,6 +207,7 @@ $_bootstrap-chip: extend(
 /// @prop {Number} border-radius [3px] - The border radius fraction used for chip component.
 /// @prop {Color} text-color [#fff] - The chip text color.
 /// @prop {Map} background [igx-color: ('grays', 600)] - The chip background color.
+/// @prop {Map} ghost-background [igx-color: ('grays', 800), to-opaque: (igx-color: 'surface')] - The chip ghost background color.
 /// @prop {Color} hover-text-color [#fff] - The chip text hover color.
 /// @prop {Map} hover-background [igx-color: ('grays', 800)] - The chip hover background color.
 /// @prop {Color} focus-text-color [#fff] The focused chip text color.
@@ -230,6 +231,14 @@ $_indigo-chip: extend(
             igx-color: ('grays', 600)
         ),
 
+        ghost-background: (
+            igx-color: ('grays', 800),
+
+            to-opaque: (
+                igx-color: 'surface',
+            )
+        ),
+
         text-color: #fff,
 
         hover-text-color: #fff,

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

@@ -183,8 +183,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.
@@ -218,12 +218,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: (