feat: add styling enhancements for group header

Author: Mihran Margaryan

packages/core/src/common/styles.ts

@@ -23,6 +23,8 @@ export function makeCSSStyle(theme: Theme): Record<string, string> {
         "--gdg-bg-header": theme.bgHeader,
         "--gdg-bg-header-has-focus": theme.bgHeaderHasFocus,
         "--gdg-bg-header-hovered": theme.bgHeaderHovered,
+        "--gdg-bg-group-header": theme.bgGroupHeader ?? theme.bgHeader,
+        "--gdg-bg-group-header-hovered": theme.bgGroupHeaderHovered ?? theme.bgHeaderHovered,
         "--gdg-bg-bubble": theme.bgBubble,
         "--gdg-bg-bubble-selected": theme.bgBubbleSelected,
         "--gdg-bg-search-result": theme.bgSearchResult,
@@ -66,6 +68,8 @@ export interface Theme {
     bgHeader: string;
     bgHeaderHasFocus: string;
     bgHeaderHovered: string;
+    bgGroupHeader?: string;
+    bgGroupHeaderHovered?: string;
     bgBubble: string;
     bgBubbleSelected: string;
     bgSearchResult: string;
@@ -109,6 +113,8 @@ const dataEditorBaseTheme: Theme = {
     bgHeader: "#F7F7F8",
     bgHeaderHasFocus: "#E9E9EB",
     bgHeaderHovered: "#EFEFF1",
+    bgGroupHeader: "#F7F7F8",
+    bgGroupHeaderHovered: "#EFEFF1",
 
     bgBubble: "#EDEDF3",
     bgBubbleSelected: "#FFFFFF",

packages/core/src/docs/08-theming.stories.tsx

@@ -259,8 +259,10 @@ The global theme is provided by the DataEditor by default and can be overriden b
 | bgCell | --gdg-bg-cell | string | The primary background color of the data grid. |
 | bgCellMedium | --gdg-bg-cell-medium | string | Used for disabled or otherwise off colored cells. |
 | bgHeader | --gdg-bg-header | string | The header background color |
+| bgGroupHeader | --gdg-bg-group-header | string \\| undefined | The group header background color, if none provided the \`bgHeader\` is used instead. |
 | bgHeaderHasFocus | --gdg-bg-header-has | string | The header background color when its column contains the selected cell |
 | bgHeaderHovered | --gdg-bg-header-hovered | string | The header background color when it is hovered |
+| bgGroupHeaderHovered | --gdg-bg-group-header-hovered | string \\| undefined | The group header background color when it is hovered, if none provided the \`bgHeaderHovered\` is used instead. |
 | bgBubble | --gdg-bg-bubble | string | The background color used in bubbles |
 | bgBubbleSelected | --gdg-bg-bubble-selected | string | The background color used in bubbles when the cell is selected |
 | bgSearchResult | --gdg-bg-search-result | string | The background color used for cells which match the search string |

packages/core/src/internal/data-grid/render/data-grid-render.header.ts

@@ -186,7 +186,9 @@ export function drawGroups(
             group?.overrideTheme === undefined ? theme : mergeAndRealizeTheme(theme, group.overrideTheme);
         const isHovered = hRow === -2 && hCol !== undefined && hCol >= span[0] && hCol <= span[1];
 
-        const fillColor = isHovered ? groupTheme.bgHeaderHovered : groupTheme.bgHeader;
+        const fillColor = isHovered
+            ? groupTheme.bgGroupHeaderHovered ?? groupTheme.bgHeaderHovered
+            : groupTheme.bgGroupHeader ?? groupTheme.bgHeader;
         if (fillColor !== theme.bgHeader) {
             ctx.fillStyle = fillColor;
             ctx.fill();
@@ -262,7 +264,7 @@ export function drawGroups(
             ctx.beginPath();
             ctx.moveTo(x + 0.5, 0);
             ctx.lineTo(x + 0.5, groupHeaderHeight);
-            ctx.strokeStyle = theme.borderColor;
+            ctx.strokeStyle = groupTheme.borderColor ?? theme.borderColor;
             ctx.lineWidth = 1;
             ctx.stroke();
         }