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>
This commit is contained in:
@@ -8,11 +8,10 @@ export function Toaster() {
|
|||||||
<SonnerToaster
|
<SonnerToaster
|
||||||
position="bottom-right"
|
position="bottom-right"
|
||||||
toastOptions={{
|
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',
|
descriptionClassName: 'text-text-secondary',
|
||||||
}}
|
}}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
richColors
|
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -222,4 +222,20 @@
|
|||||||
.list-item-interactive:active {
|
.list-item-interactive:active {
|
||||||
background-color: hsl(var(--elevated));
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user