style(extension): align clipper colors with the main UI

apps/extension/src/ui/clip-feedback.tsx

@@ -26,11 +26,11 @@ if (payload?.action === "toast") {
     shadow.append(style, mount);
     (document.documentElement ?? document.body).appendChild(host);
     const root = createRoot(mount);
-    flushSync(() => root.render(<Toaster theme="dark" position="bottom-right" offset={16} mobileOffset={16} visibleToasts={1} closeButton hotkey={[]} containerAriaLabel={payload.regionLabel} toastOptions={{ closeButtonAriaLabel: payload.closeLabel, style: { background: "#171717", color: "#fff", border: "1px solid #404040", pointerEvents: "auto" } }} />));
+    flushSync(() => root.render(<Toaster theme="light" position="bottom-right" offset={16} mobileOffset={16} visibleToasts={1} closeButton hotkey={[]} containerAriaLabel={payload.regionLabel} toastOptions={{ closeButtonAriaLabel: payload.closeLabel, style: { background: "#fff", color: "#334155", border: "1px solid #e2e8f0", pointerEvents: "auto" } }} />));
     service = {
       host,
       show(message, kind) {
-        const options = { id: "edgeever-clip", duration: kind === "error" ? 8000 : 4000, style: { background: kind === "error" ? "#b91c1c" : "#171717", color: "#fff", border: "1px solid #404040", pointerEvents: "auto" as const } };
+        const options = { id: "edgeever-clip", duration: kind === "error" ? 8000 : 4000, style: { background: kind === "error" ? "#fff1f2" : "#fff", color: kind === "error" ? "#be123c" : "#334155", border: kind === "error" ? "1px solid #ffe4e6" : "1px solid #e2e8f0", pointerEvents: "auto" as const } };
         if (kind === "error") toast.error(message, options);
         else if (kind === "success") toast.success(message, options);
         else toast(message, options);

apps/extension/src/ui/primitives.tsx

@@ -3,8 +3,11 @@ import { CheckCircle2, LoaderCircle, CircleAlert } from "lucide-react";
 import { Button as SharedButton } from "../../../web/src/components/ui/button";
 export { Input } from "../../../web/src/components/ui/input";
 
-export function Button({ variant = "solid", className = "", ...props }: ComponentProps<typeof SharedButton>) {
-  return <SharedButton variant={variant} className={`${variant === "solid" ? "bg-primary text-primary-foreground hover:bg-neutral-800 border-primary" : "border-neutral-300 text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900"} ${className}`} {...props} />;
+export function Button({ variant = "soft", className = "", ...props }: ComponentProps<typeof SharedButton>) {
+  const styles = variant === "soft" || variant === "solid"
+    ? "border border-slate-200 bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900"
+    : "border-slate-200 text-slate-600 hover:bg-slate-50 hover:text-slate-900";
+  return <SharedButton variant={variant === "solid" ? "soft" : variant} className={`${styles} ${className}`} {...props} />;
 }
 
 export type Feedback = { message: string; kind?: "normal" | "success" | "error" };

apps/extension/src/ui/theme.css

@@ -6,14 +6,14 @@
 @source "../../../web/src/components/ui/tooltip.tsx";
 
 @theme inline {
-  --color-background: #fafafa;
-  --color-foreground: #171717;
+  --color-background: #f5f5f5;
+  --color-foreground: #212121;
   --color-card: #fff;
   --color-primary: #171717;
   --color-primary-foreground: #fff;
   --color-muted: #f5f5f5;
-  --color-muted-foreground: #737373;
-  --color-border: #e5e5e5;
+  --color-muted-foreground: #666666;
+  --color-border: #e0e0e0;
   --color-ring: #262626;
 }