feat(grid): update grid border-related styles

CHANGELOG.md

@@ -2,6 +2,69 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 22.0.0
+
+### New Features
+
+- **Theming**
+    - Added derived themes for the Grid and related internal components. When a parent component theme is included, its internal controls now derive their tokens from the parent theme colors, keeping nested buttons, icons, inputs, dropdowns, checkboxes, scrollbars, chips, and other helper components visually aligned.
+
+    - The derived themes are introduces for the following components:
+        - Grid
+        - Excel Filtering
+        - Grid Toolbar
+        - Paginator
+        - Column Actions
+        - Query Builder and Advanced Filtering Dialog
+
+    - The derived themes are applied through the existing component theme mixins, so no additional mixin call is required. To style the whole `IgxGrid`, provide the `$background`, `$foreground`, and `$accent-color` properties to `grid-theme()` and include the generated theme with `tokens()`. The `$foreground` property is optional; when omitted, it is derived automatically as a contrast color for the background. Internal components inherit derived tokens from the parent component theme.
+
+    You can also style each compound component inside the grid with its own theme by providing the same color properties. The generated tokens are scoped to that component and affect the nested controls inside it.
+
+    ```scss
+        $grid-theme: grid-theme(
+            $schema: $schema,
+            $background: #ffffff,
+            $foreground: #1f2937,
+            $accent-color: #0061a8
+        );
+
+        $excel-filtering-theme: excel-filtering-theme(
+            $schema: $schema,
+            $background: #ff2323,
+            $accent-color: #21fc9a
+        );
+
+        $query-builder-theme: query-builder-theme(
+            $schema: $schema,
+            $background: #f235ff,
+            $accent-color: #89a800
+        );
+
+        $grid-toolbar-theme: grid-toolbar-theme( ... );
+
+        $paginator-theme: paginator-theme( ... );
+
+        $column-actions-theme: column-actions-theme( ... );
+
+        igx-grid {
+            @include tokens($grid-theme);
+        }
+
+        igx-grid-excel-style-filtering,
+        .igx-excel-filter__secondary {
+            @include tokens($excel-filtering-theme);
+        }
+
+        igx-advanced-filtering-dialog {
+            @include tokens($query-builder-theme);
+        }
+
+        ...
+    ```
+
+    - Added a dedicated `excel-filtering-theme()` for styling the `Excel Style Filtering`. Use it instead of the excel-filtering color properties from `grid-theme()`.
+
 ## 21.2.0
 
 ### New Features

package.json

@@ -82,7 +82,7 @@
     "express": "^5.2.1",
     "fflate": "^0.8.1",
     "igniteui-i18n-core": "^1.0.2",
-    "igniteui-theming": "^27.2.0",
+    "igniteui-theming": "^27.3.0",
     "igniteui-trial-watermark": "^3.1.0",
     "jspdf": "^4.2.1",
     "lodash-es": "^4.17.21",

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

@@ -44,7 +44,7 @@
         outline-style: none;
 
         @if $variant == 'indigo' {
-            border-top: rem(1px) solid var-get($theme, 'border-color');
+            border-top: var-get($theme, 'border-width') var-get($theme, 'border-style') var-get($theme, 'border-color');
         }
     }
 

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

@@ -80,6 +80,10 @@
             @extend %grid-scroll-start !optional;
         }
 
+        @include e(scroll-end) {
+            @extend %grid-scroll-end !optional;
+        }
+
         @include e(scroll-main) {
             @extend %grid-scroll-main !optional;
         }

projects/igniteui-angular/core/src/core/styles/components/grid/_grid-derived-themes.scss

@@ -96,6 +96,23 @@
             )
         );
 
