refactor(query-builder): material schema update the qb background and…

… rename the subquery background to header background
IgniteUI · Feb 5, 2025 · 9592d6e · 9592d6e
1 parent 5ed67ee
commit 9592d6e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 46 deletions.
diff --git a/sass/themes/schemas/components/dark/_query-builder.scss b/sass/themes/schemas/components/dark/_query-builder.scss
@@ -9,13 +9,13 @@
 
 /// Generates a base dark query builder schema.
 /// @type {Map}
-/// @prop {Map} subquery-background [color: ('gray', 50)] - The background color of the subquery block.
+/// @prop {Map} subquery-header-background [color: ('gray', 50)] - The background color of the subquery header.
 /// @prop {Map} subquery-border-color [color: ('gray', 200)] - The border color of the query block.
 /// @prop {Map} separator-color [color: ('gray', 200)] - The separator color of the query block.
 /// @prop {Color} color-expression-group-and [#DA64FF] - The color of advanced filtering "AND" condition group.
 /// @prop {Color} color-expression-group-or [#19AD87] - The color of advanced filtering "OR" condition group.
 $dark-query-builder: (
-    subquery-background: (
+    subquery-header-background: (
         color: (
             'gray',
             50,
@@ -42,29 +42,10 @@ $dark-query-builder: (
 
 /// Generates a dark material query builder schema.
 /// @type {Map}
-/// @prop {Map} background [color: ('surface', 500)] - The background color of the query builder.
-/// @prop {Map} header-background [color: ('surface', 500)] - The background color of the query builder header.
 /// @see $material-query-builder
 /// @requires $material-query-builder
 /// @requires $dark-query-builder
-$dark-material-query-builder: extend(
-    $material-query-builder,
-    $dark-query-builder,
-    (
-        background: (
-            color: (
-                'surface',
-                500,
-            ),
-        ),
-        header-background: (
-            color: (
-                'surface',
-                500,
-            ),
-        ),
-    )
-);
+$dark-material-query-builder: extend($material-query-builder, $dark-query-builder);
 
 /// Generates a dark fluent query builder schema.
 /// @see $fluent-query-builder
@@ -94,7 +75,7 @@ $dark-bootstrap-query-builder: extend(
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 50)] - The background color of the query builder.
 /// @prop {Map} header-background [color: ('gray', 50)] - The background color of the query builder header.
-/// @prop {Map} subquery-background [contrast: ('gray', 50, .05)] - The background color of the subquery block.
+/// @prop {Map} subquery-header-background [contrast: ('gray', 50, .05)] - The background color of the subquery header.
 /// @prop {Map} subquery-border-color [color: ('gray', 100)] - The border color of the query block.
 /// @see $indigo-query-builder
 /// @requires $indigo-query-builder
@@ -115,7 +96,7 @@ $dark-indigo-query-builder: extend(
                 50,
             ),
         ),
-        subquery-background: (
+        subquery-header-background: (
             contrast-color: (
                 'gray',
                 50,

diff --git a/sass/themes/schemas/components/light/_query-builder.scss b/sass/themes/schemas/components/light/_query-builder.scss
@@ -17,7 +17,7 @@
 /// @prop {Color} header-border [transparent] - The border color of the query builder header.
 /// @prop {Map} label-foreground [color: ('gray', 700)] - The color for query builder labels "from" & "select".
 /// @prop {Map} separator-color [color: ('gray', 300)] - The separator color of the query builder tree block.
-/// @prop {Map} subquery-background [color: ('gray, 100')] - The background color of the subquery block.
+/// @prop {Map} subquery-header-background [color: ('gray, 100')] - The background color of the subquery header.
 /// @prop {Map} subquery-border-color [color: ('gray', 300)] - The border color of the subquery block.
 /// @prop {Color} color-expression-group-and [#DA64FF] - The color of advanced filtering "AND" condition group.
 /// @prop {Color} color-expression-group-or [#048261] - The color of advanced filtering "OR" condition group.
@@ -55,7 +55,7 @@ $light-query-builder: extend(
         color-expression-group-or: #007254,
 
         border-radius: rem(4px),
-        subquery-background: (
+        subquery-header-background: (
             color: (
                 'gray',
                 100,
@@ -88,27 +88,8 @@ $light-query-builder: extend(
 
 /// Generates a material query builder schema.
 /// @type {Map}
-/// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the query builder.
-/// @prop {Map} header-background [contrast-color: ('surface', 900)] - The background color of the query builder header.
 /// @requires {Map} $light-query-builder
-$material-query-builder: extend(
-    $light-query-builder,
-    (
-        background: (
-            contrast-color: (
-                'gray',
-                900,
-            ),
-        ),
-
-        header-background: (
-            contrast-color: (
-                'gray',
-                900,
-            ),
-        ),
-    )
-);
+$material-query-builder: $light-query-builder;
 
 /// Generates a fluent query builder schema.
 /// @type {Map}