Refactor colors for better themeability

app/assets/stylesheets/bootstrap-variables.scss

@@ -187,9 +187,9 @@ $btn-success-color: #333 !default;
 // $input-bg-disabled:              $gray-lighter
 
 //** Text color for `<input>`s
-// $input-color:                    $gray
+$input-color: $text-dark-grey !default;
 //** `<input>` border color
-// $input-border:                   #ccc
+$input-border: $border-grey !default;
 
 // TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
 //** Default `.form-control` border radius
@@ -202,6 +202,7 @@ $btn-success-color: #333 !default;
 
 //** Border color for inputs on focus
 // $input-border-focus:             #66afe9
+$input-border-focus: $input-border !default;
 
 //** Placeholder text color
 // $input-color-placeholder:        #999
@@ -668,7 +669,7 @@ $navbar-collapse-max-height: 480px;
 //
 //##
 //** Background color on `.list-group-item`
-$list-group-bg: $white;
+$list-group-bg: $white !default;
 //** `.list-group-item` border color
 $list-group-border: transparent;
 //** List group border radius

app/assets/stylesheets/color-variables.scss

@@ -3,31 +3,32 @@ $black: #000;
 
 $text-grey: #999;
 $text-dark-grey: #666;
-$text: #333;
+$text-color-pale: $text-grey !default;
+$text-color-active: $black !default;
 
-$background-white: $white;
-$background-grey: #eee;
-$background-blue: #e7f2f7;
+$background-grey: #eee !default;
+$background-blue: #e7f2f7 !default;
 
 $grey: #2b2b2b;
 $medium-gray: #ccc;
 $light-grey: #ddd;
 
-$border-grey: $light-grey;
-$border-medium-grey: $medium-gray;
-$border-dark-grey: $text-grey;
-$border-medium-grey: #ccc;
+$border-grey: $light-grey !default;
+$border-medium-grey: $medium-gray !default;
+$border-dark-grey: $text-grey !default;
 
 $link-grey: #777;
-$link-disabled-grey: $text-grey;
 
-$green: #8ede3d;
+$icon-color: $black !default;
+
+$green: #8ede3d !default;
 $light-green: lighten($green, 20%);
-$red: #a80000;
-$blue: #3f8fba;
+$red: #a80000 !default;
+$blue: #3f8fba !default;
 
-$main-background: #f0f0f0 !default;
-$sidebars-background: $background-white !default;
-$left-navbar-drawer-background: darken($sidebars-background, 6%);
+$main-background: darken($white, 6%) !default;
+$framed-background: $white !default;
+$left-navbar-drawer-background: darken($white, 6%) !default;
+$hovercard-background: $white !default;
 
 $card-shadow: 0 1px 2px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12) !default;

app/assets/stylesheets/color_themes/_color_theme_override_origwhite.scss

@@ -17,10 +17,4 @@ body {
   .left-navbar {
     border-right: 1px solid $border-grey;
   }
-
-  .right-sidebar-fixed-background,
-  .right-sidebar-fixed-background,
-  .rightbar {
-    border-left: 1px solid $sidebars-background;
-  }
 }

app/assets/stylesheets/color_themes/original_white/_style.scss

@@ -3,7 +3,6 @@ $background: #fff;
 
 // Variables
 $main-background: $background;
-$sidebars-background: $background;
 $card-shadow: none;
 
 @import 'color_themes/color_theme_override_origwhite';

app/assets/stylesheets/contacts.scss

@@ -38,13 +38,13 @@
         margin-right: 25px;
       }
       #chat_privilege_toggle > .enabled {
-        color: #000;
+        color: $text-color-active;
       }
       .contacts-header-icon {
         font-size: 24.5px;
         line-height: 40px;
-        color: lighten($black,75%);
-        &:hover { color: $black; }
+        color: $text-color-pale;
+        &:hover { color: $text-color; }
       }
       #suggest_member.btn { margin-top: 8px; }
     }
@@ -56,14 +56,14 @@
         font-size: 20px;
         line-height: 50px;
         margin: 0 10px;
-        color: lighten($black,75%);
-        &:hover { color: $black; }
+        color: $text-color-pale;
+        &:hover { color: $text-color; }
       }
       &.in_aspect {
         border-left: 3px solid $brand-success;
         background-color: lighten($brand-success,35%);
       }
