refactor: alert full token (#35702)

* refactor: alert full token

* chore: bump bundle size

* fix: miss token

components/_util/theme/interface.ts

@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import type { ComponentToken as AlertComponentToken } from '../../alert/style';
 import type { ComponentToken as AnchorComponentToken } from '../../anchor/style';
 import type { ComponentToken as BackTopComponentToken } from '../../back-top/style';
 import type { ComponentToken as ButtonComponentToken } from '../../button/style';
@@ -15,8 +16,8 @@ import type { ComponentToken as LayoutComponentToken } from '../../layout/style'
 import type { ComponentToken as ListComponentToken } from '../../list/style';
 import type { ComponentToken as MentionsComponentToken } from '../../mentions/style';
 import type { ComponentToken as MenuComponentToken } from '../../menu/style';
-import type { ComponentToken as ModalComponentToken } from '../../modal/style';
 import type { ComponentToken as MessageComponentToken } from '../../message/style';
+import type { ComponentToken as ModalComponentToken } from '../../modal/style';
 import type { ComponentToken as NotificationComponentToken } from '../../notification/style';
 import type { ComponentToken as PopconfirmComponentToken } from '../../popconfirm/style';
 import type { ComponentToken as ProgressComponentToken } from '../../progress/style';
@@ -28,8 +29,6 @@ import type { ComponentToken as TimelineComponentToken } from '../../timeline/st
 import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
 import type { ComponentToken as UploadComponentToken } from '../../upload/style';
 
-
-
 export const PresetColors = [
   'blue',
   'purple',
@@ -61,7 +60,7 @@ export interface OverrideToken {
 
   // Customize component
   Affix?: {};
-  Alert?: {};
+  Alert?: AlertComponentToken;
   Anchor?: AnchorComponentToken;
   Avatar?: {};
   BackTop?: BackTopComponentToken;

components/alert/style/index.tsx

@@ -1,20 +1,14 @@
-// import '../../style/index.less';
-// import './index.less';
-
 // deps-lint-skip-all
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+import type { FullToken, GenerateStyle } from '../../_util/theme';
+import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
 
-import type { GenerateStyle, FullToken } from '../../_util/theme';
-import { resetComponent, genComponentStyleHook, mergeToken } from '../../_util/theme';
+export interface ComponentToken {}
 
-// FIXME: missing token
 type AlertToken = FullToken<'Alert'> & {
-  alertMessageColor: string;
-  alertCloseColor: string;
-  alertCloseHoverColor: string;
-  alertWithDescriptionIconSize: number;
-  alertWithDescriptionPaddingVertical: number;
-  alertWithDescriptionNoIconPaddingVertical: number;
+  alertIconSizeLG: number;
+  alertPadding: number;
+  alertPaddingLG: number;
 };
 
 const genAlertTypeStyle = (
@@ -38,12 +32,14 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
     marginXS,
     fontSize,
     fontSizeLG,
+    lineHeight,
     controlRadius: borderRadius,
     motionEaseInOutCirc,
-    alertMessageColor,
-    alertWithDescriptionIconSize,
-    alertWithDescriptionPaddingVertical,
-    alertWithDescriptionNoIconPaddingVertical,
+    alertIconSizeLG,
+    colorText,
+    alertPadding,
+    alertPaddingLG,
+    marginXXS,
   } = token;
 
   return {
@@ -52,7 +48,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
       position: 'relative',
       display: 'flex',
       alignItems: 'center',
-      padding: '8px 15px',
+      padding: `${alertPadding}px ${alertPaddingLG}px`,
       wordWrap: 'break-word',
       borderRadius,
 
@@ -72,11 +68,11 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
       [`&-description`]: {
         display: 'none',
         fontSize,
-        lineHeight: `${fontSize + 8}px`,
+        lineHeight,
       },
 
       '&-message': {
-        color: alertMessageColor,
+        color: colorText,
       },
 
       '&&-motion-leave': {
@@ -98,23 +94,19 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
 
     [`${componentCls}-with-description`]: {
       alignItems: 'flex-start',
-      paddingInlineStart: alertWithDescriptionIconSize,
-      paddingInlineEnd: alertWithDescriptionPaddingVertical,
-      paddingBlock: alertWithDescriptionPaddingVertical,
-
-      [`&${componentCls}-no-icon`]: {
-        padding: `${alertWithDescriptionNoIconPaddingVertical}px 15px`,
-      },
+      paddingInline: alertPaddingLG,
+      paddingBlock: alertPaddingLG,
 
       [`${componentCls}-icon`]: {
-        marginInlineEnd: alertWithDescriptionPaddingVertical,
-        fontSize: alertWithDescriptionIconSize,
+        marginInlineStart: alertPadding,
+        marginInlineEnd: alertPaddingLG,
+        fontSize: alertIconSizeLG,
       },
 
       [`${componentCls}-message`]: {
         display: 'block',
-        marginBottom: '4px',
-        color: alertMessageColor,
+        marginBottom: marginXXS,
+        color: colorText,
         fontSize: fontSizeLG,
       },
 
@@ -187,8 +179,8 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
     motionDurationSlow: duration,
     marginXS,
     fontSizeIcon,
-    alertCloseColor,
-    alertCloseHoverColor,
+    colorAction,
+    colorActionHover,
   } = token;
 
   return {
@@ -209,19 +201,19 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
         cursor: 'pointer',
 
         [`${iconCls}-close`]: {
-          color: alertCloseColor,
+          color: colorAction,
           transition: `color ${duration}`,
           '&:hover': {
-            color: alertCloseHoverColor,
+            color: colorActionHover,
           },
         },
       },
 
       '&-close-text': {
-        color: alertCloseColor,
+        color: colorAction,
         transition: `color ${duration}`,
         '&:hover': {
-          color: alertCloseHoverColor,
+          color: colorActionHover,
         },
       },
     },
@@ -235,21 +227,12 @@ export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSS
 ];
 
 export default genComponentStyleHook('Alert', token => {
-  const alertMessageColor = token.colorTextHeading;
-  const alertCloseColor = token.colorAction;
-  const alertCloseHoverColor = token.colorActionHover;
-  // FIXME
-  const alertWithDescriptionIconSize = 24;
-  const alertWithDescriptionPaddingVertical = token.padding - 1;
-  const alertWithDescriptionNoIconPaddingVertical = token.padding - 1;
+  const { fontSizeHeading3, paddingXS, padding } = token;
 
   const alertToken = mergeToken<AlertToken>(token, {
-    alertMessageColor,
-    alertCloseColor,
-    alertCloseHoverColor,
-    alertWithDescriptionIconSize,
-    alertWithDescriptionPaddingVertical,
-    alertWithDescriptionNoIconPaddingVertical,
+    alertIconSizeLG: fontSizeHeading3,
+    alertPadding: paddingXS,
+    alertPaddingLG: padding,
   });
 
   return [genAlertStyle(alertToken)];

package.json

@@ -310,7 +310,7 @@
   "bundlesize": [
     {
       "path": "./dist/antd.min.js",
-      "maxSize": "360 kB"
+      "maxSize": "370 kB"
     },
     {
       "path": "./dist/antd.min.css",