From a6dc845f595d39397d368176067be1817c0b562e Mon Sep 17 00:00:00 2001
From: Srihari Sriraman <srihari@c42.in>
Date: Sun, 25 Aug 2013 21:34:59 +0530
Subject: [PATCH] First stab at extracting a color palette

- Pulled out the existing palette in _mixins
- Took a stab at naming greys after their usage count in contexts
- Replaced #a40802 with #a80000, since they are very close and $red was already in the palette

Missed importing 'colors' in a couple of places

Removing a redefined  in favor of  in colors.css.scss

Fixing missed imports #2

Renamed $background to $background-white

Explicitly calling out the color of the background, since we have many
background colors
---
 app/assets/stylesheets/_mixins.css.scss       | 16 ----
 app/assets/stylesheets/application.css.sass   | 71 ++++++++---------
 app/assets/stylesheets/colors.css.scss        | 20 +++++
 app/assets/stylesheets/footer.css.scss        |  6 +-
 app/assets/stylesheets/header.css.scss        | 78 +++++++++----------
 app/assets/stylesheets/hovercard.css.scss     |  9 ++-
 app/assets/stylesheets/mentions.css.scss      |  6 +-
 app/assets/stylesheets/mobile.css.scss        | 31 ++++----
 app/assets/stylesheets/new-templates.css.scss |  1 +
 app/assets/stylesheets/new_styles/_forms.scss |  2 +-
 app/assets/stylesheets/opengraph.css.scss     |  4 +-
 app/assets/stylesheets/popup.css.scss         |  3 +-
 app/assets/stylesheets/rtl.css.scss           |  4 +-
 app/assets/stylesheets/sessions.css.scss      |  2 +-
 app/assets/stylesheets/sidebar.css.scss       |  2 +-
 .../stylesheets/single-post-view.css.scss     |  4 +-
 app/assets/stylesheets/ui.css.scss            |  2 +-
 17 files changed, 135 insertions(+), 126 deletions(-)
 create mode 100644 app/assets/stylesheets/colors.css.scss

diff --git a/app/assets/stylesheets/_mixins.css.scss b/app/assets/stylesheets/_mixins.css.scss
index 1e56a06d1..8b2c6b31a 100644
--- a/app/assets/stylesheets/_mixins.css.scss
+++ b/app/assets/stylesheets/_mixins.css.scss
@@ -1,22 +1,6 @@
 /* Mixin file for sass.  Here is where we define our variables and
    browser compatability functions used in all scss/sass files */
 
