From 72c09d95bb9a95036eaa6cb1acd3f72f5cccb833 Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Sat, 21 Mar 2026 13:43:56 -0500
Subject: [PATCH] feat(ui): add error/empty state classes, update toast styling

- Toast: bg-elevated surface, border-default, radius-control, remove
  richColors (use token colors instead of Sonner defaults)
- Add .panel-empty and .panel-error CSS utility classes
- Available for Phase 4 page-level refinement

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/ui/toast.tsx |  3 +--
 frontend/src/index.css               | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ui/toast.tsx b/frontend/src/components/ui/toast.tsx
index ecd01d2..bc437eb 100644
--- a/frontend/src/components/ui/toast.tsx
+++ b/frontend/src/components/ui/toast.tsx
@@ -8,11 +8,10 @@ export function Toaster() {
     <SonnerToaster
       position="bottom-right"
       toastOptions={{
-        className: 'bg-panel border-border text-text-primary',
+        className: 'bg-elevated border border-border-default text-text-primary rounded-[var(--radius-control)]',
         descriptionClassName: 'text-text-secondary',
       }}
       theme={theme}
-      richColors
     />
   )
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 354272b..3d8e878 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -222,4 +222,20 @@
   .list-item-interactive:active {
     background-color: hsl(var(--elevated));
   }
+
+  /* Panel empty state — centered muted text */
+  .panel-empty {
+    text-align: center;
+    padding: 1.25rem 0.625rem;
+    color: hsl(var(--text-muted));
+    font-size: 0.5625rem; /* 9px */
+  }
+
+  /* Panel error state — centered error text */
+  .panel-error {
+    text-align: center;
+    padding: 1.25rem 0.625rem;
+    color: hsl(var(--error));
+    font-size: 0.5625rem;
+  }
 }