Table: Update selected row color (#90364)

* chore: update table highlighted row color

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

@@ -51,6 +51,7 @@ export interface ThemeComponents {
   };
   table: {
     rowHoverBackground: string;
+    rowSelected: string;
   };
 }
 
@@ -106,7 +107,8 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
       defaultHeight: 400,
     },
     table: {
-      rowHoverBackground: colors.emphasize(colors.background.primary, 0.03),
+      rowHoverBackground: colors.action.hover,
+      rowSelected: colors.action.selected,
     },
   };
 }

packages/grafana-ui/src/components/Table/RowsList.tsx

@@ -274,7 +274,7 @@ export const RowsList = (props: RowsListProps) => {
       const rowExpanded = nestedDataField && tableState.expanded[row.id];
 
       if (rowHighlightIndex !== undefined && row.index === rowHighlightIndex) {
-        style = { ...style, backgroundColor: theme.components.table.rowHoverBackground };
+        style = { ...style, backgroundColor: theme.components.table.rowSelected };
         additionalProps = {
           'aria-selected': 'true',
         };
@@ -353,7 +353,7 @@ export const RowsList = (props: RowsListProps) => {
       tableState.expanded,
       tableStyles,
       textWrapField,
-      theme.components.table.rowHoverBackground,
+      theme.components.table.rowSelected,
       theme.typography.fontSize,
       theme.typography.body.lineHeight,
       timeRange,