import { defineConfig, transformerDirectives, presetWind } from "unocss"
import colors from "windicss/colors"

const headlessUiVariantRegex = /^ui-(\w+):/

export default defineConfig({
	presets: [
		presetWind({
			dark: "media",
			arbitraryVariants: false,
			preflight: true
		})
	],
	theme: {
		fontFamily: {
			sans: `"Manrope Variable", sans-serif`,
			serif: "Fraunces Variable, serif",
			system: "sans-serif"
		},
		colors: {
			dark: colors.dark,
			light: colors.light,
			gray: colors.warmGray,
			orange: colors.orange,
			background: "hsl(34, 100%, 99%)"
		}
	},
	variants: [
		matcher => {
			const matches = matcher.match(headlessUiVariantRegex)

			if (matches === null) {
				return matcher
			}

			const prefix = matches[0]
			const state = matches[1]

			return {
				matcher: matcher.slice(prefix.length),
				selector: s => `${s}[data-headlessui-state~="${state}"]`
			}
		}
	],
	transformers: [
		transformerDirectives()
	]
})