fix: notification wrong background color when cssVar is false (#56133)

components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -14,63 +14,43 @@ exports[`renders components/notification/demo/basic.tsx extend context correctly
 exports[`renders components/notification/demo/basic.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/notification/demo/component-token.tsx extend context correctly 1`] = `
-Array [
-  <h4>
-    Custom Theme (Enhanced Colors)
-  </h4>,
-  <div
-    class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+<div
+  class="ant-flex ant-flex-wrap-wrap"
+  style="gap: 8px;"
+>
+  <button
+    class="ant-btn ant-btn-default ant-btn-color-green ant-btn-variant-outlined"
+    type="button"
   >
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
-        type="button"
-      >
-        <span>
-          Custom Success
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
-        type="button"
-      >
-        <span>
-          Custom Info
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
-        type="button"
-      >
-        <span>
-          Custom Warning
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined"
-        type="button"
-      >
-        <span>
-          Custom Error
-        </span>
-      </button>
-    </div>
-  </div>,
-]
+    <span>
+      Success
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-default ant-btn-color-blue ant-btn-variant-outlined"
+    type="button"
+  >
+    <span>
+      Info
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-default ant-btn-color-yellow ant-btn-variant-outlined"
+    type="button"
+  >
+    <span>
+      Warning
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-default ant-btn-color-red ant-btn-variant-outlined"
+    type="button"
+  >
+    <span>
+      Error
+    </span>
+  </button>
+</div>
 `;
 
 exports[`renders components/notification/demo/component-token.tsx extend context correctly 2`] = `[]`;
@@ -819,56 +799,41 @@ exports[`renders components/notification/demo/with-btn.tsx extend context correc
 
 exports[`renders components/notification/demo/with-icon.tsx extend context correctly 1`] = `
 <div
-  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+  class="ant-flex ant-flex-wrap-wrap"
+  style="gap: 8px;"
 >
-  <div
-    class="ant-space-item"
+  <button
+    class="ant-btn ant-btn-default ant-btn-color-green ant-btn-variant-outlined"
+    type="button"
   >
-    <button
-      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
-      type="button"
-    >
-      <span>
-        Success
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-space-item"
+    <span>
+      Success
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-default ant-btn-color-blue ant-btn-variant-outlined"
+    type="button"
   >
-    <button
-      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
-      type="button"
-    >
-      <span>
-        Info
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-space-item"
+    <span>
+      Info
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-default ant-btn-color-yellow ant-btn-variant-outlined"
+    type="button"
   >
-    <button
-      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
-      type="button"
-    >
-      <span>
-        Warning
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-space-item"
+    <span>
+      Warning
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-default ant-btn-color-red ant-btn-variant-outlined"
+    type="button"
   >
-    <button
-      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
-      type="button"
-    >
-      <span>
-        Error
-      </span>
-    </button>
-  </div>
+    <span>
+      Error
+    </span>
+  </button>
 </div>
 `;
 

components/notification/__tests__/__snapshots__/demo.test.ts.snap

@@ -12,63 +12,43 @@ exports[`renders components/notification/demo/basic.tsx correctly 1`] = `
 `;
 
 exports[`renders components/notification/demo/component-token.tsx correctly 1`] = `
-Array [
-  <h4>
-    Custom Theme (Enhanced Colors)
-  </h4>,
-  <div
-    class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+<div
+  class="ant-flex ant-flex-wrap-wrap"
+  style="gap:8px"
+>
+  <button
+    class="ant-btn ant-btn-default ant-btn-color-green ant-btn-variant-outlined"
+    type="button"
   >
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
-        type="button"
-      >
-        <span>
-          Custom Success
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
-        type="button"
-      >
-        <span>
-          Custom Info
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
-        type="button"
-      >
-        <span>
-          Custom Warning
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined"
-        type="button"
-      >
-        <span>
-          Custom Error
-        </span>
-      </button>
-    </div>
-  </div>,
-]
+    <span>
+      Success
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-default ant-btn-color-blue ant-btn-variant-outlined"
+    type="button"
+  >
+    <span>
+      Info
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-default ant-btn-color-yellow ant-btn-variant-outlined"
+    type="button"
+  >
+    <span>
+      Warning
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-default ant-btn-color-red ant-btn-variant-outlined"
+    type="button"
+  >
+    <span>
+      Error
+    </span>
+  </button>
+</div>
 `;
 
 exports[`renders components/notification/demo/custom-icon.tsx correctly 1`] = `
@@ -795,55 +775,40 @@ exports[`renders components/notification/demo/with-btn.tsx correctly 1`] = `
 
 exports[`renders components/notification/demo/with-icon.tsx correctly 1`] = `
 <div
-  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+  class="ant-flex ant-flex-wrap-wrap"
+  style="gap:8px"
 >
-  <div
-    class="ant-space-item"
+  <button
+    class="ant-btn ant-btn-default ant-btn-color-green ant-btn-variant-outlined"
+    type="button"
   >
-    <button
-      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
-      type="button"
-    >
-      <span>
-        Success
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-space-item"
+    <span>
+      Success
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-default ant-btn-color-blue ant-btn-variant-outlined"
+    type="button"
   >
-    <button
-      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
-      type="button"
-    >
-      <span>
-        Info
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-space-item"
+    <span>
+      Info
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-default ant-btn-color-yellow ant-btn-variant-outlined"
+    type="button"
   >
-    <button
-      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
-      type="button"
-    >
-      <span>
-        Warning
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-space-item"
+    <span>
+      Warning
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-default ant-btn-color-red ant-btn-variant-outlined"
+    type="button"
   >
-    <button
-      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
-      type="button"
-    >
-      <span>
-        Error
-      </span>
-    </button>
-  </div>
+    <span>
+      Error
+    </span>
+  </button>
 </div>
 `;

components/notification/demo/component-token.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, notification, Space, ConfigProvider } from 'antd';
+import { Button, notification, Flex, ConfigProvider } from 'antd';
 
 type NotificationType = 'success' | 'info' | 'warning' | 'error';
 
@@ -16,17 +16,28 @@ const CustomThemeDemo: React.FC = () => {
 
   return (
     <>
-      <h4>Custom Theme (Enhanced Colors)</h4>
-      <Space>
-        <Button type="primary" onClick={() => openNotificationWithIcon('success')}>
-          Custom Success
+      <Flex gap={8} wrap="wrap">
+        <Button
+          color="green"
+          variant="outlined"
+          onClick={() => openNotificationWithIcon('success')}
+        >
+          Success
         </Button>
-        <Button onClick={() => openNotificationWithIcon('info')}>Custom Info</Button>
-        <Button onClick={() => openNotificationWithIcon('warning')}>Custom Warning</Button>
-        <Button danger onClick={() => openNotificationWithIcon('error')}>
-          Custom Error
+        <Button color="blue" variant="outlined" onClick={() => openNotificationWithIcon('info')}>
+          Info
         </Button>
-      </Space>
+        <Button
+          color="yellow"
+          variant="outlined"
+          onClick={() => openNotificationWithIcon('warning')}
+        >
+          Warning
+        </Button>
+        <Button color="red" variant="outlined" onClick={() => openNotificationWithIcon('error')}>
+          Error
+        </Button>
+      </Flex>
       {contextHolder}
     </>
   );
@@ -37,10 +48,10 @@ const App: React.FC = () => (
     theme={{
       components: {
         Notification: {
-          colorSuccessBg: '#d9f7be', // Custom light green for success
-          colorErrorBg: '#ffccc7', // Custom light red for error
-          colorInfoBg: '#bae0ff', // Custom light blue for info
-          colorWarningBg: '#ffffb8', // Custom light yellow for warning
+          colorSuccessBg: 'linear-gradient(30deg, #d9f7be, #f6ffed)',
+          colorErrorBg: 'linear-gradient(30deg, #ffccc7, #fff1f0)',
+          colorInfoBg: 'linear-gradient(30deg, #bae0ff, #e6f4ff)',
+          colorWarningBg: 'linear-gradient(30deg, #ffffb8, #feffe6)',
         },
       },
     }}

components/notification/demo/with-icon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, notification, Space } from 'antd';
+import { Button, notification, Flex } from 'antd';
 
 type NotificationType = 'success' | 'info' | 'warning' | 'error';
 
@@ -17,12 +17,28 @@ const App: React.FC = () => {
   return (
     <>
       {contextHolder}
-      <Space>
-        <Button onClick={() => openNotificationWithIcon('success')}>Success</Button>
-        <Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
-        <Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>
-        <Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
-      </Space>
+      <Flex gap={8} wrap="wrap">
+        <Button
+          color="green"
+          variant="outlined"
+          onClick={() => openNotificationWithIcon('success')}
+        >
+          Success
+        </Button>
+        <Button color="blue" variant="outlined" onClick={() => openNotificationWithIcon('info')}>
+          Info
+        </Button>
+        <Button
+          color="yellow"
+          variant="outlined"
+          onClick={() => openNotificationWithIcon('warning')}
+        >
+          Warning
+        </Button>
+        <Button color="red" variant="outlined" onClick={() => openNotificationWithIcon('error')}>
+          Error
+        </Button>
+      </Flex>
     </>
   );
 };

components/notification/style/index.ts

@@ -377,10 +377,13 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
 export const prepareComponentToken = (token: AliasToken) => ({
   zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
   width: 384,
-  colorSuccessBg: token.colorSuccessBg,
-  colorErrorBg: token.colorErrorBg,
-  colorInfoBg: token.colorInfoBg,
-  colorWarningBg: token.colorWarningBg,
+  // Fix notification background color issue
+  // https://github.com/ant-design/ant-design/issues/55649
+  // https://github.com/ant-design/ant-design/issues/56055
+  colorSuccessBg: undefined,
+  colorErrorBg: undefined,
+  colorInfoBg: undefined,
+  colorWarningBg: undefined,
 });
 
 export const prepareNotificationToken: (