feat: notification support cssVar (#45799)

* feat: notification support cssVar

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

---------

Co-authored-by: MadCcc <madccc@foxmail.com>

components/notification/PurePanel.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
@@ -7,10 +8,12 @@ import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import classNames from 'classnames';
 import { Notice } from 'rc-notification';
 import type { NoticeProps } from 'rc-notification/lib/Notice';
-import * as React from 'react';
+
 import { ConfigContext } from '../config-provider';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import type { IconType } from './interface';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 import PurePanelStyle from './style/pure-panel';
 
 export const TypeIcon = {
@@ -89,6 +92,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
     btn,
     closable = true,
     closeIcon,
+    className: notificationClassName,
     ...restProps
   } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
@@ -97,9 +101,11 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
   const noticePrefixCls = `${prefixCls}-notice`;
 
   const [, hashId] = useStyle(prefixCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const wrapCSSVar = useCSSVar(rootCls);
 
-  return (
-    <div className={classNames(`${noticePrefixCls}-pure-panel`, hashId, className)}>
+  return wrapCSSVar(
+    <div className={classNames(`${noticePrefixCls}-pure-panel`, hashId, className, rootCls)}>
       <PurePanelStyle prefixCls={prefixCls} />
       <Notice
         {...restProps}
@@ -107,6 +113,9 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
         eventKey="pure"
         duration={null}
         closable={closable}
+        className={classNames({
+          notificationClassName,
+        })}
         closeIcon={getCloseIcon(prefixCls, closeIcon)}
         content={
           <PureContent
@@ -119,7 +128,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
           />
         }
       />
-    </div>
+    </div>,
   );
 };
 

components/notification/style/cssVar.ts

@@ -0,0 +1,4 @@
+import { genCSSVarRegister } from '../../theme/internal';
+import { prepareComponentToken } from '.';
+
+export default genCSSVarRegister('Notification', prepareComponentToken);

components/notification/style/index.ts

@@ -1,10 +1,11 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import { Keyframes } from '@ant-design/cssinjs';
+import { Keyframes, unit } from '@ant-design/cssinjs';
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, AliasToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genNotificationPlacementStyle from './placement';
 import genStackStyle from './stack';
+import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
@@ -26,8 +27,8 @@ export interface NotificationToken extends FullToken<'Notification'> {
   notificationPadding: string;
   notificationPaddingVertical: number;
   notificationPaddingHorizontal: number;
-  notificationIconSize: number;
-  notificationCloseButtonSize: number;
+  notificationIconSize: number | string;
+  notificationCloseButtonSize: number | string;
   notificationMarginBottom: number;
   notificationMarginEdge: number;
   notificationStackLayer: number;
@@ -69,7 +70,7 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
     [noticeCls]: {
       padding: notificationPadding,
       width,
-      maxWidth: `calc(100vw - ${notificationMarginEdge * 2}px)`,
+      maxWidth: `calc(100vw - ${unit(token.calc(notificationMarginEdge).mul(2).equal())})`,
       overflow: 'hidden',
       lineHeight,
       wordWrap: 'break-word',
@@ -98,12 +99,12 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
 
     [`${noticeCls}-with-icon ${noticeCls}-message`]: {
       marginBottom: token.marginXS,
-      marginInlineStart: token.marginSM + notificationIconSize,
+      marginInlineStart: token.calc(token.marginSM).add(notificationIconSize).equal(),
       fontSize: fontSizeLG,
     },
 
     [`${noticeCls}-with-icon ${noticeCls}-description`]: {
-      marginInlineStart: token.marginSM + notificationIconSize,
+      marginInlineStart: token.calc(token.marginSM).add(notificationIconSize).equal(),
       fontSize,
     },
 
@@ -259,17 +260,19 @@ export const prepareComponentToken = (token: AliasToken) => ({
   width: 384,
 });
 
-export const prepareNotificationToken = (token: AliasToken) => {
+export const prepareNotificationToken: (
+  token: Parameters<GenStyleFn<'Notification'>>[0],
+) => NotificationToken = (token) => {
   const notificationPaddingVertical = token.paddingMD;
   const notificationPaddingHorizontal = token.paddingLG;
   const notificationToken = mergeToken<NotificationToken>(token, {
     notificationBg: token.colorBgElevated,
     notificationPaddingVertical,
     notificationPaddingHorizontal,
-    notificationIconSize: token.fontSizeLG * token.lineHeightLG,
-    notificationCloseButtonSize: token.controlHeightLG * 0.55,
+    notificationIconSize: token.calc(token.fontSizeLG).mul(token.lineHeightLG).equal(),
+    notificationCloseButtonSize: token.calc(token.controlHeightLG).mul(0.55).equal(),
     notificationMarginBottom: token.margin,
-    notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
+    notificationPadding: `${unit(token.paddingMD)} ${unit(token.paddingContentHorizontalLG)}`,
     notificationMarginEdge: token.marginLG,
     animationMaxHeight: 150,
     notificationStackLayer: 3,

components/notification/style/placement.ts

@@ -34,7 +34,7 @@ const genNotificationPlacementStyle: GenerateStyle<NotificationToken, CSSObject>
 
   const bottomFadeIn = new Keyframes('antNotificationBottomFadeIn', {
     '0%': {
-      bottom: -animationMaxHeight,
+      bottom: token.calc(animationMaxHeight).mul(-1).equal(),
       opacity: 0,
     },
 

components/notification/style/pure-panel.ts

@@ -1,5 +1,6 @@
 import { genSubStyleComponent } from '../../theme/internal';
 import { prepareComponentToken, genNoticeStyle, prepareNotificationToken } from '.';
+import { unit } from '@ant-design/cssinjs';
 
 export default genSubStyleComponent(
   ['Notification', 'PurePanel'],
@@ -11,7 +12,9 @@ export default genSubStyleComponent(
       [`${noticeCls}-pure-panel`]: {
         ...genNoticeStyle(notificationToken),
         width: notificationToken.width,
-        maxWidth: `calc(100vw - ${notificationToken.notificationMarginEdge * 2}px)`,
+        maxWidth: `calc(100vw - ${unit(
+          token.calc(notificationToken.notificationMarginEdge).mul(2).equal(),
+        )})`,
         margin: 0,
       },
     };

components/notification/style/stack.ts

@@ -103,7 +103,7 @@ const genStackStyle: GenerateStyle<NotificationToken> = (token) => {
           height: token.margin,
           width: '100%',
           insetInline: 0,
-          bottom: -token.margin,
+          bottom: token.calc(token.margin).mul(-1).equal(),
           background: 'transparent',
           pointerEvents: 'auto',
         },

components/notification/useNotification.tsx

@@ -17,6 +17,7 @@ import { getCloseIcon, PureContent } from './PurePanel';
 import useStyle from './style';
 import { getMotion, getPlacementStyle } from './util';
 import { useToken } from '../theme/internal';
+import useCSSVar from './style/cssVar';
 
 const DEFAULT_OFFSET = 24;
 const DEFAULT_DURATION = 4.5;
@@ -36,10 +37,11 @@ interface HolderRef extends NotificationAPI {
 
 const Wrapper: FC<PropsWithChildren<{ prefixCls: string }>> = ({ children, prefixCls }) => {
   const [, hashId] = useStyle(prefixCls);
-  return (
+  const wrapCSSVar = useCSSVar(prefixCls);
+  return wrapCSSVar(
     <NotificationProvider classNames={{ list: hashId, notice: hashId }}>
       {children}
-    </NotificationProvider>
+    </NotificationProvider>,
   );
 };
 

scripts/check-cssinjs.tsx

@@ -53,7 +53,6 @@ async function checkCSSVar() {
     'image',
     'layout',
     'message',
-    'notification',
     'pagination',
     'progress',
     'qr-code',