fix(toast): use Button for close control (#600)

Author: mattrothenberg

.changeset/bright-toasts-close.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Use the Button component for Toast close controls and match the hover tint to the toast variant.

packages/kumo/src/components/toast/toast.tsx

@@ -39,8 +39,8 @@ export const KUMO_TOAST_VARIANTS = {
   },
   close: {
     classes:
-      "absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded bg-transparent text-kumo-subtle hover:bg-kumo-fill-hover hover:text-kumo-default",
-    description: "Close button with X icon",
+      "absolute top-2 right-2 size-5 rounded text-kumo-subtle hover:bg-current/15",
+    description: "Button-based close control with variant-aware hover tint",
   },
   variant: {
     default: {
@@ -383,18 +383,34 @@ function ToastList() {
           </>
         )}
         <Toast.Close
-          data-kumo-component="Toast"
           data-kumo-part="close"
-          className="absolute top-2 right-2 flex h-4 w-4 items-center justify-center rounded border-none bg-transparent text-current hover:bg-kumo-contrast/10 hover:text-current"
           aria-label="Close"
-        >
-          <XIcon className="h-3 w-3" />
-        </Toast.Close>
+          render={
+            <Button
+              variant="ghost"
+              size="sm"
+              shape="square"
+              aria-label="Close"
+              className={cn(
+                "absolute top-2 right-2 size-5 rounded text-kumo-subtle hover:bg-current/15",
+                toast.variant && TOAST_CLOSE_CLASSES[toast.variant],
+              )}
+              icon={<XIcon className="h-3 w-3" />}
+            />
+          }
+        />
       </Toast.Content>
     </Toast.Root>
   ));
 }
 
+const TOAST_CLOSE_CLASSES: Record<string, string> = {
+  success: "text-kumo-success",
+  error: "text-kumo-danger",
+  warning: "text-kumo-warning",
+  info: "text-kumo-info",
+};
+
 const TOAST_BACKGROUND_CLASSES: Record<string, string> = {
   success: "bg-kumo-success-tint/20",
   error: "bg-kumo-danger-tint/30",