Skip to content

Commit d8a1b3d

Browse files
simeonoffsimeonoff
authored
Revert "refactor(query-builder): update schemas based on new design (#378)" (#389)
This reverts commit 8849c5c.
1 parent 8849c5c commit d8a1b3d

File tree

3 files changed

+107
-159
lines changed

3 files changed

+107
-159
lines changed

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

Lines changed: 6 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -7,83 +7,27 @@
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-
4410
/// Generates a dark material query builder schema.
4511
/// @type {Map}
4612
/// @see $material-query-builder
4713
/// @requires $material-query-builder
48-
/// @requires $dark-query-builder
49-
$dark-material-query-builder: extend($material-query-builder, $dark-query-builder);
14+
$dark-material-query-builder: $material-query-builder;
5015

5116
/// Generates a dark fluent query builder schema.
5217
/// @see $fluent-query-builder
5318
/// @requires $fluent-query-builder
54-
/// @requires $dark-query-builder
55-
$dark-fluent-query-builder: extend($fluent-query-builder, $dark-query-builder);
19+
$dark-fluent-query-builder: $fluent-query-builder;
5620

5721
/// Generates a dark bootstrap query builder schema.
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-
);
22+
$dark-bootstrap-query-builder: $bootstrap-query-builder;
7423

7524
/// Generates a dark indigo query builder schema.
7625
/// @type {Map}
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
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.
8228
/// @requires $indigo-query-builder
83-
/// @requires $dark-query-builder
8429
$dark-indigo-query-builder: extend(
8530
$indigo-query-builder,
86-
$dark-query-builder,
8731
(
8832
background: (
8933
color: (
@@ -92,22 +36,7 @@ $dark-indigo-query-builder: extend(
9236
),
9337
),
9438

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: (
39+
header-border: (
11140
color: (
11241
'gray',
11342
100,

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

Lines changed: 0 additions & 11 deletions
This file was deleted.

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

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

54
////
65
/// @package theming
@@ -11,79 +10,65 @@
1110

1211
/// Generates a base light query builder schema.
1312
/// @type {Map}
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.
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.
1716
/// @prop {Color} header-border [transparent] - The border color of the query builder header.
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-
),
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,
3526
),
27+
),
3628

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

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

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

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-
),
45+
background-and: (
46+
color: (
47+
'primary',
48+
300,
6349
),
50+
),
6451

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

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

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

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

9479
/// Generates a fluent query builder schema.
9580
/// @type {Map}
96-
/// @prop {Number} border-radius [rem(4px)] - The border radius of the query builder.
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.
9783
/// @requires {Map} $light-query-builder
9884
$fluent-query-builder: extend(
9985
$light-query-builder,
10086
(
101-
border-radius: rem(2px),
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+
),
102100
)
103101
);
104102

105103
/// Generates a bootstrap query builder schema.
106104
/// @type {Map}
107-
/// @prop {Map} header-border [color: ('gray', 300)] - The border color of the query builder header.
105+
/// @prop {Map} header-background [color: ('gray', 100, .5)] - The background color of the query builder header.
108106
/// @requires {Map} $light-query-builder
109107
$bootstrap-query-builder: extend(
110108
$light-query-builder,
111109
(
112-
header-border: (
110+
header-background: (
113111
color: (
114112
'gray',
115-
300,
113+
100,
114+
0.5,
116115
),
117116
),
118117
)
119118
);
120119

121120
/// Generates an indigo query builder schema.
122121
/// @type {Map}
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.
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.
126129
/// @requires {Map} $light-query-builder
127130
$indigo-query-builder: extend(
128131
$light-query-builder,
@@ -133,12 +136,39 @@ $indigo-query-builder: extend(
133136
900,
134137
),
135138
),
136-
header-background: (
137-
contrast-color: (
139+
140+
header-background: transparent,
141+
142+
header-border: (
143+
color: (
138144
'gray',
139-
900,
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,
140171
),
141172
),
142-
border-radius: rem(10px),
143173
)
144174
);

0 commit comments

Comments
 (0)