Fix controls dark mode

Author: haydenbleasel

packages/elements/src/canvas.tsx

@@ -1,6 +1,7 @@
 import { Background, ReactFlow, type ReactFlowProps } from "@xyflow/react";
 import type { ReactNode } from "react";
 import "@xyflow/react/dist/style.css";
+import { Controls } from "./controls";
 
 type CanvasProps = ReactFlowProps & {
   children?: ReactNode;
@@ -17,6 +18,7 @@ export const Canvas = ({ children, ...props }: CanvasProps) => (
     {...props}
   >
     <Background bgColor="var(--sidebar)" />
+    <Controls />
     {children}
   </ReactFlow>
 );

packages/elements/src/controls.tsx

@@ -10,7 +10,7 @@ export const Controls = ({ className, ...props }: ControlsProps) => (
   <ControlsPrimitive
     className={cn(
       "gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!",
-      "[&>button]:rounded-md [&>button]:border-none",
+      "[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!",
       className
     )}
     {...props}