fix: Color Mode BoxShadow for cards

Redoing #2846
Codecademy · Mar 29, 2024 · bd84e2b · bd84e2b
1 parent 8429aa5
commit bd84e2b
Showing 1 changed file with 64 additions and 43 deletions.
diff --git a/packages/gamut/src/Card/index.tsx b/packages/gamut/src/Card/index.tsx
@@ -1,20 +1,55 @@
-import { Background, system, theme, variant } from '@codecademy/gamut-styles';
-import { StyleProps } from '@codecademy/variance';
+import {
+  Background,
+  ColorModes,
+  system,
+  theme,
+  useColorModes,
+  variant,
+} from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 import { ComponentProps } from 'react';
 import * as React from 'react';
 
 import { Box } from '../Box';
 
-const outlineStyles = {
+const outlineStyles = (mode: ColorModes) => ({
   boxShadow: `-5px 5px ${theme.colors['background-current']}, -5px 5px 0 1px ${theme.colors.black}`,
   '&:hover': {
     transform: 'translate(4px, -4px)',
-    boxShadow: `-8px 8px 0 currentColor`,
+    boxShadow: `-8px 8px 0 ${
+      mode === 'dark' ? theme.colors['background-current'] : 'currentColor'
+    }`,
   },
-};
+});
 
 const DynamicCardWrapper = styled(Box)<CardWrapperProps>(
+  ({ mode = 'light', ...props }) =>
+    variant({
+      prop: 'shadow',
+      base: {
+        position: 'relative',
+        boxShadow: `0px 0px 0 currentColor`,
+        transition: 'box-shadow 200ms ease, transform 200ms ease',
+      },
+      variants: {
+        small: {
+          '&:hover': {
+            transform: 'translate(2px, -2px)',
+            boxShadow: `-4px 4px 0 currentColor`,
+          },
+        },
+        medium: {
+          '&:hover': {
+            transform: 'translate(4px, -4px)',
+            boxShadow: `-8px 8px 0 currentColor`,
+          },
+        },
+        outline: outlineStyles(mode),
+      },
+    })(props)
+);
+
+const shadowVariants = (mode: ColorModes) =>
   variant({
     prop: 'shadow',
     base: {
@@ -26,65 +61,49 @@ const DynamicCardWrapper = styled(Box)<CardWrapperProps>(
       small: {
         '&:hover': {
           transform: 'translate(2px, -2px)',
-          boxShadow: `-4px 4px 0 currentColor`,
+          boxShadow: `-4px 4px 0 ${mode === 'dark' ? 'white' : 'currentColor'}`,
         },
       },
       medium: {
         '&:hover': {
           transform: 'translate(4px, -4px)',
-          boxShadow: `-8px 8px 0 currentColor`,
+          boxShadow: `-8px 8px 0 ${mode === 'dark' ? 'white' : 'currentColor'}`,
         },
       },
-      outline: outlineStyles,
-    },
-  })
-);
-
-const shadowVariants = variant({
-  prop: 'shadow',
-  base: {
-    position: 'relative',
-    boxShadow: `0px 0px 0 ${theme.colors.navy}`,
-    transition: 'box-shadow 200ms ease, transform 200ms ease',
-  },
-  variants: {
-    small: {
-      '&:hover': {
-        transform: 'translate(2px, -2px)',
-        boxShadow: `-4px 4px 0 ${theme.colors.navy}`,
-      },
+      outline: outlineStyles(mode),
     },
-    medium: {
-      '&:hover': {
-        transform: 'translate(4px, -4px)',
-        boxShadow: `-8px 8px 0 ${theme.colors.navy}`,
-      },
-    },
-    outline: outlineStyles,
-  },
-});
+  });
 
 export interface CardProps
   extends Omit<ComponentProps<typeof CardWrapper>, 'outline' | 'bg'> {
   variant?: 'navy' | 'white' | 'hyper' | 'yellow' | 'beige';
 }
 
-interface CardWrapperProps extends StyleProps<typeof shadowVariants> {
+interface CardWrapperProps {
   outline?: boolean;
+  mode?: ColorModes;
+  shadow?: 'small' | 'medium' | 'outline' | false;
 }
 
 const CardWrapper = styled(Background)<CardWrapperProps>(
-  shadowVariants,
-  system.states({
-    outline: {
-      '&:hover': {
-        outline: '1px solid currentColor',
+  ({ mode = 'light', ...props }) => ({
+    ...shadowVariants(mode)(props),
+    ...system.states({
+      outline: {
+        '&:hover': {
+          outline: '1px solid currentColor',
+        },
       },
-    },
+    })(props),
   })
 );
 
 export const Card: React.FC<CardProps> = ({ variant, ...rest }) => {
+  // mode neeeds to be overwritten if it isn't passed in
+  const [mode] = useColorModes();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { mode: _, ...otherRest } = rest;
+
   if (!variant) {
     return (
       <DynamicCardWrapper
@@ -93,7 +112,8 @@ export const Card: React.FC<CardProps> = ({ variant, ...rest }) => {
         bg="background"
         color="text"
         p={16}
-        {...rest}
+        mode={mode}
+        {...otherRest}
       />
     );
   }
@@ -105,7 +125,8 @@ export const Card: React.FC<CardProps> = ({ variant, ...rest }) => {
       borderColor="navy"
       p={16}
       outline={variant === 'navy'}
-      {...rest}
+      mode={mode}
+      {...otherRest}
     />
   );
 };