chore: full token of anchor (#35588)

* chore: full token of anchor

* chore: rename

components/_util/theme/interface.ts

@@ -230,6 +230,9 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
   gridSpaceXL: number;
   gridSpaceXXL: number;
 
+  // Line
+  lineWidthBold: number;
+
   // Motion
   motionDurationFast: string;
   motionDurationMid: string;

components/_util/theme/themes/default.ts

@@ -37,6 +37,7 @@ export function derivative(token: SeedToken): DerivativeToken {
     gridBaseStep,
     radiusBase,
     controlHeight,
+    lineWidth,
   } = token;
 
   const primaryColors = generate(colorPrimary);
@@ -94,6 +95,9 @@ export function derivative(token: SeedToken): DerivativeToken {
     gridSpaceXL: gridUnit * (gridBaseStep + 2),
     gridSpaceXXL: gridUnit * (gridBaseStep + 5),
 
+    // line
+    lineWidthBold: lineWidth + 1,
+
     // radius
     radiusSM: radiusBase / 2,
     radiusLG: radiusBase * 2,

components/anchor/style/index.tsx

@@ -4,68 +4,65 @@ import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/t
 import type { GenerateStyle, FullToken } from '../../_util/theme';
 
 export interface ComponentToken {}
+
 interface AnchorToken extends FullToken<'Anchor'> {
-  anchorLinkTop: number;
+  holderOffsetBlock: number;
-  anchorLinkLeft: number;
+  anchorPaddingBlock: number;
+  anchorPaddingBlockSecondary: number;
+  anchorPaddingInline: number;
+  anchorLineHeight: number;
+  anchorBallSize: number;
+  anchorTitleBlock: number;
 }
 
 // ============================== Shared ==============================
 const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
-  const { componentCls } = token;
+  const { componentCls, holderOffsetBlock, anchorBallSize, lineWidthBold } = token;
 
   return {
     [`${componentCls}-wrapper`]: {
-      // FIX ME
+      marginBlockStart: -holderOffsetBlock,
-      marginBlockStart: -4,
+      paddingBlockStart: holderOffsetBlock,
-      // FIX ME
-      paddingBlockStart: 4,
 
       // delete overflow: auto
       // overflow: 'auto',
 
-      // @anchor-bg
       backgroundColor: 'transparent',
 
       [componentCls]: {
         ...resetComponent(token),
         position: 'relative',
-        // FIX ME @anchor-border-width
+        paddingInlineStart: lineWidthBold,
-        paddingInlineStart: 2,
 
         [`${componentCls}-ink`]: {
           position: 'absolute',
-          // top: 0
           insetBlockStart: 0,
-          // left: 0
           insetInlineStart: 0,
           height: '100%',
 
           '&::before': {
             position: 'relative',
             display: 'block',
-            // FIX ME
+            width: lineWidthBold,
-            width: 2,
             height: '100%',
             margin: '0 auto',
-            // FIX ME @border-color-split
+            backgroundColor: token.colorBorderSecondary,
-            backgroundColor: 'rgba(0, 0, 0, 0.06)',
             content: '" "',
           },
         },
 
         [`${componentCls}-ink-ball`]: {
           position: 'absolute',
-          // left 50%
+          left: {
-          insetInlineStart: '50%',
+            _skip_check_: true,
+            value: '50%',
+          },
           display: 'none',
-          // FIX ME
+          width: anchorBallSize,
-          width: 8,
+          height: anchorBallSize,
-          // FIX ME
+          backgroundColor: token.colorBgComponent,
-          height: 8,
+          border: `${lineWidthBold}px solid ${token.colorPrimary}`,
-          // FIX '@component-background'
+          borderRadius: anchorBallSize,
-          backgroundColor: '#fff',
-          border: `2px solid ${token.colorPrimary}`,
-          borderRadius: 8,
           transform: 'translateX(-50%)',
           transition: `top ${token.motionDurationSlow} ease-in-out`,
 
@@ -75,21 +72,19 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
         },
 
         [`${componentCls}-link`]: {
-          // FIX ME @anchor-link-padding
+          paddingBlock: token.anchorPaddingBlock,
-          paddingBlock: token.anchorLinkTop,
+          paddingInline: `${token.anchorPaddingInline}px 0`,
-          paddingInline: `${token.anchorLinkLeft}px 0`,
+          lineHeight: token.anchorLineHeight,
-          lineHeight: '1.143',
 
           '&-title': {
             position: 'relative',
             display: 'block',
-            // FIX ME margin-bottom
+            marginBlockEnd: token.anchorTitleBlock,
-            marginBlockEnd: 6,
             overflow: 'hidden',
             color: token.colorText,
             whiteSpace: 'nowrap',
             textOverflow: 'ellipsis',
-            transition: `all ${token.motionDurationSlow}s`,
+            transition: `all ${token.motionDurationSlow}`,
 
             '&:only-child': {
               marginBlockEnd: 0,
@@ -102,7 +97,7 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
 
           // link link
           [`${componentCls}-link`]: {
-            paddingBlock: 5,
+            paddingBlock: token.anchorPaddingBlockSecondary,
           },
         },
       },
@@ -116,9 +111,25 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
 
 // ============================== Export ==============================
 export default genComponentStyleHook('Anchor', token => {
+  const { controlHeight, controlLineWidth, fontSize, lineHeight, fontSizeLG, padding, paddingXXS } =
+    token;
+  const linkHeight = controlHeight - 2 * controlLineWidth;
+  const anchorLineHeight = fontSizeLG / fontSize; // Anchor is special that use less height
+  const paddingBlock = Math.round(linkHeight - fontSizeLG) / 2;
+
+  // Still a magic number: 22 - 16
+  const titleBlock = Math.round(fontSize * lineHeight - fontSizeLG);
+
+  const paddingBlockSecondary = Math.round(linkHeight - paddingXXS - fontSizeLG) / 2;
+
   const anchorToken = mergeToken<AnchorToken>(token, {
-    anchorLinkTop: 7,
+    holderOffsetBlock: paddingXXS,
-    anchorLinkLeft: 16,
+    anchorPaddingBlock: paddingBlock,
+    anchorPaddingBlockSecondary: paddingBlockSecondary,
+    anchorPaddingInline: padding,
+    anchorLineHeight,
+    anchorTitleBlock: titleBlock,
+    anchorBallSize: fontSizeLG / 2,
   });
   return [genSharedAnchorStyle(anchorToken)];
 });

components/checkbox/style/index.tsx

@@ -108,7 +108,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
             display: 'table',
             width: (token.fontSizeLG / 14) * 5,
             height: (token.fontSizeLG / 14) * 8,
-            border: `2px solid ${token.colorBgComponent}`,
+            border: `${token.lineWidthBold}px solid ${token.colorBgComponent}`,
             borderTop: 0,
             borderInlineStart: 0,
             transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',

components/tree/style/index.tsx

@@ -49,7 +49,7 @@ const getDropIndicatorStyle = (prefixCls: string, token: DerivativeToken) => ({
       width: 8,
       height: 8,
       backgroundColor: 'transparent',
-      border: `2px solid ${token.colorPrimary}`,
+      border: `${token.lineWidthBold}px solid ${token.colorPrimary}`,
       borderRadius: '50%',
       content: '""',
     },