Prometheus/Loki: Improve metric search highlight contrast (#49384)

* Prometheus/Loki: Improve metric search highlight contrast

* Update other places, and add reusable variables

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

@@ -36,6 +36,10 @@ export interface ThemeComponents {
     background: string;
     padding: number;
   };
+  textHighlight: {
+    background: string;
+    text: string;
+  };
   sidemenu: {
     width: number;
   };
@@ -91,6 +95,10 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
     menuTabs: {
       height: 41,
     },
+    textHighlight: {
+      text: colors.warning.contrastText,
+      background: colors.warning.main,
+    },
     horizontalDrawer: {
       defaultHeight: 400,
     },

packages/grafana-ui/src/components/BrowserLabel/Label.tsx

@@ -139,8 +139,8 @@ const getLabelStyles = (theme: GrafanaTheme2) => ({
   `,
   matchHighLight: css`
     background: inherit;
-    color: ${theme.colors.primary.text};
+    color: ${theme.components.textHighlight.text};
-    background-color: ${theme.colors.primary.transparent};
+    background-color: ${theme.components.textHighlight.background};
   `,
   hidden: css`
     opacity: 0.6;

packages/grafana-ui/src/components/Logs/LogRowMessage.tsx

@@ -120,8 +120,6 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
     const style = getLogRowStyles(theme, row.logLevel);
     const { hasAnsi, raw } = row;
     const restructuredEntry = restructureLog(raw, prettifyLogMessage);
-
-    const highlightClassName = cx([style.logsRowMatchHighLight]);
     const styles = getStyles(theme);
 
     return (
@@ -145,7 +143,7 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
             />
           )}
           <span className={cx(styles.positionRelative, { [styles.rowWithContext]: contextIsOpen })}>
-            {renderLogMessage(hasAnsi, restructuredEntry, row.searchWords, highlightClassName)}
+            {renderLogMessage(hasAnsi, restructuredEntry, row.searchWords, style.logsRowMatchHighLight)}
           </span>
           {showContextToggle?.(row) && (
             <span

packages/grafana-ui/src/components/Logs/getLogRowStyles.ts

@@ -37,13 +37,8 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme2, logLevel?: L
       label: logs-row__match-highlight;
       background: inherit;
       padding: inherit;
-      color: ${theme.colors.warning.main};
+      color: ${theme.components.textHighlight.text}
-      background-color: rgba(${theme.colors.warning.main}, 0.1);
+      background-color: ${theme.components.textHighlight};
-    `,
-    logsRowMatchHighLightPreview: css`
-      label: logs-row__match-highlight--preview;
-      background-color: rgba(${theme.colors.warning.main}, 0.2);
-      border-bottom-style: dotted;
     `,
     logsRowsTable: css`
       label: logs-rows;

packages/grafana-ui/src/themes/GlobalStyles/elements.ts

@@ -155,6 +155,12 @@ export function getElementStyles(theme: GrafanaTheme2) {
     .text-center {
       text-align: center;
     }
+
+    .highlight-search-match {
+      background: ${theme.components.textHighlight.background};
+      color: ${theme.components.textHighlight.text};
+      padding: 0;
+    }
   `;
 }
 

public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx

@@ -95,7 +95,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     label: select__match-highlight;
     background: inherit;
     padding: inherit;
-    color: ${theme.colors.warning.main};
+    color: ${theme.colors.warning.contrastText};
-    background-color: rgba(${theme.colors.warning.main}, 0.1);
+    background-color: ${theme.colors.warning.main};
   `,
 });

public/sass/base/_type.scss

@@ -260,12 +260,6 @@ a.external-link {
   white-space: nowrap;
 }
 
-.highlight-search-match {
-  background: transparent;
-  color: $yellow;
-  padding: 0;
-}
-
 th {
   font-weight: $font-weight-semi-bold;
 }