add some spacing option up to 240 and minor variants update

src/themes/Theme.tsx

@@ -33,6 +33,17 @@ const theme = createTheme({
 		m: 16,
 		l: 24,
 		xl: 40,
+		x64: 64,
+		x72: 72,
+		x80: 80,
+		x100: 100,
+		x120: 120,
+		x140: 140,
+		x160: 160,
+		x180: 180,
+		x200: 200,
+		x220: 220,
+		x240: 240,
 		// full: "100%",
 	},
 	breakpoints: {
@@ -57,6 +68,12 @@ const theme = createTheme({
 		secondary: {
 			color: "secondary",
 		},
+		black: {
+			color: "black",
+		},
+		white: {
+			color: "white",
+		},
 	},
 	cardVariants: {
 		defaults: {
@@ -94,6 +111,10 @@ const theme = createTheme({
 			backgroundColor: "primary",
 			color: "secondary",
 		},
+		lightGray: {
+			backgroundColor: "lightGray",
+			color: "black",
+		},
 	},
 });