Color tweaks

packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss

@@ -37,7 +37,7 @@
 
 
 .panel-options-group__add-circle {
 .panel-options-group__add-circle {
 
 
-  @include gradientBar($btn-primary-bg, $btn-primary-bg-hl, #fff);
+  @include gradientBar($btn-secondary-bg, $btn-secondary-bg-hl, #fff);
 
 
   border-radius: 50px;
   border-radius: 50px;
   width: 20px;
   width: 20px;

packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss

@@ -21,7 +21,7 @@
 }
 }
 
 
 .thresholds-row-add-button {
 .thresholds-row-add-button {
-  @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl, #fff);
+  @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl, #fff);
 
 
   align-self: center;
   align-self: center;
   margin-right: 5px;
   margin-right: 5px;

public/app/features/dashboard/components/TimePicker/template.html

@@ -48,7 +48,7 @@
           <input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.from" input-datetime>
           <input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.from" input-datetime>
         </div>
         </div>
         <div class="gf-form">
         <div class="gf-form">
-          <button class="btn gf-form-btn btn-primary" type="button" ng-click="openFromPicker=!openFromPicker">
+          <button class="btn gf-form-btn btn-secondary" type="button" ng-click="openFromPicker=!openFromPicker">
             <i class="fa fa-calendar"></i>
             <i class="fa fa-calendar"></i>
           </button>
           </button>
         </div>
         </div>
@@ -65,7 +65,7 @@
           <input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.to" input-datetime>
           <input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.to" input-datetime>
         </div>
         </div>
         <div class="gf-form">
         <div class="gf-form">
-          <button class="btn gf-form-btn btn-primary" type="button" ng-click="openToPicker=!openToPicker">
+          <button class="btn gf-form-btn btn-secondary" type="button" ng-click="openToPicker=!openToPicker">
             <i class="fa fa-calendar"></i>
             <i class="fa fa-calendar"></i>
           </button>
           </button>
         </div>
         </div>
@@ -81,7 +81,7 @@
           <select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
           <select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
         </div>
         </div>
         <div class="gf-form">
         <div class="gf-form">
-          <button type="submit" class="btn gf-form-btn btn-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
+          <button type="submit" class="btn gf-form-btn btn-primary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
         </div>
         </div>
       </div>
       </div>
     </form>
     </form>

public/sass/_variables.dark.scss

@@ -6,7 +6,7 @@ $theme-name: dark;
 // New Colors
 // New Colors
 // -------------------------
 // -------------------------
 $sapphire-faint: #041126;
 $sapphire-faint: #041126;
-$sapphire-bright: #5794F2;
+$sapphire-light: #5794F2;
 $sapphire-base: #3274D9;
 $sapphire-base: #3274D9;
 $sapphire-shade: #1F60C4;
 $sapphire-shade: #1F60C4;
 $lobster-base: #E02F44;
 $lobster-base: #E02F44;
@@ -96,7 +96,7 @@ $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909);
 $link-color: darken($white, 11%);
 $link-color: darken($white, 11%);
 $link-color-disabled: darken($link-color, 30%);
 $link-color-disabled: darken($link-color, 30%);
 $link-hover-color: $white;
 $link-hover-color: $white;
-$external-link-color: $sapphire-bright;
+$external-link-color: $sapphire-light;
 
 
 // Typography
 // Typography
 // -------------------------
 // -------------------------
@@ -159,14 +159,11 @@ $table-bg-hover: $dark-3;
 // Buttons
 // Buttons
 // -------------------------
 // -------------------------
 
 
-$btn-primary-bg: $green-base;
-$btn-primary-bg-hl: $green-shade;
+$btn-primary-bg: $sapphire-base;
+$btn-primary-bg-hl: $sapphire-shade;
 
 
-$btn-secondary-bg-hl: $sapphire-base;
-$btn-secondary-bg: $sapphire-shade;
-
-$btn-secondary-bg: $sapphire-base;
-$btn-secondary-bg-hl: $sapphire-shade;
+$btn-secondary-bg: $green-base;
+$btn-secondary-bg-hl: $green-shade;
 
 
 $btn-danger-bg: $lobster-base;
 $btn-danger-bg: $lobster-base;
 $btn-danger-bg-hl: $lobster-shade;
 $btn-danger-bg-hl: $lobster-shade;
@@ -270,7 +267,6 @@ $toolbar-bg: $input-black;
 $warning-text-color: $warn;
 $warning-text-color: $warn;
 $error-text-color: #e84d4d;
 $error-text-color: #e84d4d;
 $success-text-color: $forest-light;
 $success-text-color: $forest-light;
-//$info-text-color: $blue-dark;
 
 
 $alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
 $alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
 $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
 $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
@@ -347,7 +343,7 @@ $diff-json-changed-num: $text-color;
 $diff-json-icon: $gray-7;
 $diff-json-icon: $gray-7;
 
 
 //Submenu
 //Submenu
-$variable-option-bg: $sapphire-shade;
+$variable-option-bg: $dropdownLinkBackgroundHover;
 
 
 //Switch Slider
 //Switch Slider
 // -------------------------
 // -------------------------
@@ -370,12 +366,12 @@ $panel-editor-shadow: 0 0 20px black;
 $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
 $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
 $panel-editor-viz-item-shadow: 0 0 8px $dark-5;
 $panel-editor-viz-item-shadow: 0 0 8px $dark-5;
 $panel-editor-viz-item-border: 1px solid $dark-5;
 $panel-editor-viz-item-border: 1px solid $dark-5;
-$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-shade;
-$panel-editor-viz-item-border-hover: 1px solid $sapphire-shade;
+$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light;
+$panel-editor-viz-item-border-hover: 1px solid $sapphire-light;
 $panel-editor-viz-item-bg: $input-black;
 $panel-editor-viz-item-bg: $input-black;
 $panel-editor-tabs-line-color: #e3e3e3;
 $panel-editor-tabs-line-color: #e3e3e3;
 
 
-$panel-editor-viz-item-bg-hover: darken($blue, 47%);
+$panel-editor-viz-item-bg-hover: darken($sapphire-base, 46%);
 
 
 $panel-options-group-border: none;
 $panel-options-group-border: none;
 $panel-options-group-header-bg: $gray-blue;
 $panel-options-group-header-bg: $gray-blue;

public/sass/_variables.light.scss

@@ -155,11 +155,11 @@ $table-bg-hover: $gray-5;
 
 
 // Buttons
 // Buttons
 // -------------------------
 // -------------------------
-$btn-primary-bg: $green-base;
-$btn-primary-bg-hl: $green-shade;
+$btn-secondary-bg: $green-base;
+$btn-secondary-bg-hl: $green-shade;
 
 
-$btn-secondary-bg: $sapphire-base;
-$btn-secondary-bg-hl: $sapphire-shade;
+$btn-primary-bg: $sapphire-base;
+$btn-primary-bg-hl: $sapphire-shade;
 
 
 $btn-danger-bg: $lobster-base;
 $btn-danger-bg: $lobster-base;
 $btn-danger-bg-hl: $lobster-shade;
 $btn-danger-bg-hl: $lobster-shade;
@@ -263,7 +263,6 @@ $toolbar-bg: white;
 $warning-text-color: lighten($orange, 10%);
 $warning-text-color: lighten($orange, 10%);
 $error-text-color: $lobster-shade;
 $error-text-color: $lobster-shade;
 $success-text-color: lighten($green, 10%);
 $success-text-color: lighten($green, 10%);
-$info-text-color: $sapphire-shade;
 
 
 $alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
 $alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
 $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
 $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
@@ -340,7 +339,7 @@ $diff-json-changed-num: $gray-4;
 $diff-json-icon: $gray-4;
 $diff-json-icon: $gray-4;
 
 
 //Submenu
 //Submenu
-$variable-option-bg: $sapphire-light;
+$variable-option-bg: $dropdownLinkBackgroundHover;
 
 
 //Switch Slider
 //Switch Slider
 // -------------------------
 // -------------------------
@@ -363,14 +362,11 @@ $panel-editor-shadow: 0px 0px 8px $gray-3;
 $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
 $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
 $panel-editor-viz-item-shadow: 0 0 4px $gray-3;
 $panel-editor-viz-item-shadow: 0 0 4px $gray-3;
 $panel-editor-viz-item-border: 1px solid $gray-3;
 $panel-editor-viz-item-border: 1px solid $gray-3;
-$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light;
-$panel-editor-viz-item-border-hover: 1px solid $sapphire-light;
+$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
+$panel-editor-viz-item-border-hover: 1px solid $blue-light;
 $panel-editor-viz-item-bg: $white;
 $panel-editor-viz-item-bg: $white;
 $panel-editor-tabs-line-color: $dark-5;
 $panel-editor-tabs-line-color: $dark-5;
-$panel-editor-viz-item-bg-hover: lighten($blue, 62%);
-
-
-$panel-options-group-border: none;
+$panel-editor-viz-item-bg-hover: lighten($blue, 62%);$panel-options-group-border: none;
 $panel-options-group-header-bg: $gray-5;
 $panel-options-group-header-bg: $gray-5;
 
 
 $panel-grid-placeholder-bg: $sapphire-faint;
 $panel-grid-placeholder-bg: $sapphire-faint;

public/sass/base/_type.scss

@@ -59,14 +59,6 @@ a.text-error:focus {
   color: darken($error-text-color, 10%);
   color: darken($error-text-color, 10%);
 }
 }
 
 
-/*.text-info {
-  color: $info-text-color;
-}
-a.text-info:hover,
-a.text-info:focus {
-  color: darken($info-text-color, 10%);
-}*/
-
 .text-success {
 .text-success {
   color: $success-text-color;
   color: $success-text-color;
 }
 }

public/sass/components/_buttons.scss

@@ -83,9 +83,11 @@
 
 
 // Set the backgrounds
 // Set the backgrounds
 // -------------------------
 // -------------------------
+.btn-success,
 .btn-primary {
 .btn-primary {
   @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
   @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
 }
 }
+
 .btn-secondary {
 .btn-secondary {
   @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
   @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
 }
 }