ux(saas): variable renaming

public/sass/_variables.dark.scss

@@ -31,66 +31,70 @@ $online:                #10a345;
 $warn:                  #ffc03c;
 $critical:              #ed2e18;
 
-// grafana Variables
+// Scaffolding
 // -------------------------
-$panel-bg: 					$gray-darker;
-$panel-border: 				solid 1px $gray-dark;
+$body-bg:  				rgb(20,20,20);
+$page-bg:  				$gray-darker;
+$text-color:      		$gray-lighter;
 
-$divider-border-color: 		#555; 
+// Links
+// -------------------------
+$link-color:             darken($white,11%);
+$link-color-disabled:     darken($link-color,30%);
+$link-color-hover:        $white;
 
-// Graphite Target Editor
-$grafanaTargetBorder:         $black;
-$grafanaTargetBackground:     $gray-dark;
-$grafanaTargetColor:          #c8c8c8;
-$grafanaTargetColorHide:      darken(#c8c8c8, 25%);
-$grafanaTargetSegmentBorder:  #050505;
+// Typography
+// -------------------------
 
-$grafanaTargetFuncBackground: #333;
-$grafanaTargetFuncHightlight: #444;
+$font-family-sans-serif:    "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-serif:       	Georgia, "Times New Roman", Times, serif;
+$font-family-monospace:     Menlo, Monaco, Consolas, "Courier New", monospace;
+$font-family-base:       	$font-family-sans-serif !default;
 
-$grafanaSelectBackground:	$grafanaTargetFuncBackground;
+$font-size-root: 14px !default;
 
-$modalBackground: $black;
-$codeTagBackground: #444;
+$font-size-base: 1rem !default;
+$font-size-lg:   1.25rem !default;
+$font-size-sm:   .875rem !default;
+$font-size-xs:   .75rem !default;
 
-// Scaffolding
-// -------------------------
-$bodyBackground:  rgb(20,20,20);
-$pageBackground:  $gray-darker;
-$textColor:       $gray-lighter;
+$line-height-base: 1.5 !default;
 
-// Links
-// -------------------------
-$linkColor:             darken($white,11%);
-$linkColorDisabled:     darken($linkColor,30%);
-$linkColorHover:        $white;
+$font-size-h1: 2.5rem !default;
+$font-size-h2: 2rem !default;
+$font-size-h3: 1.75rem !default;
+$font-size-h4: 1.5rem !default;
+$font-size-h5: 1.25rem !default;
+$font-size-h6: 1rem !default;
 
+$display1-size: 6rem !default;
+$display2-size: 5.5rem !default;
+$display3-size: 4.5rem !default;
+$display4-size: 3.5rem !default;
 
-// Typography
-// -------------------------
-$sansFontFamily:        "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$serifFontFamily:       Georgia, "Times New Roman", Times, serif;
-$monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
+$display1-weight: 300 !default;
+$display2-weight: 300 !default;
+$display3-weight: 300 !default;
+$display4-weight: 300 !default;
 
 $baseFontSize:          14px;
 $baseFontWeight:		    400;
-$baseFontFamily:        $sansFontFamily;
+$baseFontFamily:        $font-family-sans-serif;
 $baseLineHeight:        20px;
-$altFontFamily:         $serifFontFamily;
+$altFontFamily:         $font-family-serif;
 $fontWeightSemi:		    600;
 
 $headingsFontFamily:    inherit; // empty to use BS default, $baseFontFamily
 $headingsFontWeight:    400;    // instead of browser default, bold
 $headingsFontStyle:    	normal;
-$headingsColor:         darken($white,11%); // empty to use BS default, $textColor
+$headingsColor:         darken($white,11%); // empty to use BS default, $text-color
 $inputText:             $gray-light;
 
-
 // Component sizing
 // -------------------------
 // Based on 14px font-size and 20px line-height
 
-$fontSizeLarge:         $baseFontSize * 1.25; // ~18px
+$font-size-lg:         $baseFontSize * 1.25; // ~18px
 $fontSizeSmall:         $baseFontSize * 0.85; // ~12px
 $fontSizeMini:          $baseFontSize * 0.75; // ~11px
 
@@ -102,13 +106,32 @@ $baseBorderRadius:      3px;
 $borderRadiusLarge:     4px;
 $borderRadiusSmall:     2px;
 
+
+// Panel
+// -------------------------
+$panel-bg: 					$gray-darker;
+$panel-border: 				solid 1px $gray-dark;
+
+$divider-border-color: 		#555; 
+
+// Graphite Target Editor
+$tight-form-border:         #050505;
+$tight-form-bg:     		$gray-dark;
+  
+$tight-form-func-bg: 		#333;
+$tight-form-func-highlight-bg: #444;
+
+$modal-background: $black;
+$code-tag-bg: #444;
+
+
 // Lists
 $grafanaListBackground:  $gray-dark;
 $grafanaListAccent:      lighten($gray-darker, 2%);
 $grafanaListBorderTop:      $gray-dark;
 $grafanaListBorderBottom:   $black;
 $grafanaListHighlight:      #333;
-$grafanaListMainLinkColor: $textColor;
+$grafanaListMainLinkColor: $text-color;
 
 // Scrollbars
 $scrollbarBackground: #3a3a3a;
@@ -146,7 +169,7 @@ $btnDangerBackgroundHighlight:      darken($red, 3%);
 
 $btnInverseBackground:              $gray-dark;
 $btnInverseBackgroundHighlight:     lighten($gray-dark, 1%);
-$btnInverseText:                    $textColor;
+$btnInverseText:                    $link-color;
 $btnInverseBorder:                  #333;
 
 $btnText:              				$gray;
@@ -174,7 +197,7 @@ $labelBackground:				$gray-dark;
 
 
 // Search
-$searchShadow: 0 0 35px 0 $bodyBackground;
+$searchShadow: 0 0 35px 0 $body-bg;
 
 // Dropdowns
 // -------------------------
@@ -183,9 +206,9 @@ $dropdownBorder:                rgba(0,0,0,.2);
 $dropdownDividerTop:            transparent;
 $dropdownDividerBottom:         #444;
 $dropdownDivider:               $dropdownDividerBottom;
-$dropdownTitle:                 $linkColorDisabled;
+$dropdownTitle:                 $link-color-disabled;
 
-$dropdownLinkColor:             $textColor;
+$dropdownLinkColor:             $text-color;
 $dropdownLinkColorHover:        $white;
 $dropdownLinkColorActive:       $white;
 
@@ -209,7 +232,7 @@ $zindexModalBackdrop:     1040;
 $zindexModal:             1050;
 
 // -------------------------
-$placeholderText:         darken($textColor, 25%);
+$placeholderText:         darken($text-color, 25%);
 
 
 // Hr border color
@@ -229,7 +252,7 @@ $wellBackground:                  #131517;
 $navbarHeight:                    52px;
 $navbarBackgroundHighlight:       $gray-dark;
 $navbarBackground:                $gray-dark;
-$navbarBorder:                    1px solid $bodyBackground;
+$navbarBorder:                    1px solid $body-bg;
 
 $navbarText:                      $gray-light;
 $navbarLinkColor:                 $gray-light;
@@ -237,8 +260,8 @@ $navbarLinkColorHover:            $white;
 $navbarLinkColorActive:           $navbarLinkColorHover;
 $navbarLinkBackgroundHover:       transparent;
 $navbarLinkBackgroundActive:      $navbarBackground;
-$navbarBrandColor:                $linkColor;
-$navbarDropdownShadow:            inset 0px 4px 10px -4px $bodyBackground;
+$navbarBrandColor:                $link-color;
+$navbarDropdownShadow:            inset 0px 4px 10px -4px $body-bg;
 
 $navbarButtonBackground:          lighten($navbarBackground, 3%);
 $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
@@ -248,11 +271,11 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
 $sideMenuTopShadow:          $navbarDropdownShadow;
 $sideMenuBackground:         $gray-dark;
 $sideMenuBackgroundHighlight: lighten($gray-dark, 4%);
-$sideMenuShadow: 0 0 35px 0 $bodyBackground;
+$sideMenuShadow: 0 0 35px 0 $body-bg;
 
 // Pagination
 // -------------------------
-$paginationBackground:                $bodyBackground;
+$paginationBackground:                $body-bg;
 $paginationBorder:                    transparent;
 $paginationActiveBackground:          $blue;
 
@@ -276,7 +299,7 @@ $tooltipColor:            $white;
 $tooltipBackground:       rgb(58, 57, 57);
 $tooltipArrowWidth:       5px;
 $tooltipArrowColor:       $tooltipBackground;
-$tooltipLinkColor:        $linkColor;
+$tooltipLinkColor:        $link-color;
 
 $popoverBackground:       $heroUnitBackground;
 $popoverArrowWidth:       10px;

public/sass/_variables.light.scss

@@ -36,68 +36,64 @@ $online:                #01A64F;
 $warn:                  #F79520;
 $critical:              #EC2128;
 
-// grafana Variables
-// -------------------------
-$panel-bg: 	$gray-lighter;
-$panel-border: 	  	solid 1px #ddd;
-
-$divider-border-color: 		$gray-light;
-
 // Scaffolding
 // -------------------------
-$bodyBackground:      #EFEFEF;
-$pageBackground:  	  $white;
-$textColor:           $gray;
-
-// Submenu
-$submenuBackground:     rgb(218, 217, 217);
-$submenuBorder:         $white;
-
-// Graphite Target Editor
-$grafanaTargetBorder:         #ddd;
-$grafanaTargetBackground:     #efefef;
-$grafanaTargetColor:          $textColor;
-$grafanaTargetColorHide:      lighten($textColor, 25%);
-$grafanaTargetSegmentBorder:  #ddd;
-
-$grafanaTargetFuncBackground: darken($grafanaTargetBackground, 5%);
-$grafanaTargetFuncHightlight: darken($grafanaTargetBackground, 10%);
-
-$grafanaSelectBackground: $grafanaTargetFuncBackground;
 
-$modalBackground: $bodyBackground;
-$codeTagBackground: #ddd;
+$body-bg:  rgb(20,20,20);
+$page-bg:  $gray-darker;
+$text-color:       $gray-lighter;
 
 // Links
 // -------------------------
-$linkColor:             $gray;
-$linkColorDisabled:     lighten($linkColor,30%);
-$linkColorHover:        darken($linkColor, 20%);
+$link-color:             $gray;
+$link-color-disabled:     lighten($link-color,30%);
+$link-color-hover:        darken($link-color, 20%);
 
 // Typography
 // -------------------------
-$sansFontFamily:        "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$serifFontFamily:       Georgia, "Times New Roman", Times, serif;
-$monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
+$font-family-sans-serif:        "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-serif:       Georgia, "Times New Roman", Times, serif;
+$font-family-monospace:        Menlo, Monaco, Consolas, "Courier New", monospace;
 
 $baseFontSize:          14px;
 $baseFontWeight:		    400;
 $fontWeightSemi:		    600;
-$baseFontFamily:        $sansFontFamily;
+$baseFontFamily:        $font-family-sans-serif;
 $baseLineHeight:        20px;
-$altFontFamily:         $serifFontFamily;
+$altFontFamily:         $font-family-serif;
 
 $headingsFontFamily:    inherit; // inherit. empty to use BS default, $baseFontFamily
 $headingsFontWeight:    normal;    // instead of browser default, bold
 $headingsFontStyle:    	normal;
-$headingsColor:         $textColor; // empty to use BS default, $textColor
+$headingsColor:         $text-color; // empty to use BS default, $text-color
+
+// Panel
+// -------------------------
+  
+$panel-bg: 		  $gray-lighter;
+$panel-border: 	  solid 1px #ddd;
+
+$divider-border-color: 		$gray-light;
+
+// Submenu
+$submenuBackground:     rgb(218, 217, 217);
+$submenuBorder:         $white;
+
+// Graphite Target Editor
+$tight-form-border:         #ddd;
+$tight-form-bg:     		#efefef;
+
+$tight-form-func-bg: 			darken($tight-form-bg, 5%);
+$tight-form-func-highlight-bg: 	darken($tight-form-bg, 10%);
 
+$modal-background: 		$body-bg;
+$code-tag-bg: 	#ddd;
 
 // Component sizing
 // -------------------------
 // Based on 14px font-size and 20px line-height
 
-$fontSizeLarge:         $baseFontSize * 1.25; // ~18px
+$font-size-lg:         $baseFontSize * 1.25; // ~18px
 $fontSizeSmall:         $baseFontSize * 0.85; // ~12px
 $fontSizeMini:          $baseFontSize * 0.75; // ~11px
 
@@ -116,7 +112,7 @@ $grafanaListBorderTop:         #eee;
 $grafanaListBorderBottom:      #eee;
 $grafanaListHighlight:         darken($gray-lighter,10%);
 $grafanaListHighlightContrast: #ddd;
-$grafanaListMainLinkColor:     $textColor;
+$grafanaListMainLinkColor:     $text-color;
 
 
 // Tables
@@ -188,7 +184,7 @@ $searchShadow: 0 5px 30px 0 lighten($gray-light, 30%);
 // Dropdowns
 // -------------------------
 $dropdownBackground:            $white;
-$dropdownBorder:                $grafanaTargetBorder;
+$dropdownBorder:                $tight-form-border;
 $dropdownDividerTop:            #e5e5e5;
 $dropdownDividerBottom:         $white;
 $dropdownDivider:               $dropdownDividerTop;
@@ -244,7 +240,7 @@ $wellBackground:                  $gray-lighter;
 $navbarHeight:                    52px;
 $navbarBackgroundHighlight:       #f8f8f8;
 $navbarBackground:                #f8f8f8;
-$navbarBorder:                    1px solid $grafanaTargetBorder;
+$navbarBorder:                    1px solid $tight-form-border;
 
 $navbarText:                      #666;
 $navbarLinkColor:                 #666;
@@ -252,7 +248,7 @@ $navbarLinkColorHover:            #333;
 $navbarLinkColorActive:           #555;
 $navbarLinkBackgroundHover:       transparent;
 $navbarLinkBackgroundActive:      darken($navbarBackground, 6.5%);
-$navbarDropdownShadow:            inset 0px 4px 7px -4px darken($bodyBackground, 20%);
+$navbarDropdownShadow:            inset 0px 4px 7px -4px darken($body-bg, 20%);
 
 $navbarBrandColor:                $navbarLinkColor;
 

public/sass/base/_base.scss

@@ -8,8 +8,8 @@ body {
   font-family: $baseFontFamily;
   font-size: $baseFontSize;
   line-height: $baseLineHeight;
-  color: $textColor;
-  background-color: $bodyBackground;
+  color: $text-color;
+  background-color: $body-bg;
 }
 
 
@@ -17,12 +17,12 @@ body {
 // -------------------------
 
 a {
-  color: $linkColor;
+  color: $link-color;
   text-decoration: none;
 
   &:hover,
   &:focus {
-    color: $linkColorHover;
+    color: $link-color-hover;
     text-decoration: none;
   }
 

public/sass/base/_code.scss

@@ -8,9 +8,9 @@ code,
 pre {
   @include font-family-monospace();
   font-size: $baseFontSize - 2;
-  background-color: $codeTagBackground;
-  color: $textColor;
-  border: 1px solid darken($codeTagBackground, 15%);
+  background-color: $code-tag-bg;
+  color: $text-color;
+  border: 1px solid darken($code-tag-bg, 15%);
   padding: 2px;
 }
 

public/sass/base/_type.scss

@@ -244,12 +244,12 @@ a.external-link {
 
 
 .link {
-  color: $linkColor;
+  color: $link-color;
   cursor: pointer;
 }
 
 .link:hover {
-  color: $linkColorHover;
+  color: $link-color-hover;
 }
 
 .pointer {

public/sass/components/_buttons.scss

@@ -52,7 +52,7 @@
 // Large
 .btn-large {
   padding: 6px 20px;
-  font-size: $fontSizeLarge;
+  font-size: $font-size-lg;
 }
 
 .btn-small {
@@ -92,7 +92,7 @@
 .btn-inverse {
   @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseText);
   box-shadow: none;
-  border: 1px solid $grafanaTargetFuncHightlight;
+  border: 1px solid $tight-form-func-highlight-bg;
 }
 
 .btn-text {

public/sass/components/_dashboard.scss

@@ -100,7 +100,7 @@
 }
 
 div.flot-text {
-  color: $textColor !important;
+  color: $text-color !important;
 }
 
 .panel {
@@ -204,7 +204,7 @@ div.flot-text {
 .panel-menu {
   z-index: 500;
   position: absolute;
-  background: $grafanaTargetFuncBackground;
+  background: $tight-form-func-bg;
   border: 1px solid black;
 
   .panel-menu-row {

public/sass/components/_dropdown.scss

@@ -79,7 +79,7 @@
 
     i {
       padding-right: 5px;
-      color: $linkColorDisabled;
+      color: $link-color-disabled;
     }
   }
 }

public/sass/components/_filter-table.scss

@@ -19,7 +19,7 @@
 
 .filter-table tr {
   background: $grafanaListBackground;
-  border-bottom: 2px solid $pageBackground;
+  border-bottom: 2px solid $page-bg;
 }
 
 .filter-table th {

public/sass/components/_gfbox.scss

@@ -2,7 +2,7 @@
   margin: 10px 5px;
   background-color: $panel-bg;
   position: relative;
-  border: 1px solid $grafanaTargetFuncBackground;
+  border: 1px solid $tight-form-func-bg;
 }
 
 .gf-box-no-margin {
@@ -19,7 +19,7 @@
   i {
     font-size: 120%;
   }
-  color: $textColor;
+  color: $text-color;
   &:hover {
     color: $white;
   }
@@ -42,9 +42,9 @@
 }
 
 .gf-box-header {
-  border-bottom: 1px solid $grafanaTargetFuncBackground;
+  border-bottom: 1px solid $tight-form-func-bg;
   overflow: hidden;
-  background-color: $grafanaTargetBackground;
+  background-color: $tight-form-bg;
   .tabs {
     float: left;
   }
@@ -57,13 +57,13 @@
   padding-right: 20px;
   padding-left: 10px;
   float: left;
-  color: $linkColor;
+  color: $link-color;
   font-size: 18px;
   font-weight: normal;
   line-height: 38px;
   margin: 0;
   .fa {
     padding: 0 8px 0 5px;
-    color: $textColor;
+    color: $text-color;
   }
 }

public/sass/components/_infobox.scss

@@ -11,8 +11,8 @@
 .grafana-info-box {
   position: relative;
   padding: 5px 15px;
-  background-color: $grafanaTargetBackground;
-  border: 1px solid $grafanaTargetBorder;
+  background-color: $tight-form-bg;
+  border: 1px solid $tight-form-border;
   h5 {
     margin-top: 5px;
   }

public/sass/components/_modals.scss

@@ -62,7 +62,7 @@
 }
 
 .modal-no-header {
-  border: 1px solid $grafanaTargetFuncBackground;
+  border: 1px solid $tight-form-func-bg;
   text-align: center;
 
   h3 {
@@ -92,7 +92,7 @@
 
   .confirm-modal-title {
     font-size: 18px;
-    color: $linkColor;
+    color: $link-color;
     margin-bottom: 15px;
   }
 

public/sass/components/_navbar.scss

@@ -66,7 +66,7 @@
   margin: 18px 0 6px 5px;
   float: left;
   font-size: 120%;
-  color: $textColor;
+  color: $text-color;
 }
 
 .top-nav-btn {
@@ -75,7 +75,7 @@
   float: left;
   margin: 0;
   font-size: 1.4em;
-  border-right: 1px solid $grafanaTargetBorder;
+  border-right: 1px solid $tight-form-border;
 
   .fa-caret-down {
     font-size: 55%;
@@ -86,12 +86,12 @@
   }
 
   a {
-    color: darken($linkColor, 5%);
+    color: darken($link-color, 5%);
     background-color: $navbarButtonBackground;
     display: inline-block;
     &:hover {
       background: $navbarButtonBackgroundHighlight;
-      color: $linkColor;
+      color: $link-color;
       // border-bottom: 1px solid $blue;
     }
   }
@@ -107,7 +107,7 @@
   }
   .top-nav-logo-background {
     display: inline-block;
-    border: 1px solid $bodyBackground;
+    border: 1px solid $body-bg;
     padding: 4px;
     border-radius: 50%;
     background: $iconContainerBackground;
@@ -171,7 +171,7 @@
   float: left;
   font-size: 17px;
   padding: 18px 10px 10px 13px;
-  color: $linkColor;
+  color: $link-color;
 }
 
 

public/sass/components/_navs.scss

@@ -67,7 +67,7 @@
 .nav-list > .active > a:focus {
   color: $white;
   text-shadow: 0 -1px 0 rgba(0,0,0,.2);
-  background-color: $linkColor;
+  background-color: $link-color;
 }
 .nav-list [class^="icon-"],
 .nav-list [class*=" icon-"] {
@@ -122,7 +122,7 @@
 .nav-tabs > .active > a:hover,
 .nav-tabs > .active > a:focus {
   color: $gray;
-  background-color: $bodyBackground;
+  background-color: $body-bg;
   border: 1px solid #ddd;
   border-bottom-color: transparent;
   cursor: default;
@@ -133,14 +133,14 @@
 // -------------------------
 // Make carets use linkColor to start
 .nav .dropdown-toggle .caret {
-  border-top-color: $linkColor;
-  border-bottom-color: $linkColor;
+  border-top-color: $link-color;
+  border-bottom-color: $link-color;
   margin-top: 6px;
 }
 .nav .dropdown-toggle:hover .caret,
 .nav .dropdown-toggle:focus .caret {
-  border-top-color: $linkColorHover;
-  border-bottom-color: $linkColorHover;
+  border-top-color: $link-color-hover;
+  border-bottom-color: $link-color-hover;
 }
 /* move down carets for tabs */
 .nav-tabs .dropdown-toggle .caret {

public/sass/components/_pagination.scss

@@ -70,7 +70,7 @@
   ul > li > a,
   ul > li > span {
     padding: $paddingLarge;
-    font-size: $fontSizeLarge;
+    font-size: $font-size-lg;
   }
   ul > li:first-child > a,
   ul > li:first-child > span {

public/sass/components/_panel_dashlist.scss

@@ -6,8 +6,8 @@
   display: block;
   margin: 5px;
   padding: 7px;
-  background-color: $grafanaTargetBackground;
-  border: 1px solid $grafanaTargetBorder;
+  background-color: $tight-form-bg;
+  border: 1px solid $tight-form-border;
   .fa {
     float: right;
     padding-top: 3px;
@@ -17,6 +17,6 @@
   }
 
   &:hover {
-    background-color: $grafanaTargetFuncBackground;
+    background-color: $tight-form-func-bg;
   }
 }

public/sass/components/_panel_graph.scss

@@ -175,7 +175,7 @@
 
 .graph-legend-series-hidden {
   a {
-    color: $linkColorDisabled;
+    color: $link-color-disabled;
   }
 }
 
@@ -192,7 +192,7 @@
   }
   .close {
     margin-right: 5px;
-    color: $linkColor;
+    color: $link-color;
     opacity: 0.7;
     text-shadow: none;
   }
@@ -286,7 +286,7 @@
 }
 
 .axisLabel {
-  color: $textColor;
+  color: $text-color;
   font-size: $fontSizeSmall;
   position: absolute;
   text-align: center;

public/sass/components/_panel_table.scss

@@ -37,7 +37,7 @@
     border-left-width: 0;
 
     &:hover {
-      background-color: $grafanaTargetFuncBackground;
+      background-color: $tight-form-func-bg;
     }
 
     &.active {
@@ -63,8 +63,8 @@
 
   td {
     padding: 0.45em 0 0.45em 1.1em;
-    border-bottom: 2px solid $bodyBackground;
-    border-right: 2px solid $bodyBackground;
+    border-bottom: 2px solid $body-bg;
+    border-right: 2px solid $body-bg;
 
     &:first-child {
       padding-left: 15px;
@@ -77,8 +77,8 @@
 
 .table-panel-header-bg {
   background: $grafanaListAccent;
-  border-top: 2px solid $bodyBackground;
-  border-bottom: 2px solid $bodyBackground;
+  border-top: 2px solid $body-bg;
+  border-bottom: 2px solid $body-bg;
   height: 2.0em;
   position: absolute;
   top: 0;

public/sass/components/_sidemenu.scss

@@ -9,7 +9,7 @@ $sideMenuWidth:  220px;
   top: 52px;
   left: 0;
   width: $sideMenuWidth;
-  background-color: $bodyBackground;
+  background-color: $body-bg;
   z-index: 101;
   transform: translate3d(0, -100%, 0);
   visibility: hidden;
@@ -40,7 +40,7 @@ $sideMenuWidth:  220px;
   }
   .top-nav-menu-btn {
     a {
-      background-color: $pageBackground;
+      background-color: $page-bg;
       padding-right: 67px;
       padding-left: 22px;
     }
@@ -73,7 +73,7 @@ $sideMenuWidth:  220px;
         display: block;
         top: 0px;
         left: $sideMenuWidth;
-        background-color: $bodyBackground;
+        background-color: $body-bg;
       }
     }
   }
@@ -97,7 +97,7 @@ $sideMenuWidth:  220px;
   height: 40px;
   display: inline-block;
   i {
-    color: $linkColor;
+    color: $link-color;
     opacity: .7;
     position: relative;
     left: 7px;
@@ -111,7 +111,7 @@ $sideMenuWidth:  220px;
 }
 
 .sidemenu-item {
-  color: $linkColor;
+  color: $link-color;
   line-height: 47px;
   padding: 0px 10px 0px 10px;
   display: block;
@@ -183,7 +183,7 @@ $sideMenuWidth:  220px;
   top: 38%;
   right: 25px;
   font-size: 14px;
-  color: $linkColor;
+  color: $link-color;
 }
 
 .sidemenu-org-avatar,
@@ -205,13 +205,13 @@ $sideMenuWidth:  220px;
 
 .sidemenu-org-details {
   padding-left: 10px;
-  color: $linkColor;
+  color: $link-color;
 }
 
 .sidemenu-org-name {
   display: block;
   font-size: 13px;
-  color: $linkColorDisabled;
+  color: $link-color-disabled;
 }
 
 .sidemenu-org-user {

public/sass/components/_submenu.scss

@@ -4,7 +4,7 @@
 }
 
 .annotation-disabled, .annotation-disabled a {
-  color: $linkColorDisabled;
+  color: $link-color-disabled;
 }
 
 .annotation-segment {
@@ -56,7 +56,7 @@
   z-index: 1000;
   font-size: $baseFontSize;
   border-radius: 3px 3px 0 0;
-  border: 1px solid $grafanaTargetFuncBackground;
+  border: 1px solid $tight-form-func-bg;
 
   &.multi {
    .selected {
@@ -71,7 +71,7 @@
      display: none;
    }
    .selected {
-     background-color: $grafanaTargetFuncHightlight;
+     background-color: $tight-form-func-highlight-bg;
    }
  }
 }
@@ -86,7 +86,7 @@
   display: table-cell;
   line-height: 26px;
   &:nth-child(2) {
-    border-left: 1px solid $grafanaTargetFuncBackground;
+    border-left: 1px solid $tight-form-func-bg;
   }
 }
 
@@ -129,5 +129,5 @@
 .dash-nav-link {
   padding: 8px 7px;
   display: inline-block;
-  color: $textColor;
+  color: $text-color;
 }

public/sass/components/_tables_lists.scss

@@ -37,7 +37,7 @@
   display: block;
   padding: 1px 10px;
   line-height: 34px;
-  background-color: $grafanaTargetBackground;
+  background-color: $tight-form-bg;
   margin-bottom: 4px;
   cursor: pointer;
 }

public/sass/components/_tabs.scss

@@ -5,7 +5,7 @@
   margin: 0 0 10px 0;
 
 	& > li > a {
-	  color: darken($linkColor, 20%);
+	  color: darken($link-color, 20%);
 	}
 
 	li > a:hover {
@@ -19,11 +19,11 @@
 	  border: 1px solid $divider-border-color;	  
 	  background-color: transparent;
 	  border-bottom: 1px solid $panel-bg;
-	  color: $linkColor;
+	  color: $link-color;
 	}
 
 	li.disabled > a {
-		color: $textColor;
+		color: $text-color;
 	}
 
 	.open .dropdown-toggle {

public/sass/components/_tagsinput.scss

@@ -8,7 +8,7 @@
 
   input {
     border: none;
-    border-right: 1px solid $grafanaTargetSegmentBorder;
+    border-right: 1px solid $tight-form-border;
     margin: 0px;
     border-radius: 0;
     padding: 8px 6px;

public/sass/components/_tightform.scss

@@ -1,11 +1,11 @@
 .tight-form {
-  border-top: 1px solid $grafanaTargetBorder;
-  border-left: 1px solid $grafanaTargetBorder;
-  border-right: 1px solid $grafanaTargetBorder;
-  background: $grafanaTargetBackground;
+  border-top: 1px solid $tight-form-border;
+  border-left: 1px solid $tight-form-border;
+  border-right: 1px solid $tight-form-border;
+  background: $tight-form-bg;
 
   &.last {
-    border-bottom: 1px solid $grafanaTargetBorder;
+    border-bottom: 1px solid $tight-form-border;
   }
 
   &.borderless {
@@ -21,7 +21,7 @@
 }
 
 .tight-form-container-no-item-borders {
-  border: 1px solid $grafanaTargetBorder;
+  border: 1px solid $tight-form-border;
   border-bottom: none;
 
   .tight-form, .tight-form-item, [type=text].tight-form-input, [type=text].tight-form-clear-input  {
@@ -44,7 +44,7 @@
 }
 
 .tight-form-container {
-  border-bottom: 1px solid $grafanaTargetBorder;
+  border-bottom: 1px solid $tight-form-border;
 }
 
 .tight-form-btn {
@@ -73,16 +73,19 @@
   padding: 8px 7px;
   display: inline-block;
   font-weight: normal;
-  border-right: 1px solid $grafanaTargetSegmentBorder;
-  color: $grafanaTargetColor;
+  border-right: 1px solid $tight-form-border;
   display: inline-block;
+  color: $text-color;
 
   .has-open-function & {
     padding-top: 25px;
   }
 
   .tight-form-disabled & {
-    color: $grafanaTargetColorHide;
+    color: $link-color-disabled;
+    a {
+      color: $link-color-disabled;
+    }
   }
 
   &:hover, &:focus {
@@ -90,7 +93,7 @@
   }
 
   &a:hover {
-    background: $grafanaTargetFuncBackground;
+    background: $tight-form-func-bg;
   }
 
   &.last {
@@ -108,14 +111,8 @@
 }
 
 .tight-form-func {
-  background: $grafanaTargetFuncBackground;
-  > a {
-    color: $grafanaTargetColor;
-  }
-  > a:hover {
-    color: $linkColor;
-  }
-
+  background: $tight-form-func-bg;
+  
   &.show-function-controls {
     padding-top: 5px;
     min-width: 100px;
@@ -134,10 +131,9 @@ input[type=text].tight-form-clear-input {
   padding: 8px 7px;
   border: none;
   margin: 0px;
-  background: transparent;
-  color: $grafanaTargetColor;
+  background: transparent;  
   border-radius: 0;
-  border-right: 1px solid $grafanaTargetSegmentBorder;
+  border-right: 1px solid $tight-form-border;
 }
 
 [type=text],
@@ -146,7 +142,7 @@ input[type=text].tight-form-clear-input {
 [type=password] {
   &.tight-form-input {
     border: none;
-    border-right: 1px solid $grafanaTargetSegmentBorder;
+    border-right: 1px solid $tight-form-border;
     margin: 0px;
     border-radius: 0;
     padding: 8px 6px;
@@ -170,7 +166,7 @@ input[type=checkbox].tight-form-checkbox {
 
 select.tight-form-input {
   border: none;
-  border-right: 1px solid $grafanaTargetSegmentBorder;
+  border-right: 1px solid $tight-form-border;
   margin: 0px;
   border-radius: 0;
   height: 36px;

public/sass/components/_timepicker.scss

@@ -36,7 +36,7 @@
 }
 
 .gf-timepicker-utc {
-  background-color: $grafanaTargetFuncBackground;
+  background-color: $tight-form-func-bg;
   color: $orange;
   font-size: 75%;
   padding: 3px;
@@ -71,7 +71,7 @@
     background-image: none;
     border: none;
     padding: 6px 9px;
-    color: $textColor;
+    color: $text-color;
     &.active span {
       color: $blue;
       font-weight: bold;
@@ -84,5 +84,5 @@
 }
 
 .input-datetime-format {
-  color: $linkColorDisabled
+  color: $link-color-disabled
 }

public/sass/layout/_page.scss

@@ -23,7 +23,7 @@
 }
 
 .page-container {
-  background-color: $pageBackground;
+  background-color: $page-bg;
   position: relative;
   padding: 25px 56px 10px 56px;
   max-width: 1060px;
@@ -61,8 +61,8 @@
   h2 {
     margin-left: 15px;
     margin-bottom: 0px;
-    font-size: $fontSizeLarge;
-    color: $textColor;
+    font-size: $font-size-lg;
+    color: $text-color;
     i {
       padding-right: 6px;
     }

public/sass/mixins/_buttons.scss

@@ -1,15 +1,15 @@
 
 // Button backgrounds
 // ------------------
-@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
+@mixin buttonBackground($startColor, $endColor, $text-color: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
-  @include gradientBar($startColor, $endColor, $textColor, $textShadow);
+  @include gradientBar($startColor, $endColor, $text-color, $textShadow);
 
   box-shadow: inset 0 -4px rgba(0,0,0,0.3);
 
   // in these cases the gradient won't cover the background, so we override
   &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
-    color: $textColor;
+    color: $text-color;
     background-image: none;
     background-color: darken($endColor, 2%);
   }

public/sass/mixins/_mixins.scss

@@ -78,15 +78,15 @@
 // --------------------------------------------------
 
 @mixin font-family-serif() {
-  font-family: $serifFontFamily;
+  font-family: $font-family-serif;
 }
 
 @mixin font-family-sans-serif() {
-  font-family: $sansFontFamily;
+  font-family: $font-family-sans-serif;
 }
 
 @mixin font-family-monospace() {
-  font-family: $monoFontFamily;
+  font-family: $font-family-monospace;
 }
 
 @mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
@@ -278,8 +278,8 @@
 }
 
 // Gradient Bar Colors for buttons and alerts
-@mixin gradientBar($primaryColor, $secondaryColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
-  color: $textColor;
+@mixin gradientBar($primaryColor, $secondaryColor, $text-color: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
+  color: $text-color;
   text-shadow: $textShadow;
   @include gradient-vertical($primaryColor, $secondaryColor);
   border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);

public/sass/pages/_login.scss

@@ -18,7 +18,7 @@
     width: 125px;
   }
   .icon-gf-grafana_wordmark {
-    color: $linkColor;
+    color: $link-color;
     position: relative;
     top: -90px;
     font-size: 3rem;
@@ -31,7 +31,7 @@
 }
 
 .login-tab-header {
-  background: $grafanaTargetBackground;
+  background: $tight-form-bg;
   text-align: center;
 }
 
@@ -42,14 +42,14 @@
   padding: 10px 10px;
 
   &.active {
-    background: darken($grafanaTargetBackground, 5%);
+    background: darken($tight-form-bg, 5%);
     color: $white;
   }
 
   font-weight: bold;
   display: inline-block;
   width: 170px;
-  color: $textColor;
+  color: $text-color;
 }
 
 .password-strength {
@@ -58,7 +58,7 @@
   overflow: visible;
   white-space: nowrap;
   padding-top: 3px;
-  color: darken($textColor, 20%);
+  color: darken($text-color, 20%);
   border-top: 3px solid $red;
   &.password-strength-ok {
     width: 40%;
@@ -102,7 +102,7 @@
 }
 
 .password-recovery {
-  background: $grafanaTargetBackground;
+  background: $tight-form-bg;
   margin-top: 10px;
   padding: 10px;
   a {
@@ -143,7 +143,7 @@
 
 .invite-box {
   text-align: center;
-  border: 1px solid $grafanaTargetFuncBackground;
+  border: 1px solid $tight-form-func-bg;
 	background-color: $panel-bg;
   width: 800px;
   margin-left: auto;