From 22e7fd5ed0465d3310755fa827c4653bd2501d8a Mon Sep 17 00:00:00 2001
From: Kris Aubuchon <shout@k-ris.com>
Date: Tue, 6 May 2014 23:53:04 -0400
Subject: [PATCH] some color fixes, general consistency

---
 .../stylesheets/common/admin/admin_base.scss  | 73 +++++++++----------
 .../stylesheets/common/base/compose.scss      |  2 +-
 .../stylesheets/common/base/history.scss      |  8 +-
 .../stylesheets/common/base/onebox.scss       |  4 +-
 .../common/foundation/variables.scss          | 18 +----
 app/assets/stylesheets/desktop/discourse.scss | 10 +--
 .../stylesheets/desktop/topic-list.scss       |  2 +-
 .../stylesheets/desktop/topic-post.scss       | 32 ++++----
 app/assets/stylesheets/desktop/topic.scss     |  4 +-
 app/assets/stylesheets/mobile/compose.scss    |  2 +-
 app/assets/stylesheets/mobile/topic-list.scss |  1 -
 app/assets/stylesheets/mobile/topic-post.scss | 24 +++---
 12 files changed, 81 insertions(+), 99 deletions(-)

diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index b502f7539..ba784dd7c 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -164,7 +164,7 @@
   @include small-width  { width: 700px; }
   min-height: 800px;
   margin-left: 0;
-  border-left: solid 1px lighten($primary, 50%);
+  border-left: solid 1px scale-color($primary, $lightness: 90%);
   padding: 30px 0 30px 30px;
 }
 
@@ -197,8 +197,8 @@
     .input-setting-list {
       width: 408px;
       padding: 1px;
-      background-color: white;
-      border: 1px solid #e6e6e6;
+      background-color: $secondary;
+      border: 1px solid scale-color($primary, $lightness: 90%);
       border-radius: 3px;
       box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
       -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
@@ -207,17 +207,17 @@
       .list-input-item {
         width: 90px;
         margin: 2px 1px;
-        background-color: white;
-        border: 1px solid #e6e6e6;
+        background-color: $secondary;
+        border: 1px solid scale-color($primary, $lightness: 90%);
         border-radius: 3px;
         box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
         -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
         transition: border linear 0.2s, box-shadow linear 0.2s;
 
         &:focus {
-          border-color: #00aaff;
+          border-color: $tertiary;
           outline: 0;
-          box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3), 0 0 8px #00aaff;
+          box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3), 0 0 8px $tertiary;
         }
       }
 
@@ -244,11 +244,11 @@
 
   .setting.overridden {
     input[type=text] {
-      background-color: lighten($highlight, 23%);
+      background-color: scale-color($highlight, $lightness: 50%);
     }
 
     h3 {
-      color: darken($highlight, 30%);
+      color: scale-color($highlight, $lightness: -50%);
     }
   }
 }
