style(ui): [toaster] add colors for different states

Added different icon colors for different toast types e.g. success|warning|info|error, so it's easier to distinguish if something failed, or it's some general information or tip message

Signed-off-by: Danil Kostromin <[email protected]>

libs/shared/tailwind-ui/src/lib/sonner-toaster/sonner-toaster.tsx

@@ -19,7 +19,11 @@ const Toaster = ({ ...props }: ToasterProps) => {
 					actionButton:
 						'group-[.toast]:bg-primary group-[.toast]:text-white group-[.toast]:rounded-md',
 					cancelButton:
-						'group-[.toast]:bg-bg-error group-[.toast]:text-white group-[.toast]:rounded-md'
+						'group-[.toast]:bg-bg-error group-[.toast]:text-white group-[.toast]:rounded-md',
+					success: 'group-[.toaster_[data-icon]]:text-bg-ok',
+					error: 'group-[.toaster_[data-icon]]:text-bg-error',
+					warning: 'group-[.toaster_[data-icon]]:text-bg-warning',
+					info: 'group-[.toaster_[data-icon]]:text-primary'
 				}
 			}}
 			{...props}