Merge pull request #7805 from IgniteUI/simeonoff/indigo-chip-fix

fix(chip): chip ghost background has low-contrast background

Author: simeonoff

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 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/light/_chip.scss

@@ -214,6 +214,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.
@@ -239,6 +240,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,