NTP: Update hover colors for context menu

[cezaraugusto]

Fix brave/brave-browser#6395

Submitter Checklist:

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Verified that these changes build without errors on
  • Android
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that these changes pass automated tests (unit, browser, security tests) on
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that all lint errors/warnings are resolved (npm run lint)
• Ran git rebase master (if needed).
• Ran git rebase -i to squash commits (if needed).
• Tagged reviewers and labelled the pull request as needed.
• Request a security/privacy review as needed.
• Add appropriate QA labels (QA/Yes or QA/No) to include the closed issue in milestone
• Public documentation has been updated as necessary. For instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protection-Mode
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-compatibility-issues-with-tracking-protection
  • https://github.com/brave/brave-browser/wiki/QA-Guide

Test Plan:

Assert that in dark mode, widget context menu (see screenshot) is turned black. Should be white in light mode.

Reviewer Checklist:

• New files have MPL-2.0 license header.
• Request a security/privacy review as needed.
• Adequate test coverage exists to prevent regressions
• Verify test plan is specified in PR before merging to source

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on.
• All relevant documentation has been updated.

[petemill]

The hover state is a bit jarring since it's still using the light color. There's a lot more contrast now.

How about we add a couple theme colors:

    contextMenuHoverBackground: ,
    contextMenuHoverForeground: ,

and use a nice light gray for the hover bg?

[cezaraugusto]

Sounds good bur deferring to @karenkliu since it's a design decision.

@karenkliu please see screenshot on top of this page and comment above from Pete.

[karenkliu]

Agree this should be done; here are the two:

Grab CSS from Abstract: https://share.goabstract.com/a6781cec-ebef-4012-9ef9-68868f864e65?collectionLayerId=5092bc9f-adb5-4725-b253-059ddb0c9fe4

Grab CSS from Abstract: https://share.goabstract.com/a6781cec-ebef-4012-9ef9-68868f864e65?collectionLayerId=0c4d8b10-cce3-4012-a438-6d5d5e218cd7

[cezaraugusto]

Thanks team, PR updated

[cezaraugusto]

rebased since npm run test-security was failing

[petemill]

@cezaraugusto not sure if we need to make a new NTP-specific theme just for these values.

Right now only contextMenuBackground is being used and that's by the rewards dropdown:

I think we should be consistent here, and that component would also get these light / dark / hover values.

[cezaraugusto]

@petemill could you review brave/brave-ui#557 then?

[cezaraugusto]

PR updated

[bsclifton]

Verified by building locally that this looks great- matches mockup provided by @karenkliu 😄