Skip to content

Commit

Permalink
refactor(query-builder): update schemas
Browse files Browse the repository at this point in the history
  • Loading branch information
@desig9stein
desig9stein committed Jan 31, 2025
1 parent 61f7d12 commit e4352d7
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 115 deletions.
81 changes: 28 additions & 53 deletions sass/themes/schemas/components/dark/_query-builder.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,38 +9,12 @@

/// Generates a base dark query builder schema.
/// @type {Map}
/// @prop {Map} background [color: ('surface', 500)] - The background color of the query builder.
/// @prop {Map} header-background [contrast-color: ('surface', 500)] - The background color of the query builder header.
/// @prop {Map} subquery-background [color: ('gray', 50)] - The background color of the subquery block.
/// @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-and [hsl(286, 100%, 70%)] - The color of advanced filtering "AND" condition.
/// @prop {Color} foreground-and [hsl(286, 100%, 70%)] - The foreground color of advanced filtering "AND" condition button.
/// @prop {Color} background-and [transparent] - The background color of advanced filtering "AND" condition button.
/// @prop {Color} background-and--hover [hsla(286, 100%, 70%, .08)] - The background color on hover of advanced filtering "AND" condition button.
/// @prop {Color} background-and--focus [hsla(286, 100%, 70%, .16)] - The background color on focus of advanced filtering "AND" condition button.
/// @prop {Color} background-and--focus-hover [hsla(286, 100%, 70%, .24)] - The background color on focus/hover of advanced filtering "AND" condition button.
/// @prop {Color} color-or [hsl(164, 82%, 34%)] - The color of advanced filtering "OR" condition.
/// @prop {Color} foreground-or [hsl(164, 82%, 34%)] - The foreground color of advanced filtering "OR" condition button.
/// @prop {Color} background-or [transparent] - The background color of advanced filtering "OR" condition button.
/// @prop {Color} background-or--hover [hsla(164, 82%, 34%, .08)] - The background color on hover of advanced filtering "OR" condition button.
/// @prop {Color} background-or--focus [hsla(164, 82%, 34%, .16)] - The background color on focus of advanced filtering "OR" condition button.
/// @prop {Color} background-or--focus-hover [hsla(164, 82%, 34%, .24)] - The background color on focus/hover of advanced filtering "OR" condition button.
/// @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: (
background: (
color: (
'surface',
500,
),
),

header-background: (
color: (
'surface',
500,
),
),

subquery-background: (
color: (
'gray',
Expand All @@ -62,20 +36,8 @@ $dark-query-builder: (
),
),

// AND
color-and: hsl(286, 100%, 70%),
foreground-and: hsl(286, 100%, 70%),
background-and: transparent,
background-and--hover: hsla(286, 100%, 70%, 0.08),
background-and--focus: hsla(286, 100%, 70%, 0.16),
background-and--focus-hover: hsla(286, 100%, 70%, 0.24),
// OR
color-or: hsl(164, 82%, 34%),
foreground-or: hsl(164, 82%, 34%),
background-or: transparent,
background-or--hover: hsla(164, 82%, 34%, 0.08),
background-or--focus: hsla(164, 82%, 34%, 0.16),
background-or--focus-hover: hsla(164, 82%, 34%, 0.24),
color-expression-group-and: #da64ff,
color-expression-group-or: #19ad87,
);

