Merge pull request #5 from atom/dark-original

Dark Alpha

index.less

@@ -1,15 +1,15 @@
-@import 'stylesheets/atom';
-@import 'stylesheets/utilities';
-@import 'stylesheets/text';
-@import 'stylesheets/git';
-@import 'stylesheets/sites';
-@import 'stylesheets/progress';
-@import 'stylesheets/buttons';
-@import 'stylesheets/panels';
-@import 'stylesheets/panes';
-@import 'stylesheets/lists';
-@import 'stylesheets/editor';
-@import 'stylesheets/tabs';
-@import 'stylesheets/tooltips';
-@import 'stylesheets/overlays';
-@import 'stylesheets/dropdowns';
+@import "stylesheets/atom";
+@import "stylesheets/buttons";
+@import "stylesheets/editor";
+@import "stylesheets/git";
+@import "stylesheets/lists";
+@import "stylesheets/overlays";
+@import "stylesheets/panels";
+@import "stylesheets/panes";
+@import "stylesheets/progress";
+@import "stylesheets/sites";
+@import "stylesheets/tabs";
+@import "stylesheets/text";
+@import "stylesheets/tooltips";
+@import "stylesheets/tree-view";
+@import "stylesheets/utilities";

stylesheets/lists.less

@@ -21,17 +21,23 @@
   .generate-list-item-text-color(error);
   .generate-list-item-text-color(selected);
 
-  .generate-list-item-status-color(@textClass, @status) {
+  .generate-list-item-status-color(@color, @status) {
     li:not(.list-nested-item).status-@{status},
     li.list-nested-item.status-@{status} > .list-item {
-      .text(@textClass);
+      color: @color;
     }
   }
-  .generate-list-item-status-color(subtle, ignored);
-  .generate-list-item-status-color(info, added);
-  .generate-list-item-status-color(success, renamed);
-  .generate-list-item-status-color(warning, modified);
-  .generate-list-item-status-color(error, removed);
+
+  .generate-list-item-status-color(@text-color-subtle, ignored);
+  .generate-list-item-status-color(@text-color-added, added);
+  .generate-list-item-status-color(@text-color-renamed, renamed);
+  .generate-list-item-status-color(@text-color-modified, modified);
+  .generate-list-item-status-color(@text-color-removed, removed);
+
+  li:not(.list-nested-item).selected,
+  li.list-nested-item.selected > .list-item {
+    .text(selected);
+  }
 
   li:not(.list-nested-item):hover,
   li.list-nested-item:hover > .list-item, // i.e. highlight directory when hover child file
@@ -47,13 +53,16 @@
 &.select-list ol.list-group {
   li.two-lines {
     .secondary-line { color: @text-color-subtle; }
-    &.selected .secondary-line { color: lighten(@text-color-subtle, 10%); }
+    &.selected .secondary-line {
+      color: @text-color;
+      text-shadow: none;
+    }
   }
 
   // We want to highlight the background of the list items because we dont
   // know their size.
   li.selected {
-    background-color: @background-color-highlight;
+    background-color: @background-color-selected;
     &:before{ display: none; }
   }
 
@@ -87,7 +96,7 @@
 
 .select-list.popover-list {
   background-color: @overlay-background-color;
-  -webkit-box-shadow: 0 0 3px 3px @base-border-color;
+  box-shadow: 0 0 10px @base-border-color;
   padding: @component-padding/2;
   border-radius: @component-border-radius;
   border: 1px solid @overlay-border-color;
@@ -109,7 +118,7 @@
   // For sortable lists in the settings view
   li.ui-sortable-placeholder {
     visibility: visible !important;
-    background-color: darken(@pane-item-background-color, 3%);
+    background-color: darken(@pane-item-background-color, 10%);
   }
 }
 

stylesheets/tree-view.less

@@ -0,0 +1,32 @@
+@import "ui-variables";
+
+.tree-view {
+  font-size: @font-size;
+  background: @tree-view-background-color;
+
+  .selected:before {
+  	background: #444;
+    box-shadow: inset -3px 0 0 rgba(0,0,0, .05);
+  }
+}
+
+.focusable-panel {
+  opacity: 1;
+  background: #303030;
+  box-shadow: inset -3px 0 0 rgba(0,0,0, .05);
+
+  &:focus {
+    background: #282828;
+
+    .selected:before {
+      background: @background-color-selected;
+    }
+
+    .selected > .name,
+    .selected > .name:before,
+    .selected > .list-item > .name,
+    .selected > .list-item > .name:before {
+      color: #fff !important;
+    }
+  }
+}

stylesheets/ui-mixins.less

@@ -5,7 +5,7 @@
 .text(normal) {
   font-weight: normal;
   color: @text-color;
-  text-shadow: 0 -1px 0 #333;
+  text-shadow: none;
 }
 .text(subtle) {
   font-weight: normal;
@@ -15,7 +15,7 @@
 .text(highlight) {
   font-weight: normal;
   color: @text-color-highlight;
-  text-shadow: 0 -1px 0 #333;
+  text-shadow: 0 1px 0 rgba(0,0,0, .5);
 }
 .text(selected) {
   .text(highlight)

stylesheets/ui-variables.less

@@ -6,16 +6,22 @@
 @text-color-selected: @text-color-highlight;
 
 @text-color-info: #5293d8;
-@text-color-success: #1fe977;
-@text-color-warning: #f78a46;
+@text-color-success: #529b2f;
+@text-color-warning: #ff982d;
 @text-color-error: #c00;
 
+@text-color-ignored: @text-color-subtle;
+@text-color-added: @text-color-success;
+@text-color-renamed: @text-color-info;
+@text-color-modified: @text-color-warning;
+@text-color-removed: @text-color-error;
+
 @background-color-info: #0098ff;
 @background-color-success: #17ca65;
 @background-color-warning: #ff4800;
 @background-color-error: #c00;
 @background-color-highlight: rgba(255, 255, 255, 0.07);
-@background-color-selected: @background-color-highlight;
+@background-color-selected: #4182C4;
 
 @app-background-color: #333;