From 433daee8a052e467b8245c454a913544ed032ccf Mon Sep 17 00:00:00 2001
From: j10sanders <jonsandersss@gmail.com>
Date: Fri, 15 Mar 2024 19:51:06 -0400
Subject: [PATCH 1/8] color mode again

---
 packages/gamut/src/Card/index.tsx | 93 +++++++++++++++++++------------
 1 file changed, 56 insertions(+), 37 deletions(-)

diff --git a/packages/gamut/src/Card/index.tsx b/packages/gamut/src/Card/index.tsx
index a90080ecf9..4f3fdd803e 100644
--- a/packages/gamut/src/Card/index.tsx
+++ b/packages/gamut/src/Card/index.tsx
@@ -1,20 +1,28 @@
-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>(
+const DynamicCardWrapper = styled(Box)<CardWrapperProps>(({ mode, ...props }) =>
   variant({
     prop: 'shadow',
     base: {
@@ -35,56 +43,65 @@ const DynamicCardWrapper = styled(Box)<CardWrapperProps>(
           boxShadow: `-8px 8px 0 currentColor`,
         },
       },
-      outline: outlineStyles,
+      outline: outlineStyles(mode), // Use the function with mode
     },
-  })
+  })(props)
 );
 
-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}`,
-      },
+const shadowVariants = (mode: ColorModes) =>
+  variant({
+    prop: 'shadow',
+    base: {
+      position: 'relative',
+      boxShadow: `0px 0px 0 currentColor`,
+      transition: 'box-shadow 200ms ease, transform 200ms ease',
     },
-    medium: {
-      '&:hover': {
-        transform: 'translate(4px, -4px)',
-        boxShadow: `-8px 8px 0 ${theme.colors.navy}`,
+    variants: {
+      small: {
+        '&:hover': {
+          transform: 'translate(2px, -2px)',
+          boxShadow: `-4px 4px 0 ${mode === 'dark' ? 'white' : 'currentColor'}`,
+        },
+      },
+      medium: {
+        '&:hover': {
+          transform: 'translate(4px, -4px)',
+          boxShadow: `-8px 8px 0 ${mode === 'dark' ? 'white' : 'currentColor'}`,
+        },
       },
+      outline: outlineStyles(mode),
     },
-    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';
 }
 
 const CardWrapper = styled(Background)<CardWrapperProps>(
-  shadowVariants,
-  system.states({
-    outline: {
-      '&:hover': {
-        outline: '1px solid currentColor',
+  ({ mode, ...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();
+  const { mode: _, ...otherRest } = rest;
+
   if (!variant) {
     return (
       <DynamicCardWrapper
@@ -93,7 +110,8 @@ export const Card: React.FC<CardProps> = ({ variant, ...rest }) => {
         bg="background"
         color="text"
         p={16}
-        {...rest}
+        mode={mode}
+        {...otherRest}
       />
     );
   }
@@ -105,7 +123,8 @@ export const Card: React.FC<CardProps> = ({ variant, ...rest }) => {
       borderColor="navy"
       p={16}
       outline={variant === 'navy'}
-      {...rest}
+      mode={mode}
+      {...otherRest}
     />
   );
 };

From 0818689ebc1198e50a7f4d3f412f714c242817ed Mon Sep 17 00:00:00 2001
From: j10sanders <jonsandersss@gmail.com>
Date: Mon, 18 Mar 2024 10:33:52 -0400
Subject: [PATCH 2/8] eslint disable

---
 packages/gamut/src/Card/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/gamut/src/Card/index.tsx b/packages/gamut/src/Card/index.tsx
index 4f3fdd803e..0d35269983 100644
--- a/packages/gamut/src/Card/index.tsx
+++ b/packages/gamut/src/Card/index.tsx
@@ -100,6 +100,7 @@ const CardWrapper = styled(Background)<CardWrapperProps>(
 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) {

From 5e15efb75ba7ad752dce678f601cdc1a1948f9c8 Mon Sep 17 00:00:00 2001
From: j10sanders <jonsandersss@gmail.com>
Date: Mon, 18 Mar 2024 12:19:47 -0400
Subject: [PATCH 3/8] remove comment

---
 packages/gamut/src/Card/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gamut/src/Card/index.tsx b/packages/gamut/src/Card/index.tsx
index 0d35269983..c436d7512f 100644
--- a/packages/gamut/src/Card/index.tsx
+++ b/packages/gamut/src/Card/index.tsx
@@ -43,7 +43,7 @@ const DynamicCardWrapper = styled(Box)<CardWrapperProps>(({ mode, ...props }) =>
           boxShadow: `-8px 8px 0 currentColor`,
         },
       },
-      outline: outlineStyles(mode), // Use the function with mode
+      outline: outlineStyles(mode),
     },
   })(props)
 );

From 9ca9b274e040081e10e9a110cb3616a284a447e7 Mon Sep 17 00:00:00 2001
From: j10sanders <jonsandersss@gmail.com>
Date: Wed, 20 Mar 2024 11:46:42 -0400
Subject: [PATCH 4/8] optional with default light

---
 packages/gamut/src/Card/index.tsx | 47 ++++++++++++++++---------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/packages/gamut/src/Card/index.tsx b/packages/gamut/src/Card/index.tsx
index c436d7512f..2ae85dc40c 100644
--- a/packages/gamut/src/Card/index.tsx
+++ b/packages/gamut/src/Card/index.tsx
@@ -22,30 +22,31 @@ const outlineStyles = (mode: ColorModes) => ({
   },
 });
 
-const DynamicCardWrapper = styled(Box)<CardWrapperProps>(({ mode, ...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`,
-        },
+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',
       },
