ls-deno/twind.config.ts
2022-10-01 14:34:07 -05:00

38 lines
1 KiB
TypeScript

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 a":
apply`rounded ${focusRing} text-blue(600 700(hover:&) dark:(400 300(hover:&))`,
}),
} as Options;