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

refactor: Card full token (#35514)

Browse Source 
* refactor: card full tokn

* refactor: card token

* fix: border color
This commit is contained in:
MadCcc 2022-05-13 16:38:33 +08:00 committed by GitHub
parent 640d4f55d3
commit 99139aa77d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -363,4 +363,5 @@ export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {
motionEaseOut: string; motionEaseOut: string;
colorPopupBg: string; colorPopupBg: string;
colorBorderSecondary: string;
} }

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

@ -154,6 +154,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)', motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
colorPopupBg: new TinyColor('#000').setAlpha(0.45).toRgbString(), colorPopupBg: new TinyColor('#000').setAlpha(0.45).toRgbString(),
colorBorderSecondary: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(),
}; };
return aliasToken; return aliasToken;

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

@ -6,20 +6,14 @@ import type { GenerateStyle, FullToken } from '../../_util/theme';
import { resetComponent, genComponentStyleHook, mergeToken, clearFix } from '../../_util/theme'; import { resetComponent, genComponentStyleHook, mergeToken, clearFix } from '../../_util/theme';
interface CardToken extends FullToken<'Card'> { interface CardToken extends FullToken<'Card'> {
rootPrefixCls: string;
cardHoverableHoverBorder: string;
cardShadow: string; cardShadow: string;
cardHeadHeight: number; cardHeadHeight: number;
cardHeadHeightSM: number;
cardHeadPadding: number; cardHeadPadding: number;
cardPaddingBase: number; cardPaddingBase: number;
cardHeadTabsMarginBottom: number; cardHeadTabsMarginBottom: number;
cardInnerHeadPadding: number; cardInnerHeadPadding: number;
cardActionsLiMargin: string; cardActionsLiMargin: string;
cardActionsIconSize: number; cardActionsIconSize: number;
cardSkeletonBg: string;
borderColorSplit: string;
backgroundColorLight: string;
} }
// ============================== Styles ============================== // ============================== Styles ==============================
@ -27,14 +21,12 @@ interface CardToken extends FullToken<'Card'> {
// ============================== Head ============================== // ============================== Head ==============================
const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => { const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
const { const {
rootPrefixCls, antCls,
componentCls, componentCls,
cardHoverableHoverBorder,
cardHeadHeight, cardHeadHeight,
cardHeadPadding, cardHeadPadding,
cardPaddingBase, cardPaddingBase,
cardHeadTabsMarginBottom, cardHeadTabsMarginBottom,
borderColorSplit,
} = token; } = token;
return { 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 marginBottom: -1, // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
padding: `0 ${cardPaddingBase}px`, padding: `0 ${cardPaddingBase}px`,
color: token.colorTextHeading, color: token.colorTextHeading,
fontWeight: 500, // FIXME: hardcode in v4 fontWeight: token.fontWeightStrong,
fontSize: token.fontSizeLG, fontSize: token.fontSizeLG,
background: cardHoverableHoverBorder, background: 'transparent',
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`, borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorderSecondary}`,
borderRadius: `${token.radiusBase}px ${token.radiusBase}px 0 0`, borderRadius: `${token.radiusBase}px ${token.radiusBase}px 0 0`,
...clearFix(), ...clearFix(),
@ -73,7 +65,7 @@ const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
}, },
}, },
[`.${rootPrefixCls}-tabs-top`]: { [`${antCls}-tabs-top`]: {
clear: 'both', clear: 'both',
marginBottom: cardHeadTabsMarginBottom, marginBottom: cardHeadTabsMarginBottom,
color: token.colorText, color: token.colorText,
@ -81,7 +73,7 @@ const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
fontSize: token.fontSizeBase, fontSize: token.fontSizeBase,
'&-bar': { '&-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 ============================== // ============================== Grid ==============================
const genCardGridStyle: GenerateStyle<CardToken> = (token): CSSObject => { const genCardGridStyle: GenerateStyle<CardToken> = (token): CSSObject => {
const { cardPaddingBase, borderColorSplit, cardShadow } = token; const { cardPaddingBase, colorBorderSecondary, cardShadow, lineWidth } = token;
return { return {
width: '33.33%', // FIXME: hardcode in v4 width: '33.33%',
padding: cardPaddingBase, padding: cardPaddingBase,
border: 0, border: 0,
borderRadius: 0, borderRadius: 0,
boxShadow: ` boxShadow: `
1px 0 0 0 ${borderColorSplit}, ${lineWidth}px 0 0 0 ${colorBorderSecondary},
0 1px 0 0 ${borderColorSplit}, 0 ${lineWidth}px 0 0 ${colorBorderSecondary},
1px 1px 0 0 ${borderColorSplit}, ${lineWidth}px ${lineWidth}px 0 0 ${colorBorderSecondary},
1px 0 0 0 ${borderColorSplit} inset, ${lineWidth}px 0 0 0 ${colorBorderSecondary} inset,
0 1px 0 0 ${borderColorSplit} inset; 0 ${lineWidth}px 0 0 ${colorBorderSecondary} inset;
transition: all ${token.motionDurationSlow} `,
`, // FIXME: hardcode in v4 transition: `all ${token.motionDurationSlow}`,
'&-hoverable:hover': { '&-hoverable:hover': {
position: 'relative', position: 'relative',
@ -114,14 +106,14 @@ const genCardGridStyle: GenerateStyle<CardToken> = (token): CSSObject => {
// ============================== Actions ============================== // ============================== Actions ==============================
const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => { const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
const { componentCls, iconCls, cardActionsLiMargin, cardActionsIconSize, borderColorSplit } = const { componentCls, iconCls, cardActionsLiMargin, cardActionsIconSize, colorBorderSecondary } =
token; token;
return { return {
margin: 0, margin: 0,
padding: 0, padding: 0,
listStyle: 'none', listStyle: 'none',
background: token.colorBgComponent, background: token.colorBgComponent,
borderTop: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`, borderTop: `${token.controlLineWidth}px ${token.controlLineType} ${colorBorderSecondary}`,
display: 'flex', display: 'flex',
...clearFix(), ...clearFix(),
@ -133,8 +125,8 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
'> span': { '> span': {
position: 'relative', position: 'relative',
display: 'block', display: 'block',
minWidth: 32, // FIXME: hardcode in v4 minWidth: token.cardActionsIconSize * 2,
fontSize: token.fontSizeBase, fontSize: token.fontSize,
lineHeight: token.lineHeight, lineHeight: token.lineHeight,
cursor: 'pointer', cursor: 'pointer',
@ -147,7 +139,7 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
display: 'inline-block', display: 'inline-block',
width: '100%', width: '100%',
color: token.colorTextSecondary, color: token.colorTextSecondary,
lineHeight: '22px', // FIXME: hardcode in v4 lineHeight: `${token.fontSize * token.lineHeight}px`,
transition: `color ${token.motionDurationSlow}`, transition: `color ${token.motionDurationSlow}`,
'&:hover': { '&:hover': {
@ -157,12 +149,12 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
[`> ${iconCls}`]: { [`> ${iconCls}`]: {
fontSize: cardActionsIconSize, fontSize: cardActionsIconSize,
lineHeight: '22px', // FIXME: hardcode in v4 lineHeight: `${cardActionsIconSize * token.lineHeight}px`,
}, },
}, },
'&:not(:last-child)': { '&: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 ============================== // ============================== Meta ==============================
const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({ const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({
margin: '-4px 0', // FIXME: hardcode in v4 margin: `-${token.marginXXS}px 0`,
display: 'flex', display: 'flex',
...clearFix(), ...clearFix(),
'&-avatar': { '&-avatar': {
paddingInlineEnd: 16, // FIXME: hardcode in v4 paddingInlineEnd: token.padding,
}, },
'&-detail': { '&-detail': {
@ -189,7 +181,7 @@ const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({
'&-title': { '&-title': {
overflow: 'hidden', overflow: 'hidden',
color: token.colorTextHeading, color: token.colorTextHeading,
fontWeight: 500, // FIXME: hardcode in v4 fontWeight: token.fontWeightStrong,
fontSize: token.fontSizeLG, fontSize: token.fontSizeLG,
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
@ -202,12 +194,12 @@ const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({
// ============================== Inner ============================== // ============================== Inner ==============================
const genCardTypeInnerStyle: GenerateStyle<CardToken> = (token): CSSObject => { const genCardTypeInnerStyle: GenerateStyle<CardToken> = (token): CSSObject => {
const { componentCls, cardPaddingBase, backgroundColorLight, cardInnerHeadPadding } = token; const { componentCls, cardPaddingBase, colorBgComponentSecondary, cardInnerHeadPadding } = token;
return { return {
[`${componentCls}-head`]: { [`${componentCls}-head`]: {
padding: `0 ${cardPaddingBase}px`, padding: `0 ${cardPaddingBase}px`,
background: backgroundColorLight, background: colorBgComponentSecondary,
'&-title': { '&-title': {
padding: `${cardInnerHeadPadding}px 0`, padding: `${cardInnerHeadPadding}px 0`,
@ -216,7 +208,7 @@ const genCardTypeInnerStyle: GenerateStyle<CardToken> = (token): CSSObject => {
}, },
[`${componentCls}-body`]: { [`${componentCls}-body`]: {
padding: `16px ${cardPaddingBase}px`, // FIXME: hardcode in v4 padding: `${token.padding}px ${cardPaddingBase}px`,
}, },
[`${componentCls}-extra`]: { [`${componentCls}-extra`]: {
@ -242,12 +234,11 @@ const genCardLoadingStyle: GenerateStyle<CardToken> = (token): CSSObject => {
const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => { const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
const { const {
componentCls, componentCls,
cardHoverableHoverBorder,
cardShadow, cardShadow,
cardHeadHeight, cardHeadHeight,
cardHeadPadding, cardHeadPadding,
cardPaddingBase, cardPaddingBase,
borderColorSplit, colorBorderSecondary,
} = token; } = token;
return { return {
@ -293,7 +284,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
}, },
[`${componentCls}-bordered`]: { [`${componentCls}-bordered`]: {
border: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`, border: `${token.controlLineWidth}px ${token.controlLineType} ${colorBorderSecondary}`,
[`${componentCls}-cover`]: { [`${componentCls}-cover`]: {
marginTop: -1, marginTop: -1,
@ -307,7 +298,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
transition: `box-shadow ${token.motionDurationSlow}, border-color ${token.motionDurationSlow}`, transition: `box-shadow ${token.motionDurationSlow}, border-color ${token.motionDurationSlow}`,
'&:hover': { '&:hover': {
borderColor: cardHoverableHoverBorder, borderColor: 'transparent',
boxShadow: cardShadow, boxShadow: cardShadow,
}, },
}, },
@ -319,10 +310,8 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
}, },
[`&:not(${componentCls}-loading) ${componentCls}-body`]: { [`&:not(${componentCls}-loading) ${componentCls}-body`]: {
margin: { marginBlockStart: -token.lineWidth,
_skip_check_: true, marginInlineStart: -token.lineWidth,
value: '-1px 0 0 -1px', // FIXME: hardcode in v4
},
padding: 0, padding: 0,
}, },
}, },
@ -352,16 +341,16 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
// ============================== Size ============================== // ============================== Size ==============================
const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => { const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
const { componentCls, cardHeadHeightSM, cardPaddingBase, cardHeadPadding } = token; const { componentCls, cardPaddingBase, cardHeadPadding } = token;
const cardPaddingBaseSM = cardPaddingBase / 2; const cardPaddingBaseSM = cardPaddingBase / 2;
const cardHeadPaddingSM = cardHeadPadding / 2; const cardHeadPaddingSM = cardHeadPadding / 2;
return { return {
[`${componentCls}-small`]: { [`${componentCls}-small`]: {
[`> ${componentCls}-head`]: { [`> ${componentCls}-head`]: {
minHeight: cardHeadHeightSM, minHeight: cardHeadPaddingSM * 2 + token.fontSize,
padding: `0 ${cardPaddingBaseSM}px`, padding: `0 ${cardPaddingBaseSM}px`,
fontSize: token.fontSizeBase, fontSize: token.fontSize,
[`> ${componentCls}-head-wrapper`]: { [`> ${componentCls}-head-wrapper`]: {
[`> ${componentCls}-head-title`]: { [`> ${componentCls}-head-title`]: {
@ -370,7 +359,7 @@ const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
[`> ${componentCls}-extra`]: { [`> ${componentCls}-extra`]: {
padding: `${cardHeadPaddingSM}px 0`, padding: `${cardHeadPaddingSM}px 0`,
fontSize: token.fontSizeBase, fontSize: token.fontSize,
}, },
}, },
}, },
@ -383,26 +372,22 @@ const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Card', (token, { rootPrefixCls }) => { export default genComponentStyleHook('Card', token => {
const cardToken = mergeToken<CardToken>(token, { const cardHeadPadding = token.padding;
rootPrefixCls,
cardHoverableHoverBorder: 'transparent', // FIXME: hardcode in v4 const cardToken = mergeToken<CardToken>(token, {
cardShadow: ` cardShadow: `
0 1px 2px -2px ${new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString()}, 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 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()} 0 5px 12px 4px ${new TinyColor('rgba(0, 0, 0, 0.09)').toRgbString()}
`, // FIXME: hardcode in v4 `, // FIXME: shadow
cardHeadHeight: 48, // FIXME: hardcode in v4 cardHeadHeight: token.fontSizeLG + cardHeadPadding * 2,
cardHeadHeightSM: 30, // FIXME: hardcode in v4 cardHeadPadding,
cardHeadPadding: 16, // FIXME: hardcode in v4 cardPaddingBase: token.paddingLG,
cardPaddingBase: 24, // FIXME: hardcode in v4 cardHeadTabsMarginBottom: -token.padding - token.lineWidth,
cardHeadTabsMarginBottom: -17, // FIXME: hardcode in v4 cardInnerHeadPadding: token.paddingSM,
cardInnerHeadPadding: 12, // FIXME: hardcode in v4 cardActionsLiMargin: `${token.paddingSM}px 0`,
cardActionsLiMargin: '12px 0', // FIXME: hardcode in v4 cardActionsIconSize: token.fontSize,
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
}); });
return [ return [