import { defineConfig } from "vite-plugin-windicss"; import colors from "windicss/colors"; import typography from "windicss/plugin/typography"; import plugin from "windicss/plugin"; export default defineConfig({ darkMode: "class", safelist: "order-last button-primary button-gray button-red button-transparent", attributify: true, plugins: [ typography(), plugin(({ addVariant }) => { addVariant("error", ({ style }) => { return style.parent(".error"); }); addVariant("filled", ({ style }) => { return style.parent(".filled"); }); addVariant("input-focused", ({ style }) => { return style.wrapSelector((s) => "input:focus ~ " + s); }); addVariant("input-focus-visible", ({ style }) => { return style.wrapSelector((s) => "input:focus-visible ~ " + s); }); addVariant("select-focused", ({ style }) => { return style.wrapSelector((s) => "select:focus ~ " + s); }); }), ], theme: { extend: { typography: { DEFAULT: { css: { maxWidth: "65ch", color: "inherit", lineHeight: "1.6em", a: { color: "inherit", opacity: 0.75, fontWeight: "500", textDecoration: "underline", "&:hover": { opacity: 1, color: colors.teal[600], }, }, b: { color: "inherit" }, strong: { color: "inherit" }, em: { color: "inherit" }, h1: { color: "inherit", fontWeight: "600", marginBottom: "0.6em", }, h2: { color: "inherit", fontWeight: "600", marginTop: "inherit", marginBottom: "0.6em", }, h3: { color: "inherit", marginTop: "inherit", marginBottom: "0.6em", }, h4: { color: "inherit", marginTop: "inherit", marginBottom: "0.6em", }, code: { color: "inherit" }, li: { marginTop: "0.2em", marginBottom: "0.2em", }, }, }, }, colors: { primary: { 0: "#E6EDFD", // old primary-50 50: "#CCDCFB", 100: "#99B8F6", // old primary-70 200: "#6695F2", 300: "#3371ED", 400: "#004EE9", // old primary-100 500: "#003EBA", 600: "#002F8C", 700: "#001F5D", 800: "#00102F", 900: "#000817", }, "primary-light": { 0: "#FFFFFF", 100: "#F5F8FE", 200: "#EBF1FD", 300: "#E0EAFC", 400: "#D6E3FB", 500: "#CCDCFB", 600: "#C2D4FA", 700: "#B8CDF9", 800: "#ADC6F8", 900: "#A3BFF7", 1000: "#99B8F6", }, "background-dark-90": "#111111", "background-dark-80": "#181a1b", "background-light-10": "#f8faff", "background-light-0": "#ffffff", }, }, }, shortcuts: { "background-header": "bg-background-light-0 dark:bg-background-dark-90", "background-body": "bg-background-light-10 dark:bg-background-dark-80", "color-primary": "text-primary-400 dark:text-primary-100", "border-top-primary": "border-solid border-t-4 border-t-primary-400", "button-primary": "text-white bg-primary-400 disabled:(bg-primary-100 dark:(bg-primary-800 text-neutral-500) cursor-not-allowed) enabled:hover:bg-primary-300", "button-transparent": "bg-transparent disabled:(text-black/50 dark:text-white/50 cursor-not-allowed) enabled:hover:(bg-primary-400/15 text-primary-400 dark:text-primary-100)", "button-red": "text-white bg-red-500 dark:bg-red-600 disabled:(bg-red-300 dark:(bg-red-900 text-neutral-400) cursor-not-allowed) enabled:hover:(bg-red-400 dark:bg-red-500)", "button-gray": "text-white bg-zinc-500 dark:bg-slate-700 disabled:(bg-zinc-300 text-neutral-500 dark:bg-zinc-800 cursor-not-allowed) enabled:hover:(bg-zinc-400 dark:bg-slate-600)", }, });