ux(sass): variable renaming

public/sass/_variables.dark.scss

@@ -6,17 +6,17 @@
 // -------------------------
 $black:                 #000;
 $gray:                  #bbb;
-$grayDark:              #262626;
-$grayDarker:            #1f1f1f;
+$gray-dark:              #262626;
+$gray-darker:            #1f1f1f;
 
-$grayLight:             #ADAFAE;
-$grayLighter:           #BBBFC2;
+$gray-light:             #ADAFAE;
+$gray-lighter:           #BBBFC2;
 $white:                 #fff;
 
 // Accent colors
 // -------------------------
 $blue:                  #33B5E5;
-$blueDark:              #005f81;
+$blue-dark:              #005f81;
 $green:                 #669900;
 $red:                   #CC3900;
 $yellow:                #ECBB13;
@@ -33,13 +33,13 @@ $critical:              #ed2e18;
 
 // grafana Variables
 // -------------------------
-$grafanaPanelBackground: 	$grayDarker;
-$grafanaPanelBorder: 		  solid 1px $grayDark;
+$grafanaPanelBackground: 	$gray-darker;
+$grafanaPanelBorder: 		  solid 1px $gray-dark;
 $grafanaTriggerBorder:		solid 1px #555;
 
 // Graphite Target Editor
 $grafanaTargetBorder:         $black;
