igniteui-theming 14.0.0 → 14.2.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "14.0.0",
+  "version": "14.2.0-beta.1",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/schemas/components/dark/_query-builder.scss

@@ -7,27 +7,41 @@
 /// @access public
 ////
 
+/// Generates a base dark query builder schema.
+/// @type {Map}
+/// @prop {Color} tree-background [contrast-color: ('gray', 900)] - The background color of the query block.
+$dark-query-builder: (
+    tree-background: (
+        contrast-color: (
+            'gray',
+            900,
+        ),
+    ),
+);
+
 /// Generates a dark material query builder schema.
 /// @type {Map}
 /// @see $material-query-builder
 /// @requires $material-query-builder
-$dark-material-query-builder: $material-query-builder;
+$dark-material-query-builder: extend($material-query-builder, $dark-query-builder);
 
 /// Generates a dark fluent query builder schema.
 /// @see $fluent-query-builder
 /// @requires $fluent-query-builder
-$dark-fluent-query-builder: $fluent-query-builder;
+$dark-fluent-query-builder: extend($fluent-query-builder, $dark-query-builder);
 
 /// Generates a dark bootstrap query builder schema.
-$dark-bootstrap-query-builder: $bootstrap-query-builder;
+$dark-bootstrap-query-builder: extend($bootstrap-query-builder, $dark-query-builder);
 
 /// Generates a dark indigo query builder schema.
 /// @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} 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,
+    $dark-query-builder,
     (
         background: (
             color: (
@@ -42,5 +56,12 @@ $dark-indigo-query-builder: extend(
                 100,
             ),
         ),
+
+        tree-border-color: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
     )
 );

package/sass/themes/schemas/components/light/_query-builder.scss

@@ -18,6 +18,11 @@
 /// @prop {Map} background-and--focus [color: ('primary', 700)] - The background color on focus/selected of advanced filtering "AND" condition.
 /// @prop {Map} background-or [color: ('secondary', 300)] - The background color of advanced filtering "OR" condition.
 /// @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} 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: (
@@ -69,6 +74,27 @@ $light-query-builder: (
             700,
         ),
     ),
+
+    border-color: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+
+    border-radius: rem(4px),
+    tree-background: (
+        color: 'surface',
+    ),
+
+    tree-border-color: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+
+    tree-border-radius: rem(8px),
 );
 
 /// Generates a material query builder schema.
@@ -80,6 +106,7 @@ $material-query-builder: $light-query-builder;
 /// @type {Map}
 /// @prop {Map} background-or [color: ('error', 500, .5)] - The background color of advanced filtering "OR" condition.
 /// @prop {Map} background-or--focus [color: ('error')] - The background color on focus/selected of advanced filtering "OR" condition.
+/// @prop {Number} border-radius [rem(2px)] - The border radius of the query builder.
 /// @requires {Map} $light-query-builder
 $fluent-query-builder: extend(
     $light-query-builder,
@@ -97,12 +124,17 @@ $fluent-query-builder: extend(
                 'error',
             ),
         ),
+
+        border-radius: rem(2px),
     )
 );
 
 /// 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} 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} 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,
@@ -114,6 +146,27 @@ $bootstrap-query-builder: extend(
                 0.5,
             ),
         ),
+
+        tree-background: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        tree-border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
     )
 );
 
@@ -126,6 +179,7 @@ $bootstrap-query-builder: extend(
 /// @prop {Map} background-or [color: ('success', 500)] - The background color of advanced filtering "OR" condition.
 /// @prop {Map} background-and--focus [color: ('primary', 300)] - The background color on focus/selected of advanced filtering "AND" condition.
 /// @prop {Map} background-or--focus [color: ('secondary', 400)] - The background color on focus/selected of advanced filtering "OR" condition.
+/// @prop {Number} border-radius [rem(10px)] - The border radius of the query builder.
 /// @requires {Map} $light-query-builder
 $indigo-query-builder: extend(
     $light-query-builder,
@@ -170,5 +224,7 @@ $indigo-query-builder: extend(
                 400,
             ),
         ),
+
+        border-radius: rem(10px),
     )
 );