refactor: import css-in-js utils from theme (#35215)

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,
 };
 

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 => ({

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,

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],
   },
 

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'] = [
   {