refactor: Align with token (#34713)

* chore: Divider full token

* chore: typography with tokn

* chore: select with token

* chore: tree with token

* chore: select style

* chore: select style

* chore: clean up

components/_util/theme/interface.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import type { ComponentToken as ButtonComponentToken } from '../../button/style';
+import type { ComponentToken as DividerComponentToken } from '../../divider/style';
+import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
 
 export const PresetColors = [
   'blue',
@@ -32,6 +34,8 @@ export interface OverrideToken {
 
   // Customize component
   button?: ButtonComponentToken;
+  divider?: DividerComponentToken;
+  typography?: TypographyComponentToken;
 }
 
 /** Final token which contains the components level override */
@@ -196,6 +200,9 @@ export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {
   fontSizeHeading4: number;
   fontSizeHeading5: number;
 
+  /** For heading like h1, h2, h3 or option selected item */
+  fontWeightStrong: number;
+
   // LineHeight
   lineHeight: number;
   lineHeightLG: number;

components/_util/theme/util/alias.ts

@@ -79,8 +79,9 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     controlLineType: 'solid',
     controlRadius: mergedToken.radiusBase,
     colorBorder: new TinyColor({ h: 0, s: 0, v: 85 }).toHexString(),
-    colorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(),
+    colorSplit: 'rgba(0, 0, 0, 0.06)',
     controlItemBgActive: primaryColors[0],
+    fontWeightStrong: 600,
 
     // 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥
     // FIXME: Handle this when derivative is ready
@@ -97,21 +98,21 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     linkHoverDecoration: 'none',
     linkFocusDecoration: 'none',
 
-    controlPaddingHorizontal: 16,
+    controlPaddingHorizontal: 12,
-    controlPaddingHorizontalSM: 12,
+    controlPaddingHorizontalSM: 8,
 
     padding: 16,
     margin: 16,
 
-    paddingXXS: 2,
+    paddingXXS: 4,
-    paddingXS: 4,
+    paddingXS: 8,
-    paddingSM: 8,
+    paddingSM: 12,
-    paddingLG: 32,
+    paddingLG: 24,
 
-    marginXXS: 2,
+    marginXXS: 4,
-    marginXS: 4,
+    marginXS: 8,
-    marginSM: 8,
+    marginSM: 12,
-    marginLG: 32,
+    marginLG: 24,
 
     boxShadow: `
       0 3px 6px -4px rgba(0, 0, 0, 0.12),

components/_util/theme/util/index.tsx

@@ -17,7 +17,8 @@ export const resetComponent = (token: DerivativeToken): CSSObject => ({
 });
 
 export const resetIcon = (): CSSObject => ({
-  display: 'inline-block',
+  display: 'inline-flex',
+  alignItems: 'center',
   color: 'inherit',
   fontStyle: 'normal',
   lineHeight: 0,

components/_util/theme/util/roundedArrow.tsx

@@ -2,11 +2,7 @@
 import { CSSObject } from '@ant-design/cssinjs';
 import seedToken from '../themes/default';
 
-export const roundedArrow = (
+export const roundedArrow = (width: number, outerRadius: number, bgColor: string): CSSObject => {
-  width: number,
-  outerRadius: number,
-  bgColor: string,
-): CSSObject => {
   const cornerHeight = outerRadius * (1 - 1 / Math.sqrt(2));
   const { radiusBase } = seedToken;
 
@@ -33,9 +29,11 @@ export const roundedArrow = (
       insetInlineStart: -width,
       width: width * 3,
       height: width * 3,
-      background: `linear-gradient(to left, ${bgColor} 50%, ${bgColor} 50%) no-repeat ${Math.ceil(-width + 1)}px ${Math.ceil(-width + 1)}px`,
+      background: `linear-gradient(to left, ${bgColor} 50%, ${bgColor} 50%) no-repeat ${Math.ceil(
+        -width + 1,
+      )}px ${Math.ceil(-width + 1)}px`,
       content: '""',
       clipPath: `path('M ${ax} ${ay} A ${outerRadius} ${outerRadius} 0 0 1 ${bx} ${by} L ${cx} ${cy} A ${radiusBase} ${radiusBase} 0 0 0 ${dx} ${dy} L ${ex} ${ey} A ${outerRadius} ${outerRadius} 0 0 1 ${fx} ${fy} Z')`,
     },
   };
-}
+};

components/cascader/style/index.tsx

@@ -123,7 +123,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
 
                 [`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
                   [`&, &:hover`]: {
-                    fontWeight: 600, // FIXME: hardcode
+                    fontWeight: token.fontWeightStrong,
                     backgroundColor: token.controlItemBgActive,
                   },
                 },

components/checkbox/style/index.tsx

@@ -184,7 +184,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
           '&:after': {
             opacity: 1,
             transform: 'rotate(45deg) scale(1) translate(-50%,-50%)',
-            transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack} 0.1s`,
+            transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack} ${token.motionDurationFast}`,
           },
         },
 

