Widgets screen: style adjustments for the block areas hover and font face

[afercia]

Describe the bug
Not sure whether this has been already reported. In the new widgets screen I see a couple of style inconsistencies:

The block areas accordion headers get a grey background on hover, which is not that nice to see against a grey background and should probably be changed:

The accordion titles and also the content within the block areas (e.g. the placeholder text "Start writing...") use a serif typeface:

The serif typeface is also applied to the actual content entered in a block areas:

Note: my active theme is Twenty Twenty, which uses a sans-serif typeface so the Widgets preview is also non-WYSIWYG

To my knowledge, WordPress doesn't use serif typefaces in its user interface anywhere. Seems to me this style is inehrited from the editor styles wrapper which uses the scss variable $editor-font: "Noto Serif", serif;. this shoul dprobbly be changed, as it sets a serif typeface on all the elements in the page.

Ideally, the parts of the Widgets screen that are user interface should use the WordPress "system font stack". Instead, to be truly WYSIWYG, the content within the block areas should use the font used by the theme.

To reproduce

• I tested it on latest master 16e98d4 but I guess it's the same on the latest plugin version 9.1.0
• go to Appearance > Widgets
• see the hover and typeface styles

[mapk]

It looks like the UI has been cleaned up with other PRs. Tested on Twenty Twenty.

• No more serif fonts in the Heading.
• Hover affect has been removed, but kept the highlighting for the focus state.