Themes: align hover and focus opacity (#38498)

* new warning and success color in light theme, slight tweak to primary text

* changed hover opacity to the same as focues opacity

* Updated generated files

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-data/src/themes/createColors.ts

@@ -139,7 +139,7 @@ class DarkColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   };
 
   action = {
-    hover: `rgba(${this.whiteBase}, 0.08)`,
+    hover: `rgba(${this.whiteBase}, 0.16)`,
     selected: `rgba(${this.whiteBase}, 0.12)`,
     focus: `rgba(${this.whiteBase}, 0.16)`,
     hoverOpacity: 0.08,
@@ -219,7 +219,7 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   };
 
   action = {
-    hover: `rgba(${this.blackBase}, 0.04)`,
+    hover: `rgba(${this.blackBase}, 0.12)`,
     selected: `rgba(${this.blackBase}, 0.08)`,
     hoverOpacity: 0.08,
     focus: `rgba(${this.blackBase}, 0.12)`,

public/sass/_variables.dark.generated.scss

@@ -131,7 +131,7 @@ $hr-border-color: $dark-9;
 // -------------------------
 $panel-bg: #181b1f;
 $panel-border: 1px solid rgba(204, 204, 220, 0.07);
-$panel-header-hover-bg: rgba(204, 204, 220, 0.08);
+$panel-header-hover-bg: rgba(204, 204, 220, 0.16);
 $panel-box-shadow: none;
 $panel-corner: $panel-bg;
 
@@ -146,7 +146,7 @@ $divider-border-color: $gray-1;
 $tight-form-func-bg: #22252b;
 $tight-form-func-highlight-bg: rgb(40, 43, 49);
 
-$modal-backdrop-bg: rgba(204, 204, 220, 0.08);
+$modal-backdrop-bg: rgba(204, 204, 220, 0.16);
 $code-tag-bg: $dark-1;
 $code-tag-border: $dark-9;
 
@@ -263,7 +263,7 @@ $side-menu-header-color: rgb(204, 204, 220);
 // Menu dropdowns
 // -------------------------
 $menu-dropdown-bg: #181b1f;
-$menu-dropdown-hover-bg: rgba(204, 204, 220, 0.08);
+$menu-dropdown-hover-bg: rgba(204, 204, 220, 0.16);
 $menu-dropdown-shadow: 0px 10px 20px rgb(20,20,20);
 
 // Tabs
@@ -332,7 +332,7 @@ $json-explorer-url-color: #027bff;
 
 // Changelog and diff
 // -------------------------
-$diff-label-bg: rgba(204, 204, 220, 0.08);
+$diff-label-bg: rgba(204, 204, 220, 0.16);
 $diff-label-fg: $white;
 
 $diff-group-bg: #22252b;

public/sass/_variables.light.generated.scss

@@ -126,7 +126,7 @@ $hr-border-color: $gray-4 !default;
 // -------------------------
 $panel-bg: #fff;
 $panel-border: 1px solid rgba(36, 41, 46, 0.12);
-$panel-header-hover-bg: rgba(36, 41, 46, 0.04);
+$panel-header-hover-bg: rgba(36, 41, 46, 0.12);
 $panel-box-shadow: none;
 $panel-corner: $panel-bg;
 
@@ -260,7 +260,7 @@ $side-menu-header-color: #e9edf2;
 // Menu dropdowns
 // -------------------------
 $menu-dropdown-bg: #fff;
-$menu-dropdown-hover-bg: rgba(36, 41, 46, 0.04);
+$menu-dropdown-hover-bg: rgba(36, 41, 46, 0.12);
 $menu-dropdown-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
 
 // Tabs
@@ -329,7 +329,7 @@ $json-explorer-url-color: $blue-base;
 
 // Changelog and diff
 // -------------------------
-$diff-label-bg: rgba(36, 41, 46, 0.04);
+$diff-label-bg: rgba(36, 41, 46, 0.12);
 $diff-label-fg: $gray-2;
 
 $diff-arrow-color: $dark-2;