@@ -256,7 +256,7 @@
 section.details {
   h1 {
     font-size: 15px;
-    background-color: lighten($primary, 50%);
+    background-color: scale-color($primary, $lightness: 90%);
     color: $secondary;
     padding: 0 10px;
     margin: 0 0 5px 0;
@@ -264,13 +264,12 @@ section.details {
 }
 
 #selected-controls {
-  background-color: lighten($tertiary, 50%);
+  background-color: scale-color($tertiary, $lightness: 75%);
   padding: 8px;
   min-height: 27px;
   position: fixed;
   bottom: 0;
   width: 1075px;
-  border: 1px solid lighten($tertiary, 45%);
 }
 
 .display-row {
@@ -441,7 +440,7 @@ section.details {
     .hex, .opacity { text-align: center; }
 
     .changed .name {
-      color: darken($highlight, 30%);
+      color: scale-color($highlight, $lightness: -50%);
     }
   }
 }
@@ -453,7 +452,7 @@ section.details {
   tr.deleted td.excerpt { opacity: 0.8; background-color: scale-color($danger, $lightness: 30%); }
   td.message {
     padding: 4px 8px;
-    background-color:  lighten($highlight, 23%);
+    background-color:  scale-color($highlight, $lightness: 30%);
   }
   td { vertical-align: top; }
   th { text-align: left; }
@@ -582,14 +581,14 @@ table.api-keys {
 
     .title {
       i.fa {
-        color: darken($primary, 40%);
+        color: $primary;
       }
     }
 
     th {
       font-weight: normal;
       text-align: center;
-      background-color: lighten($primary, 76%);
+      background-color: scale-color($primary, $lightness: 90%);
     }
     th.title {
       text-align: left;
@@ -599,7 +598,7 @@ table.api-keys {
         background-color: $secondary;
       }
       tr:hover > th {
-        background-color: lighten($primary, 60%);
+        background-color: scale-color($primary, $lightness: 75%);
       }
     }
 
@@ -721,7 +720,7 @@ table.api-keys {
     list-style: none;
   }
   a {
-    color: darken($primary, 40%);
+    color: $primary;
     text-decoration: none;
   }
   a:hover {
@@ -729,10 +728,10 @@ table.api-keys {
   }
 
   .header {
-    color: darken($primary, 40%);
+    color: $primary;
     font-weight: bold;
     height: 30px;
-    background-color: lighten($primary, 60%);
+    background-color: scale-color($primary, $lightness: 75%);
     cursor: pointer;
 
     h1 {
@@ -771,7 +770,7 @@ table.api-keys {
       }
 
       .commit-message {
-        color: darken($primary, 40%);
+        color: $primary;
         font-size: 12px;
         font-weight: bold;
       }
@@ -783,7 +782,7 @@ table.api-keys {
 
       .committer-name {
         font-weight: bold;
-        color: darken($primary, 40%);
+        color: $primary;
       }
     }
     li:last-child {
@@ -796,7 +795,7 @@ table.api-keys {
     width: 6px;
   }
   ::-webkit-scrollbar-thumb {
-    background-color: lighten($primary, 60%);
+    background-color: scale-color($primary, $lightness: 75%);
     -webkit-border-radius: 3px;
   }
   ::-webkit-scrollbar-track {
@@ -807,7 +806,7 @@ table.api-keys {
 .content-list {
 
   h3 {
-    color: darken($primary, 40%);
+    color: $primary;
     font-size: 15px;
     padding-left: 5px;
     margin-bottom: 10px;
@@ -818,25 +817,25 @@ table.api-keys {
     margin: 0;
 
     li:first-of-type {
-      border-top: 1px solid lighten($primary, 60%);
+      border-top: 1px solid scale-color($primary, $lightness: 90%);
     }
     li {
-      border-bottom: 1px solid lighten($primary, 60%);
+      border-bottom: 1px solid scale-color($primary, $lightness: 90%);
     }
 
     li a {
       display: block;
       padding: 10px;
-      color: darken($primary, 40%);
+      color: $primary;
 
       &:hover {
-        background-color: #eee;
-        color: darken($primary, 40%);
+        background-color: scale-color($primary, $lightness: 90%);
+        color: $primary;
       }
 
       &.active {
         font-weight: bold;
-        color: darken($primary, 40%);
+        color: $primary;
       }
     }
   }
@@ -987,14 +986,14 @@ table.api-keys {
   margin: 0 0 20px 6px;
   a.filter {
     display: inline-block;
-    background-color: lighten($primary, 60%);
+    background-color: scale-color($primary, $lightness: 75%);
     padding: 3px 10px;
     border-radius: 3px;
 
-    color: darken($primary, 40%);
+    color: $primary;
     &:hover {
-      color: darken($primary, 40%);
-      background-color: lighten($primary, 76%);
+      color: $primary;
+      background-color: scale-color($primary, $lightness: 90%);
 
 
     }
@@ -1024,11 +1023,11 @@ table.api-keys {
 
 .staff-actions, .screened-emails, .screened-urls, .screened-ip-addresses {
 
-  border-bottom: dotted 1px lighten($primary, 60%);
+  border-bottom: dotted 1px scale-color($primary, $lightness: 75%);
 
   .heading-container {
     width: 100%;
-    background-color: lighten($primary, 60%);
+    background-color: scale-color($primary, $lightness: 90%);
   }
   .col.heading {
     font-weight: bold;
@@ -1044,7 +1043,7 @@ table.api-keys {
 
   .ember-list-item-view {
     width: 100%;
-    border-top: solid 1px lighten($primary, 60%);
+    border-top: solid 1px scale-color($primary, $lightness: 90%);
   }
 }
 
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index de9d7e249..b7c4038a0 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -66,7 +66,7 @@ div.ac-wrap {
       display: inline-block;
       border: 1px solid scale-color($primary, $lightness: 90%);
       &:hover {
-        background-color: scale-color($danger, $lightness: 30%);
+        background-color: scale-color($danger, $lightness: 75%);
         border: 1px solid scale-color($danger, $lightness: 30%);
         text-decoration: none;
         color: $danger;
diff --git a/app/assets/stylesheets/common/base/history.scss b/app/assets/stylesheets/common/base/history.scss
index f21dc9935..52099d85a 100644
--- a/app/assets/stylesheets/common/base/history.scss
+++ b/app/assets/stylesheets/common/base/history.scss
@@ -86,11 +86,11 @@
     filter: alpha(opacity=75);
   }
   .diff-ins {
-    background: scale-color($success, $lightness: 60%);;
+    background: scale-color($success, $lightness: 90%);
   }
   ins {
     color: $success;
-    background: scale-color($success, $lightness: 60%);;
+    background: scale-color($success, $lightness: 90%);
   }
   del, .diff-del {
     code, img {
@@ -113,11 +113,11 @@
     filter: alpha(opacity=50);
   }
   .diff-del {
-    background: scale-color($danger, $lightness: 30%);
+    background: scale-color($danger, $lightness: 60%);
   }
   del {
     color: $danger;
-    background: scale-color($danger, $lightness: 30%);
+    background: scale-color($danger, $lightness: 60%);
   }
   span.date {
     font-weight: bold;
diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index a1b8b1371..5b056d5e9 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -13,8 +13,8 @@ a.loading-onebox {
 .onebox-result {
   margin-top: 15px;
   padding: 12px 25px 12px 12px;
-  border-left: 5px solid scale-color($primary, $lightness: 90%);
-  background: scale-color($primary, $lightness: 90%);
+  border-left: 5px solid scale-color($primary, $lightness: 75%);
+  background: scale-color($primary, $lightness: 95%);
   font-size: 14px;
   > .source {
     margin-bottom: 12px;
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 2c6536f46..f81d897e1 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -2,7 +2,6 @@
 // Variables used throughout the theme
 // --------------------------------------------------
 
-
 // Layout dimensions
 // --------------------------------------------------
 
@@ -10,18 +9,9 @@ $small-width: 950px !default;
 $medium-width: 995px !default;
 $large-width: 1110px !default;
 
-// Primary color variables
+// Brand color variables
 // --------------------------------------------------
 
-$black: #333 !default;
-$white: #fff !default;
-
-$blue: #00aaff !default;
-$yellow: lighten(#FFFF00, 15%) !default;
-$red: #e45735 !default;
-$pink: #fa6c8d !default;
-$green: #009900 !default;
-
 $google: #5b76f7 !default;
 $facebook: #3b5998 !default;
 $cas: #70BA61 !default;
@@ -36,12 +26,6 @@ $base-font-size: 14px !default;
 $base-line-height: 19px !default;
 $base-font-family: Helvetica, Arial, sans-serif !default;
 
-// Broad general variables
-// --------------------------------------------------
-
-
-
-
 @import "colors";
 
 /* This file doesn't actually exist, it is injected by DiscourseSassImporter. */
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 9ca5ffe64..e791dfb8d 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -378,7 +378,7 @@ body {
       }
       .input-prepend .add-on, .input-append .add-on {
         color: $success;
-        background-color:  scale-color($success, $lightness: 60%);
+        background-color:  scale-color($success, $lightness: 90%);
         border-color: $success;
       }
     }
@@ -498,7 +498,7 @@ body {
   .alert {
     padding: 8px 35px 8px 14px;
     margin-bottom: 18px;
-    background-color: scale-color($danger, $lightness: 30%);
+    background-color: scale-color($danger, $lightness: 75%);
     color: #c09853;
   }
   .alert .close {
@@ -508,15 +508,15 @@ body {
     line-height: 18px;
   }
   .alert-success {
-    background-color:  scale-color($success, $lightness: 75%);;
+    background-color:  scale-color($success, $lightness: 90%);
     color: $success;
   }
   .alert-error {
-    background-color:  scale-color($danger, $lightness: 60%);
+    background-color:  scale-color($danger, $lightness: 75%);
     color: $danger;
   }
   .alert-info {
-    background-color: scale-color($tertiary, $lightness: 75%);
+    background-color: scale-color($tertiary, $lightness: 90%);
     color: $primary;
   }
   .alert {
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 495b14ef3..c0da66cb6 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -418,7 +418,7 @@
   font-size: 18px;
   line-height: 25px;
   background: {
-    color: $primary;
+    color: #000;
     image: image-url("spinner_96_w.gif");
     repeat: no-repeat;
     position: 10px 50%;
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index ca764be7d..29ed66faf 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -54,7 +54,7 @@ h1 .topic-statuses .topic-status i {
   position: absolute;
   right: 330px;
   z-index: 400;
-  padding: 2px 8px 3px;
+  padding: 10px 6px 5px;
   border: 1px solid scale-color($primary, $lightness: 90%);
   font-size: 12px;
   background: $secondary;
@@ -121,7 +121,7 @@ nav.post-controls {
   }
 
   .show-replies {
-    background: scale-color($primary, $lightness: 90%);
+    background: scale-color($primary, $lightness: 95%);
     padding: 8px 15px;
     padding-bottom: 20px;
     margin-left: 0;
@@ -244,9 +244,9 @@ nav.post-controls {
   .row {border-top: 1px solid scale-color($primary, $lightness: 90%); padding-top: 7px;}
   .reply:first-of-type .row {border-top: none;}
 
-  background: scale-color($primary, $lightness: 90%);
+  background: scale-color($primary, $lightness: 95%);
   .quote .title, blockquote, .onebox, .onebox-result {
-    background: scale-color($primary, $lightness: 95%);
+    background: scale-color($primary, $lightness: 90%);
     border-left: 5px solid scale-color($primary, $lightness: 75%);
   }
 
@@ -271,13 +271,15 @@ nav.post-controls {
   }
   .topic-meta-data-inside {
     margin: -15px 0 0 0;
-    color: $primary;
+    color: scale-color($primary, $lightness: 50%);
+    a {color: scale-color($primary, $lightness: 50%);}
   }
   .topic-meta-data {padding-top: 20px;}
+  .arrow {color: scale-color($primary, $lightness: 50%);}
 }
 
 .bottom-round nav.post-controls .show-replies {
-background: scale-color($primary, $lightness: 90%);
+background: scale-color($primary, $lightness: 95%);
 margin-bottom: 0;
 padding-bottom: 8px;
   &:hover {background: scale-color($primary, $lightness: 90%);
@@ -671,19 +673,19 @@ iframe {
   }
 }
 
-.deleted {
-  .topic-body {
-  background-color: scale-color($danger, $lightness: 30%);
-  }
-}
-
 .post-hidden {
   opacity: 0.5;
 }
 
 .moderator {
   .topic-body {
-    background-color: scale-color($highlight, $lightness: 60%);
+    background-color: scale-color($highlight, $lightness: 75%);
+  }
+}
+
+.deleted {
+  .topic-body {
+  background-color: scale-color($danger, $lightness: 75%);
   }
 }
 
@@ -781,7 +783,7 @@ blockquote { /* solo quotes */
 
 .quote-controls {
   float: right;
-  color: $primary;
+  color: scale-color($primary, $lightness: 50%);
   a {
   margin: 0;
   }
@@ -789,7 +791,7 @@ blockquote { /* solo quotes */
     .quote-other-topic:before {
     display: inline-block;
     margin-left: 8px;
-    color: $primary;
+    color: scale-color($primary, $lightness: 50%);
     font-family: "FontAwesome";
     position: relative;
     z-index: 20;
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index b58c82206..8c968c1df 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -163,9 +163,7 @@ a:hover.reply-new {
     bottom: 0;
     width: 0;
     border-right: 1px solid  scale-color($primary, $lightness: 90%);
-    // background-color: #d4eaf4;
-    // background-color: #C5E8F7;
-    background-color:  scale-color($success, $lightness: 60%);
+    background-color:  scale-color($success, $lightness: 70%);
     transition: width .75s;
   }
 }
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index a6d5bce05..f3c5b1045 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -124,7 +124,7 @@ display: none;
     height: 70px;
     text-indent: -9999em;
     background: {
-      color: $primary;
+      color: #000;
       image: image-url("spinner_96_w.gif");
       repeat: no-repeat;
       size: 35px;
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 27011c99f..1f27a3663 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -240,7 +240,6 @@
     border-top: 0;
     padding: 7px 10px;
     background-color: scale-color($primary, $lightness: 95%);
-    @include box-shadow(0 1px 3px rgba($primary, 0.22));
     figure {
       float: left;
       margin: 3px 7px 0 0;
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 35b1cd943..a2d2ce785 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -1,5 +1,5 @@
 .gap {
-  background-color: scale-color($primary, $lightness: 90%);
+  background-color: scale-color($primary, $lightness: 95%);
   padding: 5px 15px;
   color: $primary;
   text-align: center;
@@ -7,14 +7,14 @@
 }
 
 .topic-post {
-  border-top: 1px solid scale-color($primary, $lightness: 90%);
+  border-top: 1px solid scale-color($primary, $lightness: 95%);
   padding: 6px 0 3px 0;
 }
 
 nav.post-controls {
   background-color: $secondary;
   padding: 0;
-  border-right: 1px solid scale-color($primary, $lightness: 90%);
+  border-right: 1px solid scale-color($primary, $lightness: 95%);
   clear: both;
   button {color: scale-color($primary, $lightness: 50%);
 }
@@ -122,7 +122,7 @@ a.star {
 
   border-radius: 5px;
   margin: 15px 10px 20px 10px;
-  border: 1px solid scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color($primary, $lightness: 95%);
 
   h3 {
     margin-bottom: 4px;
@@ -202,7 +202,7 @@ a.star {
   }
 
   .information {
-    border-top: 1px solid scale-color($primary, $lightness: 90%);
+    border-top: 1px solid scale-color($primary, $lightness: 95%);
   }
 
   .domain {
@@ -218,15 +218,15 @@ a.star {
     float: right;
     .btn {
       border: 0;
-      border-bottom: 1px solid scale-color($primary, $lightness: 90%);;
-      border-left: 1px solid scale-color($primary, $lightness: 90%);;
+      border-bottom: 1px solid scale-color($primary, $lightness: 95%);;
+      border-left: 1px solid scale-color($primary, $lightness: 95%);;
       padding: 0 23px;
       color: $primary;
       background: scale-color($primary, $lightness: 75%);
       &:hover {
         background: scale-color($primary, $lightness: 75%);
         color: $primary;
-        border-bottom: 1px solid scale-color($primary, $lightness: 90%);
+        border-bottom: 1px solid scale-color($primary, $lightness: 95%);
 
       }
       .fa {
@@ -239,7 +239,7 @@ a.star {
 }
 
 #topic-footer-buttons {
-  border-top: 1px solid scale-color($primary, $lightness: 90%);;
+  border-top: 1px solid scale-color($primary, $lightness: 95%);;
   padding: 20px 10px 0 10px;
 }
 
@@ -285,7 +285,7 @@ span.post-count {
 
 #topic-title {
   z-index: 1000;
-  background:scale-color($primary, $lightness: 90%);
+  background-color: scale-color($primary, $lightness: 95%);
   margin: 0 0 0 0 !important;
   padding: 15px 10px 15px 10px;
 }
@@ -394,7 +394,7 @@ iframe {
 }
 
 .deleted {
-  background-color: $danger;
+background-color: scale-color($danger, $lightness: 75%);
 }
 
 #show-topic-admin {
@@ -468,7 +468,7 @@ blockquote {
 
 .quote .title {
   border-left: 5px solid scale-color($primary, $lightness: 75%);
-  background-color: scale-color($primary, $lightness: 90%);
+  background-color: scale-color($primary, $lightness: 95%);
   padding: 10px 10px 10px 12px;
   clear: both;
   .avatar { margin-right: 7px; }