ux(sass): variable renaming

public/sass/_variables.dark.scss

@@ -6,17 +6,17 @@
 // -------------------------
 $black:                 #000;
 $gray:                  #bbb;
-$gray-dark:              #262626;
-$gray-darker:            #1f1f1f;
+$gray-dark:             #262626;
+$gray-darker:           #1f1f1f;
 
-$gray-light:             #ADAFAE;
-$gray-lighter:           #BBBFC2;
+$gray-light:            #ADAFAE;
+$gray-lighter:          #BBBFC2;
 $white:                 #fff;
 
 // Accent colors
 // -------------------------
 $blue:                  #33B5E5;
-$blue-dark:              #005f81;
+$blue-dark:             #005f81;
 $green:                 #669900;
 $red:                   #CC3900;
 $yellow:                #ECBB13;
@@ -33,9 +33,10 @@ $critical:              #ed2e18;
 
 // grafana Variables
 // -------------------------
-$grafanaPanelBackground: 	$gray-darker;
-$grafanaPanelBorder: 		  solid 1px $gray-dark;
-$grafanaTriggerBorder:		solid 1px #555;
+$panel-bg: 					$gray-darker;
+$panel-border: 				solid 1px $gray-dark;
+
+$divider-border-color: 		#555; 
 
 // Graphite Target Editor
 $grafanaTargetBorder:         $black;

public/sass/_variables.light.scss

@@ -10,11 +10,11 @@
 // Grays
 // -------------------------
 $black:                 #000;
