igniteui-theming 6.4.0-beta.1 → 7.0.0

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 (5) hide show
  1. package/package.json +1 -1
  2. package/sass/themes/schemas/components/dark/_navdrawer.scss +25 -28
  3. package/sass/themes/schemas/components/elevation/_navdrawer.scss +0 -6
  4. package/sass/themes/schemas/components/light/_navbar.scss +2 -11
  5. package/sass/themes/schemas/components/light/_navdrawer.scss +196 -59
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "6.4.0-beta.1",
3
+ "version": "7.0.0",
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/_navdrawer.scss CHANGED
@@ -7,54 +7,52 @@
7
7
  /// @access public
8
8
  ////
9
9
 
10
- /// Generates a base dark navdrawer schema.
11
- /// @type {Map}
12
- /// @prop {Map} item-hover-background [color: ('gray', 100, .5)] - The item's hover background color.
13
- $dark-base-navdrawer: (
14
- item-hover-background: (
15
- color: (
16
- 'gray',
17
- 100,
18
- 0.5,
19
- ),
20
- ),
21
- );
22
-
23
10
  /// Generates a dark material navdrawer schema.
24
11
  /// @type {Map}
25
12
  /// @requires $material-navdrawer
26
- /// @requires $dark-base-navdrawer
27
- $dark-material-navdrawer: extend($material-navdrawer, $dark-base-navdrawer);
13
+ $dark-material-navdrawer: extend($material-navdrawer);
28
14
 
29
15
  /// Generates a dark fluent navdrawer schema.
30
16
  /// @type {Map}
17
+ /// @prop {Map} item-hover-icon-color [color: ('primary', 100)] - The item's hover icon color.
18
+ /// @prop {Map} item-icon-color [color: ('primary', 200)] - The item's icon color.
19
+ /// @prop {Map} item-hover-background [color: ('gray', 200, .12)] - The item's hover background color.
31
20
  /// @prop {Map} item-active-text-color [color: ('primary', 200)] - The item's active text color.
32
21
  /// @prop {Map} item-active-icon-color [color: ('primary', 100)] - The item's icon active color.
33
- /// @prop {Map} item-active-background [color: ('primary', 400, .12)] - The item's active background color.
22
+ /// @prop {Map} item-active-background [color: ('primary', 300, .12)] - The item's active background color.
34
23
  /// @requires $fluent-navdrawer
