mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

refactor: shadow alias (#36213)

Browse Source 
* refactor: shadow

* refactor: component box shadow

* refactor: shadow alias
This commit is contained in:
MadCcc 2022-06-24 10:45:29 +08:00 committed by GitHub
parent c5b742d253
commit 373f0c5a65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 75 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/_util/theme/interface.ts
View File

@ -412,4 +412,18 @@ export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {
controlMaskBg: string;
colorBorderSecondary: string;
// FIXME: component box-shadow, should be removed
boxShadowPopoverArrow: string;
boxShadowPopoverArrowBottom: string;
boxShadowSegmentedSelectedItem: string;
boxShadowCard: string;
boxShadowDrawerRight: string;
boxShadowDrawerLeft: string;
boxShadowDrawerUp: string;
boxShadowDrawerDown: string;
boxShadowTabsOverflowLeft: string;
boxShadowTabsOverflowRight: string;
boxShadowTabsOverflowTop: string;
boxShadowTabsOverflowBottom: string;
}

26
components/_util/theme/util/alias.ts
View File

@ -167,6 +167,32 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
controlMaskBg: new TinyColor('#000').setAlpha(0.45).toRgbString(),
colorBorderSecondary: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(),
// FIXME: component box-shadow, should be removed
boxShadowPopoverArrow: `3px 3px 7px rgba(0, 0, 0, 0.1)`,
boxShadowPopoverArrowBottom: `2px 2px 5px rgba(0, 0, 0, 0.1)`,
boxShadowSegmentedSelectedItem: [
`0 2px 8px -2px ${new TinyColor('#000').setAlpha(0.05).toRgbString()}`,
`0 1px 4px -1px ${new TinyColor('#000').setAlpha(0.07).toRgbString()}`,
`0 0 1px 0 ${new TinyColor('#000').setAlpha(0.08).toRgbString()}`,
].join(','),
boxShadowCard: `
0 1px 2px -2px ${new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString()},
0 3px 6px 0 ${new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString()},
0 5px 12px 4px ${new TinyColor('rgba(0, 0, 0, 0.09)').toRgbString()}
`,
boxShadowDrawerRight:
'6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05),12px 0 48px 16px rgba(0, 0, 0, 0.03)',
boxShadowDrawerLeft:
'-6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03)',
boxShadowDrawerUp:
'0 -6px 16px -8px rgba(0, 0, 0, 0.32), 0 -9px 28px 0 rgba(0, 0, 0, 0.2),0 -12px 48px 16px rgba(0, 0, 0, 0.12)',
boxShadowDrawerDown:
'0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2), 0 12px 48px 16px rgba(0, 0, 0, 0.12)',
boxShadowTabsOverflowLeft: `inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)`,
boxShadowTabsOverflowRight: `inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)`,
boxShadowTabsOverflowTop: `inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)`,
boxShadowTabsOverflowBottom: `inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)`,
// Override AliasToken
...alias,
};

8
components/_util/theme/util/placementArrow.tsx
View File

@ -52,7 +52,7 @@ export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToke
`&-placement-topRight ${componentCls}-arrow`,
].join(',')]: {
bottom: 0,
boxShadow: `3px 3px 7px -3px rgba(0, 0, 0, 0.1)`, // FIXME: hardcode
boxShadow: token.boxShadowPopoverArrow,
transform: 'translateY(50%) rotate(45deg)',
},
@ -85,7 +85,7 @@ export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToke
`&-placement-bottomRight ${componentCls}-arrow`,
].join(',')]: {
top: 0,
boxShadow: `2px 2px 5px -2px rgba(0, 0, 0, 0.1)`, // FIXME: hardcode
boxShadow: token.boxShadowPopoverArrowBottom,
transform: `translateY(-50%) rotate(-135deg)`,
},
@ -121,7 +121,7 @@ export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToke
_skip_check_: true,
value: 0,
},
boxShadow: `3px 3px 7px -3px rgba(0, 0, 0, 0.1)`, // FIXME: hardcode
boxShadow: token.boxShadowPopoverArrow,
transform: 'translateX(50%) rotate(-45deg)',
},
@ -151,7 +151,7 @@ export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToke
_skip_check_: true,
value: 0,
},
boxShadow: `3px 3px 7px -3px rgba(0, 0, 0, 0.1)`, // FIXME: hardcode
boxShadow: token.boxShadowPopoverArrow,
transform: 'translateX(-50%) rotate(135deg)',
},

