Merge pull request #3640 from IgniteUI/simeonoff/summaries-styling-samples

refactor(grid-samples): update grid summary styling samples

Author: simeonoff

src/app/grid/grid-groupby-summary-styling-sample/grid-groupby-summary-styling-sample.component.scss

@@ -1,18 +1,24 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
+$summaries-background: #e0f3ff;
+
 $custom-theme: grid-summary-theme(
-  $background-color: #e0f3ff,
-  $focus-background-color: rgba(#94d1f7, .3),
-  $label-color: #e41c77,
-  $result-color: black,
-  $pinned-border-width: 2px,
-  $pinned-border-style: dotted,
-  $pinned-border-color: #e41c77
+    $background-color: $summaries-background,
+    $focus-background-color: rgba(#94d1f7, 0.3),
+    $label-color: #e41c77,
+    $result-color: black,
+    $pinned-border-width: 2px,
+    $pinned-border-style: dotted,
+    $pinned-border-color: #e41c77,
 );
 
 :host {
-  ::ng-deep {
-    @include css-vars($custom-theme);
-  }
+    ::ng-deep {
+        igx-grid-summary-row {
+            --summaries-patch-background: #{$summaries-background};
+        }
+
+        @include css-vars($custom-theme);
+    }
 }

src/app/hierarchical-grid/hierarchical-grid-summary-styling/hierarchical-grid-summary-styling.component.scss

@@ -1,19 +1,22 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
+$summaries-background: #e0f3ff;
+
 $custom-theme: grid-summary-theme(
-  $background-color: #e0f3ff,
-  $focus-background-color: rgba(#94d1f7, .3),
-  $label-color: #e41c77,
-  $result-color: black,
-  $pinned-border-width: 2px,
-  $pinned-border-style: dotted,
-  $pinned-border-color: #e41c77
+    $background-color: $summaries-background,
+    $focus-background-color: rgba(#94d1f7, 0.3),
+    $label-color: #e41c77,
+    $result-color: black,
+    $pinned-border-width: 2px,
+    $pinned-border-style: dotted,
+    $pinned-border-color: #e41c77,
 );
 
 :host {
-  ::ng-deep {
-    @include css-vars($custom-theme);
-  }
+    --igx-grid-summaries-patch-background: #{$summaries-background};
+
+    ::ng-deep {
+        @include css-vars($custom-theme);
+    }
 }
-