adding is-focused to body, and styling light ui

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'

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

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);
 }

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  {