refactor(hx-choicetile): update component specs

Author: lalithkarikelli

src/scss/components/choice-tile/_index.scss

@@ -18,10 +18,14 @@ hx-tile {
     font-size: 1rem;
     font-weight: 700;
     margin-bottom: 0;
+    color: $gray-700;
+    line-height: 24px;
+    text-align: center;
   }
 
   > p {
     font-size: 0.75rem;
+    color: $gray-700;
   }
 
   &.hxSm {
@@ -115,7 +119,7 @@ label.hxChoice > input + hx-tile {
   cursor: pointer;
 
   .hx-tile-icon {
-    color: $gray-700;
+    color: $gray-400;
   }
 }
 
@@ -130,15 +134,23 @@ label.hxChoice > input:focus + hx-tile {
 
 // ========== CHECKED ==========
 label.hxChoice > input:checked + hx-tile {
-  border-color: $cyan-900;
-  color: $cyan-900;
+  border: 1px solid $purple-300;
+  color: $gray-0;
+
+  > hx-icon {
+    color: $purple-300;
+  }
 
   .hx-tile-icon {
-    color: $cyan-900;
+    color: $purple-300;
+  }
+
+  > header {
+    color: $purple-300;
   }
 
   > p {
-    color: $gray-900;
+    color: $gray-950;
   }
 
   // DEPRECATED: remove in v1.0.0
@@ -163,6 +175,14 @@ label.hxChoice > input[invalid] + hx-tile {
   .hx-tile-icon {
     color: inherit;
   }
+
+  > header {
+    color: inherit;
+  }
+
+  hx-icon[type="checkmark"] {
+    color: inherit;
+  }
 }
 
 label.hxChoice > input[invalid] + hx-tile:hover {
@@ -179,17 +199,21 @@ label.hxChoice > input[disabled] + hx-tile:hover {
   @include hxChoiceTile--disabled;
 
   > p {
-    color: inherit;
+    color: $gray-500;
   }
 
   // DEPRECATED: remove in v1.0.0
   hx-tile-description {
-    color: inherit;
+    color: $gray-500;
   }
 
-  hx-icon {
+  > header {
     color: $gray-500;
   }
+
+  hx-icon {
+    color: $gray-400;
+  }
 }
 
 // DEPRECATED: remove in v1.0.0

src/scss/components/choice-tile/mixins/_hxChoiceTile.scss

@@ -5,11 +5,23 @@
 // ========== Default ==========
 @mixin hxChoiceTile($pseudo-state: null) {
   @if $pseudo-state == focus {
-    box-shadow: $focus-glow;
+    box-shadow: 0 0 4px rgba($purple-700, 0.5);
   }
   @else if $pseudo-state == hover {
-    background-color: $cyan-50;
-    border-color: $cyan-500;
+    background-color: $gray-0;
+    border: 1px solid $purple-700;
+
+    > header {
+      color: $purple-700;
+    }
+
+    > p {
+      color: $gray-950;
+    }
+
+    .hx-tile-icon {
+      color: $purple-700;
+    }
   }
 }
 
@@ -32,19 +44,31 @@
     background-color: $red-100;
     border-color: $red-900;
     color: $gray-900;
+
+    > header {
+      color: inherit;
+    }
   }
   @else {
     border-color: $red-900;
     border-width: 2px;
     color: $red-900;
   }
+
+  .hx-tile-icon {
+    color: $red-900;
+  }
 }
 
 // ========== Disabled ==========
 @mixin hxChoiceTile--disabled {
-  background-color: $gray-25;
-  border-color: $gray-300;
+  background-color: $gray-0;
+  border-color: $gray-400;
   border-width: 1px;
-  color: $gray-700;
+  color: $gray-500;
   cursor: not-allowed;
+
+  > header {
+    color: inherit;
+  }
 }