diff --git a/components/_util/theme/index.tsx b/components/_util/theme/index.tsx
index 8c8ced613b..d02f86dbac 100644
--- a/components/_util/theme/index.tsx
+++ b/components/_util/theme/index.tsx
@@ -3,9 +3,9 @@ import { CSSInterpolation, Theme, useCacheToken, useStyleRegister } from '@ant-d
 import genComponentStyleHook from './util/genComponentStyleHook';
 import defaultSeedToken, { derivative as defaultDerivative } from './themes/default';
 import version from '../../version';
-import { resetComponent, resetIcon, clearFix, roundedArrow } from './util';
+import { resetComponent, resetIcon, clearFix, roundedArrow, operationUnit } from './util';
 import formatToken from './util/alias';
-import statisticToken, { merge as mergeToken } from './util/statistic';
+import statisticToken, { merge as mergeToken, statistic } from './util/statistic';
 import { GlobalToken, PresetColors } from './interface';
 import type {
   SeedToken,
@@ -17,16 +17,20 @@ import type {
 import type { FullToken } from './util/genComponentStyleHook';
 
 export {
-  PresetColors,
+  // css utils
   resetComponent,
   resetIcon,
   clearFix,
   roundedArrow,
-  useStyleRegister,
+  operationUnit,
+  // colors
+  PresetColors,
   // Statistic
+  statistic,
   statisticToken,
   mergeToken,
-  // GenComponentStyleHook
+  // hooks
+  useStyleRegister,
   genComponentStyleHook,
 };
 
diff --git a/components/_util/theme/util/index.tsx b/components/_util/theme/util/index.tsx
index 374d3421c4..1768befd44 100644
--- a/components/_util/theme/util/index.tsx
+++ b/components/_util/theme/util/index.tsx
@@ -2,6 +2,7 @@
 import { CSSObject } from '@ant-design/cssinjs';
 import type { DerivativeToken } from '..';
 
+export { operationUnit } from './operationUnit';
 export { roundedArrow } from './roundedArrow';
 
 export const resetComponent = (token: DerivativeToken): CSSObject => ({
diff --git a/components/typography/style/index.tsx b/components/typography/style/index.tsx
index e6f1dd4a6c..4a2e6cb8f8 100644
--- a/components/typography/style/index.tsx
+++ b/components/typography/style/index.tsx
@@ -1,7 +1,6 @@
 // deps-lint-skip-all
-import { FullToken, genComponentStyleHook } from '../../_util/theme';
-import type { GenerateStyle } from '../../_util/theme';
-import { operationUnit } from '../../_util/theme/util/operationUnit';
+import type { FullToken, GenerateStyle } from '../../_util/theme';
+import { genComponentStyleHook, operationUnit } from '../../_util/theme';
 import {
   getTitleStyles,
   getResetStyles,
diff --git a/components/typography/style/mixins.tsx b/components/typography/style/mixins.tsx
index aa3d28752a..9e745ea5ec 100644
--- a/components/typography/style/mixins.tsx
+++ b/components/typography/style/mixins.tsx
@@ -10,7 +10,7 @@
 import { gold } from '@ant-design/colors';
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { GenerateStyle } from '../../_util/theme';
-import { operationUnit } from '../../_util/theme/util/operationUnit';
+import { operationUnit } from '../../_util/theme';
 import { initInputToken } from '../../input/style';
 import type { TypographyToken } from '.';
 
@@ -107,6 +107,7 @@ export const getResetStyles = (): CSSObject => ({
 
   mark: {
     padding: 0,
+    // FIXME hardcode in v4
     backgroundColor: gold[2],
   },
 
diff --git a/site/theme/template/Layout/DynamicTheme/Token.tsx b/site/theme/template/Layout/DynamicTheme/Token.tsx
index 737816674c..24ea4c3fc7 100644
--- a/site/theme/template/Layout/DynamicTheme/Token.tsx
+++ b/site/theme/template/Layout/DynamicTheme/Token.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-array-index-key */
 import * as React from 'react';
 import { Table, Space, TableProps, ConfigProvider, Select, Row, Col, Alert } from 'antd';
-import { statistic } from '../../../../../components/_util/theme/util/statistic';
+import { statistic } from '../../../../../components/_util/theme';
 
 const columns: TableProps<{ name: string; value: any }>['columns'] = [
   {