ux(): colors refactoring

public/app/features/datasources/partials/edit.html

@@ -44,7 +44,7 @@
 			<button type="submit" class="btn btn-primary" ng-show="!isNew" ng-click="saveChanges(true)">
 				Test Connection
 			</button>
-			<a class="btn-text" href="datasources">Cancel</a>
+			<a class="btn btn-link" href="datasources">Cancel</a>
 		</div>
 	</form>
 </div>

public/sass/_variables.dark.scss

@@ -117,26 +117,25 @@ $table-border:                $dark-3; // table and cell border
 $btn-primary-bg:              $brand-primary;
 $btn-primary-bg-hl:           lighten($brand-primary, 8%);
 
-$btnInfoBackground:                 lighten($purple, 3%);
-$btnInfoBackgroundHighlight:        darken($purple, 3%);
+$btn-info-bg:                 lighten($purple, 3%);
+$btn-info-bg-hl:     		  darken($purple, 3%);
 
-$btnSuccessBackgroundHighlight:     darken($green, 3%);
-$btnSuccessBackground:              lighten($green, 3%);
+$btn-success-bg-hl:     	  darken($green, 3%);
+$btn-success-bg:              lighten($green, 3%);
 
-$btnWarningBackground:              $brand-warning;
-$btnWarningBackgroundHighlight:     lighten($brand-warning, 8%);
+$btn-warning-bg:              $brand-warning;
+$btn-warning-bg-hl:     	  lighten($brand-warning, 8%);
 
-$btnDangerBackground:               lighten($red, 3%);
-$btnDangerBackgroundHighlight:      darken($red, 3%);
+$btn-danger-bg:               lighten($red, 3%);
+$btn-danger-bg-hl:            darken($red, 3%);
 
-$btnInverseBackground:              $dark-3;
-$btnInverseBackgroundHighlight:     lighten($dark-3, 1%);
-$btnInverseText:                    $link-color;
-$btnInverseBorder:                  #333;
+$btn-inverse-bg:              $dark-3;
+$btn-inverse-bg-hl:     	  lighten($dark-3, 1%);
+$btn-inverse-text-color:      $link-color;
 
-$btnText:              				$gray-3;
+$btn-link-color:              $gray-3;
 
-$iconContainerBackground:		    $black;
+$iconContainerBackground:	  $black;
 
 // Forms
 // -------------------------
@@ -151,7 +150,6 @@ $input-box-shadow-focus:         rgba(102,175,233,.6) !default;
 $input-color-placeholder:        #999 !default;
 $input-label-bg:				 $dark-3;
 
-
 // Search
 $searchShadow: 0 0 35px 0 $body-bg;
 
@@ -222,13 +220,13 @@ $state-warning-text:      darken(#c09853, 10%);
 $state-warning-bg:        $brand-warning;
 
 $errorText:               #b94a48;
-$errorBackground:         $btnDangerBackground;
+$errorBackground:         $btn-danger-bg;
 
 $successText:             #468847;
-$successBackground:       $btnSuccessBackground;
+$successBackground:       $btn-success-bg;
 
 $infoText:                $blue-dark;
-$infoBackground:          $btnInfoBackground;
+$infoBackground:          $btn-info-bg;
 
 // Tooltips and popovers
 // -------------------------

public/sass/_variables.light.scss

@@ -62,22 +62,22 @@ $text-color:    $gray-1;
 // Links
 // -------------------------
 $link-color:             $gray-1;
-$link-color-disabled:    lighten($link-color,30%);
+$link-color-disabled:    lighten($link-color, 30%);
 $link-hover-color:       darken($link-color, 20%);
 
 // Typography
 // -------------------------
-$headings-color:         $text-color;
+$headings-color:       $text-color;
 $abbr-border-color: 	 $gray-2 !default;
-$text-muted: 			 darken($link-color,30%);
+$text-muted: 			     darken($link-color,30%);
 
 $blockquote-small-color:  $gray-2 !default;
 $blockquote-border-color: $gray-3 !default;
 
-$hr-border-color: rgba(0,0,0,.1) !default;
+$hr-border-color: $dark-3 !default;
 
 // Components
-$component-active-color: #fff !default;
+$component-active-color: $white !default;
 $component-active-bg:    $brand-primary !default;
 
 // Panel
@@ -96,58 +96,52 @@ $tight-form-func-bg:            $gray-5;
 $tight-form-func-highlight-bg:  $gray-6;
 
 $modal-background: $body-bg;
-$code-tag-bg:      #ddd;
+$code-tag-bg:      $dark-5;
 
 // Lists
-$grafanaListBackground:    	   darken($gray-3,5%);
-$grafanaListAccent:            darken($gray-3,8%);
-$grafanaListBorderTop:         #eee;
-$grafanaListBorderBottom:      #eee;
-$grafanaListHighlight:         darken($gray-3,10%);
-$grafanaListHighlightContrast: #ddd;
+$grafanaListBackground:    	   $gray-6;
+$grafanaListAccent:            $gray-5;
+$grafanaListBorderTop:         $gray-3;
+$grafanaListBorderBottom:      $gray-3;
+$grafanaListHighlight:         $gray-5;
 $grafanaListMainLinkColor:     $text-color;
 
 
 // Tables
 // -------------------------
 $table-bg:                   transparent; // overall background-color
-$table-bg-accent:            #f9f9f9; // for striping
-$table-bg-hover:             #E8F8FD; // for hover
+$table-bg-accent:            $gray-5; // for striping
+$table-bg-hover:             $gray-5; // for hover
 $table-bg-active:            $table-bg-hover !default;
-$table-border:               #ddd; // table and cell border
-
+$table-border:               $gray-3; // table and cell border
 
 // Scrollbars
-$scrollbarBackground: $gray-3;
-$scrollbarBackground2: $gray-3;
-$scrollbarBorder: $gray-2;
+$scrollbarBackground:   $gray-5;
+$scrollbarBackground2:  $gray-5;
+$scrollbarBorder:       $gray-4;
 
 // Buttons
 // -------------------------
-$btnBackground:                     $gray-3;
-$btnBackgroundHighlight:            darken($gray-3, 15%);
-$btnBorder:                         #bbb;
-
-$btn-primary-bg:                    $brand-primary;
-$btn-primary-bg-hl:                 lighten($brand-primary, 10%);
+$btn-primary-bg:        $brand-primary;
+$btn-primary-bg-hl:     lighten($brand-primary, 8%);
 
-$btnInfoBackground:                 lighten($purple, 3%);
-$btnInfoBackgroundHighlight:        darken($purple, 3%);
+$btn-info-bg:           lighten($purple, 3%);
+$btn-info-bg-hl:        darken($purple, 3%);
 
-$btnSuccessBackground:              lighten($green, 3%);
-$btnSuccessBackgroundHighlight:     darken($green, 3%);
+$btn-success-bg:        lighten($green, 3%);
+$btn-success-bg-hl:     darken($green, 3%);
 
-$btnWarningBackground:              lighten($orange, 3%);
-$btnWarningBackgroundHighlight:     darken($orange, 3%);
+$btn-warning-bg:        lighten($orange, 3%);
+$btn-warning-bg-hl:     darken($orange, 3%);
 
-$btnDangerBackground:               lighten($red, 3%);
-$btnDangerBackgroundHighlight:      darken($red, 3%);
+$btn-danger-bg:         lighten($red, 3%);
+$btn-danger-bg-hl:      darken($red, 3%);
 
-$btnInverseBackground:              $gray-5;
-$btnInverseBackgroundHighlight:     darken($gray-5, 5%);
-$btnInverseText:                    $dark-4;
+$btn-inverse-bg:          $gray-5;
+$btn-inverse-bg-hl:       darken($gray-5, 5%);
+$btn-inverse-text-color:  $dark-4;
 
-$btnText: $gray-3;
+$btn-link-color: $gray-1;
 
 $iconContainerBackground: $white;
 

public/sass/_variables.scss

@@ -91,10 +91,10 @@ $form-sizes: (
 // Typography
 // -------------------------
 
-$font-family-sans-serif:    "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;
+$font-family-sans-serif:   "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;
 
 $font-size-root: 14px !default;
 

public/sass/components/_buttons.scss

@@ -64,6 +64,10 @@
   @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-xs, $btn-border-radius);
 }
 
