Address PR feedback

assets/styles/themes/_light.scss

@@ -39,7 +39,7 @@ $selected: rgba($primary, .5);
   // value can also be map of default, default-text, hover-text, hover-bg, active-text,  active-bg)
   @include color-variables((
     default:    $light,
-    muted:      $disabled,
+    muted:      $dark,
     link:       (
       default-text: $link,
       hover-text:   lighten($link, 30%),
@@ -283,10 +283,5 @@ $selected: rgba($primary, .5);
 
   --product-icon: #{$darker};
   --product-icon-active: #{$darkest};
-
-  // Make text muted slightly darker so it is readable
-  .text-muted {
-    color: $dark !important;
-  }
 }
 

components/form/RadioButton.vue

@@ -46,8 +46,9 @@ export default {
       return this.mode === _VIEW || this.disabled;
     },
 
-    isViewChecked() {
-      return this.mode === _VIEW && this.isChecked;
+    muteLabel() {
+      // Don't mute the label if the mode if view and the button is checked
+      return this.disabled && !(this.mode === _VIEW && this.isChecked);
     }
   },
 
@@ -103,7 +104,7 @@ export default {
     />
     <label
       v-if="label"
-      :class="[ !isViewChecked ? 'text-muted' : '', 'radio-label']"
+      :class="[ muteLabel ? 'text-muted' : '', 'radio-label']"
       v-html="label"
     >
       <slot name="label">{{ label }}</slot>