fix: dynamic useApp CP theme (#41899)

* fix: useApp style wrapper * fix: adjust style injection * fix: lint
ant-design · Apr 19, 2023 · fdb1a4a · fdb1a4a
1 parent 3eb28ee
commit fdb1a4a
Show file tree

Hide file tree

Showing 2 changed files with 145 additions and 128 deletions.
diff --git a/components/message/style/index.tsx b/components/message/style/index.tsx
@@ -1,8 +1,9 @@
 // deps-lint-skip-all
+import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
+import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
@@ -38,6 +39,8 @@ const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
     messageNoticeContentPadding,
   } = token;
 
+  const noticeCls = `${componentCls}-notice`;
+
   const messageMoveIn = new Keyframes('MessageMoveIn', {
     '0%': {
       padding: 0,
@@ -65,6 +68,40 @@ const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
     },
   });
 
+  const noticeStyle: CSSObject = {
+    padding: paddingXS,
+    textAlign: 'center',
+
+    [`${componentCls}-custom-content > ${iconCls}`]: {
+      verticalAlign: 'text-bottom',
+      marginInlineEnd: marginXS, // affected by ltr or rtl
+      fontSize: fontSizeLG,
+    },
+
+    [`${noticeCls}-content`]: {
+      display: 'inline-block',
+      padding: messageNoticeContentPadding,
+      background: colorBgElevated,
+      borderRadius: borderRadiusLG,
+      boxShadow,
+      pointerEvents: 'all',
+    },
+
+    [`${componentCls}-success > ${iconCls}`]: {
+      color: colorSuccess,
+    },
+    [`${componentCls}-error > ${iconCls}`]: {
+      color: colorError,
+    },
+    [`${componentCls}-warning > ${iconCls}`]: {
+      color: colorWarning,
+    },
+    [`${componentCls}-info > ${iconCls},
+      ${componentCls}-loading > ${iconCls}`]: {
+      color: colorInfo,
+    },
+  };
+
   return [
     // ============================ Holder ============================
     {
@@ -115,45 +152,17 @@ const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
 
     // ============================ Notice ============================
     {
-      [`${componentCls}-notice`]: {
-        padding: paddingXS,
-        textAlign: 'center',
-
-        [`${componentCls}-custom-content > ${iconCls}`]: {
-          verticalAlign: 'text-bottom',
-          marginInlineEnd: marginXS, // affected by ltr or rtl
-          fontSize: fontSizeLG,
-        },
-
-        [`${componentCls}-notice-content`]: {
-          display: 'inline-block',
-          padding: messageNoticeContentPadding,
-          background: colorBgElevated,
-          borderRadius: borderRadiusLG,
-          boxShadow,
-          pointerEvents: 'all',
-        },
-
-        [`${componentCls}-success > ${iconCls}`]: {
-          color: colorSuccess,
-        },
-        [`${componentCls}-error > ${iconCls}`]: {
-          color: colorError,
-        },
-        [`${componentCls}-warning > ${iconCls}`]: {
-          color: colorWarning,
-        },
-        [`
-        ${componentCls}-info > ${iconCls},
-        ${componentCls}-loading > ${iconCls}`]: {
-          color: colorInfo,
+      [componentCls]: {
+        [noticeCls]: {
+          ...noticeStyle,
         },
       },
     },
 
     // ============================= Pure =============================
     {
       [`${componentCls}-notice-pure-panel`]: {
+        ...noticeStyle,
         padding: 0,
         textAlign: 'start',
       },

diff --git a/components/notification/style/index.tsx b/components/notification/style/index.tsx
@@ -1,8 +1,9 @@
+import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
+import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genNotificationPlacementStyle from './placement';
-import { resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
@@ -82,6 +83,100 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
     },
   });
 
+  const noticeStyle: CSSObject = {
+    position: 'relative',
+    width,
+    maxWidth: `calc(100vw - ${notificationMarginEdge * 2}px)`,
+    marginBottom: notificationMarginBottom,
+    marginInlineStart: 'auto',
+    padding: notificationPadding,
+    overflow: 'hidden',
+    lineHeight,
+    wordWrap: 'break-word',
+    background: notificationBg,
+    borderRadius: borderRadiusLG,
+    boxShadow,
+
+    [`${componentCls}-close-icon`]: {
+      fontSize,
+      cursor: 'pointer',
+    },
+
+    [`${noticeCls}-message`]: {
+      marginBottom: token.marginXS,
+      color: colorTextHeading,
+      fontSize: fontSizeLG,
+      lineHeight: token.lineHeightLG,
+    },
+
+    [`${noticeCls}-description`]: {
+      fontSize,
+    },
+
+    [`&${noticeCls}-closable ${noticeCls}-message`]: {
+      paddingInlineEnd: token.paddingLG,
+    },
+
+    [`${noticeCls}-with-icon ${noticeCls}-message`]: {
+      marginBottom: token.marginXS,
+      marginInlineStart: token.marginSM + notificationIconSize,
+      fontSize: fontSizeLG,
+    },
+
+    [`${noticeCls}-with-icon ${noticeCls}-description`]: {
+      marginInlineStart: token.marginSM + notificationIconSize,
+      fontSize,
+    },
+
+    // Icon & color style in different selector level
+    // https://github.com/ant-design/ant-design/issues/16503
+    // https://github.com/ant-design/ant-design/issues/15512
+    [`${noticeCls}-icon`]: {
+      position: 'absolute',
+      fontSize: notificationIconSize,
+      lineHeight: 0,
+
+      // icon-font
+      [`&-success${iconCls}`]: {
+        color: colorSuccess,
+      },
+      [`&-info${iconCls}`]: {
+        color: colorInfo,
+      },
+      [`&-warning${iconCls}`]: {
+        color: colorWarning,
+      },
+      [`&-error${iconCls}`]: {
+        color: colorError,
+      },
+    },
+
+    [`${noticeCls}-close`]: {
+      position: 'absolute',
+      top: token.notificationPaddingVertical,
+      insetInlineEnd: token.notificationPaddingHorizontal,
+      color: token.colorIcon,
+      outline: 'none',
+      width: token.notificationCloseButtonSize,
+      height: token.notificationCloseButtonSize,
+      borderRadius: token.borderRadiusSM,
+      transition: `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+
+      '&:hover': {
+        color: token.colorIconHover,
+        backgroundColor: token.wireframe ? 'transparent' : token.colorFillContent,
+      },
+    },
+
+    [`${noticeCls}-btn`]: {
+      float: 'right',
+      marginTop: token.marginSM,
+    },
+  };
+
   return [
     // ============================ Holder ============================
     {
@@ -97,13 +192,13 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
         },
 
         [`&${componentCls}-top, &${componentCls}-bottom`]: {
-          [`${componentCls}-notice`]: {
+          [noticeCls]: {
             marginInline: 'auto auto',
           },
         },
 
         [`&${componentCls}-topLeft, &${componentCls}-bottomLeft`]: {
-          [`${componentCls}-notice`]: {
+          [noticeCls]: {
             marginInlineEnd: 'auto',
             marginInlineStart: 0,
           },
@@ -144,7 +239,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
         '&-rtl': {
           direction: 'rtl',
 
-          [`${componentCls}-notice-btn`]: {
+          [`${noticeCls}-btn`]: {
             float: 'left',
           },
         },
@@ -153,104 +248,17 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
 
     // ============================ Notice ============================
     {
-      [noticeCls]: {
-        position: 'relative',
-        width,
-        maxWidth: `calc(100vw - ${notificationMarginEdge * 2}px)`,
-        marginBottom: notificationMarginBottom,
-        marginInlineStart: 'auto',
-        padding: notificationPadding,
-        overflow: 'hidden',
-        lineHeight,
-        wordWrap: 'break-word',
-        background: notificationBg,
-        borderRadius: borderRadiusLG,
-        boxShadow,
-
-        [`${componentCls}-close-icon`]: {
-          fontSize,
-          cursor: 'pointer',
-        },
-
-        [`${noticeCls}-message`]: {
-          marginBottom: token.marginXS,
-          color: colorTextHeading,
-          fontSize: fontSizeLG,
-          lineHeight: token.lineHeightLG,
-        },
-
-        [`${noticeCls}-description`]: {
-          fontSize,
-        },
-
-        [`&${noticeCls}-closable ${noticeCls}-message`]: {
-          paddingInlineEnd: token.paddingLG,
-        },
-
-        [`${noticeCls}-with-icon ${noticeCls}-message`]: {
-          marginBottom: token.marginXS,
-          marginInlineStart: token.marginSM + notificationIconSize,
-          fontSize: fontSizeLG,
-        },
-
-        [`${noticeCls}-with-icon ${noticeCls}-description`]: {
-          marginInlineStart: token.marginSM + notificationIconSize,
-          fontSize,
-        },
-
-        // Icon & color style in different selector level
-        // https://github.com/ant-design/ant-design/issues/16503
-        // https://github.com/ant-design/ant-design/issues/15512
-        [`${noticeCls}-icon`]: {
-          position: 'absolute',
-          fontSize: notificationIconSize,
-          lineHeight: 0,
-
-          // icon-font
-          [`&-success${iconCls}`]: {
-            color: colorSuccess,
-          },
-          [`&-info${iconCls}`]: {
-            color: colorInfo,
-          },
-          [`&-warning${iconCls}`]: {
-            color: colorWarning,
-          },
-          [`&-error${iconCls}`]: {
-            color: colorError,
-          },
-        },
-
-        [`${noticeCls}-close`]: {
-          position: 'absolute',
-          top: token.notificationPaddingVertical,
-          insetInlineEnd: token.notificationPaddingHorizontal,
-          color: token.colorIcon,
-          outline: 'none',
-          width: token.notificationCloseButtonSize,
-          height: token.notificationCloseButtonSize,
-          borderRadius: token.borderRadiusSM,
-          transition: `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-
-          '&:hover': {
-            color: token.colorIconHover,
-            backgroundColor: token.wireframe ? 'transparent' : token.colorFillContent,
-          },
-        },
-
-        [`${noticeCls}-btn`]: {
-          float: 'right',
-          marginTop: token.marginSM,
+      [componentCls]: {
+        [noticeCls]: {
+          ...noticeStyle,
         },
       },
     },
 
     // ============================= Pure =============================
     {
       [`${noticeCls}-pure-panel`]: {
+        ...noticeStyle,
         margin: 0,
       },
     },