Setting background on DataTable overrides hover/focus background styling

[kariwhitcomb]

Expected Behavior

Default hover and focus behavior of DataTable should still be applied when background prop is set

Actual Behavior

Unless the background value is semi-transparent, the hover/focus styling is lost.

URL, screen shot, or Codepen exhibiting the issue

https://codesandbox.io/s/zealous-sun-o6jni?file=/src/App.js

Steps to Reproduce

Tested using the HPE theme
<DataTable ... background={['background', 'background-contrast']} onClickRow={() => {}} />

Hover over a table row. The ones with background-contrast show a hover effect, but the background rows do not.
Same if you tab to table and then use up/down to navigate rows.

Removing the background prop reenables hover/focus styling

Your Environment

• Grommet version: 2.16.2 (HPE theme 2.0.2)
• Browser Name and version: Chrome latest
• Operating System and version (desktop or mobile): MacOS

[ShimiSun]

I've transferred the issue to the HPE theme repo, since grommet itself doesn't have a background color, and the color is coming from the theme. Thank you for filing the issue.