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

feat: add separated colors in button

Browse Source
This commit is contained in:
p-sw 2024-05-26 17:21:25 +09:00
parent aa0b45a320
commit f81e9180c6
1 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,21 @@
import React from "react"; import React from "react";
import { vcn, VariantProps, Slot, AsChild } from "../shared"; import { vcn, VariantProps, Slot, AsChild } from "../shared";
const colors = {
outlineFocus:
"focus-visible:outline-black/50 dark:focus-visible:outline-white/50",
outline: "outline-black/20 dark:outline-white/20",
border: "border-black/20 dark:border-white/20",
background: {
default: "bg-white dark:bg-black hover:bg-gray-100 dark:hover:bg-gray-800",
ghost:
"bg-black/0 dark:bg-white/0 hover:bg-black/20 dark:hover:bg-white/20",
},
underline: "decoration-black dark:decoration-white",
};
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 focus-visible:outline-black/50 dark:focus-visible:outline-white/50 transition-all", base: `w-fit flex flex-row items-center justify-between rounded-md outline outline-1 outline-transparent outline-offset-2 ${colors.outlineFocus} transition-all`,
variants: { variants: {
size: { size: {
sm: "px-2 py-1 text-sm", sm: "px-2 py-1 text-sm",
@ -11,19 +24,17 @@ const [buttonVariants, resolveVariants] = vcn({
}, },
border: { border: {
none: "outline-none", none: "outline-none",
solid: "border border-black/20 dark:border-white/20", solid: `border ${colors.border}`,
outline: "outline outline-1 outline-black/20 dark:outline-white/20", outline: `outline outline-1 ${colors.outline}`,
}, },
background: { background: {
default: default: colors.background.default,
"bg-white dark:bg-black hover:bg-gray-100 dark:hover:bg-gray-800", ghost: colors.background.ghost,
ghost: transparent: "bg-transparent hover:bg-transparent",
"bg-black/0 dark:bg-white/0 hover:bg-black/20 dark:hover:bg-white/20",
link: "bg-transparent hover:bg-transparent",
}, },
decoration: { decoration: {
none: "no-underline", none: "no-underline",
link: "underline decoration-1 underline-offset-2 hover:underline-offset-4 decoration-black/100 dark:decoration-white/100", link: `underline decoration-1 underline-offset-2 hover:underline-offset-4 ${colors.underline}`,
}, },
}, },
defaults: { defaults: {
@ -47,7 +58,7 @@ const [buttonVariants, resolveVariants] = vcn({
}, },
link: { link: {
border: "none", border: "none",
background: "link", background: "transparent",
decoration: "link", decoration: "link",
size: "md", size: "md",
}, },