-      &:not(.in_aspect) { border-left: 3px solid $white; }
+      &:not(.in_aspect) { border-left: 3px solid $framed-background; }
     }
 
     .no_contacts {

app/assets/stylesheets/conversations.scss

@@ -17,7 +17,7 @@
   }
 
   .stream-element {
-    background-color: $white;
+    background-color: $framed-background;
     padding: 10px;
 
     .avatar {
@@ -30,7 +30,7 @@
 
   .stream-element.message,
   .stream-element.new-message {
-    border: 1px solid $light-grey;
+    border: 1px solid $border-grey;
     box-shadow: $card-shadow;
     margin-bottom: 20px;
 
@@ -83,7 +83,7 @@
       }
     }
 
-    &.unread { background-color: darken($background-white, 5%); }
+    &.unread { background-color: $background-grey; }
     &.selected { background-color: $blue; }
 
     .last_author, .last_message {

app/assets/stylesheets/forms.scss

@@ -13,9 +13,7 @@ textarea {
   &:active:focus,
   &:invalid:focus,
   &:invalid:required:focus {
-    border-color: $border-grey;
     box-shadow: none;
-    color: $text-dark-grey;
   }
 }
 // scss-lint:enable QualifyingElement
@@ -29,7 +27,6 @@ textarea {
   margin: 20px auto;
 
   fieldset {
-    background-color: $white;
     margin-bottom: 1em;
     position: relative; // To correctly place the entypo icon
 

app/assets/stylesheets/header.scss

@@ -106,7 +106,7 @@
       }
       .view_all {
         background-color: $link-color;
-        border-top: 3px solid $white;
+        border-top: 3px solid $dropdown-bg;
         text-align: center;
         a {
           color: $white;

app/assets/stylesheets/help.scss

@@ -98,9 +98,9 @@ ul#help_nav {
         line-height: 70px;
 
         [class^="entypo-"], [class*="entypo-"] {
-          color: #bfbfbf;
+          color: $text-color-pale;
 
-          &.entypo-chat{ color: #000000; }
+          &.entypo-chat { color: $text-color-active; }
         }
       }
     }

app/assets/stylesheets/home.scss

@@ -33,8 +33,8 @@
   }
 
   .landing-info-card {
-    background-color: $white;
-    border: 1px solid $light-grey;
+    background-color: $framed-background;
+    border: 1px solid $border-grey;
     box-shadow: $card-shadow;
     margin-bottom: 25px;
     margin-top: 25px;

app/assets/stylesheets/hovercard.scss

@@ -7,7 +7,7 @@
   min-width: 250px;
   max-width: 400px;
 
-  background-color: $background-white;
+  background-color: $hovercard-background;
   border: 1px solid $border-dark-grey;
   font-size: small;
 

app/assets/stylesheets/icons.scss

 [class^="entypo-"], [class*="entypo-"] {
   font-style: normal;
-  color: black;
+  color: $icon-color;
 
   &.red { color: #A40802; }
   &.white { color: white; }

app/assets/stylesheets/interactions.scss

@@ -4,7 +4,7 @@
 
     [class^="entypo-"],
     [class*="entypo-"] {
-      color: $text-grey;
+      color: $text-color-pale;
       font-size: $font-size-base;
       line-height: $line-height-base;
       vertical-align: middle;
@@ -12,12 +12,12 @@
 
     [class^="entypo-"]:hover,
     [class*="entypo-"]:hover {
-      color: $text;
+      color: $text-color;
     }
 
     &.hide_conversation i { font-size: $line-height-computed * 1.5; }
     &.delete_conversation i { font-size: $font-size-base * 1.5; }
-    &.destroy_participation i { color: $black; }
+    &.destroy_participation i { color: $text-color-active; }
     &.destroy_participation i:hover { color: $text-dark-grey; }
   }
 }

app/assets/stylesheets/invitations.scss

 #invite_code {
-  background-color: $white;
+  background-color: $framed-background;
   cursor: text;
   display: block;
   margin-top: 5px;
@@ -7,13 +7,13 @@
 
 #invitationsModal {
   .modal-header, .modal-body {
-    color: $text;
+    color: $text-color;
     font-size: $font-size-base;
     text-align: initial;
   }
   #paste_link { font-weight: 700; }
   #invite_code { margin-top: 10px; }
-  #codes_left { color: $text-grey; }
+  #codes_left { color: $text-color-pale; }
   .controls { margin-left: 140px; }
   #email_invitation {
     padding-top: 10px;
@@ -21,7 +21,7 @@
     border-top: 1px dashed $border-grey;
     label { font-weight: 700; }
     #already_sent {
-      color: $text-grey;
+      color: $text-color-pale;
       font-size: 12px;
     }
   }

app/assets/stylesheets/markdown-editor.scss

 .md-footer,
 .md-header {
-  background: $sidebars-background;
+  background: $white;
   border: 0;
   display: block;
   height: 42px;
@@ -10,7 +10,7 @@
   [class^="entypo-"],
   [class*="entypo-"],
   .glyphicon {
-    color: $black;
+    color: $icon-color;
   }
 }
 
@@ -72,7 +72,7 @@
     width: 18px;
   }
 
-  &:hover .entypo-cross { color: $text; }
+  &:hover .entypo-cross { color: $text-color; }
 }
 
 

app/assets/stylesheets/mobile/comments.scss

@@ -33,7 +33,7 @@
 
     &.active:not(.bottom_collapse),
     &.active:not(.bottom_collapse) > [class^="entypo"] {
-      color: $text;
+      color: $text-color;
     }
   }
 

app/assets/stylesheets/mobile/mobile.scss

