@zenithui/toast
Version:
A modern, lightweight toast notification system for React applications. ZenithUI Toast provides a simple and customizable way to display notifications, alerts, and messages to users with smooth animations and flexible styling options.
55 lines (52 loc) • 1.27 kB
CSS
:root {
--x-offset: 12px;
--y-offset: 12px;
--zenithui-loader-bg: #000;
--text-color: #020617;
--bg-color: white;
--box-shadow: #0000001a;
--success-text: #047857;
--success-bg: #edfdf9;
--success-border: #10b981;
--success-shadow: #7fffd4;
--error-text: #be123c;
--error-bg: #ffeff3;
--error-border: #f43f5e;
--error-shadow: #ff8196;
--info-text: #0369a1;
--info-bg: #f0f9ff;
--info-border: #0ea5e9;
--info-shadow: #84d8ff;
--warning-text: #b45309;
--warning-bg: #fffbf1;
--warning-border: #f59e0b;
--warning-shadow: #ffd284;
--close-btn-bg: #1e293b;
--close-btn-hover: #020617;
--close-rich: #edfdf9;
}
.dark {
--zenithui-loader-bg: #fff;
--text-color: #fff;
--bg-color: #1e293b;
--box-shadow: #0000004d;
--success-text: #047857;
--success-bg: #edfdf9;
--success-border: #10b981;
--success-shadow: #7fffd4;
--error-text: #be123c;
--error-bg: #ffeff3;
--error-border: #f43f5e;
--error-shadow: #ff8196;
--info-text: #0369a1;
--info-bg: #f0f9ff;
--info-border: #0ea5e9;
--info-shadow: #84d8ff;
--warning-text: #b45309;
--warning-bg: #fffbf1;
--warning-border: #f59e0b;
--warning-shadow: #ffd284;
--close-btn-bg: #fff;
--close-btn-hover: #edfdf9;
--close-rich: #334155;
}