feat(emilkowalski#414): allow individual toasts to opt into richColor…

… styling
nicksrandall · May 8, 2024 · ef47bf5 · ef47bf5
1 parent 6c51bc8
commit ef47bf5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -56,6 +56,7 @@ const Toast = (props: ToastProps) => {
     toasts,
     expanded,
     removeToast,
+    defaultRichColors,
     closeButton: closeButtonFromToaster,
     style,
     cancelButtonStyle,
@@ -270,6 +271,7 @@ const Toast = (props: ToastProps) => {
         toast?.classNames?.[toastType],
       )}
       data-sonner-toast=""
+      data-rich-colors={toast.richColors ?? defaultRichColors}
       data-styled={!Boolean(toast.jsx || toast.unstyled || unstyled)}
       data-mounted={mounted}
       data-promise={Boolean(toast.promise)}
@@ -632,7 +634,6 @@ const Toaster = (props: ToasterProps) => {
             className={className}
             data-sonner-toaster
             data-theme={actualTheme}
-            data-rich-colors={richColors}
             data-y-position={y}
             data-x-position={x}
             style={
@@ -689,6 +690,7 @@ const Toaster = (props: ToasterProps) => {
                   icons={icons}
                   index={index}
                   toast={toast}
+                  defaultRichColors={richColors}
                   duration={toastOptions?.duration ?? duration}
                   className={toastOptions?.className}
                   descriptionClassName={toastOptions?.descriptionClassName}

diff --git a/src/styles.css b/src/styles.css
@@ -165,7 +165,7 @@
   gap: 2px;
 }
 
-[data-sonner-toast][data-styled="true"] [data-button] {
+[data-sonner-toast][data-styled='true'] [data-button] {
   border-radius: 4px;
   padding-left: 8px;
   padding-right: 8px;
@@ -438,49 +438,49 @@
   --error-text: hsl(358, 100%, 81%);
 }
 
-[data-rich-colors='true'] [data-sonner-toast][data-type='success'] {
+[data-rich-colors='true'][data-sonner-toast][data-type='success'] {
   background: var(--success-bg);
   border-color: var(--success-border);
   color: var(--success-text);
 }
 
-[data-rich-colors='true'] [data-sonner-toast][data-type='success'] [data-close-button] {
+[data-rich-colors='true'][data-sonner-toast][data-type='success'] [data-close-button] {
   background: var(--success-bg);
   border-color: var(--success-border);
   color: var(--success-text);
 }
 
-[data-rich-colors='true'] [data-sonner-toast][data-type='info'] {
+[data-rich-colors='true'][data-sonner-toast][data-type='info'] {
   background: var(--info-bg);
   border-color: var(--info-border);
   color: var(--info-text);
 }
 
-[data-rich-colors='true'] [data-sonner-toast][data-type='info'] [data-close-button] {
+[data-rich-colors='true'][data-sonner-toast][data-type='info'] [data-close-button] {
   background: var(--info-bg);
   border-color: var(--info-border);
   color: var(--info-text);
 }
 
-[data-rich-colors='true'] [data-sonner-toast][data-type='warning'] {
+[data-rich-colors='true'][data-sonner-toast][data-type='warning'] {
   background: var(--warning-bg);
   border-color: var(--warning-border);
   color: var(--warning-text);
 }
 
-[data-rich-colors='true'] [data-sonner-toast][data-type='warning'] [data-close-button] {
+[data-rich-colors='true'][data-sonner-toast][data-type='warning'] [data-close-button] {
   background: var(--warning-bg);
   border-color: var(--warning-border);
   color: var(--warning-text);
 }
 
-[data-rich-colors='true'] [data-sonner-toast][data-type='error'] {
+[data-rich-colors='true'][data-sonner-toast][data-type='error'] {
   background: var(--error-bg);
   border-color: var(--error-border);
   color: var(--error-text);
 }
 
-[data-rich-colors='true'] [data-sonner-toast][data-type='error'] [data-close-button] {
+[data-rich-colors='true'][data-sonner-toast][data-type='error'] [data-close-button] {
   background: var(--error-bg);
   border-color: var(--error-border);
   color: var(--error-text);

diff --git a/src/types.ts b/src/types.ts
@@ -52,6 +52,7 @@ export interface ToastT {
   type?: ToastTypes;
   icon?: React.ReactNode;
   jsx?: React.ReactNode;
+  richColors?: boolean;
   invert?: boolean;
   closeButton?: boolean;
   dismissible?: boolean;
@@ -158,6 +159,7 @@ export interface ToastProps {
   closeButtonAriaLabel?: string;
   pauseWhenPageIsHidden: boolean;
   cn: CnFunction;
+  defaultRichColors?: boolean;
 }
 
 export enum SwipeStateTypes {