igniteui-theming 14.4.0 → 14.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/sass/themes/schemas/components/dark/_query-builder.scss +6 -77
  3. package/sass/themes/schemas/components/light/_query-builder.scss +101 -71
  4. package/sass/themes/schemas/components/elevation/_query-builder.scss +0 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "14.4.0",
3
+ "version": "14.4.1",
4
4
  "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/sass/themes/schemas/components/dark/_query-builder.scss CHANGED
@@ -7,83 +7,27 @@
7
7
  /// @access public
8
8
  ////
9
9
 
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
-
44
10
  /// Generates a dark material query builder schema.
45
11
  /// @type {Map}
46
12
  /// @see $material-query-builder
47
13
  /// @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;
50
15
 
51
16
  /// Generates a dark fluent query builder schema.
52
17
  /// @see $fluent-query-builder
53
18
  /// @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;
56
20
 
57
21
  /// 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;
74
23
 
75
24
  /// Generates a dark indigo query builder schema.
76
25
  /// @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.
82
28
  /// @requires $indigo-query-builder
83
- /// @requires $dark-query-builder
84
29
  $dark-indigo-query-builder: extend(
85
30
  $indigo-query-builder,
86
- $dark-query-builder,
87
31
  (
88
32
  background: (
89
33
  color: (
@@ -92,22 +36,7 @@ $dark-indigo-query-builder: extend(
92
36
  ),
93
37
  ),
94
38
 
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: (
111
40
  color: (
112
41
  'gray',
113
42
  100,
package/sass/themes/schemas/components/light/_query-builder.scss CHANGED
@@ -1,6 +1,5 @@
1
1
  @use '../../../../utils/map' as *;
2
2
  @use '../../../../typography/functions' as *;
3
- @use '../elevation/query-builder' as *;
4
3
 
5
4
  ////
6
5
  /// @package theming
@@ -11,79 +10,65 @@
11
10
 
12
11
  /// Generates a base light query builder schema.
13
12
  /// @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.
17
16
  /// @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,
35
26
  ),
27
+ ),
36
28
 
37
- header-background: (
38
- color: (
39
- 'surface',
40
- 500,
41
- ),
29
+ header-background: (
30
+ color: (
31
+ 'gray',
32
+ 100,
42
33
  ),
34
+ ),
43
35
 
44
- header-foreground: (
45
- color: (
46
- 'gray',
47
- 900,
48
- ),
36
+ header-foreground: (
37
+ color: (
38
+ 'gray',
39
+ 700,
49
40
  ),
41
+ ),
50
42
 
51
- header-border: transparent,
43
+ header-border: transparent,
52
44
 
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,
63
49
  ),
50
+ ),
64
51
 
65
- subquery-border-color: (
66
- color: (
67
- 'gray',
68
- 300,
69
- ),
52
+ background-and--focus: (
53
+ color: (
54
+ 'primary',
55
+ 700,
70
56
  ),
57
+ ),
71
58
 
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,
78
63
  ),
64
+ ),
79
65
 
80
- label-foreground: (
81
- color: (
82
- 'gray',
83
- 700,
84
- ),
66
+ background-or--focus: (
67
+ color: (
68
+ 'secondary',
69
+ 700,
85
70
  ),
86
- )
71
+ ),
87
72
  );
88
73
 
89
74
  /// Generates a material query builder schema.
@@ -93,26 +78,40 @@ $material-query-builder: $light-query-builder;
93
78
 
94
79
  /// Generates a fluent query builder schema.
95
80
  /// @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.
97
83
  /// @requires {Map} $light-query-builder
98
84
  $fluent-query-builder: extend(
99
85
  $light-query-builder,
100
86
  (
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
+ ),
102
100
  )
103
101
  );
104
102
 
105
103
  /// Generates a bootstrap query builder schema.
106
104
  /// @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.
108
106
  /// @requires {Map} $light-query-builder
109
107
  $bootstrap-query-builder: extend(
110
108
  $light-query-builder,
111
109
  (
112
- header-border: (
110
+ header-background: (
113
111
  color: (
114
112
  'gray',
115
- 300,
113
+ 100,
114
+ 0.5,
116
115
  ),
117
116
  ),
118
117
  )
@@ -120,9 +119,13 @@ $bootstrap-query-builder: extend(
120
119
 
121
120
  /// Generates an indigo query builder schema.
122
121
  /// @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.
126
129
  /// @requires {Map} $light-query-builder
127
130
  $indigo-query-builder: extend(
128
131
  $light-query-builder,
@@ -133,12 +136,39 @@ $indigo-query-builder: extend(
133
136
  900,
134
137
  ),
135
138
  ),
136
- header-background: (
137
- contrast-color: (
139
+
140
+ header-background: transparent,
141
+
142
+ header-border: (
143
+ color: (
138
144
  '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,
140
171
  ),
141
172
  ),
142
- border-radius: rem(10px),
143
173
  )
144
174
  );
package/sass/themes/schemas/components/elevation/_query-builder.scss DELETED
@@ -1,11 +0,0 @@
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
- );