feat(ui): align Mosaic Card with updated design

Author: austincalvelage

packages/ui/src/mosaic/components/card/card.styles.ts

@@ -4,16 +4,15 @@ import { colorVars, radiusVars, space } from '../../tokens.stylex';
 
 export const styles = stylex.create({
   root: {
-    borderColor: colorVars['--cl-color-border'],
-    borderRadius: radiusVars['--cl-radius-element'],
-    borderStyle: 'solid',
-    borderWidth: '1px',
+    borderRadius: radiusVars['--cl-radius-container'],
     overflow: 'hidden',
     backgroundColor: colorVars['--cl-color-card'],
+    boxShadow: `0 12px 12px -7px oklch(0.2046 0 0 / 12%),
+                0 24px 24px -10px oklch(0.2046 0 0 / 4%),
+                0 0 0 1px oklch(0.2046 0 0 / 4%)`,
     color: colorVars['--cl-color-card-foreground'],
     display: 'flex',
     flexDirection: 'column',
-    rowGap: space['5'],
     width: '100%',
   },
   header: {
@@ -29,8 +28,19 @@ export const styles = stylex.create({
     flexShrink: '1',
   },
   footer: {
-    paddingInline: space['4'],
-    paddingBlockEnd: space['5'],
+    gap: space['2'],
+    paddingBlock: space['4'],
+    paddingInline: space['6'],
+    alignItems: 'center',
+    backgroundColor: `color-mix(in oklab, ${colorVars['--cl-color-card-foreground']} 4%, ${colorVars['--cl-color-card']})`,
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexShrink: 0,
+    justifyContent: 'space-between',
+    borderTopColor: colorVars['--cl-color-border'],
+    borderTopStyle: 'solid',
+    borderTopWidth: '1px',
+    width: '100%',
   },
 });