From baa365e9554c6e5d14311b4e91b7a4e3f84bfa1b Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 27 Aug 2024 20:50:19 +0300 Subject: [PATCH] refactor(query-builder): update schema colors --- .../components/dark/_query-builder.scss | 27 ++++++++- .../components/light/_query-builder.scss | 56 +++++++++++++++++++ 2 files changed, 80 insertions(+), 3 deletions(-) diff --git a/sass/themes/schemas/components/dark/_query-builder.scss b/sass/themes/schemas/components/dark/_query-builder.scss index a3d4f387..2b534a1d 100644 --- a/sass/themes/schemas/components/dark/_query-builder.scss +++ b/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} query-background [contrast-color: ('gray', 900)] - The background color of the query block. +$dark-query-builder: ( + query-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} query-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, ), ), + + query-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 95504f92..4d068f23 100644 --- a/sass/themes/schemas/components/light/_query-builder.scss +++ b/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} 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. $light-query-builder: ( background: ( color: ( @@ -69,6 +74,27 @@ $light-query-builder: ( 700, ), ), + + border-color: ( + color: ( + 'gray', + 300, + ), + ), + + border-radius: rem(4px), + query-background: ( + color: 'surface', + ), + + query-border-color: ( + color: ( + 'gray', + 300, + ), + ), + + query-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} query-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. /// @requires {Map} $light-query-builder $bootstrap-query-builder: extend( $light-query-builder, @@ -114,6 +146,27 @@ $bootstrap-query-builder: extend( 0.5, ), ), + + query-background: ( + contrast-color: ( + 'gray', + 900, + ), + ), + + border-color: ( + color: ( + 'gray', + 100, + ), + ), + + query-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), ) );