refactor: Optimize theme export and add docs (#38902)

* refactor: Optimize theme export and add docs * chore: fix lint * chore: fix lint * chore: fix lint
ant-design · Nov 23, 2022 · 5d9cb2e · 5d9cb2e
1 parent 3a5bb06
commit 5d9cb2e
Show file tree

Hide file tree

Showing 131 changed files with 238 additions and 196 deletions.
diff --git a/.dumi/pages/index/index.tsx b/.dumi/pages/index/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, type FC } from 'react';
+import React, { type FC, useLayoutEffect } from 'react';
 import { useLocale as useDumiLocale } from 'dumi';
 import { css } from '@emotion/react';
 import useLocale from '../../hooks/useLocale';

diff --git a/components/_util/wave/style.ts b/components/_util/wave/style.ts
@@ -1,8 +1,8 @@
 import { Keyframes, useStyleRegister } from '@ant-design/cssinjs';
 import { useContext } from 'react';
 import { ConfigContext } from '../../config-provider';
-import type { AliasToken, GenerateStyle, UseComponentStyleResult } from '../../theme';
-import { useToken } from '../../theme';
+import type { AliasToken, GenerateStyle, UseComponentStyleResult } from '../../theme/internal';
+import { useToken } from '../../theme/internal';
 
 interface WaveToken extends AliasToken {
   hashId: string;

diff --git a/components/affix/style/index.tsx b/components/affix/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 interface AffixToken extends FullToken<'Affix'> {
   zIndexPopup: number;

diff --git a/components/alert/style/index.tsx b/components/alert/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 export interface ComponentToken {}

diff --git a/components/anchor/style/index.tsx b/components/anchor/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent, textEllipsis } from '../../style';
 
 export interface ComponentToken {}

diff --git a/components/avatar/style/index.tsx b/components/avatar/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 export interface ComponentToken {}

diff --git a/components/back-top/style/index.tsx b/components/back-top/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */

diff --git a/components/badge/style/index.tsx b/components/badge/style/index.tsx
@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle, PresetColorType } from '../../theme';
-import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme';
+import type { FullToken, GenerateStyle, PresetColorType } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 interface BadgeToken extends FullToken<'Badge'> {

diff --git a/components/breadcrumb/style/index.tsx b/components/breadcrumb/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { genFocusStyle, resetComponent } from '../../style';
 
 interface BreadcrumbToken extends FullToken<'Breadcrumb'> {

diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import type { SizeType } from '../config-provider/SizeContext';
-import { useToken } from '../theme';
+import { useToken } from '../theme/internal';
 import warning from '../_util/warning';
 
 export interface ButtonGroupProps {

diff --git a/components/button/style/group.tsx b/components/button/style/group.tsx
@@ -1,5 +1,5 @@
 import type { ButtonToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genButtonBorderStyle = (buttonTypeCls: string, borderColor: string) => ({
   // Border

diff --git a/components/button/style/index.tsx b/components/button/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genGroupStyle from './group';
 import { genFocusStyle } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';

diff --git a/components/calendar/style/index.tsx b/components/calendar/style/index.tsx
@@ -4,8 +4,8 @@ import type { PickerPanelToken } from '../../date-picker/style';
 import { genPanelStyle, initPickerPanelToken } from '../../date-picker/style';
 import type { InputToken } from '../../input/style';
 import { initInputToken } from '../../input/style';
-import type { FullToken } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
   yearControlWidth: number;

diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx
@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { clearFix, resetComponent, textEllipsis } from '../../style';
 
 export interface ComponentToken {}

diff --git a/components/carousel/style/index.tsx b/components/carousel/style/index.tsx
@@ -1,5 +1,5 @@
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 export interface ComponentToken {

diff --git a/components/cascader/style/index.tsx b/components/cascader/style/index.tsx
@@ -1,6 +1,6 @@
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook } from '../../theme/internal';
 import { textEllipsis } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 

diff --git a/components/checkbox/style/index.tsx b/components/checkbox/style/index.tsx
@@ -1,6 +1,6 @@
 import { Keyframes } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { genFocusOutline, resetComponent } from '../../style';
 
 export interface ComponentToken {}

diff --git a/components/collapse/style/index.tsx b/components/collapse/style/index.tsx
@@ -1,6 +1,6 @@
 import { genCollapseMotion } from '../../style/motion';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent, resetIcon } from '../../style';
 
 export interface ComponentToken {}

diff --git a/components/config-provider/__tests__/theme.test.tsx b/components/config-provider/__tests__/theme.test.tsx
@@ -4,8 +4,8 @@ import React from 'react';
 import ConfigProvider from '..';
 import { InputNumber } from '../..';
 import { render } from '../../../tests/utils';
-import { useToken } from '../../theme';
-import theme from '../../theme/export';
+import { useToken } from '../../theme/internal';
+import theme from '../../theme';
 import { resetWarned } from '../../_util/warning';
 
 const { defaultAlgorithm, darkAlgorithm, compactAlgorithm } = theme;

diff --git a/components/config-provider/hooks/useTheme.ts b/components/config-provider/hooks/useTheme.ts
@@ -2,7 +2,7 @@ import useMemo from 'rc-util/lib/hooks/useMemo';
 import shallowEqual from 'shallowequal';
 import type { OverrideToken } from '../../theme/interface';
 import type { ThemeConfig } from '../context';
-import { defaultConfig } from '../../theme';
+import { defaultConfig } from '../../theme/internal';
 
 export default function useTheme(
   theme?: ThemeConfig,

diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
@@ -10,7 +10,7 @@ import type { Locale } from '../locale-provider';
 import LocaleProvider, { ANT_MARK } from '../locale-provider';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale/en_US';
-import { DesignTokenContext } from '../theme';
+import { DesignTokenContext } from '../theme/internal';
 import defaultSeedToken from '../theme/themes/seed';
 import type { ConfigConsumerProps, CSPConfig, DirectionType, Theme, ThemeConfig } from './context';
 import { ConfigConsumer, ConfigContext, defaultIconPrefixCls } from './context';

diff --git a/components/config-provider/style/index.tsx b/components/config-provider/style/index.tsx
@@ -1,6 +1,6 @@
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { resetIcon } from '../../style';
-import { useToken } from '../../theme';
+import { useToken } from '../../theme/internal';
 
 const useStyle = (iconPrefixCls: string) => {
   const [theme, token] = useToken();

diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx
@@ -15,8 +15,8 @@ import {
   slideUpIn,
   slideUpOut,
 } from '../../style/motion';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import type { GlobalToken } from '../../theme/interface';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
 import { resetComponent, roundedArrow, textEllipsis } from '../../style';

diff --git a/components/descriptions/style/index.tsx b/components/descriptions/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent, textEllipsis } from '../../style';
 
 interface DescriptionsToken extends FullToken<'Descriptions'> {

diff --git a/components/divider/style/index.tsx b/components/divider/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */

diff --git a/components/drawer/style/index.tsx b/components/drawer/style/index.tsx
@@ -1,5 +1,5 @@
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genMotionStyle from './motion';
 
 export interface ComponentToken {

diff --git a/components/drawer/style/motion.tsx b/components/drawer/style/motion.tsx
@@ -1,5 +1,5 @@
 import type { DrawerToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genMotionStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
   const { componentCls, motionDurationSlow } = token;

diff --git a/components/dropdown/style/button.tsx b/components/dropdown/style/button.tsx
@@ -1,5 +1,5 @@
 import type { DropdownToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genButtonStyle: GenerateStyle<DropdownToken> = (token) => {
   const { componentCls, antCls, paddingXS, opacityLoading } = token;

diff --git a/components/dropdown/style/index.tsx b/components/dropdown/style/index.tsx
@@ -7,8 +7,8 @@ import {
   slideUpIn,
   slideUpOut,
 } from '../../style/motion';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genButtonStyle from './button';
 import genStatusStyle from './status';
 import { genFocusStyle, resetComponent, roundedArrow } from '../../style';

diff --git a/components/dropdown/style/status.tsx b/components/dropdown/style/status.tsx
@@ -1,5 +1,5 @@
 import type { DropdownToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genStatusStyle: GenerateStyle<DropdownToken> = (token) => {
   const { componentCls, menuCls, colorError, colorTextLightSolid } = token;

diff --git a/components/empty/simple.tsx b/components/empty/simple.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMemo } from 'react';
 import { TinyColor } from '@ctrl/tinycolor';
-import { useToken } from '../theme';
+import { useToken } from '../theme/internal';
 
 const Simple = () => {
   const [, token] = useToken();

diff --git a/components/empty/style/index.tsx b/components/empty/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {}

diff --git a/components/float-button/style/index.tsx b/components/float-button/style/index.tsx
@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { initFadeMotion } from '../../style/motion/fade';
 import { resetComponent } from '../../style';
 

diff --git a/components/form/style/index.tsx b/components/form/style/index.tsx
@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { genCollapseMotion, zoomIn } from '../../style/motion';
-import type { AliasToken, FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 interface FormToken extends FullToken<'Form'> {

diff --git a/components/grid/style/index.tsx b/components/grid/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 interface GridRowToken extends FullToken<'Grid'> {}
 

diff --git a/components/image/style/index.tsx b/components/image/style/index.tsx
@@ -2,8 +2,8 @@ import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
 import { genModalMaskStyle } from '../../modal/style';
 import { initZoomMotion, initFadeMotion } from '../../style/motion';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent, textEllipsis } from '../../style';
 
 export interface ComponentToken {

diff --git a/components/index.tsx b/components/index.tsx
@@ -126,7 +126,7 @@ export { default as Tabs } from './tabs';
 export type { TabPaneProps, TabsProps } from './tabs';
 export { default as Tag } from './tag';
 export type { TagProps, TagType } from './tag';
-export { default as theme } from './theme/export';
+export { default as theme } from './theme';
 export { default as TimePicker } from './time-picker';
 export type { TimePickerProps, TimeRangePickerProps } from './time-picker';
 export { default as Timeline } from './timeline';

diff --git a/components/input-number/style/index.tsx b/components/input-number/style/index.tsx
@@ -9,8 +9,8 @@ import {
   genStatusStyle,
   initInputToken,
 } from '../../input/style';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook } from '../../theme/internal';
 import { resetComponent, resetIcon } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 

diff --git a/components/input/style/index.tsx b/components/input/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import type { GlobalToken } from '../../theme/interface';
 import { clearFix, resetComponent } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';

diff --git a/components/layout/style/index.tsx b/components/layout/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genLayoutLightStyle from './light';
 
 export interface ComponentToken {

diff --git a/components/layout/style/light.ts b/components/layout/style/light.ts
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { LayoutToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genLayoutLightStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
   const { componentCls, colorBgContainer, colorBgBody, colorText } = token;

diff --git a/components/list/style/index.tsx b/components/list/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 export interface ComponentToken {

diff --git a/components/mentions/style/index.tsx b/components/mentions/style/index.tsx
@@ -7,8 +7,8 @@ import {
   genStatusStyle,
   initInputToken,
 } from '../../input/style';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook } from '../../theme/internal';
 import { resetComponent, textEllipsis } from '../../style';
 
 export interface ComponentToken {

diff --git a/components/menu/style/horizontal.tsx b/components/menu/style/horizontal.tsx
@@ -1,5 +1,5 @@
 import type { MenuToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
   const {