-      medium: {
-        '&:hover': {
-          transform: 'translate(4px, -4px)',
-          boxShadow: `-8px 8px 0 currentColor`,
+      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),
       },
-      outline: outlineStyles(mode),
-    },
-  })(props)
+    })(props)
 );
 
 const shadowVariants = (mode: ColorModes) =>
@@ -80,12 +81,12 @@ export interface CardProps
 
 interface CardWrapperProps {
   outline?: boolean;
-  mode: ColorModes;
+  mode?: ColorModes;
   shadow?: 'small' | 'medium' | 'outline';
 }
 
 const CardWrapper = styled(Background)<CardWrapperProps>(
-  ({ mode, ...props }) => ({
+  ({ mode = 'light', ...props }) => ({
     ...shadowVariants(mode)(props),
     ...system.states({
       outline: {

From eb8aeda335202bff612393b11f93eb5713076a84 Mon Sep 17 00:00:00 2001
From: j10sanders <jonsandersss@gmail.com>
Date: Thu, 21 Mar 2024 09:25:20 -0400
Subject: [PATCH 5/8] apparently a monolith card passes false for shadow

---
 packages/gamut/src/Card/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gamut/src/Card/index.tsx b/packages/gamut/src/Card/index.tsx
index 2ae85dc40c..73d70c9b3e 100644
--- a/packages/gamut/src/Card/index.tsx
+++ b/packages/gamut/src/Card/index.tsx
@@ -82,7 +82,7 @@ export interface CardProps
 interface CardWrapperProps {
   outline?: boolean;
   mode?: ColorModes;
-  shadow?: 'small' | 'medium' | 'outline';
+  shadow?: 'small' | 'medium' | 'outline' | false;
 }
 
 const CardWrapper = styled(Background)<CardWrapperProps>(

From dc212e0470f046388a641c4d52a2e20e0361ff61 Mon Sep 17 00:00:00 2001
From: j10sanders <jonsandersss@gmail.com>
Date: Thu, 28 Mar 2024 11:30:26 -0400
Subject: [PATCH 6/8] fixed variant

---
 packages/gamut/src/Card/index.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/gamut/src/Card/index.tsx b/packages/gamut/src/Card/index.tsx
index 73d70c9b3e..0f4a478579 100644
--- a/packages/gamut/src/Card/index.tsx
+++ b/packages/gamut/src/Card/index.tsx
@@ -16,9 +16,7 @@ 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 ${
-      mode === 'dark' ? theme.colors['background-current'] : 'currentColor'
-    }`,
+    boxShadow: `-8px 8px 0 ${mode === 'dark' ? 'white' : theme.colors.black}`,
   },
 });
 
@@ -61,13 +59,17 @@ const shadowVariants = (mode: ColorModes) =>
       small: {
         '&:hover': {
           transform: 'translate(2px, -2px)',
-          boxShadow: `-4px 4px 0 ${mode === 'dark' ? 'white' : 'currentColor'}`,
+          boxShadow: `-4px 4px 0 ${
+            mode === 'dark' ? 'white' : theme.colors.black
+          }`,
         },
       },
       medium: {
         '&:hover': {
           transform: 'translate(4px, -4px)',
-          boxShadow: `-8px 8px 0 ${mode === 'dark' ? 'white' : 'currentColor'}`,
+          boxShadow: `-8px 8px 0 ${
+            mode === 'dark' ? 'white' : theme.colors.black
+          }`,
         },
       },
       outline: outlineStyles(mode),

From 2d4866aa401d0d217a41baa80403af4036156179 Mon Sep 17 00:00:00 2001
From: j10sanders <jonsandersss@gmail.com>
Date: Wed, 17 Apr 2024 15:54:33 -0400
Subject: [PATCH 7/8] working with all variants

---
 packages/gamut/src/Card/index.tsx | 39 ++++++++++++++-----------------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/packages/gamut/src/Card/index.tsx b/packages/gamut/src/Card/index.tsx
index 0f4a478579..44b3d5a6e5 100644
--- a/packages/gamut/src/Card/index.tsx
+++ b/packages/gamut/src/Card/index.tsx
@@ -12,11 +12,17 @@ import * as React from 'react';
 
 import { Box } from '../Box';
 
-const outlineStyles = (mode: ColorModes) => ({
-  boxShadow: `-5px 5px ${theme.colors['background-current']}, -5px 5px 0 1px ${theme.colors.black}`,
+const outlineStyles = (mode: ColorModes, variant: boolean) => ({
+  boxShadow: `-5px 5px ${theme.colors['background-current']}, -5px 5px 0 1px ${
+    mode === 'dark' && !variant ? 'white' : theme.colors.black
+  }`,
   '&:hover': {
     transform: 'translate(4px, -4px)',
-    boxShadow: `-8px 8px 0 ${mode === 'dark' ? 'white' : theme.colors.black}`,
+    boxShadow: `-8px 8px 0 ${
+      theme.colors['background-current']
+    }, -8px 8px 0 1px ${
+      mode === 'dark' && !variant ? 'white' : theme.colors.black
+    }`,
   },
 });
 
@@ -26,23 +32,23 @@ const DynamicCardWrapper = styled(Box)<CardWrapperProps>(
       prop: 'shadow',
       base: {
         position: 'relative',
-        boxShadow: `0px 0px 0 currentColor`,
+        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 currentColor`,
+            boxShadow: `-4px 4px 0 ${theme.colors.navy}, -4px 4px 0 1px white`,
           },
         },
         medium: {
           '&:hover': {
             transform: 'translate(4px, -4px)',
-            boxShadow: `-8px 8px 0 currentColor`,
+            boxShadow: `-8px 8px 0 ${theme.colors.navy}, -8px 8px 0 1px white`,
           },
         },
-        outline: outlineStyles(mode),
+        outline: outlineStyles(mode, false),
       },
     })(props)
 );
@@ -52,27 +58,23 @@ const shadowVariants = (mode: ColorModes) =>
     prop: 'shadow',
     base: {
       position: 'relative',
-      boxShadow: `0px 0px 0 currentColor`,
+      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 ${
-            mode === 'dark' ? 'white' : theme.colors.black
-          }`,
+          boxShadow: `-4px 4px 0 ${theme.colors.navy}, -4px 4px 0 1px white`,
         },
       },
       medium: {
         '&:hover': {
           transform: 'translate(4px, -4px)',
-          boxShadow: `-8px 8px 0 ${
-            mode === 'dark' ? 'white' : theme.colors.black
-          }`,
+          boxShadow: `-4px 4px 0 ${theme.colors.navy}, -4px 4px 0 1px white`,
         },
       },
-      outline: outlineStyles(mode),
+      outline: outlineStyles(mode, true),
     },
   });
 
@@ -90,13 +92,6 @@ interface CardWrapperProps {
 const CardWrapper = styled(Background)<CardWrapperProps>(
   ({ mode = 'light', ...props }) => ({
     ...shadowVariants(mode)(props),
-    ...system.states({
-      outline: {
-        '&:hover': {
-          outline: '1px solid currentColor',
-        },
-      },
-    })(props),
   })
 );
 

From dd8e863c8b2e4ab8677f0b1bcbeae55661316d8a Mon Sep 17 00:00:00 2001
From: j10sanders <jonsandersss@gmail.com>
Date: Thu, 18 Apr 2024 09:31:43 -0400
Subject: [PATCH 8/8] added to storybook

---
 packages/gamut/src/Card/index.tsx                  |  1 -
 packages/styleguide/stories/Atoms/Card.stories.mdx | 14 ++++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/gamut/src/Card/index.tsx b/packages/gamut/src/Card/index.tsx
index 44b3d5a6e5..ce1af31b19 100644
--- a/packages/gamut/src/Card/index.tsx
+++ b/packages/gamut/src/Card/index.tsx
@@ -1,7 +1,6 @@
 import {
   Background,
   ColorModes,
-  system,
   theme,
   useColorModes,
   variant,
diff --git a/packages/styleguide/stories/Atoms/Card.stories.mdx b/packages/styleguide/stories/Atoms/Card.stories.mdx
index d4016b124c..30d535e06e 100644
--- a/packages/styleguide/stories/Atoms/Card.stories.mdx
+++ b/packages/styleguide/stories/Atoms/Card.stories.mdx
@@ -65,6 +65,20 @@ We provide 3 style variants for shadow.
   </Story>
 </Canvas>
 
+Examples with variant = hyper.
+
+<Canvas>
+  <Story name="SmallVariant" args={{ shadow: 'small', variant: 'hyper' }}>
+    {(args) => <Card {...args} />}
+  </Story>
+  <Story name="MediumVariant" args={{ shadow: 'medium', variant: 'hyper' }}>
+    {(args) => <Card {...args} />}
+  </Story>
+  <Story name="OutlineVariant" args={{ shadow: 'outline', variant: 'hyper' }}>
+    {(args) => <Card {...args} />}
+  </Story>
+</Canvas>
+
 ### Shadow Variant "outline" with color
 
 The outline color will inherit the color of the card.