35
- /// @requires $dark-base-navdrawer
36
24
  $dark-fluent-navdrawer: extend(
37
25
  $fluent-navdrawer,
38
- $dark-base-navdrawer,
39
26
  (
40
- item-active-text-color: (
27
+ item-hover-icon-color: (
28
+ color: (
29
+ 'primary',
30
+ 100,
31
+ ),
32
+ ),
33
+ item-icon-color: (
41
34
  color: (
42
35
  'primary',
43
36
  200,
44
37
  ),
45
38
  ),
46
-
39
+ item-hover-background: (
40
+ color: (
41
+ 'gray',
42
+ 200,
43
+ 0.12,
44
+ ),
45
+ ),
47
46
  item-active-icon-color: (
48
47
  color: (
49
48
  'primary',
50
- 100,
49
+ 50,
51
50
  ),
52
51
  ),
53
-
54
52
  item-active-background: (
55
53
  color: (
56
- 'primary',
57
- 400,
54
+ 'gray',
55
+ 300,
58
56
  0.12,
59
57
  ),
60
58
  ),
@@ -63,17 +61,16 @@ $dark-fluent-navdrawer: extend(
63
61
 
64
62
  /// Generates a dark bootstrap navdrawer schema.
65
63
  /// @type {Map}
66
- /// @prop {Map} item-hover-background [color: ('gray', 100)] - The item's hover background color.
64
+ /// @prop {Map} item-hover-background [color: ('gray', 200, .8)] - The item's hover background color.
67
65
  /// @requires $bootstrap-navdrawer
68
- /// @requires $dark-base-navdrawer
69
66
  $dark-bootstrap-navdrawer: extend(
70
67
  $bootstrap-navdrawer,
71
- $dark-base-navdrawer,
72
68
  (
73
69
  item-hover-background: (
74
70
  color: (
75
71
  'gray',
76
- 100,
72
+ 200,
73
+ 0.8,
77
74
  ),
78
75
  ),
79
76
  )
package/sass/themes/schemas/components/elevation/_navdrawer.scss CHANGED
@@ -7,11 +7,5 @@
7
7
  /// @type Map
8
8
  /// @prop {Map} elevation [16] - The elevation level, between 0-24, to be used for the drawer.
9
9
  $default-elevation-navdrawer: (
10
- elevation: 16,
11
- );
12
-
13
- /// @type Map
14
- /// @prop {Map} elevation [0] - The elevation level, between 0-24, to be used for the drawer.
15
- $indigo-elevation-navdrawer: (
16
10
  elevation: 0,
17
11
  );
package/sass/themes/schemas/components/light/_navbar.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  /// Generates a base light navbar schema.
12
12
  /// @type {Map}
13
13
  /// @prop {Map} background [color: ('primary', 500)] - The navbar background color.
14
- /// @prop {Map} border-color [color: ('primary', 500)] - The navbar border color.
14
+ /// @prop {Color} border-color [transparent] - The navbar border color.
15
15
  /// @prop {Map} text-color [contrast-color: ('primary', 500)] - The navbar text color.
16
16
  /// @prop {Map} idle-icon-color [contrast-color: ('primary', 500)] - The navbar idle icon color.
17
17
  /// @prop {Map} hover-icon-color [contrast-color: ('primary', 500)] - The navbar hover icon color.
@@ -26,12 +26,7 @@ $light-navbar: extend(
26
26
  500,
27
27
  ),
28
28
  ),
29
- border-color: (
30
- color: (
31
- 'primary',
32
- 500,
33
- ),
34
- ),
29
+ border-color: transparent,
35
30
  text-color: (
36
31
  contrast-color: (
37
32
  'primary',
@@ -61,7 +56,6 @@ $material-navbar: $light-navbar;
61
56
  /// Generates a fluent navbar schema.
62
57
  /// @type {Map}
63
58
  /// @prop {Map} background [color: 'surface'] - The navbar background color.
64
- /// @prop {Map} border-color [color: 'surface'] - The navbar border color.
65
59
  /// @prop {Map} text-color [color: ('gray', 900)] - The navbar text color.
66
60
  /// @prop {Map} idle-icon-color [color: ('primary', 500)] - The navbar idle icon color.
67
61
  /// @prop {Map} hover-icon-color [color: ('primary', 500)] - The navbar hover icon color.
@@ -72,9 +66,6 @@ $fluent-navbar: extend(
72
66
  background: (
73
67
  color: 'surface',
74
68
  ),
75
- border-color: (
76
- color: 'surface',
77
- ),
78
69
  text-color: (
79
70
  color: (
80
71
  'gray',
package/sass/themes/schemas/components/light/_navdrawer.scss CHANGED
@@ -11,19 +11,8 @@
11
11
  /// Generates a base light navdrawer schema.
12
12
  /// @type {Map}
13
13
  /// @prop {Map} background [color: 'surface'] - The navigation drawer background color.
14
- /// @prop {Map} border-color [color: ('gray', 900, .14)] - The navigation drawer right border color.
15
- /// @prop {Map} item-header-text-color [color: ('gray', 800)] - The header's idle text color.
16
- /// @prop {Map} item-text-color [color: ('gray', 700)] - The item's idle text color.
17
- /// @prop {Map} item-icon-color [ color: ('gray', 700)] - The item's icon color.
18
- /// @prop {Map} item-active-text-color [color: ('primary', 500)] - The item's active text color.
19
- /// @prop {Map} item-active-background [color: ('primary', 500, .12)] - The item's active background color.
20
- /// @prop {Map} item-active-icon-color [color: ('primary', 500)] - The item's icon active color.
21
- /// @prop {Map} item-hover-background [color: ('gray', 200, .8)] - The item's hover background color.
22
- /// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The item's hover text color.
23
- /// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The item's hover icon color.
24
14
  /// @prop {Map} elevation [16] - The elevation level, between 0-24, to be used for the drawer.
25
15
  /// @prop {List} border-radius [(rem(0), rem(0), rem(36px))] - The border radius used for the navdrawer component.
26
- /// @prop {List} item-border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for the navdrawer items.
27
16
  /// @requires {Map} $default-elevation-navdrawer
28
17
  $light-navdrawer: extend(
29
18
  $default-elevation-navdrawer,
@@ -31,120 +20,270 @@ $light-navdrawer: extend(
31
20
  background: (
32
21
  color: 'surface',
33
22
  ),
23
+ border-radius: (
24
+ border-radius: (
25
+ rem(0),
26
+ rem(0),
27
+ rem(36px),
28
+ ),
29
+ ),
30
+ )
31
+ );
34
32
 
35
- border-color: (
33
+ /// Generates a material navdrawer schema.
34
+ /// @type {Map}
35
+ /// @prop {List} item-border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for the navdrawer items
36
+ /// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The item's hover icon color.
37
+ /// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The item's hover text color.
38
+ /// @prop {Map} item-hover-background [color: ('gray', 200)] - The item's hover background color.
39
+ /// @prop {Map} item-text-color [color: ('gray', 900)] - The item's idle text color.
40
+ /// @prop {Map} item-active-background [color: ('primary', 500, .12)] - The item's active background color.
41
+ /// @prop {Map} item-active-icon-color [color: ('primary', 500)] - The item's icon active color.
42
+ /// @prop {Map} item-active-text-color [color: ('primary', 500)] - The item's active text color.
43
+ /// @prop {Map} border-color [color: ('gray', 300)] - The navigation drawer right border color.
44
+ /// @prop {Map} item-icon-color [ color: ('gray', 700)] - The item's icon color.
45
+ /// @prop {Map} item-header-text-color [color: ('gray', 700)] - The header's idle text color.
46
+ /// @requires {Map} $light-navdrawer
47
+ $material-navdrawer: extend(
48
+ $light-navdrawer,
49
+ (
50
+ item-border-radius: (
51
+ border-radius: (
52
+ rem(4px),
53
+ rem(0),
54
+ rem(24px),
55
+ ),
56
+ ),
57
+ item-hover-icon-color: (
36
58
  color: (
37
59
  'gray',
38
60
  900,
39
- 0.14,
40
61
  ),
41
62
  ),
42
-
43
- item-header-text-color: (
63
+ item-hover-text-color: (
44
64
  color: (
45
65
  'gray',
46
- 800,
66
+ 900,
47
67
  ),
48
68
  ),
49
-
50
- item-text-color: (
69
+ item-hover-background: (
51
70
  color: (
52
71
  'gray',
53
- 700,
72
+ 200,
54
73
  ),
55
74
  ),
56
-
57
- item-icon-color: (
75
+ item-text-color: (
58
76
  color: (
59
77
  'gray',
60
- 700,
78
+ 900,
61
79
  ),
62
80
  ),
63
-
64
- item-active-text-color: (
81
+ item-active-background: (
65
82
  color: (
66
83
  'primary',
67
84
  500,
85
+ 0.12,
68
86
  ),
69
87
  ),
70
-
71
- item-active-background: (
88
+ item-active-icon-color: (
72
89
  color: (
73
90
  'primary',
74
91
  500,
75
- 0.12,
76
92
  ),
77
93
  ),
78
-
79
- item-hover-background: (
94
+ item-active-text-color: (
95
+ color: (
96
+ 'primary',
97
+ 500,
98
+ ),
99
+ ),
100
+ border-color: (
80
101
  color: (
81
102
  'gray',
82
- 200,
83
- 0.8,
103
+ 300,
104
+ ),
105
+ ),
106
+ item-icon-color: (
107
+ color: (
108
+ 'gray',
109
+ 700,
84
110
  ),
85
111
  ),
112
+ item-header-text-color: (
113
+ color: (
114
+ 'gray',
115
+ 700,
116
+ ),
117
+ ),
118
+ )
119
+ );
86
120
 
121
+ /// Generates a fluent navdrawer schema.
122
+ /// @type {Map}
123
+ /// @prop {Number} item-border-radius [0] - The border radius used for the navdrawer items.
124
+ /// @prop {Map} item-hover-icon-color [color: ('primary', 600)] - The item's hover icon color.
125
+ /// @prop {Map} item-hover-text-color [color: ('gray', 800)] - The item's hover text color.
126
+ /// @prop {Map} item-hover-background [color: ('gray', 100)] - The item's hover background color.
127
+ /// @prop {Map} item-text-color [color: ('gray', 800)] - The item's idle text color.
128
+ /// @prop {Map} item-active-background [color: ('gray', 200)] - The item's active background color.
129
+ /// @prop {Map} item-active-icon-color [color: ('primary', 700)] - The item's icon active color.
130
+ /// @prop {Map} item-active-text-color [color: ('gray', 900)] - The item's active text color.
131
+ /// @prop {Map} border-color [color: ('gray', 200)] - The navigation drawer right border color.
132
+ /// @prop {Map} item-icon-color [ color: ('primary', 500)] - The item's icon color.
133
+ /// @prop {Map} item-header-text-color [color: ('gray', 800)] - The header's idle text color.
134
+ /// @requires {Map} $light-navdrawer
135
+ $fluent-navdrawer: extend(
136
+ $light-navdrawer,
137
+ (
138
+ item-border-radius: 0,
139
+ item-hover-icon-color: (
140
+ color: (
141
+ 'primary',
142
+ 600,
143
+ ),
144
+ ),
87
145
  item-hover-text-color: (
88
146
  color: (
89
147
  'gray',
90
- 900,
148
+ 800,
149
+ ),
150
+ ),
151
+ item-hover-background: (
152
+ color: (
153
+ 'gray',
154
+ 100,
155
+ ),
156
+ ),
157
+ item-text-color: (
158
+ color: (
159
+ 'gray',
160
+ 800,
161
+ ),
162
+ ),
163
+ item-active-background: (
164
+ color: (
165
+ 'gray',
166
+ 200,
91
167
  ),
92
168
  ),
93
-
94
169
  item-active-icon-color: (
95
170
  color: (
96
171
  'primary',
97
- 500,
172
+ 700,
98
173
  ),
99
174
  ),
100
-
101
- item-hover-icon-color: (
175
+ item-active-text-color: (
102
176
  color: (
103
177
  'gray',
104
178
  900,
105
179
  ),
106
180
  ),
107
-
108
- border-radius: (
109
- border-radius: (
110
- rem(0),
111
- rem(0),
112
- rem(36px),
181
+ border-color: (
182
+ color: (
183
+ 'gray',
184
+ 200,
113
185
  ),
114
186
  ),
115
- item-border-radius: (
116
- border-radius: (
117
- rem(4px),
118
- rem(0),
119
- rem(24px),
187
+ item-icon-color: (
188
+ color: (
189
+ 'primary',
190
+ 500,
191
+ ),
192
+ ),
193
+ item-header-text-color: (
194
+ color: (
195
+ 'gray',
196
+ 800,
120
197
  ),
121
198
  ),
122
199
  )
123
200
  );
124
201
 
125
- /// Generates a material navdrawer schema.
126
- /// @type {Map}
127
- /// @requires {Map} $light-navdrawer
128
- $material-navdrawer: $light-navdrawer;
129
-
130
- /// Generates a fluent navdrawer schema.
131
- /// @type {Map}
132
- /// @requires {Map} $light-navdrawer
133
- $fluent-navdrawer: $light-navdrawer;
134
-
135
202
  /// Generates a bootstrap navdrawer schema.
136
203
  /// @type {Map}
204
+ /// @prop {List} item-border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for the navdrawer items
205
+ /// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The item's hover icon color.
206
+ /// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The item's hover text color.
207
+ /// @prop {Map} item-hover-background [color: ('gray', 200, .8)] - The item's hover background color.
208
+ /// @prop {Map} item-text-color [color: ('gray', 900)] - The item's idle text color.
209
+ /// @prop {Map} item-active-background [color: ('primary', 500)] - The item's active background color.
210
+ /// @prop {Map} item-active-icon-color [contrast-color: ('primary', 900)] - The item's icon active color.
211
+ /// @prop {Map} item-active-text-color [contrast-color: ('primary', 900)] - The item's active text color.
137
212
  /// @prop {Map} border-color [color: ('gray', 300)] - The navigation drawer right border color.
213
+ /// @prop {Map} item-icon-color [ color: ('gray', 900)] - The item's icon color.
214
+ /// @prop {Map} item-header-text-color [color: ('gray', 900)] - The header's idle text color.
138
215
  /// @requires {Map} $light-navdrawer
139
216
  $bootstrap-navdrawer: extend(
140
217
  $light-navdrawer,
141
218
  (
219
+ item-border-radius: (
220
+ border-radius: (
221
+ rem(4px),
222
+ rem(0),
223
+ rem(24px),
224
+ ),
225
+ ),
226
+ item-hover-icon-color: (
227
+ color: (
228
+ 'gray',
229
+ 900,
230
+ ),
231
+ ),
232
+ item-hover-text-color: (
233
+ color: (
234
+ 'gray',
235
+ 900,
236
+ ),
237
+ ),
238
+ item-hover-background: (
239
+ color: (
240
+ 'gray',
241
+ 200,
242
+ 0.8,
243
+ ),
244
+ ),
245
+ item-text-color: (
246
+ color: (
247
+ 'gray',
248
+ 900,
249
+ ),
250
+ ),
251
+ item-active-background: (
252
+ color: (
253
+ 'primary',
254
+ 500,
255
+ ),
256
+ ),
257
+ item-active-icon-color: (
258
+ contrast-color: (
259
+ 'primary',
260
+ 900,
261
+ ),
262
+ ),
263
+ item-active-text-color: (
264
+ contrast-color: (
265
+ 'primary',
266
+ 900,
267
+ ),
268
+ ),
142
269
  border-color: (
143
270
  color: (
144
271
  'gray',
145
272
  300,
146
273
  ),
147
274
  ),
275
+ item-icon-color: (
276
+ color: (
277
+ 'gray',
278
+ 900,
279
+ ),
280
+ ),
281
+ item-header-text-color: (
282
+ color: (
283
+ 'gray',
284
+ 900,
285
+ ),
286
+ ),
148
287
  )
149
288
  );
150
289
 
@@ -163,10 +302,8 @@ $bootstrap-navdrawer: extend(
163
302
  /// @prop {Map} border-color [color: ('gray', 300)] - The navigation drawer right border color.
164
303
  /// @prop {List} item-border-radius [(rem(4px), rem(0), rem(4px))] - The border radius used for the navdrawer items.
165
304
  /// @requires {Map} $light-navdrawer
166
- /// @requires {Map} $indigo-elevation-navdrawer
167
305
  $indigo-navdrawer: extend(
168
306
  $light-navdrawer,
169
- $indigo-elevation-navdrawer,
170
307
  (
171
308
  border-color: (
172
309
  color: (