Explore: Unify background color for fresh logs (#18973)

packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap

@@ -74,7 +74,6 @@ exports[`Render should render with base threshold 1`] = `
                           Object {
                             "background": Object {
                               "dropdown": "#1f1f20",
-                              "logsFresh": "#5794F240",
                               "scrollbar": "#343436",
                               "scrollbar2": "#343436",
                             },
@@ -236,7 +235,6 @@ exports[`Render should render with base threshold 1`] = `
                                 Object {
                                   "background": Object {
                                     "dropdown": "#1f1f20",
-                                    "logsFresh": "#5794F240",
                                     "scrollbar": "#343436",
                                     "scrollbar2": "#343436",
                                   },

packages/grafana-ui/src/themes/dark.ts

@@ -75,7 +75,6 @@ const darkTheme: GrafanaTheme = {
     dropdown: basicColors.dark3,
     scrollbar: basicColors.dark9,
     scrollbar2: basicColors.dark9,
-    logsFresh: '#5794F240',
   },
 };
 

packages/grafana-ui/src/themes/light.ts

@@ -76,7 +76,6 @@ const lightTheme: GrafanaTheme = {
     dropdown: basicColors.white,
     scrollbar: basicColors.gray5,
     scrollbar2: basicColors.gray5,
-    logsFresh: '#d8e7ff',
   },
 };
 

packages/grafana-ui/src/types/theme.ts

@@ -96,7 +96,6 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     dropdown: string;
     scrollbar: string;
     scrollbar2: string;
-    logsFresh: string;
   };
   colors: {
     black: string;

public/app/features/explore/LiveLogs.tsx

@@ -1,8 +1,9 @@
 import React, { PureComponent } from 'react';
 import { css, cx } from 'emotion';
+import tinycolor from 'tinycolor2';
 import { last } from 'lodash';
 
-import { Themeable, withTheme, GrafanaTheme, selectThemeVariant, getLogRowStyles } from '@grafana/ui';
+import { Themeable, withTheme, GrafanaTheme, getLogRowStyles } from '@grafana/ui';
 import { LogsModel, LogRowModel, TimeZone } from '@grafana/data';
 
 import ElapsedTime from './ElapsedTime';
@@ -23,17 +24,15 @@ const getStyles = (theme: GrafanaTheme) => ({
   logsRowFresh: css`
     label: logs-row-fresh;
     color: ${theme.colors.text};
-    background-color: ${selectThemeVariant(
-      { light: theme.background.logsFresh, dark: theme.background.logsFresh },
-      theme.type
-    )};
+    background-color: ${tinycolor(theme.colors.blueLight)
+      .setAlpha(0.25)
+      .toString()};
     animation: fade 1s ease-out 1s 1 normal forwards;
     @keyframes fade {
       from {
-        background-color: ${selectThemeVariant(
-          { light: theme.background.logsFresh, dark: theme.background.logsFresh },
-          theme.type
-        )};
+        background-color: ${tinycolor(theme.colors.blueLight)
+          .setAlpha(0.25)
+          .toString()};
       }
       to {
         background-color: transparent;