Fixed notice hover state to be compatible with removed IsReskinned flag

[paulopmt1]

Follow-up of #99112
Related to the Focused Launchpad: pet6gk-1T7-p2

Proposed Changes

• We're updating the hover state color for buttons inside Notices:

Before:

Screen.Recording.2025-02-10.at.09.22.10.mov

After:

Screen.Recording.2025-02-10.at.09.30.46.mov

Why are these changes being made?

• This is a follow-up of removed IsSkinned. The background color now is light compared to the old dark one, so the hover effect needs to be updated.

Testing Instructions

• Go to /setup/onboarding
• Complete the onboarding process
• When in the launchpad, replace the URL to the /home page adding the extra flag parameter: flags=home/launchpad-first
• Edit the page's title
• Check if the new style is correct

Or follow the video:

Screen.Recording.2025-02-10.at.10.46.43.mov

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-132601

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-132601&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-132601&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• blaze-dashboard
• notifications
• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/hover-state-on-notice on your sandbox.

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[zaguiini]

I must say I don't like the looks of the notice. It's difficult to distinguish it from the background, and the inactive "Next steps" link doesn't have a lot of contrast. Do we plan to refactor that component completely anytime soon? cc @nuriapenya

[zaguiini]

Can we use a color token instead of a color code? It would be --color-accent-80 in this case, but it would be even better if we could use an explicit --hover token.

[paulopmt1]

I see that we had another layout in mind before the last week's changes: p9Jlb4-fmP-p2

cc @nuriapenya

[nuriapenya]

Yeah, I am trying to track down at what point we changed the Calypso notice to look "lighter". I agree with @zaguiini , it's currently not visible. Started a thread here in Slack: p1739002922765779-slack-C9EJ7KSGH

[ddc22]

This color change should live under :)

https://github.com/Automattic/wp-calypso/pull/99542/files#diff-cb8e8eca0c2990d3d8994dcbc991f202c49257238de2438ba6795c383cbdb298L375

[p-jackson]

I see that discussion in Slack, but since this is currently broken in production I feel like I should merge this quick fix.