continue re-design

components/shared/button/Button.css

@@ -0,0 +1,72 @@
+.button {
+  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
+    scale 0.1s cubic-bezier(0.25, 0.1, 0.25, 1),
+    box-shadow 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+.button:active {
+  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
+    scale 0.05s cubic-bezier(0.25, 0.1, 0.25, 1),
+    box-shadow 0.05s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+.button-primary {
+  background: #ff4c00;
+  background: color(display-p3 0.9816 0.3634 0.0984);
+
+  box-shadow: 0px -6px 12px 0px rgba(255, 0, 0, 0.2) inset,
+    0px 2px 4px 0px rgba(255, 77, 0, 0.12),
+    0px 1px 1px 0px rgba(255, 77, 0, 0.12),
+    0px 0.5px 0.5px 0px rgba(255, 77, 0, 0.16),
+    0px 0.25px 0.25px 0px rgba(255, 77, 0, 0.2);
+
+  box-shadow: 0px -6px 12px 0px color(display-p3 0.9804 0.1127 0.098 / 0.2) inset,
+    0px 2px 4px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
+    0px 1px 1px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
+    0px 0.5px 0.5px 0px color(display-p3 0.9804 0.3647 0.098 / 0.16),
+    0px 0.25px 0.25px 0px color(display-p3 0.9804 0.3647 0.098 / 0.2);
+}
+
+.button-primary:hover {
+  box-shadow: 0px -6px 12px 0px rgba(255, 0, 0, 0.2) inset,
+    0px 4px 8px 0px rgba(255, 77, 0, 0.16),
+    0px 1px 1px 0px rgba(255, 77, 0, 0.12),
+    0px 0.5px 0.5px 0px rgba(255, 77, 0, 0.16),
+    0px 0.25px 0.25px 0px rgba(255, 77, 0, 0.2);
+  box-shadow: 0px -6px 12px 0px color(display-p3 0.9804 0.1127 0.098 / 0.2) inset,
+    0px 4px 8px 0px color(display-p3 0.9804 0.3647 0.098 / 0.16),
+    0px 1px 1px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
+    0px 0.5px 0.5px 0px color(display-p3 0.9804 0.3647 0.098 / 0.16),
+    0px 0.25px 0.25px 0px color(display-p3 0.9804 0.3647 0.098 / 0.2);
+}
+
+.button-primary:active {
+  box-shadow: 0px -6px 12px 0px rgba(255, 0, 0, 0.2) inset,
+    0px 2px 4px 0px rgba(255, 77, 0, 0.12),
+    0px 1px 1px 0px rgba(255, 77, 0, 0.12),
+    0px 0.5px 0.5px 0px rgba(255, 77, 0, 0.16),
+    0px 0.25px 0.25px 0px rgba(255, 77, 0, 0.2);
+  box-shadow: 0px -6px 12px 0px color(display-p3 0.9804 0.1127 0.098 / 0.2) inset,
+    0px 2px 4px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
+    0px 1px 1px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
+    0px 0.5px 0.5px 0px color(display-p3 0.9804 0.3647 0.098 / 0.16),
+    0px 0.25px 0.25px 0px color(display-p3 0.9804 0.3647 0.098 / 0.2);
+}
+
+.button-background {
+  background: linear-gradient(to bottom, white, transparent);
+
+  opacity: 0.06;
+
+  transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+.button:hover .button-background {
+  opacity: 0.08;
+}
+
+.button:active .button-background {
+  opacity: 0;
+
+  transition: opacity 0.05s cubic-bezier(0.25, 0.1, 0.25, 1);
+}

components/shared/button/Button.tsx

@@ -0,0 +1,67 @@
+import { Children, ButtonHTMLAttributes } from "react";
+
+import { cn } from "@/utils/cn";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "tertiary" | "playground" | "destructive";
+  size?: "default" | "large";
+  disabled?: boolean;
+}
+
+export default function Button({
+  variant = "primary",
+  size = "default",
+  disabled,
+  ...attrs
+}: Props) {
+  const children = handleChildren(attrs.children);
+
+  return (
+    <button
+      {...attrs}
+      type={attrs.type ?? "button"}
+      className={cn(
+        attrs.className,
+        "[&>span]:px-6 flex items-center justify-center button relative [&>*]:relative",
+        "text-label-medium lg-max:[&_svg]:size-24",
+        `button-${variant} group/button`,
+        {
+          "rounded-8 p-6": size === "default",
+          "rounded-10 p-8 gap-2": size === "large",
+
+          "text-accent-white active:[scale:0.995]": variant === "primary",
+          "text-accent-black active:[scale:0.99] active:bg-black-alpha-7": [
+            "secondary",
+            "tertiary",
+            "playground",
+          ].includes(variant),
+          "bg-black-alpha-4 hover:bg-black-alpha-6": variant === "secondary",
+          "hover:bg-black-alpha-4": variant === "tertiary",
+        },
+        variant === "playground" && [
+          "inside-border before:border-black-alpha-4",
+          disabled
+            ? "before:opacity-0 bg-black-alpha-4 text-black-alpha-24"
+            : "hover:bg-black-alpha-4 hover:before:opacity-0 active:before:opacity-0",
+        ],
+      )}
+      disabled={disabled}
+    >
+      {variant === "primary" && (
+        <div className="overlay button-background !absolute" />
+      )}
+
+      {children}
+    </button>
+  );
+}
+
+const handleChildren = (children: React.ReactNode) => {
+  return Children.toArray(children).map((child) => {
+    if (typeof child === "string") {
+      return <span key={child}>{child}</span>;
+    }
+
+    return child;
+  });
+};