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
2025-06-07 09:26:06 +08:00 · 2022-03-25 17:54:57 +08:00 · 2022-03-25 17:54:57 +08:00 · 2aa33578c2
commit 2aa33578c2
parent c8b2b28c95
16 changed files with 170 additions and 170 deletions
--- a/components/_util/theme/interface.ts
+++ b/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;
--- a/components/_util/theme/util/alias.ts
+++ b/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,
-    controlPaddingHorizontalSM: 12,
+    controlPaddingHorizontal: 12,
+    controlPaddingHorizontalSM: 8,

    padding: 16,
    margin: 16,

-    paddingXXS: 2,
-    paddingXS: 4,
-    paddingSM: 8,
-    paddingLG: 32,
+    paddingXXS: 4,
+    paddingXS: 8,
+    paddingSM: 12,
+    paddingLG: 24,

-    marginXXS: 2,
-    marginXS: 4,
-    marginSM: 8,
-    marginLG: 32,
+    marginXXS: 4,
+    marginXS: 8,
+    marginSM: 12,
+    marginLG: 24,

    boxShadow: `
      0 3px 6px -4px rgba(0, 0, 0, 0.12),
--- a/components/_util/theme/util/index.tsx
+++ b/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,
--- a/components/_util/theme/util/roundedArrow.tsx
+++ b/components/_util/theme/util/roundedArrow.tsx
@ -2,11 +2,7 @@
 import { CSSObject } from '@ant-design/cssinjs';
 import seedToken from '../themes/default';

-export const roundedArrow = (
-  width: number,
-  outerRadius: number,
-  bgColor: string,
-): CSSObject => {
+export const roundedArrow = (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')`,
    },
  };
-}
+};
--- a/components/cascader/style/index.tsx
+++ b/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,
                  },
                },
--- a/components/checkbox/style/index.tsx
+++ b/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}`,
          },
        },

--- a/components/divider/style/index.tsx
+++ b/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': {
-          paddingInlineStart: `${token.dividerNotDefaultTextPadding}px`,
+        [`${dividerCls}-inner-text`]: {
+          paddingInlineStart: sizePaddingEdgeHorizontal,
        },
      },

@ -150,8 +150,8 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
          width: 0,
        },

-        '.ant-divider-inner-text': {
-          paddingInlineEnd: `${token.dividerNotDefaultTextPadding}px`,
+        [`${dividerCls}-inner-text`]: {
+          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] }, () => [
-      genSharedDividerStyle(dividerToken),
-    ]),
+    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
+      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,
  ];
 }
--- a/components/input/style/index.tsx
+++ b/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,
 });
--- a/components/popover/index.tsx
+++ b/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(
-      overlayClassName,
-      hashId,
-    );
+    const overlayCls = classNames(overlayClassName, hashId);

    return wrapSSR(
      <Tooltip
--- a/components/popover/style/index.tsx
+++ b/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 => [
-  genBaseStyle(token),
-  genPlacementStyle(token),
-  genColorStyle(token),
-];
+export const genPopoverStyle: GenerateStyle<PopoverToken> = (
+  token: PopoverToken,
+): CSSInterpolation => [genBaseStyle(token), genPlacementStyle(token), genColorStyle(token)];

 export default function useStyle(
  prefixCls: string,
--- a/components/select/style/dropdown.tsx
+++ b/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`]: {
--- a/components/select/style/index.tsx
+++ b/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,
-      },
-
-      // FIXME: what's this? @MadCcc
-      [`${selectCls}-selection-selected-value`]: {
-        paddingInlineEnd: 42,
+        insetInlineEnd: inputPaddingHorizontalBase + token.fontSize + token.paddingXXS,
      },

      [`${selectCls}-feedback-icon`]: {
--- a/components/select/style/multiple.tsx
+++ b/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,

        [`
--- a/components/tree/style/index.tsx
+++ b/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: {
--- a/components/typography/style/index.tsx
+++ b/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,
-      .${prefixCls}-edit,
-      .${prefixCls}-copy
+        ${typographyCls}-expand,
+        ${typographyCls}-edit,
+        ${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] }, () => [
-      genTypographyStyle(typographyToken),
-    ]),
+    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
+      const { typography } = token;
+
+      const typographyToken: TypographyToken = {
+        ...token,
+
+        typographyCls: `.${prefixCls}`,
+
+        sizeMarginHeadingVerticalStart: '1.2em',
+        sizeMarginHeadingVerticalEnd: '0.5em',
+
+        ...typography,
+      };
+
+      return [genTypographyStyle(typographyToken)];
+    }),
    hashId,
  ];
 }
--- a/components/typography/style/mixins.tsx
+++ b/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';
-
-export interface TypographyToken extends DerivativeToken {
-  typography: {
-    prefixCls: string;
-    titleMarginTop: string;
-    titleMarginBottom: string;
-    titleFontWeight: number;
-  };
-}
+import type { TypographyToken } from '.';

 // eslint-disable-next-line import/prefer-default-export
-const getTitleStyle = ({
-  fontSize,
-  lineHeight,
-  color,
-  typographyToken,
-}: {
-  fontSize: number;
-  lineHeight: number;
-  color: string;
-  typographyToken: TypographyToken['typography'];
-}) => ({
-  marginBottom: typographyToken.titleMarginBottom,
-  color,
-  fontWeight: typographyToken.titleFontWeight,
-  fontSize,
-  lineHeight,
-});
+const getTitleStyle = (
+  fontSize: number,
+  lineHeight: number,
+  color: string,
+  token: TypographyToken,
+) => {
+  const { sizeMarginHeadingVerticalEnd, fontWeightStrong } = token;
+
+  return {
+    marginBottom: sizeMarginHeadingVerticalEnd,
+    color,
+    fontWeight: fontWeightStrong,
+    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({
-      fontSize: token[`fontSizeHeading${headingLevel}`],
-      lineHeight: token[`lineHeightHeading${headingLevel}`],
-      color: token.colorTextHeading,
-      typographyToken: token.typography,
-    });
+    ] = getTitleStyle(
+      token[`fontSizeHeading${headingLevel}`],
+      token[`lineHeightHeading${headingLevel}`],
+      token.colorTextHeading,
+      token,
+    );
  });
  return styles;
 };

-export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = token => ({
-  'a&, a': {
-    ...operationUnit(token),
-    textDecoration: token.linkDecoration,
+export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = token => {
+  const { typographyCls } = token;

-    '&:active, &:hover': {
-      textDecoration: token.linkHoverDecoration,
-    },
-
-    [`&[disabled], &.${token.typography.prefixCls}-disabled`]: {
-      color: token.colorTextDisabled,
-      cursor: 'not-allowed',
+  return {
+    'a&, a': {
+      ...operationUnit(token),
+      textDecoration: token.linkDecoration,

      '&:active, &:hover': {
-        color: '@disabled-color',
+        textDecoration: token.linkHoverDecoration,
      },

-      '&:active': {
-        pointerEvents: 'none',
+      [`&[disabled], &${typographyCls}-disabled`]: {
+        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,