Phase 1: Dashboard Polish + Theming (#457) (#458)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

packages/ui/src/components/Button.test.tsx

@@ -16,19 +16,21 @@ describe("Button", () => {
     it("should apply primary variant styles by default", () => {
       render(<Button>Primary</Button>);
       const button = screen.getByRole("button");
-      expect(button.className).toContain("bg-blue-600");
+      expect(button.style.background).toBe("var(--ms-blue-500)");
     });
 
     it("should apply secondary variant styles", () => {
       render(<Button variant="secondary">Secondary</Button>);
       const button = screen.getByRole("button");
-      expect(button.className).toContain("bg-gray-200");
+      expect(button.style.background).toBe("transparent");
+      expect(button.style.border).toBe("1px solid var(--border)");
     });
 
     it("should apply danger variant styles", () => {
       render(<Button variant="danger">Delete</Button>);
       const button = screen.getByRole("button");
-      expect(button.className).toContain("bg-red-600");
+      expect(button.style.background).toBe("rgba(229, 72, 77, 0.12)");
+      expect(button.style.color).toBe("var(--danger)");
     });
   });
 
@@ -81,6 +83,6 @@ describe("Button", () => {
     render(<Button className="custom-class">Custom</Button>);
     const button = screen.getByRole("button");
     expect(button.className).toContain("custom-class");
-    expect(button.className).toContain("bg-blue-600");
+    expect(button.style.background).toBe("var(--ms-blue-500)");
   });
 });