Skip to content

Commit 9a41676

Browse files
simeonoffsimeonoff
authored
refactor(query-builder): update schema colors according to the new desigh (#390)
1 parent d8a1b3d commit 9a41676

File tree

3 files changed

+159
-107
lines changed

3 files changed

+159
-107
lines changed

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

Lines changed: 77 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,83 @@
77
/// @access public
88
////
99

10+
/// Generates a base dark query builder schema.
11+
/// @type {Map}
12+
/// @prop {Map} subquery-header-background [color: ('gray', 50)] - The background color of the subquery header.
13+
/// @prop {Map} subquery-border-color [color: ('gray', 200)] - The border color of the query block.
14+
/// @prop {Map} separator-color [color: ('gray', 300)] - The separator color of the query block.
15+
/// @prop {Color} color-expression-group-and [#da64ff] - The color of advanced filtering "AND" condition group.
16+
/// @prop {Color} color-expression-group-or [#19ad87] - The color of advanced filtering "OR" condition group.
17+
$dark-query-builder: (
18+
subquery-header-background: (
19+
color: (
20+
'gray',
21+
50,
22+
),
23+
),
24+
25+
subquery-border-color: (
26+
color: (
27+
'gray',
28+
200,
29+
),
30+
),
31+
32+
separator-color: (
33+
color: (
34+
'gray',
35+
300,
36+
),
37+
),
38+
39+
color-expression-group-and: #da64ff,
40+
41+
color-expression-group-or: #19ad87,
42+
);
43+
1044
/// Generates a dark material query builder schema.
1145
/// @type {Map}
1246
/// @see $material-query-builder
1347
/// @requires $material-query-builder
14-
$dark-material-query-builder: $material-query-builder;
48+
/// @requires $dark-query-builder
49+
$dark-material-query-builder: extend($material-query-builder, $dark-query-builder);
1550

1651
/// Generates a dark fluent query builder schema.
1752
/// @see $fluent-query-builder
1853
/// @requires $fluent-query-builder
19-
$dark-fluent-query-builder: $fluent-query-builder;
54+
/// @requires $dark-query-builder
55+
$dark-fluent-query-builder: extend($fluent-query-builder, $dark-query-builder);
2056

2157
/// Generates a dark bootstrap query builder schema.
22-
$dark-bootstrap-query-builder: $bootstrap-query-builder;
58+
/// @prop {Map} header-border [color: ('gray', 300)] - The border color of the query builder header.
59+
/// @see $bootstrap-query-builder
60+
/// @requires $bootstrap-query-builder
61+
/// @requires $dark-query-builder
62+
$dark-bootstrap-query-builder: extend(
63+
$bootstrap-query-builder,
64+
$dark-query-builder,
65+
(
66+
header-border: (
67+
color: (
68+
'gray',
69+
300,
70+
),
71+
),
72+
)
73+
);
2374

2475
/// Generates a dark indigo query builder schema.
2576
/// @type {Map}
26-
/// @prop {Map} background [color: ('gray', 50)] - The background color of the filtering row.
27-
/// @prop {Map} header-border [color: ('gray', 100)] - The border color of the query builder header.
77+
/// @prop {Map} background [color: ('gray', 50)] - The background color of the query builder.
78+
/// @prop {Map} header-background [color: ('gray', 50)] - The background color of the query builder header.
79+
/// @prop {Map} subquery-header-background [contrast-color: ('gray', 50, .05)] - The background color of the subquery header.
80+
/// @prop {Map} subquery-border-color [color: ('gray', 100)] - The border color of the query block.
81+
/// @see $indigo-query-builder
2882
/// @requires $indigo-query-builder
83+
/// @requires $dark-query-builder
2984
$dark-indigo-query-builder: extend(
3085
$indigo-query-builder,
86+
$dark-query-builder,
3187
(
3288
background: (
3389
color: (
@@ -36,7 +92,22 @@ $dark-indigo-query-builder: extend(
3692
),
3793
),
3894

39-
header-border: (
95+
header-background: (
96+
color: (
97+
'gray',
98+
50,
99+
),
100+
),
101+
102+
subquery-header-background: (
103+
contrast-color: (
104+
'gray',
105+
50,
106+
0.05,
107+
),
108+
),
109+
110+
subquery-border-color: (
40111
color: (
41112
'gray',
42113
100,

‎sass/themes/schemas/components/elevation/_query-builder.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
////
2+
/// @package theming
3+
/// @group schemas
4+
/// @access public
5+
////
6+
7+
/// @type Map
8+
/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the default query-builder.
9+
$default-elevation-query-builder: (
10+
elevation: 0,
11+
);

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

Lines changed: 71 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use '../../../../utils/map' as *;
22
@use '../../../../typography/functions' as *;
3+
@use '../elevation/query-builder' as *;
34

45
////
56
/// @package theming
@@ -10,65 +11,79 @@
1011

1112
/// Generates a base light query builder schema.
1213
/// @type {Map}
13-
/// @prop {Map} background [color: ('gray', 50)] - The background color of the filtering row.
14-
/// @prop {Map} header-background [color: ('gray', 100)] - The background color of the query builder header.
15-
/// @prop {Map} header-foreground [color: ('gray', 700)] - The foreground color of the query builder header.
14+
/// @prop {Map} background [color: ('surface', 500)] - The background color of the query builder.
15+
/// @prop {Map} header-background [color: ('surface', 500)] - The background color of the query builder header.
16+
/// @prop {Map} header-foreground [color: ('gray', 900)] - The foreground color of the query builder header.
1617
/// @prop {Color} header-border [transparent] - The border color of the query builder header.
17-
/// @prop {Map} background-and [color: ('primary', 300)] - The background color of advanced filtering "AND" condition.
18-
/// @prop {Map} background-and--focus [color: ('primary', 700)] - The background color on focus/selected of advanced filtering "AND" condition.
19-
/// @prop {Map} background-or [color: ('secondary', 300)] - The background color of advanced filtering "OR" condition.
20-
/// @prop {Map} background-or--focus [color: ('secondary', 700)] - The background color on focus/selected of advanced filtering "OR" condition.
21-
$light-query-builder: (
22-
background: (
23-
color: (
24-
'gray',
25-
50,
18+
/// @prop {Map} label-foreground [color: ('gray', 700)] - The color for query builder labels "from" & "select".
19+
/// @prop {Map} separator-color [color: ('gray', 500)] - The separator color of the query builder tree block.
20+
/// @prop {Map} subquery-header-background [color: ('gray', 100)] - The background color of the subquery header.
21+
/// @prop {Map} subquery-border-color [color: ('gray', 300)] - The border color of the subquery block.
22+
/// @prop {Color} color-expression-group-and [#9c27b0] - The color of advanced filtering "AND" condition group.
23+
/// @prop {Color} color-expression-group-or [#007254] - The color of advanced filtering "OR" condition group.
24+
/// @prop {Number} subquery-border-radius [rem(12px)] - The border radius of the subquery block.
25+
/// @prop {Number} border-radius [rem(4px)] - The border radius of the query builder.
26+
/// @requires {Map} $default-elevation-query-builder
27+
$light-query-builder: extend(
28+
$default-elevation-query-builder,
29+
(
30+
background: (
31+
color: (
32+
'surface',
33+
500,
34+
),
2635
),
27-
),
2836

29-
header-background: (
30-
color: (
31-
'gray',
32-
100,
37+
header-background: (
38+
color: (
39+
'surface',
40+
500,
41+
),
3342
),
34-
),
3543

36-
header-foreground: (
37-
color: (
38-
'gray',
39-
700,
44+
header-foreground: (
45+
color: (
46+
'gray',
47+
900,
48+
),
4049
),
41-
),
4250

43-
header-border: transparent,
51+
header-border: transparent,
4452

45-
background-and: (
46-
color: (
47-
'primary',
48-
300,
53+
color-expression-group-and: #9c27b0,
54+
55+
color-expression-group-or: #007254,
56+
57+
border-radius: rem(4px),
58+
subquery-header-background: (
59+
color: (
60+
'gray',
61+
100,
62+
),
4963
),
50-
),
5164

52-
background-and--focus: (
53-
color: (
54-
'primary',
55-
700,
65+
subquery-border-color: (
66+
color: (
67+
'gray',
68+
300,
69+
),
5670
),
57-
),
5871

59-
background-or: (
60-
color: (
61-
'secondary',
62-
300,
72+
subquery-border-radius: rem(12px),
73+
separator-color: (
74+
color: (
75+
'gray',
76+
500,
77+
),
6378
),
64-
),
6579

66-
background-or--focus: (
67-
color: (
68-
'secondary',
69-
700,
80+
label-foreground: (
81+
color: (
82+
'gray',
83+
700,
84+
),
7085
),
71-
),
86+
)
7287
);
7388

7489
/// Generates a material query builder schema.
@@ -78,54 +93,36 @@ $material-query-builder: $light-query-builder;
7893

7994
/// Generates a fluent query builder schema.
8095
/// @type {Map}
81-
/// @prop {Map} background-or [color: ('error', 500, .5)] - The background color of advanced filtering "OR" condition.
82-
/// @prop {Map} background-or--focus [color: ('error')] - The background color on focus/selected of advanced filtering "OR" condition.
96+
/// @prop {Number} border-radius [rem(4px)] - The border radius of the query builder.
8397
/// @requires {Map} $light-query-builder
8498
$fluent-query-builder: extend(
8599
$light-query-builder,
86100
(
87-
background-or: (
88-
color: (
89-
'error',
90-
500,
91-
0.5,
92-
),
93-
),
94-
95-
background-or--focus: (
96-
color: (
97-
'error',
98-
),
99-
),
101+
border-radius: rem(2px),
100102
)
101103
);
102104

103105
/// Generates a bootstrap query builder schema.
104106
/// @type {Map}
105-
/// @prop {Map} header-background [color: ('gray', 100, .5)] - The background color of the query builder header.
107+
/// @prop {Map} header-border [color: ('gray', 300)] - The border color of the query builder header.
106108
/// @requires {Map} $light-query-builder
107109
$bootstrap-query-builder: extend(
108110
$light-query-builder,
109111
(
110-
header-background: (
112+
header-border: (
111113
color: (
112114
'gray',
113-
100,
114-
0.5,
115+
300,
115116
),
116117
),
117118
)
118119
);
119120

120121
/// Generates an indigo query builder schema.
121122
/// @type {Map}
122-
/// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the filtering row.
123-
/// @prop {Color} header-background [transparent] - The background color of the query builder header.
124-
/// @prop {Map} header-border [color: ('gray', 300)] - The border color of the query builder header.
125-
/// @prop {Map} background-and [color: ('primary', 400)] - The background color of advanced filtering "AND" condition.
126-
/// @prop {Map} background-or [color: ('success', 500)] - The background color of advanced filtering "OR" condition.
127-
/// @prop {Map} background-and--focus [color: ('primary', 300)] - The background color on focus/selected of advanced filtering "AND" condition.
128-
/// @prop {Map} background-or--focus [color: ('secondary', 400)] - The background color on focus/selected of advanced filtering "OR" condition.
123+
/// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the query builder.
124+
/// @prop {Map} header-background [contrast-color: ('gray', 900)] - The background color of the query builder header.
125+
/// @prop {Number} border-radius [rem(10px)] - The border radius of the query builder.
129126
/// @requires {Map} $light-query-builder
130127
$indigo-query-builder: extend(
131128
$light-query-builder,
@@ -136,39 +133,12 @@ $indigo-query-builder: extend(
136133
900,
137134
),
138135
),
139-
140-
header-background: transparent,
141-
142-
header-border: (
143-
color: (
136+
header-background: (
137+
contrast-color: (
144138
'gray',
145-
300,
146-
),
147-
),
148-
149-
background-and: (
150-
color: (
151-
'primary',
152-
400,
153-
),
154-
),
155-
background-and--focus: (
156-
color: (
157-
'primary',
158-
300,
159-
),
160-
),
161-
background-or: (
162-
color: (
163-
'success',
164-
500,
165-
),
166-
),
167-
background-or--focus: (
168-
color: (
169-
'success',
170-
400,
139+
900,
171140
),
172141
),
142+
border-radius: rem(10px),
173143
)
174144
);

0 commit comments

Comments
 (0)