mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 03:22:59 +08:00
refactor: Card full token (#35514)
* refactor: card full tokn * refactor: card token * fix: border color
This commit is contained in:
MadCcc
GitHub
parent
640d4f55d3
commit
99139aa77d
@ -363,4 +363,5 @@ export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {
|
||||
motionEaseOut: string;
|
||||
|
||||
colorPopupBg: string;
|
||||
colorBorderSecondary: string;
|
||||
}
|
||||
|
||||
@ -154,6 +154,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||
|
||||
colorPopupBg: new TinyColor('#000').setAlpha(0.45).toRgbString(),
|
||||
colorBorderSecondary: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(),
|
||||
};
|
||||
|
||||
return aliasToken;
|
||||
|
||||
@ -6,20 +6,14 @@ import type { GenerateStyle, FullToken } from '../../_util/theme';
|
||||
import { resetComponent, genComponentStyleHook, mergeToken, clearFix } from '../../_util/theme';
|
||||
|
||||
interface CardToken extends FullToken<'Card'> {
|
||||
rootPrefixCls: string;
|
||||
cardHoverableHoverBorder: string;
|
||||
cardShadow: string;
|
||||
cardHeadHeight: number;
|
||||
cardHeadHeightSM: number;
|
||||
cardHeadPadding: number;
|
||||
cardPaddingBase: number;
|
||||
cardHeadTabsMarginBottom: number;
|
||||
cardInnerHeadPadding: number;
|
||||
cardActionsLiMargin: string;
|
||||
cardActionsIconSize: number;
|
||||
cardSkeletonBg: string;
|
||||
borderColorSplit: string;
|
||||
backgroundColorLight: string;
|
||||
}
|
||||
|
||||
// ============================== Styles ==============================
|
||||
@ -27,14 +21,12 @@ interface CardToken extends FullToken<'Card'> {
|
||||
// ============================== Head ==============================
|
||||
const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
const {
|
||||
rootPrefixCls,
|
||||
antCls,
|
||||
componentCls,
|
||||
cardHoverableHoverBorder,
|
||||
cardHeadHeight,
|
||||
cardHeadPadding,
|
||||
cardPaddingBase,
|
||||
cardHeadTabsMarginBottom,
|
||||
borderColorSplit,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
@ -42,10 +34,10 @@ const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
marginBottom: -1, // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
|
||||
padding: `0 ${cardPaddingBase}px`,
|
||||
color: token.colorTextHeading,
|
||||
fontWeight: 500, // FIXME: hardcode in v4
|
||||
fontWeight: token.fontWeightStrong,
|
||||
fontSize: token.fontSizeLG,
|
||||
background: cardHoverableHoverBorder,
|
||||
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
||||
background: 'transparent',
|
||||
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorderSecondary}`,
|
||||
borderRadius: `${token.radiusBase}px ${token.radiusBase}px 0 0`,
|
||||
|
||||
...clearFix(),
|
||||
@ -73,7 +65,7 @@ const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
},
|
||||
},
|
||||
|
||||
[`.${rootPrefixCls}-tabs-top`]: {
|
||||
[`${antCls}-tabs-top`]: {
|
||||
clear: 'both',
|
||||
marginBottom: cardHeadTabsMarginBottom,
|
||||
color: token.colorText,
|
||||
@ -81,7 +73,7 @@ const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
fontSize: token.fontSizeBase,
|
||||
|
||||
'&-bar': {
|
||||
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
||||
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorderSecondary}`,
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -89,20 +81,20 @@ const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
|
||||
// ============================== Grid ==============================
|
||||
const genCardGridStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
const { cardPaddingBase, borderColorSplit, cardShadow } = token;
|
||||
const { cardPaddingBase, colorBorderSecondary, cardShadow, lineWidth } = token;
|
||||
return {
|
||||
width: '33.33%', // FIXME: hardcode in v4
|
||||
width: '33.33%',
|
||||
padding: cardPaddingBase,
|
||||
border: 0,
|
||||
borderRadius: 0,
|
||||
boxShadow: `
|
||||
1px 0 0 0 ${borderColorSplit},
|
||||
0 1px 0 0 ${borderColorSplit},
|
||||
1px 1px 0 0 ${borderColorSplit},
|
||||
1px 0 0 0 ${borderColorSplit} inset,
|
||||
0 1px 0 0 ${borderColorSplit} inset;
|
||||
transition: all ${token.motionDurationSlow}
|
||||
`, // FIXME: hardcode in v4
|
||||
${lineWidth}px 0 0 0 ${colorBorderSecondary},
|
||||
0 ${lineWidth}px 0 0 ${colorBorderSecondary},
|
||||
${lineWidth}px ${lineWidth}px 0 0 ${colorBorderSecondary},
|
||||
${lineWidth}px 0 0 0 ${colorBorderSecondary} inset,
|
||||
0 ${lineWidth}px 0 0 ${colorBorderSecondary} inset;
|
||||
`,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
|
||||
'&-hoverable:hover': {
|
||||
position: 'relative',
|
||||
@ -114,14 +106,14 @@ const genCardGridStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
|
||||
// ============================== Actions ==============================
|
||||
const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
const { componentCls, iconCls, cardActionsLiMargin, cardActionsIconSize, borderColorSplit } =
|
||||
const { componentCls, iconCls, cardActionsLiMargin, cardActionsIconSize, colorBorderSecondary } =
|
||||
token;
|
||||
return {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
listStyle: 'none',
|
||||
background: token.colorBgComponent,
|
||||
borderTop: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
||||
borderTop: `${token.controlLineWidth}px ${token.controlLineType} ${colorBorderSecondary}`,
|
||||
display: 'flex',
|
||||
...clearFix(),
|
||||
|
||||
@ -133,8 +125,8 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
'> span': {
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
minWidth: 32, // FIXME: hardcode in v4
|
||||
fontSize: token.fontSizeBase,
|
||||
minWidth: token.cardActionsIconSize * 2,
|
||||
fontSize: token.fontSize,
|
||||
lineHeight: token.lineHeight,
|
||||
cursor: 'pointer',
|
||||
|
||||
@ -147,7 +139,7 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
color: token.colorTextSecondary,
|
||||
lineHeight: '22px', // FIXME: hardcode in v4
|
||||
lineHeight: `${token.fontSize * token.lineHeight}px`,
|
||||
transition: `color ${token.motionDurationSlow}`,
|
||||
|
||||
'&:hover': {
|
||||
@ -157,12 +149,12 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
|
||||
[`> ${iconCls}`]: {
|
||||
fontSize: cardActionsIconSize,
|
||||
lineHeight: '22px', // FIXME: hardcode in v4
|
||||
lineHeight: `${cardActionsIconSize * token.lineHeight}px`,
|
||||
},
|
||||
},
|
||||
|
||||
'&:not(:last-child)': {
|
||||
borderInlineEnd: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
||||
borderInlineEnd: `${token.controlLineWidth}px ${token.controlLineType} ${colorBorderSecondary}`,
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -170,12 +162,12 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
|
||||
// ============================== Meta ==============================
|
||||
const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({
|
||||
margin: '-4px 0', // FIXME: hardcode in v4
|
||||
margin: `-${token.marginXXS}px 0`,
|
||||
display: 'flex',
|
||||
...clearFix(),
|
||||
|
||||
'&-avatar': {
|
||||
paddingInlineEnd: 16, // FIXME: hardcode in v4
|
||||
paddingInlineEnd: token.padding,
|
||||
},
|
||||
|
||||
'&-detail': {
|
||||
@ -189,7 +181,7 @@ const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({
|
||||
'&-title': {
|
||||
overflow: 'hidden',
|
||||
color: token.colorTextHeading,
|
||||
fontWeight: 500, // FIXME: hardcode in v4
|
||||
fontWeight: token.fontWeightStrong,
|
||||
fontSize: token.fontSizeLG,
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
@ -202,12 +194,12 @@ const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({
|
||||
|
||||
// ============================== Inner ==============================
|
||||
const genCardTypeInnerStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
const { componentCls, cardPaddingBase, backgroundColorLight, cardInnerHeadPadding } = token;
|
||||
const { componentCls, cardPaddingBase, colorBgComponentSecondary, cardInnerHeadPadding } = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-head`]: {
|
||||
padding: `0 ${cardPaddingBase}px`,
|
||||
background: backgroundColorLight,
|
||||
background: colorBgComponentSecondary,
|
||||
|
||||
'&-title': {
|
||||
padding: `${cardInnerHeadPadding}px 0`,
|
||||
@ -216,7 +208,7 @@ const genCardTypeInnerStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
},
|
||||
|
||||
[`${componentCls}-body`]: {
|
||||
padding: `16px ${cardPaddingBase}px`, // FIXME: hardcode in v4
|
||||
padding: `${token.padding}px ${cardPaddingBase}px`,
|
||||
},
|
||||
|
||||
[`${componentCls}-extra`]: {
|
||||
@ -242,12 +234,11 @@ const genCardLoadingStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
const {
|
||||
componentCls,
|
||||
cardHoverableHoverBorder,
|
||||
cardShadow,
|
||||
cardHeadHeight,
|
||||
cardHeadPadding,
|
||||
cardPaddingBase,
|
||||
borderColorSplit,
|
||||
colorBorderSecondary,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
@ -293,7 +284,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
},
|
||||
|
||||
[`${componentCls}-bordered`]: {
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${colorBorderSecondary}`,
|
||||
|
||||
[`${componentCls}-cover`]: {
|
||||
marginTop: -1,
|
||||
@ -307,7 +298,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
transition: `box-shadow ${token.motionDurationSlow}, border-color ${token.motionDurationSlow}`,
|
||||
|
||||
'&:hover': {
|
||||
borderColor: cardHoverableHoverBorder,
|
||||
borderColor: 'transparent',
|
||||
boxShadow: cardShadow,
|
||||
},
|
||||
},
|
||||
@ -319,10 +310,8 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
},
|
||||
|
||||
[`&:not(${componentCls}-loading) ${componentCls}-body`]: {
|
||||
margin: {
|
||||
_skip_check_: true,
|
||||
value: '-1px 0 0 -1px', // FIXME: hardcode in v4
|
||||
},
|
||||
marginBlockStart: -token.lineWidth,
|
||||
marginInlineStart: -token.lineWidth,
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
@ -352,16 +341,16 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
|
||||
// ============================== Size ==============================
|
||||
const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
const { componentCls, cardHeadHeightSM, cardPaddingBase, cardHeadPadding } = token;
|
||||
const { componentCls, cardPaddingBase, cardHeadPadding } = token;
|
||||
const cardPaddingBaseSM = cardPaddingBase / 2;
|
||||
const cardHeadPaddingSM = cardHeadPadding / 2;
|
||||
|
||||
return {
|
||||
[`${componentCls}-small`]: {
|
||||
[`> ${componentCls}-head`]: {
|
||||
minHeight: cardHeadHeightSM,
|
||||
minHeight: cardHeadPaddingSM * 2 + token.fontSize,
|
||||
padding: `0 ${cardPaddingBaseSM}px`,
|
||||
fontSize: token.fontSizeBase,
|
||||
fontSize: token.fontSize,
|
||||
|
||||
[`> ${componentCls}-head-wrapper`]: {
|
||||
[`> ${componentCls}-head-title`]: {
|
||||
@ -370,7 +359,7 @@ const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
|
||||
[`> ${componentCls}-extra`]: {
|
||||
padding: `${cardHeadPaddingSM}px 0`,
|
||||
fontSize: token.fontSizeBase,
|
||||
fontSize: token.fontSize,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -383,26 +372,22 @@ const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Card', (token, { rootPrefixCls }) => {
|
||||
const cardToken = mergeToken<CardToken>(token, {
|
||||
rootPrefixCls,
|
||||
export default genComponentStyleHook('Card', token => {
|
||||
const cardHeadPadding = token.padding;
|
||||
|
||||
cardHoverableHoverBorder: 'transparent', // FIXME: hardcode in v4
|
||||
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: hardcode in v4
|
||||
cardHeadHeight: 48, // FIXME: hardcode in v4
|
||||
cardHeadHeightSM: 30, // FIXME: hardcode in v4
|
||||
cardHeadPadding: 16, // FIXME: hardcode in v4
|
||||
cardPaddingBase: 24, // FIXME: hardcode in v4
|
||||
cardHeadTabsMarginBottom: -17, // FIXME: hardcode in v4
|
||||
cardInnerHeadPadding: 12, // FIXME: hardcode in v4
|
||||
cardActionsLiMargin: '12px 0', // FIXME: hardcode in v4
|
||||
cardActionsIconSize: 16, // FIXME: hardcode in v4
|
||||
borderColorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(), // FIXME: hardcode in v4
|
||||
backgroundColorLight: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(), // FIXME: hardcode in v4
|
||||
`, // FIXME: shadow
|
||||
cardHeadHeight: token.fontSizeLG + cardHeadPadding * 2,
|
||||
cardHeadPadding,
|
||||
cardPaddingBase: token.paddingLG,
|
||||
cardHeadTabsMarginBottom: -token.padding - token.lineWidth,
|
||||
cardInnerHeadPadding: token.paddingSM,
|
||||
cardActionsLiMargin: `${token.paddingSM}px 0`,
|
||||
cardActionsIconSize: token.fontSize,
|
||||
});
|
||||
|
||||
return [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user