halo/src/formkit/theme.ts

85 lines
3.1 KiB
TypeScript

const textClassification = {
label: "block font-bold text-sm formkit-invalid:text-red-500 w-56",
wrapper: "flex flex-col sm:flex-row items-start sm:items-center",
inner:
"inline-flex items-center w-full relative box-border border border-gray-300 formkit-invalid:border-red-500 h-9 rounded-base overflow-hidden focus-within:border-primary mt-2 sm:mt-0",
input:
"outline-0 bg-white antialiased resize-none w-full text-black block transition-all appearance-none h-full px-3 text-sm",
};
const boxClassification = {
fieldset:
"border border-gray-300 rounded-base px-2 py-2 focus-within:border-primary",
legend: "font-bold text-sm",
wrapper: "flex items-center mb-1 cursor-pointer",
help: "mb-2",
input:
"form-check-input appearance-none h-4 w-4 mr-2 border border-gray-500 rounded-sm bg-white checked:bg-primary focus:outline-none focus:ring-0 transition duration-200",
label: "text-sm text-gray-700",
inner: "flex items-center",
};
const buttonClassification = {
wrapper: "mb-1",
input:
"bg-blue-500 hover:bg-blue-700 text-white text-sm font-normal py-3 px-5 rounded",
};
const theme: Record<string, Record<string, string>> = {
global: {
outer: "formkit-disabled:opacity-50",
help: "text-xs mt-1.5 text-gray-500",
messages: "list-none p-0 mt-1.5 mb-0",
message: "text-red-500 mb-1 text-xs",
form: "flex flex-col space-y-4",
},
button: buttonClassification,
color: {
label: "block mb-1 font-bold text-sm",
input:
"w-16 h-8 appearance-none cursor-pointer border border-gray-300 rounded-md mb-2 p-1",
},
file: {
label: "block mb-1 font-bold text-sm",
inner: "cursor-pointer",
input:
"text-gray-600 text-sm mb-1 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:bg-blue-500 file:text-white hover:file:bg-blue-600",
noFiles: "block text-gray-800 text-sm mb-1",
fileItem: "block flex text-gray-800 text-sm mb-1",
fileRemove: "ml-auto text-blue-500 text-sm",
},
checkbox: boxClassification,
radio: {
...boxClassification,
input: boxClassification.input.replace("rounded-sm", "rounded-full"),
},
range: {
inner: "",
input:
"form-range appearance-none w-full h-2 p-0 bg-gray-200 rounded-full focus:outline-none focus:ring-0 focus:shadow-none",
},
search: textClassification,
select: textClassification,
submit: buttonClassification,
tel: textClassification,
text: textClassification,
time: textClassification,
url: textClassification,
week: textClassification,
month: textClassification,
number: textClassification,
password: textClassification,
email: textClassification,
date: textClassification,
"datetime-local": textClassification,
textarea: {
...textClassification,
inner:
"inline-flex items-center w-full relative box-border border border-gray-300 formkit-invalid:border-red-500 h-32 rounded-base overflow-hidden focus-within:border-primary mt-2 sm:mt-0",
input:
"outline-0 bg-white antialiased w-full text-black block transition-all appearance-none h-full px-3 py-2 text-sm",
},
};
export default theme;