Made Button stories and update semantic colors for improved accessibi…

…lity and consistency

src/components/Button/Button.stories.ts

@@ -1,125 +1,40 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent } from "@storybook/test";
 import { Button } from "./Button";
 
-const meta: Meta<typeof Button> = {
-  title: "Components/Button",
+const meta = {
   component: Button,
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: "select",
-      options: [
-        "default",
-        "solid",
-        "outline",
-        "outlineGradient",
-        "accent",
-        "danger",
-        "warning",
-      ],
-    },
-    size: { control: "select", options: ["small", "medium", "large"] },
-    disabled: { control: "boolean" },
-    loading: { control: "boolean" },
+  parameters: {
+    layout: "centered",
   },
-};
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
 
 export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Default: Story = {
-  args: {
-    children: "Default Button",
-  },
-};
-
-export const Solid: Story = {
-  args: {
-    variant: "solid",
-    children: "Solid Button",
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    variant: "outline",
-    children: "Outline Button",
-  },
-};
-
-export const OutlineGradient: Story = {
-  args: {
-    variant: "outlineGradient",
-    children: "Outline Gradient Button",
-  },
-};
-
-export const Accent: Story = {
-  args: {
-    variant: "accent",
-    children: "Accent Button",
-  },
-};
-
-export const Danger: Story = {
-  args: {
-    variant: "danger",
-    children: "Danger Button",
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    variant: "warning",
-    children: "Warning Button",
-  },
-};
+type Story = StoryObj<typeof meta>;
 