+.btn-link {
+  color: $btn-link-color;   
+}
+
 // Set the backgrounds
 // -------------------------
 .btn-primary {
@@ -71,23 +75,23 @@
 }
 // Warning appears are orange
 .btn-warning {
-  @include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight);
+  @include buttonBackground($btn-warning-bg, $btn-warning-bg-hl);
 }
 // Danger and error appear as red
 .btn-danger {
-  @include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight);
+  @include buttonBackground($btn-danger-bg, $btn-danger-bg-hl);
 }
 // Success appears as green
 .btn-success {
-  @include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight);
+  @include buttonBackground($btn-success-bg, $btn-success-bg-hl);
 }
 // Info appears as a neutral blue
 .btn-info {
-  @include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight);
+  @include buttonBackground($btn-info-bg, $btn-info-bg-hl);
 }
 // Inverse appears as dark gray
 .btn-inverse {
-  @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseText);
+  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
   box-shadow: none;
   border: 1px solid $tight-form-func-highlight-bg;
 }
@@ -96,23 +100,19 @@
   @include button-outline-variant($btn-primary-bg);
 }
 .btn-outline-secondary {
-  @include button-outline-variant($btnInverseBackground);
+  @include button-outline-variant($btn-inverse-bg);
 }
 .btn-outline-info {
-  @include button-outline-variant($btnInfoBackground);
+  @include button-outline-variant($btn-info-bg);
 }
 .btn-outline-success {
-  @include button-outline-variant($btnSuccessBackground);
+  @include button-outline-variant($btn-success-bg);
 }
 .btn-outline-warning {
-  @include button-outline-variant($btnWarningBackground);
+  @include button-outline-variant($btn-warning-bg);
 }
 .btn-outline-danger {
-  @include button-outline-variant($btnDangerBackground);
+  @include button-outline-variant($btn-danger-bg);
 }
 
-.btn-text {
-  color: $btnText;
-  margin: 0;
-  vertical-align: middle;
-}
+

public/sass/components/_dashboard.scss

@@ -22,7 +22,7 @@
   text-align: center;
   display: inline-block;
   line-height: 30px;
-  background: $btnSuccessBackground;
+  background: $btn-success-bg;
   color: rgba(255,255,255,.90);
 }
 

public/sass/components/_navbar.scss

@@ -142,8 +142,8 @@
 }
 
 .dashboard-title {
-  padding: 0px 6px 5px 5px;
-  font-size: 17px;
+  padding: 0 0.4rem 0 0.5rem;
+  font-size: $font-size-lg;
 }
 
 .top-nav-icon {

public/sass/components/_timepicker.scss

@@ -70,7 +70,7 @@
     padding: 1px;
   }
   button.btn-sm {
-    @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
+    @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl);
     background-image: none;
     border: none;
     padding: 6px 10px;

public/sass/pages/_login.scss

@@ -78,7 +78,7 @@
     font-weight: bold;
     min-width: 150px;
     display: inline-block;
-    border: 1px solid lighten($btnInverseBackground, 10%);
+    border: 1px solid lighten($btn-inverse-bg, 10%);
   }
 }