fix(button): keep emphasis active ring color (#606)

Author: mattrothenberg

.changeset/blue-red-button-rings.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Keep primary and destructive button active/focus rings matched to their variant color.

packages/kumo/src/components/button/button.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { Plus } from "@phosphor-icons/react";
-import { Button, RefreshButton, LinkButton } from "./button";
+import { Button, RefreshButton, LinkButton, buttonVariants } from "./button";
 
 describe("Button", () => {
   describe("children wrapper", () => {
@@ -112,6 +112,21 @@ describe("Button", () => {
     // title is intercepted by Tooltip wrapper, not set as native attribute
     expect(button.getAttribute("title")).toBeNull();
   });
+
+  it("keeps emphasized variant rings color-matched when pressed or focused", () => {
+    for (const variant of ["primary", "destructive"] as const) {
+      const className = buttonVariants({ variant });
+
+      expect(className).toContain("ring-(--kumo-button-emphasis-ring)");
+      expect(className).toContain("focus:ring-(--kumo-button-emphasis-ring)");
+      expect(className).toContain(
+        "focus-visible:ring-(--kumo-button-emphasis-ring)",
+      );
+      expect(className).toContain("active:ring-(--kumo-button-emphasis-ring)");
+      expect(className).not.toContain("focus:ring-kumo-focus/50");
+      expect(className).not.toContain("focus-visible:ring-kumo-brand");
+    }
+  });
 });
 
 describe("RefreshButton", () => {

packages/kumo/src/components/button/button.tsx

@@ -49,7 +49,7 @@ export const KUMO_BUTTON_VARIANTS = {
   variant: {
     primary: {
       classes:
-        "relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) disabled:opacity-50",
+        "relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) focus:ring-(--kumo-button-emphasis-ring) focus-visible:ring-(--kumo-button-emphasis-ring) active:ring-(--kumo-button-emphasis-ring) disabled:opacity-50",
       description: "High-emphasis button for primary actions",
     },
     secondary: {
@@ -63,7 +63,7 @@ export const KUMO_BUTTON_VARIANTS = {
     },
     destructive: {
       classes:
-        "relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) disabled:opacity-50",
+        "relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) focus:ring-(--kumo-button-emphasis-ring) focus-visible:ring-(--kumo-button-emphasis-ring) active:ring-(--kumo-button-emphasis-ring) disabled:opacity-50",
       description: "Danger button for destructive actions like delete",
     },
     "secondary-destructive": {