From 9d24d6a0e01a06ce0d7e534b753d5c5fa6258694 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Fri, 3 Feb 2023 11:20:21 +0800 Subject: [PATCH] refactor: adjust boxShadow token (#40516) * refactor: adjust boxShadow token * chore: code clean --- components/card/style/index.ts | 4 ++-- components/message/style/index.tsx | 4 ++-- components/modal/style/index.tsx | 2 +- components/notification/style/index.tsx | 4 ++-- components/segmented/style/index.tsx | 2 +- components/tabs/style/index.ts | 2 +- components/theme/interface/alias.ts | 1 + components/theme/util/alias.ts | 11 ++++++++--- components/tour/style/index.ts | 6 +++--- 9 files changed, 21 insertions(+), 15 deletions(-) diff --git a/components/card/style/index.ts b/components/card/style/index.ts index a90d115950a1..6afcfb997a24 100644 --- a/components/card/style/index.ts +++ b/components/card/style/index.ts @@ -228,7 +228,7 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { cardShadow, cardHeadPadding, colorBorderSecondary, - boxShadow, + boxShadowTertiary, cardPaddingBase, } = token; @@ -241,7 +241,7 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { borderRadius: token.borderRadiusLG, [`&:not(${componentCls}-bordered)`]: { - boxShadow, + boxShadow: boxShadowTertiary, }, [`${componentCls}-head`]: genCardHeadStyle(token), diff --git a/components/message/style/index.tsx b/components/message/style/index.tsx index f7ed5f3c5e1b..8a21fe0a7252 100644 --- a/components/message/style/index.tsx +++ b/components/message/style/index.tsx @@ -20,7 +20,7 @@ const genMessageStyle: GenerateStyle = (token) => { const { componentCls, iconCls, - boxShadowSecondary, + boxShadow, colorBgElevated, colorSuccess, colorError, @@ -128,7 +128,7 @@ const genMessageStyle: GenerateStyle = (token) => { padding: messageNoticeContentPadding, background: colorBgElevated, borderRadius: borderRadiusLG, - boxShadow: boxShadowSecondary, + boxShadow, pointerEvents: 'all', }, diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index c5b6145634a7..81a05f00007e 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -163,7 +163,7 @@ const genModalStyle: GenerateStyle = (token) => { backgroundClip: 'padding-box', border: 0, borderRadius: token.borderRadiusLG, - boxShadow: token.boxShadowSecondary, + boxShadow: token.boxShadow, pointerEvents: 'auto', padding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`, }, diff --git a/components/notification/style/index.tsx b/components/notification/style/index.tsx index 213d159e3a65..ad47c6781967 100644 --- a/components/notification/style/index.tsx +++ b/components/notification/style/index.tsx @@ -26,7 +26,7 @@ const genNotificationStyle: GenerateStyle = (token) => { const { iconCls, componentCls, // .ant-notification - boxShadowSecondary, + boxShadow, fontSizeLG, notificationMarginBottom, borderRadiusLG, @@ -165,7 +165,7 @@ const genNotificationStyle: GenerateStyle = (token) => { wordWrap: 'break-word', background: notificationBg, borderRadius: borderRadiusLG, - boxShadow: boxShadowSecondary, + boxShadow, [`${componentCls}-close-icon`]: { fontSize, diff --git a/components/segmented/style/index.tsx b/components/segmented/style/index.tsx index 1c7395383fea..a15345e39093 100644 --- a/components/segmented/style/index.tsx +++ b/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, }; } diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts index a08a8abd666d..849b8e9cfcdb 100644 --- a/components/tabs/style/index.ts +++ b/components/tabs/style/index.ts @@ -170,7 +170,7 @@ const genDropdownStyle: GenerateStyle = (token: TabsToken): CSSObject backgroundClip: 'padding-box', borderRadius: token.borderRadiusLG, outline: 'none', - boxShadow: token.boxShadow, + boxShadow: token.boxShadowTertiary, '&-item': { ...textEllipsis, diff --git a/components/theme/interface/alias.ts b/components/theme/interface/alias.ts index 563f2ec0c6d0..454b9a99953d 100644 --- a/components/theme/interface/alias.ts +++ b/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']; diff --git a/components/theme/util/alias.ts b/components/theme/util/alias.ts index 171f6d05df2a..ccad92417115 100644 --- a/components/theme/util/alias.ts +++ b/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, diff --git a/components/tour/style/index.ts b/components/tour/style/index.ts index cd2079bdd810..d877bd10ed7b 100644 --- a/components/tour/style/index.ts +++ b/components/tour/style/index.ts @@ -28,7 +28,7 @@ const genBaseStyle: GenerateStyle = (token) => { colorFill, sliderHeight, sliderWidth, - boxShadow, + boxShadowTertiary, tourZIndexPopup, fontSize, colorBgContainer, @@ -74,7 +74,7 @@ const genBaseStyle: GenerateStyle = (token) => { textAlign: 'start', textDecoration: 'none', borderRadius: tourBorderRadius, - boxShadow, + boxShadow: boxShadowTertiary, position: 'relative', backgroundColor: colorBgContainer, border: 'none', @@ -165,7 +165,7 @@ const genBaseStyle: GenerateStyle = (token) => { textDecoration: 'none', backgroundColor: colorPrimary, borderRadius, - boxShadow, + boxShadow: boxShadowTertiary, [`${componentCls}-close`]: { color: colorTextLightSolid,