Skip to content

Commit fc6ec35

Browse files
didimmovadidimmova
authored
feat(stepper): improve stepper theme (#15687)
1 parent 32a5f37 commit fc6ec35

File tree

1 file changed

+190
-22
lines changed

1 file changed

+190
-22
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss‎

Lines changed: 190 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -186,50 +186,222 @@
186186
}
187187

188188
$theme: digest-schema($stepper-schema);
189-
$meta: map.get($theme, '_meta');
190189

191-
@if not($indicator-background) and $step-background {
192-
$indicator-background: text-contrast($step-background);
190+
//default step
191+
@if not($step-hover-background) and $step-background {
192+
$step-hover-background: hsl(from var(--step-background) h s calc(l * 0.8));
193193
}
194194

195-
@if not($indicator-color) and $indicator-background {
196-
$indicator-color: text-contrast($indicator-background);
195+
@if not($step-focus-background) and $step-background {
196+
$step-focus-background: hsl(from var(--step-background) h s calc(l * 0.9));
197197
}
198198

199-
@if not($complete-indicator-color) and $complete-indicator-background {
200-
$complete-indicator-color: text-contrast($complete-indicator-background);
199+
@if not($indicator-background) and $step-background {
200+
$indicator-background: hsla(from adaptive-contrast(var(--step-background)) h s l / .6);
201201
}
202202

203-
@if not($invalid-indicator-color) and $invalid-indicator-background {
204-
$invalid-indicator-color: text-contrast($invalid-indicator-background);
203+
@if not($indicator-outline) and $indicator-background {
204+
$indicator-outline: var(--indicator-background);
205205
}
206206

207-
@if not($current-indicator-color) and $current-indicator-background {
208-
$current-indicator-color: text-contrast($current-indicator-background);
207+
@if not($indicator-color) and $indicator-background {
208+
$indicator-color: hsla(from adaptive-contrast(var(--indicator-background)) h s l / 1);
209209
}
210210

211211
@if not($title-color) and $step-background {
212-
$title-color: text-contrast($step-background);
212+
$title-color: adaptive-contrast(var(--step-background));
213213
}
214214

215215
@if not($subtitle-color) and $step-background {
216-
$subtitle-color: text-contrast($step-background);
216+
$subtitle-color: adaptive-contrast(var(--step-background));
217217
}
218218

219219
@if not($title-hover-color) and $step-hover-background {
220-
$title-hover-color: text-contrast($step-hover-background);
220+
$title-hover-color: adaptive-contrast(var(--step-hover-background));
221221
}
222222

223223
@if not($subtitle-hover-color) and $step-hover-background {
224-
$subtitle-hover-color: text-contrast($step-hover-background);
224+
$subtitle-hover-color: adaptive-contrast(var(--step-hover-background));
225225
}
226226

227227
@if not($title-focus-color) and $step-focus-background {
228-
$title-focus-color: text-contrast($step-focus-background);
228+
$title-focus-color: adaptive-contrast(var(--step-focus-background));
229229
}
230230

231231
@if not($subtitle-focus-color) and $step-focus-background {
232-
$subtitle-focus-color: text-contrast($step-focus-background);
232+
$subtitle-focus-color: adaptive-contrast(var(--step-focus-background));
233+
}
234+
235+
//current step
236+
@if not($current-step-background) and $step-background {
237+
$current-step-background: var(--step-background);
238+
}
239+
240+
@if not($current-step-hover-background) and $current-step-background {
241+
$current-step-hover-background: hsl(from var(--current-step-background) h s calc(l * 0.8));
242+
}
243+
244+
@if not($current-step-focus-background) and $current-step-background {
245+
$current-step-focus-background: hsl(from var(--current-step-background) h s calc(l * 0.9));
246+
}
247+
248+
@if not($current-indicator-background) and $current-step-background {
249+
$current-indicator-background: hsl(from var(--current-step-background) h s calc(l * 0.6));
250+
}
251+
252+
@if not($current-indicator-outline) and $current-indicator-background {
253+
$current-indicator-outline: var(--current-indicator-background);
254+
}
255+
256+
@if not($current-indicator-color) and $current-indicator-background {
257+
$current-indicator-color: adaptive-contrast(var(--current-indicator-background));
258+
}
259+
260+
@if not($current-title-color) and $current-step-background {
261+
$current-title-color: adaptive-contrast(var(--current-step-background));
262+
}
263+
264+
@if not($current-subtitle-color) and $current-step-background {
265+
$current-subtitle-color: adaptive-contrast(var(--current-step-background));
266+
}
267+
268+
@if not($current-title-hover-color) and $current-step-hover-background {
269+
$current-title-hover-color: adaptive-contrast(var(--current-step-hover-background));
270+
}
271+
272+
@if not($current-subtitle-hover-color) and $current-step-hover-background {
273+
$current-subtitle-hover-color: adaptive-contrast(var(--current-step-hover-background));
274+
}
275+
276+
@if not($current-title-focus-color) and $current-step-focus-background {
277+
$current-title-focus-color: adaptive-contrast(var(--current-step-focus-background));
278+
}
279+
280+
@if not($current-subtitle-focus-color) and $current-step-focus-background {
281+
$current-subtitle-focus-color: adaptive-contrast(var(--current-step-focus-background));
282+
}
283+
284+
//invalid step
285+
@if not($invalid-step-background) and $step-background {
286+
$invalid-step-background: var(--step-background);
287+
}
288+
289+
@if not($invalid-step-hover-background) and $invalid-step-background {
290+
$invalid-step-hover-background: hsl(from var(--invalid-step-background) h s calc(l * 0.8));
291+
}
292+
293+
@if not($invalid-step-focus-background) and $invalid-step-background {
294+
$invalid-step-focus-background: hsl(from var(--invalid-step-background) h s calc(l * 0.9));
295+
}
296+
297+
@if not($invalid-indicator-background) and not($step-background) and $invalid-step-background {
298+
$invalid-indicator-background: adaptive-contrast(var(--invalid-step-background));
299+
}
300+
301+
@if not($invalid-indicator-outline) and $invalid-indicator-background {
302+
$invalid-indicator-outline: var(--invalid-indicator-background);
303+
}
304+
305+
@if not($invalid-indicator-color) and not($step-background) and $invalid-indicator-background {
306+
$invalid-indicator-color: adaptive-contrast(var(--invalid-indicator-background));
307+
}
308+
309+
@if not($invalid-title-color) and $invalid-indicator-background {
310+
$invalid-title-color: var(--invalid-indicator-background);
311+
}
312+
313+
@if not($invalid-subtitle-color) and $invalid-indicator-background {
314+
$invalid-subtitle-color: var(--invalid-indicator-background);
315+
}
316+
317+
@if not($invalid-title-hover-color) and $invalid-indicator-background {
318+
$invalid-title-hover-color: var(--invalid-indicator-background);
319+
}
320+
321+
@if not($invalid-subtitle-hover-color) and $invalid-indicator-background {
322+
$invalid-subtitle-hover-color: var(--invalid-indicator-background);
323+
}
324+
325+
@if not($invalid-title-focus-color) and $invalid-indicator-background {
326+
$invalid-title-focus-color: var(--invalid-indicator-background);
327+
}
328+
329+
@if not($invalid-subtitle-focus-color) and $invalid-indicator-background {
330+
$invalid-subtitle-focus-color: var(--invalid-indicator-background);
331+
}
332+
333+
//completed step
334+
@if not($complete-step-background) and $step-background {
335+
$complete-step-background: var(--step-background);
336+
}
337+
338+
@if not($complete-step-hover-background) and $complete-step-background {
339+
$complete-step-hover-background: hsl(from var(--complete-step-background) h s calc(l * 0.8));
340+
}
341+
342+
@if not($complete-step-focus-background) and $complete-step-background {
343+
$complete-step-focus-background: hsl(from var(--complete-step-background) h s calc(l * 0.9));
344+
}
345+
346+
@if not($complete-indicator-background) and $complete-step-background {
347+
$complete-indicator-background: adaptive-contrast(var(--complete-step-background));
348+
}
349+
350+
@if not($complete-indicator-color) and $complete-indicator-background {
351+
$complete-indicator-color: adaptive-contrast(var(--complete-indicator-background));
352+
}
353+
354+
@if not($complete-title-color) and $complete-step-background {
355+
$complete-title-color: adaptive-contrast(var(--complete-step-background));
356+
}
357+
358+
@if not($complete-subtitle-color) and $complete-step-background {
359+
$complete-subtitle-color: adaptive-contrast(var(--complete-step-background));
360+
}
361+
362+
@if not($complete-title-hover-color) and $complete-step-hover-background {
363+
$complete-title-hover-color: adaptive-contrast(var(--complete-step-hover-background));
364+
}
365+
366+
@if not($complete-subtitle-hover-color) and $complete-step-hover-background {
367+
$complete-subtitle-hover-color: adaptive-contrast(var(--complete-step-hover-background));
368+
}
369+
370+
@if not($complete-title-focus-color) and $complete-step-focus-background {
371+
$complete-title-focus-color: adaptive-contrast(var(--complete-step-focus-background));
372+
}
373+
374+
@if not($complete-subtitle-focus-color) and $complete-step-focus-background {
375+
$complete-subtitle-focus-color: adaptive-contrast(var(--complete-step-focus-background));
376+
}
377+
378+
//disabled step
379+
@if not($disabled-indicator-background) and $step-background {
380+
$disabled-indicator-background: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.5));
381+
}
382+
383+
@if not($disabled-indicator-color) and $disabled-indicator-background {
384+
$disabled-indicator-color: hsla(from (adaptive-contrast(var(--disabled-indicator-background)) h s l / 0.5));
385+
}
386+
387+
@if not($disabled-indicator-outline) and $disabled-indicator-background {
388+
$disabled-indicator-outline: var(--disabled-indicator-background);
389+
}
390+
391+
@if not($disabled-title-color) and $step-background {
392+
$disabled-title-color: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.3));
393+
}
394+
395+
@if not($disabled-subtitle-color) and $step-background {
396+
$disabled-subtitle-color: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.3));
397+
}
398+
399+
@if not($step-separator-color) and $step-background {
400+
$step-separator-color: var(--step-background);
401+
}
402+
403+
@if not($step-separator-color) and $indicator-background {
404+
$step-separator-color: var(--indicator-background);
233405
}
234406

235407
@if not($border-radius-indicator) {
@@ -318,10 +490,6 @@
318490
// Border-radius
319491
border-radius-indicator: $border-radius-indicator,
320492
border-radius-step-header: $border-radius-step-header,
321-
theme: map.get($schema, '_meta', 'theme'),
322-
_meta: map.merge(if($meta, $meta, ()), (
323-
variant: map.get($schema, '_meta', 'theme')
324-
)),
325493
));
326494
}
327495

@@ -331,7 +499,7 @@
331499
@mixin stepper($theme) {
332500
@include css-vars($theme);
333501

334-
$variant: map.get($theme, '_meta', 'variant');
502+
$variant: map.get($theme, '_meta', 'theme');
335503

336504
$indicator-size: map.get((
337505
'material': rem(24px),

0 commit comments

Comments
 (0)