updating styles

Author: kylebuch8

elements/rh-health-index/rh-health-index.js

@@ -35,24 +35,26 @@ class RhHealthIndex extends RHElement {
 
 .box-container {
   display: flex;
-  border: 1px solid #ececec;
-  margin-left: 8px; }
+  border: 1px solid var(--rh-theme--color--surface--border, #dfdfdf);
+  margin-left: var(--rh-theme--container-spacer--xs, 0.5rem); }
   .box-container .box {
-    background: white;
+    background: #fff;
     width: 10px;
     height: 20px;
-    border-right: 1px solid #ececec; }
-    .box-container .box.a.active {
+    border-right: 1px solid var(--rh-theme--color--surface--border, #dfdfdf); }
+    .box-container .box:last-child {
+      border-right: 0; }
+    .box-container .box.active.a {
       background-color: #3f9c35; }
-    .box-container .box.b.active {
+    .box-container .box.active.b {
       background-color: #92d400; }
-    .box-container .box.c.active {
+    .box-container .box.active.c {
       background-color: #efaa00; }
-    .box-container .box.d.active {
+    .box-container .box.active.d {
       background-color: #ec7a08; }
-    .box-container .box.e.active {
+    .box-container .box.active.e {
       background-color: #cc0000; }
-    .box-container .box.f.active {
+    .box-container .box.active.f {
       background-color: #a30000; }
 </style>
 <div id="healthIndex"></div>

elements/rh-health-index/rh-health-index.umd.js

@@ -1,4 +1,25 @@
 @import "../../rh-sass/rh-sass";
+
+/// ===========================================================================
+/// Component Specific SASS Vars
+/// ===========================================================================
+
+$rh-health--width: 10px;
+$rh-health--height: $rh-health--width * 2;
+
+$rh-health--color-bg: #fff;
+
+$rh-health--color-a: #3f9c35;
+$rh-health--color-b: #92d400;
+$rh-health--color-c: #efaa00;
+$rh-health--color-d: #ec7a08;
+$rh-health--color-e: #cc0000;
+$rh-health--color-f: #a30000;
+
+/// ===========================================================================
+/// WHATEVER
+/// ===========================================================================
+
 :host {
   display: inline-flex;
   align-items: center;
@@ -10,37 +31,43 @@
 
 .box-container {
   display: flex;
-  border: 1px solid #ececec;
-  margin-left: 8px;
+  border: 1px solid #{rh-color(surface--border)};
+  margin-left: #{rh-var(container-spacer--xs)};
 
   .box {
-    background: white;
-    width: 10px;
-    height: 20px;
-    border-right: 1px solid #ececec;
+    background: $rh-health--color-bg;
+    width: $rh-health--width;
+    height: $rh-health--height;
+    border-right: 1px solid #{rh-color(surface--border)};
 
-    &.a.active {
-      background-color: #3f9c35;
+    &:last-child {
+      border-right: 0;
     }
 
-    &.b.active {
-      background-color: #92d400;
-    }
+    &.active {
+      &.a {
+        background-color: $rh-health--color-a;
+      }
 
-    &.c.active {
-      background-color: #efaa00;
-    }
+      &.b {
+        background-color: $rh-health--color-b;
+      }
 
-    &.d.active {
-      background-color: #ec7a08;
-    }
+      &.c {
+        background-color: $rh-health--color-c;
+      }
 
-    &.e.active {
-      background-color: #cc0000;
-    }
+      &.d {
+        background-color: $rh-health--color-d;
+      }
+
+      &.e {
+        background-color: $rh-health--color-e;
+      }
 
-    &.f.active {
-      background-color: #a30000;
+      &.f {
+        background-color: $rh-health--color-f;
+      }
     }
   }
 }