⚡ feat: more stuff

tailwind.config.cjs

@@ -1,31 +1,63 @@
-const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles");
+const colors = require("tailwindcss/colors");
+const defaultTheme = require("tailwindcss/defaultTheme");
+const typography = require("./tailwind-typography-styles.cjs");
+
+const { themeVariants, prefersDark, prefersLight } = require("tailwindcss-theme-variants");
 
 module.exports = {
-	purge: {
-		content: [
-			"./src/**/*.{html,js,svelte,ts}",
-		],
-		options: {
-			defaultExtractor: (content) => [
-				// If this stops working, please open an issue at https://github.com/svelte-add/tailwindcss/issues rather than bothering Tailwind Labs about it
-				...tailwindExtractor(content),
-				// Match Svelte class: directives (https://github.com/tailwindlabs/tailwindcss/discussions/1731)
-				...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(([_match, group, ..._rest]) => group),
-			],
-			keyframes: true,
-		},
-	},
+	mode: "jit",
+	purge: [
+		"./src/**/*.{html,js,md,svelte,svx,ts}",
+	],
 	theme: {
 		extend: {
+			colors: {
+				"true-gray": colors.trueGray,
+				amber: colors.amber,
+			},
+
 			fontFamily: {
-				sans: ["system-ui", "Helvetica", "Arial", "sans-serif"]
-			}
+				sans: ["'Rubik'", ...defaultTheme.fontFamily.sans],
+				heading: ["'Rubik'", ...defaultTheme.fontFamily.serif],
+			},
+
+			typography,
 		},
 	},
-	variants: {
-		extend: {},
-	},
 	plugins: [
 		require("@tailwindcss/typography"),
+		themeVariants({
+			themes: {
+				light: {
+					mediaQuery: prefersLight,
+					semantics: {
+						colors: {
+							"primary": "white",
+							"on-primary": "gray-900",
+
+							"accent": "amber-600",
+							"accent-vivid": "amber-400",
+							"accent-strong": "amber-800",
+							"on-accent": "black",
+						},
+					},
+				},
+				dark: {
+					mediaQuery: prefersDark,
+					semantics: {
+						colors: {
+							"primary": "true-gray-900",
+							"on-primary": "white",
+
+							"accent": "amber-400",
+							"accent-vivid": "amber-600",
+							"accent-strong": "amber-200",
+							"on-accent": "white",
+						},
+					},
+				},
+			},
+			fallback: "compact",
+		}),
 	],
 };