From 086cbe77a937381f164e7009355bc34c224640b6 Mon Sep 17 00:00:00 2001 From: p-sw Date: Tue, 23 Jul 2024 18:07:39 +0900 Subject: [PATCH] fix(button): add brightness class on button hover to simplify background color system, and make simple to customize background color --- packages/react/components/Button.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/react/components/Button.tsx b/packages/react/components/Button.tsx index 6ac6cb5..8ee0392 100644 --- a/packages/react/components/Button.tsx +++ b/packages/react/components/Button.tsx @@ -14,21 +14,18 @@ const colors = { danger: "border-red-400 dark:border-red-600", }, background: { - default: - "bg-white dark:bg-black hover:bg-neutral-200 dark:hover:bg-neutral-800", + default: "bg-white dark:bg-black", ghost: "bg-black/0 dark:bg-white/0 hover:bg-black/20 dark:hover:bg-white/20", - success: - "bg-green-100 dark:bg-green-900 hover:bg-green-200 dark:hover:bg-green-800", - warning: - "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", + success: "bg-green-100 dark:bg-green-900", + warning: "bg-yellow-100 dark:bg-yellow-900", + danger: "bg-red-100 dark:bg-red-900", }, underline: "decoration-current", }; 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: { size: { link: "p-0 text-base",