feat(cards): refine controls and modal transitions

src/shared/theme/styles.css

@@ -10,3 +10,30 @@ a {
 	color: inherit;
 	text-decoration: none;
 }
+
+@media (prefers-reduced-motion: no-preference) {
+	.mantine-Modal-content {
+		animation: modal-appear 220ms ease-out;
+	}
+
+	.mantine-Modal-overlay {
+		animation: modal-backdrop-appear 220ms ease-out;
+	}
+}
+
+@keyframes modal-appear {
+	from {
+		opacity: 0;
+		transform: translateY(8px) scale(0.98);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
+
+@keyframes modal-backdrop-appear {
+	from {
+		opacity: 0;
+	}
+}

src/shared/theme/theme.ts

@@ -4,6 +4,7 @@ import {
 	createTheme,
 	getThemeColor,
 	type MantinePrimaryShade,
+	Modal,
 	rem,
 	rgba,
 } from "@mantine/core";
@@ -21,6 +22,20 @@ const colorRoles = mapValues(color.roles, (role) =>
 );
 
 const theme = createTheme({
+	respectReducedMotion: true,
+	components: {
+		Modal: Modal.extend({
+			defaultProps: {
+				overlayProps: { blur: 3 },
+				transitionProps: {
+					transition: "fade-down",
+					duration: 220,
+					exitDuration: 180,
+					timingFunction: "ease-out",
+				},
+			},
+		}),
+	},
 	primaryColor: color.roles.primary.color,
 	primaryShade: color.primaryShade as MantinePrimaryShade,
 	defaultRadius: radius.default,