feat(query-builder): improve query-builder theme (#15675)

Author: didimmova

projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss

@@ -52,14 +52,36 @@
     }
 
     $theme: digest-schema($query-builder-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
 
-    @if not($header-foreground) and $header-background {
-        $header-foreground: text-contrast($header-background);
+    @if not($label-foreground) and $background {
+        $label-foreground: hsla(from adaptive-contrast(var(--background)) h s l / 0.6);
     }
 
     @if not($header-background) and $background {
-        $header-background: $background;
+        $header-background: var(--background);
+    }
+
+    @if not($header-foreground) and $header-background {
+        $header-foreground: adaptive-contrast(var(--header-background));
+    }
+
+    @if not($subquery-header-background) and $header-background {
+        $subquery-header-background: hsl(from var(--header-background) h s calc(l * 0.9));
+    }
+
+    @if not($subquery-border-color) and $subquery-header-background {
+        $subquery-border-color: hsl(from var(--subquery-header-background) h s calc(l * 0.9));
+    }
+
+    @if not($separator-color) and $subquery-border-color {
+        $separator-color: hsl(from var(--subquery-border-color) h s calc(l * 0.9));
+    }
+
+    @if $variant == 'bootstrap' {
+        @if not($header-border) and $subquery-border-color {
+            $header-border: var(--subquery-border-color);
+        }
     }
 
     @return extend($theme, (
@@ -77,11 +99,6 @@
         separator-color: $separator-color,
         border-radius: $border-radius,
         label-foreground: $label-foreground,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-            theme-variant: map.get($schema, '_meta', 'variant')
-        )),
     ));
 }
 
@@ -98,8 +115,8 @@
 @mixin query-builder($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
-    $theme-variant: map.get($theme, '_meta', 'theme-variant');
+    $variant: map.get($theme, '_meta', 'theme');
+    $theme-variant: map.get($theme, '_meta', 'variant');
     $bootstrap-theme: $variant == 'bootstrap';
     $not-bootstrap-theme: not($bootstrap-theme);