-export const Small: Story = {
+export const Basic: Story = {
   args: {
-    size: "small",
-    children: "Small Button",
+    type: "button",
+    children: "시작하기",
   },
-};
+  play: async ({ args: { onClick }, canvas, step }) => {
+    const button = canvas.getByRole("button");
 
-export const Medium: Story = {
-  args: {
-    size: "medium",
-    children: "Medium Button",
-  },
-};
+    await step("renders a button with text", async () => {
+      expect(button).toHaveTextContent("시작하기");
+    });
 
-export const Large: Story = {
-  args: {
-    size: "large",
-    children: "Large Button",
+    await step("calls onClick handler when clicked", async () => {
+      await userEvent.click(button);
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
   },
 };
 
-// export const WithIcon: Story = {
-// args: {
-// children: "Button with Icon",
-// icon: <ArrowRightIcon />,
-// },
+// export const Submit: Story = {
+//   args: {
+//     type: "submit",
+//     children: "Submit",
+//   },
 // };
-
-export const Disabled: Story = {
-  args: {
-    children: "Disabled Button",
-    disabled: true,
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    children: "Loading Button",
-    loading: true,
-  },
-};
-
-export const CustomStyled: Story = {
-  args: {
-    children: "Custom Styled Button",
-    customStyle: { backgroundColor: "red", color: "white", padding: "1rem" },
-  },
-};

src/components/Button/Button.tsx

@@ -1,260 +1,145 @@
-import React, { ReactNode, HTMLAttributes, forwardRef } from "react";
+import React from "react";
 import { css, cva } from "../../../styled-system/css";
-import ClipLoader from "react-spinners/ClipLoader";
-import { SystemStyleObject } from "@pandacss/types";
+import type { SystemStyleObject } from "@pandacss/types";
+// import { colors } from "../../tokens/colors";
 
 type ButtonVariant =
   | "solid"
   | "outline"
-  | "outlineGradient"
+  | "outline-gradient"
   | "default"
   | "accent"
   | "danger"
   | "warning";
 
-type ButtonSize = "small" | "medium" | "large";
-
-export interface ButtonProps
-  extends Omit<HTMLAttributes<HTMLButtonElement>, "style"> {
-  children: ReactNode;
+export interface ButtonProps {
+  /** 버튼 텍스트 */
+  children: React.ReactNode;
+  type?: "button" | "submit";
+  onClick?: () => void;
   variant?: ButtonVariant;
-  size?: ButtonSize;
-  disabled?: boolean;
-  icon?: ReactNode;
-  loading?: boolean;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-  customStyle?: SystemStyleObject;
+  style?: SystemStyleObject; // Add style prop for custom inline styles
 }
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      children,
-      variant = "default",
-      size = "medium",
-      disabled = false,
-      icon,
-      loading = false,
-      onClick,
-      onFocus,
-      onBlur,
-      ...rest
-    },
-    ref
-  ) => {
-    return (
-      <button
-        ref={ref}
-        className={css(
-          {
-            cursor: "pointer",
-            borderRadius: "md",
-            fontWeight: "semibold",
-            whiteSpace: "nowrap",
-            transition:
-              "background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out",
-            fontFamily: "body",
-          },
-          styles.raw({ variant, size }), // Apply styles here
-          css.raw({
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: "0.5rem",
-          })
-        )}
-        disabled={disabled || loading}
-        onClick={onClick}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        {...rest}
-      >
-        {loading ? <ClipLoader size="sm" /> : null}
-        {icon && !loading ? icon : null}
-        {children}
-      </button>
-    );
-  }
-);
+/**
+ * 버튼 컴포넌트입니다.
+ */
+export const Button = ({
+  children,
+  type = "button",
+  onClick,
+  variant = "default",
+  style, // destructure the style prop
+  ...rest
+}: ButtonProps) => {
+  return (
+    <button
+      className={css(
+        styles.raw({ variant }),
+        baseStyles,
+        ...(Array.isArray(style) ? style : [style]) // Ensure style is an array
+      )}
+      type={type}
+      onClick={onClick}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
 
-Button.displayName = "Button";
+const baseStyles = {
+  appearance: "none",
+  margin: "0",
+  padding: "0.7rem 3rem",
+  fontSize: "1.5rem",
+  fontWeight: 500,
+  textAlign: "center",
+  textDecoration: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: ["auto", "100%"],
+  borderRadius: "10px",
+  cursor: "pointer",
+  transition: "0.2s",
+  lineHeight: "1",
+  outline: "0",
+  "&:focus": {
+    outlineColor: "focus",
+    outline: "3px solid",
+    outlineOffset: "2px",
+    borderRadius: "10px",
+  },
+  "&:disabled": { opacity: 0.5 },
+};
 
 const styles = cva({
   variants: {
     variant: {
       default: {
-        backgroundColor: "bg.DEFAULT",
-        color: "text.DEFAULT",
-        "&:hover": {
-          backgroundColor: "bg.hover",
-        },
-        "&:focus": {
-          outline: "2px solid",
-          outlineColor: "focus",
-          outlineOffset: "2px",
-        },
-        "&:active": {
-          backgroundColor: "bg.active",
-        },
-        "&:disabled": {
-          backgroundColor: "bg.disabled",
-          color: "text.disabled",
-          cursor: "not-allowed",
-        },
-      },
-      solid: {
-        backgroundColor: "solid.DEFAULT",
-        color: "text.contrast",
-        "&:hover": {
-          backgroundColor: "solid.hover",
-        },
-        "&:focus": {
-          outline: "2px solid",
-          outlineColor: "focus",
-          outlineOffset: "2px",
-        },
-        "&:active": {
-          backgroundColor: "solid.DEFAULT",
-        },
-        "&:disabled": {
-          backgroundColor: "bg.disabled",
-          color: "text.disabled",
-          cursor: "not-allowed",
-        },
-      },
-      outline: {
-        backgroundColor: "transparent",
-        border: "2px solid",
-        borderColor: "border.DEFAULT",
-        color: "text.DEFAULT",
-        "&:hover": {
-          backgroundColor: "bg.hover",
-        },
-        "&:focus": {
-          outline: "2px solid",
-          outlineColor: "focus",
-          outlineOffset: "2px",
-        },
-        "&:active": {
-          backgroundColor: "bg.active",
-        },
-        "&:disabled": {
-          borderColor: "border.disabled",
-          color: "text.disabled",
-          cursor: "not-allowed",
-        },
-      },
-      outlineGradient: {
-        backgroundColor: "transparent",
-        border: "2px solid",
-        borderColor: "teal.7", // Using the teal color for now because no specific gradient color defined in tokens for border yet.
-        color: "teal.7",
-        background: "linear-gradient(to right, teal.7, teal.9)",
-        backgroundClip: "text",
-        "-webkit-background-clip": "text",
-        "-webkit-text-fill-color": "transparent",
-        "&:hover": {
-          borderColor: "teal.9",
-          color: "teal.9",
-          background: "linear-gradient(to right, teal.9, teal.7)",
-          backgroundClip: "text",
-          "-webkit-background-clip": "text",
-          "-webkit-text-fill-color": "transparent",
-        },
-        "&:focus": {
-          outline: "2px solid",
-          outlineColor: "focus",
-          outlineOffset: "2px",
-        },
-        "&:active": {
-          background: "linear-gradient(to right, teal.7, teal.9)",
-          backgroundClip: "text",
-          "-webkit-background-clip": "text",
-          "-webkit-text-fill-color": "transparent",
-        },
-        "&:disabled": {
-          borderColor: "border.disabled",
-          color: "text.disabled",
-          cursor: "not-allowed",
-          background: "none",
-          "-webkit-text-fill-color": "text.disabled",
+        background: "bg",
+        color: "text",
+        "&:active, &:hover": {
+          background: "bg.hover",
+          outline: "0",
         },
       },
       accent: {
-        backgroundColor: "bg.accent",
-        color: "text.contrast",
-        "&:hover": {
-          backgroundColor: "bg.hover.accent",
-        },
-        "&:focus": {
-          outline: "2px solid",
-          outlineColor: "focus",
-          outlineOffset: "2px",
-        },
-        "&:active": {
-          backgroundColor: "bg.active.accent",
-        },
-        "&:disabled": {
-          backgroundColor: "bg.disabled",
-          color: "text.disabled",
-          cursor: "not-allowed",
+        background: "bg.accent",
+        color: "text.accent",
+        "&:active, &:hover": {
+          background: "bg.hover.accent",
+          outline: "0",
         },
       },
       danger: {
-        backgroundColor: "bg.danger",
-        color: "text.contrast",
-        "&:hover": {
-          backgroundColor: "bg.hover.danger",
-        },
-        "&:focus": {
-          outline: "2px solid",
-          outlineColor: "focus",
-          outlineOffset: "2px",
-        },
-        "&:active": {
-          backgroundColor: "bg.active.danger",
-        },
-        "&:disabled": {
-          backgroundColor: "bg.disabled",
-          color: "text.disabled",
-          cursor: "not-allowed",
+        background: "bg.danger",
+        color: "text.danger",
+        "&:active, &:hover": {
+          background: "bg.hover.danger",
+          outline: "0",
         },
       },
       warning: {
-        backgroundColor: "bg.warning",
-        color: "text.contrast",
-        "&:hover": {
-          backgroundColor: "bg.hover.warning",
-        },
-        "&:focus": {
-          outline: "2px solid",
-          outlineColor: "focus",
-          outlineOffset: "2px",
-        },
-        "&:active": {
-          backgroundColor: "bg.active.warning",
-        },
-        "&:disabled": {
-          backgroundColor: "bg.disabled",
-          color: "text.disabled",
-          cursor: "not-allowed",
+        background: "bg.warning",
+        color: "text.warning",
+        "&:active, &:hover": {
+          background: "bg.hover.warning",
+          outline: "0",
         },
       },
-    },
-    size: {
-      small: {
-        fontSize: "sm",
-        padding: "0.5rem 1rem",
+      solid: {
+        background: "bg.solid",
+        color: "text.solid",
+        "&:active, &:hover": {
+          background: "bg.hover.solid",
+          outline: "0",
+        },
       },
-      medium: {
-        fontSize: "md",
-        padding: "0.75rem 1.5rem",
+      outline: {
+        background: "bg.outline",
+        color: "text.outline",
+        border: "4px solid",
+        borderColor: "border.outline",
+        "&:active, &:hover": {
+          background: "bg.hover.outline",
+          outline: "0",
+        },
       },
-      large: {
-        fontSize: "lg",
-        padding: "1rem 2rem",
+      "outline-gradient": {
+        "--gradient-color": "linear-gradient(135deg, #24eaca, #846de9)",
+        background: "transparent",
+        color: "text.outline",
+        border: "4px solid transparent",
+        backgroundClip: "padding-box, border-box",
+        backgroundOrigin: "padding-box, border-box",
+        borderImage: "var(--gradient-color)",
+        borderImageSlice: "1",
+        borderImageOutset: "0",
+        "&:active, &:hover": {
+          outline: "0",
+        },
       },
     },
   },

src/tokens/colors.ts

@@ -9,21 +9,30 @@ export const semanticColors: SemanticTokens["colors"] = {
   bg: {
     DEFAULT: {
       DEFAULT: {
-        value: { base: "{colors.gray.3}", _dark: "{colors.grayDark.3}" },
+        value: { base: "{colors.grayDark.3}", _dark: "{colors.gray.3}" },
       },
       accent: {
-        value: { base: "{colors.teal.3}", _dark: "{colors.violetDark.3}" },
+        value: { base: "{colors.teal.5}", _dark: "{colors.tealDark.8}" },
       },
       danger: {
         value: { base: "{colors.red.3}", _dark: "{colors.redDark.3}" },
       },
       warning: {
         value: { base: "{colors.yellow.3}", _dark: "{colors.yellowDark.3}" },
       },
+      solid: {
+        value: { base: "{colors.violet.10}", _dark: "{colors.violet.1}" },
+      },
+      outline: {
+        value: { base: "{colors.violet.2}", _dark: "{colors.violetDark.8}" },
+      },
+      "outline-gradient": {
+        value: { base: "{colors.violet.2}", _dark: "{colors.violetDark.8}" },
+      },
     },
     hover: {
       DEFAULT: {
-        value: { base: "{colors.gray.4}", _dark: "{colors.grayDark.4}" },
+        value: { base: "{colors.grayDark.8}", _dark: "{colors.gray.6}" },
       },
       accent: {
         value: { base: "{colors.teal.4}", _dark: "{colors.violetDark.4}" },
@@ -34,6 +43,12 @@ export const semanticColors: SemanticTokens["colors"] = {
       warning: {
         value: { base: "{colors.yellow.4}", _dark: "{colors.yellowDark.4}" },
       },
+      solid: {
+        value: { base: "{colors.violet.8}", _dark: "{colors.violet.3}" },
+      },
+      outline: {
+        value: { base: "{colors.violet.4}", _dark: "{colors.violetDark.10}" },
+      },
     },
     active: {
       DEFAULT: {
@@ -64,6 +79,9 @@ export const semanticColors: SemanticTokens["colors"] = {
       warning: {
         value: { base: "{colors.yellow.7}", _dark: "{colors.yellowDark.7}" },
       },
+      outline: {
+        value: { base: "{colors.violetDark.10}", _dark: "{colors.violet.7}" },
+      },
     },
     hover: {
       DEFAULT: {
@@ -116,7 +134,7 @@ export const semanticColors: SemanticTokens["colors"] = {
         value: { base: "{colors.gray.11}", _dark: "{colors.grayDark.11}" },
       },
       accent: {
-        value: { base: "{colors.teal.11}", _dark: "{colors.violetDark.11}" },
+        value: { base: "{colors.teal.11}", _dark: "{colors.tealDark.11}" },
       },
       danger: {
         value: { base: "{colors.red.11}", _dark: "{colors.redDark.11}" },
@@ -127,7 +145,7 @@ export const semanticColors: SemanticTokens["colors"] = {
     },
     DEFAULT: {
       DEFAULT: {
-        value: { base: "{colors.gray.12}", _dark: "{colors.grayDark.12}" },
+        value: { base: "{colors.grayDark.12}", _dark: "{colors.gray.12}" },
       },
       accent: {
         value: { base: "{colors.teal.12}", _dark: "{colors.violetDark.12}" },
@@ -138,6 +156,22 @@ export const semanticColors: SemanticTokens["colors"] = {
       warning: {
         value: { base: "{colors.yellow.12}", _dark: "{colors.yellowDark.12}" },
       },
+      solid: {
+        value: { base: "{colors.violet.1}", _dark: "{colors.violet.10}" },
+      },
+      outline: {
+        value: {
+          base: "{colors.violetDark.1}",
+          _dark: "{colors.violet.1}",
+        },
+      },
+    },
+  },
+  focus: {
+    DEFAULT: {
+      DEFAULT: {
+        value: { base: "{colors.violet.10}", _dark: "{colors.violet.10}" },
+      },
     },
   },
 };