From c08025eeb24fcc3fcdb16d6077951d563929ad93 Mon Sep 17 00:00:00 2001
From: Zac Gaetano <zgaetano@wilddragon.net>
Date: Thu, 21 May 2026 12:30:35 -0400
Subject: [PATCH] =?UTF-8?q?web-ui:=20wave-1=20foundation=20=E2=80=94=20ser?=
 =?UTF-8?q?vices/web-ui/src/css/components/button.css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 services/web-ui/src/css/components/button.css | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 services/web-ui/src/css/components/button.css

diff --git a/services/web-ui/src/css/components/button.css b/services/web-ui/src/css/components/button.css
new file mode 100644
index 0000000..439e8db
--- /dev/null
+++ b/services/web-ui/src/css/components/button.css
@@ -0,0 +1,73 @@
+/* button.css ─ sm/md/lg × primary/secondary/ghost/danger */
+
+.wd-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  font: 500 13px/1 var(--font);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 120ms cubic-bezier(0.25, 1, 0.5, 1),
+              border-color     120ms cubic-bezier(0.25, 1, 0.5, 1),
+              color           120ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.wd-btn:focus-visible {
+  outline: 2px solid var(--accent-subtle);
+  outline-offset: 1px;
+}
+.wd-btn:active:not(:disabled) { opacity: 0.85; transition: opacity 60ms; }
+.wd-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.wd-btn > svg { width: 12px; height: 12px; flex-shrink: 0; }
+
+/* Sizes */
+.wd-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
+.wd-btn--md { height: 32px; padding: 0 12px; font-size: 13px; }
+.wd-btn--lg { height: 36px; padding: 0 14px; font-size: 13px; }
+
+/* Variants */
+.wd-btn--primary {
+  background: var(--accent);
+  color: oklch(98% 0.005 266);
+}
+.wd-btn--primary:hover:not(:disabled) {
+  background: oklch(52% 0.20 266);
+}
+
+.wd-btn--secondary {
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  border-color: var(--border);
+}
+.wd-btn--secondary:hover:not(:disabled) {
+  background: var(--bg-hover);
+  border-color: var(--border-strong);
+}
+
+.wd-btn--ghost {
+  background: transparent;
+  color: var(--text-secondary);
+}
+.wd-btn--ghost:hover:not(:disabled) {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.wd-btn--danger {
+  background: var(--signal-bad);
+  color: oklch(98% 0.005 25);
+}
+.wd-btn--danger:hover:not(:disabled) {
+  background: oklch(68% 0.22 25);
+}
+
+/* Icon-only (28px square) */
+.wd-btn--icon {
+  width: 28px;
+  padding: 0;
+}