igniteui-theming 17.2.0 → 18.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.
- package/package.json +1 -1
- package/sass/color/_functions.scss +1 -1
- package/sass/themes/schemas/components/dark/_avatar.scss +18 -0
- package/sass/themes/schemas/components/dark/_label.scss +26 -2
- package/sass/themes/schemas/components/dark/_progress.scss +4 -4
- package/sass/themes/schemas/components/light/_avatar.scss +1 -1
- package/sass/themes/schemas/components/light/_label.scss +42 -16
- package/sass/themes/schemas/components/light/_stepper.scss +113 -56
- package/sass/themes/schemas/components/light/calendar/_days-view.scss +0 -15
package/package.json
CHANGED
|
@@ -231,7 +231,7 @@ $_enhanced-accessibility: false;
|
|
|
231
231
|
@function adaptive-contrast($color) {
|
|
232
232
|
$fn: meta.get-function('color', $css: true);
|
|
233
233
|
|
|
234
|
-
@return
|
|
234
|
+
@return hsla(from meta.call($fn, from $color var(--y-contrast)) h 0 l / 1);
|
|
235
235
|
}
|
|
236
236
|
|
|
237
237
|
/// Returns a contrast color for a passed color.
|
|
@@ -7,11 +7,25 @@
|
|
|
7
7
|
/// @access public
|
|
8
8
|
////
|
|
9
9
|
|
|
10
|
+
/// Generates a base dark avatar schema.
|
|
11
|
+
/// @type {Map}
|
|
12
|
+
/// @prop {Map} background [color: ('gray', 200)] - The background color of the avatar.
|
|
13
|
+
$dark-base-avatar: (
|
|
14
|
+
background: (
|
|
15
|
+
color: (
|
|
16
|
+
'gray',
|
|
17
|
+
200,
|
|
18
|
+
),
|
|
19
|
+
),
|
|
20
|
+
);
|
|
21
|
+
|
|
10
22
|
/// Generates a dark material avatar schema.
|
|
11
23
|
/// @type {Map}
|
|
12
24
|
/// @requires $material-avatar
|
|
25
|
+
/// @requires $dark-base-avatar
|
|
13
26
|
$dark-material-avatar: extend(
|
|
14
27
|
$material-avatar,
|
|
28
|
+
$dark-base-avatar,
|
|
15
29
|
(
|
|
16
30
|
_meta: (
|
|
17
31
|
theme: 'material',
|
|
@@ -23,8 +37,10 @@ $dark-material-avatar: extend(
|
|
|
23
37
|
/// Generates a dark fluent avatar schema.
|
|
24
38
|
/// @type {Map}
|
|
25
39
|
/// @requires $fluent-avatar
|
|
40
|
+
/// @requires $dark-base-avatar
|
|
26
41
|
$dark-fluent-avatar: extend(
|
|
27
42
|
$fluent-avatar,
|
|
43
|
+
$dark-base-avatar,
|
|
28
44
|
(
|
|
29
45
|
_meta: (
|
|
30
46
|
theme: 'fluent',
|
|
@@ -36,8 +52,10 @@ $dark-fluent-avatar: extend(
|
|
|
36
52
|
/// Generates a dark bootstrap avatar schema.
|
|
37
53
|
/// @type {Map}
|
|
38
54
|
/// @requires $bootstrap-avatar
|
|
55
|
+
/// @requires $dark-base-avatar
|
|
39
56
|
$dark-bootstrap-avatar: extend(
|
|
40
57
|
$bootstrap-avatar,
|
|
58
|
+
$dark-base-avatar,
|
|
41
59
|
(
|
|
42
60
|
_meta: (
|
|
43
61
|
theme: 'bootstrap',
|
|
@@ -22,10 +22,24 @@ $dark-material-label: extend(
|
|
|
22
22
|
|
|
23
23
|
/// Generates a dark fluent label schema.
|
|
24
24
|
/// @type {Map}
|
|
25
|
+
/// @prop {Map} color [color: ('gray', 800)] - The label color.
|
|
26
|
+
/// @prop {Map} disabled-color [color: ('gray', 300)] - The label color in disabled state.
|
|
25
27
|
/// @requires $fluent-label
|
|
26
28
|
$dark-fluent-label: extend(
|
|
27
29
|
$fluent-label,
|
|
28
30
|
(
|
|
31
|
+
color: (
|
|
32
|
+
color: (
|
|
33
|
+
'gray',
|
|
34
|
+
800,
|
|
35
|
+
),
|
|
36
|
+
),
|
|
37
|
+
disabled-color: (
|
|
38
|
+
color: (
|
|
39
|
+
'gray',
|
|
40
|
+
300,
|
|
41
|
+
),
|
|
42
|
+
),
|
|
29
43
|
_meta: (
|
|
30
44
|
theme: 'fluent',
|
|
31
45
|
variant: 'dark',
|
|
@@ -48,11 +62,21 @@ $dark-bootstrap-label: extend(
|
|
|
48
62
|
|
|
49
63
|
/// Generates a dark indigo label schema.
|
|
50
64
|
/// @type {Map}
|
|
51
|
-
/// @prop {
|
|
65
|
+
/// @prop {Map} color [contrast-color: ('primary', 500, .6)] - The label color.
|
|
66
|
+
/// @prop {Map} disabled-color [contrast-color: ('primary', 500, .2)] - The label color in disabled state.
|
|
52
67
|
$dark-indigo-label: (
|
|
53
68
|
color: (
|
|
54
69
|
contrast-color: (
|
|
55
|
-
'
|
|
70
|
+
'primary',
|
|
71
|
+
500,
|
|
72
|
+
0.6,
|
|
73
|
+
),
|
|
74
|
+
),
|
|
75
|
+
disabled-color: (
|
|
76
|
+
contrast-color: (
|
|
77
|
+
'primary',
|
|
78
|
+
500,
|
|
79
|
+
0.2,
|
|
56
80
|
),
|
|
57
81
|
),
|
|
58
82
|
_meta: (
|
|
@@ -9,13 +9,13 @@
|
|
|
9
9
|
|
|
10
10
|
/// Generates a base dark progress-linear schema.
|
|
11
11
|
/// @type {Map}
|
|
12
|
-
/// @prop {Map} track-color [color: ('gray',
|
|
12
|
+
/// @prop {Map} track-color [color: ('gray', 300)] - The main track color.
|
|
13
13
|
/// @prop {Map} stripes-color [color: ('gray', 900, .7)] - The track stripes color.
|
|
14
14
|
$dark-base-progress-linear: (
|
|
15
15
|
track-color: (
|
|
16
16
|
color: (
|
|
17
17
|
'gray',
|
|
18
|
-
|
|
18
|
+
300,
|
|
19
19
|
),
|
|
20
20
|
),
|
|
21
21
|
|
|
@@ -111,12 +111,12 @@ $dark-indigo-progress-linear: extend(
|
|
|
111
111
|
|
|
112
112
|
/// Generates a base dark progress-circular schema.
|
|
113
113
|
/// @type {Map}
|
|
114
|
-
/// @prop {Map} base-circle-color [color: ('gray',
|
|
114
|
+
/// @prop {Map} base-circle-color [color: ('gray', 300)] - The base circle fill color.
|
|
115
115
|
$dark-base-progress-circular: (
|
|
116
116
|
base-circle-color: (
|
|
117
117
|
color: (
|
|
118
118
|
'gray',
|
|
119
|
-
|
|
119
|
+
300,
|
|
120
120
|
),
|
|
121
121
|
),
|
|
122
122
|
);
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
/// Generates a light avatar schema.
|
|
11
11
|
/// @type {Map}
|
|
12
|
-
/// @prop {Map} background [color: ('gray', 400)]- The background color of the avatar.
|
|
12
|
+
/// @prop {Map} background [color: ('gray', 400)] - The background color of the avatar.
|
|
13
13
|
/// @prop {Map} color [color: ('gray', 800)] - The text color of the avatar.
|
|
14
14
|
/// @prop {Map} icon-color [color: ('gray', 800)] - The icon color of the avatar.
|
|
15
15
|
/// @prop {Number} border-radius [rem(8px)] - The border radius for rounded avatar.
|
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
|
|
9
9
|
/// Generates a base light label schema.
|
|
10
10
|
/// @type {Map}
|
|
11
|
-
/// @prop {
|
|
11
|
+
/// @prop {Map} color [color: ('gray', 700)] - The label color.
|
|
12
|
+
/// @prop {Map} disabled-color [color: ('gray', 500)] - The label color in disabled state.
|
|
12
13
|
$light-label: (
|
|
13
14
|
color: (
|
|
14
15
|
color: (
|
|
@@ -16,6 +17,12 @@ $light-label: (
|
|
|
16
17
|
700,
|
|
17
18
|
),
|
|
18
19
|
),
|
|
20
|
+
disabled-color: (
|
|
21
|
+
color: (
|
|
22
|
+
'gray',
|
|
23
|
+
500,
|
|
24
|
+
),
|
|
25
|
+
),
|
|
19
26
|
);
|
|
20
27
|
|
|
21
28
|
/// Generates a light material label schema.
|
|
@@ -39,33 +46,44 @@ $material-label: extend(
|
|
|
39
46
|
|
|
40
47
|
/// Generates a light fluent label schema.
|
|
41
48
|
/// @type {Map}
|
|
42
|
-
/// @prop {
|
|
49
|
+
/// @prop {Map} color [color: ('gray', 900)] - The label color.
|
|
43
50
|
/// @prop {Map} typography [label: (value: 'subtitle-2')] - The typography styles used for the component.
|
|
44
|
-
$
|
|
45
|
-
|
|
51
|
+
/// @requires {Map} $light-label
|
|
52
|
+
$fluent-label: extend(
|
|
53
|
+
$light-label,
|
|
54
|
+
(
|
|
46
55
|
color: (
|
|
47
|
-
|
|
48
|
-
|
|
56
|
+
color: (
|
|
57
|
+
'gray',
|
|
58
|
+
900,
|
|
59
|
+
),
|
|
49
60
|
),
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
61
|
+
typography: (
|
|
62
|
+
label: (
|
|
63
|
+
value: 'subtitle-2',
|
|
64
|
+
),
|
|
54
65
|
),
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
)
|
|
66
|
+
_meta: (
|
|
67
|
+
theme: 'fluent',
|
|
68
|
+
variant: 'light',
|
|
69
|
+
),
|
|
70
|
+
)
|
|
60
71
|
);
|
|
61
72
|
|
|
62
73
|
/// Generates a light bootstrap label schema.
|
|
63
74
|
/// @type {Map}
|
|
75
|
+
/// @prop {Map} disabled-color [color: ('gray', 400)] - The label color in disabled state.
|
|
64
76
|
/// @prop {Map} typography [label: (value: 'body-1')] - The typography styles used for the component.
|
|
65
77
|
/// @requires {Map} $light-label
|
|
66
78
|
$bootstrap-label: extend(
|
|
67
79
|
$light-label,
|
|
68
80
|
(
|
|
81
|
+
disabled-color: (
|
|
82
|
+
color: (
|
|
83
|
+
'gray',
|
|
84
|
+
400,
|
|
85
|
+
),
|
|
86
|
+
),
|
|
69
87
|
typography: (
|
|
70
88
|
label: (
|
|
71
89
|
value: 'body-1',
|
|
@@ -80,13 +98,21 @@ $bootstrap-label: extend(
|
|
|
80
98
|
|
|
81
99
|
/// Generates a light indigo label schema.
|
|
82
100
|
/// @type {Map}
|
|
83
|
-
/// @prop {
|
|
101
|
+
/// @prop {Map} color [color: ('gray', 600)] - The label color.
|
|
102
|
+
/// @prop {Map} disabled-color [color: ('gray', 900, .2)] - The label color in disabled state.
|
|
84
103
|
/// @prop {Map} typography [label: (value: 'caption')] - The typography styles used for the component.
|
|
85
104
|
$indigo-label: (
|
|
86
105
|
color: (
|
|
106
|
+
color: (
|
|
107
|
+
'gray',
|
|
108
|
+
600,
|
|
109
|
+
),
|
|
110
|
+
),
|
|
111
|
+
disabled-color: (
|
|
87
112
|
color: (
|
|
88
113
|
'gray',
|
|
89
114
|
900,
|
|
115
|
+
0.2,
|
|
90
116
|
),
|
|
91
117
|
),
|
|
92
118
|
typography: (
|
|
@@ -10,8 +10,6 @@
|
|
|
10
10
|
/// Generates a base light stepper schema.
|
|
11
11
|
/// @type {Map}
|
|
12
12
|
/// @prop {Color} step-background [transparent] - The background of the step header.
|
|
13
|
-
/// @prop {Map} step-hover-background [color: ('gray', 200)] - The background of the step header on hover.
|
|
14
|
-
/// @prop {Map} step-focus-background [color: ('gray', 100)] - The background of the step header on focus.
|
|
15
13
|
/// @prop {Map} title-color [color: ('gray', 900)] - The text color of the step title.
|
|
16
14
|
/// @prop {Map} title-hover-color [color: ('gray', 900)] - The text color of the step title on hover.
|
|
17
15
|
/// @prop {Map} title-focus-color [color: ('gray', 900)] - The text color of the step title on focus.
|
|
@@ -22,8 +20,6 @@
|
|
|
22
20
|
/// @prop {Color} indicator-background [transparent] - The background color of the incomplete step indicator.
|
|
23
21
|
/// @prop {Map} indicator-outline [color: ('gray', 400)] - The outline color of the incomplete step indicator.
|
|
24
22
|
/// @prop {Color} invalid-step-background [transparent] - The background of the invalid step header.
|
|
25
|
-
/// @prop {Map} invalid-step-hover-background [color: ('gray', 200)] - The background of the invalid step header on hover.
|
|
26
|
-
/// @prop {Map} invalid-step-focus-background [color: ('gray', 100)] - The background of the invalid step header on focus.
|
|
27
23
|
/// @prop {Map} invalid-title-color [color: ('error')] - The color of the invalid step title.
|
|
28
24
|
/// @prop {Map} invalid-title-hover-color [color: ('error')] - The color of the invalid step title on hover.
|
|
29
25
|
/// @prop {Map} invalid-title-focus-color [color: ('error')] - The color of the invalid step title on focus.
|
|
@@ -34,8 +30,6 @@
|
|
|
34
30
|
/// @prop {Map} invalid-indicator-background [color: ('error')] - The background color of the invalid step indicator.
|
|
35
31
|
/// @prop {Map} invalid-indicator-outline [color: ('error')] - The outline color of the invalid step indicator.
|
|
36
32
|
/// @prop {Color} current-step-background [transparent] - The background of the current step header.
|
|
37
|
-
/// @prop {Map} current-step-hover-background [color: ('gray', 200)] - The background of the current step header on hover.
|
|
38
|
-
/// @prop {Map} current-step-focus-background [color: ('gray', 100)] - The background of the current step header on focus.
|
|
39
33
|
/// @prop {Map} current-title-color [color: ('gray', 900)] - The color of the current step title.
|
|
40
34
|
/// @prop {Map} current-title-hover-color [color: ('gray', 900)] - The color of the current step title on hover.
|
|
41
35
|
/// @prop {Map} current-title-focus-color [color: ('gray', 900)] - The color of the current step title on focus.
|
|
@@ -46,8 +40,6 @@
|
|
|
46
40
|
/// @prop {Map} current-indicator-background [color: ('primary', 500)] - The background color of the current step indicator.
|
|
47
41
|
/// @prop {Map} current-indicator-outline [color: ('primary', 500)] - The outline color of the current step indicator.
|
|
48
42
|
/// @prop {Color} complete-step-background [transparent] - The background of the complete step header.
|
|
49
|
-
/// @prop {Map} complete-step-hover-background [color: ('gray', 200)] - The background of the complete step header on hover.
|
|
50
|
-
/// @prop {Map} complete-step-focus-background [color: ('gray', 100)] - The background of the complete step header on focus.
|
|
51
43
|
/// @prop {Map} complete-title-color [color: ('gray', 900)] - The color of the complete step title.
|
|
52
44
|
/// @prop {Map} complete-title-hover-color [color: ('gray', 900)] - The color of the complete step title on hover.
|
|
53
45
|
/// @prop {Map} complete-title-focus-color [color: ('gray', 900)] - The color of the complete step title on focus.
|
|
@@ -76,18 +68,6 @@ $light-stepper: (
|
|
|
76
68
|
),
|
|
77
69
|
),
|
|
78
70
|
step-background: transparent,
|
|
79
|
-
step-hover-background: (
|
|
80
|
-
color: (
|
|
81
|
-
'gray',
|
|
82
|
-
200,
|
|
83
|
-
),
|
|
84
|
-
),
|
|
85
|
-
step-focus-background: (
|
|
86
|
-
color: (
|
|
87
|
-
'gray',
|
|
88
|
-
100,
|
|
89
|
-
),
|
|
90
|
-
),
|
|
91
71
|
indicator-background: transparent,
|
|
92
72
|
indicator-outline: (
|
|
93
73
|
color: (
|
|
@@ -141,18 +121,6 @@ $light-stepper: (
|
|
|
141
121
|
|
|
142
122
|
// Complete
|
|
143
123
|
complete-step-background: transparent,
|
|
144
|
-
complete-step-hover-background: (
|
|
145
|
-
color: (
|
|
146
|
-
'gray',
|
|
147
|
-
200,
|
|
148
|
-
),
|
|
149
|
-
),
|
|
150
|
-
complete-step-focus-background: (
|
|
151
|
-
color: (
|
|
152
|
-
'gray',
|
|
153
|
-
100,
|
|
154
|
-
),
|
|
155
|
-
),
|
|
156
124
|
complete-title-color: (
|
|
157
125
|
color: (
|
|
158
126
|
'gray',
|
|
@@ -193,18 +161,6 @@ $light-stepper: (
|
|
|
193
161
|
|
|
194
162
|
// Current
|
|
195
163
|
current-step-background: transparent,
|
|
196
|
-
current-step-hover-background: (
|
|
197
|
-
color: (
|
|
198
|
-
'gray',
|
|
199
|
-
200,
|
|
200
|
-
),
|
|
201
|
-
),
|
|
202
|
-
current-step-focus-background: (
|
|
203
|
-
color: (
|
|
204
|
-
'gray',
|
|
205
|
-
100,
|
|
206
|
-
),
|
|
207
|
-
),
|
|
208
164
|
|
|
209
165
|
current-indicator-background: (
|
|
210
166
|
color: (
|
|
@@ -267,18 +223,6 @@ $light-stepper: (
|
|
|
267
223
|
|
|
268
224
|
// Invalid
|
|
269
225
|
invalid-step-background: transparent,
|
|
270
|
-
invalid-step-hover-background: (
|
|
271
|
-
color: (
|
|
272
|
-
'gray',
|
|
273
|
-
200,
|
|
274
|
-
),
|
|
275
|
-
),
|
|
276
|
-
invalid-step-focus-background: (
|
|
277
|
-
color: (
|
|
278
|
-
'gray',
|
|
279
|
-
100,
|
|
280
|
-
),
|
|
281
|
-
),
|
|
282
226
|
invalid-indicator-background: (
|
|
283
227
|
color: (
|
|
284
228
|
'error',
|
|
@@ -394,6 +338,14 @@ $light-stepper: (
|
|
|
394
338
|
/// @prop {Map} complete-indicator-outline [color: ('gray', 900)] - The outline color of the completed step indicator.
|
|
395
339
|
/// @prop {Map} complete-indicator-color [contrast-color: ('gray', 900)] - The color of the completed step indicator.
|
|
396
340
|
/// @prop {Map} complete-step-separator-color [color: ('gray', 900)] - The separator border-color between the completed steps.
|
|
341
|
+
/// @prop {Map} step-hover-background [color: ('gray', 200)] - The background of the step header on hover.
|
|
342
|
+
/// @prop {Map} invalid-step-hover-background [color: ('gray', 200)] - The background of the invalid step header on hover.
|
|
343
|
+
/// @prop {Map} current-step-hover-background [color: ('gray', 200)] - The background of the current step header on hover.
|
|
344
|
+
/// @prop {Map} complete-step-hover-background [color: ('gray', 200)] - The background of the complete step header on hover.
|
|
345
|
+
/// @prop {Map} step-focus-background [color: ('gray', 100)] - The background of the step header on hover.
|
|
346
|
+
/// @prop {Map} invalid-step-focus-background [color: ('gray', 100)] - The background of the invalid step header on hover.
|
|
347
|
+
/// @prop {Map} current-step-focus-background [color: ('gray', 100)] - The background of the current step header on hover.
|
|
348
|
+
/// @prop {Map} complete-step-focus-background [color: ('gray', 100)] - The background of the complete step header on hover.
|
|
397
349
|
/// @prop {Map} disabled-indicator-background [color: ('gray', 200)] - The background color of the disabled step indicator.
|
|
398
350
|
/// @requires {Map} $light-stepper
|
|
399
351
|
$material-stepper: extend(
|
|
@@ -435,6 +387,54 @@ $material-stepper: extend(
|
|
|
435
387
|
900,
|
|
436
388
|
),
|
|
437
389
|
),
|
|
390
|
+
step-hover-background: (
|
|
391
|
+
color: (
|
|
392
|
+
'gray',
|
|
393
|
+
200,
|
|
394
|
+
),
|
|
395
|
+
),
|
|
396
|
+
complete-step-hover-background: (
|
|
397
|
+
color: (
|
|
398
|
+
'gray',
|
|
399
|
+
200,
|
|
400
|
+
),
|
|
401
|
+
),
|
|
402
|
+
current-step-hover-background: (
|
|
403
|
+
color: (
|
|
404
|
+
'gray',
|
|
405
|
+
200,
|
|
406
|
+
),
|
|
407
|
+
),
|
|
408
|
+
invalid-step-hover-background: (
|
|
409
|
+
color: (
|
|
410
|
+
'gray',
|
|
411
|
+
200,
|
|
412
|
+
),
|
|
413
|
+
),
|
|
414
|
+
step-focus-background: (
|
|
415
|
+
color: (
|
|
416
|
+
'gray',
|
|
417
|
+
100,
|
|
418
|
+
),
|
|
419
|
+
),
|
|
420
|
+
complete-step-focus-background: (
|
|
421
|
+
color: (
|
|
422
|
+
'gray',
|
|
423
|
+
100,
|
|
424
|
+
),
|
|
425
|
+
),
|
|
426
|
+
current-step-focus-background: (
|
|
427
|
+
color: (
|
|
428
|
+
'gray',
|
|
429
|
+
100,
|
|
430
|
+
),
|
|
431
|
+
),
|
|
432
|
+
invalid-step-focus-background: (
|
|
433
|
+
color: (
|
|
434
|
+
'gray',
|
|
435
|
+
100,
|
|
436
|
+
),
|
|
437
|
+
),
|
|
438
438
|
disabled-indicator-background: (
|
|
439
439
|
color: (
|
|
440
440
|
'gray',
|
|
@@ -455,6 +455,14 @@ $material-stepper: extend(
|
|
|
455
455
|
/// @prop {Map} complete-indicator-background [color: ('gray', 300)] - The background color of the completed step indicator.
|
|
456
456
|
/// @prop {Color} complete-indicator-outline [transparent] - The outline color of the completed step indicator.
|
|
457
457
|
/// @prop {Map} complete-indicator-color [contrast-color: ('gray', 200)] - The text color of the completed step indicator.
|
|
458
|
+
/// @prop {Map} step-hover-background [color: ('gray', 100)] - The background of the step header on hover.
|
|
459
|
+
/// @prop {Map} invalid-step-hover-background [color: ('gray', 100)] - The background of the invalid step header on hover.
|
|
460
|
+
/// @prop {Map} current-step-hover-background [color: ('gray', 100)] - The background of the current step header on hover.
|
|
461
|
+
/// @prop {Map} complete-step-hover-background [color: ('gray', 100)] - The background of the complete step header on hover.
|
|
462
|
+
/// @prop {Map} step-focus-background [color: ('gray', 200)] - The background of the step header on hover.
|
|
463
|
+
/// @prop {Map} invalid-step-focus-background [color: ('gray', 200)] - The background of the invalid step header on hover.
|
|
464
|
+
/// @prop {Map} current-step-focus-background [color: ('gray', 200)] - The background of the current step header on hover.
|
|
465
|
+
/// @prop {Map} complete-step-focus-background [color: ('gray', 200)] - The background of the complete step header on hover.
|
|
458
466
|
/// @prop {Color} disabled-indicator-outline [transparent] - The outline color of the disabled step indicator.
|
|
459
467
|
/// @prop {List} border-radius-indicator [(rem(2px), rem(0), rem(100px))] - The indicator border radius.
|
|
460
468
|
/// @prop {List} border-radius-step-header [(rem(2px), rem(0), rem(100px))] - The header border radius.
|
|
@@ -486,6 +494,55 @@ $fluent-stepper: extend(
|
|
|
486
494
|
),
|
|
487
495
|
),
|
|
488
496
|
|
|
497
|
+
step-hover-background: (
|
|
498
|
+
color: (
|
|
499
|
+
'gray',
|
|
500
|
+
100,
|
|
501
|
+
),
|
|
502
|
+
),
|
|
503
|
+
complete-step-hover-background: (
|
|
504
|
+
color: (
|
|
505
|
+
'gray',
|
|
506
|
+
100,
|
|
507
|
+
),
|
|
508
|
+
),
|
|
509
|
+
current-step-hover-background: (
|
|
510
|
+
color: (
|
|
511
|
+
'gray',
|
|
512
|
+
100,
|
|
513
|
+
),
|
|
514
|
+
),
|
|
515
|
+
invalid-step-hover-background: (
|
|
516
|
+
color: (
|
|
517
|
+
'gray',
|
|
518
|
+
100,
|
|
519
|
+
),
|
|
520
|
+
),
|
|
521
|
+
step-focus-background: (
|
|
522
|
+
color: (
|
|
523
|
+
'gray',
|
|
524
|
+
200,
|
|
525
|
+
),
|
|
526
|
+
),
|
|
527
|
+
complete-step-focus-background: (
|
|
528
|
+
color: (
|
|
529
|
+
'gray',
|
|
530
|
+
200,
|
|
531
|
+
),
|
|
532
|
+
),
|
|
533
|
+
current-step-focus-background: (
|
|
534
|
+
color: (
|
|
535
|
+
'gray',
|
|
536
|
+
200,
|
|
537
|
+
),
|
|
538
|
+
),
|
|
539
|
+
invalid-step-focus-background: (
|
|
540
|
+
color: (
|
|
541
|
+
'gray',
|
|
542
|
+
200,
|
|
543
|
+
),
|
|
544
|
+
),
|
|
545
|
+
|
|
489
546
|
// Disabled
|
|
490
547
|
disabled-indicator-outline: transparent,
|
|
491
548
|
border-radius-indicator: (
|
|
@@ -28,10 +28,6 @@
|
|
|
28
28
|
/// @prop {Map} date-selected-current-range-focus-foreground [color: ('gray', 900)] - The :focus foreground color of the current date in the selected range.
|
|
29
29
|
/// @prop {Color} date-special-background [transparent] - The background color of a special date.
|
|
30
30
|
/// @prop {Color} date-special-range-background [transparent] - The background color of a special date in range selection.
|
|
31
|
-
/// @prop {Map} date-special-current-border-color [color: ('secondary', 500)] - The outline color around a special date.
|
|
32
|
-
/// @prop {Color} date-selected-current-outline [transparent] - The outline color of the current selected date.
|
|
33
|
-
/// @prop {Color} date-selected-current-hover-outline [transparent] - The :hover outline color of the current selected date.
|
|
34
|
-
/// @prop {Color} date-selected-current-focus-outline [transparent] - The :focus outline color of the current selected date.
|
|
35
31
|
/// @prop {Color} date-border-color [transparent] - The border color around a date.
|
|
36
32
|
/// @prop {Color} date-hover-border-color [transparent] - The :hover border color around a date.
|
|
37
33
|
/// @prop {Color} date-focus-border-color [transparent] - The :focus border color around a date.
|
|
@@ -173,15 +169,6 @@ $light-days-view: extend(
|
|
|
173
169
|
),
|
|
174
170
|
date-special-background: transparent,
|
|
175
171
|
date-special-range-background: transparent,
|
|
176
|
-
date-special-current-border-color: (
|
|
177
|
-
color: (
|
|
178
|
-
'secondary',
|
|
179
|
-
500,
|
|
180
|
-
),
|
|
181
|
-
),
|
|
182
|
-
date-selected-current-outline: transparent,
|
|
183
|
-
date-selected-current-hover-outline: transparent,
|
|
184
|
-
date-selected-current-focus-outline: transparent,
|
|
185
172
|
date-border-color: transparent,
|
|
186
173
|
date-hover-border-color: transparent,
|
|
187
174
|
date-focus-border-color: transparent,
|
|
@@ -597,7 +584,6 @@ $material-days-view: extend(
|
|
|
597
584
|
/// @prop {Map} date-special-border-color [color: ('primary', 900)] - The outline color around a special date.
|
|
598
585
|
/// @prop {Map} date-special-hover-border-color [color: ('primary', 900)] - The outline color around a special date.
|
|
599
586
|
/// @prop {Map} date-special-range-border-color [color: ('primary', 900)] - The outline color around a special date in a range selection.
|
|
600
|
-
/// @prop {Color} date-special-current-border-color [transparent] - The outline color around a special date.
|
|
601
587
|
/// @prop {Color} date-current-border-color [transparent] - The border color of the current date.
|
|
602
588
|
/// @prop {Color} date-current-hover-border-color [transparent] - The :hover border color of the current date.
|
|
603
589
|
/// @prop {Color} date-current-focus-border-color [transparent] - The :focus border color of the current date.
|
|
@@ -725,7 +711,6 @@ $fluent-days-view: extend(
|
|
|
725
711
|
900,
|
|
726
712
|
),
|
|
727
713
|
),
|
|
728
|
-
date-special-current-border-color: transparent,
|
|
729
714
|
date-special-hover-background: (
|
|
730
715
|
color: (
|
|
731
716
|
'gray',
|