refactor: Timeline support css var (#45831)

components/timeline/Timeline.tsx

@@ -5,6 +5,8 @@ import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 // CSSINJS
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import type { TimelineItemProps } from './TimelineItem';
 import TimelineItem from './TimelineItem';
 import TimelineItemList from './TimelineItemList';
@@ -41,14 +43,16 @@ const Timeline: CompoundedComponent = (props) => {
   }
 
   // Style
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const wrapCSSVar = useCSSVar(rootCls);
 
   const mergedItems: TimelineItemProps[] = useItems(items, children);
 
-  return wrapSSR(
+  return wrapCSSVar(
     <TimelineItemList
       {...restProps}
-      className={classNames(timeline?.className, className)}
+      className={classNames(timeline?.className, className, rootCls)}
       style={{ ...timeline?.style, ...style }}
       prefixCls={prefixCls}
       direction={direction}

components/timeline/style/cssVar.ts

@@ -0,0 +1,4 @@
+import { genCSSVarRegister } from '../../theme/internal';
+import { prepareComponentToken } from '.';
+
+export default genCSSVarRegister('Timeline', prepareComponentToken);

components/timeline/style/index.ts

@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import { unit } from '@ant-design/cssinjs';
 import { resetComponent } 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 {
@@ -38,7 +39,7 @@ interface TimelineToken extends FullToken<'Timeline'> {
 }
 
 const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
-  const { componentCls } = token;
+  const { componentCls, calc } = token;
 
   return {
     [componentCls]: {
@@ -57,9 +58,9 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
         '&-tail': {
           position: 'absolute',
           insetBlockStart: token.itemHeadSize,
-          insetInlineStart: (token.itemHeadSize - token.tailWidth) / 2,
+          insetInlineStart: calc(calc(token.itemHeadSize).sub(token.tailWidth)).div(2).equal(),
-          height: `calc(100% - ${token.itemHeadSize}px)`,
+          height: `calc(100% - ${unit(token.itemHeadSize)})`,
-          borderInlineStart: `${token.tailWidth}px ${token.lineType} ${token.tailColor}`,
+          borderInlineStart: `${unit(token.tailWidth)} ${token.lineType} ${token.tailColor}`,
         },
 
         '&-pending': {
@@ -78,7 +79,7 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
           width: token.itemHeadSize,
           height: token.itemHeadSize,
           backgroundColor: token.dotBg,
-          border: `${token.dotBorderWidth}px ${token.lineType} transparent`,
+          border: `${unit(token.dotBorderWidth)} ${token.lineType} transparent`,
           borderRadius: '50%',
 
           '&-blue': {
@@ -104,8 +105,8 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
 
         '&-head-custom': {
           position: 'absolute',
-          insetBlockStart: token.itemHeadSize / 2,
+          insetBlockStart: calc(token.itemHeadSize).div(2).equal(),
-          insetInlineStart: token.itemHeadSize / 2,
+          insetInlineStart: calc(token.itemHeadSize).div(2).equal(),
           width: 'auto',
           height: 'auto',
           marginBlockStart: 0,
@@ -119,8 +120,11 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
 
         '&-content': {
           position: 'relative',
-          insetBlockStart: -(token.fontSize * token.lineHeight - token.fontSize) + token.lineWidth,
+          insetBlockStart: calc(calc(token.fontSize).mul(token.lineHeight).sub(token.fontSize))
-          marginInlineStart: token.margin + token.itemHeadSize,
+            .mul(-1)
+            .add(token.lineWidth)
+            .equal(),
+          marginInlineStart: calc(token.margin).add(token.itemHeadSize).equal(),
           marginInlineEnd: 0,
           marginBlockStart: 0,
           marginBlockEnd: 0,
@@ -133,7 +137,7 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
           },
 
           [`> ${componentCls}-item-content`]: {
-            minHeight: token.controlHeightLG * 1.2,
+            minHeight: calc(token.controlHeightLG).mul(1.2).equal(),
           },
         },
       },
@@ -147,24 +151,24 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
           },
 
           '&-head': {
-            marginInlineStart: `-${token.marginXXS}px`,
+            marginInlineStart: calc(token.marginXXS).mul(-1).equal(),
 
             '&-custom': {
-              marginInlineStart: token.tailWidth / 2,
+              marginInlineStart: calc(token.tailWidth).div(2).equal(),
             },
           },
 
           '&-left': {
             [`${componentCls}-item-content`]: {
-              insetInlineStart: `calc(50% - ${token.marginXXS}px)`,
+              insetInlineStart: `calc(50% - ${unit(token.marginXXS)})`,
-              width: `calc(50% - ${token.marginSM}px)`,
+              width: `calc(50% - ${unit(token.marginSM)})`,
               textAlign: 'start',
             },
           },
 
           '&-right': {
             [`${componentCls}-item-content`]: {
-              width: `calc(50% - ${token.marginSM}px)`,
+              width: `calc(50% - ${unit(token.marginSM)})`,
               margin: 0,
               textAlign: 'end',
             },
@@ -177,11 +181,13 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
           [`${componentCls}-item-tail,
             ${componentCls}-item-head,
             ${componentCls}-item-head-custom`]: {
-            insetInlineStart: `calc(100% - ${(token.itemHeadSize + token.tailWidth) / 2}px)`,
+            insetInlineStart: `calc(100% - ${unit(
+              calc(calc(token.itemHeadSize).add(token.tailWidth)).div(2).equal(),
+            )})`,
           },
 
           [`${componentCls}-item-content`]: {
-            width: `calc(100% - ${token.itemHeadSize + token.marginXS}px)`,
+            width: `calc(100% - ${unit(calc(token.itemHeadSize).add(token.marginXS).equal())})`,
           },
         },
       },
@@ -190,8 +196,8 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
         ${componentCls}-item-last
         ${componentCls}-item-tail`]: {
         display: 'block',
-        height: `calc(100% - ${token.margin}px)`,
+        height: `calc(100% - ${unit(token.margin)})`,
-        borderInlineStart: `${token.tailWidth}px dotted ${token.tailColor}`,
+        borderInlineStart: `${unit(token.tailWidth)} dotted ${token.tailColor}`,
       },
 
       [`&${componentCls}-reverse
@@ -204,27 +210,30 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
         [`${componentCls}-item-tail`]: {
           insetBlockStart: token.margin,
           display: 'block',
-          height: `calc(100% - ${token.margin}px)`,
+          height: `calc(100% - ${unit(token.margin)})`,
-          borderInlineStart: `${token.tailWidth}px dotted ${token.tailColor}`,
+          borderInlineStart: `${unit(token.tailWidth)} dotted ${token.tailColor}`,
         },
 
         [`${componentCls}-item-content`]: {
-          minHeight: token.controlHeightLG * 1.2,
+          minHeight: calc(token.controlHeightLG).mul(1.2).equal(),
         },
       },
 
       [`&${componentCls}-label`]: {
         [`${componentCls}-item-label`]: {
           position: 'absolute',
-          insetBlockStart: -(token.fontSize * token.lineHeight - token.fontSize) + token.tailWidth,
+          insetBlockStart: calc(calc(token.fontSize).mul(token.lineHeight).sub(token.fontSize))
-          width: `calc(50% - ${token.marginSM}px)`,
+            .mul(-1)
+            .add(token.tailWidth)
+            .equal(),
+          width: `calc(50% - ${unit(token.marginSM)})`,
           textAlign: 'end',
         },
 
         [`${componentCls}-item-right`]: {
           [`${componentCls}-item-label`]: {
-            insetInlineStart: `calc(50% + ${token.marginSM}px)`,
+            insetInlineStart: `calc(50% + ${unit(token.marginSM)})`,
-            width: `calc(50% - ${token.marginSM}px)`,
+            width: `calc(50% - ${unit(token.marginSM)})`,
             textAlign: 'start',
           },
         },
@@ -243,6 +252,14 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
 };
 
 // ============================== Export ==============================
+export const prepareComponentToken: GetDefaultToken<'Timeline'> = (token) => ({
+  tailColor: token.colorSplit,
+  tailWidth: token.lineWidthBold,
+  dotBorderWidth: token.wireframe ? token.lineWidthBold : token.lineWidth * 3,
+  dotBg: token.colorBgContainer,
+  itemPaddingBottom: token.padding * 1.25,
+});
+
 export default genComponentStyleHook(
   'Timeline',
   (token) => {
@@ -254,11 +271,5 @@ export default genComponentStyleHook(
 
     return [genTimelineStyle(timeLineToken)];
   },
-  (token) => ({
+  prepareComponentToken,
-    tailColor: token.colorSplit,
-    tailWidth: token.lineWidthBold,
-    dotBorderWidth: token.wireframe ? token.lineWidthBold : token.lineWidth * 3,
-    dotBg: token.colorBgContainer,
-    itemPaddingBottom: token.padding * 1.25,
-  }),
 );