43 lines
1.2 KiB
TypeScript
43 lines
1.2 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 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;
|