diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
index ba4cccf5abf..2743eca5898 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
@@ -1,10 +1,10 @@
-import { GrafanaTheme, VariableSuggestion } from '@grafana/data';
+import { VariableSuggestion, GrafanaThemeV2 } from '@grafana/data';
 import { css, cx } from '@emotion/css';
 import { groupBy, capitalize } from 'lodash';
 import React, { useRef, useMemo } from 'react';
 import useClickAway from 'react-use/lib/useClickAway';
 import { List } from '../index';
-import { styleMixins, useStyles } from '../../themes';
+import { useStyles2 } from '../../themes';
 
 interface DataLinkSuggestionsProps {
   suggestions: VariableSuggestion[];
@@ -13,47 +13,40 @@ interface DataLinkSuggestionsProps {
   onClose?: () => void;
 }
 
-const getStyles = (theme: GrafanaTheme) => {
-  const wrapperBg = theme.colors.bg1;
-  const wrapperShadow = theme.colors.dropdownShadow;
-  const itemColor = theme.colors.text;
-  const itemBgHover = styleMixins.hoverColor(theme.colors.bg1, theme);
-  const itemBgActive = theme.colors.bg2;
-  const separatorColor = theme.colors.border2;
-
+const getStyles = (theme: GrafanaThemeV2) => {
   return {
     list: css`
-      border-bottom: 1px solid ${separatorColor};
+      border-bottom: 1px solid ${theme.colors.border.weak};
       &:last-child {
         border: none;
       }
     `,
     wrapper: css`
-      background: ${wrapperBg};
+      background: ${theme.colors.background.primary};
       z-index: 1;
       width: 250px;
-      box-shadow: 0 5px 10px 0 ${wrapperShadow};
+      box-shadow: 0 5px 10px 0 ${theme.shadows.z1};
     `,
     item: css`
       background: none;
       padding: 2px 8px;
-      color: ${itemColor};
+      color: ${theme.colors.text.primary};
       cursor: pointer;
       &:hover {
-        background: ${itemBgHover};
+        background: ${theme.colors.action.hover};
       }
     `,
     label: css`
-      color: ${theme.colors.textWeak};
+      color: ${theme.colors.text.secondary};
     `,
     activeItem: css`
-      background: ${itemBgActive};
+      background: ${theme.colors.background.secondary};
       &:hover {
-        background: ${itemBgActive};
+        background: ${theme.colors.background.secondary};
       }
     `,
     itemValue: css`
-      font-family: ${theme.typography.fontFamily.monospace};
+      font-family: ${theme.typography.fontFamilyMonospace};
       font-size: ${theme.typography.size.sm};
     `,
   };
@@ -72,7 +65,7 @@ export const DataLinkSuggestions: React.FC<DataLinkSuggestionsProps> = ({ sugges
     return groupBy(suggestions, (s) => s.origin);
   }, [suggestions]);
 
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
 
   return (
     <div ref={ref} className={styles.wrapper}>
@@ -111,7 +104,7 @@ interface DataLinkSuggestionsListProps extends DataLinkSuggestionsProps {
 
 const DataLinkSuggestionsList: React.FC<DataLinkSuggestionsListProps> = React.memo(
   ({ activeIndex, activeIndexOffset, label, onClose, onSuggestionSelect, suggestions }) => {
-    const styles = useStyles(getStyles);
+    const styles = useStyles2(getStyles);
 
     return (
       <>