igniteui-theming 5.2.0-beta.1 → 5.2.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": "5.2.0-beta.
|
|
3
|
+
"version": "5.2.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": {
|
|
@@ -22,6 +22,7 @@ $dark-material-slider: $material-slider;
|
|
|
22
22
|
/// @prop {Map} track-color [color: ('gray', 600)] - The color of the track.
|
|
23
23
|
/// @prop {Map} track-hover-color [color: ('primary', 300)] - The color of the track on hover.
|
|
24
24
|
/// @prop {Map} thumb-border-color [color: ('gray', 400)] - The thumb border color.
|
|
25
|
+
/// @prop {Map} thumb-border-hover-color [color: ('gray', 400)] - The thumb border color.
|
|
25
26
|
/// @prop {Map} thumb-focus-color [color: ('primary', 100)] - The focus outline color of the thumb.
|
|
26
27
|
/// @prop {Map} thumb-disabled-border-color [color: ('gray', 200)] - The thumb border color when it's disabled.
|
|
27
28
|
/// @prop {Map} disabled-base-track-color [color: ('gray', 100)] - The base background color of the track when is disabled.
|
|
@@ -60,6 +61,12 @@ $dark-fluent-slider: extend(
|
|
|
60
61
|
400,
|
|
61
62
|
),
|
|
62
63
|
),
|
|
64
|
+
thumb-border-hover-color: (
|
|
65
|
+
color: (
|
|
66
|
+
'gray',
|
|
67
|
+
400,
|
|
68
|
+
),
|
|
69
|
+
),
|
|
63
70
|
thumb-focus-color: (
|
|
64
71
|
color: (
|
|
65
72
|
'primary',
|
|
@@ -114,23 +121,91 @@ $dark-bootstrap-slider: extend(
|
|
|
114
121
|
|
|
115
122
|
/// Generates a dark indigo slider schema.
|
|
116
123
|
/// @type {Map}
|
|
117
|
-
/// @prop {Map}
|
|
118
|
-
/// @prop {Map} base-track-
|
|
124
|
+
/// @prop {Map} track-step-color [contrast-color: ('gray', 50, 0.3)] - The color of the track steps.
|
|
125
|
+
/// @prop {Map} base-track-color [contrast-color: ('gray', 50, 0.3)] - The base background color of the track.
|
|
126
|
+
/// @prop {Map} base-track-hover-color [contrast-color: ('gray', 50, 0.4)] - The base background color of the track on hover.
|
|
127
|
+
/// @prop {Map} track-color [color: ('primary', 400)] - The color of the track.
|
|
128
|
+
/// @prop {Map} track-hover-color [color: ('primary', 300)] - The color of the track on hover.
|
|
129
|
+
/// @prop {Map} thumb-color [color: 'surface'] - The color of the thumb.
|
|
130
|
+
/// @prop {Map} thumb-border-color [color: ('primary', 400)] - The thumb border color.
|
|
131
|
+
/// @prop {Map} thumb-border-hover-color [color: ('primary', 300)] - The thumb border color when hovered.
|
|
132
|
+
/// @prop {Map} disabled-thumb-color [color: 'surface'] - The thumb color when its disabled.
|
|
133
|
+
/// @prop {Map} thumb-disabled-border-color [color: ('primary', 800)] - The thumb border color when it's disabled.
|
|
134
|
+
/// @prop {Map} disabled-base-track-color [contrast-color: ('gray', 50, 0.15)] - The base background color of the track when is disabled.
|
|
135
|
+
/// @prop {Map} disabled-fill-track-color [color: ('primary', 800)] - The background color of the fill track when is disabled.
|
|
119
136
|
/// @requires $indigo-slider
|
|
120
137
|
$dark-indigo-slider: extend(
|
|
121
138
|
$indigo-slider,
|
|
122
139
|
(
|
|
140
|
+
track-step-color: (
|
|
141
|
+
contrast-color: (
|
|
142
|
+
'gray',
|
|
143
|
+
50,
|
|
144
|
+
0.3,
|
|
145
|
+
),
|
|
146
|
+
),
|
|
123
147
|
base-track-color: (
|
|
124
|
-
color: (
|
|
148
|
+
contrast-color: (
|
|
125
149
|
'gray',
|
|
126
|
-
|
|
150
|
+
50,
|
|
151
|
+
0.3,
|
|
127
152
|
),
|
|
128
153
|
),
|
|
129
154
|
base-track-hover-color: (
|
|
130
|
-
color: (
|
|
155
|
+
contrast-color: (
|
|
131
156
|
'gray',
|
|
157
|
+
50,
|
|
158
|
+
0.4,
|
|
159
|
+
),
|
|
160
|
+
),
|
|
161
|
+
track-color: (
|
|
162
|
+
color: (
|
|
163
|
+
'primary',
|
|
164
|
+
400,
|
|
165
|
+
),
|
|
166
|
+
),
|
|
167
|
+
track-hover-color: (
|
|
168
|
+
color: (
|
|
169
|
+
'primary',
|
|
170
|
+
300,
|
|
171
|
+
),
|
|
172
|
+
),
|
|
173
|
+
thumb-color: (
|
|
174
|
+
color: 'surface',
|
|
175
|
+
),
|
|
176
|
+
thumb-border-color: (
|
|
177
|
+
color: (
|
|
178
|
+
'primary',
|
|
132
179
|
400,
|
|
133
180
|
),
|
|
134
181
|
),
|
|
182
|
+
thumb-border-hover-color: (
|
|
183
|
+
color: (
|
|
184
|
+
'primary',
|
|
185
|
+
300,
|
|
186
|
+
),
|
|
187
|
+
),
|
|
188
|
+
disabled-thumb-color: (
|
|
189
|
+
color: 'surface',
|
|
190
|
+
),
|
|
191
|
+
thumb-disabled-border-color: (
|
|
192
|
+
color: (
|
|
193
|
+
'primary',
|
|
194
|
+
800,
|
|
195
|
+
),
|
|
196
|
+
),
|
|
197
|
+
disabled-base-track-color: (
|
|
198
|
+
contrast-color: (
|
|
199
|
+
'gray',
|
|
200
|
+
50,
|
|
201
|
+
0.15,
|
|
202
|
+
),
|
|
203
|
+
),
|
|
204
|
+
disabled-fill-track-color: (
|
|
205
|
+
color: (
|
|
206
|
+
'primary',
|
|
207
|
+
800,
|
|
208
|
+
),
|
|
209
|
+
),
|
|
135
210
|
)
|
|
136
211
|
);
|
|
@@ -14,9 +14,6 @@
|
|
|
14
14
|
/// @prop {Map} track-color [color: ('secondary', 500)] - The color of the track.
|
|
15
15
|
/// @prop {Color} track-step-color [white] - The color of the track steps.
|
|
16
16
|
/// @prop {Number} track-step-size [rem(3px)] - The size of the track steps.
|
|
17
|
-
/// @prop {Map} thumb-color [color: ('secondary', 500)] - The color of the thumb.
|
|
18
|
-
/// @prop {Map} thumb-border-color [color: ('secondary', 500)] - The thumb border color.
|
|
19
|
-
/// @prop {Map} thumb-border-focus-color [color: ('secondary', 500)] - The thumb border color when focused.
|
|
20
17
|
/// @prop {Map} thumb-disabled-border-color [color: ('gray', 400)] - The thumb border color when it's disabled.
|
|
21
18
|
/// @prop {Map} label-background-color [color: ('gray', 700)] - The background color of the bubble label.
|
|
22
19
|
/// @prop {Map} label-text-color [contrast-color: ('gray', 700)] - The text color of the bubble label.
|
|
@@ -31,24 +28,6 @@ $light-slider: (
|
|
|
31
28
|
),
|
|
32
29
|
track-step-color: white,
|
|
33
30
|
track-step-size: rem(3px),
|
|
34
|
-
thumb-color: (
|
|
35
|
-
color: (
|
|
36
|
-
'secondary',
|
|
37
|
-
500,
|
|
38
|
-
),
|
|
39
|
-
),
|
|
40
|
-
thumb-border-color: (
|
|
41
|
-
color: (
|
|
42
|
-
'secondary',
|
|
43
|
-
500,
|
|
44
|
-
),
|
|
45
|
-
),
|
|
46
|
-
thumb-border-focus-color: (
|
|
47
|
-
color: (
|
|
48
|
-
'secondary',
|
|
49
|
-
500,
|
|
50
|
-
),
|
|
51
|
-
),
|
|
52
31
|
thumb-disabled-border-color: (
|
|
53
32
|
color: (
|
|
54
33
|
'gray',
|
|
@@ -83,6 +62,10 @@ $light-slider: (
|
|
|
83
62
|
|
|
84
63
|
/// Generates a material slider schema.
|
|
85
64
|
/// @type {Map}
|
|
65
|
+
/// @prop {Map} thumb-color [color: ('secondary', 500)] - The color of the thumb.
|
|
66
|
+
/// @prop {Map} thumb-border-color [color: ('secondary', 500)] - The thumb border color.
|
|
67
|
+
/// @prop {Map} thumb-border-hover-color [color: ('secondary', 500)] - The thumb border color when hovered.
|
|
68
|
+
/// @prop {Map} thumb-border-focus-color [color: ('secondary', 500)] - The thumb border color when focused.
|
|
86
69
|
/// @prop {Color} thumb-focus-color [transparent] - The focus outline color of the thumb.
|
|
87
70
|
/// @prop {Map} track-step-color [color: ('secondary', 200)] - The color of the track steps.
|
|
88
71
|
/// @prop {Map} track-hover-color [color: ('secondary', 400)] - The color of the track on hover.
|
|
@@ -95,6 +78,30 @@ $light-slider: (
|
|
|
95
78
|
$material-slider: extend(
|
|
96
79
|
$light-slider,
|
|
97
80
|
(
|
|
81
|
+
thumb-color: (
|
|
82
|
+
color: (
|
|
83
|
+
'secondary',
|
|
84
|
+
500,
|
|
85
|
+
),
|
|
86
|
+
),
|
|
87
|
+
thumb-border-color: (
|
|
88
|
+
color: (
|
|
89
|
+
'secondary',
|
|
90
|
+
500,
|
|
91
|
+
),
|
|
92
|
+
),
|
|
93
|
+
thumb-border-hover-color: (
|
|
94
|
+
color: (
|
|
95
|
+
'secondary',
|
|
96
|
+
500,
|
|
97
|
+
),
|
|
98
|
+
),
|
|
99
|
+
thumb-border-focus-color: (
|
|
100
|
+
color: (
|
|
101
|
+
'secondary',
|
|
102
|
+
500,
|
|
103
|
+
),
|
|
104
|
+
),
|
|
98
105
|
track-step-color: (
|
|
99
106
|
color: (
|
|
100
107
|
'secondary',
|
|
@@ -149,6 +156,7 @@ $material-slider: extend(
|
|
|
149
156
|
/// @prop {Map} track-hover-color [color: ('primary', 500)] - The color of the track on hover.
|
|
150
157
|
/// @prop {Map} thumb-color [color: ('surface', 500)] - The color of the thumb.
|
|
151
158
|
/// @prop {Map} thumb-border-color [color: ('gray', 700)] - The thumb border color.
|
|
159
|
+
/// @prop {Map} thumb-border-hover-color [color: ('gray', 700)] - The thumb border color when hovered.
|
|
152
160
|
/// @prop {Map} thumb-border-focus-color [color: ('gray', 700)] - The thumb border color when focused.
|
|
153
161
|
/// @prop {Map} thumb-focus-color [color: ('primary', 700)] - The focus outline color of the thumb.
|
|
154
162
|
/// @prop {Map} disabled-thumb-color [color: ('surface', 500)] - The thumb color when its disabled.
|
|
@@ -185,6 +193,12 @@ $fluent-slider: extend(
|
|
|
185
193
|
700,
|
|
186
194
|
),
|
|
187
195
|
),
|
|
196
|
+
thumb-border-hover-color: (
|
|
197
|
+
color: (
|
|
198
|
+
'gray',
|
|
199
|
+
700,
|
|
200
|
+
),
|
|
201
|
+
),
|
|
188
202
|
thumb-border-focus-color: (
|
|
189
203
|
color: (
|
|
190
204
|
'gray',
|
|
@@ -242,6 +256,7 @@ $fluent-slider: extend(
|
|
|
242
256
|
/// @prop {Map} base-track-hover-color [color: ('secondary', 500, .24)] - The base background color of the track on hover.
|
|
243
257
|
/// @prop {Map} thumb-color [color: ('primary', 500)] - The color of the thumb.
|
|
244
258
|
/// @prop {Map} thumb-border-color [color: ('primary', 500)] - The thumb border color.
|
|
259
|
+
/// @prop {Map} thumb-border-hover-color [color: ('primary', 500)] - The thumb border color when hovered.
|
|
245
260
|
/// @prop {Map} thumb-border-focus-color [color: ('surface', 500)] - The thumb border color when focused.
|
|
246
261
|
/// @prop {Map} thumb-focus-color [color: ('primary', 200)] - The focus outline color of the thumb.
|
|
247
262
|
/// @prop {Map} disabled-thumb-color [color: ('gray', 400)] - The thumb color when its disabled.
|
|
@@ -275,6 +290,12 @@ $bootstrap-slider: extend(
|
|
|
275
290
|
500,
|
|
276
291
|
),
|
|
277
292
|
),
|
|
293
|
+
thumb-border-hover-color: (
|
|
294
|
+
color: (
|
|
295
|
+
'primary',
|
|
296
|
+
500,
|
|
297
|
+
),
|
|
298
|
+
),
|
|
278
299
|
thumb-border-focus-color: (
|
|
279
300
|
color: (
|
|
280
301
|
'surface',
|
|
@@ -298,23 +319,37 @@ $bootstrap-slider: extend(
|
|
|
298
319
|
|
|
299
320
|
/// Generates an indigo slider schema.
|
|
300
321
|
/// @type {Map}
|
|
301
|
-
/// @prop {Map} track-
|
|
322
|
+
/// @prop {Map} track-step-color [color: ('gray', 900, 0.4)] - The color of the track steps.
|
|
323
|
+
/// @prop {Number} track-step-size [rem(2px)] - The size of the track steps.
|
|
302
324
|
/// @prop {Map} base-track-color [color: ('gray', 400)] - The base background color of the track.
|
|
303
325
|
/// @prop {Map} base-track-hover-color [color: ('gray', 500)] - The base background color of the track on hover.
|
|
304
|
-
/// @prop {Map}
|
|
305
|
-
/// @prop {Map}
|
|
306
|
-
/// @prop {Map}
|
|
307
|
-
/// @prop {Map}
|
|
326
|
+
/// @prop {Map} track-color [color: ('primary', 500)] - The color of the track.
|
|
327
|
+
/// @prop {Map} track-hover-color [color: ('primary', 400)] - The color of the track on hover.
|
|
328
|
+
/// @prop {Map} thumb-color [color: ('gray', 50)] - The color of the thumb.
|
|
329
|
+
/// @prop {Map} thumb-border-color [color: ('primary', 500)] - The thumb border color.
|
|
330
|
+
/// @prop {Map} thumb-border-hover-color [color: ('primary', 400)] - The thumb border color when hovered.
|
|
331
|
+
/// @prop {Map} thumb-border-focus-color [color: ('primary', 500)] - The thumb border color when focused.
|
|
332
|
+
/// @prop {Map} thumb-focus-color [color: ('primary', 400, 0.5)] - The focus outline color of the thumb.
|
|
333
|
+
/// @prop {Map} tick-color [color: ('gray', 300)] - The background-color of the tick.
|
|
334
|
+
/// @prop {Map} tick-label-color [color: ('gray', 600)] - The color of the tick label.
|
|
335
|
+
/// @prop {Map} label-background-color [color: ('gray', 600)] - The background color of the bubble label.
|
|
336
|
+
/// @prop {Map} label-text-color [contrast-color: ('gray', 600)] - The text color of the bubble label.
|
|
337
|
+
/// @prop {Map} disabled-thumb-color [color: ('gray', 50)] - The thumb color when its disabled.
|
|
338
|
+
/// @prop {Map} thumb-disabled-border-color [color: ('primary', 50)] - The thumb border color when it's disabled.
|
|
339
|
+
/// @prop {Map} disabled-base-track-color [color: ('gray', 900, 0.15)] - The base background color of the track when is disabled.
|
|
340
|
+
/// @prop {Map} disabled-fill-track-color [color: ('primary', 50)] - The background color of the fill track when is disabled.
|
|
308
341
|
/// @requires {Map} $light-slider
|
|
309
342
|
$indigo-slider: extend(
|
|
310
343
|
$light-slider,
|
|
311
344
|
(
|
|
312
|
-
track-
|
|
345
|
+
track-step-color: (
|
|
313
346
|
color: (
|
|
314
|
-
'
|
|
315
|
-
|
|
347
|
+
'gray',
|
|
348
|
+
900,
|
|
349
|
+
0.4,
|
|
316
350
|
),
|
|
317
351
|
),
|
|
352
|
+
track-step-size: rem(2px),
|
|
318
353
|
base-track-color: (
|
|
319
354
|
color: (
|
|
320
355
|
'gray',
|
|
@@ -327,28 +362,96 @@ $indigo-slider: extend(
|
|
|
327
362
|
500,
|
|
328
363
|
),
|
|
329
364
|
),
|
|
365
|
+
track-color: (
|
|
366
|
+
color: (
|
|
367
|
+
'primary',
|
|
368
|
+
500,
|
|
369
|
+
),
|
|
370
|
+
),
|
|
371
|
+
track-hover-color: (
|
|
372
|
+
color: (
|
|
373
|
+
'primary',
|
|
374
|
+
400,
|
|
375
|
+
),
|
|
376
|
+
),
|
|
377
|
+
thumb-color: (
|
|
378
|
+
color: (
|
|
379
|
+
'gray',
|
|
380
|
+
50,
|
|
381
|
+
),
|
|
382
|
+
),
|
|
383
|
+
thumb-border-color: (
|
|
384
|
+
color: (
|
|
385
|
+
'primary',
|
|
386
|
+
500,
|
|
387
|
+
),
|
|
388
|
+
),
|
|
389
|
+
thumb-border-hover-color: (
|
|
390
|
+
color: (
|
|
391
|
+
'primary',
|
|
392
|
+
400,
|
|
393
|
+
),
|
|
394
|
+
),
|
|
395
|
+
thumb-border-focus-color: (
|
|
396
|
+
color: (
|
|
397
|
+
'primary',
|
|
398
|
+
500,
|
|
399
|
+
),
|
|
400
|
+
),
|
|
330
401
|
thumb-focus-color: (
|
|
331
402
|
color: (
|
|
332
403
|
'primary',
|
|
333
|
-
|
|
404
|
+
400,
|
|
405
|
+
0.5,
|
|
334
406
|
),
|
|
335
407
|
),
|
|
336
|
-
|
|
408
|
+
tick-color: (
|
|
337
409
|
color: (
|
|
338
410
|
'gray',
|
|
339
411
|
300,
|
|
340
412
|
),
|
|
341
413
|
),
|
|
414
|
+
tick-label-color: (
|
|
415
|
+
color: (
|
|
416
|
+
'gray',
|
|
417
|
+
600,
|
|
418
|
+
),
|
|
419
|
+
),
|
|
420
|
+
label-background-color: (
|
|
421
|
+
color: (
|
|
422
|
+
'gray',
|
|
423
|
+
600,
|
|
424
|
+
),
|
|
425
|
+
),
|
|
426
|
+
label-text-color: (
|
|
427
|
+
contrast-color: (
|
|
428
|
+
'gray',
|
|
429
|
+
600,
|
|
430
|
+
),
|
|
431
|
+
),
|
|
432
|
+
disabled-thumb-color: (
|
|
433
|
+
color: (
|
|
434
|
+
'gray',
|
|
435
|
+
50,
|
|
436
|
+
),
|
|
437
|
+
),
|
|
438
|
+
thumb-disabled-border-color: (
|
|
439
|
+
color: (
|
|
440
|
+
'primary',
|
|
441
|
+
50,
|
|
442
|
+
),
|
|
443
|
+
),
|
|
342
444
|
disabled-base-track-color: (
|
|
343
445
|
color: (
|
|
344
446
|
'gray',
|
|
345
|
-
|
|
447
|
+
900,
|
|
448
|
+
0.15,
|
|
346
449
|
),
|
|
347
450
|
),
|
|
348
451
|
disabled-fill-track-color: (
|
|
349
452
|
color: (
|
|
350
|
-
'
|
|
351
|
-
|
|
453
|
+
'primary',
|
|
454
|
+
50,
|
|
352
455
|
),
|
|
353
456
|
),
|
|
354
457
|
)
|