components/divider/style/index.tsx

@@ -9,14 +9,14 @@ import {
   GenerateStyle,
 } from '../../_util/theme';
 
-interface DividerToken extends DerivativeToken {
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+  sizePaddingEdgeHorizontal: number;
+}
+
+interface DividerToken extends DerivativeToken, ComponentToken {
   dividerCls: string;
 
-  dividerBorderColor: string;
-
-  dividerBorderWidth: number;
-
-  dividerNotDefaultTextPadding: number;
   dividerVerticalGutterMargin: number;
   dividerHorizontalWithTextGutterMargin: number;
   dividerHorizontalGutterMargin: number;
@@ -24,12 +24,12 @@ interface DividerToken extends DerivativeToken {
 
 // ============================== Shared ==============================
 const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
-  const { dividerCls } = token;
+  const { dividerCls, sizePaddingEdgeHorizontal, colorSplit, controlLineWidth } = token;
 
   return {
     [dividerCls]: {
       ...resetComponent(token),
-      borderBlockStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`,
+      borderBlockStart: `${controlLineWidth}px solid ${colorSplit}`,
 
       // vertical
       '&-vertical': {
@@ -40,7 +40,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
         margin: `0 ${token.dividerVerticalGutterMargin}px`,
         verticalAlign: 'middle',
         borderTop: 0,
-        borderInlineStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`,
+        borderInlineStart: `${controlLineWidth}px solid ${colorSplit}`,
       },
 
       '&-horizontal': {
@@ -59,13 +59,13 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
         fontSize: token.fontSizeLG,
         whiteSpace: 'nowrap',
         textAlign: 'center',
-        borderBlockStart: `0 ${token.dividerBorderColor}`,
+        borderBlockStart: `0 ${colorSplit}`,
 
         '&::before, &::after': {
           position: 'relative',
           top: '50%',
           width: '50%',
-          borderBlockStart: `${token.dividerBorderWidth}px solid transparent`,
+          borderBlockStart: `${controlLineWidth}px solid transparent`,
           // Chrome not accept `inherit` in `border-top`
           borderBlockStartColor: 'inherit',
           borderBlockEnd: 0,
@@ -105,10 +105,10 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
 
       '&-dashed': {
         background: 'none',
-        borderColor: token.dividerBorderColor,
+        borderColor: colorSplit,
         borderStyle: 'dashed',
         borderWidth: 0,
-        borderBlockStart: `${token.dividerBorderWidth}px`,
+        borderBlockStart: `${controlLineWidth}px`,
       },
 
       '&-horizontal&-with-text&-dashed': {
@@ -118,7 +118,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
       },
 
       '&-vertical&-dashed': {
-        borderWidth: `0 0 0 ${token.dividerBorderWidth}px`,
+        borderWidth: `0 0 0 ${controlLineWidth}px`,
       },
 
       '&-plain&-with-text': {
@@ -136,8 +136,8 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
           width: '100%',
         },
 
-        '.ant-divider-inner-text': {
+        [`${dividerCls}-inner-text`]: {
-          paddingInlineStart: `${token.dividerNotDefaultTextPadding}px`,
+          paddingInlineStart: sizePaddingEdgeHorizontal,
         },
       },
 
@@ -150,8 +150,8 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
           width: 0,
         },
 
-        '.ant-divider-inner-text': {
+        [`${dividerCls}-inner-text`]: {
-          paddingInlineEnd: `${token.dividerNotDefaultTextPadding}px`,
+          paddingInlineEnd: sizePaddingEdgeHorizontal,
         },
       },
     },
@@ -161,35 +161,31 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
 // ============================== Export ==============================
 export default function useStyle(prefixCls: string): UseComponentStyleResult {
   const [theme, token, hashId] = useToken();
-  // FIXME
-  const dividerBorderColor = 'rgba(0, 0, 0, 6%)';
-
-  const dividerBorderWidth = token.controlLineWidth;
-
-  const dividerNotDefaultTextPadding = 0;
-  const dividerVerticalGutterMargin = token.marginXS;
-  const dividerHorizontalWithTextGutterMargin = token.margin;
-  const dividerHorizontalGutterMargin = token.marginLG;
-
-  const dividerToken: DividerToken = {
-    ...token,
-
-    dividerCls: `.${prefixCls}`,
-
-    dividerBorderColor,
-
-    dividerBorderWidth,
-
-    dividerNotDefaultTextPadding,
-    dividerVerticalGutterMargin,
-    dividerHorizontalWithTextGutterMargin,
-    dividerHorizontalGutterMargin,
-  };
 
   return [
-    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
+    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
-      genSharedDividerStyle(dividerToken),
+      const { divider } = token;
-    ]),
+
+      const dividerVerticalGutterMargin = token.marginSM;
+      const dividerHorizontalWithTextGutterMargin = token.margin;
+      const dividerHorizontalGutterMargin = token.marginLG;
+
+      const dividerToken: DividerToken = {
+        ...token,
+
+        dividerCls: `.${prefixCls}`,
+
+        sizePaddingEdgeHorizontal: 0,
+
+        dividerVerticalGutterMargin,
+        dividerHorizontalWithTextGutterMargin,
+        dividerHorizontalGutterMargin,
+
+        ...divider,
+      };
+
+      return [genSharedDividerStyle(dividerToken)];
+    }),
     hashId,
   ];
 }

