refactor: adjust boxShadow token (#40516)

* refactor: adjust boxShadow token

* chore: code clean

components/card/style/index.ts

@@ -228,7 +228,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
     cardShadow,
     cardHeadPadding,
     colorBorderSecondary,
-    boxShadow,
+    boxShadowTertiary,
     cardPaddingBase,
   } = token;
 
@@ -241,7 +241,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
       borderRadius: token.borderRadiusLG,
 
       [`&:not(${componentCls}-bordered)`]: {
-        boxShadow,
+        boxShadow: boxShadowTertiary,
       },
 
       [`${componentCls}-head`]: genCardHeadStyle(token),

components/message/style/index.tsx

@@ -20,7 +20,7 @@ const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
   const {
     componentCls,
     iconCls,
-    boxShadowSecondary,
+    boxShadow,
     colorBgElevated,
     colorSuccess,
     colorError,
@@ -128,7 +128,7 @@ const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
           padding: messageNoticeContentPadding,
           background: colorBgElevated,
           borderRadius: borderRadiusLG,
-          boxShadow: boxShadowSecondary,
+          boxShadow,
           pointerEvents: 'all',
         },
 

components/modal/style/index.tsx

@@ -163,7 +163,7 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
           backgroundClip: 'padding-box',
           border: 0,
           borderRadius: token.borderRadiusLG,
-          boxShadow: token.boxShadowSecondary,
+          boxShadow: token.boxShadow,
           pointerEvents: 'auto',
           padding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
         },

components/notification/style/index.tsx

@@ -26,7 +26,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
   const {
     iconCls,
     componentCls, // .ant-notification
-    boxShadowSecondary,
+    boxShadow,
     fontSizeLG,
     notificationMarginBottom,
     borderRadiusLG,
@@ -165,7 +165,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
         wordWrap: 'break-word',
         background: notificationBg,
         borderRadius: borderRadiusLG,
-        boxShadow: boxShadowSecondary,
+        boxShadow,
 
         [`${componentCls}-close-icon`]: {
           fontSize,

components/segmented/style/index.tsx

@@ -29,7 +29,7 @@ function getItemDisabledStyle(cls: string, token: SegmentedToken): CSSObject {
 function getItemSelectedStyle(token: SegmentedToken): CSSObject {
   return {
     backgroundColor: token.bgColorSelected,
-    boxShadow: token.boxShadow,
+    boxShadow: token.boxShadowTertiary,
   };
 }
 

components/tabs/style/index.ts

@@ -170,7 +170,7 @@ const genDropdownStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
         backgroundClip: 'padding-box',
         borderRadius: token.borderRadiusLG,
         outline: 'none',
-        boxShadow: token.boxShadow,
+        boxShadow: token.boxShadowTertiary,
 
         '&-item': {
           ...textEllipsis,

components/theme/interface/alias.ts

@@ -94,6 +94,7 @@ export interface AliasToken extends MapToken {
 
   boxShadow: string;
   boxShadowSecondary: string;
+  boxShadowTertiary: string;
 
   linkDecoration: React.CSSProperties['textDecoration'];
   linkHoverDecoration: React.CSSProperties['textDecoration'];

components/theme/util/alias.ts

@@ -124,15 +124,20 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     marginXXL: mergedToken.sizeXXL,
 
     boxShadow: `
-      0 1px 2px 0 rgba(0, 0, 0, 0.03),
-      0 1px 6px -1px rgba(0, 0, 0, 0.02),
-      0 2px 4px 0 rgba(0, 0, 0, 0.02)
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05)
     `,
     boxShadowSecondary: `
       0 6px 16px 0 rgba(0, 0, 0, 0.08),
       0 3px 6px -4px rgba(0, 0, 0, 0.12),
       0 9px 28px 8px rgba(0, 0, 0, 0.05)
     `,
+    boxShadowTertiary: `
+      0 1px 2px 0 rgba(0, 0, 0, 0.03),
+      0 1px 6px -1px rgba(0, 0, 0, 0.02),
+      0 2px 4px 0 rgba(0, 0, 0, 0.02)
+    `,
 
     screenXS,
     screenXSMin: screenXS,

components/tour/style/index.ts

@@ -28,7 +28,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
     colorFill,
     sliderHeight,
     sliderWidth,
-    boxShadow,
+    boxShadowTertiary,
     tourZIndexPopup,
     fontSize,
     colorBgContainer,
@@ -74,7 +74,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
           textAlign: 'start',
           textDecoration: 'none',
           borderRadius: tourBorderRadius,
-          boxShadow,
+          boxShadow: boxShadowTertiary,
           position: 'relative',
           backgroundColor: colorBgContainer,
           border: 'none',
@@ -165,7 +165,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
             textDecoration: 'none',
             backgroundColor: colorPrimary,
             borderRadius,
-            boxShadow,
+            boxShadow: boxShadowTertiary,
 
             [`${componentCls}-close`]: {
               color: colorTextLightSolid,