From 2c1b186fb75eb3ff43240f1aff8465c10bb6ee36 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Fri, 15 May 2026 00:13:56 +0200
Subject: [PATCH] feat(03-01): add ui-button-solid-danger-md and
 ui-button-soft-neutral-md CSS variants

- Danger variant: #b91c1c bg, #991b1b hover, min-height 44px (WCAG 2.5.5)
- Neutral-soft variant: #f1f5f9 bg, #e2e8f0 hover, #334155 text, min-height 44px
- All pseudo-class selectors top-level (no CSS nesting per Phase 1 convention)
- static/tailwind.css updated via just generate (Pitfall 4: imported CSS passes through)
---
 backend/internal/web/ui/button.css | 46 ++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/backend/internal/web/ui/button.css b/backend/internal/web/ui/button.css
index 637caea..c581bf6 100644
--- a/backend/internal/web/ui/button.css
+++ b/backend/internal/web/ui/button.css
@@ -45,3 +45,49 @@
   outline: 2px solid #1d4ed8;
   outline-offset: 2px;
 }
+
+/* Phase 3: Danger (solid) and Neutral-soft button variants. */
+/* Codex concern #7: no CSS nesting — all pseudo-class rules are top-level. */
+
+.ui-button-solid-danger-md {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.375rem;
+  background-color: #b91c1c;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #ffffff;
+  min-height: 44px;
+}
+
+.ui-button-solid-danger-md:hover {
+  background-color: #991b1b;
+}
+
+.ui-button-solid-danger-md:focus-visible {
+  outline: 2px solid #b91c1c;
+  outline-offset: 2px;
+}
+
+.ui-button-soft-neutral-md {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.375rem;
+  background-color: #f1f5f9;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  font-weight: 400;
+  color: #334155;
+  border: 1px solid #e2e8f0;
+  min-height: 44px;
+}
+
+.ui-button-soft-neutral-md:hover {
+  background-color: #e2e8f0;
+}
+
+.ui-button-soft-neutral-md:focus-visible {
+  outline: 2px solid #64748b;
+  outline-offset: 2px;
+}