feat(Button): Update hover background

Updates all variants of `Button` hover background to be the correct values with a nice transition
Codecademy · Sep 12, 2024 · 38e2b68 · 38e2b68
1 parent 0d49df6
commit 38e2b68
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 20 deletions.
diff --git a/packages/gamut/src/Button/shared/styles.ts b/packages/gamut/src/Button/shared/styles.ts
@@ -55,25 +55,6 @@ export const buttonStyles = system.css({
     'fast',
     'ease-in'
   ),
-  [ButtonSelectors.SHADOW]: {
-    content: '""',
-    transition: transitionConcat(['opacity'], 'fast', 'ease-in'),
-    position: 'absolute',
-    borderRadius: 'md',
-    bg: 'text',
-    inset: -2,
-    opacity: 0,
-    zIndex: 0,
-  },
-  [ButtonSelectors.SHADOW_HOVER]: {
-    opacity: 0.06,
-  },
-  [ButtonSelectors.SHADOW_ACTIVE]: {
-    opacity: 0.025,
-  },
-  [ButtonSelectors.SHADOW_DISABLED]: {
-    opacity: 0,
-  },
   [ButtonSelectors.DISABLED]: {
     cursor: 'not-allowed',
     userSelect: 'none',

diff --git a/packages/gamut/src/Button/shared/variants.ts b/packages/gamut/src/Button/shared/variants.ts
@@ -1,8 +1,14 @@
-import { theme, variant } from '@codecademy/gamut-styles';
+import { theme, transitionConcat, variant } from '@codecademy/gamut-styles';
 
 import { ButtonSelectors } from '../../ButtonBase/ButtonBase';
 import { buttonVariants, templateVariants } from './styles';
 
+const hoverBackgroundTransition = transitionConcat(
+  ['background-color', 'box-shadow'],
+  'fast',
+  'ease-in'
+);
+
 export const fillButtonVariants = templateVariants(
   buttonVariants,
   (variant) => ({
@@ -12,6 +18,7 @@ export const fillButtonVariants = templateVariants(
     [ButtonSelectors.HOVER]: {
       bg: `${variant}-hover`,
       color: 'background',
+      transition: hoverBackgroundTransition,
     },
     [ButtonSelectors.ACTIVE]: {
       borderColor: 'text',
@@ -32,6 +39,8 @@ export const textButtonVariants = templateVariants(
     color: variant === 'interface' ? 'text' : variant,
     [ButtonSelectors.HOVER]: {
       color: variant,
+      bg: 'background-hover',
+      transition: hoverBackgroundTransition,
     },
     [ButtonSelectors.FOCUS_VISIBLE]: {
       color: variant,
@@ -55,6 +64,10 @@ export const strokeButtonVariants = templateVariants(
     borderColor: variant,
     bg: 'transparent',
     color: variant,
+    [ButtonSelectors.HOVER]: {
+      bg: 'background-hover',
+      transition: hoverBackgroundTransition,
+    },
     [ButtonSelectors.OUTLINE]: {
       borderColor: variant,
     },
@@ -85,6 +98,8 @@ export const ctaButtonVariants = templateVariants(['primary'], (variant) => ({
     left: -9,
   },
   [ButtonSelectors.HOVER]: {
+    bg: `${variant}-hover`,
+    transition: hoverBackgroundTransition,
     boxShadow: `-8px 8px 0 0 ${theme.colors.text}`,
   },
   [ButtonSelectors.ACTIVE]: {