adonisjs-ui
Version:
[](https://npmjs.com/package/adonisjs-ui) [](https://npm.chart.dev/adonisjs-ui)
106 lines (105 loc) • 4.92 kB
JavaScript
import { tv } from "tailwind-variants";
const softColors = {
zinc: "text-neutral-300 bg-neutral-800/60 border border-neutral-700/40 [&:is(button)]:hover:bg-neutral-800/80",
red: "text-red-400 bg-red-500/10 border border-red-500/20 [&:is(button)]:hover:bg-red-500/20",
orange: "text-orange-400 bg-orange-500/10 border border-orange-500/20 [&:is(button)]:hover:bg-orange-500/20",
amber: "text-amber-400 bg-amber-500/10 border border-amber-500/20 [&:is(button)]:hover:bg-amber-500/20",
yellow: "text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 [&:is(button)]:hover:bg-yellow-500/20",
lime: "text-lime-400 bg-lime-500/10 border border-lime-500/20 [&:is(button)]:hover:bg-lime-500/20",
green: "text-green-400 bg-green-500/10 border border-green-500/20 [&:is(button)]:hover:bg-green-500/20",
emerald: "text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 [&:is(button)]:hover:bg-emerald-500/20",
teal: "text-teal-400 bg-teal-500/10 border border-teal-500/20 [&:is(button)]:hover:bg-teal-500/20",
cyan: "text-cyan-400 bg-cyan-500/10 border border-cyan-500/20 [&:is(button)]:hover:bg-cyan-500/20",
sky: "text-sky-400 bg-sky-500/10 border border-sky-500/20 [&:is(button)]:hover:bg-sky-500/20",
blue: "text-blue-400 bg-blue-500/10 border border-blue-500/20 [&:is(button)]:hover:bg-blue-500/20",
indigo: "text-indigo-400 bg-indigo-500/10 border border-indigo-500/20 [&:is(button)]:hover:bg-indigo-500/20",
violet: "text-violet-400 bg-violet-500/10 border border-violet-500/20 [&:is(button)]:hover:bg-violet-500/20",
purple: "text-purple-400 bg-purple-500/10 border border-purple-500/20 [&:is(button)]:hover:bg-purple-500/20",
fuchsia: "text-fuchsia-400 bg-fuchsia-500/10 border border-fuchsia-500/20 [&:is(button)]:hover:bg-fuchsia-500/20",
pink: "text-pink-400 bg-pink-500/10 border border-pink-500/20 [&:is(button)]:hover:bg-pink-500/20",
rose: "text-rose-400 bg-rose-500/10 border border-rose-500/20 [&:is(button)]:hover:bg-rose-500/20",
};
const solidColors = {
zinc: "text-white bg-neutral-700 [&:is(button)]:hover:bg-neutral-600",
red: "text-white bg-red-600 [&:is(button)]:hover:bg-red-500",
orange: "text-white bg-orange-600 [&:is(button)]:hover:bg-orange-500",
amber: "text-white bg-amber-600 [&:is(button)]:hover:bg-amber-500",
yellow: "text-white bg-yellow-600 [&:is(button)]:hover:bg-yellow-500",
lime: "text-white bg-lime-600 [&:is(button)]:hover:bg-lime-500",
green: "text-white bg-green-600 [&:is(button)]:hover:bg-green-500",
emerald: "text-white bg-emerald-600 [&:is(button)]:hover:bg-emerald-500",
teal: "text-white bg-teal-600 [&:is(button)]:hover:bg-teal-500",
cyan: "text-white bg-cyan-600 [&:is(button)]:hover:bg-cyan-500",
sky: "text-white bg-sky-600 [&:is(button)]:hover:bg-sky-500",
blue: "text-white bg-blue-600 [&:is(button)]:hover:bg-blue-500",
indigo: "text-white bg-indigo-600 [&:is(button)]:hover:bg-indigo-500",
violet: "text-white bg-violet-600 [&:is(button)]:hover:bg-violet-500",
purple: "text-white bg-purple-600 [&:is(button)]:hover:bg-purple-500",
fuchsia: "text-white bg-fuchsia-600 [&:is(button)]:hover:bg-fuchsia-500",
pink: "text-white bg-pink-600 [&:is(button)]:hover:bg-pink-500",
rose: "text-white bg-rose-600 [&:is(button)]:hover:bg-rose-500",
};
export const badge = tv({
base: ["inline-flex items-center font-semibold xwhitespace-nowrap"],
variants: {
variant: {
soft: ["rounded-lg px-2"],
solid: ["rounded-lg px-2"],
pill: ["rounded-full px-3"],
},
color: {
zinc: "",
red: "",
orange: "",
amber: "",
yellow: "",
lime: "",
green: "",
emerald: "",
teal: "",
cyan: "",
sky: "",
blue: "",
indigo: "",
violet: "",
purple: "",
fuchsia: "",
pink: "",
rose: "",
},
size: {
lg: ["text-sm py-1.5"],
md: ["text-xs py-1"],
sm: ["text-[10px] py-0.5 uppercase tracking-wider"],
},
},
//@ts-ignore
compoundVariants: [
...Object.keys(softColors).map(
//@ts-ignore
(color) => ({
variant: "soft",
color,
class: softColors[color],
})),
...Object.keys(softColors).map(
//@ts-ignore
(color) => ({
variant: "pill",
color,
class: softColors[color],
})),
...Object.keys(solidColors).map(
//@ts-ignore
(color) => ({
variant: "solid",
color,
class: solidColors[color],
})),
],
defaultVariants: {
variant: "soft",
color: "zinc",
size: "md",
},
});