-$gray-darker:            lighten(#000, 11.5%); // #222
-$gray-dark:              lighten(#000, 20%);   // #333
+$gray-darker:           lighten(#000, 11.5%); // #222
+$gray-dark:             lighten(#000, 20%);   // #333
 $gray:                  lighten(#000, 33.5%); // #555
-$gray-light:             lighten(#000, 60%);   // #999
-$gray-lighter:           lighten(#000, 97.5%); // #eee
+$gray-light:            lighten(#000, 60%);   // #999
+$gray-lighter:          lighten(#000, 97.5%); // #eee
 $white:                 #fff;
 
 
@@ -38,9 +38,10 @@ $critical:              #EC2128;
 
 // grafana Variables
 // -------------------------
-$grafanaPanelBackground: 	$gray-lighter;
-$grafanaPanelBorder: 	  	solid 1px #ddd;
-$grafanaTriggerBorder:		solid 1px $gray-light;
+$panel-bg: 	$gray-lighter;
+$panel-border: 	  	solid 1px #ddd;
+
+$divider-border-color: 		$gray-light;
 
 // Scaffolding
 // -------------------------
@@ -178,7 +179,7 @@ $labelBackground:				#f8f8f8;
 
 // Sidemenu
 // -------------------------
-$sideMenuBackground:            $grafanaPanelBackground;
+$sideMenuBackground:            $panel-bg;
 $sideMenuBackgroundHighlight:   darken($sideMenuBackground, 4%);
 
 // search

public/sass/components/_dashboard.scss

@@ -47,7 +47,7 @@
 .row-close {
   padding: 0px;
   margin: 0px;
-  background: $grafanaPanelBackground;
+  background: $panel-bg;
   text-align: center;
 }
 
@@ -116,9 +116,9 @@ div.flot-text {
 }
 
 .panel-container {
-  background-color: $grafanaPanelBackground;
+  background-color: $panel-bg;
   position: relative;
-  border: $grafanaPanelBorder;
+  border: $panel-border;
   &:hover {
     .panel-actions {
       display: block;
@@ -185,7 +185,7 @@ div.flot-text {
   position: absolute;
   border-left: 31px solid transparent;
   border-right: 30px solid transparent;
-  border-bottom: 27px solid $grafanaPanelBackground;
+  border-bottom: 27px solid $panel-bg;
   left: 0;
   bottom: 0;
 }

public/sass/components/_filter-list.scss

@@ -16,7 +16,7 @@
 .filter-list > li {
   padding: 10px;
   margin-bottom: 2px;
-  background: $grafanaPanelBackground;
+  background: $panel-bg;
 
   &:last-child {
     margin: 0;

public/sass/components/_filter-table.scss

@@ -49,7 +49,7 @@
 }
 
 .filter-table .expanded {
-  border-color: $grafanaPanelBackground;
+  border-color: $panel-bg;
 }
 
 .filter-table .expanded > td {

public/sass/components/_gfbox.scss

@@ -1,6 +1,6 @@
 .gf-box {
   margin: 10px 5px;
-  background-color: $grafanaPanelBackground;
+  background-color: $panel-bg;
   position: relative;
   border: 1px solid $grafanaTargetFuncBackground;
 }

public/sass/components/_modals.scss

@@ -23,7 +23,7 @@
   position: fixed;
   z-index: $zindexModal;
   width: 100%;
-	background-color: $grafanaPanelBackground;
+	background-color: $panel-bg;
   @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
   @include background-clip(padding-box);
   outline: none;
@@ -38,7 +38,7 @@
 
 .modal-header {
   padding: 9px 15px;
-	border-bottom: 1px solid $grafanaPanelBackground;
+	border-bottom: 1px solid $panel-bg;
 }
 
 // Body (where all modal content resides)
@@ -55,8 +55,8 @@
 // Footer (for actions)
 .modal-footer {
   padding: 14px 15px 15px;
-	border-top: 1px solid $grafanaPanelBackground;
-  background-color: $grafanaPanelBackground;
+	border-top: 1px solid $panel-bg;
+  background-color: $panel-bg;
   text-align: right; // right align buttons
   @include clearfix(); // clear it in case folks use .pull-* classes on buttons
 }

public/sass/components/_search.scss

@@ -7,8 +7,8 @@
   width: 700px;
   box-shadow: $searchShadow;
   padding: 10px;
-  background-color: $grafanaPanelBackground;
-  border: $grafanaPanelBorder;
+  background-color: $panel-bg;
+  border: $panel-border;
 
   .label-tag {
     margin-left: 6px;

public/sass/components/_submenu.scss

@@ -18,8 +18,8 @@
   margin-right: 20px;
   display: inline-block;
   border-radius: 3px;
-  background-color: $grafanaPanelBackground;
-  border: $grafanaPanelBorder;
+  background-color: $panel-bg;
+  border: $panel-border;
   margin-right: 10px;
   display: inline-block;
 

public/sass/components/_tables_lists.scss

@@ -4,14 +4,14 @@
   th {
     text-align: left;
     padding: 5px 10px;
-    border-bottom: 4px solid $grafanaPanelBackground;
+    border-bottom: 4px solid $panel-bg;
   }
 
   tr td {
     background-color: $grafanaListBackground;
     padding: 5px 10px;
     white-space: nowrap;
-    border-bottom: 4px solid $grafanaPanelBackground;
+    border-bottom: 4px solid $panel-bg;
     &.nobg {
       background-color: transparent;
     }

public/sass/components/_tabs.scss

@@ -1,6 +1,6 @@
 
 .nav-tabs-alt {
-  border-bottom: $grafanaTriggerBorder;
+  border-bottom: 1px solid $divider-border-color;
   padding-left: 10px;
   margin: 0 0 10px 0;
 
@@ -16,9 +16,9 @@
 	li.active > a:focus,
 	li.active > a:hover {
     @include border-radius(3px);
-	  border: $grafanaTriggerBorder;
+	  border: 1px solid $divider-border-color;	  
 	  background-color: transparent;
-	  border-bottom: 1px solid $grafanaPanelBackground;
+	  border-bottom: 1px solid $panel-bg;
 	  color: $linkColor;
 	}
 
@@ -33,7 +33,7 @@
 
   .tab-content {
     padding: 10px;
-    background-color: $grafanaPanelBackground;
+    background-color: $panel-bg;
   }
 }
 

public/sass/components/_timepicker.scss

@@ -16,14 +16,14 @@
   margin: -5px -10px 10px 5px;
   padding: 10px 20px;
   float: right;
-  background-color: $grafanaPanelBackground;
+  background-color: $panel-bg;
   @include box-shadow($navbarDropdownShadow);
 }
 
 .gf-timepicker-absolute-section {
   width: 300px;
   float: left;
-  border-right: $grafanaTriggerBorder;
+  border-right: 1px solid $divider-border-color;
   padding: 0 0 0 20px;
   select {
     width: 183px;

public/sass/pages/_apps.scss

@@ -1,7 +1,7 @@
 
 .app-edit-logo-box {
   padding: 1.2rem;
-  background: $grafanaPanelBackground;
+  background: $panel-bg;
   text-align: center;
   img {
     max-width: 7rem;
@@ -14,7 +14,7 @@
   margin: 0 0 0 2rem;
 
   li {
-    background: $grafanaPanelBackground;
+    background: $panel-bg;
     margin-top: 4px;
     padding: 0.2rem 1rem;
   }

public/sass/pages/_login.scss

@@ -27,7 +27,7 @@
 }
 
 .login-inner-box {
-  background: $grafanaPanelBackground;
+  background: $panel-bg;
 }
 
 .login-tab-header {
@@ -144,7 +144,7 @@
 .invite-box {
   text-align: center;
   border: 1px solid $grafanaTargetFuncBackground;
-	background-color: $grafanaPanelBackground;
+	background-color: $panel-bg;
   width: 800px;
   margin-left: auto;
   margin-right: auto;

public/sass/pages/_playlist.scss

@@ -4,7 +4,7 @@
   position: relative;
   width: 700px;
   box-shadow: 0px 0px 55px 0px black;
-  background-color: $grafanaPanelBackground;
+  background-color: $panel-bg;
 
   .label-tag {
     margin-left: 6px;