From 33cfc3d9c2a9ec50c2e9403e10e241a4f6d249cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Thu, 29 Apr 2021 21:12:50 +0200
Subject: [PATCH] Theme: Fixing storybook theme (#33541)

---
 packages/grafana-data/src/themes/createComponents.ts        | 4 ++--
 packages/grafana-ui/.storybook/storybookTheme.ts            | 4 ++--
 packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts | 6 +++---
 .../grafana-ui/src/themes/_variables.light.scss.tmpl.ts     | 6 +++---
 public/sass/_variables.light.generated.scss                 | 6 +++---
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/grafana-data/src/themes/createComponents.ts b/packages/grafana-data/src/themes/createComponents.ts
index e81e695978e..ea3cb1584f6 100644
--- a/packages/grafana-data/src/themes/createComponents.ts
+++ b/packages/grafana-data/src/themes/createComponents.ts
@@ -66,8 +66,8 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
       background: input.background,
     },
     tooltip: {
-      background: colors.background.secondary,
-      text: colors.text.primary,
+      background: colors.mode === 'light' ? '#555' : colors.background.secondary,
+      text: colors.mode === 'light' ? '#FFF' : colors.text.primary,
     },
     dashboard: {
       background: colors.background.canvas,
diff --git a/packages/grafana-ui/.storybook/storybookTheme.ts b/packages/grafana-ui/.storybook/storybookTheme.ts
index 5cfadef84d1..4d1d661b352 100644
--- a/packages/grafana-ui/.storybook/storybookTheme.ts
+++ b/packages/grafana-ui/.storybook/storybookTheme.ts
@@ -21,8 +21,8 @@ const createStorybookTheme = (theme: GrafanaThemeV2) => {
     fontCode: theme.typography.fontFamilyMonospace,
 
     // Text colors
-    textColor: theme.colors.primary.text,
-    textInverseColor: theme.colors.primary.contrastText,
+    textColor: theme.colors.text.primary,
+    textInverseColor: theme.colors.background.primary,
 
     // Toolbar default and active colors
     barTextColor: theme.colors.text.primary,
diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
index 262bc621b7c..fc70b4e3f34 100644
--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -284,9 +284,9 @@ $tooltipArrowWidth: 5px;
 $tooltipLinkColor: $link-color;
 $graph-tooltip-bg: $dark-1;
 
-$tooltipBackground: ${theme.colors.background.secondary};
-$tooltipColor: ${theme.colors.text.primary};
-$tooltipArrowColor: ${theme.colors.background.secondary};
+$tooltipBackground: ${theme.components.tooltip.background};
+$tooltipColor: ${theme.components.tooltip.text};
+$tooltipArrowColor: ${theme.components.tooltip.background};
 $tooltipBackgroundError: ${theme.colors.error.main};
 $tooltipShadow: ${theme.shadows.z2};
 
diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
index b63aff96b60..9d1699609e5 100644
--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -276,9 +276,9 @@ $alert-warning-bg: ${theme.colors.warning.main};
 $alert-info-bg: ${theme.colors.warning.main};
 
 // Tooltips and popovers
-$tooltipBackground: ${theme.colors.background.secondary};
-$tooltipColor: ${theme.colors.text.primary};
-$tooltipArrowColor: ${theme.colors.background.secondary};
+$tooltipBackground: ${theme.components.tooltip.background};
+$tooltipColor: ${theme.components.tooltip.text};
+$tooltipArrowColor: ${theme.components.tooltip.background};
 $tooltipBackgroundError: ${theme.colors.error.main};
 $tooltipShadow: ${theme.shadows.z2};
 
diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss
index 3efc5ca6bda..9a8f3141ce3 100644
--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -278,9 +278,9 @@ $alert-warning-bg: #E56F00;
 $alert-info-bg: #E56F00;
 
 // Tooltips and popovers
-$tooltipBackground: #F4F5F5;
-$tooltipColor: rgba(36, 41, 46, 1);
-$tooltipArrowColor: #F4F5F5;
+$tooltipBackground: #555;
+$tooltipColor: #FFF;
+$tooltipArrowColor: #555;
 $tooltipBackgroundError: #E0226E;
 $tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2);