From 4e607876eaf9b5bbb6027f10292492c118c97427 Mon Sep 17 00:00:00 2001
From: Trent White <trent@wearecapacity.com>
Date: Thu, 26 Feb 2015 15:22:15 -0500
Subject: [PATCH] further cleanup of styles to make sidebar more readable for
 light theme. This tweaked link colors, dropdown colors and table tweaks for
 things like Add API to make them feel a little more organized through shades
 of gray.

---
 src/css/less/navbar.less          |  2 +-
 src/css/less/sidemenu.less        |  7 ++++---
 src/css/less/variables.dark.less  |  1 +
 src/css/less/variables.light.less | 32 ++++++++++++++++---------------
 4 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/css/less/navbar.less b/src/css/less/navbar.less
index 604f7d8c225..f69b7b91e5a 100644
--- a/src/css/less/navbar.less
+++ b/src/css/less/navbar.less
@@ -76,7 +76,7 @@
     &:hover {
       background: @grafanaTargetFuncHightlight;
       .fa {
-        color: @linkColorHover
+        color: @linkColorHover;
       }
     }
   }
diff --git a/src/css/less/sidemenu.less b/src/css/less/sidemenu.less
index c26997efb1f..e7fc5b9f431 100644
--- a/src/css/less/sidemenu.less
+++ b/src/css/less/sidemenu.less
@@ -38,6 +38,7 @@
 
 .sidemenu {
   font-size: 16px;
+  font-weight: @baseFontWeight;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -104,7 +105,7 @@
     padding-right: 5px;
     padding-top: 5px;
     font-size: 170%;
-    color: @textColor;
+    color: @linkColor;
   }
 }
 
@@ -113,7 +114,7 @@
   height: 40px;
   display: inline-block;
   i {
-    color: @textColor;
+    color: @linkColor;
     opacity: .7;
     position: relative;
     left: 7px;
@@ -126,7 +127,7 @@
 }
 
 .sidemenu-item {
-  color: @grayLight;
+  color: @linkColor;
   line-height: 40px;
 	padding: 0px 10px 0px 20px;
 	display: block;
diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less
index 729020bd2d7..3114bedfb3a 100644
--- a/src/css/less/variables.dark.less
+++ b/src/css/less/variables.dark.less
@@ -61,6 +61,7 @@
 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
 
 @baseFontSize:          14px;
+@baseFontWeight:		400;
 @baseFontFamily:        @sansFontFamily;
 @baseLineHeight:        20px;
 @altFontFamily:         @serifFontFamily;
diff --git a/src/css/less/variables.light.less b/src/css/less/variables.light.less
index 4b862300fda..077eecc9d17 100644
--- a/src/css/less/variables.light.less
+++ b/src/css/less/variables.light.less
@@ -20,7 +20,8 @@
 
 // Accent colors
 // -------------------------
-@blue:                  #007FFF;
+@blueOrig:              #007FFF;
+@blue:             		#2AB2E4; 
 @blueDark:              #75CAEB;
 @green:                 #28B62C;
 @red:                   #FF4136;
@@ -44,11 +45,11 @@
 @fullEditBorder:          @grayLighter;
 
 // Graphite Target Editor
-@grafanaTargetBorder:         @submenuBackground;
-@grafanaTargetBackground:     @white;
+@grafanaTargetBorder:         #ddd;
+@grafanaTargetBackground:     #efefef;
 @grafanaTargetColor:          @textColor;
 @grafanaTargetColorHide:      lighten(@textColor, 25%);
-@grafanaTargetSegmentBorder:  @submenuBackground;
+@grafanaTargetSegmentBorder:  #ddd;
 
 @grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%);
 @grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%);
@@ -56,14 +57,14 @@
 // Scaffolding
 // -------------------------
 @bodyBackground:        #EAEAEA;
-@textColor:             #666;
+@textColor:             @gray;
 
 
 // Links
 // -------------------------
-@linkColor:             darken(@textColor, 20%);
+@linkColor:             @gray;
 @linkColorDisabled:     lighten(@linkColor,30%);
-@linkColorHover:        @gray;
+@linkColorHover:        @grayDarker;
 
 
 // Typography
@@ -73,6 +74,7 @@
 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
 
 @baseFontSize:          14px;
+@baseFontWeight:		400;
 @baseFontFamily:        @sansFontFamily;
 @baseLineHeight:        20px;
 @altFontFamily:         @serifFontFamily;
@@ -99,13 +101,13 @@
 @borderRadiusSmall:     2px;
 
 // Lists
-@grafanaListBackground:  	lighten(@grayLight,35%);
-@grafanaListAccent:         @grayLighter;
-@grafanaListBorderTop:      #eee;
-@grafanaListBorderBottom:   #efefef;
-@grafanaListHighlight:      lighten(@grayLight,20%);
+@grafanaListBackground:  	   lighten(@grayLight,20%);
+@grafanaListAccent:            lighten(@grayLight,10%);
+@grafanaListBorderTop:         #eee;
+@grafanaListBorderBottom:      #eee;
+@grafanaListHighlight:         lighten(@grayLight,10%);
 @grafanaListHighlightContrast: #ddd;
-@grafanaListMainLinkColor: @textColor;
+@grafanaListMainLinkColor:     @textColor;
 
 
 // Tables
@@ -172,8 +174,8 @@
 @dropdownLinkColorHover:        @white;
 @dropdownLinkColorActive:       @white;
 
-@dropdownLinkBackgroundActive:  lighten(@grayLight,20%);
-@dropdownLinkBackgroundHover:   lighten(@grayLight,20%);
+@dropdownLinkBackgroundActive:  @blue;
+@dropdownLinkBackgroundHover:   @blue;