Issue #616: Remove hardcoded colors

9 files changed, 92 insertions, 78 deletions

diff --git a/web-ui/app/scss/_colors.scss b/web-ui/app/scss/_colors.scss
index f4b7f21d..de5f76b3 100644
--- a/web-ui/app/scss/_colors.scss
+++ b/web-ui/app/scss/_colors.scss
@@ -1,6 +1,7 @@
 /* Pixelated Color Palette - don't change these! */
 $dark_slate_gray: #3E3A37;
 $light_gray: #C2C2C2;
+$lighter_blue: #91C2D1;
 $light_blue: #3DABC4;
 $dark_blue: #178CA6;
 $light_orange: #FF9C00;
@@ -24,9 +25,20 @@ $secondary_callout: darken($primary_highlight, 5);
 
 /* Grayscale */
 $contrast: #EEE;
+$white: #FFF;
+$dark_white: #FAFAFA;
+$lighter_gray: #DDD;
+$medium_light_grey: #999;
+$medium_grey: #777;
+$medium_dark_grey: #666;
+$dark_grey: #333;
+$black: #000;
 $top_pane: $contrast;
 $total_count_bg: #C0B9B9;
 
+$background_light_grey: #F5F5F5;
+$border_light_grey: #D9D9D9;
+
 /* Feedback to Users */
 $warning: #F7E8AF;
 $search-highlight: #FFEF29;
@@ -46,3 +58,5 @@ $recipients_font_color: #AAA;
 $attachment_text: #555;
 $attachment_icon: lighten($attachment_text, 30);
 $attachment_size: lighten($attachment_text, 30);
+$attachment_area_background: #F5F5F5;
+$attachment_area_border: #D9D9D9;
diff --git a/web-ui/app/scss/_compose.scss b/web-ui/app/scss/_compose.scss
index c60e83d1..32d11c3d 100644
--- a/web-ui/app/scss/_compose.scss
+++ b/web-ui/app/scss/_compose.scss
@@ -8,7 +8,7 @@
     padding: 5px;
     #compose-mails-trigger {
       background: $action_buttons;
-      color: #FFF;
+      color: $white;
       padding: 10px 30px;
       text-align: center;
       font-weight: 400;
@@ -61,7 +61,7 @@
     font-weight: bold;
   }
   label.showfloatlabel {
-    color: #64BCD0 !important;
+    color: $light_blue !important;
     top: -0.3rem;
     opacity: 1;
   }
@@ -76,13 +76,13 @@
   input#subject, #feedback-subject {
     font-size: 1.6875rem;
     line-height: 1.4;
-    border-top: 1px solid #DDD;
+    border-top: 1px solid $lighter_gray;
   }
   #feedback-subject {
-    color: #333;
+    color: $dark_grey;
   }
   textarea {
-    border-bottom: 2px solid #DDD;
+    border-bottom: 2px solid $lighter_gray;
     min-height: 400px;
     font-family: inherit;
     font-weight: normal;
@@ -96,7 +96,7 @@
     h4 {
       font-size: 0.9em;
       font-style: italic;
-      color: #777;
+      color: $medium_grey;
       margin: 2px 0;
       clear: both;
       cursor: pointer;
diff --git a/web-ui/app/scss/_mascot.scss b/web-ui/app/scss/_mascot.scss
index d27dec9a..5cfac90d 100644
--- a/web-ui/app/scss/_mascot.scss
+++ b/web-ui/app/scss/_mascot.scss
@@ -6,9 +6,9 @@
   left: 0;
   width: 100%;
   height: 100vh;
-  
+
   z-index: -100;
-  background: #e5e5e3;
+  background: $contrast;
   padding: 30px;
   vertical-align:middle;
   text-align:center;
@@ -26,7 +26,7 @@
   }
 
   .text{
-    color:#666;
+    color:$medium_dark_grey;
     margin-bottom: 40px;
   }
 }
