From 8849c5cceb915ba9a345c98536850ca4b24eeafc Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Thu, 20 Feb 2025 14:00:59 +0200 Subject: [PATCH 1/2] refactor(query-builder): update schemas based on new design (#378) --- .../components/dark/_query-builder.scss | 83 ++++++++- .../components/elevation/_query-builder.scss | 11 ++ .../components/light/_query-builder.scss | 172 ++++++++---------- 3 files changed, 159 insertions(+), 107 deletions(-) create mode 100644 sass/themes/schemas/components/elevation/_query-builder.scss diff --git a/sass/themes/schemas/components/dark/_query-builder.scss b/sass/themes/schemas/components/dark/_query-builder.scss index a3d4f387..806c5121 100644 --- a/sass/themes/schemas/components/dark/_query-builder.scss +++ b/sass/themes/schemas/components/dark/_query-builder.scss @@ -7,27 +7,83 @@ /// @access public //// +/// Generates a base dark query builder schema. +/// @type {Map} +/// @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', 300)] - 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-header-background: ( + color: ( + 'gray', + 50, + ), + ), + + subquery-border-color: ( + color: ( + 'gray', + 200, + ), + ), + + separator-color: ( + color: ( + 'gray', + 300, + ), + ), + + color-expression-group-and: #da64ff, + + color-expression-group-or: #19ad87, +); + /// Generates a dark material query builder schema. /// @type {Map} /// @see $material-query-builder /// @requires $material-query-builder -$dark-material-query-builder: $material-query-builder; +/// @requires $dark-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; +/// @requires $dark-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; +/// @prop {Map} header-border [color: ('gray', 300)] - The border color of the query builder header. +/// @see $bootstrap-query-builder +/// @requires $bootstrap-query-builder +/// @requires $dark-query-builder +$dark-bootstrap-query-builder: extend( + $bootstrap-query-builder, + $dark-query-builder, + ( + header-border: ( + color: ( + 'gray', + 300, + ), + ), + ) +); /// 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} 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-header-background [contrast-color: ('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 +/// @requires $dark-query-builder $dark-indigo-query-builder: extend( $indigo-query-builder, + $dark-query-builder, ( background: ( color: ( @@ -36,7 +92,22 @@ $dark-indigo-query-builder: extend( ), ), - header-border: ( + header-background: ( + color: ( + 'gray', + 50, + ), + ), + + subquery-header-background: ( + contrast-color: ( + 'gray', + 50, + 0.05, + ), + ), + + subquery-border-color: ( color: ( 'gray', 100, diff --git a/sass/themes/schemas/components/elevation/_query-builder.scss b/sass/themes/schemas/components/elevation/_query-builder.scss new file mode 100644 index 00000000..dd471f06 --- /dev/null +++ b/sass/themes/schemas/components/elevation/_query-builder.scss @@ -0,0 +1,11 @@ +//// +/// @package theming +/// @group schemas +/// @access public +//// + +/// @type Map +/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the default query-builder. +$default-elevation-query-builder: ( + elevation: 0, +); diff --git a/sass/themes/schemas/components/light/_query-builder.scss b/sass/themes/schemas/components/light/_query-builder.scss index 95504f92..a86e81a7 100644 --- a/sass/themes/schemas/components/light/_query-builder.scss +++ b/sass/themes/schemas/components/light/_query-builder.scss @@ -1,5 +1,6 @@ @use '../../../../utils/map' as *; @use '../../../../typography/functions' as *; +@use '../elevation/query-builder' as *; //// /// @package theming @@ -10,65 +11,79 @@ /// Generates a base light query builder schema. /// @type {Map} -/// @prop {Map} background [color: ('gray', 50)] - The background color of the filtering row. -/// @prop {Map} header-background [color: ('gray', 100)] - The background color of the query builder header. -/// @prop {Map} header-foreground [color: ('gray', 700)] - The foreground color of the query builder header. +/// @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. +/// @prop {Map} header-foreground [color: ('gray', 900)] - The foreground color of the query builder header. /// @prop {Color} header-border [transparent] - The border color of the query builder header. -/// @prop {Map} background-and [color: ('primary', 300)] - The background color of advanced filtering "AND" condition. -/// @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. -$light-query-builder: ( - background: ( - color: ( - 'gray', - 50, +/// @prop {Map} label-foreground [color: ('gray', 700)] - The color for query builder labels "from" & "select". +/// @prop {Map} separator-color [color: ('gray', 500)] - The separator color of the query builder tree 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 [#9c27b0] - The color of advanced filtering "AND" condition group. +/// @prop {Color} color-expression-group-or [#007254] - The color of advanced filtering "OR" condition group. +/// @prop {Number} subquery-border-radius [rem(12px)] - The border radius of the subquery block. +/// @prop {Number} border-radius [rem(4px)] - The border radius of the query builder. +/// @requires {Map} $default-elevation-query-builder +$light-query-builder: extend( + $default-elevation-query-builder, + ( + background: ( + color: ( + 'surface', + 500, + ), ), - ), - header-background: ( - color: ( - 'gray', - 100, + header-background: ( + color: ( + 'surface', + 500, + ), ), - ), - header-foreground: ( - color: ( - 'gray', - 700, + header-foreground: ( + color: ( + 'gray', + 900, + ), ), - ), - header-border: transparent, + header-border: transparent, - background-and: ( - color: ( - 'primary', - 300, + color-expression-group-and: #9c27b0, + + color-expression-group-or: #007254, + + border-radius: rem(4px), + subquery-header-background: ( + color: ( + 'gray', + 100, + ), ), - ), - background-and--focus: ( - color: ( - 'primary', - 700, + subquery-border-color: ( + color: ( + 'gray', + 300, + ), ), - ), - background-or: ( - color: ( - 'secondary', - 300, + subquery-border-radius: rem(12px), + separator-color: ( + color: ( + 'gray', + 500, + ), ), - ), - background-or--focus: ( - color: ( - 'secondary', - 700, + label-foreground: ( + color: ( + 'gray', + 700, + ), ), - ), + ) ); /// Generates a material query builder schema. @@ -78,40 +93,26 @@ $material-query-builder: $light-query-builder; /// Generates a fluent query builder schema. /// @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(4px)] - The border radius of the query builder. /// @requires {Map} $light-query-builder $fluent-query-builder: extend( $light-query-builder, ( - background-or: ( - color: ( - 'error', - 500, - 0.5, - ), - ), - - background-or--focus: ( - color: ( - '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} header-border [color: ('gray', 300)] - The border color of the query builder header. /// @requires {Map} $light-query-builder $bootstrap-query-builder: extend( $light-query-builder, ( - header-background: ( + header-border: ( color: ( 'gray', - 100, - 0.5, + 300, ), ), ) @@ -119,13 +120,9 @@ $bootstrap-query-builder: extend( /// Generates an indigo query builder schema. /// @type {Map} -/// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the filtering row. -/// @prop {Color} header-background [transparent] - The background color of the query builder header. -/// @prop {Map} header-border [color: ('gray', 300)] - The border color of the query builder header. -/// @prop {Map} background-and [color: ('primary', 400)] - The background color of advanced filtering "AND" condition. -/// @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 {Map} background [contrast-color: ('gray', 900)] - The background color of the query builder. +/// @prop {Map} header-background [contrast-color: ('gray', 900)] - The background color of the query builder header. +/// @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, @@ -136,39 +133,12 @@ $indigo-query-builder: extend( 900, ), ), - - header-background: transparent, - - header-border: ( - color: ( + header-background: ( + contrast-color: ( 'gray', - 300, - ), - ), - - background-and: ( - color: ( - 'primary', - 400, - ), - ), - background-and--focus: ( - color: ( - 'primary', - 300, - ), - ), - background-or: ( - color: ( - 'success', - 500, - ), - ), - background-or--focus: ( - color: ( - 'success', - 400, + 900, ), ), + border-radius: rem(10px), ) ); From d8a1b3df543f7069d3f6d6caa749bdcbaa128238 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 21 Feb 2025 09:24:33 +0200 Subject: [PATCH 2/2] Revert "refactor(query-builder): update schemas based on new design (#378)" (#389) This reverts commit 8849c5cceb915ba9a345c98536850ca4b24eeafc. --- .../components/dark/_query-builder.scss | 83 +-------- .../components/elevation/_query-builder.scss | 11 -- .../components/light/_query-builder.scss | 172 ++++++++++-------- 3 files changed, 107 insertions(+), 159 deletions(-) delete mode 100644 sass/themes/schemas/components/elevation/_query-builder.scss diff --git a/sass/themes/schemas/components/dark/_query-builder.scss b/sass/themes/schemas/components/dark/_query-builder.scss index 806c5121..a3d4f387 100644 --- a/sass/themes/schemas/components/dark/_query-builder.scss +++ b/sass/themes/schemas/components/dark/_query-builder.scss @@ -7,83 +7,27 @@ /// @access public //// -/// Generates a base dark query builder schema. -/// @type {Map} -/// @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', 300)] - 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-header-background: ( - color: ( - 'gray', - 50, - ), - ), - - subquery-border-color: ( - color: ( - 'gray', - 200, - ), - ), - - separator-color: ( - color: ( - 'gray', - 300, - ), - ), - - color-expression-group-and: #da64ff, - - color-expression-group-or: #19ad87, -); - /// Generates a dark material query builder schema. /// @type {Map} /// @see $material-query-builder /// @requires $material-query-builder -/// @requires $dark-query-builder -$dark-material-query-builder: extend($material-query-builder, $dark-query-builder); +$dark-material-query-builder: $material-query-builder; /// Generates a dark fluent query builder schema. /// @see $fluent-query-builder /// @requires $fluent-query-builder -/// @requires $dark-query-builder -$dark-fluent-query-builder: extend($fluent-query-builder, $dark-query-builder); +$dark-fluent-query-builder: $fluent-query-builder; /// Generates a dark bootstrap query builder schema. -/// @prop {Map} header-border [color: ('gray', 300)] - The border color of the query builder header. -/// @see $bootstrap-query-builder -/// @requires $bootstrap-query-builder -/// @requires $dark-query-builder -$dark-bootstrap-query-builder: extend( - $bootstrap-query-builder, - $dark-query-builder, - ( - header-border: ( - color: ( - 'gray', - 300, - ), - ), - ) -); +$dark-bootstrap-query-builder: $bootstrap-query-builder; /// Generates a dark indigo query builder schema. /// @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-header-background [contrast-color: ('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 +/// @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. /// @requires $indigo-query-builder -/// @requires $dark-query-builder $dark-indigo-query-builder: extend( $indigo-query-builder, - $dark-query-builder, ( background: ( color: ( @@ -92,22 +36,7 @@ $dark-indigo-query-builder: extend( ), ), - header-background: ( - color: ( - 'gray', - 50, - ), - ), - - subquery-header-background: ( - contrast-color: ( - 'gray', - 50, - 0.05, - ), - ), - - subquery-border-color: ( + header-border: ( color: ( 'gray', 100, diff --git a/sass/themes/schemas/components/elevation/_query-builder.scss b/sass/themes/schemas/components/elevation/_query-builder.scss deleted file mode 100644 index dd471f06..00000000 --- a/sass/themes/schemas/components/elevation/_query-builder.scss +++ /dev/null @@ -1,11 +0,0 @@ -//// -/// @package theming -/// @group schemas -/// @access public -//// - -/// @type Map -/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the default query-builder. -$default-elevation-query-builder: ( - elevation: 0, -); diff --git a/sass/themes/schemas/components/light/_query-builder.scss b/sass/themes/schemas/components/light/_query-builder.scss index a86e81a7..95504f92 100644 --- a/sass/themes/schemas/components/light/_query-builder.scss +++ b/sass/themes/schemas/components/light/_query-builder.scss @@ -1,6 +1,5 @@ @use '../../../../utils/map' as *; @use '../../../../typography/functions' as *; -@use '../elevation/query-builder' as *; //// /// @package theming @@ -11,79 +10,65 @@ /// Generates a base light 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. -/// @prop {Map} header-foreground [color: ('gray', 900)] - The foreground color of the query builder header. +/// @prop {Map} background [color: ('gray', 50)] - The background color of the filtering row. +/// @prop {Map} header-background [color: ('gray', 100)] - The background color of the query builder header. +/// @prop {Map} header-foreground [color: ('gray', 700)] - The foreground color of the query builder header. /// @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', 500)] - The separator color of the query builder tree 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 [#9c27b0] - The color of advanced filtering "AND" condition group. -/// @prop {Color} color-expression-group-or [#007254] - The color of advanced filtering "OR" condition group. -/// @prop {Number} subquery-border-radius [rem(12px)] - The border radius of the subquery block. -/// @prop {Number} border-radius [rem(4px)] - The border radius of the query builder. -/// @requires {Map} $default-elevation-query-builder -$light-query-builder: extend( - $default-elevation-query-builder, - ( - background: ( - color: ( - 'surface', - 500, - ), +/// @prop {Map} background-and [color: ('primary', 300)] - The background color of advanced filtering "AND" condition. +/// @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. +$light-query-builder: ( + background: ( + color: ( + 'gray', + 50, ), + ), - header-background: ( - color: ( - 'surface', - 500, - ), + header-background: ( + color: ( + 'gray', + 100, ), + ), - header-foreground: ( - color: ( - 'gray', - 900, - ), + header-foreground: ( + color: ( + 'gray', + 700, ), + ), - header-border: transparent, + header-border: transparent, - color-expression-group-and: #9c27b0, - - color-expression-group-or: #007254, - - border-radius: rem(4px), - subquery-header-background: ( - color: ( - 'gray', - 100, - ), + background-and: ( + color: ( + 'primary', + 300, ), + ), - subquery-border-color: ( - color: ( - 'gray', - 300, - ), + background-and--focus: ( + color: ( + 'primary', + 700, ), + ), - subquery-border-radius: rem(12px), - separator-color: ( - color: ( - 'gray', - 500, - ), + background-or: ( + color: ( + 'secondary', + 300, ), + ), - label-foreground: ( - color: ( - 'gray', - 700, - ), + background-or--focus: ( + color: ( + 'secondary', + 700, ), - ) + ), ); /// Generates a material query builder schema. @@ -93,26 +78,40 @@ $material-query-builder: $light-query-builder; /// Generates a fluent query builder schema. /// @type {Map} -/// @prop {Number} border-radius [rem(4px)] - The border radius of the query builder. +/// @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. /// @requires {Map} $light-query-builder $fluent-query-builder: extend( $light-query-builder, ( - border-radius: rem(2px), + background-or: ( + color: ( + 'error', + 500, + 0.5, + ), + ), + + background-or--focus: ( + color: ( + 'error', + ), + ), ) ); /// Generates a bootstrap query builder schema. /// @type {Map} -/// @prop {Map} header-border [color: ('gray', 300)] - The border color of the query builder header. +/// @prop {Map} header-background [color: ('gray', 100, .5)] - The background color of the query builder header. /// @requires {Map} $light-query-builder $bootstrap-query-builder: extend( $light-query-builder, ( - header-border: ( + header-background: ( color: ( 'gray', - 300, + 100, + 0.5, ), ), ) @@ -120,9 +119,13 @@ $bootstrap-query-builder: extend( /// Generates an indigo 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: ('gray', 900)] - The background color of the query builder header. -/// @prop {Number} border-radius [rem(10px)] - The border radius of the query builder. +/// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the filtering row. +/// @prop {Color} header-background [transparent] - The background color of the query builder header. +/// @prop {Map} header-border [color: ('gray', 300)] - The border color of the query builder header. +/// @prop {Map} background-and [color: ('primary', 400)] - The background color of advanced filtering "AND" condition. +/// @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. /// @requires {Map} $light-query-builder $indigo-query-builder: extend( $light-query-builder, @@ -133,12 +136,39 @@ $indigo-query-builder: extend( 900, ), ), - header-background: ( - contrast-color: ( + + header-background: transparent, + + header-border: ( + color: ( 'gray', - 900, + 300, + ), + ), + + background-and: ( + color: ( + 'primary', + 400, + ), + ), + background-and--focus: ( + color: ( + 'primary', + 300, + ), + ), + background-or: ( + color: ( + 'success', + 500, + ), + ), + background-or--focus: ( + color: ( + 'success', + 400, ), ), - border-radius: rem(10px), ) );