From 7c3aee8f3f9ba82ae8c8ed3840c20ab47f3cb00f Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujit@lime-technology.com>
Date: Wed, 3 Sep 2025 12:36:18 -0400
Subject: [PATCH] fix: use shared bg & border color for styled toasts (#1647)

Addresses user complaints about light colored notifications in dark
themes.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- New Features
- Introduced type-specific toast color tokens (success, info, warning,
error) for richer, clearer toast styling.
- Applied consistent theming across light, inverted, and dark modes to
improve readability and contrast.
  - Enabled compatibility with rich color settings for toasts.
- Bug Fixes
- Corrected a CSS comment block to ensure styles compile and apply
reliably.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 @tailwind-shared/sonner.css | 38 +++++++++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/@tailwind-shared/sonner.css b/@tailwind-shared/sonner.css
index b6097596f..86536a186 100644
--- a/@tailwind-shared/sonner.css
+++ b/@tailwind-shared/sonner.css
@@ -418,6 +418,23 @@
   --normal-border: hsl(var(--border));
   --normal-text: hsl(var(--foreground));
 
+  --success-bg: hsl(var(--background));
+  --success-border: hsl(var(--border));
+  --success-text: hsl(140, 100%, 27%);
+
+  --info-bg: hsl(var(--background));
+  --info-border: hsl(var(--border));
+  --info-text: hsl(210, 92%, 45%);
+
+  --warning-bg: hsl(var(--background));
+  --warning-border: hsl(var(--border));
+  --warning-text: hsl(31, 92%, 45%);
+
+  --error-bg: hsl(var(--background));
+  --error-border: hsl(var(--border));
+  --error-text: hsl(360, 100%, 45%);
+
+  /* Old colors, preserved for reference
   --success-bg: hsl(143, 85%, 96%);
   --success-border: hsl(145, 92%, 91%);
   --success-text: hsl(140, 100%, 27%);
@@ -432,7 +449,7 @@
 
   --error-bg: hsl(359, 100%, 97%);
   --error-border: hsl(359, 100%, 94%);
-  --error-text: hsl(360, 100%, 45%);
+  --error-text: hsl(360, 100%, 45%); */
 }
 
 [data-sonner-toaster][data-theme='light'] [data-sonner-toast][data-invert='true'] {
@@ -452,6 +469,23 @@
   --normal-border: hsl(var(--border));
   --normal-text: hsl(var(--foreground));
 
+  --success-bg: hsl(var(--background));
+  --success-border: hsl(var(--border));
+  --success-text: hsl(150, 86%, 65%);
+
+  --info-bg: hsl(var(--background));
+  --info-border: hsl(var(--border));
+  --info-text: hsl(216, 87%, 65%);
+
+  --warning-bg: hsl(var(--background));
+  --warning-border: hsl(var(--border));
+  --warning-text: hsl(46, 87%, 65%);
+
+  --error-bg: hsl(var(--background));
+  --error-border: hsl(var(--border));
+  --error-text: hsl(358, 100%, 81%);
+
+  /* Old colors, preserved for reference
   --success-bg: hsl(150, 100%, 6%);
   --success-border: hsl(147, 100%, 12%);
   --success-text: hsl(150, 86%, 65%);
@@ -466,7 +500,7 @@
 
   --error-bg: hsl(358, 76%, 10%);
   --error-border: hsl(357, 89%, 16%);
-  --error-text: hsl(358, 100%, 81%);
+  --error-text: hsl(358, 100%, 81%); */
 }
 
 [data-rich-colors='true'][data-sonner-toast][data-type='success'] {