feat(Button): Update hover background

[aresnik11]

Overview

Updates all variants of Button hover background to be the correct values with a nice transition

PR Checklist

• Related to designs:
• Related to JIRA ticket: GM-856
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

1. Visit https://66e0b28bc94e7b1131cab395--gamut-preview.netlify.app/
2. Confirm TextButton and StrokeButton hover colors are darker
3. Confirm CTAButton hover color is lighter
4. Confirm FillButton hover color is the same
5. Scroll down to all the buttons in dark mode
6. Repeat 2,3,4 with all the buttons
7. Make sure e2e tests pass in https://github.com/codecademy-engineering/mono/pull/7605, note: the unit test failures are related to a previous gamut bump included in this alpha that have a separate PR out to resolve

PR Links and Envs

Repository	PR Link	PR Env
Portal	Portal Link	Portal Env

[dreamwasp]

lgtm! while reviewing the button figma i noticed the StrokeButton bg hover color is also currently off (it should be the same color as TextButton's is here). could ya include that change in this work or i can cut a follow-up ticket for it

[aresnik11]

lgtm! while reviewing the button figma i noticed the StrokeButton bg hover color is also currently off (it should be the same color as TextButton's is here). could ya include that change in this work or i can cut a follow-up ticket for it

@dreamwasp i can do it here!

[dreamwasp]

nice! i was double-checking the figma and the color still looks a little off to me so i compared side-by-side against a beige background.

i narrowed it down to this &:after effect here which is shading everything a little darker -

gamut/packages/gamut/src/Button/shared/styles.ts

Line 58 in aff2f90

[ButtonSelectors.SHADOW]: {

i didn't look into it that much, but we can prob use these just in the button styles they're applicable to and move the animation transitions to the background colors for the stroke + textbutton

[codecademydev]

📬Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

[codecademydev]

🚀 Styleguide deploy preview ready!

https://66e0b28bc94e7b1131cab395--gamut-preview.netlify.app

Deploy Logs

[dreamwasp]

perfection