Theme: Fixes bug in light theme for query editor part (#25789)

* Theme: Fixes bug in light theme for query editor part

* Remove different backgrond

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -133,8 +133,8 @@ $page-header-border-color: ${theme.colors.pageHeaderBorder};
 $divider-border-color: $gray-1;
 
 // Graphite Target Editor
-$tight-form-func-bg: $dark-9;
-$tight-form-func-highlight-bg: $dark-10;
+$tight-form-func-bg: ${theme.colors.bg2};
+$tight-form-func-highlight-bg: ${styleMixins.hoverColor(theme.colors.bg2, theme)};
 
 $modal-backdrop-bg: ${theme.colors.bg3};
 $code-tag-bg: $dark-1;

packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts

@@ -126,8 +126,8 @@ $page-header-border-color: ${theme.colors.pageHeaderBorder};
 $divider-border-color: $gray-2;
 
 // Graphite Target Editor
-$tight-form-func-bg: $gray-5;
-$tight-form-func-highlight-bg: $gray-6;
+$tight-form-func-bg: ${theme.colors.bg2};
+$tight-form-func-highlight-bg: ${styleMixins.hoverColor(theme.colors.bg2, theme)};
 
 $modal-backdrop-bg: ${theme.colors.bg1};
 $code-tag-bg: $gray-6;

public/sass/_variables.dark.generated.scss

@@ -135,8 +135,8 @@ $page-header-border-color: #202226;
 $divider-border-color: $gray-1;
 
 // Graphite Target Editor
-$tight-form-func-bg: $dark-9;
-$tight-form-func-highlight-bg: $dark-10;
+$tight-form-func-bg: #202226;
+$tight-form-func-highlight-bg: #25272b;
 
 $modal-backdrop-bg: #2c3235;
 $code-tag-bg: $dark-1;

public/sass/_variables.light.generated.scss

@@ -128,8 +128,8 @@ $page-header-border-color: #dce1e6;
 $divider-border-color: $gray-2;
 
 // Graphite Target Editor
-$tight-form-func-bg: $gray-5;
-$tight-form-func-highlight-bg: $gray-6;
+$tight-form-func-bg: #f1f5f9;
+$tight-form-func-highlight-bg: #eaf0f6;
 
 $modal-backdrop-bg: #ffffff;
 $code-tag-bg: $gray-6;

public/sass/components/_query_part.scss

 .query-part {
-  background-color: lighten($input-label-bg, 5%);
+  background-color: $tight-form-func-bg;
 
   &.show-function-controls {
     padding-top: 5px;
@@ -14,6 +14,10 @@
   &:hover .query-part__last {
     display: inline;
   }
+
+  &:hover {
+    background: $tight-form-func-highlight-bg;
+  }
 }
 
 .query-part__link {