From f4443cc6c2c698476f86626fe71542156a677186 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2=E6=9E=9C=E6=B1=81?= Date: Mon, 13 Nov 2023 16:39:00 +0800 Subject: [PATCH] feat: card support cssvar (#45836) --- components/card/Card.tsx | 9 ++-- components/card/style/cssVar.ts | 4 ++ components/card/style/index.ts | 78 +++++++++++++++++---------------- 3 files changed, 50 insertions(+), 41 deletions(-) create mode 100644 components/card/style/cssVar.ts diff --git a/components/card/Card.tsx b/components/card/Card.tsx index 5521e360bc2e..6b9c49d16314 100644 --- a/components/card/Card.tsx +++ b/components/card/Card.tsx @@ -1,7 +1,8 @@ +import * as React from 'react'; import classNames from 'classnames'; import type { Tab } from 'rc-tabs/lib/interface'; import omit from 'rc-util/lib/omit'; -import * as React from 'react'; + import { ConfigContext } from '../config-provider'; import useSize from '../config-provider/hooks/useSize'; import Skeleton from '../skeleton'; @@ -9,6 +10,7 @@ import type { TabsProps } from '../tabs'; import Tabs from '../tabs'; import Grid from './Grid'; import useStyle from './style'; +import useCSSVar from './style/cssVar'; export type CardType = 'inner'; export type CardSize = 'default' | 'small'; @@ -98,7 +100,8 @@ const Card = React.forwardRef((props, ref) => { }, [children]); const prefixCls = getPrefixCls('card', customizePrefixCls); - const [wrapSSR, hashId] = useStyle(prefixCls); + const [, hashId] = useStyle(prefixCls); + const wrapCSSVar = useCSSVar(prefixCls); const loadingBlock = ( @@ -171,7 +174,7 @@ const Card = React.forwardRef((props, ref) => { const mergedStyle: React.CSSProperties = { ...card?.style, ...style }; - return wrapSSR( + return wrapCSSVar(
{head} {coverDom} diff --git a/components/card/style/cssVar.ts b/components/card/style/cssVar.ts new file mode 100644 index 000000000000..a72b6e4d63b9 --- /dev/null +++ b/components/card/style/cssVar.ts @@ -0,0 +1,4 @@ +import { prepareComponentToken } from '.'; +import { genCSSVarRegister } from '../../theme/internal'; + +export default genCSSVarRegister('Card', prepareComponentToken); diff --git a/components/card/style/index.ts b/components/card/style/index.ts index 06bd2b29d626..9adb13cf1e23 100644 --- a/components/card/style/index.ts +++ b/components/card/style/index.ts @@ -1,7 +1,7 @@ -import type { CSSObject } from '@ant-design/cssinjs'; +import { unit, type CSSObject } from '@ant-design/cssinjs'; import { clearFix, resetComponent, textEllipsis } from '../../style'; -import type { FullToken, GenerateStyle } from '../../theme/internal'; +import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { @@ -72,13 +72,13 @@ const genCardHeadStyle: GenerateStyle = (token): CSSObject => { flexDirection: 'column', minHeight: headerHeight, marginBottom: -1, // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png - padding: `0 ${cardPaddingBase}px`, + padding: `0 ${unit(cardPaddingBase)}`, color: token.colorTextHeading, fontWeight: token.fontWeightStrong, fontSize: token.headerFontSize, background: token.headerBg, - borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`, - borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`, + borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorderSecondary}`, + borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0`, ...clearFix(), @@ -111,7 +111,7 @@ const genCardHeadStyle: GenerateStyle = (token): CSSObject => { fontSize: token.fontSize, '&-bar': { - borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`, + borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorderSecondary}`, }, }, }; @@ -126,11 +126,11 @@ const genCardGridStyle: GenerateStyle = (token): CSSObject => { border: 0, borderRadius: 0, boxShadow: ` - ${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; + ${unit(lineWidth)} 0 0 0 ${colorBorderSecondary}, + 0 ${unit(lineWidth)} 0 0 ${colorBorderSecondary}, + ${unit(lineWidth)} ${unit(lineWidth)} 0 0 ${colorBorderSecondary}, + ${unit(lineWidth)} 0 0 0 ${colorBorderSecondary} inset, + 0 ${unit(lineWidth)} 0 0 ${colorBorderSecondary} inset; `, transition: `all ${token.motionDurationMid}`, @@ -157,9 +157,9 @@ const genCardActionsStyle: GenerateStyle = (token): CSSObject => { padding: 0, listStyle: 'none', background: actionsBg, - borderTop: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`, + borderTop: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`, display: 'flex', - borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px `, + borderRadius: `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}`, ...clearFix(), '& > li': { @@ -170,7 +170,7 @@ const genCardActionsStyle: GenerateStyle = (token): CSSObject => { '> span': { position: 'relative', display: 'block', - minWidth: token.cardActionsIconSize * 2, + minWidth: token.calc(token.cardActionsIconSize).mul(2).equal(), fontSize: token.fontSize, lineHeight: token.lineHeight, cursor: 'pointer', @@ -184,7 +184,7 @@ const genCardActionsStyle: GenerateStyle = (token): CSSObject => { display: 'inline-block', width: '100%', color: token.colorTextDescription, - lineHeight: `${token.fontSize * token.lineHeight}px`, + lineHeight: unit(token.fontHeight), transition: `color ${token.motionDurationMid}`, '&:hover': { @@ -194,12 +194,12 @@ const genCardActionsStyle: GenerateStyle = (token): CSSObject => { [`> ${iconCls}`]: { fontSize: cardActionsIconSize, - lineHeight: `${cardActionsIconSize * token.lineHeight}px`, + lineHeight: unit(token.calc(cardActionsIconSize).mul(token.lineHeight).equal()), }, }, '&:not(:last-child)': { - borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`, + borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`, }, }, }; @@ -207,7 +207,7 @@ const genCardActionsStyle: GenerateStyle = (token): CSSObject => { // ============================== Meta ============================== const genCardMetaStyle: GenerateStyle = (token): CSSObject => ({ - margin: `-${token.marginXXS}px 0`, + margin: `${unit(token.calc(token.marginXXS).mul(-1).equal())} 0`, display: 'flex', ...clearFix(), @@ -242,7 +242,7 @@ const genCardTypeInnerStyle: GenerateStyle = (token): CSSObject => { return { [`${componentCls}-head`]: { - padding: `0 ${cardPaddingBase}px`, + padding: `0 ${unit(cardPaddingBase)}`, background: colorFillAlter, '&-title': { @@ -251,7 +251,7 @@ const genCardTypeInnerStyle: GenerateStyle = (token): CSSObject => { }, [`${componentCls}-body`]: { - padding: `${token.padding}px ${cardPaddingBase}px`, + padding: `${unit(token.padding)} ${unit(cardPaddingBase)}`, }, }; }; @@ -306,7 +306,7 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { [`${componentCls}-body`]: { padding: cardPaddingBase, - borderRadius: ` 0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px`, + borderRadius: ` 0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}`, ...clearFix(), }, @@ -319,7 +319,7 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { }, [`img, img + ${antCls}-image-mask`]: { - borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`, + borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0`, }, }, @@ -329,7 +329,7 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { }, [`${componentCls}-bordered`]: { - border: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`, + border: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`, [`${componentCls}-cover`]: { marginTop: -1, @@ -349,15 +349,15 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { }, [`${componentCls}-contain-grid`]: { - borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0 `, + borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0 `, [`${componentCls}-body`]: { display: 'flex', flexWrap: 'wrap', }, [`&:not(${componentCls}-loading) ${componentCls}-body`]: { - marginBlockStart: -token.lineWidth, - marginInlineStart: -token.lineWidth, + marginBlockStart: token.calc(token.lineWidth).mul(-1).equal(), + marginInlineStart: token.calc(token.lineWidth).mul(-1).equal(), padding: 0, }, }, @@ -389,7 +389,7 @@ const genCardSizeStyle: GenerateStyle = (token): CSSObject => { [`${componentCls}-small`]: { [`> ${componentCls}-head`]: { minHeight: headerHeightSM, - padding: `0 ${cardPaddingSM}px`, + padding: `0 ${unit(cardPaddingSM)}`, fontSize: headerFontSizeSM, [`> ${componentCls}-head-wrapper`]: { @@ -415,6 +415,18 @@ const genCardSizeStyle: GenerateStyle = (token): CSSObject => { }; }; +export const prepareComponentToken: GetDefaultToken<'Card'> = (token) => ({ + headerBg: 'transparent', + headerFontSize: token.fontSizeLG, + headerFontSizeSM: token.fontSize, + headerHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2, + headerHeightSM: token.fontSize * token.lineHeight + token.paddingXS * 2, + actionsBg: token.colorBgContainer, + actionsLiMargin: `${token.paddingSM}px 0`, + tabsMarginBottom: -token.padding - token.lineWidth, + extraColor: token.colorText, +}); + // ============================== Export ============================== export default genComponentStyleHook( 'Card', @@ -435,15 +447,5 @@ export default genComponentStyleHook( genCardSizeStyle(cardToken), ]; }, - (token) => ({ - headerBg: 'transparent', - headerFontSize: token.fontSizeLG, - headerFontSizeSM: token.fontSize, - headerHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2, - headerHeightSM: token.fontSize * token.lineHeight + token.paddingXS * 2, - actionsBg: token.colorBgContainer, - actionsLiMargin: `${token.paddingSM}px 0`, - tabsMarginBottom: -token.padding - token.lineWidth, - extraColor: token.colorText, - }), + prepareComponentToken, );