fix(query-builder): apply theme to styling sample

Author: teodosiah

src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss

@@ -4,87 +4,75 @@ $yellow: #ffcd0f;
 $black: #292826;
 $muted-yellow: #ffe482;
 
-$custom-query-builder: query-builder-theme(
-    $background: $black,
-    $tree-background: $black,
-    $header-background: $black,
-    $header-foreground: $yellow
-);
-
-$custom-button: button-theme(
-    $schema: $dark-material-schema,
-    $background: $black,
-    $foreground: $yellow,
-    $hover-foreground: $black,
-    $hover-background: $yellow,
-    $focus-foreground: $yellow,
-    $focus-background: $black,
-    $border-color: $yellow
-);
-
-$custom-contained-button: button-theme(
-    $schema: $dark-material-schema,
-    $background: $yellow,
-    $foreground: $black,
-    $active-background: $muted-yellow,
-    $active-foreground: $black,
-    $hover-background: $muted-yellow,
-    $hover-foreground: $black,
-    $border-color: $yellow,
-    $active-border-color: $muted-yellow,
-    $hover-border-color: $muted-yellow,
-    $focus-border-color: $yellow
-);
-
-$custom-button-group: button-group-theme(
-    $schema: $dark-material-schema,
-    $item-background:  $black,
-    $item-text-color: $yellow,
-    $item-border-color: $yellow,
-    $item-selected-background: $yellow,
-    $item-hover-background: $yellow,
-    $item-selected-hover-background: $yellow
-);
-
-$custom-input-group: input-group-theme(
-    $schema: $dark-material-schema,
-    $idle-text-color: $yellow,
-    $focused-text-color: $yellow,
-    $filled-text-color: $yellow,
-    $idle-bottom-line-color: $muted-yellow,
-    $focused-secondary-color: $yellow
-);
-
-$custom-chip: chip-theme(
-    $schema: $dark-material-schema,
-    $background: $yellow,
-    $text-color: $black
-);
-
-$custom-drop-down: drop-down-theme(
-    $schema: $dark-material-schema,
-    $background-color: $black,
-    $item-text-color: $yellow,
-    $hover-item-background: $yellow,
-    $hover-item-text-color: $black,
-    $focused-item-background: $yellow,
-    $focused-item-text-color: $black,
-    $selected-item-background: $yellow,
-    $selected-item-text-color: $black,
-    $selected-focus-item-background: $yellow,
-    $selected-focus-item-text-color: $black,
-    $selected-hover-item-background: $yellow,
-    $selected-hover-item-text-color: $black
-);
+$custom-query-builder: query-builder-theme($background: $black,
+        $tree-background: $black,
+        $header-background: $black,
+        $header-foreground: $yellow);
+
+$custom-button: button-theme($schema: $dark-material-schema,
+        $background: $black,
+        $foreground: $yellow,
+        $hover-foreground: $black,
+        $hover-background: $yellow,
+        $focus-foreground: $yellow,
+        $focus-background: $black,
+        $border-color: $yellow);
+
+$custom-contained-button: button-theme($schema: $dark-material-schema,
+        $background: $yellow,
+        $foreground: $black,
+        $active-background: $muted-yellow,
+        $active-foreground: $black,
+        $hover-background: $muted-yellow,
+        $hover-foreground: $black,
+        $border-color: $yellow,
+        $active-border-color: $muted-yellow,
+        $hover-border-color: $muted-yellow,
+        $focus-border-color: $yellow);
+
+$custom-button-group: button-group-theme($schema: $dark-material-schema,
+        $item-background: $black,
+        $item-text-color: $yellow,
+        $item-border-color: $yellow,
+        $item-selected-background: $yellow,
+        $item-hover-background: $yellow,
+        $item-selected-hover-background: $yellow);
+
+$custom-input-group: input-group-theme($schema: $dark-material-schema,
+        $idle-text-color: $yellow,
+        $focused-text-color: $yellow,
+        $filled-text-color: $yellow,
+        $idle-bottom-line-color: $muted-yellow,
+        $focused-secondary-color: $yellow);
+
+$custom-chip: chip-theme($schema: $dark-material-schema,
+        $background: $yellow,
+        $text-color: $black);
+
+$custom-drop-down: drop-down-theme($schema: $dark-material-schema,
+        $background-color: $black,
+        $item-text-color: $yellow,
+        $hover-item-background: $yellow,
+        $hover-item-text-color: $black,
+        $focused-item-background: $yellow,
+        $focused-item-text-color: $black,
+        $selected-item-background: $yellow,
+        $selected-item-text-color: $black,
+        $selected-focus-item-background: $yellow,
+        $selected-focus-item-text-color: $black,
+        $selected-hover-item-background: $yellow,
+        $selected-hover-item-text-color: $black);
 
 
 :host {
     display: block;
     margin: 16px;
 
     ::ng-deep {
-        @include css-vars($custom-drop-down);
+        @include theme($palette: $dark-material-palette );
+
         @include css-vars($custom-query-builder);
+        @include css-vars($custom-drop-down);
         @include css-vars($custom-button-group);
         @include css-vars($custom-input-group);
         @include css-vars($custom-chip);