fix(invalid): update default color

* fix alert for IE11
* fix badge for IE11

Author: 100stacks

docs/components/icon/_index.scss

@@ -28,6 +28,6 @@ hx-icon {
   }
 
   &.danger {
-    color: $red-900;
+    color: $red-status-500;
   }
 }

src/elements/hx-toast/_shadow.scss

@@ -69,7 +69,7 @@ button {
 
 :host([type="error"]) {
   #hxIconWrapper {
-    color: var(--hxIcon-color, $red-900);
+    color: var(--hxIcon-color, $red-status-500);
   }
 }
 

src/scss/components/alert/index.scss

@@ -1,34 +1,46 @@
 hx-alert {
+  background-color: $gray-400;
   background-color: var(--hxAlert-bgcolor, $gray-400);
+  color: $gray-1000;
   color: var(--hxAlert-color, $gray-1000);
   display: block;
   font-weight: 300;
   line-height: 1.25rem;
 
   &[type="info"] {
+    background-color: $blue-100;
     background-color: var(--hxAlert-info-bgcolor, $blue-100);
+    color: $gray-1000;
     color: var(--hxAlert-info-color, $gray-1000);
   }
 
   &[type="error"] {
-    background-color: var(--hxAlert-error-bgcolor, $red-900);
+    background-color: $red-status-500;
+    background-color: var(--hxAlert-error-bgcolor, $red-status-500);
+    color: $gray-0;
     color: var(--hxAlert-error-color, $gray-0);
   }
 
   &[type="success"] {
+    background-color: $green-500;
     background-color: var(--hxAlert-success-bgcolor, $green-500);
+    color: $gray-0;
     color: var(--hxAlert-success-color, $gray-0);
   }
 
   &[type="warning"] {
+    background-color: $yellow-500;
     background-color: var(--hxAlert-warning-bgcolor, $yellow-500);
+    color: $gray-1000;
     color: var(--hxAlert-warning-color, $gray-1000);
   }
 }
 
 /* DEPRECATED: Remove in v1.0.0 */
 .hxAlert {
+  background-color: $blue-100;
   background-color: var(--hxAlert-bgcolor, $blue-100);
+  color: $gray-1000;
   color: var(--hxAlert-color, $gray-1000);
   display: flex;
   font-weight: 300;
@@ -40,16 +52,21 @@ hx-alert {
   }
 
   &--error {
-    background-color: var(--hxAlert-error-bgcolor, $red-900);
+    background-color: $red-status-500;
+    background-color: var(--hxAlert-error-bgcolor, $red-status-500);
+    color: $gray-0;
     color: var(--hxAlert-error-color, $gray-0);
   }
 
   &--warning {
+    background-color: $yellow-500;
     background-color: var(--hxAlert-warning-bgcolor, $yellow-500);
   }
 
   &--success {
+    background-color: $green-500;
     background-color: var(--hxAlert-success-bgcolor, $green-500);
+    color: $gray-0;
     color: var(--hxAlert-success-color, $gray-0);
   }
 

src/scss/components/badge/index.scss

@@ -1,7 +1,9 @@
 .hxBadge {
   align-items: center;
-  background-color: var(--hxBadge-bgcolor, $red-900);
+  background-color: $red-status-500;
+  background-color: var(--hxBadge-bgcolor, $red-status-500);
   border-radius: 1em;
+  color: $gray-0;
   color: var(--hxBadge-color, $gray-0);
   display: inline-flex;
   height: 1.25em;

src/scss/components/form/_deprecated.scss

@@ -32,7 +32,7 @@
   }
 
   &[invalid] {
-    border: 2px solid $red-900;
+    border: 2px solid $red-status-500;
   }
 
   &[disabled] {

src/scss/components/selector-strip/_hxSelector.scss

@@ -79,8 +79,8 @@
       // invalid (unchecked)
       &[invalid] + span {
         background-color: $gray-0;
-        border: 2px solid $red-900;
-        color: $red-900;
+        border: 2px solid $red-status-500;
+        color: $red-status-500;
       }
 
       // invalid (checked)
@@ -90,7 +90,7 @@
 
       // invalid (focused)
       &[invalid]:focus + span {
-        box-shadow: 0 0 4px 0 $red-900;
+        box-shadow: 0 0 4px 0 $red-status-500;
       }
 
       //invalid (pressed)

src/scss/components/switch/mixins/_hxSwitchControl.scss

@@ -55,38 +55,38 @@
     box-shadow: $focus-glow-invalid;
 
     &::-ms-check {
-      border-color: $red-900;
+      border-color: $red-status-500;
     }
   } @else if $pseudo-state == hover {
     &::-ms-check {
       background-color: $red-100;
     }
   } @else {
     @if $checkBox-state == checked {
-      background-color: $red-900 !important;
-      border: 0.125rem solid $red-900;
+      background-color: $red-status-500 !important;
+      border: 0.125rem solid $red-status-500;
 
       &:after {
         color: $gray-0 !important;
       }
 
       &:before {
         background-color: $gray-0;
-        border: 0.125rem solid $red-900;
+        border: 0.125rem solid $red-status-500;
       }
     } @else {
       background-color: $gray-0;
-      border: 0.125rem solid $red-900 !important;
+      border: 0.125rem solid $red-status-500 !important;
 
       &::after {
-        color: $red-900 !important;
+        color: $red-status-500 !important;
       }
 
       &::before {
         background-color: $gray-0;
-        border: 0.125rem solid $red-900 !important;
+        border: 0.125rem solid $red-status-500 !important;
         content: "\0021";// error state exclamation point
-        color: $red-900;
+        color: $red-status-500;
         font-size: 1.063rem;
         text-align: center;
         line-height: 1.813rem;

src/scss/components/toast/_index.scss

@@ -40,7 +40,7 @@ hx-toast {
 
   &[type="error"] {
     &::after {
-      border-left-color: $red-900;
+      border-left-color: $red-status-500;
     }
   }