Counts use variables

dist/ratchet.css

@@ -734,12 +734,12 @@ input[type="button"] {
   font-weight: bold;
   line-height: 13px;
   color: #fff;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: #929292;
   border-radius: 100px;
 }
 
-.count-main {
-  background-color: #1eafe7;
+.count-primary {
+  background-color: #007aff;
 }
 
 .count-positive {
@@ -747,7 +747,7 @@ input[type="button"] {
 }
 
 .count-negative {
-  background-color: #e71e1e;
+  background-color: #dd524d;
 }
 
 [class*="button"] [class*="count"] {

docs/index.html

@@ -792,14 +792,14 @@
 
           <div class="component-example">
             <span class="count">1</span>
-            <span class="count-main">2</span>
+            <span class="count-primary">2</span>
             <span class="count-positive">3</span>
             <span class="count-negative">4</span>
           </div>
 
 <pre class="prettyprint">
 &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;
-&lt;span class=&quot;count-main&quot;&gt;2&lt;/span&gt;
+&lt;span class=&quot;count-primary&quot;&gt;2&lt;/span&gt;
 &lt;span class=&quot;count-positive&quot;&gt;3&lt;/span&gt;
 &lt;span class=&quot;count-negative&quot;&gt;4&lt;/span&gt;
 </pre>

lib/sass/counts.scss

@@ -9,7 +9,7 @@
   font-weight: bold;
   line-height: 13px;
   color: #fff;
-  background-color: rgba(0, 0, 0, .3);
+  background-color: $default-color;
   border-radius: 100px;
 }
 
@@ -18,18 +18,18 @@
 // --------------------------------------------------
 
 // Main count
-.count-main {
-  background-color: #1eafe7;
+.count-primary {
+  background-color: $primary-color;
 }
 
 // Positive count
 .count-positive {
-  background-color: #4cd964;
+  background-color: $positive-color;
 }
 
 // Negative count
 .count-negative {
-  background-color: #e71e1e;
+  background-color: $negative-color;
 }
 
 

test/components/index.html

@@ -346,7 +346,7 @@
 
   <!-- COUNTS ============================================================ -->
   <span class="count">1</span>
-  <span class="count-main">2</span>
+  <span class="count-primary">2</span>
   <span class="count-positive">3</span>
   <span class="count-negative">4</span>
   <span class="count">5</span>
@@ -365,7 +365,7 @@
     <li>Item2 <span class="chevron"></span></li>
     <li>Item3 <span class="chevron"></span></li>
     <li class="table-view-divider">With chevrons &amp; counts</li>
-    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="count-main">1</span></li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="count-primary">1</span></li>
     <li>Item2 <span class="chevron"></span><span class="count-negative">1</span></li>
     <li>Item3 <span class="chevron"></span><span class="count-positive">1</span></li>
     <li class="table-view-divider">With buttons</li>