Merge pull request #814 from lalithkarikelli/surf2153

feat(choice tile): new component specs

Author: 100stacks

docs/components/icon/index.html

@@ -64,7 +64,7 @@ <h2 id="status-icons">Status Icons</h2>
 
     <div class="example">
       <div>
-        <hx-icon type="info-circle" style="color: #296CDC" class="size-2x"></hx-icon>
+        <hx-icon type="information" style="color: #296CDC" class="size-2x"></hx-icon>
         <hx-icon type="ok" style="color: #008B38" class="size-2x"></hx-icon>
         <hx-icon type="warning" style="color: #ffc749" class="size-2x"></hx-icon>
         <hx-icon type="critical" style="color: #D6251F" class="size-2x"></hx-icon>
@@ -74,7 +74,7 @@ <h2 id="status-icons">Status Icons</h2>
 
       <footer>
         {% code 'html' %}
-          <hx-icon type="info-circle" style="color: #296CDC"></hx-icon>
+          <hx-icon type="information" style="color: #296CDC"></hx-icon>
           <hx-icon type="ok" style="color: #008B38"></hx-icon>
           <hx-icon type="warning" style="color: #ffc749"></hx-icon>
           <hx-icon type="critical" style="color: #D6251F"></hx-icon>

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;
+    }
   }
 }
 
@@ -26,25 +38,37 @@
 // ========== Invalid ==========
 @mixin hxChoiceTile--invalid($pseudo-state: null) {
   @if $pseudo-state == focus {
-    box-shadow: $focus-glow-invalid;
+    box-shadow: 0 0 4px rgba($red-status-500, 0.5);
   }
   @else if $pseudo-state == hover {
-    background-color: $red-100;
-    border-color: $red-900;
+    background-color: $red-status-100;
+    border-color: $red-status-500;
     color: $gray-900;
+
+    > header {
+      color: inherit;
+    }
   }
   @else {
-    border-color: $red-900;
+    border-color: $red-status-500;
     border-width: 2px;
-    color: $red-900;
+    color: $red-status-500;
+  }
+
+  .hx-tile-icon {
+    color: $red-status-500;
   }
 }
 
 // ========== 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;
+  }
 }