diff --git a/sass/themes/schemas/components/dark/_query-builder.scss b/sass/themes/schemas/components/dark/_query-builder.scss
index 2b534a1d..9d4fb73b 100644
--- a/sass/themes/schemas/components/dark/_query-builder.scss
+++ b/sass/themes/schemas/components/dark/_query-builder.scss
@@ -9,9 +9,9 @@
 
 /// Generates a base dark query builder schema.
 /// @type {Map}
-/// @prop {Color} query-background [contrast-color: ('gray', 900)] - The background color of the query block.
+/// @prop {Color} tree-background [contrast-color: ('gray', 900)] - The background color of the query block.
 $dark-query-builder: (
-    query-background: (
+    tree-background: (
         contrast-color: (
             'gray',
             900,
@@ -37,7 +37,7 @@ $dark-bootstrap-query-builder: extend($bootstrap-query-builder, $dark-query-buil
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 50)] - The background color of the filtering row.
 /// @prop {Map} header-border [color: ('gray', 100)] - The border color of the query builder header.
-/// @prop {Map} query-border-color [contrast-color: ('gray', 900)] - The border color of the query block.
+/// @prop {Map} tree-border-color [contrast-color: ('gray', 900)] - The border color of the query block.
 /// @requires $indigo-query-builder
 $dark-indigo-query-builder: extend(
     $indigo-query-builder,
@@ -57,7 +57,7 @@ $dark-indigo-query-builder: extend(
             ),
         ),
 
-        query-border-color: (
+        tree-border-color: (
             contrast-color: (
                 'gray',
                 900,
diff --git a/sass/themes/schemas/components/light/_query-builder.scss b/sass/themes/schemas/components/light/_query-builder.scss
index 4d068f23..9f84ae00 100644
--- a/sass/themes/schemas/components/light/_query-builder.scss
+++ b/sass/themes/schemas/components/light/_query-builder.scss
@@ -20,9 +20,9 @@
 /// @prop {Map} background-or--focus [color: ('secondary', 700)] - The background color on focus/selected of advanced filtering "OR" condition.
 /// @prop {Map} border-color [color: ('gray', 300)] - The border color of the query builder.
 /// @prop {Number} border-radius [rem(4px)] - The border radius of the query builder.
-/// @prop {Map} query-background [color: ('surface')] - The background color of the query block.
-/// @prop {Map} query-border-color [color: ('gray', 300)] - The border color of the query block.
-/// @prop {Number} query-border-radius [rem(8px)] - The border radius of the query block.
+/// @prop {Map} tree-background [color: ('surface')] - The background color of the query block.
+/// @prop {Map} tree-border-color [color: ('gray', 300)] - The border color of the query block.
+/// @prop {Number} tree-border-radius [rem(8px)] - The border radius of the query block.
 $light-query-builder: (
     background: (
         color: (
@@ -83,18 +83,18 @@ $light-query-builder: (
     ),
 
     border-radius: rem(4px),
-    query-background: (
+    tree-background: (
         color: 'surface',
     ),
 
-    query-border-color: (
+    tree-border-color: (
         color: (
             'gray',
             300,
         ),
     ),
 
-    query-border-radius: rem(8px),
+    tree-border-radius: rem(8px),
 );
 
 /// Generates a material query builder schema.
@@ -132,9 +132,9 @@ $fluent-query-builder: extend(
 /// Generates a bootstrap query builder schema.
 /// @type {Map}
 /// @prop {Map} header-background [color: ('gray', 100, .5)] - The background color of the query builder header.
-/// @prop {Map} query-background [contrast-color: ('gray', 900)] - The background color of the query block.
+/// @prop {Map} tree-background [contrast-color: ('gray', 900)] - The background color of the query block.
 /// @prop {Map} border-color [color: ('gray', 100)] - The border color of the query builder.
-/// @prop {Map} query-border-color [color: ('gray', 100)] - The border color of the query block.
+/// @prop {Map} tree-border-color [color: ('gray', 100)] - The border color of the query block.
 /// @requires {Map} $light-query-builder
 $bootstrap-query-builder: extend(
     $light-query-builder,
@@ -147,7 +147,7 @@ $bootstrap-query-builder: extend(
             ),
         ),
 
-        query-background: (
+        tree-background: (
             contrast-color: (
                 'gray',
                 900,
@@ -161,7 +161,7 @@ $bootstrap-query-builder: extend(
             ),
         ),
 
-        query-border-color: (
+        tree-border-color: (
             color: (
                 'gray',
                 100,