import { Options } from "$fresh/plugins/twind.ts";
import { apply } from "twind";
import { css } from "twind/css";

const button = apply(
  "bg-blue(400 500(hover:& focus:&) dark:(600 700(hover:& focus:&))) px-4 py-2 rounded cursor-pointer ring(focus:& current)",
);

const input = apply(
  "rounded bg-gray(200 300(hover:& focus:&) dark:(800 700(hover:& focus:&))) px-4 py-2 ring(focus:& current)",
);

export default {
  selfURL: import.meta.url,
  preflight: (preflight) =>
    css(preflight, {
      body: apply("bg-white text-black dark:(bg-gray-900 text-white)"),
      "body input, body textarea": input,
      "body button, body input[type=submit]": button,
      "body a": apply(
        "text-blue(600 700(hover:&) dark:(400 300(hover:&))",
      ),
    }),
} as Options;