Add text variants

src/themes/Theme.tsx

@@ -51,6 +51,11 @@ const theme = createTheme({
 		tablet: 768,
 	},
 	textVariants: {
+		defaults: {
+			// We can define a default text variant here.
+			color: "gray",
+		},
+
 		header: {
 			fontWeight: "bold",
 			fontSize: 34,
@@ -59,9 +64,6 @@ const theme = createTheme({
 			fontSize: 16,
 			lineHeight: 24,
 		},
-		defaults: {
-			// We can define a default text variant here.
-		},
 		primary: {
 			color: "primary",
 		},
@@ -74,6 +76,12 @@ const theme = createTheme({
 		white: {
 			color: "white",
 		},
+		gray: {
+			color: "gray",
+		},
+		lightGray: {
+			color: "lightGray",
+		},
 	},
 	cardVariants: {
 		defaults: {

src/themes/Variants.tsx

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