refactor(grid): update bootstrap colors (#511)

Author: SisIvanova

sass/themes/schemas/components/dark/_grid.scss

@@ -29,6 +29,7 @@
 /// @prop {Map} cell-selected-within-background [color: ('secondary', 'A400')] - The background of the selected cell inside a selected row/column.
 /// @prop {Map} cell-selected-within-text-color [contrast-color: ('secondary', 'A400')] - The color of the selected cell inside a selected row/column.
 /// @prop {Map} grouparea-background [color: ('gray', 50)] - The grid group area background color.
+/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
 /// @prop {Map} group-row-background [color: ('gray', 50)] - The grid group row background color.
 /// @prop {Map} group-row-selected-background [color: ('gray', 100)] - The drop area background on drop color.
 $base-dark-grid: (
@@ -172,6 +173,13 @@ $base-dark-grid: (
         ),
     ),
 
+    grouparea-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+
     group-row-background: (
         color: (
             'gray',
@@ -190,7 +198,6 @@ $base-dark-grid: (
 /// Generates a dark material grid schema based on a mix of $material-grid and $base-dark-grid.
 /// @type {Map}
 /// @prop {Map} header-text-color [color: ('gray', 800, .7)] - The table header text color.
-/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
 /// @prop {Map} group-label-column-name-text [color: ('primary', 500)] - The grid group row column name text color.
 /// @prop {Map} group-label-icon [color: ('primary', 500)] - The grid group row icon color.
 /// @prop {Map} group-count-text-color [color: ('gray', 600)] - The grid group row cont badge text color.
@@ -209,13 +216,6 @@ $dark-material-grid: extend(
             ),
         ),
 
-        grouparea-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
-
         group-label-column-name-text: (
             color: (
                 'primary',
@@ -260,7 +260,6 @@ $dark-material-grid: extend(
 /// @prop {Map} row-selected-hover-text-color [contrast-color: ('gray', 200)] - The selected row hover text color.
 /// @prop {Map} cell-selected-within-background [color: ('gray', 200)] - The background of the selected cell inside a selected row/column.
 /// @prop {Map} cell-selected-within-text-color [contrast-color: ('gray', 200)] - The color of the selected cell inside a selected row/column.
-/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
 /// @prop {Map} group-row-background [color: ('gray', 100, .5)] - The grid group row background color.
 /// @prop {Map} group-count-text-color [color: ('gray', 600)] - The grid group row cont badge text color.
 /// @requires $fluent-grid
@@ -326,13 +325,6 @@ $dark-fluent-grid: extend(
             ),
         ),
 
-        grouparea-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
-
         group-row-background: (
             color: (
                 'gray',
@@ -366,7 +358,6 @@ $dark-fluent-grid: extend(
 /// @prop {Map} content-background [color: ('gray', 50)] - The table body background color.
 /// @prop {Map} drop-area-background [color: ('gray', 100, .5)] - The drop area background color.
 /// @prop {Map} grouparea-background [color: 'surface'] - The grid group area background color.
-/// @prop {Map} grouparea-color [contrast-color: 'surface'] - The grid group area color.
 /// @prop {Map} summaries-patch-background [color: ('gray', 100)] - The leading summaries patch backround. Used in hierarchical grids.
 /// @requires $bootstrap-grid
 /// @requires $base-dark-grid

sass/themes/schemas/components/light/_grid.scss

@@ -49,7 +49,7 @@
 /// @prop {Map} resize-line-color [color: ('secondary', 500)] - The table header resize line color.
 /// @prop {Map} drop-indicator-color [color: ('secondary', 500)] - The color of the drop indicator.
 /// @prop {Map} grouparea-background [color: ('gray', 100)] - The grid group area background color.
-/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
+/// @prop {Map} grouparea-color [color: ('gray', 600)] - The grid group area color.
 /// @prop {Map} group-row-background [color: ('gray', 100)] - The grid group row background color.
 /// @prop {Map} group-row-selected-background [color: ('gray', 200)] - The drop area background on drop color.
 /// @prop {Map} active-expand-icon-color [color: ('gray', 500)] - The drop area background on drop color.
@@ -97,7 +97,7 @@ $light-grid: extend(
         grouparea-color: (
             color: (
                 'gray',
-                500,
+                600,
             ),
         ),
 
@@ -611,7 +611,6 @@ $light-grid: extend(
 /// @prop {Map} row-selected-hover-background [color: ('secondary', 100)] - The selected row hover background.
 /// @prop {Map} row-selected-hover-text-color [contrast-color: ('secondary', 100)] - The selected row hover text color.
 /// @prop {Map} cell-active-border-color [color: ('secondary', 500)] - The active(focused) cell border color.
-/// @prop {Map} grouparea-color [color: ('gray', 600)] - The grid group area color.
 /// @prop {Map} group-label-column-name-text [color: ('primary', 800)] - The grid group row column name text color.
 /// @prop {Map} group-label-icon [color: ('primary', 800)] - The grid group row icon color.
 /// @prop {Map} group-count-text-color [color: ('gray', 700)] - The grid group row cont badge text color.
@@ -692,13 +691,6 @@ $material-grid: extend(
             ),
         ),
 
-        grouparea-color: (
-            color: (
-                'gray',
-                600,
-            ),
-        ),
-
         group-label-column-name-text: (
             color: (
                 'primary',
@@ -740,7 +732,6 @@ $material-grid: extend(
 /// @prop {Map} pinned-border-color [color: ('gray', 200)] - The color of the pinned border.
 /// @prop {Map} cell-active-border-color [color: ('primary', 100)] - The active(focused) cell border color.
 /// @prop {Map} grouparea-background [color: 'surface'] - The grid group area background color.
-/// @prop {Map} grouparea-color [color: ('gray', 600)] - The grid group area color.
 /// @prop {Map} group-row-background [color: ('gray', 50)] - The grid group row background color.
 /// @prop {Map} group-row-selected-background [color: ('gray', 100)] - The drop area background on drop color.
 /// @prop {Map} group-count-text-color [color: ('gray', 700)] - The grid group row cont badge text color.
@@ -838,13 +829,6 @@ $fluent-grid: extend(
             color: 'surface',
         ),
 
-        grouparea-color: (
-            color: (
-                'gray',
-                600,
-            ),
-        ),
-
         group-row-background: (
             color: (
                 'gray',
@@ -1127,6 +1111,7 @@ $bootstrap-grid: extend(
 /// @prop {Map} cell-editing-background [color: ('gray' 200)] - The background for the cell in editing mode.
 /// @prop {Map} row-selected-hover-text-color [color: ('gray', 900)] - The selected row hover text color.
 /// @prop {Map} grouparea-background [color: ('surface', 500)] - The grid group area background color.
+/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
 /// @prop {Map} drop-area-background [color: ('gray', 200)] - The drop area background color.
 /// @prop {Map} row-hover-text-color [color: ('gray', 900)] - The hover row text color.
 /// @prop {Map} row-selected-text-color [color: ('gray', 900)] - The selected row text color.
@@ -1433,6 +1418,13 @@ $indigo-grid: extend(
             ),
         ),
 
+        grouparea-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
         drop-area-background: (
             color: (
                 'gray',