fix: pfe-health-index ie11 fix colors (#993)

Author: castastrophe

CHANGELOG-prerelease.md

@@ -1,8 +1,9 @@
 ## Prerelease 53 ( TBD )
 
-- []() fix: pfe-autocomplete prevent search-event from firing twice on option select
+- [743913e](https://github.com/patternfly/patternfly-elements/commit/743913e0620ee0ca6f0cdf95cc1ed2597b5fe6e3) fix: pfe-autocomplete prevent search-event from firing twice on option select
 - [f20b509](https://github.com/patternfly/patternfly-elements/commit/f20b5094b6eb02ed473b0e3dab2ea5280e56bda7) fix: pfe-autocomplete add composed flag to option-selected event (#988)
 - [0ffd92a](https://github.com/patternfly/patternfly-elements/commit/0ffd92a621d1082b118b84a07063bd39b9c8a904) fix: Move pfe-sass to a dev dependency (#983)
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-health-index color support in IE11 (#992)
 
 ## Prerelease 52 ( 2020-07-17 )
 

elements/pfe-health-index/src/pfe-health-index.scss

@@ -39,8 +39,8 @@ $colors: (
   @each $level in (a b c d e f) {
     &.#{$level} {
       @include pfe-print-local((
-        accent: #{map-get($colors, $level)},
-        accent--text: #{pfe-var(text--on-dark)}
+        accent: map-get($colors, $level),
+        accent--text: pfe-var(text--on-dark)
       ));
     }
   }
@@ -57,8 +57,18 @@ $colors: (
 
     &.active {
       background-color: pfe-local(accent);
+
+      @include browser-query(ie11) {
+        @each $level in (a b c d e f) {
+          &.#{$level} {
+            background-color: map-get($colors, $level);
+          }
+        }
+      }
+
     }
   }
+
   :host([size="mini"]) & {
     display: flex;
     width: pfe-var(ui--element--size);
@@ -70,7 +80,18 @@ $colors: (
     // Color applied to the background
     background-color: pfe-local(accent);
     color: pfe-local(accent--text);
+
+    @include browser-query(ie11) {
+      @each $level in (a b c d e f) {
+        &.#{$level} {
+          background-color: map-get($colors, $level);
+          color: pfe-fetch(text--on-dark);
+        }
+      }
+    }
+
   }
+
   :host([size="lg"]) & {
     background-color: pfe-var(surface--lightest);
     color: pfe-var(ui-disabled--text);
@@ -114,6 +135,16 @@ $colors: (
       background-color: pfe-local(accent);
       color: pfe-local(accent--text);
     }
+
+    @include browser-query(ie11) {
+      @each $level in (a b c d e f) {
+        &.#{$level} > .bottom,
+        &.active.#{$level} .grade {
+          background-color: map-get($colors, $level);
+          color: pfe-fetch(text--on-dark);
+        }
+      }
+    }
   }
   &-container {
     :host(:not([size="mini"])) & {