feat: add deep shadow on card hover (#4730)

add deep shadow on card hover
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/collection/Card.css.ts

@@ -20,6 +20,9 @@ export const card = style([
         },
       },
     },
+    ':hover': {
+      boxShadow: themeVars.shadows.deep,
+    },
   },
 ])
 

src/nft/css/sprinkles.css.ts

@@ -33,6 +33,7 @@ const themeContractValues = {
     genieBlue: '',
     elevation: '',
     tooltip: '',
+    deep: '',
   },
 }
 

src/nft/themes/darkTheme.ts

@@ -31,5 +31,6 @@ export const darkTheme: Theme = {
     genieBlue: '0 4px 16px 0 rgba(70, 115, 250, 0.4)',
     elevation: '0px 4px 16px rgba(70, 115, 250, 0.4)',
     tooltip: '0px 4px 16px rgba(255, 255, 255, 0.2)',
+    deep: '12px 16px 24px rgba(0, 0, 0, 0.24), 12px 8px 12px rgba(0, 0, 0, 0.24), 4px 4px 8px rgba(0, 0, 0, 0.32)',
   },
 }

src/nft/themes/lightTheme.ts

@@ -31,5 +31,6 @@ export const lightTheme: Theme = {
     genieBlue: '0 4px 16px 0 rgba(251, 17, 142)',
     elevation: '0px 4px 16px rgba(70, 115, 250, 0.4)',
     tooltip: '0px 4px 16px rgba(10, 10, 59, 0.2)',
+    deep: '8px 12px 20px rgba(51, 53, 72, 0.04), 4px 6px 12px rgba(51, 53, 72, 0.02), 4px 4px 8px rgba(51, 53, 72, 0.04)',
   },
 }