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

const focusRing = apply`focus:outline-main`;

const button = apply`${focusRing}
  bg-blue(400 500(hover:& focus:&) dark:(600 700(hover:& focus:&))) px-4 py-2 rounded cursor-pointer
`;

const input = apply`
  ${focusRing} rounded bg-gray(200 300(hover:& focus:&) dark:(800 700(hover:& focus:&))) px-4 py-2`;

export default {
  selfURL: import.meta.url,

  theme: {
    outline: {
      main: ["2px solid currentColor", "1px"],
    },
    extend: {
      spacing: {
        128: "32rem",
        144: "36rem",
      },
    },
  },
  preflight: (preflight) =>
    css(preflight, {
      "body,html": apply("bg-white text-black dark:(bg-gray-900 text-white)"),
      "::-moz-focus-inner": { border: 0 },
      "body input, body textarea": input,
      "body button, body input[type=submit]": button,
      "body ul": apply`list-disc ml-4`,
      "body a":
        apply`rounded ${focusRing} text-blue(600 700(hover:&) dark:(400 300(hover:&))`,
      "body details": apply``,
      "body details[open]": apply``,
      "body details details": apply`pl-2`,
      "body details > summary": apply`${button} ${focusRing} rounded`,
    }),
} as Options;