Merge pull request #4479 from ssrihari/fix-colors-more

Refactored the colors palette a little more

Changelog.md

@@ -2,7 +2,7 @@
 
 ## Refactor
 * Move non-model federation stuff into lib/ [#4363](https://github.com/diaspora/diaspora/pull/4363)
-* Build a color palette to uniform color usage [#4437](https://github.com/diaspora/diaspora/pull/4437) [#4469](https://github.com/diaspora/diaspora/pull/4469)
+* Build a color palette to uniform color usage [#4437](https://github.com/diaspora/diaspora/pull/4437) [#4469](https://github.com/diaspora/diaspora/pull/4469) [#4479](https://github.com/diaspora/diaspora/pull/4479)
 
 ## Bug fixes
 * Highlight down arrow at the user menu on hover [#4441](https://github.com/diaspora/diaspora/pull/4441)

app/assets/stylesheets/_flash_messages.scss

@@ -11,7 +11,7 @@
   width : 100%;
 
   text-align : center;
-  color: #666;
+  color: $text-dark-grey;
 
   &.expose {
     @include animation(expose, 10s)
@@ -38,7 +38,7 @@
 
 #flash_notice {
   .message {
-    color: #666;
+    color: $text-dark-grey;
     background-color: #F4F899;
     border-color: darken(#F4F899, 40%);
   }

app/assets/stylesheets/application.css.sass

@@ -303,7 +303,6 @@ ul.as-selections
   :cursor default
 
 .time,
-.timeago,
 .via
   :color #aaa
   a
@@ -648,7 +647,7 @@ form p.checkbox_select
       :vertical-align bottom
 
     &:hover
-      :color #666
+      :color $text-dark-grey
       :cursor pointer
 
       img
@@ -1267,8 +1266,8 @@ ul#press_logos
 
 #already_invited_pane
   h4
-    :color #666
-  :color #666
+    :color $text-dark-grey
+  :color $text-dark-grey
 
 #search_title
   :font
@@ -1493,7 +1492,7 @@ ul#press_logos
   .last_author
     :font
       :size 12px
-    :color #777
+    :color $text-dark-grey
 
   .collapsible
     :overflow hidden
@@ -1853,7 +1852,7 @@ h1.tag
       :top 3px
       :font-size smaller
       :font-weight bold
-      :color #777
+      :color $text-dark-grey
 
     .icons-plus,
     .icons-heart,
@@ -1899,7 +1898,7 @@ h1.tag
     h5
       :font-size 12px
       :margin 0
-      :color #666
+      :color $text-dark-grey
 
   .section
     .content
@@ -2024,7 +2023,7 @@ ul.left_nav
     > a:not(.sub_selected)
       :color #333
       .item_count
-        :color #666
+        :color $text-dark-grey
 
   a.aspect_selector,
   a.home_selector,
@@ -2278,7 +2277,7 @@ a.toggle_selector
   :padding 10px
   :background
     :color #eee
-  :color #666
+  :color $text-dark-grey
 
 .cubbies_collage
   :position absolute
@@ -2629,8 +2628,7 @@ body
   :font-size smaller
   :color $text-grey
   a
-    :color #666
-    :color #666
+    :color $text-dark-grey
 
 #fileInfo
   :font-size small
@@ -2660,7 +2658,7 @@ body
       :padding-top 2px
       @include opacity(0.4)
     &:hover
-      :color #666
+      :color $text-dark-grey
       :cursor pointer
       img
         @include opacity(0.8)

app/assets/stylesheets/colors.css.scss

 $highlight-white: #FAFAFA;
+
 $background-white: #FFFFFF;
+$background-grey: #EEEEEE;
 
 $grey: #2B2B2B;
 $light-grey: #DDDDDD;
+
 $border-grey: #DDDDDD;
-$background-grey: #EEEEEE;
-$header-grey: #939393;
-$link-grey: #777777;
 $border-dark-grey: #999999;
+
+$link-grey: #777777;
 $link-disabled-grey: #999999;
+
 $text-grey: #999999;
+$text-dark-grey: #666666;
 
 $white: white;
 $black: black;

app/assets/stylesheets/error_pages.css.scss

+@import 'colors';
 @import 'mixins';
 
 #big-number {
@@ -18,7 +19,7 @@
   text-shadow: 0 1px 0 #fff;
   font-size: 1.25em;
   line-height: 1.5em;
-  color: #666;
+  color: $text-dark-grey;
   position: absolute;
   left: 0; right: 0;
 }

app/assets/stylesheets/header.css.scss

@@ -242,7 +242,7 @@ body > header {
   .user-menu-item a {
     padding: 4px;
     height: 100%;
-    color: $header-grey;
+    color: $text-grey;
 
     &:hover {
       background-color: $blue;

app/assets/stylesheets/lightbox.css.scss

 //   licensed under the Affero General Public License version 3 or later.  See
 //   the COPYRIGHT file.
 
-@import '_mixins.css.scss';
+@import 'colors';
+@import 'mixins';
 
 #lightbox{
   z-index: 1003;
@@ -15,7 +16,7 @@
   padding-top: 80px;
   padding-bottom: 20px;
 
-  color: #666;
+  color: $text-dark-grey;
   text-shadow: none;
   font-size: 12px;
 
@@ -66,7 +67,7 @@
   }
 
   #lightbox-close-link{
-    color: #666;
+    color: $text-dark-grey;
     margin-bottom: 12px;
   }
 }

app/assets/stylesheets/login.css.scss

@@ -2,6 +2,7 @@
 //   licensed under the Affero General Public License version 3 or later.  See
 //   the COPYRIGHT file.
 
+@import "colors";
 @import "mixins";
 
 #login {
@@ -51,7 +52,7 @@
           position: relative;
           height: 40px;
           top: 0px;
-          color: #666666;
+          color: $text-dark-grey;
           margin: {
             bottom: 10px;
           };

app/assets/stylesheets/mobile.css.scss

@@ -210,7 +210,7 @@ body {
 
 .comment {
   .time {
-    color: #777; } }
+    color: $text-dark-grey; } }
 
 .info {
   margin: {
@@ -615,7 +615,7 @@ select {
   z-index: 2;
 
   span {
-    color: #666;
+    color: $text-dark-grey;
     font-weight: bold;
     padding: 2px 7px;
     margin: 5px 6px;
@@ -703,7 +703,7 @@ display: inline-block;
 #header-nav a {
     padding: 0 10px;
     width: 100%;
-    color: $header-grey;
+    color: $text-grey;
 }
 
 #header-nav > div {
@@ -1116,7 +1116,7 @@ input#q.search {
       vertical-align: bottom;
     }
     &:hover {
-      color: #666;
+      color: $text-dark-grey;
       cursor: pointer;
 
       img {

app/assets/stylesheets/new_styles/_forms.scss

@@ -9,7 +9,7 @@ form.block-form {
   display : inline-block;
 
   label {
-    color : #555;
+    color : $text-dark-grey;
   }
 
   input {
@@ -22,7 +22,7 @@ form.block-form {
       box-shadow : none;
 
       border : none;
-      color : #555;
+      color : $text-dark-grey;
     }
   }
 

app/assets/stylesheets/new_styles/_interactions.scss

@@ -190,7 +190,7 @@
       top: 1px solid #222;
       right: 1px solid #444;
       left: 1px solid #444;
-      bottom: 1px solid #666;
+      bottom: 1px solid $text-dark-grey;
     }
   }
 
@@ -201,7 +201,7 @@
   }
 
   time {
-    color: #666;
+    color: $text-dark-grey;
     font-size: smaller;
   }
 

app/assets/stylesheets/new_styles/_landing.scss

@@ -107,7 +107,7 @@
   #steps {
     text-align: center;
     p {
-      color:#666;
+      color: $text-dark-grey;
     }
   }
 }

app/assets/stylesheets/scaffolds.css.scss

@@ -18,7 +18,7 @@ pre {
 a {
   color: #000;
   &:visited {
-    color: #666; }
+    color: $text-dark-grey; }
   &:hover {
     color: #fff;
     background-color: #000; } }