Create color variables.

src/styles/color-pallete.html

@@ -3,13 +3,15 @@
 <style>
    td {
       width: 20em;
+      padding: 0 2%;
    }
    .color-block {
       height: 50px;
+      border: 10px solid white;
    }
    .color-desc {
       height: 25px;
-      padding: 5% 10% 0 10%;
+      padding: 5% 0 0 0;
       text-align: center;
    }
 </style>
@@ -83,8 +85,16 @@
       <td class="color-desc">
          none: #84b819
       </td>
+      <td class="color-desc">
+         none: rgba(0,0,0,.4)
+      </td>
+      <td class="color-desc">
+         none: rgba(0,0,0,.3)
+      </td>
    </tr>
    <tr>
       <td class="color-block" style="background-color: #84b819;"></td>
+      <td class="color-block" style="background-color: rgba(0,0,0,.4);"></td>
+      <td class="color-block" style="background-color: rgba(0,0,0,.3);"></td>
    </tr>
 </table>

src/styles/components/_bar.scss

@@ -32,7 +32,7 @@
   line-height: 40px;
   text-align: center;
   z-index: 5;
-  @include box-shadow(0 2px 10px 0 rgba(0,0,0,.2));
+  @include box-shadow(0 2px 10px 0 $componentfg3);
   @include touch-callout(none);
   @include user-select(none);
   > .left {
@@ -65,7 +65,7 @@
       font-style: italic;
     }
     > span a {
-      color: #222;
+      color: $dgrey;
     }
   }
 }
@@ -80,7 +80,7 @@
     .btn {
       border-color: transparent;
       background: transparent;
-      color: rgba(0,0,0,.3);
+      color: $grey3;
       height: 42px;
       width: 42px;
       display: inline-block;
@@ -98,21 +98,21 @@
     .btn:hover {
       border-color: #ccc;
       background-color: none;
-      color: rgba(0,0,0,.4);
+      color: $grey4;
     }
     .btn.active {
       border-color: #ccc;
       background-color: none;
-      color: rgba(0,0,0,.4);
+      color: $grey4;
     }
     .btn.active.amutebtn {
-      background-color: #db4f39;
+      background-color: $red;
-      border-color: #db4f39;
+      border-color: $red;
       color: white;
     }
     .btn.active.aenablebtn {
-      background-color: #84b819;
+      background-color: $actioncolor1;
-      border-color: #84b819;
+      border-color: $actioncolor1;
       color: white;
     }
   }
@@ -123,7 +123,7 @@
     position: relative;
   }
   .badge {
-    background-color: #84b819;
+    background-color: $actioncolor1;
     font-size: .4em;
     position: absolute;
     right: 0;

src/styles/global/_variables.scss

@@ -18,22 +18,21 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-$background: #e5e5e5;
+$background: rgb(229, 229, 229);
-$componentbg: #f5f5f5;
+$componentbg: rgb(245, 245, 245);
-$componentfg1: #262626;
+$componentfg1: rgb(38, 38, 38);
 $componentfg2: rgba(0,0,0,.5);
-//rgba(0,0,0,.4)
+$componentfg3: rgba(0,0,0,.2); //#ccc
-//rgba(0,0,0,.3)
+$componentfg4: rgb(115, 115, 115);
-$componentfg3: rgba(0,0,0,.2);
-$componentfg4: #737373;
 $sidepanebg: white;
-$bordercolor: #ccc;
+$bordercolor: $componentfg3;
-$actioncolor1: rgb(132,184,25);
+$actioncolor1: rgb(132,184,25); //#84b819
 $actioncolor2: rgb(0,149,52);
 
-//#222
+$grey3: rgba(0,0,0,.3);
-//#db4f39
+$grey4: rgba(0,0,0,.4);
-//#84b819
+$dgrey: rgb(34,34,34);
+$red: rgb(219,79,57);
 
 $breakpoint-small: 480px;
 $breakpoint-medium: 700px;