feat(component): adjust notify styles (#6578)

Change the styles of `notify.error`, `notify.warning`, and `notify.success` from `alert` to `normal`
Add custom `iconColor` option

packages/frontend/component/src/ui/notification/notification-card.tsx

@@ -11,6 +11,7 @@ import {
   getCardBorderColor,
   getCardColor,
   getCardForegroundColor,
+  getIconColor,
 } from './utils';
 
 export interface NotificationCardProps extends HTMLAttributes<HTMLDivElement> {
@@ -22,6 +23,7 @@ export const NotificationCard = ({ notification }: NotificationCardProps) => {
     theme = 'info',
     style = 'normal',
     icon = <InformationFillDuotoneIcon />,
+    iconColor,
     thumb,
     action,
     title,
@@ -44,6 +46,7 @@ export const NotificationCard = ({ notification }: NotificationCardProps) => {
         [styles.cardBorderColor]: getCardBorderColor(style),
         [styles.cardForeground]: getCardForegroundColor(style),
         [styles.actionTextColor]: getActionTextColor(style, theme),
+        [styles.iconColor]: getIconColor(style, theme, iconColor),
       })}
       data-with-icon={icon ? '' : undefined}
       className={styles.card}

packages/frontend/component/src/ui/notification/notification-center.tsx

@@ -1,4 +1,7 @@
-import { SingleSelectSelectSolidIcon } from '@blocksuite/icons';
+import {
+  InformationFillDuotoneIcon,
+  SingleSelectSelectSolidIcon,
+} from '@blocksuite/icons';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { type CSSProperties, type FC, useMemo } from 'react';
 import { type ExternalToast, toast, Toaster } from 'sonner';
@@ -55,14 +58,22 @@ export function notify(notification: Notification, options?: ExternalToast) {
 }
 
 notify.error = (notification: Notification, options?: ExternalToast) => {
-  return notify({ style: 'alert', theme: 'error', ...notification }, options);
+  return notify(
+    {
+      icon: <InformationFillDuotoneIcon />,
+      style: 'normal',
+      theme: 'error',
+      ...notification,
+    },
+    options
+  );
 };
 
 notify.success = (notification: Notification, options?: ExternalToast) => {
   return notify(
     {
       icon: <SingleSelectSelectSolidIcon />,
-      style: 'alert',
+      style: 'normal',
       theme: 'success',
       ...notification,
     },
@@ -72,7 +83,12 @@ notify.success = (notification: Notification, options?: ExternalToast) => {
 
 notify.warning = (notification: Notification, options?: ExternalToast) => {
   return notify(
-    { style: 'information', theme: 'warning', ...notification },
+    {
+      icon: <InformationFillDuotoneIcon />,
+      style: 'normal',
+      theme: 'warning',
+      ...notification,
+    },
     options
   );
 };

packages/frontend/component/src/ui/notification/styles.css.ts

@@ -5,6 +5,7 @@ export const cardColor = createVar();
 export const cardForeground = createVar();
 export const cardBorderColor = createVar();
 export const actionTextColor = createVar();
+export const iconColor = createVar();
 
 export const card = style({
   borderRadius: 8,
@@ -38,6 +39,7 @@ export const icon = style({
 globalStyle(`${icon} svg`, {
   width: '100%',
   height: '100%',
+  color: iconColor,
 });
 export const title = style({
   width: 0,

packages/frontend/component/src/ui/notification/types.ts

@@ -28,6 +28,7 @@ export interface Notification {
   title?: ReactNode;
   message?: ReactNode;
   icon?: ReactNode;
+  iconColor?: string;
   footer?: ReactNode;
 
   // events

packages/frontend/component/src/ui/notification/utils.ts

@@ -53,3 +53,21 @@ export const getCardBorderColor = (style: NotificationStyle) => {
 export const getCardForegroundColor = (style: NotificationStyle) => {
   return style === 'alert' ? cssVar('pureWhite') : cssVar('textPrimaryColor');
 };
+
+export const getIconColor = (
+  style: NotificationStyle,
+  theme: NotificationTheme,
+  iconColor?: string
+) => {
+  if (style === 'normal') {
+    const map: Record<NotificationTheme, string> = {
+      error: cssVar('errorColor'),
+      info: cssVar('processingColor'),
+      success: cssVar('successColor'),
+      warning: cssVar('warningColor'),
+    };
+    return iconColor || map[theme];
+  }
+
+  return iconColor || cssVar('pureWhite');
+};