Merge pull request #12672 from grafana/12668-blue-in-light-theme

adjust table header contrast for the light theme

public/sass/_variables.dark.scss

@@ -44,7 +44,6 @@ $brand-success: $green;
 $brand-warning: $brand-primary;
 $brand-warning: $brand-primary;
 $brand-danger: $red;
 $brand-danger: $red;
 
 
-$query-blue: $blue;
 $query-red: $red;
 $query-red: $red;
 $query-green: $green;
 $query-green: $green;
 $query-purple: $purple;
 $query-purple: $purple;
@@ -347,3 +346,6 @@ $diff-json-changed-fg: $gray-5;
 $diff-json-changed-num: $text-color;
 $diff-json-changed-num: $text-color;
 
 
 $diff-json-icon: $gray-7;
 $diff-json-icon: $gray-7;
+
+//Submenu
+$variable-option-bg: $blue-dark;

public/sass/_variables.light.scss

@@ -30,8 +30,8 @@ $white: #fff;
 
 
 // Accent colors
 // Accent colors
 // -------------------------
 // -------------------------
-$blue: #61c2f2;
-$blue-dark: #0083b3;
+$blue: #0083b3;
+$blue-light: #00a8e6;
 $green: #3aa655;
 $green: #3aa655;
 $red: #d44939;
 $red: #d44939;
 $yellow: #ff851b;
 $yellow: #ff851b;
@@ -45,7 +45,6 @@ $brand-success: $green;
 $brand-warning: $orange;
 $brand-warning: $orange;
 $brand-danger: $red;
 $brand-danger: $red;
 
 
-$query-blue: $blue-dark;
 $query-red: $red;
 $query-red: $red;
 $query-green: $green;
 $query-green: $green;
 $query-purple: $purple;
 $query-purple: $purple;
@@ -82,7 +81,7 @@ $page-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
 $link-color: $gray-1;
 $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%);
 $link-hover-color: darken($link-color, 20%);
-$external-link-color: $blue;
+$external-link-color: $blue-light;
 
 
 // Typography
 // Typography
 // -------------------------
 // -------------------------
@@ -150,8 +149,8 @@ $scrollbarBorder: $gray-4;
 $btn-primary-bg: $brand-primary;
 $btn-primary-bg: $brand-primary;
 $btn-primary-bg-hl: lighten($brand-primary, 8%);
 $btn-primary-bg-hl: lighten($brand-primary, 8%);
 
 
-$btn-secondary-bg: $blue-dark;
-$btn-secondary-bg-hl: lighten($blue-dark, 4%);
+$btn-secondary-bg: $blue;
+$btn-secondary-bg-hl: lighten($blue, 4%);
 
 
 $btn-success-bg: lighten($green, 3%);
 $btn-success-bg: lighten($green, 3%);
 $btn-success-bg-hl: darken($green, 3%);
 $btn-success-bg-hl: darken($green, 3%);
@@ -168,7 +167,7 @@ $btn-inverse-text-color: $gray-1;
 $btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
 $btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
 
 
 $btn-active-bg: $white;
 $btn-active-bg: $white;
-$btn-active-text-color: $blue-dark;
+$btn-active-text-color: $blue;
 
 
 $btn-link-color: $gray-1;
 $btn-link-color: $gray-1;
 
 
@@ -219,8 +218,8 @@ $search-filter-box-bg: $gray-7;
 
 
 // Typeahead
 // Typeahead
 $typeahead-shadow: 0 5px 10px 0 $gray-5;
 $typeahead-shadow: 0 5px 10px 0 $gray-5;
-$typeahead-selected-bg: lighten($blue, 25%);
-$typeahead-selected-color: $blue-dark;
+$typeahead-selected-bg: lighten($blue, 57%);
+$typeahead-selected-color: $blue;
 
 
 // Dropdowns
 // Dropdowns
 // -------------------------
 // -------------------------
@@ -285,7 +284,7 @@ $info-text-color: $blue;
 $alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d);
 $alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d);
 $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274);
 $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274);
 $alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d);
 $alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d);
-$alert-info-bg: $blue-dark;
+$alert-info-bg: $blue;
 
 
 // popover
 // popover
 $popover-bg: $page-bg;
 $popover-bg: $page-bg;
@@ -293,7 +292,7 @@ $popover-color: $text-color;
 $popover-border-color: $gray-5;
 $popover-border-color: $gray-5;
 $popover-shadow: 0 0 20px $white;
 $popover-shadow: 0 0 20px $white;
 
 
-$popover-help-bg: $blue-dark;
+$popover-help-bg: $blue;
 $popover-help-color: $gray-6;
 $popover-help-color: $gray-6;
 $popover-error-bg: $btn-danger-bg;
 $popover-error-bg: $btn-danger-bg;
 
 
@@ -310,7 +309,7 @@ $graph-tooltip-bg: $gray-5;
 $checkboxImageUrl: '../img/checkbox_white.png';
 $checkboxImageUrl: '../img/checkbox_white.png';
 
 
 // info box
 // info box
-$info-box-background: linear-gradient(100deg, $blue-dark, darken($blue-dark, 5%));
+$info-box-background: linear-gradient(100deg, $blue, darken($blue, 5%));
 $info-box-color: $gray-7;
 $info-box-color: $gray-7;
 
 
 // footer
 // footer
@@ -356,3 +355,6 @@ $diff-json-new: #664e33;
 $diff-json-changed-fg: $gray-6;
 $diff-json-changed-fg: $gray-6;
 $diff-json-changed-num: $gray-4;
 $diff-json-changed-num: $gray-4;
 $diff-json-icon: $gray-4;
 $diff-json-icon: $gray-4;
+
+//Submenu
+$variable-option-bg: $blue-light;

public/sass/components/_query_editor.scss

 .query-keyword {
 .query-keyword {
   font-weight: $font-weight-semi-bold;
   font-weight: $font-weight-semi-bold;
-  color: $query-blue;
+  color: $blue;
 }
 }
 
 
 .gf-form-disabled {
 .gf-form-disabled {
   .query-keyword {
   .query-keyword {
-    color: darken($query-blue, 20%);
+    color: darken($blue, 20%);
   }
   }
 }
 }
 
 
@@ -63,7 +63,7 @@
   }
   }
   .gf-form-query-letter-cell-letter {
   .gf-form-query-letter-cell-letter {
     font-weight: bold;
     font-weight: bold;
-    color: $query-blue;
+    color: $blue;
   }
   }
   .gf-form-query-letter-cell-ds {
   .gf-form-query-letter-cell-ds {
     color: $text-color-weak;
     color: $text-color-weak;

public/sass/components/_slate_editor.scss

@@ -122,7 +122,7 @@
   .token.attr-value,
   .token.attr-value,
   .token.keyword,
   .token.keyword,
   .token.class-name {
   .token.class-name {
-    color: $query-blue;
+    color: $blue;
   }
   }
 
 
   .token.regex,
   .token.regex,

public/sass/components/_submenu.scss

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

public/sass/components/_timepicker.scss

@@ -77,7 +77,7 @@
     border: none;
     border: none;
     color: $text-color;
     color: $text-color;
     &.active span {
     &.active span {
-      color: $query-blue;
+      color: $blue;
       font-weight: bold;
       font-weight: bold;
     }
     }
     .text-info {
     .text-info {