From c2aefa76161750e3329777518fd8d9db255b31f3 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Thu, 15 Aug 2013 13:23:14 -0700
Subject: [PATCH] Change colors in dark ui to match pattern in light ui colors

---
 themes/atom-dark-ui/archive-view.less  |  6 ++--
 themes/atom-dark-ui/atom.less          |  2 +-
 themes/atom-dark-ui/blurred.less       |  2 +-
 themes/atom-dark-ui/command-panel.less | 22 ++++++------
 themes/atom-dark-ui/editor.less        |  6 ++--
 themes/atom-dark-ui/image-view.less    |  2 +-
 themes/atom-dark-ui/overlay.less       |  2 +-
 themes/atom-dark-ui/select-list.less   | 10 +++---
 themes/atom-dark-ui/status-bar.less    |  6 ++--
 themes/atom-dark-ui/tabs.less          |  6 ++--
 themes/atom-dark-ui/tree-view.less     | 10 +++---
 themes/atom-dark-ui/ui-colors.less     | 47 +++++++++++++++++++-------
 12 files changed, 73 insertions(+), 48 deletions(-)

diff --git a/themes/atom-dark-ui/archive-view.less b/themes/atom-dark-ui/archive-view.less
index 7b0b1466a..02ae1769a 100644
--- a/themes/atom-dark-ui/archive-view.less
+++ b/themes/atom-dark-ui/archive-view.less
@@ -1,7 +1,7 @@
 @import "ui-colors";
 
 .archive-view {
-  background-color: @background-color-4;
+  background-color: @background-color-2;
   color: @text-color-subtle-1;
 
   .selected {
@@ -10,11 +10,11 @@
   }
 
   .summary {
-    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+    background-image: -webkit-linear-gradient(@highlight-background-color-2, @highlight-background-color-1);
     border: 1px solid rgba(0, 0, 0, 0.5);
     padding: 5px;
     box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.05),
+      inset 0 1px 0 @highlight-background-color-1,
       inset 0 -1px 0 rgba(255, 255, 255, 0.02);
   }
 }
diff --git a/themes/atom-dark-ui/atom.less b/themes/atom-dark-ui/atom.less
index 12a4d51ca..368296ec6 100644
--- a/themes/atom-dark-ui/atom.less
+++ b/themes/atom-dark-ui/atom.less
@@ -3,7 +3,7 @@
 html, body,
 #root-view {
   font: caption;
-  background-color: @background-color-1;
+  background-color: @light-background-color-1;
 }
 
 #root-view #panes .row > * + * {
