chore(radio): provide feedback

Author: 100stacks

src/scss/components/radio/_index.scss

@@ -202,7 +202,7 @@ hx-radio-control > input[type="radio"]:disabled {
 
     > hx-radio {
       @include hxRadioFacade(disabled);
-      
+
       &,
       &:hover {
         @include hxRadioFacade(disabled, hover);

src/scss/components/radio/mixins/_hxRadioFacade.scss

@@ -20,25 +20,27 @@
     box-shadow: $focus-glow-invalid;
   }
   @else if $pseudo-state == hover {
-    background-color: $red-status-100;
-    background-color: var(--hxRadio-invalid-radio-facade-hover-bgcolor, $red-status-100);
+    background-color: $rax-color-status-critical-100;
+    background-color: var(--hxRadio-invalid-radio-facade-hover-bgcolor, $rax-color-status-critical-100);
     border: 1px solid currentColor;
-    color: $red-status-500;
-    color: var(--hxRadio-invalid-radio-facade-hover-color, $red-status-500);
+    color: $rax-color-status-critical-500;
+    color: var(--hxRadio-invalid-radio-facade-hover-color, $rax-color-status-critical-500);
   }
   @else {
-    border: $rax-component-radio-base-border-width solid $red-status-500;
-    color: $red-status-500;
+    border: $rax-component-radio-base-border-width solid currentColor;
     color: $rax-component-radio-invalid-border-color;
+    color: var(--hxRadio-invalid-radio-facade-color, $rax-component-radio-invalid-border-color);
   }
 }
 
 // ========== DISABLED ==========
 @mixin __radioFacade--disabled($pseudo-state: null) {
   border: $rax-component-radio-base-border-width solid currentColor;
-  color: $gray-500;
   color: $rax-component-radio-disabled-border-color;
+  color: var(--hxRadio-disabled-radio-facade-color, $rax-component-radio-disabled-border-color);
   cursor: not-allowed;
+
+  // v2.0 specs - hover state removed
 }
 
 @mixin hxRadioFacade($state: null, $pseudo-state: null) {