fix(grid): update styling samples to use correct theming scoping and simplified themes (#3953)

Co-authored-by: Stamen Stoychev <sstoychev@infragistics.com>

Author: simeonoff

src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss

@@ -8,51 +8,51 @@ $light-gray: #999;
 $inactive-color: #826217;
 
 $dark-paginator: paginator-theme(
-  $text-color: $my-secondary,
-  $background-color: $my-primary,
-  $border-color: $my-secondary
+    $text-color: $my-secondary,
+    $background-color: $my-primary,
+    $border-color: $my-secondary,
 );
 
 $dark-button: flat-icon-button-theme(
-  $foreground: $my-secondary,
-  $hover-foreground: $dark-gray,
-  $hover-background: $my-secondary,
-  $focus-foreground: $dark-gray,
-  $focus-background: $my-secondary,
-  $border-color: $my-secondary,
-  $focus-border-color: $my-secondary,
-  $disabled-foreground: $inactive-color
+    $foreground: $my-secondary,
+    $hover-foreground: $dark-gray,
+    $hover-background: $my-secondary,
+    $focus-foreground: $dark-gray,
+    $focus-background: $my-secondary,
+    $border-color: $my-secondary,
+    $focus-border-color: $my-secondary,
+    $disabled-foreground: $inactive-color,
 );
 
 $dark-select: select-theme(
-  $toggle-button-background: $my-primary,
-  $toggle-button-foreground: $inactive-color,
-  $toggle-button-foreground-filled: $inactive-color,
-  $toggle-button-foreground-focus: $inactive-color,
-  $toggle-button-background-focus--border: $my-primary,
+    $toggle-button-background: $my-primary,
+    $toggle-button-foreground: $inactive-color,
+    $toggle-button-foreground-filled: $inactive-color,
+    $toggle-button-foreground-focus: $inactive-color,
+    $toggle-button-background-focus--border: $my-primary,
 );
 
 $dark-input-group: input-group-theme(
-  $filled-text-color: $my-secondary,
-  $idle-text-color: $my-secondary,
-  $filled-text-hover-color: $my-secondary,
-  $focused-text-color: $my-secondary,
-  $border-color: darken($inactive-color, 10%),
-  $focused-border-color: $my-secondary,
-  $input-suffix-color: $my-secondary,
+    $filled-text-color: $my-secondary,
+    $idle-text-color: $my-secondary,
+    $filled-text-hover-color: $my-secondary,
+    $focused-text-color: $my-secondary,
+    $border-color: darken($inactive-color, 10%),
+    $focused-border-color: $my-secondary,
+    $input-suffix-color: $my-secondary,
 );
 
 $dark-drop-down-theme: drop-down-theme(
-  $background-color: $my-primary,
-  $item-text-color: $my-secondary,
-  $selected-item-background: $my-secondary,
-  $selected-item-text-color: $dark-gray,
-  $focused-item-background: $my-secondary,
-  $focused-item-text-color: $dark-gray,
-  $selected-focus-item-background: $my-secondary,
-  $selected-focus-item-text-color: $dark-gray,
-  $selected-hover-item-background: $my-secondary,
-  $selected-hover-item-text-color: $dark-gray
+    $background-color: $my-primary,
+    $item-text-color: $my-secondary,
+    $selected-item-background: $my-secondary,
+    $selected-item-text-color: $dark-gray,
+    $focused-item-background: $my-secondary,
+    $focused-item-text-color: $dark-gray,
+    $selected-focus-item-background: $my-secondary,
+    $selected-focus-item-text-color: $dark-gray,
+    $selected-hover-item-background: $my-secondary,
+    $selected-hover-item-text-color: $dark-gray,
 );
 
 igx-grid {

src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.scss

@@ -1,60 +1,16 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-$yellow: #ffcd0f;
-$black: #292826;
+$background: #292826;
+$foreground: #eeece1;
+$accent: #ffcd0f;
 
 $custom-grid: grid-theme(
-  $filtering-row-background: $yellow,
-  $excel-filtering-header-foreground: $black,
-  $excel-filtering-subheader-foreground: $black,
-  $excel-filtering-actions-foreground: #006400,
-  $excel-filtering-actions-hover-foreground: $yellow,
-  $excel-filtering-actions-disabled-foreground: var(--ig-gray-500)
+    $background: $background,
+    $foreground: $foreground,
+    $accent-color: $accent,
 );
 
-$custom-button: contained-button-theme(
-  $background: $black,
-  $foreground: $yellow,
-  $hover-background: $black,
-  $hover-foreground: $yellow
-);
-
-$flat-custom-button: flat-button-theme(
-  $foreground: $black,
-);
-
-$custom-input-group: input-group-theme(
-  $box-background: $yellow,
-  $idle-text-color: $black,
-  $focused-text-color: $black,
-  $filled-text-color: $black
-);
-
-$custom-list: list-theme(
-  $background: $yellow
-);
-
-$custom-checkbox: checkbox-theme(
-  $empty-color: $black,
-  $fill-color: $black,
-  $tick-color: $yellow,
-  $label-color: $black
-);
-
-$custom-drop-down: drop-down-theme(
-  $background-color: $yellow,
-  $item-text-color: $black,
-  $hover-item-background: $black,
-  $hover-item-text-color: $yellow
-);
-
-:host {
+:host ::ng-deep {
     @include tokens($custom-grid);
-    @include tokens($custom-drop-down);
-    @include tokens($custom-input-group);
-    @include tokens($custom-checkbox);
-    @include tokens($custom-list);
-    @include tokens($custom-button);
-    @include tokens($flat-custom-button);
 }

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

@@ -7,28 +7,31 @@ $light-gray: #f8f8f8;
 $black: #222;
 
 $custom-theme: grid-theme(
-  $group-row-background: $gray,
-  $group-row-selected-background: #383838,
-  $group-label-column-name-text: $light-gray,
-  $group-label-icon: $yellow,
-  $group-label-text: $light-gray,
-  $group-count-background: $yellow,
-  $group-count-text-color: $black,
-  $expand-icon-color: $yellow,
-  $expand-icon-hover-color: rgb(223, 181, 13),
-  $cell-active-border-color: $yellow,
-  $row-selected-background: #fff6d3,
-  $row-selected-text-color: $black,
-  $drop-indicator-color: $yellow
+    $group-row-background: $gray,
+    $group-row-selected-background: #383838,
+    $group-label-column-name-text: $light-gray,
+    $group-label-icon: $yellow,
+    $group-label-text: $light-gray,
+    $group-count-background: $yellow,
+    $group-count-text-color: $black,
+    $expand-icon-color: $yellow,
+    $expand-icon-hover-color: rgb(223, 181, 13),
+    $cell-active-border-color: $yellow,
+    $row-selected-background: #fff6d3,
+    $row-selected-text-color: $black,
+    $drop-indicator-color: $yellow,
 );
 
 $custom-chips-theme: chip-theme(
-  $background: $gray,
-  $text-color: $light-gray,
-  $hover-text-color: #e7e7e7
+    $background: $gray,
+    $text-color: $light-gray,
+    $hover-text-color: #e7e7e7,
 );
 
-:host {
+:host ::ng-deep {
     @include tokens($custom-theme);
-    @include tokens($custom-chips-theme);
+
+    igx-chip {
+        @include tokens($custom-chips-theme);
+    }
 }

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

@@ -16,8 +16,8 @@ $custom-theme: grid-summary-theme(
     ::ng-deep {
         igx-grid-summary-row {
             --summaries-patch-background: #{$summaries-background};
-        }
 
-        @include tokens($custom-theme);
+            @include tokens($custom-theme);
+        }
     }
 }

src/app/hierarchical-grid/hierarchical-grid-column-hiding-toolbar-style/hierarchical-grid-column-hiding-toolbar-style.component.scss

@@ -1,28 +1,44 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
+$background: #292826;
+$foreground: #ffcd0f;
+
 $custom-column-actions-theme: column-actions-theme(
-  $background-color: #292826,
-  $title-color: #ffcd0f
+    $background-color: $background,
+    $title-color: $foreground,
+);
+
+$custom-flat-button: flat-button-theme(
+    $foreground: $foreground,
 );
 
-$custom-button: flat-button-theme(
-  $foreground: #ffcd0f,
-  $disabled-foreground: #292826
+$custom-checkbox-theme: checkbox-theme(
+    $label-color: $foreground,
+    $empty-color: $foreground,
+    $fill-color: $foreground,
+    $tick-color: $background,
 );
 
-$dark-checkbox-theme: checkbox-theme(
-  $label-color: #ffcd0f,
-  $empty-color: #ffcd0f,
-  $fill-color: #ffcd0f,
-  $tick-color: #292826
+$input-group-theme: input-group-theme(
+    $box-background: $background,
+    $idle-bottom-line-color: $foreground,
 );
 
 :host ::ng-deep {
-  @include tokens($custom-column-actions-theme);
+    .igx-column-actions {
+        @include tokens($custom-column-actions-theme);
+
+        igx-input-group {
+            @include tokens($input-group-theme);
+        }
+
+        igx-checkbox {
+            @include tokens($custom-checkbox-theme);
+        }
 
-  .igx-column-actions {
-    @include tokens($custom-button);
-    @include tokens($dark-checkbox-theme);
-  }
+        .igx-button--flat {
+            @include tokens($custom-flat-button);
+        }
+    }
 }

src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-style/hierarchical-grid-excel-style-filtering-style.component.scss

@@ -1,71 +1,16 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-$yellow: #ffcd0f;
-$black: #292826;
+$background: #292826;
+$foreground: #eeece1;
+$accent: #ffcd0f;
 
 $custom-grid: grid-theme(
-  $filtering-row-background: $yellow
-);
-
-$custom-flat-button: flat-button-theme(
-  $background: $yellow,
-  $foreground: $black,
-  $hover-background: $black,
-  $hover-foreground: $yellow
-);
-
-$custom-contained-button: contained-button-theme(
-  $background: $black,
-  $foreground: $yellow,
-  $hover-background: $black,
-  $hover-foreground: $yellow
-);
-
-$custom-button-group: button-group-theme(
-  $item-background: $yellow,
-  $item-text-color: $black,
-  $item-hover-background: $black,
-  $item-hover-text-color: $yellow
-);
-
-$custom-input-group: input-group-theme(
-  $box-background: $yellow,
-  $idle-text-color: $black,
-  $focused-text-color: $black,
-  $filled-text-color: $black
-);
-
-$custom-list: list-theme(
-  $background: $yellow
-);
-
-$custom-checkbox: checkbox-theme(
-  $empty-color: $black,
-  $fill-color: $black,
-  $tick-color: $yellow,
-  $label-color: $black
-);
-
-$custom-drop-down: drop-down-theme(
-  $background-color: $yellow,
-  $selected-item-background: lighten($black, 10%),
-  $selected-focus-item-background: lighten($black, 15%),
-  $item-text-color: $black,
-  $hover-item-background: $black,
-  $hover-item-text-color: $yellow
+    $background: $background,
+    $foreground: $foreground,
+    $accent-color: $accent,
 );
 
 :host ::ng-deep {
     @include tokens($custom-grid);
-    @include tokens($custom-drop-down);
-    @include tokens($custom-input-group);
-    @include tokens($custom-checkbox);
-    @include tokens($custom-list);
-    @include tokens($custom-flat-button);
-    @include tokens($custom-button-group);
-
-    .igx-excel-filter__apply {
-      @include tokens($custom-contained-button);
-    }
 }