diff --git a/themes/atom-dark-ui/blurred.less b/themes/atom-dark-ui/blurred.less
index 7e59ad9a4..4d53e9bed 100644
--- a/themes/atom-dark-ui/blurred.less
+++ b/themes/atom-dark-ui/blurred.less
@@ -2,7 +2,7 @@
 
 .is-blurred {
   .tree-view {
-    background-color: @background-color-3;
+    background-color: @background-color-1;
   }
 
   .tab {
diff --git a/themes/atom-dark-ui/command-panel.less b/themes/atom-dark-ui/command-panel.less
index 1e9f619c4..1bf64050e 100644
--- a/themes/atom-dark-ui/command-panel.less
+++ b/themes/atom-dark-ui/command-panel.less
@@ -2,24 +2,24 @@
 @import "bootstrap/less/mixins.less";
 
 .command-panel {
-  background-color: @background-color-4;
+  background-color: @background-color-2;
   color: #dedede;
   border-top: 1px solid rgba(0, 0, 0, 0.5);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  box-shadow: inset 0 1px 0 @highlight-background-color-1;
   padding: 10px;
 
   .btn {
-    .btn-pseudo-states(@background-color-6, @background-color-4);
+    .btn-pseudo-states(@dark-background-color-2, @background-color-2);
     color: @text-color-4;
   }
 }
 
 .command-panel .header {
-  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+  background-image: -webkit-linear-gradient(@highlight-background-color-2, @highlight-background-color-1);
   border: 1px solid rgba(0, 0, 0, 0.5);
   padding: 5px;
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    inset 0 1px 0 @highlight-background-color-1,
     inset 0 -1px 0 rgba(255, 255, 255, 0.02);
   margin-bottom: 0;
   border-top-right-radius: 3px;
@@ -27,11 +27,11 @@
 }
 
 .command-panel .preview-list {
-  background-color: @background-color-6;
+  background-color: @dark-background-color-2;
   color: #6d736f;
   border: 1px solid rgba(0, 0, 0, 0.2);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  border-right: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid @border-color-1;
+  border-right: 1px solid @border-color-1;
 }
 
 .command-panel .preview-count {
@@ -44,7 +44,7 @@
 }
 
 .command-panel .expand-collapse li {
-  background: -webkit-linear-gradient(@background-color-6, @background-color-4);
+  background: -webkit-linear-gradient(@dark-background-color-2, @background-color-2);
   box-shadow:
     inset -1px -1px 0 rgba(255, 255, 255, 0.1),
     inset 1px 1px rgba(0, 0, 0, 0.1);
@@ -56,12 +56,12 @@
 
 .command-panel .preview-list .path.selected .path-details,
 .command-panel .preview-list li.operation.selected {
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: @highlight-background-color-1;
 }
 
 .command-panel .preview-list:focus .path.selected .path-details,
 .command-panel .preview-list:focus li.operation.selected {
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: @highlight-background-color-1;
 }
 
 .command-panel .preview-list .path {
diff --git a/themes/atom-dark-ui/editor.less b/themes/atom-dark-ui/editor.less
index ed246e1fa..e26363d7d 100644
--- a/themes/atom-dark-ui/editor.less
+++ b/themes/atom-dark-ui/editor.less
@@ -1,7 +1,9 @@
+@import "ui-colors";
+
 .editor.mini {
   border: 1px solid rgba(0, 0, 0, 0.5);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  border-right: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid @border-color-1;
+  border-right: 1px solid @border-color-1;
 }
 
 .editor .gutter.drop-shadow {
diff --git a/themes/atom-dark-ui/image-view.less b/themes/atom-dark-ui/image-view.less
index dba7e414a..120630574 100644
--- a/themes/atom-dark-ui/image-view.less
+++ b/themes/atom-dark-ui/image-view.less
@@ -1,7 +1,7 @@
 @import "ui-colors";
 
 .image-view {
-  background-color: @background-color-4;
+  background-color: @background-color-2;
 
   img {
       border-color: #c5c8c6;
diff --git a/themes/atom-dark-ui/overlay.less b/themes/atom-dark-ui/overlay.less
index ab1c7ea13..cedb7ba37 100644
--- a/themes/atom-dark-ui/overlay.less
+++ b/themes/atom-dark-ui/overlay.less
@@ -1,7 +1,7 @@
 @import "ui-colors";
 
 .overlay {
-  background: @background-color-3;
+  background: @background-color-1;
   color: @text-color-2;
   border: 1px solid @border-color-1;
 }
diff --git a/themes/atom-dark-ui/select-list.less b/themes/atom-dark-ui/select-list.less
index c4a8d755a..8f3cfb7a3 100644
--- a/themes/atom-dark-ui/select-list.less
+++ b/themes/atom-dark-ui/select-list.less
@@ -1,7 +1,7 @@
 @import "ui-colors";
 
 .select-list {
-  background: @background-color-3;
+  background: @background-color-1;
 
   .error {
     color: white;
@@ -9,15 +9,15 @@
   }
 
   .loading {
-    color: #ccc;
+    color: @text-color-3;
   }
 
   ol {
     border: 1px solid #222;
 
     li {
-      background-color: @background-color-2;
-      border-bottom: 1px solid #1e1e1e;
+      background-color: @background-color-3;
+      border-bottom: 1px solid @border-color-3;
       color: @text-color-2;
     }
 
@@ -25,7 +25,7 @@
       background: -webkit-linear-gradient(
         rgba(100, 100, 100, 0.5),
         rgba(70,70,70, 0.5));
-      color: #ccc;
+      color: @text-color-3;
       -webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.1);
       display: inline-block;
       line-height: 100%;
diff --git a/themes/atom-dark-ui/status-bar.less b/themes/atom-dark-ui/status-bar.less
index ccdfd0495..caae18efb 100644
--- a/themes/atom-dark-ui/status-bar.less
+++ b/themes/atom-dark-ui/status-bar.less
@@ -1,15 +1,15 @@
 @import "ui-colors";
 
 .status-bar {
-  background-color: @background-color-4;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  background-color: @background-color-2;
+  box-shadow: inset 0 1px 0 @highlight-background-color-1;
   border-top: 1px solid rgba(0, 0, 0, 0.8);
   color: @text-color-4;
 }
 
 .status-bar .grammar-name:hover {
   color: #fff;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid @highlight-background-color-1;
   border-radius: 2px;
 }
 
diff --git a/themes/atom-dark-ui/tabs.less b/themes/atom-dark-ui/tabs.less
index 0cf53c282..8e6e4fb8a 100644
--- a/themes/atom-dark-ui/tabs.less
+++ b/themes/atom-dark-ui/tabs.less
@@ -9,12 +9,12 @@
 
 .tab {
   margin: 0 0 1px 1px;
-  background-image: -webkit-linear-gradient(#292c2f, @background-color-4);
+  background-image: -webkit-linear-gradient(#292c2f, @background-color-2);
   box-shadow:
     inset 0 2px 0 rgba(255, 255, 255, 0.1),
     inset 0 1px 0 rgba(0, 0, 0, 1),
-    inset 1px 0 0 rgba(255, 255, 255, 0.05),
-    inset -1px 0 0 rgba(255, 255, 255, 0.05);
+    inset 1px 0 0 @highlight-background-color-1,
+    inset -1px 0 0 @highlight-background-color-1;
   color: #b9bdc1;
 }
 
diff --git a/themes/atom-dark-ui/tree-view.less b/themes/atom-dark-ui/tree-view.less
index 3945876b1..542a03728 100644
--- a/themes/atom-dark-ui/tree-view.less
+++ b/themes/atom-dark-ui/tree-view.less
@@ -4,7 +4,7 @@
   border-right: 1px solid @border-color-2;
 }
 .tree-view {
-  background: @background-color-4;
+  background: @background-color-2;
   box-shadow:
     1px 0 0 #131516,
     inset -1px 0 0 rgba(255, 255, 255, 0.02),
@@ -22,11 +22,13 @@
 }
 
 .tree-view .selected > .highlight {
-  background-image: -webkit-linear-gradient(#4e4e4e, #434343);
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(@highlight-background-color-2, fadeout(@highlight-background-color-2, 3%));
 }
 
 .tree-view:focus .selected > .highlight {
-  background-image: -webkit-linear-gradient(#7d7d7d, @highlight-background-color-1);
+  background-color: @highlight-background-color-3;
+  background-image: -webkit-linear-gradient(@highlight-background-color-3, fadeout(@highlight-background-color-3, 3%));
 }
 
 .tree-view:focus .directory.selected > .header > .name,
@@ -69,7 +71,7 @@
 }
 
 .tree-view-dialog {
-  background-color: @background-color-1;
+  background-color: @light-background-color-1;
   border-top: 1px solid #555;
   -webkit-box-shadow: 0 0 3px 3px rgba(0, 0, 0, .5);
 }
diff --git a/themes/atom-dark-ui/ui-colors.less b/themes/atom-dark-ui/ui-colors.less
index a5a9fb4e2..b110ac408 100644
--- a/themes/atom-dark-ui/ui-colors.less
+++ b/themes/atom-dark-ui/ui-colors.less
@@ -2,33 +2,54 @@
 @text-color-1: #fff;
 @text-color-2: #eee;
 @text-color-3: #bbb;
-@text-color-4: #969696;
+
+// For opposite color scheme things. Like a bright background with text.
+@text-alt-color-1: #333;
+@text-alt-color-2: #333;
+@text-alt-color-3: #333;
 
 // Number increase is more subtle
 @text-color-subtle-1: #777;
 @text-color-subtle-2: #555;
+@text-color-subtle-3: #333;
 
-// Darker as they increase
-@background-color-1: #333;
-@background-color-2: #27292b;
-@background-color-3: #202123;
-@background-color-4: #1d1f21; // maybe unnecessary from 3 on. 
-@background-color-5: #1b1c1e;
-@background-color-6: #19191a;
+// Main color, then darker and lighter.
+@background-color-1: #202123;
+@background-color-2: #1d1f21;
+@background-color-3: #27292b;
 
+// Main color, darker, lighter.
 // Supposed to match up with the background color indices
-@highlight-background-color-1: #737373;
-@highlight-background-color-2: #373A3c;
+@highlight-background-color-1: rgba(255, 255, 255, 0.05);
+@highlight-background-color-2: rgba(255, 255, 255, 0.1);
+@highlight-background-color-3: rgba(255, 255, 255, 0.2);
 
-// These could match up to the background colors as well.
+// These match up to the background colors as well.
 @border-color-1: rgba(255, 255, 255, 0.05);
 @border-color-2: #19191a;
+@border-color-3: #1e1e1e;
 
 // Info colors are generally blue
 @accent-color-info-1: #5293d8;
-@accent-color-info-2: #66a6ff;
 @accent-color-info-3: #0098ff;
+@accent-color-info-2: #66a6ff;
 
-// Error colors are generally red
+// Error colors are generally red/orange
 @accent-color-error-1: #f78a46;
+@accent-color-error-2: #ff4800;
+@accent-color-error-3: #ffa275;
 
+// Bright color, darker then lighter.
+// Success colors are generally green
+@accent-color-success-1: #1fe977;
+@accent-color-success-2: #17ca65;
+@accent-color-success-3: #58f79d;
+
+
+// Colors not standard for themes.
+@light-background-color-1: #333;
+
+@dark-background-color-1: #1b1c1e;
+@dark-background-color-2: #19191a;
+
+@text-color-4: #969696;
\ No newline at end of file