ls-deno/twind.config.ts

39 lines
1.1 KiB
TypeScript
Raw Normal View History

2022-09-27 14:41:17 -05:00
import { Options } from "$fresh/plugins/twind.ts";
2022-09-30 09:34:07 -05:00
import { apply } from "twind";
2022-10-01 14:03:15 -05:00
import { css } from "twind/css";
2022-10-01 14:34:07 -05:00
const focusRing = apply`focus:outline-main`;
2022-10-01 14:03:15 -05:00
2022-10-01 14:34:07 -05:00
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`;
2022-09-30 09:34:07 -05:00
2022-09-27 14:41:17 -05:00
export default {
selfURL: import.meta.url,
2022-10-01 14:34:07 -05:00
theme: {
outline: {
main: ["2px solid currentColor", "1px"],
},
extend: {
spacing: {
128: "32rem",
144: "36rem",
},
},
},
2022-10-01 14:03:15 -05:00
preflight: (preflight) =>
css(preflight, {
2022-10-01 14:34:07 -05:00
"body,html": apply("bg-white text-black dark:(bg-gray-900 text-white)"),
"::-moz-focus-inner": { border: 0 },
2022-10-01 14:03:15 -05:00
"body input, body textarea": input,
"body button, body input[type=submit]": button,
2022-10-21 03:06:37 -05:00
"body ul": apply`list-disc ml-4`,
2022-10-01 14:34:07 -05:00
"body a":
apply`rounded ${focusRing} text-blue(600 700(hover:&) dark:(400 300(hover:&))`,
2022-10-01 14:03:15 -05:00
}),
2022-09-27 14:41:17 -05:00
} as Options;