fix(grid): Allow users to change the group area color

Author: MPopov

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

@@ -56,6 +56,7 @@
 /// @param {Color} $drop-indicator-color [null] - The color applied to the line between the columns when dragging a column.
 ///
 /// @param {Color} $grouparea-background [null] - The grid group area background color.
+/// @param {Color} $grouparea-color [null] - The grid group area color.
 ///
 /// @param {Color} $group-row-background [null] - The grid group row background color.
 /// @param {Color} $group-row-selected-background [null] - The drop area background on drop color.
@@ -160,6 +161,7 @@
     $drop-indicator-color: null,
 
     $grouparea-background: null,
+    $grouparea-color: null,
 
     $group-row-background: null,
     $group-row-selected-background: null,
@@ -364,10 +366,20 @@
         $grouparea-background: $header-background
     }
 
+    @if not($grouparea-color) and $grouparea-background {
+        $grouparea-color: rgba(text-contrast($grouparea-background), .8)
+    }
+
+    @if not($grouparea-color) and $header-background {
+        $grouparea-color: rgba(text-contrast($header-background), .8)
+    }
+
     @if not($drop-area-background) and $grouparea-background {
         $drop-area-background: text-contrast($grouparea-background);
     }
 
+
+
     @if not($drop-area-on-drop-background) and $drop-area-background {
         $drop-area-on-drop-background: $drop-area-background;
     }
@@ -470,6 +482,8 @@
         drop-indicator-color: $drop-indicator-color,
 
         grouparea-background: $grouparea-background,
+        grouparea-color: $grouparea-color,
+
         group-label-column-name-text: $group-label-column-name-text,
         group-label-icon: $group-label-icon,
         group-label-text: $group-label-text,
@@ -1875,6 +1889,7 @@
         flex-wrap: wrap;
         border-bottom: $grid-header-border;
         background: --var($theme, 'grouparea-background');
+        color: --var($theme, 'grouparea-color');
         min-height: map-get($grouparea-min-height, 'comfortable');
         padding: map-get($grouparea-padding, 'comfortable');
         z-index: 2;

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

@@ -42,6 +42,7 @@
 /// @prop {Map} cell-selected-text-color [igx-contrast-color: ('grays', 200)] - The selected cell text color.
 /// @prop {Map} resize-line-color [igx-color: ('secondary', 500)] - The table header resize line color.
 /// @prop {Map} grouparea-background [igx-color: ('grays', 100), hexrgba: #fff] - The grid group area background color.
+/// @prop {map} grouparea-color [igx-color: ('grays', 500)] - The grid group area color.
 /// @prop {Map} group-row-background [igx-color: ('grays', 100), hexrgba: #fff] - The grid group row background color.
 /// @prop {Map} group-row-selected-background [igx-color: ('grays', 200), hexrgba: #fff] - The drop area background on drop color.
 /// @prop {Map} active-expand-icon-color [igx-color: ('grays', 500)] - The drop area background on drop color.
@@ -90,6 +91,10 @@ $_light-grid: extend(
     (
         variant: 'material',
 
+        grouparea-color: (
+            igx-color: ('grays', 500)
+        ),
+
         filtering-background-and: (
             igx-color: ('primary', 300)
         ),