/// Generates a dark material query builder schema.
Expand Down Expand Up @@ -111,27 +73,40 @@ $dark-bootstrap-query-builder: extend(

/// Generates a dark indigo query builder schema.
/// @type {Map}
/// @prop {Map} shadow-color-and [contrast-color: ('primary', 500, .2)] - The shadow color of advanced filtering "AND" condition button.
/// @prop {Map} shadow-color-or [contrast-color: ('primary', 500, .2)] - The shadow color of advanced filtering "OR" condition button.
/// @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-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,
(
shadow-color-and: (
contrast-color: (
'primary',
500,
0.2,
background: (
color: (
'gray',
50,
),
),
header-background: (
color: (
'gray',
50,
),
),
shadow-color-or: (
subquery-background: (
contrast-color: (
'primary',
500,
0.2,
'gray',
50,
0.05,
),
),
subquery-border-color: (
color: (
'gray',
100,
),
),
)
Expand Down
84 changes: 22 additions & 62 deletions sass/themes/schemas/components/light/_query-builder.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,44 +12,32 @@
/// 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 [contrast-color: ('gray', 900)] - The background color of the query builder header.
/// @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 {Color} color-and [hsl(291, 64%, 42%)] - The color of advanced filtering "AND" condition.
/// @prop {Color} foreground-and [hsl(291, 64%, 42%)] - The foreground color of advanced filtering "AND" condition button.
/// @prop {Color} background-and [transparent] - The background color of advanced filtering "AND" condition button.
/// @prop {Color} background-and--hover [hsla(291, 64%, 42%, .08)] - The background color on hover of advanced filtering "AND" condition button.
/// @prop {Color} background-and--focus [hsla(291, 64%, 42%, .16)] - The background color on focus of advanced filtering "AND" condition button.
/// @prop {Color} background-and--focus-hover [hsla(291, 64%, 42%, .24)] - The background color on focus/hover of advanced filtering "AND" condition button.
/// @prop {Color} shadow-color-and [transparent] - The shadow color of advanced filtering "AND" condition button.
/// @prop {Color} color-or [hsl(164, 94%, 26%)] - The color of advanced filtering "OR" condition.
/// @prop {Color} foreground-or [hsl(164, 94%, 26%)] - The foreground color of advanced filtering "OR" condition button.
/// @prop {Color} background-or [transparent] - The background color of advanced filtering "OR" condition button.
/// @prop {Color} background-or--hover [hsla(164, 94%, 26%, .08)] - The background color on hover of advanced filtering "OR" condition button.
/// @prop {Color} background-or--focus [hsla(164, 94%, 26%, .16)] - The background color on focus of advanced filtering "OR" condition button.
/// @prop {Color} background-or--focus-hover [hsla(164, 94%, 26%, .24)] - The background color on focus/hover of advanced filtering "OR" condition button.
/// @prop {Color} shadow-color-or [transparent] - The shadow color of advanced filtering "OR" condition button.
/// @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-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.
/// @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: (
contrast-color: (
'gray',
900,
color: (
'surface',
500,
),
),

header-background: (
contrast-color: (
'gray',
900,
color: (
'surface',
500,
),
),

Expand All @@ -62,23 +50,9 @@ $light-query-builder: extend(

header-border: transparent,

// AND
color-and: hsl(291, 64%, 42%),
foreground-and: hsl(291, 64%, 42%),
background-and: transparent,
background-and--hover: hsla(291, 64%, 42%, 0.08),
background-and--focus: hsla(291, 64%, 42%, 0.16),
background-and--focus-hover: hsla(291, 64%, 42%, 0.24),
shadow-color-and: transparent,
color-expression-group-and: #9c27b0,

// OR
color-or: hsl(164, 94%, 26%),
foreground-or: hsl(164, 94%, 26%),
background-or: transparent,
background-or--hover: hsla(164, 94%, 26%, 0.08),
background-or--focus: hsla(164, 94%, 26%, 0.16),
background-or--focus-hover: hsla(164, 94%, 26%, 0.24),
shadow-color-or: transparent,
color-expression-group-or: #007254,

border-radius: rem(4px),
subquery-background: (
Expand Down Expand Up @@ -130,55 +104,41 @@ $fluent-query-builder: extend(

/// Generates a bootstrap query builder schema.
/// @type {Map}
/// @prop {Map} background [color: ('surface', 50)] - The background color of the filtering row.
/// @prop {Map} header-background [color: ('surface', 50)] - The background color of the query builder header.
/// @prop {Map} header-border [color: ('gray', 300)] - The border color of the query builder header.
/// @prop {Color} shadow-color-and [hsl(291deg 76% 36% / 0.5)] - The shadow color of advanced filtering "AND" condition button.
/// @prop {Color} shadow-color-or [hsl(164deg 100% 22% / 0.5)] - The shadow color of advanced filtering "OR" condition button.
/// @requires {Map} $light-query-builder
$bootstrap-query-builder: extend(
$light-query-builder,
(
background: (
color: (
'surface',
50,
),
),

header-background: (
color: (
'surface',
50,
),
),

header-border: (
color: (
'gray',
300,
),
),

shadow-color-and: hsl(291deg 76% 36% / 0.5),
shadow-color-or: hsl(164deg 100% 22% / 0.5),
)
);

/// 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} shadow-color-and [color: ('gray', 900)] - The shadow color of advanced filtering "AND" condition button.
/// @requires {Map} $light-query-builder
$indigo-query-builder: extend(
$light-query-builder,
(
border-radius: rem(10px),
shadow-color-and: (
color: (
background: (
contrast-color: (
'gray',
900,
),
),
header-background: (
contrast-color: (
'gray',
900,
),
),
border-radius: rem(10px),
)
);

0 comments on commit e4352d7

Please sign in to comment.