✨ 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;
-}
-
-export interface NotificationToken extends FullToken<'Notification'> {
   notificationBg: string;
+  notificationPadding: string;
   notificationPaddingVertical: number;
   notificationPaddingHorizontal: number;
-  notificationPadding: string;
+  notificationIconSize: number;
+  notificationCloseButtonSize: number;
   notificationMarginBottom: number;
   notificationMarginEdge: number;
+}
+
+export interface NotificationToken extends FullToken<'Notification'> {
   animationMaxHeight: number;
-  notificationIconSize: number;
-  notificationCloseButtonSize: number;
 }
 
 const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
@@ -268,28 +268,28 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
 // ============================== Export ==============================
 export default genComponentStyleHook(
   'Notification',
+  (token) => {
+    const notificationToken = mergeToken<NotificationToken>(token, {
+      // index.less variables
+      animationMaxHeight: 150,
+    });
+
+    return [genNotificationStyle(notificationToken)];
+  },
   (token) => {
     const notificationPaddingVertical = token.paddingMD;
     const notificationPaddingHorizontal = token.paddingLG;
-
-    const notificationToken = mergeToken<NotificationToken>(token, {
-      // default.less variables
+    return {
+      zIndexPopup: token.zIndexPopupBase + 50,
+      width: 384,
       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)];
+      notificationMarginBottom: token.margin,
+      notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
+      notificationMarginEdge: token.marginLG,
+    };
   },
-  (token) => ({
-    zIndexPopup: token.zIndexPopupBase + 50,
-    width: 384,
-  }),
 );

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 分页 -->