+        igx-grid-group-by-area,
+        igx-grid-header-row {
+            @include tokens(
+                chip-theme(
+                    $schema: $schema,
+                    $background: color-mix(in srgb, var(--ig-grid-header-text-color) 12%, var(--ig-grid-header-background)),
+                    $hover-background: color-mix(in srgb, var(--ig-grid-header-text-color) 18%, var(--ig-grid-header-background)),
+                    $text-color: var(--ig-grid-header-text-color),
+                    $ghost-background: color-mix(in srgb, var(--ig-grid-header-text-color) 12%, var(--ig-grid-header-background)),
+                    $ghost-text-color: var(--ig-grid-header-text-color),
+                    $disabled-background: color-mix(in srgb, var(--ig-grid-header-text-color) 12%, var(--ig-grid-header-background)),
+                    $disabled-text-color: color-mix(in srgb, var(--ig-grid-header-text-color) 50%, var(--ig-grid-header-background)),
+                    $disabled-border-color: color-mix(in srgb, var(--ig-grid-header-text-color) 24%, var(--ig-grid-header-background)),
+                )
+            );
+        }
+
         @include tokens(
             contained-button-theme(
                 $schema: $schema,
@@ -302,7 +319,7 @@
         @include tokens(
             scrollbar-theme(
                 $schema: $schema,
-                $sb-track-bg-color: var(--_grid-background, $scrollbar-bg-color),
+                $sb-track-bg-color: var(--_grid-background, var(--content-background), $scrollbar-bg-color),
                 $sb-thumb-bg-color: var(--_scrollbar-thumb-color, $scrollbar-thumb-color),
                 $sb-track-border-color: var(--_scrollbar-track-border-color, $scrollbar-track-border-color),
             ),

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

@@ -54,7 +54,11 @@
     $grid-cell-pinned-style: rem(1px) solid;
     $grid-cell-pinned-border-color: color($color: 'gray', $variant: 300);
 
-    $grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
+    $grid-header-border-color: if($variant == 'indigo', var-get($theme, 'header-border-color'), hsla(from var-get($theme, 'header-border-color') h s l / 0.38));
+    $grid-action-border-color: if($variant == 'indigo', var-get($theme, 'action-border-color'), hsla(from var-get($theme, 'action-border-color') h s l / 0.38));
+    $grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') $grid-header-border-color;
+    $grid-row-border: var-get($theme, 'row-border-width') var-get($theme, 'row-border-style') var-get($theme, 'row-border-color');
+    $grid-scrollbar-borders: rem(1px) solid var(--ig-grid-summary-border-color, var(--row-border-color));
 
     $cell-pin: (
         style: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style'),
@@ -606,13 +610,32 @@
         %grid-row {
             border-bottom: none;
         }
+
+        %grid-mrl-block {
+            %grid-cell-display {
+                border-inline-end: $grid-header-border;
+                border-bottom: $grid-header-border;
+            }
+        }
     }
 
     %grid-thead-container {
         grid-row: 3;
         display: flex;
         overflow: hidden;
 
+        .igx-grid__tr-action:last-of-type {
+            border-inline-end: $grid-header-border;
+        }
+
+        .igx-grid-th--pinned-first {
+            border-inline-start: var(--pinned-border-width) var(--pinned-border-style) var(--header-border-color) !important;
+        }
+
+        .igx-grid-th--pinned-last {
+            border-inline-end: var(--pinned-border-width) var(--pinned-border-style) var(--header-border-color) !important;
+        }
+
         %igx-grid__header-indentation {
             igx-icon {
                 --component-size: #{if($variant == 'indigo', 2, 3)};
@@ -640,7 +663,7 @@
             %igx-grid__header-indentation,
             %igx-grid__row-indentation,
             %grid__cbx-selection {
-                border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
+                border-bottom: $grid-header-border;
             }
         }
 
@@ -717,7 +740,6 @@
 
     %grid-tfoot {
         grid-row: 5;
-        border-top: $grid-header-border;
         z-index: 10001;
     }
 
@@ -754,8 +776,8 @@
         }
 
         %grid-cell-display {
-            border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');
-            border-bottom: rem(1px) solid var-get($theme, 'header-border-color');
+            border-inline-end: $grid-row-border;
+            border-bottom: $grid-row-border;
         }
     }
 
@@ -765,8 +787,8 @@
 
             @if $variant == 'indigo' {
                 %grid-cell-display {
-                    border-inline-end: rem(1px) solid var-get($theme, 'row-border-color');
-                    border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
+                    border-inline-end: $grid-row-border;
+                    border-bottom: $grid-row-border;
                 }
             }
         }
@@ -775,7 +797,7 @@
         %igx-grid__hierarchical-expander,
         %igx-grid__row-indentation,
         %igx-grid__drag-indicator {
-            border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
+            border-bottom: $grid-row-border;
         }
     }
 
@@ -823,46 +845,50 @@
         display: flex;
         flex-flow: row nowrap;
         width: 100%;
-        background: var-get($theme, 'header-background');
+        background: var-get($theme, 'content-background');
         z-index: 10001;
     }
 
     %grid-thead-thumb {
         background: var-get($theme, 'header-background');
-        border-inline-start: rem(1px) solid var-get($theme, 'header-border-color');
+        border-inline-start: $grid-header-border;
     }
 
     %grid-tfoot-thumb {
         position: absolute;
         top: 0;
         inset-inline-end: 0;
-        background: var-get($theme, 'header-background');
-        border-inline-start: rem(1px) solid var-get($theme, 'header-border-color');
+        background: var(--_grid-background, var-get($theme, 'content-background'));
+        border-inline-start: $grid-scrollbar-borders;
     }
 
     %grid-tbody-scrollbar {
         background: var-get($theme, 'content-background');
-        border-inline-start: rem(1px) solid var-get($theme, 'row-border-color');
+        border-inline-start: $grid-scrollbar-borders;
         position: relative;
     }
 
     %grid-tbody-scrollbar-start {
-        background: var-get($theme, 'header-background');
+        background: var-get($theme, 'content-background');
     }
 
     %grid-tbody-scrollbar-main {
         position: relative;
     }
 
     %grid-tbody-scrollbar-end {
-        background: var-get($theme, 'header-background');
+        background: var-get($theme, 'content-background');
     }
 