@@ -42,7 +42,7 @@
   }
 
   .text{
-    color:#666;
+    color:$medium_dark_grey;
     margin-bottom: 40px;
   }
 
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 6f11fe95..a623366d 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -9,7 +9,7 @@
 
 @mixin tooltip($top: 8px, $left: 40px) {
   background: rgba(0, 0, 0, 0.7);
-  color: #FFF;
+  color: $white;
   position: absolute;
   z-index: 2;
   left: $left;
@@ -22,7 +22,7 @@
 
 @mixin tt-hint {
   .tt-hint {
-    color: #999
+    color: $medium_light_grey
   }
   .tt-dropdown-menu {
     width: 400px;
@@ -36,7 +36,7 @@
     font-size: 18px;
     line-height: 24px;
     &.tt-cursor {
-      background-color: #FFF;
+      background-color: $white;
     }
     p {
       margin: 0;
@@ -46,8 +46,8 @@
 
 // FORM MIXINS
 @mixin check-box {
-  background-color: #FFF;
-  border: 1px solid #CCC;
+  background-color: $white;
+  border: 1px solid $light_gray;
   padding: 7px;
   margin: 3px 0;
   cursor: pointer;
@@ -58,16 +58,16 @@
 
   &:focus {
     outline: none;
-    border-color: #666;
+    border-color: $medium_dark_grey;
   }
 
   &:active, &:checked:active {
   }
 
   &:checked {
-    background-color: #EEE;
-    border: 1px solid darken(#DDD, 10%);
-    color: #333;
+    background-color: $contrast;
+    border: 1px solid darken($lighter_gray, 10%);
+    color: $dark_grey;
   }
 
   &:checked:after {
@@ -84,7 +84,7 @@
   i.tags-label {
     vertical-align: bottom;
     font-size: medium;
-    color: #c2c2c2;
+    color: $light_gray;
   }
 
   ul.tags {
@@ -99,7 +99,7 @@
       @include border-radius(2px);
       &[data-tag="drafts"] {
         color: $attention;
-        background: #EEE;
+        background: $contrast;
       }
       &.tag:hover {
         text-decoration: line-through;
@@ -109,14 +109,14 @@
         opacity: 0.6;
         transition: background-color 150ms ease-out;
         background: transparent;
-        border: 1px solid #DDD;
+        border: 1px solid $lighter_gray;
         line-height: 0;
         padding: 1px 2px;
         margin-left: -5px;
         @include border-radius(2px);
         &:hover {
           opacity: 1;
-          background: #DDD;
+          background: $lighter_gray;
         }
         i {
           &:before {
@@ -221,7 +221,7 @@
 
       .recipient-value {
         &.selected {
-          border: 1px solid #666666;
+          border: 1px solid $medium_dark_grey;
         }
         &:before {
           font-family: FontAwesome;
@@ -255,8 +255,8 @@
         }
         margin: 3px;
         padding: 5px;
-        background-color: #F5F5F5;
-        border: 1px solid #D9D9D9;
+        background-color: $background_light_grey;
+        border: 1px solid $border_light_grey;
         border-radius: 2px;
       }
 
@@ -280,8 +280,8 @@
       }
     }
   input.recipients-input:focus {
-    background-color: #fafafa !important;
-    border-color: #999999;
+    background-color: $dark_white !important;
+    border-color: $medium_light_grey;
     outline: none;
     width: 270px;
   }
@@ -292,13 +292,13 @@
     position: absolute;
     right: 10px;
     padding-right: 15px;
-    padding-left: 15px; 
+    padding-left: 15px;
     font-family: 'FontAwesome';
     font-weight: bolder;
     font-size: larger;
     cursor: pointer;
   }
-  
+
   .collapse + input, .collapse + input + * {
     display:none;
   }
diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss
index 4a11ca76..7943d584 100644
--- a/web-ui/app/scss/_read.scss
+++ b/web-ui/app/scss/_read.scss
@@ -40,7 +40,7 @@
       }
       .headline-area {
         clear: both;
-        border-top: 1px solid #DDD;
+        border-top: 1px solid $lighter_gray;
       }
     }
     h3 {
@@ -72,15 +72,15 @@
   padding: 0 30px;
 
   .attachmentsArea {
-    border-top: 1px solid #DDD;
+    border-top: 1px solid $lighter_gray;
     padding: 10px 0 0;
 
     li {
         position: relative;
         display: block;
-        border: 1px solid #D9D9D9;
+        border: 1px solid $border_light_grey;
         border-radius: 2px;
-        background-color: #F5F5F5;
+        background-color: $background_light_grey;
         margin-bottom: 8px;
 
       a {
@@ -110,7 +110,7 @@
           float: right;
           padding-right: 5px;
           padding-top: 7px;
-          color: #999;
+          color: $medium_light_grey;
         }
       }
     }
@@ -124,7 +124,7 @@
     display: inline-block;
     display: inline;
     line-height: 2em;
-    border: 1px solid #DDD;
+    border: 1px solid $lighter_gray;
     &#reply-button-top {
       @include border-right-radius(0);
       padding: 0 20px;
@@ -145,8 +145,8 @@
     text-align: left;
     display: block;
     position: absolute;
-    background: #FFF;
-    border: 1px solid #DDD;
+    background: $white;
+    border: 1px solid $lighter_gray;
     right: 0;
     top: 40px;
     z-index: 10;
diff --git a/web-ui/app/scss/_reply.scss b/web-ui/app/scss/_reply.scss
index be9d5b7c..76689d16 100644
--- a/web-ui/app/scss/_reply.scss
+++ b/web-ui/app/scss/_reply.scss
@@ -13,7 +13,7 @@
   }
 
   #all-recipients {
-    color: #000;
+    color: $black;
   }
 
   #all-recipients:focus {
@@ -24,8 +24,8 @@
     text-align: center;
     font-weight: 100;
     font-size: 1.1em;
-    background: #FFF;
-    color: #999;
+    background: $white;
+    color: $medium_light_grey;
     padding: 25px;
     margin: 0;
     @include border-radius(0);
diff --git a/web-ui/app/scss/_security.scss b/web-ui/app/scss/_security.scss
index 0c2baa52..8e9a6b5d 100644
--- a/web-ui/app/scss/_security.scss
+++ b/web-ui/app/scss/_security.scss
@@ -6,7 +6,7 @@
     padding: 2px 5px;
     white-space: nowrap;
     background: $success;
-    color: #FFF;
+    color: $white;
     &:before {
       font-family: FontAwesome;
     }
diff --git a/web-ui/app/scss/main.scss b/web-ui/app/scss/main.scss
index ed9b90c4..7d081ad1 100644
--- a/web-ui/app/scss/main.scss
+++ b/web-ui/app/scss/main.scss
@@ -11,7 +11,7 @@ html {
 body {
     min-height:100%;
     overflow: hidden;
-    background: #FFF;
+    background: $white;
 }
 header#main {
   overflow: hidden;
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss
index a3fd2202..a5a6dca1 100644
--- a/web-ui/app/scss/styles.scss
+++ b/web-ui/app/scss/styles.scss
@@ -10,11 +10,11 @@
 
 
 #logo {
-  color: #FFF;
+  color: $white;
 }
 
 #logout {
-  color: #FFF;
+  color: $white;
 }
 
 .search-highlight {
@@ -31,7 +31,7 @@
     bottom: 0px;
     z-index: 1;
     padding: 10px 16px 10px 18px;
-    background-color: rgba(#3E3A37, 0.9);
+    background-color: rgba($dark_slate_gray, 0.9);
     min-width: 230px;
 
     &.extra-bottom-space{
@@ -61,7 +61,7 @@
 
     p {
       font-size: 1.2em;
-      color: #FF9C00;
+      color: $light_orange;
     }
   }
 }
@@ -75,7 +75,7 @@
   width: 0;
   position: absolute;
   pointer-events: none;
-  border-right-color: rgba(#3E3A37, 0.9);
+  border-right-color: rgba($dark_slate_gray, 0.9);
   margin-top: -20px;
 }
 
@@ -84,7 +84,7 @@
     width: 100%;
     height: 34px;
     margin: 0;
-    border-top: 1px solid #FFF;
+    border-top: 1px solid $white;
     border-bottom: 2px solid lighten($top_pane, 30%);
     background: $top_pane;
     clear: both;
@@ -105,7 +105,7 @@
         margin: 2px;
         padding: 4px 10px;
         background: lighten($contrast, 70%);
-        color: #333;
+        color: $dark_grey;
         text-transform: uppercase;
         font-weight: 400;
         font-size: 0.8em;
@@ -157,7 +157,7 @@
           margin-right: 2px;
         }
         a {
-          color: #333;
+          color: $dark_grey;
           display: block;
           height: 62px;
           margin-top: -8px;
@@ -220,17 +220,17 @@
       &.status-read {
         a {
           font-weight: normal;
-          color: #555;
+          color: $attachment_text;
         }
       }
       &:hover {
         background: darken($contrast, 5%);
       }
       &.selected {
-        background: #FFF;
+        background: $white;
         z-index: 3;
         a {
-          color: #333;
+          color: $dark_grey;
         }
       }
     }
@@ -239,7 +239,7 @@
 
 @mixin mail-count($bg_color) {
   background: $bg_color;
-  color: #FFF;
+  color: $white;
   padding: 2px 5px;
   font-size: 0.7em;
   margin-left: 5px;
@@ -271,7 +271,7 @@ section {
           a {
             transition: background-color 150ms ease-out;
             background: $top_pane;
-            color: #FFF;
+            color: $white;
             font-size: 1.5em;
             display: block;
             padding: 14px 20px;
@@ -312,7 +312,7 @@ section {
         position: absolute;
         padding: 0 10px;
         top: 15px;
-        color: #999;
+        color: $medium_light_grey;
       }
     }
   }
@@ -328,7 +328,7 @@ section {
           padding: 2px 10px;
           cursor: pointer;
           &:hover {
-            background: #CCC;
+            background: $light_gray;
             color: $navigation_background;
           }
           &.selected {
@@ -345,13 +345,13 @@ section {
           padding: 0px 5px 0;
           top: 1px;
           left: 0;
-          border: 1px solid #FFF;
+          border: 1px solid $white;
           border-bottom: 1px solid white;
           position: absolute;
           opacity: 0.95;
         }
         .total-count {
-          background: #999;
+          background: $medium_light_grey;
         }
         span.tag-label {
           padding-left: 2px;
@@ -359,7 +359,7 @@ section {
         li {
           padding: 5px 10px 5px 18px;
           position: relative;
-          @include searching(4px, 19px, #333, 0.7em);
+          @include searching(4px, 19px, $dark_grey, 0.7em);
 
           &:before {
             font-size: 1.5em;
@@ -462,7 +462,7 @@ section {
           background-color: $navigation_background;
           padding: 5px 10px;
           position: relative;
-          @include searching(4px, 19px, #333, 0.7em);
+          @include searching(4px, 19px, $dark_grey, 0.7em);
 
           &:hover {
             color: $navigation_background;
@@ -530,7 +530,7 @@ section {
 
   &#right-pane {
     padding: 0 10px 60px 0px;
-    background: #FFF;
+    background: $white;
     box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.12);
     z-index: 2;
     overflow-y: auto;
@@ -545,7 +545,7 @@ section {
   @include mail-count($secondary_callout);
 }
 .total-count {
-  @include mail-count(#999);
+  @include mail-count($medium_light_grey);
 }
 
 
@@ -579,7 +579,7 @@ section {
 #draft-save-status {
   float: right;
   padding: 0.4rem 1.1rem;
-  color: #91C2D1;
+  color: $lighter_blue;
 }
 
 button {
@@ -588,21 +588,21 @@ button {
     margin-left: 5px;
   }
   &#trash-button {
-    background: #FFF;
-    border: 1px solid #999;
-    color: #999;
+    background: $white;
+    border: 1px solid $medium_light_grey;
+    color: $medium_light_grey;
     float: right;
     margin-left: 5px;
     &:hover, &:focus {
-      background: #EEE;
+      background: $contrast;
     }
   }
   &.close-mail-button {
     background: transparent;
-    color: #999;
+    color: $medium_light_grey;
     float: right;
     &:hover {
-      color: darken(#999, 10%);
+      color: darken($medium_light_grey, 10%);
     }
   }
   &.close-mail-button {
@@ -611,7 +611,7 @@ button {
     top: 0;
     margin: 0;
     padding: 3px 6px 5px;
-    background: #DDD;
+    background: $lighter_gray;
     opacity: 0.7;
     @include border-radius(0);
     &:hover {
@@ -623,7 +623,7 @@ button {
   }
   &.no-style {
     background: transparent;
-    color: #999;
+    color: $medium_light_grey;
     padding: 0;
     margin: 0;
     i {
@@ -686,7 +686,7 @@ button {
           color: $navigation_background;
           }
         }
-      @include searching(6px, 26px, #666, 0.9em);
+      @include searching(6px, 26px, $medium_dark_grey, 0.9em);
       a {
         display: block;
         position: relative;
@@ -699,7 +699,7 @@ button {
           color: $navigation_background;
           @include btn-transition;
           &.logout{
-            color: #000000;
+            color: $black;
             background: $action_buttons;
           }
         }
@@ -713,18 +713,18 @@ button {
         padding: 1px 5px 0;
         top: 1px;
         left: 0;
-        border: 1px solid #FFF;
+        border: 1px solid $white;
         position: absolute;
         opacity: 0.95;
       }
       .total-count {
-        background: #999;
+        background: $medium_light_grey;
       }
     }
   }
   #custom-tags-shortcuts {
     li {
-      border-top: 1px solid #DDD;
+      border-top: 1px solid $lighter_gray;
     }
   }
   div.shortcut-label {