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

style: add various status colors

Browse Source
This commit is contained in:
p-sw 2024-05-28 20:14:31 +09:00
parent a34a52f0ec
commit b61f12eac7
2 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,34 +2,51 @@ import React from "react";
import { vcn, VariantProps, Slot, AsChild } from "../shared"; import { vcn, VariantProps, Slot, AsChild } from "../shared";
const colors = { const colors = {
outlineFocus: "focus-visible:outline-neutral-500", outline: {
outline: "outline-neutral-300 dark:outline-neutral-700", focus: "dark:focus-visible:outline-white/20 focus-visible:outline-black/10",
border: "border-neutral-300 dark:border-neutral-700", },
border: {
default: "border-neutral-300 dark:border-neutral-700",
success: "border-green-400 dark:border-green-600",
warning: "border-yellow-400 dark:border-yellow-600",
error: "border-red-400 dark:border-red-600",
},
background: { background: {
default: default:
"bg-white dark:bg-black hover:bg-neutral-100 dark:hover:bg-neutral-800", "bg-white dark:bg-black hover:bg-neutral-100 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:
"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",
error: "bg-red-100 dark:bg-red-900 hover:bg-red-200 dark:hover:bg-red-800",
}, },
underline: "decoration-black dark:decoration-white", 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 ${colors.outlineFocus} transition-all`, base: `w-fit flex flex-row items-center justify-between rounded-md outline outline-1 outline-transparent outline-offset-2 ${colors.outline.focus} transition-all`,
variants: { variants: {
size: { size: {
sm: "px-2 py-1 text-sm", sm: "px-2 py-1 text-sm",
md: "px-4 py-2 text-base", md: "px-4 py-2 text-base",
lg: "px-5 py-3 text-lg", lg: "px-5 py-3 text-lg",
icon: "p-2 text-base",
}, },
border: { border: {
none: "outline-none", none: "border-0",
solid: `border ${colors.border}`, solid: `border ${colors.border.default}`,
outline: `outline outline-1 ${colors.outline}`, success: `border ${colors.border.success}`,
warning: `border ${colors.border.warning}`,
error: `border ${colors.border.error}`,
}, },
background: { background: {
default: colors.background.default, default: colors.background.default,
ghost: colors.background.ghost, ghost: colors.background.ghost,
success: colors.background.success,
warning: colors.background.warning,
error: colors.background.error,
transparent: "bg-transparent hover:bg-transparent", transparent: "bg-transparent hover:bg-transparent",
}, },
decoration: { decoration: {

8
packages/react/stories/Button.stories.tsx
View File

@ -11,14 +11,6 @@ export const Ghost = () => {
return <Button preset="ghost">Ghost Button</Button>; return <Button preset="ghost">Ghost Button</Button>;
}; };
export const Outline = () => {
return (
<Button border="outline" background="ghost" decoration="none" size="md">
Outline Button
</Button>
);
};
export const Link = () => { export const Link = () => {
return <Button preset="link">Link Button</Button>; return <Button preset="link">Link Button</Button>;
}; };