decoupled button variants too. we do not have quick type check for properties…

src/themes/Theme.tsx

 import { createTheme } from "@shopify/restyle";
+import { buttonVariants } from "./variants/buttonVariants";
 import { cardVariants } from "./variants/cardVariants";
 
 const palette = {
@@ -107,40 +108,7 @@ const theme = createTheme({
 		},
 	},
 	cardVariants,
-	buttonVariants: {
-		defaults: {
-			// We can define defaults for the variant here.
-		},
-		noMargin: {
-			margin: {
-				phone: undefined,
-				tablet: undefined,
-			},
-		},
-		full: {
-			backgroundColor: "secondary",
-			color: "white",
-		},
-		danger: {
-			backgroundColor: "softRed",
-		},
-		fullError: {
-			backgroundColor: "softRed",
-			color: "white",
-		},
-		fullInformation: {
-			backgroundColor: "softYellow",
-			color: "white",
-		},
-		clean: {
-			backgroundColor: "primary",
-			color: "secondary",
-		},
-		lightGray: {
-			backgroundColor: "lightGray",
-			color: "black",
-		},
-	},
+	buttonVariants,
 });
 
 export type Theme = typeof theme;

src/themes/Variants.tsx

@@ -7,16 +7,6 @@ export const cardVariants = createVariant<Theme, "cardVariants">({
 
 export const buttonVariants = createVariant<Theme, "buttonVariants">({
 	themeKey: "buttonVariants",
-	defaults: {
-		backgroundColor: "primary",
-		color: "secondary",
-		height: 50,
-		borderRadius: 10,
-		margin: {
-			phone: "s",
-			tablet: "m",
-		},
-	},
 });
 
 export const textVariants = createVariant<Theme, "textVariants">({

src/themes/variants/buttonVariants.ts

+export const buttonVariants = {
+	defaults: {
+		// We can define defaults for the variant here.
+	},
+	noMargin: {
+		margin: {
+			phone: undefined,
+			tablet: undefined,
+		},
+	},
+	full: {
+		backgroundColor: "secondary",
+		color: "white",
+		height: 50,
+		borderRadius: 10,
+		margin: {
+			phone: "s",
+			tablet: "m",
+		},
+	},
+	danger: {
+		backgroundColor: "softRed",
+		height: 50,
+		borderRadius: 10,
+		margin: {
+			phone: "s",
+			tablet: "m",
+		},
+	},
+	fullError: {
+		backgroundColor: "softRed",
+		color: "white",
+		height: 50,
+		borderRadius: 10,
+		margin: {
+			phone: "s",
+			tablet: "m",
+		},
+	},
+	fullInformation: {
+		backgroundColor: "softYellow",
+		color: "white",
+		height: 50,
+		borderRadius: 10,
+		margin: {
+			phone: "s",
+			tablet: "m",
+		},
+	},
+	clean: {
+		backgroundColor: "primary",
+		color: "secondary",
+		height: 50,
+		borderRadius: 10,
+		margin: {
+			phone: "s",
+			tablet: "m",
+		},
+	},
+	lightGray: {
+		backgroundColor: "lightGray",
+		color: "black",
+		height: 50,
+		borderRadius: 10,
+		margin: {
+			phone: "s",
+			tablet: "m",
+		},
+	},
+};