feat: finalize tool cards

packages/website-ue/src/components/Button/index.css

@@ -1,2 +1,25 @@
 .button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: var(--max-size);
+  padding: var(--space-3) var(--space-4);
+
+  background-color: var(--accent-9);
+  border: none;
+
+  font-family: var(--font-family-regular);
+  font-size: var(--font-size-minor);
+  color: var(--gray-1);
+  font-weight: var(--weight-medium);
+
+  .svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  &[data-light-text="true"] {
+    color: var(--gray-12);
+  }
 }

packages/website-ue/src/components/Button/index.tsx

@@ -5,8 +5,35 @@ import "./index.css";
 
 export interface ButtonProps extends ComponentProps<"button"> {
   color?: Color;
+  variant?: "solid";
 }
 
-export function Button({ className, ...props }: ButtonProps) {
-  return <button className={classNames("button", className)} {...props} />;
+const LIGHT_TEXT_COLORS = new Set<Color>([
+  "purple",
+  "gold",
+  "bronze",
+  "teal",
+  "grass",
+]);
+
+export function Button({
+  className,
+  color,
+  variant = "solid",
+  style,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={classNames("button", className)}
+      data-color={color}
+      data-variant={variant}
+      data-light-text={color ? LIGHT_TEXT_COLORS.has(color) : undefined}
+      style={{
+        backgroundColor: color ? `var(--${color}-9)` : undefined,
+        ...style,
+      }}
+      {...props}
+    />
+  );
 }