@@ -150,7 +150,7 @@ footer {
   border-radius: 5px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 
-  background-color: #fff;
+  background-color: $framed-background;
   margin-bottom: 10px;
 
   border: 1px solid #bbb;
@@ -176,7 +176,7 @@ footer {
     border-radius: 3px 3px 0 0;
 
     border: {
-      bottom: 1px solid #ccc;
+      bottom: 1px solid $border-medium-grey;
     }
 
     img.big-stream-photo {
@@ -322,7 +322,7 @@ footer {
 }
 
 .header-full-width {
-  background-color: #fff;
+  background-color: $framed-background;
   border-bottom: 1px solid #aaa;
   margin: -10px; // Counter the #main padding
   margin-bottom: 10px;
@@ -462,7 +462,7 @@ select {
       font-weight: bold;
       color: $text-grey;
       background: {
-        color: #fff;
+        color: $framed-background;
       }
     }
   }

app/assets/stylesheets/mobile/tags.scss

@@ -3,7 +3,7 @@ ul.followed_tags {
   margin: 0px;
 
   > li {
-    background-color: $white;
+    background-color: $framed-background;
     border: 1px solid $border-grey;
     border-radius: 5px;
     box-shadow: 0 1px 2px rgba($border-dark-grey, 0.5);

app/assets/stylesheets/notifications.scss

@@ -73,7 +73,7 @@
       background-color: $background-grey;
       .unread-toggle {
         opacity: 1 !important;
-        .entypo-eye { color: $black; }
+        .entypo-eye { color: $text-color-active; }
       }
     }
 
@@ -90,7 +90,7 @@
       padding: 9px 5px;
       .entypo-eye {
         cursor: pointer;
-        color: lighten($black,75%);
+        color: $text-color-pale;
         font-size: 17px;
         line-height: 17px;
       }

app/assets/stylesheets/profile.scss

 #profile_container {
   .profile_header {
     margin-bottom: 15px;
-    background-color: $white;
+    background-color: $framed-background;
     padding-left: 10px;
     padding-right: 10px;
     padding-top: 20px;
@@ -22,7 +22,7 @@
         font-weight: 700;
       }
       #diaspora_handle {
-        color: $text-grey;
+        color: $text-color-pale;
         font-size: 20px;
       }
       #sharing_message {
@@ -64,8 +64,8 @@
           .profile-header-icon {
             font-size: 24.5px;
             line-height: 30px;
-            color: lighten($black,75%);
-            &:hover { color: $black; }
+            color: $text-color-pale;
+            &:hover { color: $text-color; }
           }
           #mention_button { font-weight: 700; }
         }
@@ -80,8 +80,12 @@
           &.active {
             border-bottom: 3px solid $brand-primary;
             a {
-              color: $black;
-              [class^="entypo-"], [class*="entypo-"] { color: $black; }
+              color: $text-color-active;
+
+              [class^="entypo-"],
+              [class*="entypo-"] {
+                color: $text-color-active;
+              }
             }
           }
           a {
@@ -94,9 +98,13 @@
               margin-right: 2px;
             }
             &:hover {
-              color: $black;
-              [class^="entypo-"], [class*="entypo-"] { color: $black; }
+              color: $text-color-active;
               text-decoration: none;
+
+              [class^="entypo-"],
+              [class*="entypo-"] {
+                color: $text-color-active;
+              }
             }
           }
         }

app/assets/stylesheets/registration.scss

@@ -35,7 +35,7 @@
   }
 
   .captcha-input {
-    border-bottom: 1px solid $border-grey;
+    border-bottom: 1px solid $input-border;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
     box-sizing: border-box;

app/assets/stylesheets/sidebar.scss

 .sidebar,
 .framed-content {
-  background-color: $white;
-  border: 1px solid $light-grey;
+  background-color: $framed-background;
+  border: 1px solid $border-grey;
   border-top: 0;
   box-shadow: $card-shadow;
 

app/assets/stylesheets/stream_element.scss

@@ -15,7 +15,7 @@
     position: relative;
 
     .control-icons {
-      background: $white;
+      background: $framed-background;
       border-radius: 4px;
       padding-left: 4px;
       position: absolute;
@@ -26,7 +26,7 @@
   }
 
   .thumbnail {
-    background: $white;
+    background: $framed-background;
     border-radius: 0;
     box-shadow: $card-shadow;
     height: 240px;
@@ -40,7 +40,7 @@
     &:hover,
     &:focus,
     &:active {
-      border-color: $light-grey;
+      border-color: $border-grey;
       text-decoration: none;
     }
 
@@ -62,7 +62,7 @@
 
 #main_stream .stream-element {
   margin-bottom: 20px;
-  border: 1px solid $light-grey;
+  border: 1px solid $border-grey;
   box-shadow: $card-shadow;
 
   &.highlighted {
@@ -72,7 +72,7 @@
 }
 
 .stream-element {
-  background-color: $white;
+  background-color: $framed-background;
   padding: 10px;
 
   & > .media {