refactor: card #6258

components/card/Card.tsx

@@ -1,8 +1,6 @@
 import type { VNodeTypes, PropType, VNode, ExtractPropTypes, CSSProperties } from 'vue';
 import { isVNode, defineComponent, renderSlot } from 'vue';
 import Tabs from '../tabs';
-import Row from '../row';
-import Col from '../col';
 import PropTypes from '../_util/vue-types';
 import { flattenChildren, isEmptyElement, filterEmptyWithUndefined } from '../_util/props-util';
 import type { SizeType } from '../config-provider';
@@ -10,6 +8,7 @@ import isPlainObject from 'lodash-es/isPlainObject';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import devWarning from '../vc-util/devWarning';
 import useStyle from './style';
+import Skeleton from '../skeleton';
 export interface CardTabListType {
   key: string;
   tab: any;
@@ -112,34 +111,10 @@ const Card = defineComponent({
         [`${pre}-type-${type}`]: !!type,
         [`${pre}-rtl`]: direction.value === 'rtl',
       };
-
-      const loadingBlockStyle =
-        bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? { padding: '24px' } : undefined;
-
-      const block = <div class={`${pre}-loading-block`} />;
       const loadingBlock = (
-        <div class={`${pre}-loading-content`} style={loadingBlockStyle}>
+        <Skeleton loading active paragraph={{ rows: 4 }} title={false}>
-          <Row gutter={8}>
+          {children}
-            <Col span={22}>{block}</Col>
+        </Skeleton>
-          </Row>
-          <Row gutter={8}>
-            <Col span={8}>{block}</Col>
-            <Col span={15}>{block}</Col>
-          </Row>
-          <Row gutter={8}>
-            <Col span={6}>{block}</Col>
-            <Col span={18}>{block}</Col>
-          </Row>
-          <Row gutter={8}>
-            <Col span={13}>{block}</Col>
-            <Col span={9}>{block}</Col>
-          </Row>
-          <Row gutter={8}>
-            <Col span={4}>{block}</Col>
-            <Col span={3}>{block}</Col>
-            <Col span={16}>{block}</Col>
-          </Row>
-        </div>
       );
 
       const hasActiveTabKey = activeTabKey !== undefined;
@@ -195,7 +170,7 @@ const Card = defineComponent({
         actions && actions.length ? <ul class={`${pre}-actions`}>{getAction(actions)}</ul> : null;
 
       return wrapSSR(
-        <div ref="cardContainerRef" {...attrs} class={classString}>
+        <div ref="cardContainerRef" {...attrs} class={[classString, attrs.class]}>
           {head}
           {coverDom}
           {children && children.length ? body : null}

components/card/Meta.tsx

@@ -1,14 +1,14 @@
 import type { ExtractPropTypes } from 'vue';
 import { defineComponent } from 'vue';
-import PropTypes from '../_util/vue-types';
 import { getPropsSlot } from '../_util/props-util';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
+import { vNodeType } from '../_util/type';
 
 export const cardMetaProps = () => ({
   prefixCls: String,
-  title: PropTypes.any,
+  title: vNodeType(),
-  description: PropTypes.any,
+  description: vNodeType(),
-  avatar: PropTypes.any,
+  avatar: vNodeType(),
 });
 export type CardGridProps = Partial<ExtractPropTypes<ReturnType<typeof cardMetaProps>>>;
 export default defineComponent({

components/card/index.en-US.md

@@ -2,7 +2,7 @@
 category: Components
 type: Data Display
 title: Card
-cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VXtCTp93KPAAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 Simple rectangular container.

components/card/index.zh-CN.md

@@ -3,7 +3,7 @@ category: Components
 type: 数据展示
 title: Card
 subtitle: 卡片
-cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VXtCTp93KPAAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 通用卡片容器

components/card/style/index.tsx

@@ -1,340 +1,362 @@
 import type { CSSObject } from '../../_util/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { resetComponent, clearFix } from '../../_style';
+import { clearFix, resetComponent, textEllipsis } from '../../_style';
 
-/** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {}
-interface CardToken extends FullToken<'Card'> {
-  cardHeadFontSize: string;
-  CardHeadPadding: string;
-  cardPaddingBase: string;
-  cardPaddingBaseSm: string;
-  cardHeadHeightSm: string;
-  cardHeadPaddingSm: string;
-  cardActionsLiMargin: string;
-  cardHeadTabsMarginBottom: string;
-  cardHeadHeight: string;
-  cardShadow: string;
-  cardHeadFontSizeSm: string;
-  cardHeadColor: string;
-  gradientMin: string;
-  gradientMax: string;
-  cardInnerHeadPadding: string;
-  transitionTime: string;
-}
-// ============================== Shared ==============================
-export const genCardSmallStyle = (token: CardToken): CSSObject => {
 
-  const {
+interface CardToken extends FullToken<'Card'> {
-    cardPaddingBaseSm,
+  cardHeadHeight: number;
-    cardHeadHeightSm,
+  cardHeadHeightSM: number;
-    cardHeadPaddingSm,
+  cardShadow: string;
-    cardHeadFontSizeSm,
+  cardHeadPadding: number;
-    componentCls,
+  cardPaddingSM: number;
-  } = token;
+  cardPaddingBase: number;
+  cardHeadTabsMarginBottom: number;
+  cardActionsLiMargin: string;
+  cardActionsIconSize: number;
+}
+
+// ============================== Styles ==============================
+
+// ============================== Head ==============================
+const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
+  const { antCls, componentCls, cardHeadHeight, cardPaddingBase, cardHeadTabsMarginBottom } = token;
 
   return {
-    [`> ${componentCls}-head`]: {
+    display: 'flex',
-      minHeight: `${cardHeadHeightSm}`,
+    justifyContent: 'center',
-      padding: `0 ${cardPaddingBaseSm}`,
+    flexDirection: 'column',
-      fontSize: `${cardHeadFontSizeSm}px`,
+    minHeight: cardHeadHeight,
-      [`> ${componentCls}-head-wrapper`]: {
+    marginBottom: -1, // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
-        [`> ${componentCls}-head-title`]: {
+    padding: `0 ${cardPaddingBase}px`,
-          padding: `${cardHeadPaddingSm}  0`,
+    color: token.colorTextHeading,
-        },
+    fontWeight: token.fontWeightStrong,
-        [`> ${componentCls}-head-extra`]: {
+    fontSize: token.fontSizeLG,
-          padding: `${cardHeadPaddingSm}  0`,
+    background: 'transparent',
-          fontSize: `${cardHeadFontSizeSm}px`,
+    borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`,
-        },
+    borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
+
+    ...clearFix(),
+
+    '&-wrapper': {
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+    },
+
+    '&-title': {
+      display: 'inline-block',
+      flex: 1,
+      ...textEllipsis,
+
+      [`
+          > ${componentCls}-typography,
+          > ${componentCls}-typography-edit-content
+        `]: {
+        insetInlineStart: 0,
+        marginTop: 0,
+        marginBottom: 0,
       },
     },
-    [`> ${componentCls}-body`]: {
+
-      padding: `${cardPaddingBaseSm}`,
+    [`${antCls}-tabs-top`]: {
+      clear: 'both',
+      marginBottom: cardHeadTabsMarginBottom,
+      color: token.colorText,
+      fontWeight: 'normal',
+      fontSize: token.fontSize,
+
+      '&-bar': {
+        borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`,
+      },
     },
   };
 };
 
-const genSharedCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
+// ============================== Grid ==============================
+const genCardGridStyle: GenerateStyle<CardToken> = (token): CSSObject => {
+  const { cardPaddingBase, colorBorderSecondary, cardShadow, lineWidth } = token;
+  return {
+    width: '33.33%',
+    padding: cardPaddingBase,
+    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;
+    `,
+    transition: `all ${token.motionDurationMid}`,
+
+    '&-hoverable:hover': {
+      position: 'relative',
+      zIndex: 1,
+      boxShadow: cardShadow,
+    },
+  };
+};
+
+// ============================== Actions ==============================
+const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
+  const { componentCls, iconCls, cardActionsLiMargin, cardActionsIconSize, colorBorderSecondary } =
+    token;
+  return {
+    margin: 0,
+    padding: 0,
+    listStyle: 'none',
+    background: token.colorBgContainer,
+    borderTop: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`,
+    display: 'flex',
+    borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px `,
+    ...clearFix(),
+
+    '& > li': {
+      margin: cardActionsLiMargin,
+      color: token.colorTextDescription,
+      textAlign: 'center',
+
+      '> span': {
+        position: 'relative',
+        display: 'block',
+        minWidth: token.cardActionsIconSize * 2,
+        fontSize: token.fontSize,
+        lineHeight: token.lineHeight,
+        cursor: 'pointer',
+
+        '&:hover': {
+          color: token.colorPrimary,
+          transition: `color ${token.motionDurationMid}`,
+        },
+
+        [`a:not(${componentCls}-btn), > ${iconCls}`]: {
+          display: 'inline-block',
+          width: '100%',
+          color: token.colorTextDescription,
+          lineHeight: `${token.fontSize * token.lineHeight}px`,
+          transition: `color ${token.motionDurationMid}`,
+
+          '&:hover': {
+            color: token.colorPrimary,
+          },
+        },
+
+        [`> ${iconCls}`]: {
+          fontSize: cardActionsIconSize,
+          lineHeight: `${cardActionsIconSize * token.lineHeight}px`,
+        },
+      },
+
+      '&:not(:last-child)': {
+        borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`,
+      },
+    },
+  };
+};
+
+// ============================== Meta ==============================
+const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({
+  margin: `-${token.marginXXS}px 0`,
+  display: 'flex',
+  ...clearFix(),
+
+  '&-avatar': {
+    paddingInlineEnd: token.padding,
+  },
+
+  '&-detail': {
+    overflow: 'hidden',
+    flex: 1,
+
+    '> div:not(:last-child)': {
+      marginBottom: token.marginXS,
+    },
+  },
+
+  '&-title': {
+    color: token.colorTextHeading,
+    fontWeight: token.fontWeightStrong,
+    fontSize: token.fontSizeLG,
+    ...textEllipsis,
+  },
+
+  '&-description': {
+    color: token.colorTextDescription,
+  },
+});
+
+// ============================== Inner ==============================
+const genCardTypeInnerStyle: GenerateStyle<CardToken> = (token): CSSObject => {
+  const { componentCls, cardPaddingBase, colorFillAlter } = token;
+
+  return {
+    [`${componentCls}-head`]: {
+      padding: `0 ${cardPaddingBase}px`,
+      background: colorFillAlter,
+
+      '&-title': {
+        fontSize: token.fontSize,
+      },
+    },
+
+    [`${componentCls}-body`]: {
+      padding: `${token.padding}px ${cardPaddingBase}px`,
+    },
+  };
+};
+
+// ============================== Loading ==============================
+const genCardLoadingStyle: GenerateStyle<CardToken> = (token): CSSObject => {
+  const { componentCls } = token;
+
+  return {
+    overflow: 'hidden',
+
+    [`${componentCls}-body`]: {
+      userSelect: 'none',
+    },
+  };
+};
+
+// ============================== Basic ==============================
+const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
   const {
-    cardHeadFontSize,
-    CardHeadPadding,
-    cardPaddingBase,
-    cardHeadPaddingSm,
-    cardActionsLiMargin,
-    cardHeadTabsMarginBottom,
-    cardHeadHeight,
     componentCls,
-    cardHeadColor,
     cardShadow,
-    transitionTime,
+    cardHeadPadding,
-    antCls
+    colorBorderSecondary,
+    boxShadow,
+    cardPaddingBase,
   } = token;
+
   return {
     [componentCls]: {
       ...resetComponent(token),
-      position: `relative`,
-      background: `${token.colorBgBase}`,
-      borderRadius: `${token.borderRadiusXS}px`,
-      '&-bordered': {
-        border: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`,
-      },
-     [`&${componentCls}-small`]: {
-        ...genCardSmallStyle(token),
-      },
-      [`&-rtl`]: {
-        direction: 'rtl',
-      },
-      [`&-hoverable`]: {
-        cursor: 'pointer',
-        transition: ` box-shadow  ${transitionTime}, border-color ${transitionTime}`,
-        '&:hover': {
-          borderColor: `${token.colorBgBase}`,
-          boxShadow: `${cardShadow}`,
-        },
-      },
-      [`${componentCls}-head`]: {
-        minHeight: `${cardHeadHeight}`,
-        marginBottom: `-1px`,
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        color: `${cardHeadColor}`,
-        textOverflow: 'ellipsis',
-        padding: ` 0 ${token.cardPaddingBase} `,
-        fontWeight: 500,
-        fontSize: `${cardHeadFontSize}px`,
-        background: `transparent`,
-        borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`,
-        ...clearFix(),
-        '&-wrapper': {
-          display: 'flex',
-          alignItems: 'center',
-        },
-        '&-title': {
-          display: 'inline-block',
-          flex: 1,
-          padding: `${CardHeadPadding} 0`,
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
-          [`> ${antCls}-typography  ${antCls}-typography-edit-content `]: {
-            left: 0,
-            marginTop: 0,
-            marginBottom: 0,
-          },
-        },
 
-        [`${antCls}-tabs-top`]: {
+      position: 'relative',
-          clear: 'both',
+      background: token.colorBgContainer,
-          marginBottom: `${cardHeadTabsMarginBottom}`,
+      borderRadius: token.borderRadiusLG,
-          color: `${token.colorText}`,
+
-          fontWeight: 400,
+      [`&:not(${componentCls}-bordered)`]: {
-          fontSize: `${token.fontSize}`,
+        boxShadow,
-          '&-bar': {
-            borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`,
-          },
-        },
       },
+
+      [`${componentCls}-head`]: genCardHeadStyle(token),
+
       [`${componentCls}-extra`]: {
-        float: 'right',
         // https://stackoverflow.com/a/22429853/3040605
-        marginLeft: 'auto',
+        marginInlineStart: 'auto',
-        padding: `${CardHeadPadding} 0`,
+        color: '',
-        color: `${token.colorText}`,
+        fontWeight: 'normal',
-        fontWeight: 400,
+        fontSize: token.fontSize,
-        fontSize: `${token.fontSize}`,
-        [`${componentCls}-prefix-rtl &`]: {
-          marginRight: 'auto',
-          marginLeft: 0,
-        },
       },
+
       [`${componentCls}-body`]: {
-        padding: `${cardPaddingBase}`,
+        padding: cardPaddingBase,
+        borderRadius: ` 0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px`,
         ...clearFix(),
       },
-      [`${componentCls}-contain-grid:not(&-loading)  ${componentCls}-body`]: {
-        margin: ' -1px 0 0 -1px',
-        padding: 0,
-      },
-      [`${componentCls}-grid`]: {
-        float: 'left',
-        width: '33.33%',
-        padding: `${cardPaddingBase}`,
-        border: 'none',
-        borderRadius: 0,
-        boxShadow: `1px 0 0 0 ${token.colorSplit}, 0 1px 0 0 ${token.colorSplit},
-          1px 1px 0 0 ${token.colorSplit}, 1px 0 0 0 ${token.colorSplit} inset,
-          0 1px 0 0 ${token.colorSplit} inset`,
-        transition: `all ${transitionTime}`,
-        [`${componentCls}-cls-rtl &`]: {
-          float: 'right',
-        },
 
-        '&-hoverable': {
+      [`${componentCls}-grid`]: genCardGridStyle(token),
-          '&:hover': {
+
-            position: 'relative',
-            zIndex: `${token.zIndexBase}`,
-            boxShadow: `${cardShadow}`,
-          },
-        },
-      },
-      [` ${componentCls}-contain-tabs > ${componentCls}-head ${componentCls}-head-title`]: {
-        minHeight: ` ${cardHeadHeight}- ${cardPaddingBase}`,
-        paddingBottom: 0,
-      },
-      [` ${componentCls}-contain-tabs > ${componentCls}-head ${componentCls}-extra`]: {
-        paddingBottom: 0,
-      },
-      [` ${componentCls}-bordered > ${componentCls}-cover `]: {
-        marginTop: '-1px',
-        marginRight: '-1px',
-        marginLeft: '-1px',
-      },
       [`${componentCls}-cover`]: {
-        ' > *': {
+        '> *': {
           display: 'block',
           width: '100%',
         },
 
         img: {
-          borderRadius: `${token.borderRadiusXS}px ${token.borderRadiusXS}px 0 0 `,
+          borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
         },
       },
 
-      [`${componentCls}-actions`]: {
+      [`${componentCls}-actions`]: genCardActionsStyle(token),
-        margin: 0,
+
+      [`${componentCls}-meta`]: genCardMetaStyle(token),
+    },
+
+    [`${componentCls}-bordered`]: {
+      border: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`,
+
+      [`${componentCls}-cover`]: {
+        marginTop: -1,
+        marginInlineStart: -1,
+        marginInlineEnd: -1,
+      },
+    },
+
+    [`${componentCls}-hoverable`]: {
+      cursor: 'pointer',
+      transition: `box-shadow ${token.motionDurationMid}, border-color ${token.motionDurationMid}`,
+
+      '&:hover': {
+        borderColor: 'transparent',
+        boxShadow: cardShadow,
+      },
+    },
+
+    [`${componentCls}-contain-grid`]: {
+      [`${componentCls}-body`]: {
+        display: 'flex',
+        flexWrap: 'wrap',
+      },
+
+      [`&:not(${componentCls}-loading) ${componentCls}-body`]: {
+        marginBlockStart: -token.lineWidth,
+        marginInlineStart: -token.lineWidth,
         padding: 0,
-        listStyle: 'none',
+      },
-        background: `${token.colorBgBase}`,
+    },
-        borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`,
-        ...clearFix(),
 
-        '& > li': {
+    [`${componentCls}-contain-tabs`]: {
-          float: 'left',
+      [`> ${componentCls}-head`]: {
-          margin: `${cardActionsLiMargin} `,
+        [`${componentCls}-head-title, ${componentCls}-extra`]: {
-          color: `${token.colorTextSecondary}`,
+          paddingTop: cardHeadPadding,
-          textAlign: 'center',
+        },
-          [` ${componentCls}-rtl &`]: {
+      },
-            float: 'right',
+    },
-          },
 
-          ' > span': {
+    [`${componentCls}-type-inner`]: genCardTypeInnerStyle(token),
-            position: 'relative',
-            display: 'block',
-            minWidth: ' 32px',
-            fontSize: `${token.fontSize}px`,
-            lineHeight: `${token.lineHeight}`,
-            cursor: 'pointer',
-            '&:hover': {
-              color: ` ${token.colorPrimary}`,
-              transition: `color ${transitionTime}`,
-            },
 
-            [`a:not(${antCls}-btn), >${token.iconCls}-css-prefix}`]: {
+    [`${componentCls}-loading`]: genCardLoadingStyle(token),
-              display: ' inline-block',
-              width: '100%',
-              color: `${token.colorTextSecondary}`,
-              lineHeight: ' 22px',
-              transition: `color ${transitionTime}`,
 
-              '&:hover': {
+    [`${componentCls}-rtl`]: {
-                color: `${token.colorPrimary}`,
+      direction: 'rtl',
-              },
+    },
-            },
+  };
+};
 
-            [`>${token.iconCls}`]: {
+// ============================== Size ==============================
-              fontSize: `${token.fontSizeIcon}`,
+const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
-              lineHeight: '22px',
+  const { componentCls, cardPaddingSM, cardHeadHeightSM } = token;
-            },
-          },
 
-          [`li:not(:last-child)`]: {
+  return {
-            borderRight: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`,
+    [`${componentCls}-small`]: {
-            [`${componentCls}-rtl &`]: {
+      [`> ${componentCls}-head`]: {
-              borderRight: 'none',
+        minHeight: cardHeadHeightSM,
-              borderLeft: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`,
+        padding: `0 ${cardPaddingSM}px`,
-            },
+        fontSize: token.fontSize,
+
+        [`> ${componentCls}-head-wrapper`]: {
+          [`> ${componentCls}-extra`]: {
+            fontSize: token.fontSize,
           },
         },
       },
-      [`${componentCls}-type-inner ${componentCls}-head`]: {
-        padding: `0 ${cardPaddingBase}`,
-        background: `${token.colorBgBase}`,
-        ' &-title': {
-          padding: `${cardHeadPaddingSm} 0`,
-          fontSize: `${token.fontSize}px`,
-        },
-      },
-      [`${componentCls}-type-inner ${componentCls}-body`]: {
-        padding: `16px ${cardPaddingBase}`,
-      },
-      ' &-type-inner &-extra': {
-        padding: `${token.cardInnerHeadPadding} + 1.5px 0`,
-      },
-      [`${componentCls}-meta`]: {
-        margin: ' -4px 0',
-        ...clearFix(),
 
-        '&-avatar': {
+      [`> ${componentCls}-body`]: {
-          float: 'left',
+        padding: cardPaddingSM,
-          paddingRight: '16px',
-
-          [` ${componentCls}-rtl &`]: {
-            float: 'right',
-            paddingRight: 0,
-            paddingLeft: ' 16px',
-          },
-        },
-
-        '&-detail ': {
-          overflow: 'hidden',
-          '> div:not(:last-child)': {
-            marginBottom: `${token['magenta-8']}`,
-          },
-        },
-
-        '&-title': {
-          overflow: 'hidden',
-          color: `${cardHeadColor}`,
-          fontWeight: '500',
-          fontSize: `${token.fontSizeLG}px`,
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
-        },
-
-        ' &-description': {
-          color: `${token.colorTextSecondary}`,
-        },
       },
-      [` ${componentCls}-loading`]: {
+    },
-        overflow: 'hidden',
+    [`${componentCls}-small${componentCls}-contain-tabs`]: {
-      },
+      [`> ${componentCls}-head`]: {
-      [` ${componentCls}-loading ${componentCls}-body`]: {
+        [`${componentCls}-head-title, ${componentCls}-extra`]: {
-        userSelect: 'none',
+          minHeight: cardHeadHeightSM,
-      },
+          paddingTop: 0,
-
+          display: 'flex',
-      [` ${componentCls}-loading-content`]: {
+          alignItems: 'center',
-        p: {
-          margin: 0,
-        },
-      },
-      [` ${componentCls}-loading-block`]: {
-        height: '14px',
-        margin: ' 4px 0',
-        background: `linear-gradient(90deg,${token.gradientMin},${token.gradientMax}, ${token.gradientMin})`,
-        backgroundSize: '600% 600%',
-        borderRadius: `${token.borderRadiusXS}px`,
-        animationName: 'card-loading',
-        animationDuration: '1.4s',
-        animationTimingFunction: 'ease',
-        animationIterationCount: 'infinite',
-      },
-      '@keyframes card-loading': {
-        '0%,100% ': {
-          backgroundPosition: '0 50%',
-        },
-        '50%': {
-          backgroundPosition: '100% 50%',
         },
       },
     },
@@ -342,29 +364,24 @@ const genSharedCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook(
+export default genComponentStyleHook('Card', token => {
-  'Card',
+  const cardToken = mergeToken<CardToken>(token, {
-  token => {
+    cardShadow: token.boxShadowCard,
-    const cardToken = mergeToken<CardToken>(token, {
+    cardHeadHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2,
-      cardPaddingBase: '16px',
+    cardHeadHeightSM: token.fontSize * token.lineHeight + token.paddingXS * 2,
-      cardHeadHeight: ' 36px',
+    cardHeadPadding: token.padding,
-      cardHeadFontSize: `${token.fontSizeHeading5}`,
+    cardPaddingBase: token.paddingLG,
-      cardHeadFontSizeSm: `${token.fontSize}`,
+    cardHeadTabsMarginBottom: -token.padding - token.lineWidth,
-      CardHeadPadding: '8.5px',
+    cardActionsLiMargin: `${token.paddingSM}px 0`,
-      cardPaddingBaseSm: '12px',
+    cardActionsIconSize: token.fontSize,
-      cardHeadHeightSm: '30px',
+    cardPaddingSM: 12, // Fixed padding.
-      cardHeadPaddingSm: '6px',
+  });
-      cardActionsLiMargin: '12px 0',
+
-      cardHeadTabsMarginBottom: '-17px',
+  return [
-      cardShadow: `0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
+    // Style
-      0 5px 12px 4px rgba(0, 0, 0, 0.09)`,
+    genCardStyle(cardToken),
-      cardHeadColor: 'rgba(0,0,0,.85)',
+
-      gradientMin: 'rgba(207,216,220,.2)',
+    // Size
-      gradientMax: 'rgba(207,216,220,.4)',
+    genCardSizeStyle(cardToken),
-      cardInnerHeadPadding: '12px',
+  ];
-      transitionTime: '0.3s',
+});
-    });
-    return [genSharedCardStyle(cardToken)];
-  },
-  {},
-);