Skip to content

Commit df59d0c

Browse files
SisIvanovaSisIvanova
authored
refactor(themes): accessibility color fixes (#16426)
1 parent ae5d1e5 commit df59d0c

File tree

5 files changed

+58
-38
lines changed

5 files changed

+58
-38
lines changed

‎projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -353,12 +353,12 @@
353353
&:active {
354354
@extend %item-overlay;
355355

356-
color: var-get($theme, 'item-selected-text-color');
356+
color: var-get($theme, 'item-selected-hover-text-color');
357357
background: var-get($theme, 'item-selected-background');
358358
border-color: var-get($theme, 'item-selected-border-color');
359359

360360
igx-icon {
361-
color: var-get($theme, 'item-selected-icon-color');
361+
color: var-get($theme, 'item-selected-hover-icon-color');
362362
}
363363

364364
&::before {

‎projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -407,7 +407,11 @@
407407
border-color: var-get($flat-theme, 'focus-visible-border-color');
408408

409409
igx-icon {
410-
color: var-get($flat-theme, 'icon-color');
410+
@if $variant == 'material' {
411+
color: var-get($flat-theme, 'icon-color-hover');
412+
} @else {
413+
color: var-get($flat-theme, 'icon-color');
414+
}
411415
}
412416

413417
&:hover {
@@ -547,7 +551,16 @@
547551
&:active {
548552
background: var-get($outlined-theme, 'focus-background');
549553
color: var-get($outlined-theme, 'focus-foreground');
550-
border-color: var-get($outlined-theme, 'active-border-color');
554+
555+
@if $variant == 'material' {
556+
border-color: var-get($outlined-theme, 'focus-border-color');
557+
558+
igx-icon {
559+
color: var-get($outlined-theme, 'focus-foreground');
560+
}
561+
} @else {
562+
border-color: var-get($outlined-theme, 'active-border-color');
563+
}
551564

552565
@if $variant == 'indigo' {
553566
igx-icon {

‎projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -888,7 +888,7 @@
888888
@include css-vars((
889889
name: 'igx-grid-row',
890890
row-ghost-background: map.get($theme, 'row-ghost-background'),
891-
row-drag-color: map.get($theme, 'row-drago-color')
891+
row-drag-color: map.get($theme, 'row-drag-color')
892892
));
893893
}
894894
}
@@ -1000,7 +1000,11 @@
10001000
}
10011001

10021002
%igx-icon--error {
1003-
color: color($color: 'gray', $variant: 500);
1003+
@if $variant == 'fluent' and $theme-variant == 'light' or $variant == 'material' and $theme-variant == 'light' {
1004+
color: color($color: 'gray', $variant: 600);
1005+
} @else {
1006+
color: color($color: 'gray', $variant: 500);
1007+
}
10041008
}
10051009
}
10061010

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

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
'material': clamp(1px, rem(1px), rem(1px)),
3636
'fluent': clamp(1px, rem(1px), rem(1px)),
3737
'bootstrap': clamp(1px, rem(1px), rem(1px)),
38-
'indigo': clamp(2px, rem(2px), rem(2px))
38+
'indigo': clamp(1px, rem(1px), rem(1px))
3939
), $variant);
4040

4141
$separator-size: map.get((
@@ -99,18 +99,18 @@
9999
&:focus {
100100
outline: none;
101101

102-
%igx-stepper__step-title {
103-
color: var-get($theme, 'title-focus-color');
104-
}
105-
106-
%igx-stepper__step-subtitle {
107-
color: var-get($theme, 'subtitle-focus-color');
108-
}
109-
110102
%igx-stepper__step-header {
111103
background: var-get($theme, 'step-focus-background');
112104
color: var-get($theme, 'title-focus-color');
113105

106+
%igx-stepper__step-title {
107+
color: var-get($theme, 'title-focus-color');
108+
}
109+
110+
%igx-stepper__step-subtitle {
111+
color: var-get($theme, 'subtitle-focus-color');
112+
}
113+
114114
@if $variant == 'bootstrap' {
115115
box-shadow: inset 0 0 0 $outline-width var-get($theme, 'indicator-outline');
116116
}
@@ -239,13 +239,13 @@
239239
}
240240

241241
%igx-stepper__step-header--current {
242-
background: var-get($theme, 'current-step-background') !important;
242+
background: var-get($theme, 'current-step-background');
243243
color: var-get($theme, 'current-title-color');
244244

245245
%igx-stepper__step-indicator {
246-
color: var-get($theme, 'current-indicator-color') !important;
247-
background: var-get($theme, 'current-indicator-background') !important;
248-
box-shadow: 0 0 0 $outline-width var-get($theme, 'current-indicator-outline') !important;
246+
color: var-get($theme, 'current-indicator-color');
247+
background: var-get($theme, 'current-indicator-background');
248+
box-shadow: 0 0 0 $outline-width var-get($theme, 'current-indicator-outline');
249249
}
250250

251251
%igx-stepper__step-title {
@@ -263,7 +263,7 @@
263263
}
264264

265265
&:hover {
266-
background: var-get($theme, 'current-step-hover-background') !important;
266+
background: var-get($theme, 'current-step-hover-background');
267267

268268
%igx-stepper__step-title {
269269
color: var-get($theme, 'current-title-hover-color');
@@ -418,12 +418,26 @@
418418
}
419419

420420
%igx-stepper__step--completed {
421-
422-
%igx-stepper__step-header {
421+
%igx-stepper__step-header:not(%igx-stepper__step-header--current) {
423422
background: var-get($theme, 'complete-step-background');
424423

424+
%igx-stepper__step-indicator {
425+
color: var-get($theme, 'complete-indicator-color');
426+
background: var-get($theme, 'complete-indicator-background');
427+
box-shadow: 0 0 0 $outline-width var-get($theme, 'complete-indicator-outline');
428+
}
429+
430+
%igx-stepper__step-title {
431+
color: var-get($theme, 'complete-title-color');
432+
}
433+
434+
%igx-stepper__step-subtitle {
435+
color: var-get($theme, 'complete-subtitle-color');
436+
}
437+
425438
&:hover {
426439
background: var-get($theme, 'complete-step-hover-background');
440+
427441
%igx-stepper__step-title {
428442
color: var-get($theme, 'complete-title-hover-color');
429443
}
@@ -439,22 +453,8 @@
439453
}
440454
}
441455

442-
%igx-stepper__step-indicator {
443-
color: var-get($theme, 'complete-indicator-color');
444-
background: var-get($theme, 'complete-indicator-background');
445-
box-shadow: 0 0 0 $outline-width var-get($theme, 'complete-indicator-outline');
446-
}
447-
448-
%igx-stepper__step-title {
449-
color: var-get($theme, 'complete-title-color');
450-
}
451-
452-
%igx-stepper__step-subtitle {
453-
color: var-get($theme, 'complete-subtitle-color');
454-
}
455-
456456
&:focus {
457-
%igx-stepper__step-header {
457+
%igx-stepper__step-header:not(%igx-stepper__step-header--current) {
458458
background: var-get($theme, 'complete-step-focus-background');
459459

460460
%igx-stepper__step-title {

‎projects/igniteui-angular/core/src/core/styles/components/tabs/_tabs-theme.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,12 @@
6363
flex: 0 0 auto;
6464
z-index: 1;
6565

66+
@if $variant == 'material' or $variant == 'bootstrap' {
67+
background: var-get($theme, 'item-background');
68+
}
69+
6670
@if $bootstrap-theme {
6771
position: relative;
68-
background: var-get($theme, 'item-background');
6972

7073
&::after {
7174
content: '';

0 commit comments

Comments
 (0)