featr(styles): update theming for hierarchical and tree grids

Author: desig9stein

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

@@ -1,67 +1,27 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-$my-primary: #130425;
-$my-secondary: #d0ab23;
-$dark-gray: #333;
-$light-gray: #999;
-$inactive-color: #826217;
-
-$dark-paginator: paginator-theme(
-    $foreground: $my-secondary,
-    $background: $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,
-);
-
-$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,
-);
-
-$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,
+$background: #19171b;
+$foreground: #eeece1;
+$accent: #ffcd0f;
+
+$grid-theme: grid-theme(
+	$background: $background,
+	$foreground: $foreground,
+	$accent-color: $accent,
 );
 
-$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,
+$paginator-theme: paginator-theme(
+	$foreground: #ff570f,
+	$background: #130425FF,
+	$border-color: #ff570f,
+	$accent-color: #ff570f,
 );
 
-igx-hierarchical-grid {
-    @include tokens($dark-paginator);
-    @include tokens($dark-drop-down-theme);
+igx-tree-grid {
+	@include tokens($grid-theme);
 }
 
 igx-paginator {
-    @include tokens($dark-button);
-    @include tokens($dark-input-group);
-    @include tokens($dark-select);
+	@include tokens($paginator-theme);
 }

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

@@ -1,25 +1,29 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-$background: #292826;
+$background: #19171b;
+$foreground: #eeece1;
 $accent: #ffcd0f;
 
-$dark-button-theme: outlined-button-theme(
-    $foreground: $accent,
-    $hover-background: $accent,
+$grid-theme: grid-theme(
+	$background: $background,
+	$foreground: $foreground,
+	$accent-color: $accent,
 );
 
-$dark-grid-toolbar-theme: grid-toolbar-theme(
-    $background: $background,
-    $title-text-color: $accent,
+$grid-toolbar-theme: grid-toolbar-theme(
+	$background: #170237,
+	$border-color: $accent,
+	$title-text-color: #f6d8d8,
+	$item-hover-background: rgb(246 216 216 / 0.3),
 );
 
 :host ::ng-deep {
-    igx-grid-toolbar {
-        @include tokens($dark-grid-toolbar-theme);
-
-        [igxButton="outlined"] {
-            @include tokens($dark-button-theme);
-        }
-    }
+	igx-hierarchical-grid {
+		@include tokens($grid-theme);
+	}
+	
+	igx-grid-toolbar {
+		@include tokens($grid-toolbar-theme);
+	}
 }

src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.scss

@@ -11,13 +11,8 @@ $grid-theme: grid-theme(
 	$accent-color: $accent,
 );
 
-$button-theme: outlined-button-theme(
-    $foreground: $accent,
-    $hover-background: $accent,
-);
-
 $grid-toolbar-theme: grid-toolbar-theme(
-    $background: #25025a,
+    $background: #170237,
     $border-color: $accent,
     $title-text-color: #f6d8d8,
     $item-hover-background: rgb(246 216 216 / 0.3),
@@ -30,9 +25,5 @@ $grid-toolbar-theme: grid-toolbar-theme(
 
     igx-grid-toolbar {
         @include tokens($grid-toolbar-theme);
-
-        [igxButton='outlined'] {
-            @include tokens($button-theme);
-        }
     }
 }