diff --git a/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx b/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx
index df3b00b259b..8ad44161faf 100644
--- a/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx
+++ b/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { GrafanaTheme, GraphSeriesValue } from '@grafana/data';
+import { GrafanaTheme2, GraphSeriesValue } from '@grafana/data';
 import { css, cx } from '@emotion/css';
 import { SeriesIcon } from '../VizLegend/SeriesIcon';
-import { useStyles } from '../../themes';
+import { useStyles2 } from '../../themes';
 
 /**
  * @public
@@ -14,10 +14,10 @@ export interface SeriesTableRowProps {
   isActive?: boolean;
 }
 
-const getSeriesTableRowStyles = (theme: GrafanaTheme) => {
+const getSeriesTableRowStyles = (theme: GrafanaTheme2) => {
   return {
     icon: css`
-      margin-right: ${theme.spacing.xs};
+      margin-right: ${theme.spacing(1)};
       vertical-align: middle;
     `,
     seriesTable: css`
@@ -25,7 +25,7 @@ const getSeriesTableRowStyles = (theme: GrafanaTheme) => {
     `,
     seriesTableRow: css`
       display: table-row;
-      font-size: ${theme.typography.size.sm};
+      font-size: ${theme.typography.bodySmall.fontSize};
     `,
     seriesTableCell: css`
       display: table-cell;
@@ -34,14 +34,15 @@ const getSeriesTableRowStyles = (theme: GrafanaTheme) => {
       word-break: break-all;
     `,
     value: css`
-      padding-left: ${theme.spacing.md};
+      padding-left: ${theme.spacing(2)};
     `,
     activeSeries: css`
-      font-weight: ${theme.typography.weight.bold};
+      font-weight: ${theme.typography.fontWeightBold};
+      color: ${theme.colors.text.maxContrast};
     `,
     timestamp: css`
-      font-weight: ${theme.typography.weight.bold};
-      font-size: ${theme.typography.size.sm};
+      font-weight: ${theme.typography.fontWeightBold};
+      font-size: ${theme.typography.bodySmall.fontSize};
     `,
   };
 };
@@ -50,7 +51,7 @@ const getSeriesTableRowStyles = (theme: GrafanaTheme) => {
  * @public
  */
 export const SeriesTableRow: React.FC<SeriesTableRowProps> = ({ color, label, value, isActive }) => {
-  const styles = useStyles(getSeriesTableRowStyles);
+  const styles = useStyles2(getSeriesTableRowStyles);
 
   return (
     <div className={cx(styles.seriesTableRow, isActive && styles.activeSeries)}>
@@ -77,7 +78,7 @@ export interface SeriesTableProps {
  * @public
  */
 export const SeriesTable: React.FC<SeriesTableProps> = ({ timestamp, series }) => {
-  const styles = useStyles(getSeriesTableRowStyles);
+  const styles = useStyles2(getSeriesTableRowStyles);
 
   return (
     <>