p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(button): add brightness class on button hover

Browse Source 
to simplify background color system, and make simple to customize background color
This commit is contained in:
p-sw 2024-07-23 18:07:39 +09:00
parent c8f1912bae
commit 086cbe77a9
1 changed files with 5 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/react/components/Button.tsx
View File

@ -14,21 +14,18 @@ const colors = {
danger: "border-red-400 dark:border-red-600", danger: "border-red-400 dark:border-red-600",
}, },
background: { background: {
default: default: "bg-white dark:bg-black",
"bg-white dark:bg-black hover:bg-neutral-200 dark:hover:bg-neutral-800",
ghost: ghost:
"bg-black/0 dark:bg-white/0 hover:bg-black/20 dark:hover:bg-white/20", "bg-black/0 dark:bg-white/0 hover:bg-black/20 dark:hover:bg-white/20",
success: success: "bg-green-100 dark:bg-green-900",
"bg-green-100 dark:bg-green-900 hover:bg-green-200 dark:hover:bg-green-800", warning: "bg-yellow-100 dark:bg-yellow-900",
warning: danger: "bg-red-100 dark:bg-red-900",
"bg-yellow-100 dark:bg-yellow-900 hover:bg-yellow-200 dark:hover:bg-yellow-800",
danger: "bg-red-100 dark:bg-red-900 hover:bg-red-200 dark:hover:bg-red-800",
}, },
underline: "decoration-current", underline: "decoration-current",
}; };
const [buttonVariants, resolveVariants] = vcn({ const [buttonVariants, resolveVariants] = vcn({
base: `w-fit flex flex-row items-center justify-between rounded-md outline outline-1 outline-transparent outline-offset-2 ${colors.outline.focus} ${colors.disabled} transition-all cursor-pointer`, base: `w-fit flex flex-row items-center justify-between rounded-md outline outline-1 outline-transparent outline-offset-2 hover:brightness-90 dark:hover:brightness-110 ${colors.outline.focus} ${colors.disabled} transition-all cursor-pointer`,
variants: { variants: {
size: { size: {
link: "p-0 text-base", link: "p-0 text-base",