diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx index aa3e83c34a0..2cd47626db9 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx @@ -120,6 +120,9 @@ const getStyles = (theme: GrafanaTheme2) => { border: `1px solid ${theme.components.input.borderColor}`, borderRadius: theme.shape.radius.default, padding: '2px', + '&:hover': { + borderColor: theme.components.input.borderHover, + }, }), fullWidth: css({ display: 'flex', diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx index 05a3c5c5bdb..413d7b493a9 100644 --- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx +++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx @@ -166,10 +166,6 @@ const getStyles = (theme: GrafanaTheme2) => { '&:focus:not(:focus-visible)': getMouseFocusStyles(theme), - '&:hover': { - boxShadow: theme.shadows.z1, - }, - '&[disabled], &:disabled': { cursor: 'not-allowed', opacity: theme.colors.action.disabledOpacity, @@ -190,7 +186,7 @@ const getStyles = (theme: GrafanaTheme2) => { '&:hover': { color: theme.colors.text.primary, - background: theme.colors.background.secondary, + background: theme.colors.action.hover, }, }), canvas: defaultOld, diff --git a/public/app/core/components/AppChrome/MegaMenu/MegaMenuItemText.tsx b/public/app/core/components/AppChrome/MegaMenu/MegaMenuItemText.tsx index bb34a6fe969..116d351a499 100644 --- a/public/app/core/components/AppChrome/MegaMenu/MegaMenuItemText.tsx +++ b/public/app/core/components/AppChrome/MegaMenu/MegaMenuItemText.tsx @@ -90,7 +90,7 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive']) => ({ }, }), wrapperActive: css({ - backgroundColor: theme.colors.background.secondary, + backgroundColor: theme.colors.action.selected, borderTopRightRadius: theme.shape.radius.default, borderBottomRightRadius: theme.shape.radius.default, position: 'relative', diff --git a/public/app/features/browse-dashboards/components/DashboardsTree.tsx b/public/app/features/browse-dashboards/components/DashboardsTree.tsx index d85132ae4c9..b9531f22caf 100644 --- a/public/app/features/browse-dashboards/components/DashboardsTree.tsx +++ b/public/app/features/browse-dashboards/components/DashboardsTree.tsx @@ -271,7 +271,7 @@ const getStyles = (theme: GrafanaTheme2) => { height: ROW_HEIGHT, '&:hover': { - backgroundColor: theme.colors.emphasize(theme.colors.background.primary, 0.03), + backgroundColor: theme.colors.action.hover, }, }), diff --git a/public/app/features/search/page/components/SearchResultsTable.tsx b/public/app/features/search/page/components/SearchResultsTable.tsx index f2b105c3b69..21f81d648b6 100644 --- a/public/app/features/search/page/components/SearchResultsTable.tsx +++ b/public/app/features/search/page/components/SearchResultsTable.tsx @@ -225,7 +225,7 @@ export const SearchResultsTable = React.memo( SearchResultsTable.displayName = 'SearchResultsTable'; const getStyles = (theme: GrafanaTheme2) => { - const rowHoverBg = theme.colors.emphasize(theme.colors.background.primary, 0.03); + const rowHoverBg = theme.colors.action.hover; return { noData: css({