feat(web): wire shadow and elevation into CSS transitions and styles

Author: janicduplessis

src/EaseView.web.tsx

@@ -205,6 +205,8 @@ const CSS_PROP_MAP = {
   transform: 'transform',
   borderRadius: 'border-radius',
   backgroundColor: 'background-color',
+  boxShadow: 'box-shadow',
+  elevation: 'elevation',
 } as const;
 
 type CategoryKey = keyof typeof CSS_PROP_MAP;
@@ -220,6 +222,8 @@ function resolvePerCategoryConfigs(
       transform: def,
       borderRadius: def,
       backgroundColor: def,
+      boxShadow: def,
+      elevation: def,
     };
   }
   if (isSingleTransition(transition)) {
@@ -229,10 +233,15 @@ function resolvePerCategoryConfigs(
       transform: def,
       borderRadius: def,
       backgroundColor: def,
+      boxShadow: def,
+      elevation: def,
     };
   }
   // TransitionMap
   const defaultConfig = resolveConfigForCss(transition.default);
+  const shadowConfig = transition.shadow
+    ? resolveConfigForCss(transition.shadow)
+    : defaultConfig;
   return {
     opacity: transition.opacity
       ? resolveConfigForCss(transition.opacity)
@@ -246,6 +255,8 @@ function resolvePerCategoryConfigs(
     backgroundColor: transition.backgroundColor
       ? resolveConfigForCss(transition.backgroundColor)
       : defaultConfig,
+    boxShadow: shadowConfig,
+    elevation: shadowConfig,
   };
 }
 
@@ -494,6 +505,20 @@ export function EaseView({
     ...(displayValues.backgroundColor
       ? { backgroundColor: displayValues.backgroundColor }
       : {}),
+    ...(displayValues.shadowOpacity > 0
+      ? {
+          shadowColor: displayValues.shadowColor ?? 'black',
+          shadowOpacity: displayValues.shadowOpacity,
+          shadowRadius: displayValues.shadowRadius,
+          shadowOffset: {
+            width: displayValues.shadowOffsetX,
+            height: displayValues.shadowOffsetY,
+          },
+        }
+      : {}),
+    ...(displayValues.elevation > 0
+      ? { elevation: displayValues.elevation }
+      : {}),
   };
 
   return (