From 2e772d41a749cb8a63687a36bfdd2ae23db68d42 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 25 Aug 2021 15:34:19 +0200 Subject: [PATCH] Themes: align hover and focus opacity (#38498) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- packages/grafana-data/src/themes/createColors.ts | 4 ++-- public/sass/_variables.dark.generated.scss | 8 ++++---- public/sass/_variables.light.generated.scss | 6 +++--- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/grafana-data/src/themes/createColors.ts b/packages/grafana-data/src/themes/createColors.ts index 4cb94a4f1c0..d0f34a46a81 100644 --- a/packages/grafana-data/src/themes/createColors.ts +++ b/packages/grafana-data/src/themes/createColors.ts @@ -139,7 +139,7 @@ class DarkColors implements ThemeColorsBase> { }; 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> { }; 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)`, diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 850de6663cb..929feadd84a 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/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; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index eef0e5558f7..82968629a7d 100644 --- a/public/sass/_variables.light.generated.scss +++ b/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;