✨ feat: migrate less to token for Notification (#42079)

* feat: migrate less to token for Notification

* feat: migrate less to token for Notification

* docs: update docs

* docs: update docs

* docs: update docs

* docs: update docs

* docs: update docs

components/notification/style/index.tsx

@@ -9,18 +9,18 @@ import genNotificationPlacementStyle from './placement';
 export interface ComponentToken {
   zIndexPopup: number;
   width: number;
+  notificationBg: string;
+  notificationPadding: string;
+  notificationPaddingVertical: number;
+  notificationPaddingHorizontal: number;
+  notificationIconSize: number;
+  notificationCloseButtonSize: number;
+  notificationMarginBottom: number;
+  notificationMarginEdge: number;
 }
 
 export interface NotificationToken extends FullToken<'Notification'> {
-  notificationBg: string;
-  notificationPaddingVertical: number;
-  notificationPaddingHorizontal: number;
-  notificationPadding: string;
-  notificationMarginBottom: number;
-  notificationMarginEdge: number;
   animationMaxHeight: number;
-  notificationIconSize: number;
-  notificationCloseButtonSize: number;
 }
 
 const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
@@ -269,27 +269,27 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
 export default genComponentStyleHook(
   'Notification',
   (token) => {
-    const notificationPaddingVertical = token.paddingMD;
-    const notificationPaddingHorizontal = token.paddingLG;
-
     const notificationToken = mergeToken<NotificationToken>(token, {
-      // default.less variables
-      notificationBg: token.colorBgElevated,
-      notificationPaddingVertical,
-      notificationPaddingHorizontal,
       // index.less variables
-      notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
-      notificationMarginBottom: token.margin,
-      notificationMarginEdge: token.marginLG,
       animationMaxHeight: 150,
-      notificationIconSize: token.fontSizeLG * token.lineHeightLG,
-      notificationCloseButtonSize: token.controlHeightLG * 0.55,
     });
 
     return [genNotificationStyle(notificationToken)];
   },
-  (token) => ({
+  (token) => {
-    zIndexPopup: token.zIndexPopupBase + 50,
+    const notificationPaddingVertical = token.paddingMD;
-    width: 384,
+    const notificationPaddingHorizontal = token.paddingLG;
-  }),
+    return {
+      zIndexPopup: token.zIndexPopupBase + 50,
+      width: 384,
+      notificationBg: token.colorBgElevated,
+      notificationPaddingVertical,
+      notificationPaddingHorizontal,
+      notificationIconSize: token.fontSizeLG * token.lineHeightLG,
+      notificationCloseButtonSize: token.controlHeightLG * 0.55,
+      notificationMarginBottom: token.margin,
+      notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
+      notificationMarginEdge: token.marginLG,
+    };
+  },
 );

docs/react/migrate-less-variables.en-US.md

@@ -91,7 +91,18 @@ This document contains the correspondence between all the less variables related
 | `@modal-confirm-title-font-size` | `modalHeaderTitleFontSize` | - |
 | `@modal-border-radius` | `borderRadiusLG` | - |
 
-<!-- ### Notification -->
+## Notification
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@notification-width` | `width` | - |
+| `@notification-padding` | `notificationPadding` | - |
+| `@notification-padding-vertical` | `notificationPaddingVertical` | - |
+| `@notification-padding-horizontal` | `notificationPaddingHorizontal` | - |
+| `@notification-margin-bottom` | `notificationMarginBottom` | - |
+| `@notification-margin-edge` | `notificationMarginEdge` | - |
+| `@notification-bg` | `notificationBg` | - |
 
 <!-- ### Pagination -->
 
@@ -118,7 +129,7 @@ This document contains the correspondence between all the less variables related
 ## Step
 
 <!-- prettier-ignore -->
-| less 变量 | Component Token | 备注 |
+| Less variables | Component Token | Note |
 | --- | --- | --- |
 | `@process-tail-color` | `processTailColor` | - |
 | `@steps-nav-arrow-color` | `stepsNavArrowColor` | - |

docs/react/migrate-less-variables.zh-CN.md

@@ -91,7 +91,18 @@ title: Less 变量迁移 Design Token
 | `@modal-confirm-title-font-size` | `modalHeaderTitleFontSize` | - |
 | `@modal-border-radius` | `borderRadiusLG` | - |
 
-<!-- ### Notification 通知提醒框 -->
+## Notification 通知提醒框
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@notification-width` | `width` | - |
+| `@notification-padding` | `notificationPadding` | - |
+| `@notification-padding-vertical` | `notificationPaddingVertical` | - |
+| `@notification-padding-horizontal` | `notificationPaddingHorizontal` | - |
+| `@notification-margin-bottom` | `notificationMarginBottom` | - |
+| `@notification-margin-edge` | `notificationMarginEdge` | - |
+| `@notification-bg` | `notificationBg` | - |
 
 <!-- ### Pagination 分页 -->