-/* Diapora's default color palate */
-$blue: #3f8fba;
-$dark-blue: darken(#0984C8,10%);
-$green: #8EDE3D;
-
-$grey: #2b2b2b;
-$light-grey: #ddd;
-
-$red: #a80000;
-$background: #fff;
-$creation-blue: #0097ff;
-
-$red: #a80000;
-$background: #fff;
-$creation-blue: #0097ff;
-
 /* Transision defaults */
 $speed: 0.1s;
 $easing: linear;
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index 1118d1416..9ae450b9a 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/app/assets/stylesheets/application.css.sass
@@ -1,4 +1,5 @@
 @import 'compass'
+@import 'colors'
 @import 'ui'
 @import '_mixins'
 @import '_flash_messages'
@@ -37,7 +38,7 @@ body
   :padding 2em
   :margin 0
     :top 33px
-  :background-color $background
+  :background-color $background-white
 
   :font
     :family "Helvetica Neue",Helvetica,Arial,sans-serif
@@ -81,7 +82,7 @@ ul > li
   :-moz-box-shadow rgba(0,0,0,0.12) 0px 0px 5px inset
 
   :background
-    :color #eee
+    :color $background-grey
 
   :width 50px
   :height 50px
@@ -149,7 +150,7 @@ ul.as-selections
 
   .stream_element
     :border
-      :bottom 1px solid #ddd
+      :bottom 1px solid $border-grey
 
     p
       &:last-child
@@ -240,7 +241,7 @@ ul.as-selections
     :float left
     :margin
       :top 6px
-  
+
   .controls:first-child
     .control_icon
       @include transition(opacity)
@@ -376,7 +377,7 @@ ul.as-selections
 
     :padding
       :top 10px
-    
+
     .controls
       .comment_delete
         @include transition(opacity)
@@ -423,7 +424,7 @@ ul.as-selections
     :color #bbb
 
 .stream_element .post-content .reshare
-  :border-left 2px solid #ddd
+  :border-left 2px solid $border-grey
 
 .stream_element.loaded .media .bd .feedback
   :clear both
@@ -1326,7 +1327,7 @@ ul#press_logos
 
 .show_comments
   :border
-    :top 1px solid #ddd
+    :top 1px solid $border-grey
   :margin
     :top 5px
 
@@ -1458,7 +1459,7 @@ ul#press_logos
 .invite_friends
   :padding 1em
   :background
-    :color #eee
+    :color $background-grey
   :border 1px solid #ccc
 
 #remember_me
@@ -1507,7 +1508,7 @@ ul#press_logos
       :color $grey
       :text-shadow 0 0 7px #FFF
       :cursor pointer
-      :border-bottom 2px solid #DDD
+      :border-bottom 2px solid $border-grey
       @include border-radius(0, 0, 3px, 3px)
       @include linear-gradient(rgba(255,255,255,0) , #EEE, 0%, 95%)
       :background-color transparent
@@ -1525,7 +1526,7 @@ ul#press_logos
 
 .conversation_participants
   :background
-    :color $background
+    :color $background-white
   :margin
     :bottom 10px
 
@@ -1569,7 +1570,7 @@ ul#press_logos
       :bottom 10px
 
   :border
-    :bottom 1px solid #ddd
+    :bottom 1px solid $border-grey
   :padding 10px
     :top 101px
     :bottom 10px
@@ -1661,7 +1662,7 @@ ul#press_logos
 
   &:hover:not(.selected)
     :background
-      :color #fafafa
+      :color $highlight-white
 
   &.selected:hover
     :background
@@ -1672,7 +1673,7 @@ ul#press_logos
 
 .conversation.unread
   :background
-    :color darken($background,5%)
+    :color darken($background-white,5%)
 
 .conversation.selected
   :background
@@ -1710,7 +1711,7 @@ ul#press_logos
     :padding 10px
     :height 55px
     :border
-      :bottom 1px solid #ddd
+      :bottom 1px solid $border-grey
 
 #no_conversation_text
   :font
@@ -1759,7 +1760,7 @@ h1.tag
   .tag
     :background
       :color #efefef
-    :color #999
+    :color $text-grey
     :border
       :bottom 1px dotted #999
 
@@ -1795,7 +1796,7 @@ h1.tag
     :color #e6e6e6
   :border-radius 8px
   :padding 5px
-  :color #999
+  :color $text-grey
 
   :text-align center
   .day
@@ -1810,7 +1811,7 @@ h1.tag
 .notification_count
   :background
     :color #f0f0f0
-  :color #999
+  :color $text-grey
   :font
     :weight normal
 
@@ -1823,7 +1824,7 @@ h1.tag
 
   &.unread
     :background
-      :color lighten(#A40802, 5%)
+      :color lighten($red, 5%)
     :color #eee !important
     :font
       :weight bold
@@ -1832,7 +1833,7 @@ h1.tag
   .title
     :position relative
     :border
-      :bottom 1px solid #ddd
+      :bottom 1px solid $border-grey
     :padding 2px 0
       :top 0
 
@@ -1896,7 +1897,7 @@ h1.tag
   .section
     .content
       :padding 8px
-      :color #999
+      :color $text-grey
       :font-size 11px
     li
       :list-style none
@@ -1975,9 +1976,9 @@ ul#requested-scopes
   :float right
   @include border-radius(4px)
   :margin-top 1px
-  :color #999
+  :color $text-grey
   :background
-    :color #eee
+    :color $background-grey
   :display inline-block
   :font
     :size 11px
@@ -2000,7 +2001,7 @@ ul.left_nav
       :decoration none
   a
     :font-weight bold
-    :color #777
+    :color $link-grey
     :text
       :decoration none
 
@@ -2155,7 +2156,7 @@ ul.left_nav
     :margin
       :bottom 0
   :border
-    :left 1px solid #ddd
+    :left 1px solid $border-grey
   :padding
     :left 10px
     :top 20px
@@ -2169,12 +2170,12 @@ ul.left_nav
 .new_aspect,
 a.toggle_selector
   :outline none
-  :color #999
+  :color $text-grey
   :font
     :style italic
 
   &:hover
-    :color #777
+    :color $link-grey
 
 .no_contacts
   :position relative
@@ -2314,7 +2315,7 @@ a.toggle_selector
   :width 140px
 
   .tags
-    :color #999
+    :color $text-grey
 
   h4
     :margin
@@ -2365,7 +2366,7 @@ a.toggle_selector
     :position relative
 
     :border
-      :bottom 1px solid #ddd
+      :bottom 1px solid $border-grey
 
     :padding 5px
     :margin
@@ -2402,7 +2403,7 @@ a.toggle_selector
   .diaspora_id_text
     :font-size 12px
     :text-align right
-    :color #999
+    :color $text-grey
     :margin
       :top -8px
     :padding 0
@@ -2455,7 +2456,7 @@ a.toggle_selector
   :text
     :align center
   :border
-    :bottom 1px solid #ddd
+    :bottom 1px solid $border-grey
 
 .mobile_row
   :margin
@@ -2489,7 +2490,7 @@ a.toggle_selector
   span.host_uri
     :float right
     :margin-top -28px
-    :color #999
+    :color $text-grey
     :padding-right 9px
 
 .center
@@ -2590,11 +2591,11 @@ body
 
 .nsfw-shield
   @include border-radius(3px)
-  :background-color #eee
+  :background-color $background-grey
   :width 90%
   :padding 5px 10px
-  :border 1px solid #ddd
-  :color #999
+  :border 1px solid $border-grey
+  :color $text-grey
 
 #back-to-top
   :display block
@@ -2619,7 +2620,7 @@ body
 
 .nsfw_off
   :font-size smaller
-  :color #999
+  :color $text-grey
   a
     :color #666
     :color #666
diff --git a/app/assets/stylesheets/colors.css.scss b/app/assets/stylesheets/colors.css.scss
new file mode 100644
index 000000000..f1fa155b3
--- /dev/null
+++ b/app/assets/stylesheets/colors.css.scss
@@ -0,0 +1,20 @@
+$highlight-white: #FAFAFA;
+$background-white: #FFFFFF;
+
+$grey: #2B2B2B;
+$light-grey: #DDDDDD;
+$border-grey: #DDDDDD;
+$background-grey: #EEEEEE;
+$header-grey: #939393;
+$link-grey: #777777;
+$text-grey: #999999;
+
+$white: white;
+$black: black;
+$red: #A80000;
+$green: #8EDE3D;
+
+$blue: #3F8FBA;
+$dark-blue: darken(#0984C8,10%);
+$creation-blue: #0097FF;
+
diff --git a/app/assets/stylesheets/footer.css.scss b/app/assets/stylesheets/footer.css.scss
index 15d5df9d7..15c2e6a5e 100644
--- a/app/assets/stylesheets/footer.css.scss
+++ b/app/assets/stylesheets/footer.css.scss
@@ -2,13 +2,13 @@ footer {
   width: 100%;
   left: 0;
   bottom: 0;
-  color: #999;
+  color: $text-grey;
 
   .container {
     width: 95%;
     margin: 4em auto 0 auto;
     padding: 0.5em 0 1em 0;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $border-grey;
   }
 
   .branding-powered_by_diaspora {
@@ -40,7 +40,7 @@ footer {
     }
 
     a {
-      color: #777;
+      color: $link-grey;
     }
   }
 }
diff --git a/app/assets/stylesheets/header.css.scss b/app/assets/stylesheets/header.css.scss
index 057aab1a1..890a57700 100644
--- a/app/assets/stylesheets/header.css.scss
+++ b/app/assets/stylesheets/header.css.scss
@@ -20,21 +20,21 @@ body > header {
     height: 38px;
     width: 65px;
   }
-  
+
   .ie-user-menu-active { height: 150px; }
 
   a.header_root_link {
     display: inline-block;
     margin-top: 5px;
   }
-  
+
   a {
     color: #CCC;
     color: rgb(147,147,147);
 
     &:hover {
       background: none;
-      color: #fafafa;
+      color: $highlight-white;
     }
   }
 
@@ -42,7 +42,7 @@ body > header {
     height: 40px;
     .right { top: 10px; }
   }
-  
+
   #nav_badges {
     display: inline-block;
     margin-top: 2px;
@@ -56,7 +56,7 @@ body > header {
       position: relative;
       top: 2px;
       display: inline;
-      margin: 0 2px;      
+      margin: 0 2px;
       font-weight: bold;
       font-size: smaller;
 
@@ -67,13 +67,13 @@ body > header {
         top: -4px;
         left: 15px;
         padding: 1px 2px;
-        background-color: #A40802;
+        background-color: $red;
         line-height: 12px;
         color: #fff;
       }
 
-      &:hover .badge_count { background-color: lighten(#A40802, 5%); }
-      
+      &:hover .badge_count { background-color: lighten($red, 5%); }
+
       .icons-notifications_grey { height: 16px; }
 
       &.active .icons-notifications_grey:hover {
@@ -89,14 +89,14 @@ body > header {
         float: left;
       }
     }
-    
+
     #notification_badge, #message_inbox_badge {
       float: left;
       padding: 0px 3px;
     }
-    
+
     #message_inbox_badge {
-      padding-top: 3px; 
+      padding-top: 3px;
       margin-right: 0px;
       padding-right: 0px;
     }
@@ -134,7 +134,7 @@ body > header {
 
       .header {
         padding: 10px;
-        
+
         h4 {
           padding-bottom: 0;
           margin-bottom: 0;
@@ -142,7 +142,7 @@ body > header {
       }
 
       .notification_element,
-      .header { border-bottom: 1px solid #ddd; }
+      .header { border-bottom: 1px solid $border-grey; }
 
       .ajax_loader {
         text-align: center;
@@ -152,9 +152,9 @@ body > header {
       .notification_element {
         padding: 10px;
         min-height: 30px;
-      
-        &:hover { background-color: #FAFAFA; }
-        
+
+        &:hover { background-color: $highlight-white; }
+
         > img {
           height: 30px;
           width: 30px;
@@ -163,14 +163,14 @@ body > header {
         }
 
         &.unread {
-          background-color: #eee;
+          background-color: $background-grey;
           color: #000;
           font-weight: bold;
         }
       }
     }
   }
-  
+
   #global_search {
     float: right;
     margin-right: 10px;
@@ -179,7 +179,7 @@ body > header {
     form {
       position: absolute;
       right: 0;
-      
+
       input {
         @include box-shadow(0, 1px, 1px, #444);
         @include border-radius(15px);
@@ -193,7 +193,7 @@ body > header {
         &:hover { background-color: #555; }
 
         &.active {
-          background-color: #fafafa;
+          background-color: $highlight-white;
           background-color: rgba(160,160,160,0.6);
         }
 
@@ -220,10 +220,10 @@ body > header {
     z-index: 10;
     display: inline;
     top: -4px;
-    float: right;      
-    margin: -2px -5px 0px 0px;    
+    float: right;
+    margin: -2px -5px 0px 0px;
     padding: 5px 7px 5px 32px;
-    
+
     border-left: 1px solid #333;
     border-right: 1px solid #333;
 
@@ -238,11 +238,11 @@ body > header {
   .user-menu-item a {
     padding: 4px;
     height: 100%;
-    color: #939393;
+    color: $header-grey;
 
     &:hover {
       background-color: $blue;
-      color: #FAFAFA;
+      color: $highlight-white;
       text-decoration: none;
     }
   }
@@ -251,8 +251,8 @@ body > header {
     padding: 5px 0;
 
     &:hover {
-      color: #FAFAFA;
-      .user-name { color: #FAFAFA; }
+      color: $highlight-white;
+      .user-name { color: $highlight-white; }
     }
   }
 
@@ -306,41 +306,41 @@ body > header {
       }
     }
   }
-  
+
   /* When the user is not connected */
   ul#landing_nav {
     position: absolute;
     top: 4px;
-    right: 0;  
+    right: 0;
     margin: 0;
     padding: 0;
-  
+
     > li {
       text-shadow: 0 1px 0 #000;
       display: inline;
       margin-right: 0.5em;
-    
-      a {      
+
+      a {
         color: $blue;
-      
-        &.login {        
+
+        &.login {
           @include border-radius(5px);
           @include box-shadow(0, 1px, 1px, #666);
           padding: 5px 8px;
           background-color: #000;
           border-top: 1px solid #000;
-          
+
           &:hover { background-color: #222; }
         }
  	  }
- 	
+
       &:last-child { margin-right: 0; }
     }
   }
 }
 
 
-/* 
+/*
  * Extract here from application.sass because
  * needed for the header in the bootstrap part
  */
@@ -349,12 +349,12 @@ ul.dropdown {
 
   li {
     display: none;
-    
+
     a { display: block; }
 
     &:first-child {
       display: block;
-      
+
       a {
         height: auto;
         display: inline;
diff --git a/app/assets/stylesheets/hovercard.css.scss b/app/assets/stylesheets/hovercard.css.scss
index d126ccfff..77a2296d2 100644
--- a/app/assets/stylesheets/hovercard.css.scss
+++ b/app/assets/stylesheets/hovercard.css.scss
@@ -1,3 +1,4 @@
+@import "colors";
 @import "_mixins.css.scss";
 
 #hovercard {
@@ -9,7 +10,7 @@
   min-width: 250px;
   max-width: 400px;
 
-  background-color: $background;
+  background-color: $background-white;
   height: 70px;
   border: 1px solid #999999;
   font-size: small;
@@ -58,7 +59,7 @@
   }
 
   p {
-    color: #999999;
+    color: $text-grey;
     padding-top: 0px;
     margin-top: 0px;
     margin-bottom: 10px;
@@ -68,7 +69,7 @@
     position: absolute;
     bottom: 0;
     left: 0;
-    background-color: #eeeeee;
+    background-color: $background-grey;
     margin-left: 0;
 
     width: 100%;
@@ -82,7 +83,7 @@
       padding: 1px 5px;
 
       a {
-        color: #999999;
+        color: $text-grey;
         margin-right: 4px;
         font-weight: normal;
       }
diff --git a/app/assets/stylesheets/mentions.css.scss b/app/assets/stylesheets/mentions.css.scss
index 657a94acb..04fc2c8cc 100644
--- a/app/assets/stylesheets/mentions.css.scss
+++ b/app/assets/stylesheets/mentions.css.scss
@@ -1,4 +1,4 @@
-
+@import 'colors';
 @import '_mixins.css.scss';
 
 .mentions-input-box {
@@ -53,9 +53,9 @@
         padding: 5px;
         white-space: nowrap;
 
-        &:hover, &.active { background: #eee; }
+        &:hover, &.active { background: $background-grey; }
         &:last-child { @include border-radius(0px, 0px, 5px, 5px); }
-        
+
         img, div.icon {
           float: left;
           height: 25px;
diff --git a/app/assets/stylesheets/mobile.css.scss b/app/assets/stylesheets/mobile.css.scss
index 231cf0031..5592cd1f7 100644
--- a/app/assets/stylesheets/mobile.css.scss
+++ b/app/assets/stylesheets/mobile.css.scss
@@ -1,11 +1,10 @@
 @import 'bootstrap';
 @import 'bootstrap-responsive';
+@import "colors";
 @import "_mixins.css.scss";
 @import 'vendor/autoSuggest';
 @import '_flash_messages.scss';
 
-$blue: #3f8fba;
-
 a {
   color: #2489ce;
   text: {
@@ -144,7 +143,7 @@ body {
   margin-bottom: 10px;
 
   border: 1px solid #bbb;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid $border-grey;
   border-bottom: 1px solid #aaa;
 }
 
@@ -188,7 +187,7 @@ body {
   }
 
   h1 {
-    color: #999;
+    color: $text-grey;
     padding: 20px;
     text-shadow: 0 2px 0 #fff; } }
 
@@ -304,7 +303,7 @@ body {
     font: {
       weight: normal;
       size: small; };
-    color: #999999; } }
+    color: $text-grey; } }
 
 .right {
   float: right; }
@@ -366,7 +365,7 @@ body {
   top: 1px;
   padding: 0 2px;
     padding-bottom: 1px;
-  background-color: #a40802;
+  background-color: $red;
   line-height: 12px;
   color: white;
   font-size: smaller;
@@ -409,13 +408,13 @@ footer {
   position: relative;
   padding: 10px;
   padding-top: 8px;
-  background: #eee;
+  background: $background-grey;
 
   margin: {
     top: 10px; };
 
   border: {
-    top: 1px solid #ddd;
+    top: 1px solid $border-grey;
   };
 
   min-height: 22px;
@@ -621,7 +620,7 @@ select {
     padding: 2px 7px;
     margin: 5px 6px;
     background: {
-      color: #eee;
+      color: $background-grey;
     }
   }
 }
@@ -655,7 +654,7 @@ select {
     span {
       padding: 2px 10px;
       font-weight: bold;
-      color: #999;
+      color: $text-grey;
       background: {
         color: #fff;
       }
@@ -698,13 +697,13 @@ select {
     height: 100%;
     margin-right: 5px;
     margin-top: 3px;
-display: inline-block;	
+display: inline-block;
 }
 
 #header-nav a {
     padding: 0 10px;
     width: 100%;
-    color: #939393;
+    color: $header-grey;
 }
 
 #header-nav > div {
@@ -1090,7 +1089,7 @@ select#aspect_ids_ {
   font-size: 14px;
   line-height: 18px;
   color: inherit;
-  background-color: #EEE;
+  background-color: $background-grey;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
   border-radius: 10px;
@@ -1126,7 +1125,7 @@ input#q.search {
     }
     &:active {
       color: #444;
-      text-shadow: 0 1px 0 #fafafa;
+      text-shadow: 0 1px 0 $highlight-white;
 
       img  {
         @include opacity(1);
@@ -1258,8 +1257,8 @@ input#q.search {
     text-decoration: none;
     color: #000;
     margin: 5px 0px 5px 0px;
-    border-top: solid 1px #DDD;
-    border-bottom: solid 1px #DDD;
+    border-top: solid 1px $border-grey;
+    border-bottom: solid 1px $border-grey;
     padding: 5px 0px 2px 0px;
     overflow: hidden;
     img {
diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss
index 1768491e1..4c3c4ecbf 100644
--- a/app/assets/stylesheets/new-templates.css.scss
+++ b/app/assets/stylesheets/new-templates.css.scss
@@ -1,3 +1,4 @@
+@import "colors";
 @import 'mixins';
 @import 'new_styles/new_mixins';
 @import 'new_styles/variables';
diff --git a/app/assets/stylesheets/new_styles/_forms.scss b/app/assets/stylesheets/new_styles/_forms.scss
index cdb280edf..81bb128c8 100644
--- a/app/assets/stylesheets/new_styles/_forms.scss
+++ b/app/assets/stylesheets/new_styles/_forms.scss
@@ -54,7 +54,7 @@ form.block-form {
   /* mainly bootstrap overrides */
     .control-group {
       margin : 0;
-      border-bottom : 1px solid #ddd;
+      border-bottom : 1px solid $border-grey;
 
       .control-label,
       input[type=text],
diff --git a/app/assets/stylesheets/opengraph.css.scss b/app/assets/stylesheets/opengraph.css.scss
index 950f72011..fc2be5447 100644
--- a/app/assets/stylesheets/opengraph.css.scss
+++ b/app/assets/stylesheets/opengraph.css.scss
@@ -6,8 +6,8 @@
     text-decoration: none;;
     color: #000;
     margin: 10px 0px 10px 0px;
-    border-top: solid 1px #DDD;
-    border-bottom: solid 1px #DDD;
+    border-top: solid 1px $border-grey;
+    border-bottom: solid 1px $border-grey;
     padding: 10px 0px 5px 0px;
     overflow: hidden;
 
diff --git a/app/assets/stylesheets/popup.css.scss b/app/assets/stylesheets/popup.css.scss
index 3d1e04c2a..c1391081d 100644
--- a/app/assets/stylesheets/popup.css.scss
+++ b/app/assets/stylesheets/popup.css.scss
@@ -3,6 +3,7 @@
 //   the COPYRIGHT file.
 
 @import "mixins";
+@import "colors";
 
 body, html{
   padding: 20px;
@@ -50,7 +51,7 @@ header{
 
 footer{
   position: absolute;
-  background-color: #eee;
+  background-color: $background-grey;
   border-top: 1px solid #ccc;
   bottom: 0;
   left: 0;
diff --git a/app/assets/stylesheets/rtl.css.scss b/app/assets/stylesheets/rtl.css.scss
index 41e003541..ccf6b9abc 100644
--- a/app/assets/stylesheets/rtl.css.scss
+++ b/app/assets/stylesheets/rtl.css.scss
@@ -1,3 +1,5 @@
+@import "colors";
+
 body {
   direction: rtl;
   text-align: right;
@@ -313,7 +315,7 @@ ul.left_nav .item_count, ul.left_nav .edit {
 
 .stream_container {
   border-left: 0;
-  border-right: 1px solid #DDDDDD;
+  border-right: 1px solid $border-grey;
 }
 
 .stream .new_message .right input[type=reset] {
diff --git a/app/assets/stylesheets/sessions.css.scss b/app/assets/stylesheets/sessions.css.scss
index f693641f0..9b005337f 100644
--- a/app/assets/stylesheets/sessions.css.scss
+++ b/app/assets/stylesheets/sessions.css.scss
@@ -122,7 +122,7 @@ form p {
 }
 
 label {
-  color: #999;
+  color: $text-grey;
   position: absolute;
   padding-top: 7px;
   left: 8px;
diff --git a/app/assets/stylesheets/sidebar.css.scss b/app/assets/stylesheets/sidebar.css.scss
index 5308de144..1e8ec7a5d 100644
--- a/app/assets/stylesheets/sidebar.css.scss
+++ b/app/assets/stylesheets/sidebar.css.scss
@@ -33,7 +33,7 @@ $bluebg: #e7f2f7;
 	}
 	
 	a {
-		color: #777777;
+		color: $link-grey;
 		font-weight: bold;
 		text-decoration: none;
 	}
diff --git a/app/assets/stylesheets/single-post-view.css.scss b/app/assets/stylesheets/single-post-view.css.scss
index bcb1a4ae9..bdf501f07 100644
--- a/app/assets/stylesheets/single-post-view.css.scss
+++ b/app/assets/stylesheets/single-post-view.css.scss
@@ -34,7 +34,7 @@
         color: #424242;
       }
       i.heart.gray:hover {
-        color: #a40802;
+        color: $red;
       }
       i.heart.red:hover {
         color: #f55f5a;
@@ -111,7 +111,7 @@
   .no_comments {
     padding-top: 10px;
     padding-bottom: 10px;
-    background-color: #eee;
+    background-color: $background-grey;
     text-align: center;
     @include border-radius(4px);
     margin-bottom: 30px;
diff --git a/app/assets/stylesheets/ui.css.scss b/app/assets/stylesheets/ui.css.scss
index 63fac9d63..bff7baa23 100644
--- a/app/assets/stylesheets/ui.css.scss
+++ b/app/assets/stylesheets/ui.css.scss
@@ -61,7 +61,7 @@ input.button {
 }
 
 .button .selected {
-  @include linear-gradient(#f0f0f0,#fafafa,29%,85%);
+  @include linear-gradient(#f0f0f0,$highlight-white,29%,85%);
 
   border-top: 1px solid #aaa;
 }