Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(query-builder): update schemas based on new design #378

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

refactor(query-builder): update schemas based on new design #378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8389355
refactor(query-builder): update schema colors according to the new de…
desig9stein Jan 29, 2025
61f7d12
refactor(query-builder): Add new elevations file for query builder
desig9stein Jan 29, 2025
e4352d7
refactor(query-builder): update schemas
desig9stein Jan 31, 2025
c55797e
refactor(query-builder): fix fluent radius
desig9stein Jan 31, 2025
5ed67ee
refactor(query-builder): material schema update the qb background
desig9stein Feb 3, 2025
9592d6e
refactor(query-builder): material schema update the qb background and…
desig9stein Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 74 additions & 7 deletions sass/themes/schemas/components/dark/_query-builder.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,36 +7,103 @@
/// @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', 200)] - 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: ('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: (
'gray',
50,
),
),

header-border: (
header-background: (
color: (
'gray',
50,
),
),
subquery-header-background: (
contrast-color: (
'gray',
50,
0.05,
),
),
subquery-border-color: (
color: (
'gray',
100,
Expand Down
11 changes: 11 additions & 0 deletions sass/themes/schemas/components/elevation/_query-builder.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: 24,
);
172 changes: 71 additions & 101 deletions sass/themes/schemas/components/light/_query-builder.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@use '../../../../utils/map' as *;
@use '../../../../typography/functions' as *;
@use '../elevation/query-builder' as *;

////
/// @package theming
Expand All @@ -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', 300)] - 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 [#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: (
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.
Expand All @@ -78,54 +93,36 @@ $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,
),
),
)
);

/// 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,
Expand All @@ -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),
)
);