components/input/style/index.tsx

@@ -75,7 +75,7 @@ const genInputLargeStyle = (token: InputToken): CSSObject => {
 };
 
 const genInputSmallStyle = (token: InputToken): CSSObject => ({
-  padding: `${token.inputPaddingVerticalSM}px ${token.paddingXS - 1}px`,
+  padding: `${token.inputPaddingVerticalSM}px ${token.controlPaddingHorizontalSM - 1}px`,
 });
 
 export const genStatusStyle = (token: InputToken): CSSObject => {
@@ -809,7 +809,7 @@ export const initInputToken = (
   ...token,
   prefixCls,
   iconPrefixCls,
-  inputAffixMargin: token.marginXXS,
+  inputAffixMargin: token.marginXS,
   inputPaddingVertical: Math.max(
     Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
       token.controlLineWidth,
@@ -823,7 +823,7 @@ export const initInputToken = (
       token.controlLineWidth,
     0,
   ),
-  inputPaddingHorizontal: token.paddingSM - token.controlLineWidth,
+  inputPaddingHorizontal: token.controlPaddingHorizontal - token.controlLineWidth,
   inputBorderHoverColor: token.colorPrimaryHover,
   inputBorderActiveColor: token.colorPrimaryHover,
 });

components/popover/index.tsx

@@ -31,10 +31,7 @@ const Popover = React.forwardRef<unknown, PopoverProps>(
     const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
     const rootPrefixCls = getPrefixCls();
 
-    const overlayCls = classNames(
+    const overlayCls = classNames(overlayClassName, hashId);
-      overlayClassName,
-      hashId,
-    );
 
     return wrapSSR(
       <Tooltip

components/popover/style/index.tsx

@@ -22,7 +22,7 @@ import {
 // FIXME
 type PopoverToken = DerivativeToken & {
   popoverCls: string;
-  iconPrefixCls: string,
+  iconPrefixCls: string;
   popoverBg: string;
   popoverColor: string;
   popoverMinWidth: number;
@@ -37,7 +37,6 @@ type PopoverToken = DerivativeToken & {
   popoverArrowOffsetHorizontal: number;
 };
 
-
 const genBaseStyle: GenerateStyle<PopoverToken> = token => {
   const {
     popoverCls,
@@ -126,7 +125,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = token => {
         [`> .${iconPrefixCls}`]: {
           position: 'absolute',
           // FIXME
-          top: 4 + ((lineHeight * fontSize - fontSize) / 2),
+          top: 4 + (lineHeight * fontSize - fontSize) / 2,
           color: colorWarning,
           fontSize,
         },
@@ -142,7 +141,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = token => {
         marginBottom: marginXS,
         textAlign: 'end',
 
-        'button': {
+        button: {
           marginInlineStart: marginSM,
         },
       },
@@ -172,9 +171,8 @@ const genBaseStyle: GenerateStyle<PopoverToken> = token => {
           ...roundedArrow(popoverArrowWidth, 5, popoverBg),
         },
       },
-
     },
-  }
+  };
 };
 
 const genPlacementStyle: GenerateStyle<PopoverToken> = token => {
@@ -235,7 +233,7 @@ const genPlacementStyle: GenerateStyle<PopoverToken> = token => {
       },
 
       [`&-placement-top ${popoverCls}-arrow`]: {
-        insetInlineStart : '50%',
+        insetInlineStart: '50%',
         transform: 'translateX(-50%)',
       },
 
@@ -328,7 +326,7 @@ const genPlacementStyle: GenerateStyle<PopoverToken> = token => {
         bottom: popoverArrowOffsetVertical,
       },
     },
-  }
+  };
 };
 
 // FIXME: special preset colors
@@ -353,11 +351,9 @@ const genColorStyle: GenerateStyle<PopoverToken> = token => {
   }, {} as CSSObject);
 };
 