29
components/badge/style/index.tsx
View File

@ -17,10 +17,11 @@ interface BadgeToken extends FullToken<'Badge'> {
badgeFontSizeSm: number;
badgeStatusSize: number;
badgeShadowSize: number;
badgeShadowColor: string;
badgeProcessingDuration: string;
badgeRibbbonOffset: number;
badgeRibbbonCornerTransform: string;
badgeRibbbonCornerFilter: string;
badgeRibbonOffset: number;
badgeRibbonCornerTransform: string;
badgeRibbonCornerFilter: string;
}
const antStatusProcessing = new Keyframes('antStatusProcessing', {
@ -65,7 +66,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
motionDurationSlow,
badgeStatusSize,
marginXS,
badgeRibbbonOffset,
badgeRibbonOffset,
} = token;
const numberPrefixCls = `${antCls}-scroll-number`;
const ribbonPrefixCls = `${antCls}-ribbon`;
@ -285,17 +286,17 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
[`${ribbonPrefixCls}-corner`]: {
position: 'absolute',
top: '100%',
width: badgeRibbbonOffset,
height: badgeRibbbonOffset,
width: badgeRibbonOffset,
height: badgeRibbonOffset,
color: 'currentcolor',
border: `${badgeRibbbonOffset / 2}px solid`,
transform: token.badgeRibbbonCornerTransform,
border: `${badgeRibbonOffset / 2}px solid`,
transform: token.badgeRibbonCornerTransform,
transformOrigin: 'top',
filter: token.badgeRibbbonCornerFilter,
filter: token.badgeRibbonCornerFilter,
},
...statusRibbonPreset,
[`&${ribbonPrefixCls}-placement-end`]: {
insetInlineEnd: -badgeRibbbonOffset,
insetInlineEnd: -badgeRibbonOffset,
borderEndEndRadius: 0,
[`${ribbonPrefixCls}-corner`]: {
insetInlineEnd: 0,
@ -303,7 +304,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
},
},
[`&${ribbonPrefixCls}-placement-start`]: {
insetInlineStart: -badgeRibbbonOffset,
insetInlineStart: -badgeRibbonOffset,
borderEndStartRadius: 0,
[`${ribbonPrefixCls}-corner`]: {
insetInlineStart: 0,
@ -345,11 +346,11 @@ export default genComponentStyleHook('Badge', token => {
badgeFontSizeSm,
badgeStatusSize,
badgeProcessingDuration: '1.2s',
badgeRibbbonOffset: marginXS,
badgeRibbonOffset: marginXS,
// Follow token just by Design. Not related with token
badgeRibbbonCornerTransform: 'scaleY(0.75)',
badgeRibbbonCornerFilter: `brightness(75%)`,
badgeRibbonCornerTransform: 'scaleY(0.75)',
badgeRibbonCornerFilter: `brightness(75%)`,
});
return [genSharedBadgeStyle(badgeToken)];

7
components/card/style/index.tsx
View File

@ -1,6 +1,5 @@
// deps-lint-skip-all
import type { CSSObject } from '@ant-design/cssinjs';
import { TinyColor } from '@ctrl/tinycolor';
import type { FullToken, GenerateStyle } from '../../_util/theme';
import { clearFix, genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
@ -376,11 +375,7 @@ export default genComponentStyleHook('Card', token => {
const cardHeadPadding = token.padding;
const cardToken = mergeToken<CardToken>(token, {
cardShadow: `
0 1px 2px -2px ${new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString()},
0 3px 6px 0 ${new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString()},
0 5px 12px 4px ${new TinyColor('rgba(0, 0, 0, 0.09)').toRgbString()}
`, // FIXME: shadow
cardShadow: token.boxShadowCard,
cardHeadHeight: token.fontSizeLG + cardHeadPadding * 2,
cardHeadPadding,
cardPaddingBase: token.paddingLG,

4
components/date-picker/style/index.tsx
View File

@ -1132,9 +1132,9 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
height: token.sizePopupArrow,
marginInlineStart: token.inputPaddingHorizontal * 1.5,
background: `linear-gradient(135deg, transparent 40%, ${token.colorBgComponent} 40%)`, // Use linear-gradient to prevent arrow from covering text
boxShadow: `2px 2px 6px -2px fade(#000, 10%)`, // use spread radius to hide shadow over popover, FIXME: shadow
boxShadow: token.boxShadowPopoverArrowBottom,
transition: `left ${token.motionDurationSlow} ease-out`,
...roundedArrow(token.sizePopupArrow, 5, token.colorBgComponent),
...roundedArrow(token.sizePopupArrow, 5, token.colorBgElevated),
},
[`${componentCls}-panel-container`]: {

32
components/drawer/style/index.tsx
View File

@ -5,10 +5,6 @@ import type { FullToken, GenerateStyle } from '../../_util/theme';
import { genComponentStyleHook, mergeToken } from '../../_util/theme';
export interface DrawerToken extends FullToken<'Drawer'> {
shadow1Right: string;
shadow1Left: string;
shadow1Up: string;
shadow1Down: string;
drawerFooterPaddingVertical: number;
drawerFooterPaddingHorizontal: number;
}
@ -159,16 +155,7 @@ const genBaseStyle: GenerateStyle<DrawerToken> = (token: DrawerToken): CSSObject
};
const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
const {
componentCls,
motionDurationSlow,
shadow1Right,
shadow1Left,
shadow1Down,
shadow1Up,
lineWidth,
motionEaseOut,
} = token;
const { componentCls, motionDurationSlow, lineWidth, motionEaseOut } = token;
return {
// =================== left,right ===================
@ -186,7 +173,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
width: '100%',
transition: `transform ${motionDurationSlow} ${motionEaseOut}`,
[`${componentCls}-content-wrapper`]: {
boxShadow: shadow1Right,
boxShadow: token.boxShadowDrawerRight,
},
},
[`${componentCls}-right`]: {
@ -203,7 +190,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
width: '100%',
transition: `transform ${motionDurationSlow} ${motionEaseOut}`,
[`${componentCls}-content-wrapper`]: {
boxShadow: shadow1Left,
boxShadow: token.boxShadowDrawerLeft,
},
},
// https://github.com/ant-design/ant-design/issues/18607, Avoid edge alignment bug.
@ -233,7 +220,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
[`${componentCls}-top${componentCls}-open`]: {
[`${componentCls}-content-wrapper`]: {
boxShadow: shadow1Down,
boxShadow: token.boxShadowDrawerDown,
},
},
@ -246,7 +233,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
[`${componentCls}-bottom${componentCls}-bottom-open`]: {
[`${componentCls}-content-wrapper`]: {
boxShadow: shadow1Up,
boxShadow: token.boxShadowDrawerUp,
},
},
@ -260,15 +247,6 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
// ============================== Export ==============================
export default genComponentStyleHook('Drawer', token => {
const drawerToken = mergeToken<DrawerToken>(token, {
// FIXME: shadow
shadow1Right:
'6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05),12px 0 48px 16px rgba(0, 0, 0, 0.03)',
shadow1Left:
'-6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03)',
shadow1Up:
'0 -6px 16px -8px rgba(0, 0, 0, 0.32), 0 -9px 28px 0 rgba(0, 0, 0, 0.2),0 -12px 48px 16px rgba(0, 0, 0, 0.12)',
shadow1Down:
'0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2), 0 12px 48px 16px rgba(0, 0, 0, 0.12)',
drawerFooterPaddingVertical: token.paddingXS,
drawerFooterPaddingHorizontal: token.padding,
});

4
components/dropdown/style/index.tsx
View File

@ -137,7 +137,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
&-placement-topRight > ${componentCls}-arrow
`]: {
bottom: sizePopupArrow * Math.sqrt(1 / 2) + 2,
boxShadow: `3px 3px 7px -3px rgba(0, 0, 0, 0.1)`, // FIXME: hardcode
boxShadow: token.boxShadowPopoverArrow,
transform: 'rotate(45deg)',
},
@ -169,7 +169,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
&-placement-bottomRight > ${componentCls}-arrow
`]: {
top: (sizePopupArrow + 2) * Math.sqrt(1 / 2),
boxShadow: `2px 2px 5px -2px rgba(0, 0, 0, 0.1)`, // FIXME: hardcode
boxShadow: token.boxShadowPopoverArrowBottom, // FIXME: hardcode
transform: `rotate(-135deg) translateY(-0.5px)`, // FIXME: hardcode
},

2
components/popover/style/index.tsx
View File

@ -93,7 +93,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = token => {
},
// Arrow Style
getArrowStyle(token, popoverBg),
getArrowStyle(token, token.colorBgElevated),
];
};

10
components/segmented/style/index.tsx
View File

@ -17,7 +17,6 @@ interface SegmentedToken extends FullToken<'Segmented'> {
segmentedPaddingHorizontal: number;
segmentedPaddingHorizontalSM: number;
segmentedContainerPadding: number;
segmentedSelectedItemBoxShadow: string;
}
// ============================== Mixins ==============================
@ -34,7 +33,7 @@ function getSegmentedItemSelectedStyle(token: SegmentedToken): CSSObject {
return {
backgroundColor: token.bgColorSelected,
borderRadius: token.controlRadius,
boxShadow: token.segmentedSelectedItemBoxShadow,
boxShadow: token.boxShadowSegmentedSelectedItem,
};
}
@ -175,14 +174,7 @@ export default genComponentStyleHook(
token => {
const { lineWidthBold, controlLineWidth } = token;
const segmentedSelectedItemBoxShadow = [
`0 2px 8px -2px ${new TinyColor('#000').setAlpha(0.05).toRgbString()}`,
`0 1px 4px -1px ${new TinyColor('#000').setAlpha(0.07).toRgbString()}`,
`0 0 1px 0 ${new TinyColor('#000').setAlpha(0.08).toRgbString()}`,
].join(',');
const segmentedToken = mergeToken<SegmentedToken>(token, {
segmentedSelectedItemBoxShadow,
segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth,
segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - controlLineWidth,
segmentedContainerPadding: lineWidthBold,

18
components/tabs/style/index.tsx
View File

@ -1,6 +1,5 @@
// deps-lint-skip-all
import type { CSSObject } from '@ant-design/cssinjs';
import { TinyColor } from '@ctrl/tinycolor';
import type { FullToken, GenerateStyle } from '../../_util/theme';
import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
@ -18,10 +17,6 @@ interface TabsToken extends FullToken<'Tabs'> {
tabsCardHeadBackground: string;
dropdownEdgeChildVerticalPadding: number;
tabsNavWrapPseudoWidth: number;
tabsOverflowShadowLeft: string;
tabsOverflowShadowRight: string;
tabsOverflowShadowTop: string;
tabsOverflowShadowBottom: string;
tabsActiveTextShadow: string;
tabsDropdownHeight: number;
tabsDropdownWidth: number;
@ -276,7 +271,7 @@ const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
_skip_check_: true,
value: 0,
},
boxShadow: token.tabsOverflowShadowLeft,
boxShadow: token.boxShadowTabsOverflowLeft,
},
'&::after': {
@ -284,7 +279,7 @@ const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
_skip_check_: true,
value: 0,
},
boxShadow: token.tabsOverflowShadowRight,
boxShadow: token.boxShadowTabsOverflowRight,
},
[`&${componentCls}-nav-wrap-ping-left::before`]: {
@ -364,12 +359,12 @@ const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
'&::before': {
top: 0,
boxShadow: token.tabsOverflowShadowTop,
boxShadow: token.boxShadowTabsOverflowTop,
},
'&::after': {
bottom: 0,
boxShadow: token.tabsOverflowShadowBottom,
boxShadow: token.boxShadowTabsOverflowBottom,
},
[`&${componentCls}-nav-wrap-ping-top::before`]: {
@ -846,7 +841,6 @@ const genTabsStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
export default genComponentStyleHook(
'Tabs',
token => {
const boxShadowColor = new TinyColor('rgba(0, 0, 0, 0.15)').setAlpha(0.08).toRgbString();
const tabsCardHeight = token.controlHeightLG;
const tabsToken = mergeToken<TabsToken>(token, {
@ -862,10 +856,6 @@ export default genComponentStyleHook(
tabsHorizontalGutter: token.marginXL,
tabsCardHeadBackground: token.colorBgComponentSecondary,
dropdownEdgeChildVerticalPadding: token.paddingXXS,
tabsOverflowShadowLeft: `inset 10px 0 8px -8px ${boxShadowColor}`,
tabsOverflowShadowRight: `inset -10px 0 8px -8px ${boxShadowColor}`,
tabsOverflowShadowTop: `inset 0 10px 8px -8px ${boxShadowColor}`,
tabsOverflowShadowBottom: `inset 0 -10px 8px -8px ${boxShadowColor}`,
tabsActiveTextShadow: '0 0 0.25px currentcolor',
tabsDropdownHeight: 200,
tabsDropdownWidth: 120,