From e54c3d8fbbde8f8bac08192a2ca9caf719f25f7e Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Fri, 1 Feb 2013 18:40:53 -0500
Subject: [PATCH] adding is-focused to body, and styling light ui

---
 spec/app/window-spec.coffee        |  8 ++++++++
 src/app/window.coffee              |  1 +
 themes/atom-light-ui/tabs.css      | 14 ++++++++++++-
 themes/atom-light-ui/tree-view.css | 32 ++++++++++++++++++++++++++----
 4 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/spec/app/window-spec.coffee b/spec/app/window-spec.coffee
index 2471d6cc3..c8a61920b 100644
--- a/spec/app/window-spec.coffee
+++ b/spec/app/window-spec.coffee
@@ -13,6 +13,14 @@ describe "Window", ->
     atom.setRootViewStateForPath(rootView.project.getPath(), null)
     $(window).off 'beforeunload'
 
+  describe "window is loaded", ->
+    it "has .is-focused on the body tag", ->
+      expect($("body").hasClass("is-focused")).toBe true
+
+    it "doesn't have .is-focused on the window blur", ->
+      $(window).blur()
+      expect($("body").hasClass("is-focused")).toBe false
+
   describe ".close()", ->
     it "is triggered by the 'core:close' event", ->
       spyOn window, 'close'
diff --git a/src/app/window.coffee b/src/app/window.coffee
index d990b28a4..d0cad8b32 100644
--- a/src/app/window.coffee
+++ b/src/app/window.coffee
@@ -28,6 +28,7 @@ windowAdditions =
 
     $(window).on 'core:close', => @close()
     $(window).command 'window:close', => @close()
+    $(window).on 'focus blur', => $("body").toggleClass("is-focused")
 
   # This method is intended only to be run when starting a normal application
   # Note: RootView assigns itself on window on initialization so that
diff --git a/themes/atom-light-ui/tabs.css b/themes/atom-light-ui/tabs.css
index 9e909e32d..ffa248c8f 100644
--- a/themes/atom-light-ui/tabs.css
+++ b/themes/atom-light-ui/tabs.css
@@ -6,7 +6,7 @@
   margin-bottom: 1px;
 }
 
-.tab {
+.is-focused .tab {
   cursor: default;
   padding: 2px 21px 2px 9px;
   background-image: -webkit-linear-gradient(#e0e0e0, #bfbfbf);
@@ -17,6 +17,18 @@
   color: #323232;
 }
 
+.tab {
+  cursor: default;
+  padding: 2px 21px 2px 9px;
+  background-image: none;
+  background-color: #e0e0e0);
+  border-top: none;
+  border-right: 1px solid #959595;
+  border-bottom: 1px solid #959595;
+  box-shadow: inset 0 0 5px #eee, 0 1px 0 #eee, inset -1px 0 0 #e0e0e0, inset 1px 0 0 #e0e0e0;
+  color: #323232;
+}
+
 .tab:hover {
   background-image: -webkit-linear-gradient(#e2e2e2, #e0e0e0);
 }
diff --git a/themes/atom-light-ui/tree-view.css b/themes/atom-light-ui/tree-view.css
index c0f599fc2..7a833b7a2 100644
--- a/themes/atom-light-ui/tree-view.css
+++ b/themes/atom-light-ui/tree-view.css
@@ -1,8 +1,13 @@
-.tree-view {
+.is-focused .tree-view {
   background: #dde3e8;
   border-right: 1px solid #989898;
 }
 
+.tree-view {
+  background: #f3f3f3;
+  border-right: 1px solid #c5c5c5;
+}
+
 .tree-view .entry {
   text-shadow: 0 1px 0 #fff;
 }
@@ -20,7 +25,7 @@
   color: #262626;
 }
 
-.tree-view .selected > .highlight {
+.is-focused .tree-view .selected > .highlight {
   box-sizing: border-box;
   border-top: 1px solid #97a4a7;
   border-bottom: 1px solid #97a4a7;
@@ -28,12 +33,27 @@
   background-image: -webkit-linear-gradient(#cad5d8, #bcccce);
 }
 
-.tree-view:focus .selected > .highlight {
+.tree-view .selected > .highlight {
+  box-sizing: border-box;
+  border-top: 1px solid #97a4a7;
+  border-bottom: 1px solid #97a4a7;
+  background-image: none;
+  background-color: #DFDFDF;
+}
+
+.is-focused .tree-view:focus .selected > .highlight {
   border-top: 1px solid #3D4552;
   border-bottom: 1px solid #3D4552;
   background-image: -webkit-linear-gradient(#7e868d, #69717b);
 }
 
+.tree-view:focus .selected > .highlight {
+  border-top: 1px solid #3D4552;
+  border-bottom: 1px solid #3D4552;
+  background-image: none;
+  background-color: #69717b;
+}
+
 .tree-view:focus .directory.selected > .header > .name,
 .tree-view:focus .selected > .name,
 .tree-view:focus .directory.selected > .header > .name:before,
@@ -50,10 +70,14 @@
   color: #262626;
 }
 
-.tree-view .name:before {
+.is-focused .tree-view .name:before {
   color: #7e8692;
 }
 
+.tree-view .name:before {
+  color: #7e7e7e;
+}
+
 .tree-view .entry:hover,
 .tree-view .directory .header:hover .name,
 .tree-view .directory .header:hover .disclosure-arrow  {