-    %grid-scroll-start {
-        background: var-get($theme, 'header-background');
+    %grid-scroll-start,
+    %grid-scroll-end {
+        background: var-get($theme, 'content-background');
+        border-block-start: $grid-scrollbar-borders;
     }
 
     %grid-scroll-main {
+        border-block-start: $grid-scrollbar-borders;
+
         igx-display-container {
             height: 0;
         }
@@ -875,7 +901,7 @@
     %grid-row {
         display: flex;
         background: var-get($theme, 'content-background');
-        border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
+        border-bottom: $grid-row-border;
         outline-style: none;
         position: relative;
         background-clip: content-box !important;
@@ -1825,13 +1851,11 @@
     %grid-summaries--body {
         --summaries-patch-background: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-100)) 12%, var(--_grid-background, var(--ig-gray-100)));
 
-        border-bottom: rem(1px) dashed var-get($theme, 'row-border-color');
+        border-bottom: var(--ig-grid-summary-border-width, rem(1px))
+        dashed
+        var(--ig-grid-summary-border-color, var(--row-border-color));
         background-color: var-get($theme, 'summaries-patch-background');
 
-        &:last-of-type {
-            border-bottom: none;
-        }
-
         .igx-grid-summary {
           --background-color: inherit;
           --result-color: #{adaptive-contrast(var(--background-color))};
@@ -1841,11 +1865,15 @@
     %grid-summaries-patch {
         position: relative;
         background: inherit;
-        border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');
+        border-inline-end: var(--ig-grid-summary-border-width, rem(1px))
+        var(--ig-grid-summary-border-style, solid)
+        var(--ig-grid-summary-border-color, var(--row-border-color));
         z-index: 1;
 
         @if $variant == 'indigo' {
-            border-top: rem(1px) solid var-get($theme, 'header-border-color');
+            border-top: var(--ig-grid-summary-border-width, rem(1px))
+            var(--ig-grid-summary-border-style, solid)
+            var(--ig-grid-summary-border-color, var(--row-border-color));
         }
     }
 
@@ -1980,7 +2008,7 @@
         background: var-get($theme, 'group-row-background');
         display: flex;
         outline-style: none;
-        border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
+        border-block: $grid-row-border;
         min-height: var(--header-size);
 
         %igx-grid__drag-indicator {
@@ -2119,7 +2147,7 @@
             map.get($grid-grouping-indicator-padding, 'cosy'),
             map.get($grid-grouping-indicator-padding, 'comfortable')
         );
-        border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');
+        border-inline-end: $grid-row-border;
         background: inherit;
         z-index: 1;
         background-clip: border-box;
@@ -2585,7 +2613,7 @@
     %igx-grid__tr-container {
         overflow: auto;
         width: 100%;
-        border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
+        border-bottom: $grid-row-border;
     }
 
     %igx-grid__tr-container--active {
@@ -2714,7 +2742,8 @@
 
     %igx-grid__tr-action {
         &:last-of-type {
-            border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
+            border-inline-end: var-get($theme, 'row-border-width') var-get($theme, 'row-border-style') $grid-action-border-color;
+
             @if $variant != 'indigo' {
                 min-height: sizable(
                     rem(32px),