style(extension): use status colors only for notification icons

apps/extension/src/ui/components/sonner.tsx

@@ -21,10 +21,10 @@ export function Toaster({
     hotkey={hotkey}
     className="toaster group"
     icons={{
-      success: <CircleCheckIcon size={16} className="size-4" aria-hidden="true" />,
+      success: <CircleCheckIcon size={16} className="size-4 text-[var(--notification-success-icon)]" aria-hidden="true" />,
       info: <InfoIcon size={16} className="size-4" aria-hidden="true" />,
       warning: <TriangleAlertIcon size={16} className="size-4" aria-hidden="true" />,
-      error: <OctagonXIcon size={16} className="size-4" aria-hidden="true" />,
+      error: <OctagonXIcon size={16} className="size-4 text-[var(--notification-error-icon)]" aria-hidden="true" />,
       loading: <Loader2Icon size={16} className="size-4 animate-spin motion-reduce:animate-none" aria-hidden="true" />,
       ...icons,
     }}

apps/extension/src/ui/notification.css

@@ -2,9 +2,3 @@
 .toaster [data-sonner-toast] {
   pointer-events: auto;
 }
-
-.toaster [data-sonner-toast][data-type="error"] {
-  --normal-bg: var(--notification-error-background);
-  --normal-text: var(--notification-error-foreground);
-  --normal-border: var(--notification-error-border);
-}

apps/extension/src/ui/theme-tokens.css

@@ -13,7 +13,6 @@
   --border: #e0e0e0;
   --ring: #262626;
   --radius: 0.5rem;
-  --notification-error-background: #fff1f2;
-  --notification-error-foreground: #be123c;
-  --notification-error-border: #ffe4e6;
+  --notification-success-icon: #16a06e;
+  --notification-error-icon: #be123c;
 }