fix(component): avoid close button of the notification being invisible in dark mode and bright bg (#6946)

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

@@ -11,6 +11,7 @@ import {
   getCardBorderColor,
   getCardColor,
   getCardForegroundColor,
+  getCloseIconColor,
   getIconColor,
 } from './utils';
 
@@ -48,6 +49,7 @@ export const NotificationCard = ({ notification }: NotificationCardProps) => {
         [styles.cardForeground]: getCardForegroundColor(style),
         [styles.actionTextColor]: getActionTextColor(style, theme),
         [styles.iconColor]: getIconColor(style, theme, iconColor),
+        [styles.closeIconColor]: getCloseIconColor(style),
       })}
       data-with-icon={icon ? '' : undefined}
       {...rootAttrs}

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

@@ -6,6 +6,7 @@ export const cardForeground = createVar();
 export const cardBorderColor = createVar();
 export const actionTextColor = createVar();
 export const iconColor = createVar();
+export const closeIconColor = createVar();
 
 export const card = style({
   borderRadius: 8,
@@ -82,7 +83,7 @@ export const closeButton = style({
   },
 });
 export const closeIcon = style({
-  color: `${cardForeground} !important`,
+  color: `${closeIconColor} !important`,
 });
 
 export const main = style({

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

@@ -59,7 +59,7 @@ export const getIconColor = (
   theme: NotificationTheme,
   iconColor?: string
 ) => {
-  if (style === 'normal') {
+  if (style !== 'alert') {
     const map: Record<NotificationTheme, string> = {
       error: cssVar('errorColor'),
       info: cssVar('processingColor'),
@@ -71,3 +71,9 @@ export const getIconColor = (
 
   return iconColor || cssVar('pureWhite');
 };
+
+export const getCloseIconColor = (style: NotificationStyle) => {
+  return style === 'alert'
+    ? getCardForegroundColor(style)
+    : cssVar('iconColor');
+};