-$grafanaTargetBackground:     $grayDark;
+$grafanaTargetBackground:     $gray-dark;
 $grafanaTargetColor:          #c8c8c8;
 $grafanaTargetColorHide:      darken(#c8c8c8, 25%);
 $grafanaTargetSegmentBorder:  #050505;
@@ -55,8 +55,8 @@ $codeTagBackground: #444;
 // Scaffolding
 // -------------------------
 $bodyBackground:  rgb(20,20,20);
-$pageBackground:  $grayDarker;
-$textColor:       $grayLighter;
+$pageBackground:  $gray-darker;
+$textColor:       $gray-lighter;
 
 // Links
 // -------------------------
@@ -82,7 +82,7 @@ $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
-$inputText:             $grayLight;
+$inputText:             $gray-light;
 
 
 // Component sizing
@@ -102,9 +102,9 @@ $borderRadiusLarge:     4px;
 $borderRadiusSmall:     2px;
 
 // Lists
-$grafanaListBackground:  $grayDark;
-$grafanaListAccent:      lighten($grayDarker, 2%);
-$grafanaListBorderTop:      $grayDark;
+$grafanaListBackground:  $gray-dark;
+$grafanaListAccent:      lighten($gray-darker, 2%);
+$grafanaListBorderTop:      $gray-dark;
 $grafanaListBorderBottom:   $black;
 $grafanaListHighlight:      #333;
 $grafanaListMainLinkColor: $textColor;
@@ -118,18 +118,18 @@ $scrollbarBorder: black;
 // -------------------------
 $tableBackground:                   transparent; // overall background-color
 $tableBackgroundAccent:             rgba(100, 100, 100, 0.3); // for striping
-$tableBackgroundHover:              $grayDark; // for hover
-$tableBorder:                       $grayDark; // table and cell border
+$tableBackgroundHover:              $gray-dark; // for hover
+$tableBorder:                       $gray-dark; // table and cell border
 
 // Buttons
 // -------------------------
-$btnBackground:                     $grayDark;
-$btnBackgroundHighlight:            darken($grayLight, 15%);
-$btnBackgroundShadow:            	darken($grayLight, 15%);
+$btnBackground:                     $gray-dark;
+$btnBackgroundHighlight:            darken($gray-light, 15%);
+$btnBackgroundShadow:            	darken($gray-light, 15%);
 $btnBorder:                         #bbb;
 
-$btnPrimaryBackground:              $blueDark;
-$btnPrimaryBackgroundHighlight:     lighten($blueDark, 5%);
+$btnPrimaryBackground:              $blue-dark;
+$btnPrimaryBackgroundHighlight:     lighten($blue-dark, 5%);
 
 $btnInfoBackground:                 lighten($purple, 3%);
 $btnInfoBackgroundHighlight:        darken($purple, 3%);
@@ -143,8 +143,8 @@ $btnWarningBackgroundHighlight:     darken($orange, 3%);
 $btnDangerBackground:               lighten($red, 3%);
 $btnDangerBackgroundHighlight:      darken($red, 3%);
 
-$btnInverseBackground:              $grayDark;
-$btnInverseBackgroundHighlight:     lighten($grayDark, 1%);
+$btnInverseBackground:              $gray-dark;
+$btnInverseBackgroundHighlight:     lighten($gray-dark, 1%);
 $btnInverseText:                    $textColor;
 $btnInverseBorder:                  #333;
 
@@ -157,19 +157,19 @@ $iconContainerShadow:				        0 0 14px 2px rgba(255,255,255, 0.05);
 
 // Hero unit
 // -------------------------
-$heroUnitBackground:              $grayDark;
+$heroUnitBackground:              $gray-dark;
 $heroUnitHeadingColor:            inherit;
 $heroUnitLeadColor:               inherit;
 
 // Forms
 // -------------------------
-$inputBackground:               lighten($grayDark,5%);
-$inputBorder:                   lighten($grayDark,5%);
+$inputBackground:               lighten($gray-dark,5%);
+$inputBorder:                   lighten($gray-dark,5%);
 $inputBorderRadius:             $baseBorderRadius;
 $inputDisabledBackground:       #555;
 $formActionsBackground:         transparent;
 $inputHeight:                   $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
-$labelBackground:				$grayDark;
+$labelBackground:				$gray-dark;
 
 
 // Search
@@ -188,8 +188,8 @@ $dropdownLinkColor:             $textColor;
 $dropdownLinkColorHover:        $white;
 $dropdownLinkColorActive:       $white;
 
-$dropdownLinkBackgroundActive:  $blueDark;
-$dropdownLinkBackgroundHover:   $blueDark;
+$dropdownLinkBackgroundActive:  $blue-dark;
+$dropdownLinkBackgroundHover:   $blue-dark;
 
 
 // COMPONENT VARIABLES
@@ -213,7 +213,7 @@ $placeholderText:         darken($textColor, 25%);
 
 // Hr border color
 // -------------------------
-$hrBorder:                $grayDark;
+$hrBorder:                $gray-dark;
 
 
 // Horizontal forms & lists
@@ -226,12 +226,12 @@ $horizontalComponentOffset:       180px;
 $wellBackground:                  #131517;
 
 $navbarHeight:                    52px;
-$navbarBackgroundHighlight:       $grayDark;
-$navbarBackground:                $grayDark;
+$navbarBackgroundHighlight:       $gray-dark;
+$navbarBackground:                $gray-dark;
 $navbarBorder:                    1px solid $bodyBackground;
 
-$navbarText:                      $grayLight;
-$navbarLinkColor:                 $grayLight;
+$navbarText:                      $gray-light;
+$navbarLinkColor:                 $gray-light;
 $navbarLinkColorHover:            $white;
 $navbarLinkColorActive:           $navbarLinkColorHover;
 $navbarLinkBackgroundHover:       transparent;
@@ -245,8 +245,8 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
 // Sidemenu
 // -------------------------
 $sideMenuTopShadow:          $navbarDropdownShadow;
-$sideMenuBackground:         $grayDark;
-$sideMenuBackgroundHighlight: lighten($grayDark, 4%);
+$sideMenuBackground:         $gray-dark;
+$sideMenuBackgroundHighlight: lighten($gray-dark, 4%);
 $sideMenuShadow: 0 0 35px 0 $bodyBackground;
 
 // Pagination
@@ -266,7 +266,7 @@ $errorBackground:         $btnDangerBackground;
 $successText:             #468847;
 $successBackground:       $btnSuccessBackground;
 
-$infoText:                $blueDark;
+$infoText:                $blue-dark;
 $infoBackground:          $btnInfoBackground;
 
 // Tooltips and popovers

public/sass/_variables.light.scss

@@ -10,19 +10,18 @@
 // Grays
 // -------------------------
 $black:                 #000;
-$grayDarker:            lighten(#000, 11.5%); // #222
-$grayDark:              lighten(#000, 20%);   // #333
+$gray-darker:            lighten(#000, 11.5%); // #222
+$gray-dark:              lighten(#000, 20%);   // #333
 $gray:                  lighten(#000, 33.5%); // #555
-$grayLight:             lighten(#000, 60%);   // #999
-$grayLighter:           lighten(#000, 97.5%); // #eee
+$gray-light:             lighten(#000, 60%);   // #999
+$gray-lighter:           lighten(#000, 97.5%); // #eee
 $white:                 #fff;
 
 
 // Accent colors
 // -------------------------
-$blueOrig:              #007FFF;
 $blue:             	   	#2AB2E4;
-$blueDark:              #75CAEB;
+$blue-dark:              #75CAEB;
 $green:                 #28B62C;
 $red:                   #FF4136;
 $yellow:                #FF851B;
@@ -39,9 +38,9 @@ $critical:              #EC2128;
 
 // grafana Variables
 // -------------------------
-$grafanaPanelBackground: 	$grayLighter;
+$grafanaPanelBackground: 	$gray-lighter;
 $grafanaPanelBorder: 	  	solid 1px #ddd;
-$grafanaTriggerBorder:		solid 1px $grayLight;
+$grafanaTriggerBorder:		solid 1px $gray-light;
 
 // Scaffolding
 // -------------------------
@@ -110,11 +109,11 @@ $borderRadiusLarge:     4px;
 $borderRadiusSmall:     2px;
 
 // Lists
-$grafanaListBackground:  	     darken($grayLighter,5%);
-$grafanaListAccent:            darken($grayLighter,8%);
+$grafanaListBackground:  	     darken($gray-lighter,5%);
+$grafanaListAccent:            darken($gray-lighter,8%);
 $grafanaListBorderTop:         #eee;
 $grafanaListBorderBottom:      #eee;
-$grafanaListHighlight:         darken($grayLighter,10%);
+$grafanaListHighlight:         darken($gray-lighter,10%);
 $grafanaListHighlightContrast: #ddd;
 $grafanaListMainLinkColor:     $textColor;
 
@@ -127,14 +126,14 @@ $tableBackgroundHover:              #E8F8FD; // for hover
 $tableBorder:                       #ddd; // table and cell border
 
 // Scrollbars
-$scrollbarBackground: $grayLighter;
-$scrollbarBackground2: $grayLighter;
-$scrollbarBorder: $grayLight;
+$scrollbarBackground: $gray-lighter;
+$scrollbarBackground2: $gray-lighter;
+$scrollbarBorder: $gray-light;
 
 // Buttons
 // -------------------------
-$btnBackground:                     $grayLighter;
-$btnBackgroundHighlight:            darken($grayLighter, 15%);
+$btnBackground:                     $gray-lighter;
+$btnBackgroundHighlight:            darken($gray-lighter, 15%);
 $btnBorder:                         #bbb;
 
 $btnPrimaryBackground:              lighten($blue, 3%);
@@ -152,12 +151,12 @@ $btnWarningBackgroundHighlight:     darken($orange, 3%);
 $btnDangerBackground:               lighten($red, 3%);
 $btnDangerBackgroundHighlight:      darken($red, 3%);
 
-$btnInverseBackground:              $grayLighter;
-$btnInverseBackgroundHighlight:     darken($grayLighter, 5%);
+$btnInverseBackground:              $gray-lighter;
+$btnInverseBackgroundHighlight:     darken($gray-lighter, 5%);
 $btnInverseText:                    $black;
-$btnInverseBorder:                  $grayLight;
+$btnInverseBorder:                  $gray-light;
 
-$btnText:              				$grayLighter;
+$btnText:              				$gray-lighter;
 
 $iconContainerBackground:			      $white;
 $iconContainerBackgroundHighlight:	lighten($white, 5%);
@@ -168,9 +167,9 @@ $iconContainerShadow:				        0 0 14px 2px rgba(0,0,0, 0.05);
 // Forms
 // -------------------------
 $inputBackground:               $white;
-$inputBorder:                   $grayLighter;
+$inputBorder:                   $gray-lighter;
 $inputBorderRadius:             $baseBorderRadius;
-$inputDisabledBackground:       $grayLighter;
+$inputDisabledBackground:       $gray-lighter;
 $formActionsBackground:         #f5f5f5;
 $inputHeight:                   $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
 $inputText:                     #020202;
@@ -183,7 +182,7 @@ $sideMenuBackground:            $grafanaPanelBackground;
 $sideMenuBackgroundHighlight:   darken($sideMenuBackground, 4%);
 
 // search
-$searchShadow: 0 5px 30px 0 lighten($grayLight, 30%);
+$searchShadow: 0 5px 30px 0 lighten($gray-light, 30%);
 
 // Dropdowns
 // -------------------------
@@ -194,7 +193,7 @@ $dropdownDividerBottom:         $white;
 $dropdownDivider:               $dropdownDividerTop;
 $dropdownTitle:                 #333;
 
-$dropdownLinkColor:             $grayDark;
+$dropdownLinkColor:             $gray-dark;
 $dropdownLinkColorHover:        $white;
 $dropdownLinkColorActive:       $white;
 
@@ -220,12 +219,12 @@ $zindexModal:             1050;
 
 // Input placeholder text color
 // -------------------------
-$placeholderText:         $grayLight;
+$placeholderText:         $gray-light;
 
 
 // Hr border color
 // -------------------------
-$hrBorder:                $grayLighter;
+$hrBorder:                $gray-lighter;
 
 
 // Horizontal forms & lists
@@ -235,7 +234,7 @@ $horizontalComponentOffset:       180px;
 
 // Wells
 // -------------------------
-$wellBackground:                  $grayLighter;
+$wellBackground:                  $gray-lighter;
 
 
 // Navbar
@@ -262,14 +261,14 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
 
 // Pagination
 // -------------------------
-$paginationBackground:                $grayLight;
+$paginationBackground:                $gray-light;
 $paginationBorder:                    transparent;
 $paginationActiveBackground:          $blue;
 
 
 // Hero unit
 // -------------------------
-$heroUnitBackground:              $grayLighter;
+$heroUnitBackground:              $gray-lighter;
 $heroUnitHeadingColor:            inherit;
 $heroUnitLeadColor:               inherit;
 
@@ -296,7 +295,7 @@ $infoBorder:              transparent;
 // Tooltips and popovers
 // -------------------------
 $tooltipColor:            $white;
-$tooltipBackground:       $grayDark;
+$tooltipBackground:       $gray-dark;
 $tooltipArrowWidth:       5px;
 $tooltipArrowColor:       $tooltipBackground;
 $tooltipLinkColor:        darken($white,11%);

public/sass/base/_forms.scss

@@ -25,14 +25,14 @@ legend {
   margin-bottom: $baseLineHeight;
   font-size: $baseFontSize * 1.5;
   line-height: $baseLineHeight * 2;
-  color: $grayDark;
+  color: $gray-dark;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
 
   // Small
   small {
     font-size: $baseLineHeight * .75;
-    color: $grayLight;
+    color: $gray-light;
   }
 }
 

public/sass/base/_type.scss

@@ -29,9 +29,9 @@ em      { font-style: italic; color: $headingsColor; }
 cite    { font-style: normal; }
 
 // Utility classes
-.muted               { color: $grayLight; }
+.muted               { color: $gray-light; }
 a.muted:hover,
-a.muted:focus        { color: darken($grayLight, 10%); }
+a.muted:focus        { color: darken($gray-light, 10%); }
 
 .text-warning        { color: $warningText; }
 a.text-warning:hover,
@@ -69,7 +69,7 @@ h1, h2, h3, h4, h5, h6 {
   small {
     font-weight: normal;
     line-height: 1;
-    color: $grayLight;
+    color: $gray-light;
   }
 }
 
@@ -172,7 +172,7 @@ abbr[title],
 // Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
 abbr[data-original-title] {
   cursor: help;
-  border-bottom: 1px dotted $grayLight;
+  border-bottom: 1px dotted $gray-light;
 }
 abbr.initialism {
   font-size: 90%;
@@ -183,7 +183,7 @@ abbr.initialism {
 blockquote {
   padding: 0 0 0 15px;
   margin: 0 0 $baseLineHeight;
-  border-left: 5px solid $grayLighter;
+  border-left: 5px solid $gray-lighter;
   p {
     margin-bottom: 0;
     font-size: $baseFontSize * 1.25;
@@ -193,7 +193,7 @@ blockquote {
   small {
     display: block;
     line-height: $baseLineHeight;
-    color: $grayLight;
+    color: $gray-light;
     &:before {
       content: '\2014 \00A0';
     }
@@ -204,7 +204,7 @@ blockquote {
     float: right;
     padding-right: 15px;
     padding-left: 0;
-    border-right: 5px solid $grayLighter;
+    border-right: 5px solid $gray-lighter;
     border-left: 0;
     p,
     small {

public/sass/components/_alerts.scss

@@ -55,7 +55,7 @@
   border-radius: 50%;
   border: none;
   font-size: 1.1rem;
-  color: $grayDarker;
+  color: $gray-darker;
   .fa {
     position: relative;
     top: -2px;

public/sass/components/_buttons.scss

@@ -17,7 +17,7 @@
   cursor: pointer;
   border: none;
 
-  @include buttonBackground($btnBackground, $btnBackgroundHighlight,  $grayDark, 0 1px 1px rgba(255,255,255,.75));
+  @include buttonBackground($btnBackground, $btnBackgroundHighlight,  $gray-dark, 0 1px 1px rgba(255,255,255,.75));
   @include box-shadow("inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
 
   // Hover/focus state

public/sass/components/_dashboard.scss

@@ -31,7 +31,7 @@
   float: left;
   cursor: pointer;
   line-height: 31px;
-  background-color: $blueDark;
+  background-color: $blue-dark;
 }
 
 .row-text {
@@ -245,7 +245,7 @@ div.flot-text {
 .panel-drop-zone {
   display: none;
   .panel-container {
-    border: 1px solid $grayDark;
+    border: 1px solid $gray-dark;
   }
 }
 

public/sass/components/_dropdown.scss

@@ -112,7 +112,7 @@
 .dropdown-menu > .disabled > a,
 .dropdown-menu > .disabled > a:hover,
 .dropdown-menu > .disabled > a:focus {
-  color: $grayLight;
+  color: $gray-light;
 }
 // Nuke hover/focus effects
 .dropdown-menu > .disabled > a:hover,

public/sass/components/_gfbox.scss

@@ -28,7 +28,7 @@
 .gf-box-header-save-btn {
   padding: 7px 0;
   float: right;
-  color: $grayLight;
+  color: $gray-light;
   font-style: italic;
 }
 

public/sass/components/_navs.scss

@@ -19,7 +19,7 @@
 .nav > li > a:hover,
 .nav > li > a:focus {
   text-decoration: none;
-  background-color: $grayLighter;
+  background-color: $gray-lighter;
 }
 
 // Redeclare pull classes because of specifity
@@ -34,7 +34,7 @@
   font-size: 11px;
   font-weight: bold;
   line-height: $baseLineHeight;
-  color: $grayLight;
+  color: $gray-light;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   text-transform: uppercase;
 }
@@ -114,7 +114,7 @@
   @include border-radius(4px 4px 0 0);
   &:hover,
   &:focus {
-    border-color: $grayLighter $grayLighter #ddd;
+    border-color: $gray-lighter $gray-lighter #ddd;
   }
 }
 // Active state, and it's :hover/:focus to override normal :hover/:focus
@@ -172,8 +172,8 @@
 .nav > li.dropdown.open.active > a:hover,
 .nav > li.dropdown.open.active > a:focus {
   color: $white;
-  background-color: $grayLight;
-  border-color: $grayLight;
+  background-color: $gray-light;
+  border-color: $gray-light;
 }
 .nav li.dropdown.open .caret,
 .nav li.dropdown.open.active .caret,
@@ -187,7 +187,7 @@
 // Dropdowns in stacked tabs
 .tabs-stacked .open > a:hover,
 .tabs-stacked .open > a:focus {
-  border-color: $grayLight;
+  border-color: $gray-light;
 }
 
 // Show/hide tabbable areas

public/sass/components/_pagination.scss

@@ -29,14 +29,14 @@
 }
 .pagination ul > .active > a,
 .pagination ul > .active > span {
-  color: $grayLight;
+  color: $gray-light;
   cursor: default;
 }
 .pagination ul > .disabled > span,
 .pagination ul > .disabled > a,
 .pagination ul > .disabled > a:hover,
 .pagination ul > .disabled > a:focus {
-  color: $grayLight;
+  color: $gray-light;
   background-color: transparent;
   cursor: default;
 }

public/sass/components/_submenu.scss

@@ -122,7 +122,7 @@
 
 .variable-option {
   &:hover, &.highlighted {
-    background-color: $blueDark;
+    background-color: $blue-dark;
   }
 }
 

public/sass/components/_tags.scss

@@ -10,7 +10,7 @@
   vertical-align: baseline;
   white-space: nowrap;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  background-color: $grayLight;
+  background-color: $gray-light;
 }
 
 
@@ -55,6 +55,6 @@
   &-info              { background-color: $infoText; }
   &-info[href]        { background-color: darken($infoText, 10%); }
   // Inverse (black)
-  &-inverse           { background-color: $grayDark; }
-  &-inverse[href]     { background-color: darken($grayDark, 10%); }
+  &-inverse           { background-color: $gray-dark; }
+  &-inverse[href]     { background-color: darken($gray-dark, 10%); }
 }

public/sass/pages/_login.scss

@@ -106,7 +106,7 @@
   margin-top: 10px;
   padding: 10px;
   a {
-    color: $grayLight;
+    color: $gray-light;
   }
 }
 
@@ -121,8 +121,8 @@
     border-bottom: 1px solid $gray;
 
     .login-divider-text {
-      background-color: $grayDarker;
-      color: $grayLight;
+      background-color: $gray-darker;
+      color: $gray-light;
       padding: 0 10px;
     }
   }