fix: paint chips inline so native button styles cannot override Figma colors

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-10 11:01:00 -06:00
parent 64a2ef5a00
commit 6c1d83e89d
2 changed files with 99 additions and 67 deletions
@@ -41,6 +41,16 @@ describe("Chip", () => {
    expect(chip.querySelector("svg")).toBeNull();
  });

+  it("paints unselected chips on the element so native button styles cannot win", () => {
+    render(<Chip label="Worker cooperative" state="unselected" />);
+    const chip = screen.getByRole("button", { name: "Worker cooperative" });
+    expect(chip.style.color).toContain("--color-content-default-brand-primary");
+    expect(chip.style.backgroundColor).toBe("transparent");
+    expect(chip.style.borderColor).toContain(
+      "--color-border-default-tertiary",
+    );
+  });
+
  it("exposes aria-pressed and a check mark when selected", () => {
    render(<Chip label="Worker cooperative" state="selected" />);
    const chip = screen.getByRole("button", { name: "Worker cooperative" });