-export const genPopoverStyle: GenerateStyle<PopoverToken> = (token: PopoverToken): CSSInterpolation => [
+export const genPopoverStyle: GenerateStyle<PopoverToken> = (
-  genBaseStyle(token),
+  token: PopoverToken,
-  genPlacementStyle(token),
+): CSSInterpolation => [genBaseStyle(token), genPlacementStyle(token), genColorStyle(token)];
-  genColorStyle(token),
-];
 
 export default function useStyle(
   prefixCls: string,

components/select/style/dropdown.tsx

@@ -123,7 +123,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
 
             [`&-selected:not(${selectItemCls}-option-disabled)`]: {
               color: token.colorText,
-              fontWeight: 600, // FIXME: Need design token?
+              fontWeight: token.fontWeightStrong,
               backgroundColor: token.controlItemBgActive,
 
               [`${selectItemCls}-option-state`]: {

components/select/style/index.tsx

@@ -96,7 +96,6 @@ const genStatusStyle = (
 
         [`${selectCls}-focused& ${selectCls}-selector`]: {
           borderColor: borderHoverColor,
-          // FIXME: missing variable of `@input-outline-offset`
           boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${outlineColor}`,
           borderInlineEndWidth: `${token.controlLineWidth}px !important`,
           outline: 0,
@@ -179,7 +178,6 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
         top: '50%',
         insetInlineStart: 'auto',
         insetInlineEnd: inputPaddingHorizontalBase,
-        width: token.fontSizeSM,
         height: token.fontSizeSM,
         marginTop: -token.fontSizeSM / 2,
         color: token.colorTextDisabled,
@@ -236,8 +234,10 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
         '&:hover': {
           color: token.colorTextSecondary,
         },
+      },
 
-        [`${selectCls}:hover &`]: {
+      '&:hover': {
+        [`${selectCls}-clear`]: {
           opacity: 1,
         },
       },
@@ -246,12 +246,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
     // ========================= Feedback ==========================
     [`${selectCls}-has-feedback`]: {
       [`${selectCls}-clear`]: {
-        insetInlineEnd: token.padding * 2,
+        insetInlineEnd: inputPaddingHorizontalBase + token.fontSize + token.paddingXXS,
-      },
-
-      // FIXME: what's this? @MadCcc
-      [`${selectCls}-selection-selected-value`]: {
-        paddingInlineEnd: 42,
       },
 
       [`${selectCls}-feedback-icon`]: {

components/select/style/multiple.tsx

@@ -148,7 +148,6 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
         display: 'inline-flex',
         position: 'relative',
         maxWidth: '100%',
-        // FIXME: no sure this style
         marginInlineStart: token.inputPaddingHorizontalBase - selectItemDist,
 
         [`

components/tree/style/index.tsx

@@ -26,7 +26,7 @@ const treeNodeFX = new Keyframes('ant-tree-node-fx-do-not-use', {
 const getSwitchStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({
   [`.${prefixCls}-switcher-icon`]: {
     display: 'inline-block',
-    fontSize: 10, // FIXME: missing token
+    fontSize: 10,
     verticalAlign: 'baseline',
 
     svg: {

components/typography/style/index.tsx

@@ -1,6 +1,6 @@
 // deps-lint-skip-all
 import { useStyleRegister, useToken } from '../../_util/theme';
-import type { UseComponentStyleResult, GenerateStyle } from '../../_util/theme';
+import type { UseComponentStyleResult, GenerateStyle, AliasToken } from '../../_util/theme';
 import { operationUnit } from '../../_util/theme/util/operationUnit';
 import {
   getTitleStyles,
@@ -10,12 +10,22 @@ import {
   getCopiableStyles,
   getEllipsisStyles,
 } from './mixins';
-import type { TypographyToken } from './mixins';
+
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+  sizeMarginHeadingVerticalStart: number | string;
+  sizeMarginHeadingVerticalEnd: number | string;
+}
+
+export interface TypographyToken extends AliasToken, ComponentToken {
+  typographyCls: string;
+}
 
 const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
-  const { prefixCls, titleMarginTop } = token.typography;
+  const { typographyCls, sizeMarginHeadingVerticalStart } = token;
+
   return {
-    [`.${prefixCls}`]: {
+    [typographyCls]: {
       color: token.colorText,
       overflowWrap: 'break-word',
       '&&-secondary': {
@@ -59,7 +69,7 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
       & + h4&,
       & + h5&
       `]: {
-        marginTop: titleMarginTop,
+        marginTop: sizeMarginHeadingVerticalStart,
       },
 
       [`
@@ -79,7 +89,7 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
         + h4,
         + h5
         `]: {
-          marginTop: titleMarginTop,
+          marginTop: sizeMarginHeadingVerticalStart,
         },
       },
 
@@ -89,9 +99,9 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
 
       // Operation
       [`
-      .${prefixCls}-expand,
+        ${typographyCls}-expand,
-      .${prefixCls}-edit,
+        ${typographyCls}-edit,
-      .${prefixCls}-copy
+        ${typographyCls}-copy
       `]: {
         ...operationUnit(token),
         marginInlineStart: token.marginXXS,
@@ -114,20 +124,23 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
 export default function useStyle(prefixCls: string): UseComponentStyleResult {
   const [theme, token, hashId] = useToken();
 
-  const typographyToken: TypographyToken = {
-    ...token,
-    typography: {
-      prefixCls,
-      titleMarginTop: '1.2em',
-      titleMarginBottom: '0.5em',
-      titleFontWeight: 600,
-    },
-  };
-
   return [
-    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
+    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
-      genTypographyStyle(typographyToken),
+      const { typography } = token;
-    ]),
+
+      const typographyToken: TypographyToken = {
+        ...token,
+
+        typographyCls: `.${prefixCls}`,
+
+        sizeMarginHeadingVerticalStart: '1.2em',
+        sizeMarginHeadingVerticalEnd: '0.5em',
+
+        ...typography,
+      };
+
+      return [genTypographyStyle(typographyToken)];
+    }),
     hashId,
   ];
 }

components/typography/style/mixins.tsx

@@ -9,37 +9,28 @@
 */
 import { gold } from '@ant-design/colors';
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { DerivativeToken, GenerateStyle } from '../../_util/theme';
+import type { GenerateStyle } from '../../_util/theme';
 import { operationUnit } from '../../_util/theme/util/operationUnit';
 import { initInputToken } from '../../input/style';
-
+import type { TypographyToken } from '.';
-export interface TypographyToken extends DerivativeToken {
-  typography: {
-    prefixCls: string;
-    titleMarginTop: string;
-    titleMarginBottom: string;
-    titleFontWeight: number;
-  };
-}
 
 // eslint-disable-next-line import/prefer-default-export
-const getTitleStyle = ({
+const getTitleStyle = (
-  fontSize,
+  fontSize: number,
-  lineHeight,
+  lineHeight: number,
-  color,
+  color: string,
-  typographyToken,
+  token: TypographyToken,
-}: {
+) => {
-  fontSize: number;
+  const { sizeMarginHeadingVerticalEnd, fontWeightStrong } = token;
-  lineHeight: number;
+
-  color: string;
+  return {
-  typographyToken: TypographyToken['typography'];
+    marginBottom: sizeMarginHeadingVerticalEnd,
-}) => ({
+    color,
-  marginBottom: typographyToken.titleMarginBottom,
+    fontWeight: fontWeightStrong,
-  color,
+    fontSize,
-  fontWeight: typographyToken.titleFontWeight,
+    lineHeight,
-  fontSize,
+  };
-  lineHeight,
+};
-});
 
 // eslint-disable-next-line import/prefer-default-export
 export const getTitleStyles: GenerateStyle<TypographyToken, CSSObject> = token => {
@@ -54,39 +45,43 @@ export const getTitleStyles: GenerateStyle<TypographyToken, CSSObject> = token =
       div&-h${headingLevel} > textarea,
       h${headingLevel}
     `
-    ] = getTitleStyle({
+    ] = getTitleStyle(
-      fontSize: token[`fontSizeHeading${headingLevel}`],
+      token[`fontSizeHeading${headingLevel}`],
-      lineHeight: token[`lineHeightHeading${headingLevel}`],
+      token[`lineHeightHeading${headingLevel}`],
-      color: token.colorTextHeading,
+      token.colorTextHeading,
-      typographyToken: token.typography,
+      token,
-    });
+    );
   });
   return styles;
 };
 
-export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = token => ({
+export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = token => {
-  'a&, a': {
+  const { typographyCls } = token;
-    ...operationUnit(token),
-    textDecoration: token.linkDecoration,
 
-    '&:active, &:hover': {
+  return {
-      textDecoration: token.linkHoverDecoration,
+    'a&, a': {
-    },
+      ...operationUnit(token),
-
+      textDecoration: token.linkDecoration,
-    [`&[disabled], &.${token.typography.prefixCls}-disabled`]: {
-      color: token.colorTextDisabled,
-      cursor: 'not-allowed',
 
       '&:active, &:hover': {
-        color: '@disabled-color',
+        textDecoration: token.linkHoverDecoration,
       },
 
-      '&:active': {
+      [`&[disabled], &${typographyCls}-disabled`]: {
-        pointerEvents: 'none',
+        color: token.colorTextDisabled,
+        cursor: 'not-allowed',
+
+        '&:active, &:hover': {
+          color: token.colorTextDisabled,
+        },
+
+        '&:active': {
+          pointerEvents: 'none',
+        },
       },
     },
-  },
+  };
-});
+};
 
 export const getResetStyles = (): CSSObject => ({
   code: {
@@ -188,6 +183,8 @@ export const getResetStyles = (): CSSObject => ({
 });
 
 export const getEditableStyles: GenerateStyle<TypographyToken, CSSObject> = token => {
+  const { typographyCls } = token;
+
   const inputToken = initInputToken(token, '', '');
   const inputShift = inputToken.inputPaddingVertical + 1;
   return {
@@ -200,7 +197,7 @@ export const getEditableStyles: GenerateStyle<TypographyToken, CSSObject> = toke
         marginBottom: `calc(1em - ${inputShift}px)`,
       },
 
-      [`.${token.typography.prefixCls}-edit-content-confirm`]: {
+      [`${typographyCls}-edit-content-confirm`]: {
         position: 'absolute',
         insetInlineEnd: token.marginXS + 2,
         insetBlockEnd: token.marginXS,