igniteui-theming 6.4.0-beta.1 → 6.4.0-beta.2
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "igniteui-theming",
|
|
3
|
-
"version": "6.4.0-beta.
|
|
3
|
+
"version": "6.4.0-beta.2",
|
|
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": {
|
|
@@ -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
|
-
|
|
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',
|
|
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-
|
|
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
|
-
|
|
49
|
+
50,
|
|
51
50
|
),
|
|
52
51
|
),
|
|
53
|
-
|
|
54
52
|
item-active-background: (
|
|
55
53
|
color: (
|
|
56
|
-
'
|
|
57
|
-
|
|
54
|
+
'gray',
|
|
55
|
+
300,
|
|
58
56
|
0.12,
|
|
59
57
|
),
|
|
60
58
|
),
|
|
@@ -65,10 +63,8 @@ $dark-fluent-navdrawer: extend(
|
|
|
65
63
|
/// @type {Map}
|
|
66
64
|
/// @prop {Map} item-hover-background [color: ('gray', 100)] - 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: (
|
|
@@ -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
|
);
|
|
@@ -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
|
-
|
|
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
|
-
|
|
66
|
+
900,
|
|
47
67
|
),
|
|
48
68
|
),
|
|
49
|
-
|
|
50
|
-
item-text-color: (
|
|
69
|
+
item-hover-background: (
|
|
51
70
|
color: (
|
|
52
71
|
'gray',
|
|
53
|
-
|
|
72
|
+
200,
|
|
54
73
|
),
|
|
55
74
|
),
|
|
56
|
-
|
|
57
|
-
item-icon-color: (
|
|
75
|
+
item-text-color: (
|
|
58
76
|
color: (
|
|
59
77
|
'gray',
|
|
60
|
-
|
|
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
|
-
|
|
94
|
+
item-active-text-color: (
|
|
95
|
+
color: (
|
|
96
|
+
'primary',
|
|
97
|
+
500,
|
|
98
|
+
),
|
|
99
|
+
),
|
|
100
|
+
border-color: (
|
|
80
101
|
color: (
|
|
81
102
|
'gray',
|
|
82
|
-
|
|
83
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
rem(0),
|
|
112
|
-
rem(36px),
|
|
181
|
+
border-color: (
|
|
182
|
+
color: (
|
|
183
|
+
'gray',
|
|
184
|
+
200,
|
|
113
185
|
),
|
|
114
186
|
),
|
|
115
|
-
item-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
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: (
|