Skip to content

Commit 97f2b00

Browse files
anna-shakhovaanna-shakhova
authored
Stepper: prepare variables for ThemeBuilder (#29521)
1 parent 078b1cd commit 97f2b00

File tree

6 files changed

+442
-33
lines changed

6 files changed

+442
-33
lines changed

‎packages/devextreme-scss/scss/widgets/fluent/stepper/_colors.scss‎

Lines changed: 147 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,39 +5,176 @@
55

66
// adduse
77

8+
/**
9+
* $name 10. Active color
10+
* $type color
11+
*/
12+
$stepper-step-accent-bg: $base-accent !default;
13+
14+
/**
15+
* $name 20. Hover state active color
16+
* $type color
17+
*/
18+
$stepper-step-accent-hover-bg: $base-accent-hover !default;
19+
20+
/**
21+
* $name 30. Invalid color
22+
* $type color
23+
*/
24+
$stepper-step-danger-bg: $base-danger !default;
25+
26+
/**
27+
* $name 40. Hover state invalid color
28+
* $type color
29+
*/
30+
$stepper-step-danger-hover-bg: $base-danger-hover !default;
31+
32+
/**
33+
* $name 50. Shadow color
34+
* $type color
35+
*/
836
$stepper-step-shadow-color: $base-typography-bg !default;
937

38+
/**
39+
* $name 60. Background color
40+
* $type color
41+
*/
1042
$stepper-step-base-bg: $base-bg !default;
43+
44+
/**
45+
* $name 70. Hover state background color
46+
* $type color
47+
*/
1148
$stepper-step-base-hover-bg: $base-hover-bg !default;
49+
50+
/**
51+
* $name 80. Border color
52+
* $type color
53+
*/
1254
$stepper-step-base-border-color: $base-border-color !default;
55+
56+
/**
57+
* $name 90. Hover state border color
58+
* $type color
59+
*/
1360
$stepper-step-base-hover-border-color: $base-border-color-hover !default;
61+
62+
/**
63+
* $name 100. Inner text color
64+
* $type color
65+
*/
1466
$stepper-step-base-text-color: $base-text-color !default;
15-
$stepper-step-base-label-color: $base-text-color !default;
1667

17-
$stepper-step-accent-bg: $base-accent !default;
18-
$stepper-step-accent-hover-bg: $base-accent-hover !default;
19-
$stepper-step-danger-bg: $base-danger !default;
20-
$stepper-step-danger-hover-bg: $base-danger-hover !default;
68+
/**
69+
* $name 110. Label text color
70+
* $type color
71+
*/
72+
$stepper-step-base-label-color: $base-text-color !default;
2173

74+
/**
75+
* $name 120. Background color
76+
* $type color
77+
*/
2278
$stepper-step-selected-bg: $stepper-step-accent-bg !default;
79+
80+
/**
81+
* $name 130. Hover state background color
82+
* $type color
83+
*/
2384
$stepper-step-selected-hover-bg: $stepper-step-accent-hover-bg !default;
24-
$stepper-step-selected-label-color: $stepper-step-accent-bg !default;
85+
86+
/**
87+
* $name 140. Inner text color
88+
* $type color
89+
*/
2590
$stepper-step-selected-text-color: $base-inverted-text-color !default;
2691

92+
/**
93+
* $name 150. Label text color
94+
* $type color
95+
*/
96+
$stepper-step-selected-label-color: $stepper-step-accent-bg !default;
97+
98+
/**
99+
* $name 160. Background color
100+
* $type color
101+
*/
27102
$stepper-step-invalid-bg: $stepper-step-base-bg !default;
103+
104+
/**
105+
* $name 170. Hover state background color
106+
* $type color
107+
*/
28108
$stepper-step-invalid-hover-bg: $stepper-step-base-hover-bg !default;
109+
110+
/**
111+
* $name 180. Border color
112+
* $type color
113+
*/
29114
$stepper-step-invalid-border-color: $stepper-step-base-border-color !default;
115+
116+
/**
117+
* $name 190. Hover state border color
118+
* $type color
119+
*/
30120
$stepper-step-invalid-hover-border-color: $stepper-step-base-hover-border-color !default;
121+
122+
/**
123+
* $name 200. Inner text color
124+
* $type color
125+
*/
31126
$stepper-step-invalid-text-color: $stepper-step-danger-bg !default;
127+
128+
/**
129+
* $name 210. Hover state inner text color
130+
* $type color
131+
*/
32132
$stepper-step-invalid-hover-text-color: $stepper-step-danger-hover-bg !default;
133+
134+
/**
135+
* $name 220. Label text color
136+
* $type color
137+
*/
33138
$stepper-step-invalid-label-color: $stepper-step-danger-bg !default;
34139

35-
$stepper-step-selected-invalid-bg: $stepper-step-danger-bg !default;
36-
$stepper-step-selected-invalid-hover-bg: $stepper-step-danger-hover-bg !default;
140+
/**
141+
* $name 230. Selected background color
142+
* $type color
143+
*/
144+
$stepper-step-invalid-selected-bg: $stepper-step-danger-bg !default;
37145

38-
$stepper-step-disabled-text-color: $base-foreground-disabled !default;
39-
$stepper-step-disabled-bg: $base-background-disabled !default;
146+
/**
147+
* $name 240. Selected hover state background color
148+
* $type color
149+
*/
150+
$stepper-step-invalid-selected-hover-bg: $stepper-step-danger-hover-bg !default;
151+
152+
/**
153+
* $name 250. Shadow color
154+
* $type color
155+
*/
40156
$stepper-step-disabled-shadow: $base-bg !default;
41157

158+
/**
159+
* $name 260. Background color
160+
* $type color
161+
*/
162+
$stepper-step-disabled-bg: $base-background-disabled !default;
163+
164+
/**
165+
* $name 270. Text color
166+
* $type color
167+
*/
168+
$stepper-step-disabled-text-color: $base-foreground-disabled !default;
169+
170+
/**
171+
* $name 280. Pending color
172+
* $type color
173+
*/
42174
$stepper-connector-bg: $base-separator-color !default;
175+
176+
/**
177+
* $name 290. Completed color
178+
* $type color
179+
*/
43180
$stepper-connector-value-bg: $base-accent !default;

‎packages/devextreme-scss/scss/widgets/fluent/stepper/_index.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@
4747
$stepper-step-invalid-text-color,
4848
$stepper-step-invalid-hover-text-color,
4949
$stepper-step-invalid-label-color,
50-
$stepper-step-selected-invalid-bg,
51-
$stepper-step-selected-invalid-hover-bg,
50+
$stepper-step-invalid-selected-bg,
51+
$stepper-step-invalid-selected-hover-bg,
5252
$stepper-step-disabled-text-color,
5353
$stepper-step-disabled-bg,
5454
$stepper-step-disabled-shadow,

‎packages/devextreme-scss/scss/widgets/generic/stepper/_colors.scss‎

Lines changed: 145 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,88 @@
55

66
// adduse
77

8+
/**
9+
* $name 10. Active color
10+
* $type color
11+
*/
12+
$stepper-step-accent-bg: null !default;
13+
14+
/**
15+
* $name 20. Hover state active color
16+
* $type color
17+
*/
18+
$stepper-step-accent-hover-bg: null !default;
19+
20+
/**
21+
* $name 30. Invalid color
22+
* $type color
23+
*/
24+
$stepper-step-danger-bg: $base-danger !default;
25+
26+
/**
27+
* $name 40. Hover state invalid color
28+
* $type color
29+
*/
30+
$stepper-step-danger-hover-bg: null !default;
31+
32+
/**
33+
* $name 50. Shadow color
34+
* $type color
35+
*/
836
$stepper-step-shadow-color: $base-bg !default;
937

38+
/**
39+
* $name 60. Background color
40+
* $type color
41+
*/
1042
$stepper-step-base-bg: null !default;
43+
44+
/**
45+
* $name 70. Hover state background color
46+
* $type color
47+
*/
1148
$stepper-step-base-hover-bg: null !default;
49+
50+
/**
51+
* $name 100. Inner text color
52+
* $type color
53+
*/
1254
$stepper-step-base-text-color: $base-text-color !default;
55+
56+
/**
57+
* $name 110. Label text color
58+
* $type color
59+
*/
1360
$stepper-step-base-label-color: $base-text-color !default;
1461

15-
$stepper-step-accent-bg: null !default;
16-
$stepper-step-accent-hover-bg: null !default;
17-
$stepper-step-danger-bg: $base-danger !default;
18-
$stepper-step-danger-hover-bg: null !default;
62+
/**
63+
* $name 250. Shadow color
64+
* $type color
65+
*/
66+
$stepper-step-disabled-shadow: $base-bg !default;
1967

20-
$stepper-step-disabled-text-color: color.change($base-text-color, $alpha: $base-disabled-opacity) !default;
68+
/**
69+
* $name 260. Background color
70+
* $type color
71+
*/
2172
$stepper-step-disabled-bg: null !default;
22-
$stepper-step-disabled-shadow: $base-bg !default;
2373

74+
/**
75+
* $name 270. Text color
76+
* $type color
77+
*/
78+
$stepper-step-disabled-text-color: color.change($base-text-color, $alpha: $base-disabled-opacity) !default;
79+
80+
/**
81+
* $name 280. Pending color
82+
* $type color
83+
*/
2484
$stepper-connector-bg: $base-border-color !default;
85+
86+
/**
87+
* $name 290. Completed color
88+
* $type color
89+
*/
2590
$stepper-connector-value-bg: $base-text-color !default;
2691

2792
@if $color == "carmine" {
@@ -120,21 +185,92 @@ $stepper-connector-value-bg: $base-text-color !default;
120185
$stepper-step-disabled-bg: darken($base-bg, 6.67%) !default;
121186
}
122187

188+
/**
189+
* $name 80. Border color
190+
* $type color
191+
*/
123192
$stepper-step-base-border-color: $stepper-step-base-bg !default;
193+
194+
/**
195+
* $name 90. Hover state border color
196+
* $type color
197+
*/
124198
$stepper-step-base-hover-border-color: $stepper-step-base-hover-bg !default;
125199

200+
/**
201+
* $name 120. Background color
202+
* $type color
203+
*/
126204
$stepper-step-selected-bg: $stepper-step-accent-bg !default;
205+
206+
/**
207+
* $name 130. Hover state background color
208+
* $type color
209+
*/
127210
$stepper-step-selected-hover-bg: $stepper-step-accent-hover-bg !default;
128-
$stepper-step-selected-label-color: $base-text-color !default;
211+
212+
/**
213+
* $name 140. Inner text color
214+
* $type color
215+
*/
129216
$stepper-step-selected-text-color: $base-inverted-text-color !default;
130217

218+
/**
219+
* $name 150. Label text color
220+
* $type color
221+
*/
222+
$stepper-step-selected-label-color: $base-text-color !default;
223+
224+
/**
225+
* $name 160. Background color
226+
* $type color
227+
*/
131228
$stepper-step-invalid-bg: $stepper-step-danger-bg !default;
229+
230+
/**
231+
* $name 170. Hover state background color
232+
* $type color
233+
*/
132234
$stepper-step-invalid-hover-bg: $stepper-step-danger-hover-bg !default;
235+
236+
/**
237+
* $name 180. Border color
238+
* $type color
239+
*/
133240
$stepper-step-invalid-border-color: $stepper-step-invalid-bg !default;
241+
242+
/**
243+
* $name 190. Hover state border color
244+
* $type color
245+
*/
134246
$stepper-step-invalid-hover-border-color: $stepper-step-invalid-hover-bg !default;
247+
248+
/**
249+
* $name 200. Inner text color
250+
* $type color
251+
*/
135252
$stepper-step-invalid-text-color: $base-inverted-text-color !default;
253+
254+
/**
255+
* $name 210. Hover state inner text color
256+
* $type color
257+
*/
136258
$stepper-step-invalid-hover-text-color: $base-inverted-text-color !default;
259+
260+
/**
261+
* $name 220. Label text color
262+
* $type color
263+
*/
137264
$stepper-step-invalid-label-color: $base-text-color !default;
138265

139-
$stepper-step-selected-invalid-bg: $stepper-step-danger-bg !default;
140-
$stepper-step-selected-invalid-hover-bg: $stepper-step-danger-hover-bg !default;
266+
/**
267+
* $name 230. Selected background color
268+
* $type color
269+
*/
270+
$stepper-step-invalid-selected-bg: $stepper-step-danger-bg !default;
271+
272+
/**
273+
* $name 240. Selected hover state background color
274+
* $type color
275+
*/
276+
$stepper-step-invalid-selected-hover-bg: $stepper-step-danger-hover-bg !default;

‎packages/devextreme-scss/scss/widgets/generic/stepper/_index.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@
4747
$stepper-step-invalid-text-color,
4848
$stepper-step-invalid-hover-text-color,
4949
$stepper-step-invalid-label-color,
50-
$stepper-step-selected-invalid-bg,
51-
$stepper-step-selected-invalid-hover-bg,
50+
$stepper-step-invalid-selected-bg,
51+
$stepper-step-invalid-selected-hover-bg,
5252
$stepper-step-disabled-text-color,
5353
$stepper-step-disabled-bg,
5454
$stepper-step-disabled-shadow,

0 commit comments

Comments
 (0)