[TableRow] Improve hover/selected styles (mui#19277)

Author: elmeerr

packages/material-ui/src/TableRow/TableRow.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
+import { fade } from '../styles/colorManipulator';
 
 export const styles = theme => ({
   /* Styles applied to the root element. */
@@ -12,17 +13,11 @@ export const styles = theme => ({
     verticalAlign: 'middle',
     // We disable the focus ring for mouse, touch and keyboard users.
     outline: 0,
-    '&$selected': {
-      backgroundColor:
-        theme.palette.type === 'light'
-          ? 'rgba(0, 0, 0, 0.04)' // grey[100]
-          : 'rgba(255, 255, 255, 0.08)',
-    },
     '&$hover:hover': {
-      backgroundColor:
-        theme.palette.type === 'light'
-          ? 'rgba(0, 0, 0, 0.07)' // grey[200]
-          : 'rgba(255, 255, 255, 0.14)',
+      backgroundColor: theme.palette.action.hover,
+    },
+    '&$selected,&$selected:hover': {
+      backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.selectedOpacity),
     },
   },
   /* Pseudo-class applied to the root element if `selected={true}`. */

packages/material-ui/src/styles/createPalette.js

@@ -34,10 +34,11 @@ export const light = {
     // The color of an active action like an icon button.
     active: 'rgba(0, 0, 0, 0.54)',
     // The color of an hovered action.
-    hover: 'rgba(0, 0, 0, 0.08)',
-    hoverOpacity: 0.08,
+    hover: 'rgba(0, 0, 0, 0.04)',
+    hoverOpacity: 0.04,
     // The color of a selected action.
-    selected: 'rgba(0, 0, 0, 0.14)',
+    selected: 'rgba(0, 0, 0, 0.08)',
+    selectedOpacity: 0.08,
     // The color of a disabled action.
     disabled: 'rgba(0, 0, 0, 0.26)',
     // The background color of a disabled action.
@@ -60,9 +61,10 @@ export const dark = {
   },
   action: {
     active: common.white,
-    hover: 'rgba(255, 255, 255, 0.1)',
-    hoverOpacity: 0.1,
-    selected: 'rgba(255, 255, 255, 0.2)',
+    hover: 'rgba(255, 255, 255, 0.08)',
+    hoverOpacity: 0.08,
+    selected: 'rgba(255, 255, 255, 0.16)',
+    selectedOpacity: 0.16,
     disabled: 'rgba(255, 255, 255, 0.3)',
     disabledBackground: 'rgba(255, 255, 255, 0.12)',
   },