Skip to content

Commit e47814e

Browse files
SisIvanovaSisIvanova
authored
refactor(themes): accessibility color fixes (#16497)
1 parent 0e62abe commit e47814e

File tree

7 files changed

+63
-43
lines changed

7 files changed

+63
-43
lines changed

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
"@types/source-map": "0.5.2",
7676
"express": "^5.1.0",
7777
"fflate": "^0.8.1",
78-
"igniteui-theming": "^23.0.0",
78+
"igniteui-theming": "^23.2.0",
7979
"igniteui-trial-watermark": "^3.1.0",
8080
"lodash-es": "^4.17.21",
8181
"rxjs": "^7.8.2",

‎projects/igniteui-angular/src/lib/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/src/lib/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/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -894,7 +894,7 @@
894894
@include css-vars((
895895
name: 'igx-grid-row',
896896
row-ghost-background: map.get($theme, 'row-ghost-background'),
897-
row-drag-color: map.get($theme, 'row-drago-color')
897+
row-drag-color: map.get($theme, 'row-drag-color')
898898
));
899899
}
900900
}
@@ -1006,7 +1006,11 @@
10061006
}
10071007

10081008
%igx-icon--error {
1009-
color: color($color: 'gray', $variant: 500);
1009+
@if $variant == 'fluent' and $theme-variant == 'light' or $variant == 'material' and $theme-variant == 'light' {
1010+
color: color($color: 'gray', $variant: 600);
1011+
} @else {
1012+
color: color($color: 'gray', $variant: 500);
1013+
}
10101014
}
10111015
}
10121016

‎projects/igniteui-angular/src/lib/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/src/lib/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)