add default breakpoints and cardVariant

src/themes/Theme.tsx

@@ -17,6 +17,7 @@ const theme = createTheme({
 	colors: {
 		mainBackground: palette.white,
 		cardPrimaryBackground: palette.purplePrimary,
+		black: palette.black,
 	},
 	spacing: {
 		s: 8,
@@ -24,6 +25,10 @@ const theme = createTheme({
 		l: 24,
 		xl: 40,
 	},
+	breakpoints: {
+		phone: 0,
+		tablet: 768,
+	},
 	textVariants: {
 		header: {
 			fontWeight: "bold",
@@ -37,6 +42,30 @@ const theme = createTheme({
 			// We can define a default text variant here.
 		},
 	},
+	cardVariants: {
+		defaults: {
+			// We can define defaults for the variant here.
+			// This will be applied after the defaults passed to createVariant and before the variant defined below.
+		},
+		regular: {
+			// We can refer to other values in the theme here, and use responsive props
+			padding: {
+				phone: "s",
+				tablet: "m",
+			},
+		},
+		elevated: {
+			padding: {
+				phone: "s",
+				tablet: "m",
+			},
+			shadowColor: "black",
+			shadowOpacity: 0.5,
+			shadowOffset: { width: 10, height: 10 },
+			shadowRadius: 10,
+			elevation: 5,
+		},
+	},
 });
 
 export type Theme = typeof theme;