stuff

tailwind.config.cjs

@@ -6,13 +6,11 @@ const { themeVariants, prefersDark, prefersLight } = require("tailwindcss-theme-
 
 module.exports = {
 	mode: "jit",
-	purge: [
-		"./src/**/*.{html,js,md,svelte,svx,ts}",
-	],
+	purge: ["./src/**/*.{html,js,md,svelte,svx,ts}"],
 	theme: {
 		extend: {
 			colors: {
-				"true-gray": colors.trueGray,
+				gray: colors.trueGray,
 				amber: colors.amber,
 			},
 
@@ -21,6 +19,10 @@ module.exports = {
 				heading: ["'Rubik'", ...defaultTheme.fontFamily.serif],
 			},
 
+			maxWidth: {
+				prose: "42rem",
+			},
+
 			typography,
 		},
 	},
@@ -33,11 +35,17 @@ module.exports = {
 					semantics: {
 						colors: {
 							"primary": "white",
+							"primary-dark": "gray-100",
+
 							"on-primary": "gray-900",
+							"on-primary-weak": "gray-600",
+							"on-primary-faint": "gray-400",
+
 
 							"accent": "amber-600",
 							"accent-vivid": "amber-400",
 							"accent-strong": "amber-800",
+							
 							"on-accent": "black",
 						},
 					},
@@ -46,12 +54,18 @@ module.exports = {
 					mediaQuery: prefersDark,
 					semantics: {
 						colors: {
-							"primary": "true-gray-900",
+							"primary": "gray-900",
+							"primary-dark": "black",
+							
 							"on-primary": "white",
+							"on-primary-weak": "gray-400",
+							"on-primary-faint": "gray-600",
+
 
 							"accent": "amber-400",
 							"accent-vivid": "amber-600",
 							"accent-strong": "amber-200",
+							
 							"on-accent": "white",
 						},
 					},