decoupled text variants

src/themes/Theme.tsx

 import { createTheme } from "@shopify/restyle";
 import { buttonVariants } from "./variants/buttonVariants";
 import { cardVariants } from "./variants/cardVariants";
+import { textVariants } from "./variants/textVariants";
 
 const palette = {
 	purpleLight: "#8C6FF7",
@@ -61,52 +62,7 @@ const theme = createTheme({
 		phone: 0,
 		tablet: 768,
 	},
-	textVariants: {
-		defaults: {
-			// We can define a default text variant here.
-			color: "gray",
-		},
-
-		header: {
-			fontWeight: "bold",
-			fontSize: 34,
-		},
-		body: {
-			fontSize: 16,
-			lineHeight: 24,
-		},
-		primary: {
-			color: "primary",
-		},
-		secondary: {
-			color: "secondary",
-		},
-		black: {
-			color: "black",
-		},
-		white: {
-			color: "white",
-		},
-		gray: {
-			color: "gray",
-		},
-		lightGray: {
-			color: "lightGray",
-		},
-		error: {
-			color: "red",
-		},
-		softRed: {
-			color: "softRed",
-		},
-		yellow: {
-			color: "softYellow",
-		},
-
-		softYellow: {
-			color: "softYellow",
-		},
-	},
+	textVariants,
 	cardVariants,
 	buttonVariants,
 });

src/themes/Variants.tsx

@@ -11,9 +11,4 @@ export const buttonVariants = createVariant<Theme, "buttonVariants">({
 
 export const textVariants = createVariant<Theme, "textVariants">({
 	themeKey: "textVariants",
-	defaults: {
-		fontSize: 16,
-		fontWeight: "normal",
-		color: "gray",
-	},
 });

src/themes/variants/textVariants.ts

+export const textVariants = {
+	defaults: {
+		// fontSize: 16,
+		// fontWeight: "normal",
+		color: "gray",
+	},
+
+	header: {
+		fontWeight: "bold",
+		fontSize: 34,
+	},
+	body: {
+		fontSize: 16,
+		lineHeight: 24,
+	},
+	primary: {
+		color: "primary",
+	},
+	secondary: {
+		color: "secondary",
+	},
+	black: {
+		color: "black",
+	},
+	white: {
+		color: "white",
+	},
+	gray: {
+		color: "gray",
+	},
+	lightGray: {
+		color: "lightGray",
+	},
+	error: {
+		color: "red",
+	},
+	softRed: {
+		color: "softRed",
+	},
+	yellow: {
+		color: "softYellow",
+	},
+
+	softYellow: {
+		color: "softYellow",
+	},
+};